Merge pull request #11865 from GarvitSinghal47/develop

Standardize ContentCardList Component and Introduce ViewMoreButtonStates
learningequality · Feb 13, 2024 · df5965a · df5965a
2 parents 18a9f32 + 5a5b538
commit df5965a
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 29 deletions.
diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -53,6 +53,13 @@ export const GroupModals = {
   DELETE_GROUP: 'DELETE_GROUP',
 };
 
+export const ViewMoreButtonStates = {
+  LOADING: 'LOADING',
+  HAS_MORE: 'HAS_MORE',
+  NO_MORE: 'NO_MORE',
+  ERROR: 'ERROR',
+};
+
 export const pageNameToModuleMap = {
   [PageNames.EXAMS]: 'examsRoot',
   [PageNames.EXAM_REPORT]: 'examReport',

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/CreatePracticeQuizPage.vue
@@ -43,7 +43,7 @@
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import ResourceSelectionBreadcrumbs from '../../plan/LessonResourceSelectionPage/SearchTools/ResourceSelectionBreadcrumbs';
-  import { PageNames } from '../../../constants';
+  import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
   import ContentCardList from '../../plan/LessonResourceSelectionPage/ContentCardList';
   import commonCoach from '../../common';
   import CoachImmersivePage from '../../CoachImmersivePage';
@@ -58,7 +58,7 @@
     mixins: [commonCoreStrings, commonCoach],
     data() {
       return {
-        viewMoreButtonState: 'no_more_results',
+        viewMoreButtonState: ViewMoreButtonStates.NO_MORE,
         contentHasCheckbox: () => false,
         contentIsSelected: () => '',
       };

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -99,9 +99,9 @@
     </div>
   </div>
 
-</template>
-
-
+</template>
+
+
 <script>
 
   import uniqWith from 'lodash/uniqWith';
@@ -112,7 +112,7 @@
   import { ContentNodeResource, ChannelResource } from 'kolibri.resources';
   import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
   import useKResponsiveWindow from 'kolibri-design-system/lib/useKResponsiveWindow';
-  import { PageNames } from '../../../constants';
+  import { PageNames, ViewMoreButtonStates } from '../../../constants/index';
   import BookmarkIcon from '../LessonResourceSelectionPage/LessonContentCard/BookmarkIcon.vue';
   import useQuizResources from '../../../composables/useQuizResources';
   import { injectQuizCreation } from '../../../composables/useQuizCreation';
@@ -150,9 +150,9 @@
       // TODO let's not use text for this
       const viewMoreButtonState = computed(() => {
         if (hasMore.value) {
-          return 'yes';
+          return ViewMoreButtonStates.HAS_MORE;
         } else {
-          return 'no_more_results';
+          return ViewMoreButtonStates.NO_MORE;
         }
       });
 
@@ -450,9 +450,9 @@
     },
   };
 
-</script>
-
-
+</script>
+
+
 <style scoped lang="scss">
 
   @import '~kolibri-design-system/lib/styles/definitions';
@@ -536,4 +536,4 @@
     margin-top: 2em;
   }
 
-</style>
+</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
@@ -45,11 +45,11 @@
         @click="$emit('moreresults')"
       />
       <KCircularLoader
-        v-if="viewMoreButtonState === 'waiting' & loadingMoreState"
+        v-if="viewMoreButtonState === ViewMoreButtonStates.LOADING & loadingMoreState"
         :delay="false"
       />
       <!-- TODO introduce messages in next version -->
-      <p v-else-if="viewMoreButtonState === 'error'">
+      <p v-else-if="viewMoreButtonState === ViewMoreButtonStates.ERROR">
         <KIcon icon="error" />
         <!-- {{ $tr('moreResultsError') }} -->
       </p>
@@ -59,12 +59,14 @@
     </template>
   </div>
 
-</template>
-
-
+</template>
+
+
 <script>
 
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import { ViewMoreButtonStates } from '../../../constants/index';
+
   import LessonContentCard from './LessonContentCard';
 
   export default {
@@ -73,6 +75,12 @@
       LessonContentCard,
     },
     mixins: [commonCoreStrings],
+
+    setup() {
+      return {
+        ViewMoreButtonStates,
+      };
+    },
     props: {
       showSelectAll: {
         type: Boolean,
@@ -125,11 +133,10 @@
         default: false,
       },
     },
+
     computed: {
       showButton() {
-        return (
-          this.viewMoreButtonState !== 'waiting' && this.viewMoreButtonState !== 'no_more_results'
-        );
+        return this.viewMoreButtonState === this.ViewMoreButtonStates.HAS_MORE;
       },
       needCheckboxes() {
         return this.contentList.some(c => this.contentHasCheckbox(c));
@@ -150,9 +157,9 @@
     },
   };
 
-</script>
-
-
+</script>
+
+
 <style lang="scss" scoped>
 
   @import './LessonContentCard/card';
@@ -180,4 +187,4 @@
     margin-left: $checkbox-offset;
   }
 
-</style>
+</style>
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/index.vue
@@ -122,6 +122,7 @@
   import CoachAppBarPage from '../../CoachAppBarPage';
   import CoachImmersivePage from '../../CoachImmersivePage';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
+  import { ViewMoreButtonStates } from '../../../constants/index';
   import LessonsSearchBox from './SearchTools/LessonsSearchBox';
   import LessonsSearchFilters from './SearchTools/LessonsSearchFilters';
   import ResourceSelectionBreadcrumbs from './SearchTools/ResourceSelectionBreadcrumbs';
@@ -252,13 +253,16 @@
         );
       },
       viewMoreButtonState() {
-        if (this.moreResultsState === 'waiting' || this.moreResultsState === 'error') {
+        if (
+          this.moreResultsState === ViewMoreButtonStates.LOADING ||
+          this.moreResultsState === ViewMoreButtonStates.ERROR
+        ) {
           return this.moreResultsState;
         }
         if (!this.inSearchMode || this.numRemainingSearchResults === 0) {
-          return 'no_more_results';
+          return ViewMoreButtonStates.NO_MORE;
         }
-        return 'visible';
+        return ViewMoreButtonStates.HAS_MORE;
       },
       contentIsInLesson() {
         return ({ id }) =>
@@ -519,7 +523,7 @@
         });
       },
       handleMoreResults() {
-        this.moreResultsState = 'waiting';
+        this.moreResultsState = ViewMoreButtonStates.LOADING;
         this.fetchAdditionalSearchResults({
           searchTerm: this.searchTerm,
           kind: this.filters.kind,
@@ -530,7 +534,7 @@
             this.moreResultsState = null;
           })
           .catch(() => {
-            this.moreResultsState = 'error';
+            this.moreResultsState = ViewMoreButtonStates.ERROR;
           });
       },
       topicsLink(topicId) {