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

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

@@ -9,11 +9,13 @@
     <filters :show-category-route-name="showCategoryRouteName"
              :content-categories="contentCategories"
              @filter="onChangeFilter" />
-    <div class="contents row">
+    <div v-if="mounted"
+         class="contents row">
       <q-linear-progress v-if="contents.loading"
                          class="q-my-md"
                          indeterminate />
       <q-infinite-scroll ref="infiniteScroll"
+                         :key="scrollKey"
                          :offset="250"
                          @load="loadMoreContents">
         <div class="row q-col-gutter-md">
@@ -68,6 +70,8 @@ export default {
       subFilterExpanded: false,
       contents: new ContentList(),
       totalPage: null,
+      nextPage: 1,
+      scrollKey: 0,
       perPage: 12,
       filters: {},
       contentCategories: new ContentCategoryList(),
@@ -138,7 +142,6 @@ export default {
     }
     this.getContentCategories()
     this.filters = { selected_category: this.contentCategoryId }
-    this.getContents()
     this.mounted = true
   },
   methods: {
@@ -203,30 +206,24 @@ export default {
 
       return filter
     },
-    getContents (page = 1) {
-      if (page === 1) {
-        this.contents.list = []
-        this.totalPage = null
-      }
+    async loadMoreContents(index, done) {
+      if (this.contents.loading) return
       this.contents.loading = true
-      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()
+      try {
+        const { list, paginate } = await APIGateway.content.index({ ...this.filters, page: this.nextPage, per_page: this.perPage })
+        this.nextPage = paginate.current + 1
+        if (this.nextPage > paginate.num_pages) {
+          done(true) // پایان لیست
+        } else {
+          done()
+        }
+        const newList = new ContentList(list)
+        this.contents.list = [...this.contents.list, ...newList.list]
+      } catch (error) {
+        console.error('Error loading contents:', error)
+        done(true) // در صورت خطا بارگذاری را متوقف کن
+      } finally {
+        this.contents.loading = false
       }
     },
     getContentCategories () {
@@ -242,12 +239,9 @@ export default {
     },
     onChangeFilter (newFilter) {
       this.filters = { ...newFilter, selected_category: this.contentCategoryId }
-      this.getContents()
-      this.$nextTick(() => {
-        if (this.$refs.infiniteScroll) {
-          this.$refs.infiniteScroll.reset() // ریست کردن q-infinite-scroll
-        }
-      })
+      this.nextPage = 1
+      this.contents.list = []
+      this.scrollKey++ // مقدار کلید را تغییر بده تا کامپوننت دوباره رندر شود
     }
   }
 }