From 5f741ac46eaadce0b3ef2da7bfbeab2fc3a57e44 Mon Sep 17 00:00:00 2001 From: syuilo Date: Tue, 21 May 2019 06:31:51 +0900 Subject: [PATCH] Refactoring --- .../app/common/views/components/index.ts | 2 + .../common/views/components/ui/pagination.vue | 36 ++++++ src/client/app/common/views/pages/pages.vue | 106 ++++-------------- 3 files changed, 58 insertions(+), 86 deletions(-) create mode 100644 src/client/app/common/views/components/ui/pagination.vue diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 65e689c89..d5392fb8c 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 000000000..67aa89d36 --- /dev/null +++ b/src/client/app/common/views/components/ui/pagination.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/client/app/common/views/pages/pages.vue b/src/client/app/common/views/pages/pages.vue index 9b0a19d45..d0a56ac2f 100644 --- a/src/client/app/common/views/pages/pages.vue +++ b/src/client/app/common/views/pages/pages.vue @@ -2,22 +2,20 @@
-
+
- - - - {{ $t('@.load-more') }} + + +
-
- - - - {{ $t('@.load-more') }} +
+ + +
@@ -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