صفحه بندی محتوا

src/api/models/Content.js

@@ -26,8 +26,8 @@ export default class ContentAPI extends APIRepository {
   index(data) {
     const normalizedSendData = this.getNormalizedSendData({
       category: null, // Number
-      per_page: 10, // Number
-      page: 1 // Number
+      page: 1, // Number
+      per_page: 10 // Number
     }, data)
     return this.sendRequest({
       apiMethod: 'get',

src/components/Widgets/ContentCategory/ContentCategoryList/ContentCategoryList.vue

@@ -13,13 +13,23 @@
       <q-linear-progress v-if="contents.loading"
                          class="q-my-md"
                          indeterminate />
-      <template v-else>
-        <div v-for="(content, contentIndex) in contents.list"
-             :key="contentIndex"
-             class="col-md-4 col-12">
-          <content-item :content="content" />
+      <q-infinite-scroll ref="infiniteScroll"
+                         :offset="250"
+                         @load="loadMoreContents">
+        <div class="row q-col-gutter-md">
+          <template v-for="(content, contentIndex) in contents.list"
+                    :key="contentIndex">
+            <div class="col-xs-12 col-sm-6 col-md-4">
+              <content-item :content="content" />
+            </div>
+          </template>
         </div>
-      </template>
+
+        <template v-slot:loading>
+          <q-spinner-dots v-if="contents.loading"
+                          size="40px" />
+        </template>
+      </q-infinite-scroll>
     </div>
   </div>
 </template>
@@ -57,6 +67,9 @@ export default {
       mounted: false,
       subFilterExpanded: false,
       contents: new ContentList(),
+      totalPage: null,
+      perPage: 12,
+      filters: {},
       contentCategories: new ContentCategoryList(),
       contentCategory: new ContentCategory(),
       contentCategoryParent: new ContentCategory(),
@@ -124,7 +137,8 @@ export default {
       this.loadContentCategory()
     }
     this.getContentCategories()
-    this.getContents({ selected_category: this.contentCategoryId })
+    this.filters = { selected_category: this.contentCategoryId }
+    this.getContents()
     this.mounted = true
   },
   methods: {
@@ -189,16 +203,32 @@ export default {
 
       return filter
     },
-    getContents (filters) {
+    getContents (page = 1) {
+      if (page === 1) {
+        this.contents.list = []
+        this.totalPage = null
+      }
       this.contents.loading = true
-      APIGateway.content.index({ ...filters, per_page: 9999 })
-        .then(({ list }) => {
-          this.contents = new ContentList(list)
+      APIGateway.content.index({ ...this.filters, page: page, per_page: this.perPage })
+        .then(({ list, paginate }) => {
+          const newList = new ContentList(list)
+          this.contents.list = [...this.contents.list, ...newList.list]
+          if (!this.totalPage) {
+            this.totalPage = paginate.num_pages
+          }
         })
         .finally(() => {
           this.contents.loading = false
         })
     },
+    loadMoreContents (index, done) {
+      if (this.totalPage < index + 1) {
+        done(true)
+      } else {
+        this.getContents(index + 1)
+        done()
+      }
+    },
     getContentCategories () {
       const filter = this.getFilterOfCategorySearch()
       this.contentCategories.loading = true
@@ -211,7 +241,13 @@ export default {
         })
     },
     onChangeFilter (newFilter) {
-      this.getContents({ ...newFilter, selected_category: this.contentCategoryId })
+      this.filters = { ...newFilter, selected_category: this.contentCategoryId }
+      this.getContents()
+      this.$nextTick(() => {
+        if (this.$refs.infiniteScroll) {
+          this.$refs.infiniteScroll.reset() // ریست کردن q-infinite-scroll
+        }
+      })
     }
   }
 }