[GSoC] Use KTable in Facility -> Classes

kolibri/core/package.json

@@ -21,7 +21,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "4.3.2",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",

kolibri/plugins/facility/assets/src/views/ManageClassPage/index.vue

@@ -35,70 +35,48 @@
         </KGridItem>
       </KGrid>
 
-      <CoreTable
-        :dataLoading="dataLoading"
-        :emptyMessage="$tr('noClassesExist')"
+      <KTable
+        :headers="tableHeaders"
+        :rows="tableRows"
+        :caption="$tr('tableCaption')"
+        :useLocalSorting="true"
       >
-        <caption class="visuallyhidden">
-          {{
-            $tr('tableCaption')
-          }}
-        </caption>
-        <template #headers>
-          <th>{{ coreString('classNameLabel') }}</th>
-          <th>{{ coreString('coachesLabel') }}</th>
-          <th>{{ coreString('learnersLabel') }}</th>
-          <th>
-            <span class="visuallyhidden">
-              {{ coreString('userActionsColumnHeader') }}
-            </span>
-          </th>
+        <template #header="{ header }">
+          {{ header.label }}
         </template>
-        <template #tbody>
-          <transition-group
-            tag="tbody"
-            name="list"
-          >
-            <tr
-              v-for="classroom in sortedClassrooms"
-              :key="classroom.id"
+        <template #cell="{ content, rowIndex, colIndex, row }">
+          <span v-if="colIndex === 0">
+            <KRouterLink
+              :text="content"
+              :to="$store.getters.facilityPageLinks.ClassEditPage(row[3].id)"
+              icon="classes"
+            />
+          </span>
+          <span v-else-if="colIndex === 1">
+            <KOptionalText :text="coachNames(row[3]).length ? formattedCoachNames(row[3]) : ''" />
+            <KTooltip
+              v-if="formattedCoachNamesTooltip(tableRows[rowIndex][3])"
+              :reference="`coachNames${row[3].id}`"
+              :refs="$refs"
             >
-              <td>
-                <KRouterLink
-                  :text="classroom.name"
-                  :to="$store.getters.facilityPageLinks.ClassEditPage(classroom.id)"
-                  icon="classes"
-                />
-              </td>
-              <td>
-                <span :ref="`coachNames${classroom.id}`">
-                  <KOptionalText
-                    :text="coachNames(classroom).length ? formattedCoachNames(classroom) : ''"
-                  />
-                </span>
-                <KTooltip
-                  v-if="formattedCoachNamesTooltip(classroom)"
-                  :reference="`coachNames${classroom.id}`"
-                  :refs="$refs"
-                >
-                  {{ formattedCoachNamesTooltip(classroom) }}
-                </KTooltip>
-              </td>
-
-              <td>
-                {{ $formatNumber(classroom.learner_count) }}
-              </td>
-              <td class="core-table-button-col">
-                <KButton
-                  appearance="flat-button"
-                  :text="$tr('deleteClass')"
-                  @click="selectClassToDelete(classroom)"
-                />
-              </td>
-            </tr>
-          </transition-group>
+              {{ formattedCoachNamesTooltip(row[3]) }}
+            </KTooltip>
+          </span>
+          <span v-else-if="colIndex === 2">
+            {{ content }}
+          </span>
+          <span
+            v-else-if="colIndex === 3"
+            class="core-table-button-col"
+          >
+            <KButton
+              appearance="flat-button"
+              :text="$tr('deleteClass')"
+              @click="selectClassToDelete(row[3])"
+            />
+          </span>
         </template>
-      </CoreTable>
+      </KTable>
 
       <ClassDeleteModal
         v-if="Boolean(classToDelete)"
@@ -108,7 +86,7 @@
       />
       <ClassCreateModal
         v-if="modalShown === Modals.CREATE_CLASS"
-        :classes="sortedClassrooms"
+        :classes="classes"
         @cancel="closeModal"
         @success="handleCreateSuccess()"
       />
@@ -121,8 +99,6 @@
 <script>
 
   import { mapState, mapActions, mapGetters } from 'vuex';
-  import CoreTable from 'kolibri.coreVue.components.CoreTable';
-  import orderBy from 'lodash/orderBy';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
   import { Modals } from '../../constants';
   import FacilityAppBarPage from '../FacilityAppBarPage';
@@ -139,7 +115,6 @@
     },
     components: {
       FacilityAppBarPage,
-      CoreTable,
       ClassCreateModal,
       ClassDeleteModal,
     },
@@ -153,11 +128,39 @@
       };
     },
     computed: {
-      ...mapState('classManagement', ['modalShown', 'classes', 'dataLoading']),
+      ...mapState('classManagement', ['modalShown', 'classes']),
       ...mapGetters(['userIsMultiFacilityAdmin', 'facilityPageLinks']),
       Modals: () => Modals,
-      sortedClassrooms() {
-        return orderBy(this.classes, [classroom => classroom.name.toUpperCase()], ['asc']);
+      tableHeaders() {
+        return [
+          {
+            label: this.coreString('classNameLabel'),
+            dataType: 'string',
+            minWidth: '150px',
+            width: '20%',
+          },
+          {
+            label: this.coreString('coachesLabel'),
+            dataType: 'others',
+            minWidth: '150px',
+            width: '30%',
+          },
+          {
+            label: this.coreString('learnersLabel'),
+            dataType: 'numeric',
+            minWidth: '150px',
+            width: '20%',
+          },
+          { label: '', dataType: 'others', minWidth: '150px', width: '30%' },
+        ];
+      },
+      tableRows() {
+        return this.classes.map(classroom => [
+          classroom.name,
+          this.formattedCoachNames(classroom),
+          this.$formatNumber(classroom.learner_count),
+          classroom,
+        ]);
       },
     },
     methods: {
@@ -180,12 +183,13 @@
         }
       },
       // Duplicated in class-list-page
-      coachNames(classroom) {
-        const { coaches } = classroom;
+      coachNames(classes) {
+        const { coaches } = classes;
         return coaches.map(({ full_name }) => full_name);
       },
       formattedCoachNames(classroom) {
         const coach_names = this.coachNames(classroom);
+
         if (coach_names.length === 1) {
           return coach_names[0];
         }
@@ -234,11 +238,6 @@
         message: '{name1}, {name2}… (+{numRemaining, number})',
         context: 'DO NOT TRANSLATE\nCopy the source string.',
       },
-      noClassesExist: {
-        message: 'No classes exist',
-        context:
-          'Message that displays when there are no classes created in the Facility > Classes section.',
-      },
     },
   };
 

packages/kolibri-core-for-export/package.json

@@ -24,7 +24,7 @@
     "js-cookie": "^3.0.5",
     "knuth-shuffle-seeded": "^1.0.6",
     "kolibri-constants": "0.2.6",
-    "kolibri-design-system": "4.3.2",
+    "kolibri-design-system": "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a",
     "lockr": "0.8.5",
     "lodash": "^4.17.21",
     "loglevel": "^1.9.1",

yarn.lock

@@ -7648,10 +7648,9 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/kolibri-constants/-/kolibri-constants-0.2.6.tgz#d13762862505a3a6ec58a104870b21da96778656"
   integrity sha512-gQaY2wFNFrsB+9+xQNeEcLHixNuZEK+GHyKKr78s/hg8gFU3YVsnhlYp0u+du4XeVwewpyN1ajGb4UrrdF8rTA==
 
-[email protected]:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/kolibri-design-system/-/kolibri-design-system-4.3.2.tgz#1779fb5958499bd0cb1a65591a5ec8a82e0a2248"
-  integrity sha512-hsApuzPGAYxkQpcVlVLcY4GSgZAyrOzLLt+CQGj9XM1Lep99kiJuLysyNP0ZxRzmT/kKjx4jvIA8Mi81Ui5pkw==
+"kolibri-design-system@https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a":
+  version "5.0.0-rc1"
+  resolved "https://github.com/BabyElias/kolibri-design-system#39657cf513674d6f08f7630ee841eabb5b4aef6a"
   dependencies:
     "@vue/composition-api" "1.7.2"
     aphrodite "https://github.com/learningequality/aphrodite/"
@@ -7665,6 +7664,7 @@ [email protected]:
     purecss "2.2.0"
     tippy.js "4.2.1"
     vue-intl "3.1.0"
+    vue2-teleport "1.1.4"
     xstate "4.38.3"
 
 launch-editor-middleware@^2.8.0:
@@ -11596,7 +11596,7 @@ [email protected]:
     vue-observe-visibility "^0.4.4"
     vue-resize "^0.4.5"
 
-vue2-teleport@^1.1.4:
+vue2-teleport@1.1.4, vue2-teleport@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/vue2-teleport/-/vue2-teleport-1.1.4.tgz#30c84b1005bf9c208b1c05f4b6147300c54ee846"
   integrity sha512-mGTszyQP6k3sSSk7MBq+PZdVojHYLwg5772hl3UVpu5uaLBqWIZ5eNP6/TjkDrf1XUTTxybvpXC6inpjwO+i/Q==