Show loader in the table in Coach-Plan-Groups

learningequality · Jul 7, 2023 · 9261dab · 9261dab
1 parent 2134f34
commit 9261dab
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/kolibri/plugins/coach/assets/src/composables/useGroups.js b/kolibri/plugins/coach/assets/src/composables/useGroups.js
@@ -0,0 +1,15 @@
+import { ref } from 'kolibri.lib.vueCompositionApi';
+
+// Place outside the function to keep the state
+const groupsAreLoading = ref(false);
+
+export function useGroups() {
+  function setGroupsLoading(loading) {
+    groupsAreLoading.value = loading;
+  }
+
+  return {
+    groupsAreLoading,
+    setGroupsLoading,
+  };
+}
diff --git a/kolibri/plugins/coach/assets/src/modules/groups/handlers.js b/kolibri/plugins/coach/assets/src/modules/groups/handlers.js
@@ -1,8 +1,15 @@
 import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
 import { LearnerGroupResource, FacilityUserResource } from 'kolibri.resources';
+import { useGroups } from '../../composables/useGroups';
+
+const { setGroupsLoading } = useGroups();
 
 export function showGroupsPage(store, classId) {
-  store.dispatch('loading');
+  // on this page, don't handle loading state globally so we can do it locally
+  store.dispatch('notLoading');
+
+  setGroupsLoading(true);
+
   const promises = [
     FacilityUserResource.fetchCollection({
       getParams: { member_of: classId },
@@ -36,7 +43,7 @@ export function showGroupsPage(store, classId) {
                 groups,
                 groupModalShown: false,
               });
-              store.dispatch('notLoading');
+              setGroupsLoading(false);
               store.dispatch('clearError');
             }
           },

diff --git a/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/GroupsPage/index.vue
@@ -19,7 +19,10 @@
           />
         </div>
 
-        <CoreTable>
+        <CoreTable
+          :dataLoading="groupsAreLoading"
+          :emptyMessage="$tr('noGroups')"
+        >
           <template #headers>
             <th>{{ coachString('nameLabel') }}</th>
             <th>{{ coreString('learnersLabel') }}</th>
@@ -38,10 +41,6 @@
           </template>
         </CoreTable>
 
-        <p v-if="!sortedGroups.length">
-          {{ $tr('noGroups') }}
-        </p>
-
         <CreateGroupModal
           v-if="showCreateGroupModal"
           :groups="sortedGroups"
@@ -79,6 +78,7 @@
   import CoreTable from 'kolibri.coreVue.components.CoreTable';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import commonCoach from '../../common';
+  import { useGroups } from '../../../composables/useGroups';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import PlanHeader from '../../plan/PlanHeader';
   import { GroupModals } from '../../../constants';
@@ -101,6 +101,7 @@
     },
     mixins: [commonCoach, commonCoreStrings],
     setup() {
+      const { groupsAreLoading } = useGroups();
       const selectedGroup = ref({
         name: '',
         id: '',
@@ -113,6 +114,7 @@
         setSelectedGroup(name, id) {
           selectedGroup.value = { name, id };
         },
+        groupsAreLoading,
       };
     },
     computed: {