diff options
| -rw-r--r-- | src/client/app/common/views/components/index.ts | 2 | ||||
| -rw-r--r-- | src/client/app/common/views/components/ui/pagination.vue | 36 | ||||
| -rw-r--r-- | src/client/app/common/views/pages/pages.vue | 106 |
3 files changed, 58 insertions, 86 deletions
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 65e689c896..d5392fb8cd 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -45,6 +45,7 @@ import uiSelect from './ui/select.vue'; import uiInfo from './ui/info.vue'; import uiMargin from './ui/margin.vue'; import uiHr from './ui/hr.vue'; +import uiPagination from './ui/pagination.vue'; import formButton from './ui/form/button.vue'; import formRadio from './ui/form/radio.vue'; @@ -93,5 +94,6 @@ Vue.component('ui-select', uiSelect); Vue.component('ui-info', uiInfo); Vue.component('ui-margin', uiMargin); Vue.component('ui-hr', uiHr); +Vue.component('ui-pagination', uiPagination); Vue.component('form-button', formButton); Vue.component('form-radio', formRadio); diff --git a/src/client/app/common/views/components/ui/pagination.vue b/src/client/app/common/views/components/ui/pagination.vue new file mode 100644 index 0000000000..67aa89d369 --- /dev/null +++ b/src/client/app/common/views/components/ui/pagination.vue @@ -0,0 +1,36 @@ +<template> +<div class="mwermpua" v-if="!fetching"> + <sequential-entrance animation="entranceFromTop" delay="25"> + <slot :items="items"></slot> + </sequential-entrance> + <div class="more" v-if="more"> + <ui-button @click="fetchMore()">{{ $t('@.load-more') }}</ui-button> + </div> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import paging from '../../../scripts/paging'; + +export default Vue.extend({ + mixins: [ + paging({ + captureWindowScroll: false, + }), + ], + + props: { + pagination: { + required: true + }, + }, +}); +</script> + +<style lang="stylus" scoped> +.mwermpua + > .more + margin-top 16px + +</style> diff --git a/src/client/app/common/views/pages/pages.vue b/src/client/app/common/views/pages/pages.vue index 9b0a19d455..d0a56ac2fa 100644 --- a/src/client/app/common/views/pages/pages.vue +++ b/src/client/app/common/views/pages/pages.vue @@ -2,22 +2,20 @@ <div> <ui-container :body-togglable="true"> <template #header><fa :icon="faEdit" fixed-width/>{{ $t('my-pages') }}</template> - <div class="rknalgpo" v-if="!fetching"> + <div class="rknalgpo my"> <ui-button class="new" @click="create()"><fa :icon="faPlus"/></ui-button> - <sequential-entrance animation="entranceFromTop" delay="25" tag="div" class="pages"> - <x-page-preview v-for="page in pages" class="page" :page="page" :key="page.id"/> - </sequential-entrance> - <ui-button v-if="existMore" @click="fetchMore()" style="margin-top:16px;">{{ $t('@.load-more') }}</ui-button> + <ui-pagination :pagination="myPagesPagination" #default="{items}"> + <x-page-preview v-for="page in items" class="ckltabjg" :page="page" :key="page.id"/> + </ui-pagination> </div> </ui-container> <ui-container :body-togglable="true"> <template #header><fa :icon="faHeart" fixed-width/>{{ $t('liked-pages') }}</template> - <div class="rknalgpo" v-if="!fetching"> - <sequential-entrance animation="entranceFromTop" delay="25" tag="div" class="pages"> - <x-page-preview v-for="like in likes" class="page" :page="like.page" :key="like.page.id"/> - </sequential-entrance> - <ui-button v-if="existMoreLikes" @click="fetchMoreLiked()">{{ $t('@.load-more') }}</ui-button> + <div class="rknalgpo"> + <ui-pagination :pagination="likedPagesPagination" #default="{items}"> + <x-page-preview v-for="like in items" class="ckltabjg" :page="like.page" :key="like.page.id"/> + </ui-pagination> </div> </ui-container> </div> @@ -28,7 +26,6 @@ import Vue from 'vue'; import { faPlus, faEdit } from '@fortawesome/free-solid-svg-icons'; import { faStickyNote, faHeart } from '@fortawesome/free-regular-svg-icons'; import i18n from '../../../i18n'; -import Progress from '../../scripts/loading'; import XPagePreview from '../../views/components/page-preview.vue'; export default Vue.extend({ @@ -38,87 +35,24 @@ export default Vue.extend({ }, data() { return { - fetching: true, - pages: [], - existMore: false, - moreFetching: false, - likes: [], - existMoreLikes: false, - moreLikesFetching: false, + myPagesPagination: { + endpoint: 'i/pages', + limit: 5, + }, + likedPagesPagination: { + endpoint: 'i/page-likes', + limit: 5, + }, faStickyNote, faPlus, faEdit, faHeart }; }, created() { - this.fetch(); - this.$emit('init', { title: this.$t('@.pages'), icon: faStickyNote }); }, methods: { - async fetch() { - Progress.start(); - this.fetching = true; - - const pages = await this.$root.api('i/pages', { - limit: 11 - }); - - if (pages.length == 11) { - this.existMore = true; - pages.pop(); - } - - const likes = await this.$root.api('i/page-likes', { - limit: 11 - }); - - if (likes.length == 11) { - this.existMoreLikes = true; - likes.pop(); - } - - this.pages = pages; - this.likes = likes; - this.fetching = false; - - Progress.done(); - }, - fetchMore() { - this.moreFetching = true; - this.$root.api('i/pages', { - limit: 11, - untilId: this.pages[this.pages.length - 1].id - }).then(pages => { - if (pages.length == 11) { - this.existMore = true; - pages.pop(); - } else { - this.existMore = false; - } - - this.pages = this.pages.concat(pages); - this.moreFetching = false; - }); - }, - fetchMoreLiked() { - this.moreLikesFetching = true; - this.$root.api('i/page-likes', { - limit: 11, - untilId: this.likes[this.likes.length - 1].id - }).then(pages => { - if (pages.length == 11) { - this.existMoreLikes = true; - pages.pop(); - } else { - this.existMoreLikes = false; - } - - this.likes = this.likes.concat(pages); - this.moreLikesFetching = false; - }); - }, create() { this.$router.push(`/i/pages/new`); } @@ -130,14 +64,14 @@ export default Vue.extend({ .rknalgpo padding 16px - > .new - margin-bottom 16px + &.my .ckltabjg:first-child + margin-top 16px - > * > .page:not(:last-child) + .ckltabjg:not(:last-child) margin-bottom 8px @media (min-width 500px) - > * > .page:not(:last-child) + .ckltabjg:not(:last-child) margin-bottom 16px </style> |