Merge pull request learningequality#11815 from AllanOXDi/resouce-sele…

…ction_ux_improvement Resource selection UX- Improvement
GarvitSinghal47 · Feb 12, 2024 · 18a9f32 · 18a9f32
2 parents 7dbfdea + b1f09dc
commit 18a9f32
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 13 deletions.
diff --git a/kolibri/plugins/coach/assets/src/composables/useQuizResources.js b/kolibri/plugins/coach/assets/src/composables/useQuizResources.js
@@ -8,7 +8,7 @@ import useFetchTree from './useFetchTree';
 import { QuizExercise } from './quizCreationSpecs.js';
 
 const logger = logging.getLogger(__filename);
-
+const _loadingMore = ref(false);
 /**
  * @typedef {Object} QuizResourcesConfig
  * @property { computed <string|null|undefined> } topicId - The id of the root node to fetch the
@@ -115,11 +115,15 @@ export default function useQuizResources({ topicId } = {}) {
    */
   async function fetchMoreQuizResources() {
     set(_loading, true);
+    set(_loadingMore, true);
     return fetchMore().then(async results => {
       set(_resources, [...get(_resources), ...results]);
       return annotateTopicsWithDescendantCounts(
         results.filter(({ kind }) => kind === ContentNodeKinds.TOPIC).map(topic => topic.id)
-      ).then(() => set(_loading, false));
+      ).then(() => {
+        set(_loading, false);
+        set(_loadingMore, false);
+      });
     });
   }
 
@@ -139,6 +143,7 @@ export default function useQuizResources({ topicId } = {}) {
     setResources,
     resources: computed(() => get(_resources)),
     loading: computed(() => get(_loading) || get(treeLoading)),
+    loadingMore: computed(() => get(_loadingMore)),
     fetchQuizResources,
     fetchMoreQuizResources,
     hasCheckbox,

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -1,15 +1,30 @@
 <template>
 
   <div class="select-resource">
-    <div v-if="loading">
+    <div v-if="loading && !loadingMore">
       <KCircularLoader />
     </div>
     <div v-else>
-      <h5
-        class="title-style"
-      >
-        {{ /* selectFoldersOrExercises$() */ }}
-      </h5>
+      <KGrid class="align-select-folder-style">
+        <KGridItem
+          :layout12="{ span: 1 }"
+          :layout8="{ span: 1 }"
+        >
+          <KIconButton
+            icon="back"
+            @click="goBack()"
+          />
+        </KGridItem>
+
+        <KGridItem
+          :layout12="{ span: 11 }"
+          :layout8="{ span: 7 }"
+        >
+          <h5 class="select-folder-style">
+            {{ selectFoldersOrExercises$() }}
+          </h5>
+        </KGridItem>
+      </KGrid>
 
       <div v-if="!isTopicIdSet && bookmarks.length && !showBookmarks">
 
@@ -41,7 +56,6 @@
         :channelsLink="channelsLink"
         :topicsLink="topicsLink"
       />
-
       <ContentCardList
         :contentList="contentList"
         :showSelectAll="true"
@@ -52,6 +66,7 @@
         :contentCardMessage="selectionMetadata"
         :contentCardLink="contentLink"
         :selectAllIndeterminate="selectAllIndeterminate"
+        :loadingMoreState="loadingMore"
         @changeselectall="toggleTopicInWorkingResources"
         @change_content_card="toggleSelected"
         @moreresults="fetchMoreQuizResources"
@@ -126,7 +141,7 @@
         sectionSettings$,
         selectFromBookmarks$,
         numberOfSelectedBookmarks$,
-        //selectFoldersOrExercises$,
+        selectFoldersOrExercises$,
         numberOfSelectedResources$,
         numberOfResources$,
         selectedResourcesInformation$,
@@ -191,6 +206,7 @@
         hasMore,
         annotateTopicsWithDescendantCounts,
         setResources,
+        loadingMore,
       } = useQuizResources({ topicId });
 
       const _loading = ref(true);
@@ -275,14 +291,15 @@
         hasCheckbox,
         loading,
         hasMore,
+        loadingMore,
         fetchMoreQuizResources,
         resetWorkingResourcePool,
         contentPresentInWorkingResourcePool,
         //contentList,
         sectionSettings$,
         selectFromBookmarks$,
         numberOfSelectedBookmarks$,
-        //selectFoldersOrExercises$,
+        selectFoldersOrExercises$,
         numberOfSelectedResources$,
         numberOfResources$,
         windowIsSmall,
@@ -353,6 +370,9 @@
       focusFirstEl() {
         this.$refs.textbox.focus();
       },
+      goBack() {
+        return this.$router.go(-1);
+      },
       contentLink(content) {
         if (this.showBookmarks) {
           return this.$route;
@@ -507,4 +527,13 @@
     }
   }
 
+  .select-folder-style {
+    margin-top: 0.5em;
+    font-size: 18px;
+  }
+
+  .align-select-folder-style {
+    margin-top: 2em;
+  }
+
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
@@ -39,13 +39,13 @@
 
     <template>
       <KButton
-        v-if="showButton"
+        v-if="showButton && !loadingMoreState"
         :text="coreString('viewMoreAction')"
         :primary="false"
         @click="$emit('moreresults')"
       />
       <KCircularLoader
-        v-if="viewMoreButtonState === 'waiting'"
+        v-if="viewMoreButtonState === 'waiting' & loadingMoreState"
         :delay="false"
       />
       <!-- TODO introduce messages in next version -->
@@ -120,6 +120,10 @@
         type: Function, // ContentNode => Route
         required: true,
       },
+      loadingMoreState: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       showButton() {