Merge pull request #9555 from marcellamaki/fix-show-more-of-top-level…

…-resources Fix show more of top level resources
learningequality · Jul 11, 2022 · 42c7d93 · 42c7d93
2 parents 3496b82 + 68d333c
commit 42c7d93
Showing 1 changed file with 26 additions and 8 deletions.
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage.vue
@@ -185,16 +185,24 @@
               </KButton>
               <KCircularLoader v-if="t.id === subTopicLoading" />
             </div>
-            <!-- search results -->
+            <!-- resources that are not in a folder -->
             <HybridLearningCardGrid
               v-if="resources.length"
-              :contents="resources"
+              :contents="resourcesDisplayed"
               :numCols="numCols"
               :genContentLink="genContentLink"
               cardViewStyle="card"
               @toggleInfoPanel="toggleInfoPanel"
             />
-            <div v-if="topicMore" class="end-button-block">
+            <KButton
+              v-if="moreResources"
+              class="more-after-grid"
+              appearance="basic-link"
+              @click="handleShowMoreResources"
+            >
+              {{ $tr('showMore') }}
+            </KButton>
+            <div v-else-if="topicMore" class="end-button-block">
               <KButton
                 v-if="!topicMoreLoading"
                 :text="coreString('viewMoreAction')"
@@ -469,6 +477,7 @@
         currentViewStyle: 'card',
         currentCategory: null,
         showSearchModal: false,
+        showMoreResources: false,
         sidePanelIsOpen: false,
         sidePanelContent: null,
         expandedTopics: {},
@@ -527,12 +536,18 @@
         return this.channel.name;
       },
       resources() {
-        const resources = this.contents.filter(content => content.kind !== ContentNodeKinds.TOPIC);
-        // If there are no topics, then just display all resources we have loaded.
-        if (!this.topics.length) {
-          return resources;
+        return this.contents.filter(content => content.kind !== ContentNodeKinds.TOPIC);
+      },
+      resourcesDisplayed() {
+        // if no folders are shown at this level, show more resources to fill the space
+        // or if the user has explicitly requested to show more resources
+        if (!this.topics.length || this.showMoreResources) {
+          return this.resources;
         }
-        return resources.slice(0, this.childrenToDisplay);
+        return this.resources.slice(0, this.childrenToDisplay);
+      },
+      moreResources() {
+        return this.resourcesDisplayed.length < this.resources.length;
       },
       topics() {
         return this.contents.filter(content => content.kind === ContentNodeKinds.TOPIC);
@@ -737,6 +752,9 @@
           [topicId]: true,
         };
       },
+      handleShowMoreResources() {
+        this.showMoreResources = true;
+      },
       handleLoadMoreinSubtopic(topicId) {
         this.subTopicLoading = topicId;
         this.loadMoreContents(topicId).then(() => {