Paginate topics

contentcuration/contentcuration/frontend/channelEdit/views/CurrentTopicView.vue

@@ -172,7 +172,11 @@
             @deselect="selected = selected.filter(id => id !== $event)"
             @scroll="scroll"
             @editTitleDescription="showTitleDescriptionModal"
-          />
+          >
+            <template #pagination>
+              <slot name="pagination"></slot>
+            </template>
+          </NodePanel>
         </DraggableRegion>
       </VFadeTransition>
       <ResourceDrawer

contentcuration/contentcuration/frontend/channelEdit/views/NodePanel.vue

@@ -45,6 +45,7 @@
         />
       </template>
     </VList>
+    <slot name="pagination"></slot>
   </div>
 
 </template>

contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.spec.js

@@ -22,7 +22,7 @@ const GETTERS = {
     canManage: jest.fn(() => true),
   },
   contentNode: {
-    getContentNodeChildren: () => jest.fn(() => []),
+    getContentNodeChildren: () => jest.fn(() => ({ results: [], more: null })),
     getContentNodeAncestors: () => jest.fn(() => []),
     getContentNode: () => jest.fn(() => ({})),
     getTopicAndResourceCounts: () => jest.fn(() => ({ topicCount: 0, resourceCount: 0 })),
@@ -35,7 +35,7 @@ const ACTIONS = {
     loadContentNode: jest.fn(),
     headContentNode: () => jest.fn(),
     loadContentNodes: jest.fn(),
-    loadChildren: jest.fn(),
+    loadChildren: jest.fn(() => ({ results: [], more: null })),
   },
 };
 

contentcuration/contentcuration/frontend/channelEdit/views/TreeView/index.vue

@@ -128,6 +128,13 @@
             />
           </div>
         </template>
+        <template #pagination>
+          <div class="pagination-container">
+            <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
+              {{ $tr('showMore') }}
+            </KButton>
+          </div>
+        </template>
       </CurrentTopicView>
     </VContent>
   </TreeViewBase>
@@ -192,6 +199,8 @@
         },
         loading: true,
         listElevated: false,
+        more: null,
+        moreLoading: false,
       };
     },
     computed: {
@@ -285,25 +294,30 @@
       },
     },
     created() {
-      let childrenPromise;
-      // If viewing the root-level node, don't request anything, since the NodePanel.created
-      // hook will make a redundant request
-      if (this.nodeId === this.rootId) {
-        childrenPromise = Promise.resolve();
-      } else {
-        childrenPromise = this.loadContentNodes({ parent: this.rootId });
-      }
-      Promise.all([childrenPromise, this.loadAncestors({ id: this.nodeId })]).then(() => {
-        this.loading = false;
-        this.jumpToLocation();
-      });
+      const childrenPromise = this.loadChildren({ parent: this.rootId });
+      Promise.all([childrenPromise, this.loadAncestors({ id: this.nodeId })]).then(
+        ([childrenResponse]) => {
+          this.loading = false;
+          this.more = childrenResponse.more || null;
+          this.jumpToLocation();
+        }
+      );
     },
     methods: {
       ...mapMutations('contentNode', {
         collapseAll: 'COLLAPSE_ALL_EXPANDED',
         setExpanded: 'SET_EXPANSION',
       }),
-      ...mapActions('contentNode', ['loadAncestors', 'loadContentNodes']),
+      ...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;
+          });
+        }
+      },
       verifyContentNodeId(id) {
         this.nodeNotFound = false;
         return this.$store.dispatch('contentNode/headContentNode', id).catch(() => {
@@ -400,6 +414,7 @@
       openCurrentLocationButton: 'Expand to current folder location',
       updatedResourcesReadyForReview: 'Updated resources are ready for review',
       closeDrawer: 'Close',
+      showMore: 'Show more',
     },
   };
 
@@ -447,4 +462,10 @@
     }
   }
 
+  .pagination-container {
+    display: flex;
+    justify-content: flex-start;
+    margin: 4px;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/vuex/contentNode/actions.js

@@ -19,9 +19,10 @@ import * as publicApi from 'shared/data/public';
 import db from 'shared/data/db';
 
 export function loadContentNodes(context, params = {}) {
-  return ContentNode.where(params).then(contentNodes => {
+  return ContentNode.where(params).then(response => {
+    const contentNodes = response.results ? response.results : response;
     context.commit('ADD_CONTENTNODES', contentNodes);
-    return contentNodes;
+    return response;
   });
 }
 
@@ -70,7 +71,7 @@ export function loadContentNodeByNodeId(context, nodeId) {
 }
 
 export function loadChildren(context, { parent, published = null, complete = null }) {
-  const params = { parent };
+  const params = { parent, max_results: 25 };
   if (published !== null) {
     params.published = published;
   }

contentcuration/contentcuration/frontend/shared/data/constants.js

@@ -29,6 +29,7 @@ export const CHANGE_TYPES_LOOKUP = invert(CHANGE_TYPES);
 
 // Tables
 export const CHANGES_TABLE = 'changesForSyncing';
+export const PAGINATION_TABLE = 'pagination';
 
 export const TABLE_NAMES = {
   SESSION: 'session',

contentcuration/contentcuration/frontend/shared/data/index.js

@@ -1,6 +1,6 @@
 import * as Sentry from '@sentry/vue';
 import mapValues from 'lodash/mapValues';
-import { CHANGES_TABLE, TABLE_NAMES } from './constants';
+import { CHANGES_TABLE, PAGINATION_TABLE, TABLE_NAMES } from './constants';
 import db from './db';
 import { INDEXEDDB_RESOURCES } from './registry';
 import { startSyncing, stopSyncing, syncOnChanges } from './serverSync';
@@ -14,14 +14,18 @@ export function setupSchema() {
   if (!Object.keys(resources).length) {
     console.warn('No resources defined!'); // eslint-disable-line no-console
   }
-  // Version incremented to 3 to add new index on CHANGES_TABLE.
+  // Version incremented to 2 to add Bookmark table and new index on CHANGES_TABLE.
+  // Version incremented to 3 to add:
+  //   new index on CHANGES_TABLE.
+  //   PAGINATION_TABLE.
   db.version(3).stores({
     // A special table for logging unsynced changes
     // Dexie.js appears to have a table for this,
     // but it seems to squash and remove changes in ways
     // that I do not currently understand, so we engage
     // in somewhat duplicative behaviour instead.
     [CHANGES_TABLE]: 'rev++,[table+key],server_rev,type',
+    [PAGINATION_TABLE]: '[table+queryString]',
     ...mapValues(INDEXEDDB_RESOURCES, value => value.schema),
   });
 }