From f939b808eaa73eddd8651c31771c96c2f028699d Mon Sep 17 00:00:00 2001
From: Richard Tibbles <richard@learningequality.org>
Date: Fri, 23 Aug 2024 13:44:53 -0700
Subject: [PATCH] Always save the pagination result, so we invalidate the cache
 if needed. Move pagination into NodePanel where the contents of the topic are
 actually loaded and displayed.

---
 .../channelEdit/views/CurrentTopicView.vue    |  6 +---
 .../frontend/channelEdit/views/NodePanel.vue  | 29 +++++++++++++++++--
 .../channelEdit/views/TreeView/index.vue      | 27 +----------------
 .../frontend/shared/data/resources.js         | 10 +++----
 4 files changed, 32 insertions(+), 40 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
index afcd143a3a..7cfec94ce6 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue
@@ -172,11 +172,7 @@
             @deselect="selected = selected.filter(id => id !== $event)"
             @scroll="scroll"
             @editTitleDescription="showTitleDescriptionModal"
-          >
-            <template #pagination>
-              <slot name="pagination"></slot>
-            </template>
-          </NodePanel>
+          />
         </DraggableRegion>
       </VFadeTransition>
       <ResourceDrawer
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue b/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
index 8572c8eb51..e8d9dcaa2d 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue
@@ -45,7 +45,11 @@
         />
       </template>
     </VList>
-    <slot name="pagination"></slot>
+    <div class="pagination-container">
+      <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
+        {{ $tr('showMore') }}
+      </KButton>
+    </div>
   </div>
 
 </template>
@@ -80,6 +84,8 @@
     data() {
       return {
         loading: false,
+        more: null,
+        moreLoading: false,
       };
     },
     computed: {
@@ -102,12 +108,13 @@
     },
     created() {
       this.loading = true;
-      this.loadChildren({ parent: this.parentId }).then(() => {
+      this.loadChildren({ parent: this.parentId }).then(childrenResponse => {
         this.loading = false;
+        this.more = childrenResponse.more || null;
       });
     },
     methods: {
-      ...mapActions('contentNode', ['loadChildren']),
+      ...mapActions('contentNode', ['loadChildren', 'loadContentNodes']),
       goToNodeDetail(nodeId) {
         if (
           this.$route.params.nodeId === this.parentId &&
@@ -151,12 +158,22 @@
           }
         }
       },
+      loadMore() {
+        if (this.more && !this.moreLoading) {
+          this.moreLoading = true;
+          this.loadContentNodes(this.more).then(response => {
+            this.more = response.more || null;
+            this.moreLoading = false;
+          });
+        }
+      },
     },
     $trs: {
       emptyViewOnlyChannelText: 'Nothing in this channel yet',
       emptyTopicText: 'Nothing in this folder yet',
       emptyChannelText: 'Click "ADD" to start building your channel',
       emptyChannelSubText: 'Create, upload, or import resources from other channels',
+      showMore: 'Show more',
     },
   };
 
@@ -174,4 +191,10 @@
     background-color: var(--v-backgroundColor-base);
   }
 
+  .pagination-container {
+    display: flex;
+    justify-content: flex-start;
+    margin: 4px;
+  }
+
 </style>
diff --git a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
index b1cd0a67f7..38a17d2a0c 100644
--- a/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
+++ b/contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue
@@ -128,13 +128,6 @@
             />
           </div>
         </template>
-        <template #pagination>
-          <div class="pagination-container">
-            <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
-              {{ $tr('showMore') }}
-            </KButton>
-          </div>
-        </template>
       </CurrentTopicView>
     </VContent>
   </TreeViewBase>
@@ -199,8 +192,6 @@
         },
         loading: true,
         listElevated: false,
-        more: null,
-        moreLoading: false,
       };
     },
     computed: {
@@ -308,16 +299,7 @@
         collapseAll: 'COLLAPSE_ALL_EXPANDED',
         setExpanded: 'SET_EXPANSION',
       }),
-      ...mapActions('contentNode', ['loadAncestors', 'loadChildren', 'loadContentNodes']),
-      loadMore() {
-        if (this.more && !this.moreLoading) {
-          this.moreLoading = true;
-          this.loadContentNodes(this.more).then(response => {
-            this.more = response.more || null;
-            this.moreLoading = false;
-          });
-        }
-      },
+      ...mapActions('contentNode', ['loadAncestors', 'loadChildren']),
       verifyContentNodeId(id) {
         this.nodeNotFound = false;
         return this.$store.dispatch('contentNode/headContentNode', id).catch(() => {
@@ -414,7 +396,6 @@
       openCurrentLocationButton: 'Expand to current folder location',
       updatedResourcesReadyForReview: 'Updated resources are ready for review',
       closeDrawer: 'Close',
-      showMore: 'Show more',
     },
   };
 
@@ -462,10 +443,4 @@
     }
   }
 
-  .pagination-container {
-    display: flex;
-    justify-content: flex-start;
-    margin: 4px;
-  }
-
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/data/resources.js b/contentcuration/contentcuration/frontend/shared/data/resources.js
index 1c684ee07a..0ddf12c5e4 100644
--- a/contentcuration/contentcuration/frontend/shared/data/resources.js
+++ b/contentcuration/contentcuration/frontend/shared/data/resources.js
@@ -753,12 +753,10 @@ class Resource extends mix(APIResource, IndexedDBResource) {
   }
 
   savePagination(queryString, more) {
-    if (more) {
-      return this.transaction({ mode: 'rw' }, PAGINATION_TABLE, () => {
-        return db[PAGINATION_TABLE].put({ table: this.tableName, queryString, more });
-      });
-    }
-    return Promise.resolve();
+    return this.transaction({ mode: 'rw' }, PAGINATION_TABLE, () => {
+      // Always save the pagination even if null, so we know we have fetched it
+      return db[PAGINATION_TABLE].put({ table: this.tableName, queryString, more });
+    });
   }
 
   loadPagination(queryString) {