Add pagination to every place that displays long lists of nodes from loadChildren

contentcuration/contentcuration/frontend/channelEdit/components/move/MoveModal.vue

@@ -98,6 +98,11 @@
             <VDivider v-if="index < children.length - 1" :key="`move-divider-${node.id}`" />
           </template>
         </VList>
+        <div class="show-more-button-container">
+          <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
+            {{ showMoreLabel }}
+          </KButton>
+        </div>
       </VFlex>
       <ResourceDrawer
         :nodeId="previewNodeId"
@@ -146,6 +151,13 @@
   import Thumbnail from 'shared/views/files/Thumbnail';
   import { ContentKindsNames } from 'shared/leUtils/ContentKinds';
   import { titleMixin } from 'shared/mixins';
+  import { createTranslator } from 'shared/i18n';
+
+  // Can't use cross component translator to get the NodePanel translations
+  // here, because the NodePanel component imports this component.
+  const showMoreTranslator = createTranslator('NodePanel', {
+    showMore: 'Show more',
+  });
 
   export default {
     name: 'MoveModal',
@@ -182,6 +194,8 @@
       return {
         showNewTopicModal: false,
         loading: false,
+        more: null,
+        moreLoading: false,
         moveNodesInProgress: false,
         targetNodeId: null,
         previewNodeId: null,
@@ -234,6 +248,10 @@
       crumbs() {
         return this.getContentNodeAncestors(this.targetNodeId, true) || [];
       },
+      showMoreLabel() {
+        // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
+        return showMoreTranslator.$tr('showMore');
+      },
     },
     watch: {
       targetNodeId() {
@@ -247,7 +265,7 @@
       this.targetNodeId = this.currentLocationId || this.rootId;
     },
     methods: {
-      ...mapActions('contentNode', ['createContentNode', 'loadChildren']),
+      ...mapActions('contentNode', ['createContentNode', 'loadChildren', 'loadContentNodes']),
       isDisabled(node) {
         return this.moveNodeIds.includes(node.id);
       },
@@ -272,8 +290,9 @@
           return this.loadChildren({
             parent: this.targetNodeId,
             root_id: this.rootId,
-          }).then(() => {
+          }).then(childrenResponse => {
             this.loading = false;
+            this.more = childrenResponse.more || null;
           });
         }
         return Promise.resolve();
@@ -302,6 +321,15 @@
         });
         this.moveNodesInProgress = false;
       },
+      loadMore() {
+        if (this.more && !this.moreLoading) {
+          this.moreLoading = true;
+          this.loadContentNodes(this.more).then(response => {
+            this.more = response.more || null;
+            this.moreLoading = false;
+          });
+        }
+      },
     },
     $trs: {
       moveItems:
@@ -350,4 +378,11 @@
     }
   }
 
+  .show-more-button-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+    margin-bottom: 10px;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/views/ImportFromChannels/ContentTreeList.vue

@@ -43,6 +43,11 @@
           />
         </VFlex>
       </VLayout>
+      <div class="show-more-button-container">
+        <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
+          {{ showMoreLabel }}
+        </KButton>
+      </div>
     </div>
   </VContainer>
 
@@ -55,13 +60,17 @@
   import intersectionBy from 'lodash/intersectionBy';
   import { mapActions, mapGetters } from 'vuex';
   import find from 'lodash/find';
+  import NodePanel from '../NodePanel';
   import { RouteNames } from '../../constants';
   import BrowsingCard from './BrowsingCard';
   import Breadcrumbs from 'shared/views/Breadcrumbs';
   import Checkbox from 'shared/views/form/Checkbox';
   import LoadingText from 'shared/views/LoadingText';
   import { constantsTranslationMixin } from 'shared/mixins';
   import { ChannelListTypes } from 'shared/constants';
+  import { crossComponentTranslator } from 'shared/i18n';
+
+  const showMoreTranslator = crossComponentTranslator(NodePanel);
 
   export default {
     name: 'ContentTreeList',
@@ -85,6 +94,8 @@
     data() {
       return {
         loading: false,
+        more: null,
+        moreLoading: false,
       };
     },
     computed: {
@@ -142,39 +153,44 @@
           ...ancestorsLinks,
         ];
       },
+      showMoreLabel() {
+        // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
+        return showMoreTranslator.$tr('showMore');
+      },
     },
     watch: {
-      topicId(parent) {
+      topicId(newTopicId, oldTopicId) {
+        if (newTopicId !== oldTopicId && newTopicId) {
+          this.loadData();
+        }
+      },
+    },
+    created() {
+      this.loadData();
+    },
+    methods: {
+      ...mapActions('contentNode', ['loadChildren', 'loadAncestors', 'loadContentNodes']),
+      loadData() {
         this.loading = true;
-        return this.loadChildren({
-          parent,
+        const params = {
           complete: true,
-        }).then(() => {
+        };
+        const channelListType = this.$route.query.channel_list || ChannelListTypes.PUBLIC;
+        if (channelListType === ChannelListTypes.PUBLIC) {
+          // TODO: load from public API instead
+          // TODO: challenging because of node_id->id and root_id->channel_id
+          params.published = true;
+        }
+
+        return Promise.all([
+          this.loadChildren({ parent: this.topicId, ...params }).then(childrenResponse => {
+            this.more = childrenResponse.more || null;
+          }),
+          this.loadAncestors({ id: this.topicId }),
+        ]).then(() => {
           this.loading = false;
         });
       },
-    },
-    mounted() {
-      this.loading = true;
-      const params = {
-        complete: true,
-      };
-      const channelListType = this.$route.query.channel_list || ChannelListTypes.PUBLIC;
-      if (channelListType === ChannelListTypes.PUBLIC) {
-        // TODO: load from public API instead
-        // TODO: challenging because of node_id->id and root_id->channel_id
-        params.published = true;
-      }
-
-      return Promise.all([
-        this.loadChildren({ parent: this.topicId, ...params }),
-        this.loadAncestors({ id: this.topicId }),
-      ]).then(() => {
-        this.loading = false;
-      });
-    },
-    methods: {
-      ...mapActions('contentNode', ['loadChildren', 'loadAncestors']),
       // @public
       scrollToNode(nodeId) {
         const ref = this.$refs[nodeId];
@@ -187,6 +203,15 @@
       toggleSelected(node) {
         this.$emit('change_selected', { nodes: [node], isSelected: !this.isSelected(node) });
       },
+      loadMore() {
+        if (this.more && !this.moreLoading) {
+          this.moreLoading = true;
+          this.loadContentNodes(this.more).then(response => {
+            this.more = response.more || null;
+            this.moreLoading = false;
+          });
+        }
+      },
     },
     $trs: {
       allChannelsLabel: 'Channels',

contentcuration/contentcuration/frontend/channelEdit/views/trash/TrashModal.vue

@@ -66,6 +66,11 @@
               </tr>
             </template>
           </VDataTable>
+          <div class="show-more-button-container">
+            <KButton v-if="more" :disabled="moreLoading" @click="loadMore">
+              {{ showMoreLabel }}
+            </KButton>
+          </div>
         </VCard>
       </VContainer>
       <ResourceDrawer
@@ -127,6 +132,7 @@
 
   import { mapActions, mapGetters } from 'vuex';
   import sortBy from 'lodash/sortBy';
+  import NodePanel from '../NodePanel';
   import MoveModal from '../../components/move/MoveModal';
   import ResourceDrawer from '../../components/ResourceDrawer';
   import { RouteNames } from '../../constants';
@@ -136,6 +142,9 @@
   import LoadingText from 'shared/views/LoadingText';
   import FullscreenModal from 'shared/views/FullscreenModal';
   import { titleMixin, routerMixin } from 'shared/mixins';
+  import { crossComponentTranslator } from 'shared/i18n';
+
+  const showMoreTranslator = crossComponentTranslator(NodePanel);
 
   export default {
     name: 'TrashModal',
@@ -159,6 +168,8 @@
       return {
         dialog: true,
         loading: false,
+        more: null,
+        moreLoading: false,
         previewNodeId: null,
         selected: [],
         showConfirmationDialog: false,
@@ -201,6 +212,10 @@
       counts() {
         return this.getTopicAndResourceCounts(this.selected);
       },
+      showMoreLabel() {
+        // eslint-disable-next-line kolibri/vue-no-undefined-string-uses
+        return showMoreTranslator.$tr('showMore');
+      },
     },
     watch: {
       dialog(newValue) {
@@ -210,21 +225,12 @@
       },
     },
     created() {
-      Promise.all([
-        this.loadContentNodes({ parent__in: [this.rootId] }),
+      this.loadContentNodes({ parent__in: [this.rootId] }),
         this.loadAncestors({ id: this.nodeId }),
-      ]);
+        this.loadNodes();
     },
     mounted() {
-      this.loading = true;
-      if (!this.trashId) {
-        this.loading = false;
-        return;
-      }
       this.updateTabTitle(this.$store.getters.appendChannelName(this.$tr('trashModalTitle')));
-      this.loadChildren({ parent: this.trashId }).then(() => {
-        this.loading = false;
-      });
     },
     methods: {
       ...mapActions('contentNode', [
@@ -234,6 +240,17 @@
         'loadContentNodes',
         'loadAncestors',
       ]),
+      loadNodes() {
+        this.loading = true;
+        if (!this.trashId) {
+          this.loading = false;
+          return;
+        }
+        this.loadChildren({ parent: this.trashId }).then(childrenResponse => {
+          this.loading = false;
+          this.more = childrenResponse.more || null;
+        });
+      },
       moveNodes(target) {
         return this.moveContentNodes({
           id__in: this.selected,
@@ -242,6 +259,8 @@
         }).then(() => {
           this.reset();
           this.$refs.moveModal && this.$refs.moveModal.moveComplete();
+          // Reload after this to ensure that anything over the pagination fold is loaded now
+          this.loadNodes();
         });
       },
       reset() {
@@ -254,6 +273,8 @@
           this.showConfirmationDialog = false;
           this.reset();
           this.$store.dispatch('showSnackbar', { text });
+          // Reload after this to ensure that anything over the pagination fold is loaded now
+          this.loadNodes();
         });
       },
       toggleSelectAll(selectAll) {
@@ -262,6 +283,15 @@
       getItemBackground(id) {
         return this.previewNodeId === id ? this.$vuetify.theme.greyBackground : 'transparent';
       },
+      loadMore() {
+        if (this.more && !this.moreLoading) {
+          this.moreLoading = true;
+          this.loadContentNodes(this.more).then(response => {
+            this.more = response.more || null;
+            this.moreLoading = false;
+          });
+        }
+      },
     },
     $trs: {
       trashModalTitle: 'Trash',
@@ -283,4 +313,10 @@
 </script>
 <style lang="less" scoped>
 
+  .show-more-button-container {
+    display: flex;
+    justify-content: center;
+    width: 100%;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/views/trash/__tests__/trashModal.spec.js

@@ -55,7 +55,7 @@ function makeWrapper(items) {
     methods: {
       loadContentNodes: jest.fn(),
       loadAncestors: jest.fn(),
-      loadChildren: jest.fn(() => Promise.resolve()),
+      loadChildren: jest.fn(() => Promise.resolve({ more: null, results: [] })),
     },
     stubs: {
       ResourceDrawer: true,