TheCloud/PronounsPage
1
0
Fork 0
mirror of https://gitlab.com/PronounsPage/PronounsPage.git synced 2025-09-24 05:05:20 -04:00
Code Issues Packages Projects Releases Wiki Activity

#82 [nouns] pagination

Browse Source
This commit is contained in:
Andrea Vos 2020-10-29 19:57:50 +01:00
parent 3321f94cd3
commit 1ab3bfcae5
2 changed files with 45 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/style.scss
View File

@ -33,7 +33,7 @@ $container-max-widths: (
//@import "~bootstrap/scss/navbar"; //@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/card"; @import "~bootstrap/scss/card";
//@import "~bootstrap/scss/breadcrumb"; //@import "~bootstrap/scss/breadcrumb";
//@import "~bootstrap/scss/pagination"; @import "~bootstrap/scss/pagination";
@import "~bootstrap/scss/badge"; @import "~bootstrap/scss/badge";
//@import "~bootstrap/scss/jumbotron"; //@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/alert"; @import "~bootstrap/scss/alert";

58
routes/nouns.vue
View File

@ -23,8 +23,8 @@
<Loading :value="nounsRaw"> <Loading :value="nounsRaw">
<section v-if="$admin()" class="px-3"> <section v-if="$admin()" class="px-3">
<div class="alert alert-info"> <div class="alert alert-info">
<strong>{{ nounsCountApproved() }}</strong> <T>nouns.approved</T>, <strong>{{ nounsCountApproved }}</strong> <T>nouns.approved</T>,
<strong>{{ nounsCountPending() }}</strong> <T>nouns.pending</T>. <strong>{{ nounsCountPending }}</strong> <T>nouns.pending</T>.
</div> </div>
</section> </section>
@ -52,7 +52,7 @@
<section class="table-responsive"> <section class="table-responsive">
<table :class="'table table-striped table-hover table-fixed-' + ($admin() ? 4 : 3)"> <table :class="'table table-striped table-hover table-fixed-' + ($admin() ? 4 : 3)">
<thead> <thead ref="thead" id="thead">
<tr> <tr>
<th class="text-nowrap"> <th class="text-nowrap">
<Icon v="mars"/> <Icon v="mars"/>
@ -70,8 +70,8 @@
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<template v-if="visibleNouns().length"> <template v-if="visibleNouns.length">
<tr v-for="noun in visibleNouns()" :class="{'mark-left': !noun.approved}" :key="noun.id"> <tr v-for="noun in visibleNounsPage" :class="{'mark-left': !noun.approved}" :key="noun.id">
<td> <td>
<ul class="list-singular"> <ul class="list-singular">
<li v-for="w in noun.masc">{{ w }}</li> <li v-for="w in noun.masc">{{ w }}</li>
@ -174,6 +174,21 @@
</tr> </tr>
</template> </template>
</tbody> </tbody>
<tfoot v-if="pages > 1">
<tr>
<td :colspan="$admin() ? 4 : 3">
<nav>
<ul class="pagination pagination-sm justify-content-center">
<li v-for="(_, i) in new Array(pages)" :class="['page-item', i === page ? 'active' : '']">
<a class="page-link" href="#" @click.prevent="page = i">
{{i + 1}}
</a>
</li>
</ul>
</nav>
</td>
</tr>
</tfoot>
</table> </table>
</section> </section>
@ -195,12 +210,15 @@
import { head } from "../src/helpers"; import { head } from "../src/helpers";
import NounsExtra from "../data/nouns/NounsExtra.vue"; import NounsExtra from "../data/nouns/NounsExtra.vue";
const PER_PAGE = 30;
export default { export default {
components: { NounsExtra }, components: { NounsExtra },
data() { data() {
return { return {
filter: '', filter: '',
nounsRaw: undefined, nounsRaw: undefined,
page: 0,
} }
}, },
mounted() { mounted() {
@ -257,15 +275,6 @@
delete this.nouns[noun.id]; delete this.nouns[noun.id];
this.$forceUpdate(); this.$forceUpdate();
}, },
visibleNouns() {
return Object.values(this.nouns).filter(n => n.matches(this.filter));
},
nounsCountApproved() {
return Object.values(this.nouns).filter(n => n.approved).length;
},
nounsCountPending() {
return Object.values(this.nouns).filter(n => !n.approved).length;
},
}, },
computed: { computed: {
nouns() { nouns() {
@ -288,6 +297,21 @@
} }
}, this); }, this);
}, },
visibleNouns() {
return Object.values(this.nouns).filter(n => n.matches(this.filter));
},
visibleNounsPage() {
return this.visibleNouns.slice(this.page * PER_PAGE, (this.page + 1) * PER_PAGE);
},
pages() {
return Math.ceil(this.visibleNouns.length / PER_PAGE);
},
nounsCountApproved() {
return Object.values(this.nouns).filter(n => n.approved).length;
},
nounsCountPending() {
return Object.values(this.nouns).filter(n => !n.approved).length;
},
}, },
watch: { watch: {
filter() { filter() {
@ -297,6 +321,12 @@
} else { } else {
history.pushState('', document.title, window.location.pathname + window.location.search); history.pushState('', document.title, window.location.pathname + window.location.search);
} }
this.page = 0;
setTimeout(_ => {
if (this.$refs.thead) {
this.$refs.thead.scrollIntoView();
}
}, 300);
} }
} }
}, },