fix filtering in Learners page

learningequality · Dec 6, 2024 · 8e66fe7 · 8e66fe7
1 parent 48ec9cd
commit 8e66fe7
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 12 deletions.
diff --git a/kolibri/plugins/coach/assets/src/views/learners/LearnerSummaryPage/LearnerHeader.vue b/kolibri/plugins/coach/assets/src/views/learners/LearnerSummaryPage/LearnerHeader.vue
@@ -240,7 +240,7 @@
       printLabel: {
         message: '{className} Learners',
         context:
-          "Title that displays on a printed copy of the 'Coach' > 'Quizzes' page. This shows if the user uses the 'Print' option by clicking on the printer icon.",
+          "Title that displays on a printed copy of the 'Learners' > 'Learner' page. This shows if the user uses the 'Print' option by clicking on the printer icon.",
       },
     },
   };

diff --git a/kolibri/plugins/coach/assets/src/views/learners/LearnersRootPage.vue b/kolibri/plugins/coach/assets/src/views/learners/LearnersRootPage.vue
@@ -7,9 +7,9 @@
       />
       <div class="filter">
         <KSelect
-          v-model="filterSelection"
+          v-model="recipientSelected"
           :label="coachString('recipientsLabel')"
-          :options="filterOptions"
+          :options="recipientsOptions"
           :inline="true"
         />
       </div>
@@ -67,13 +67,15 @@
   import sortBy from 'lodash/sortBy';
   import ElapsedTime from 'kolibri-common/components/ElapsedTime';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
+  import { ref } from '@vue/composition-api';
   import commonCoach from '../common';
   import CoachAppBarPage from '../CoachAppBarPage';
   import CSVExporter from '../../csv/exporter';
   import * as csvFields from '../../csv/fields';
   import CoachHeader from '../common/CoachHeader';
   import ReportsControls from '../common/ReportsControls';
   import { PageNames } from '../../constants';
+  import { coachStrings } from '../common/commonCoachStrings';
 
   export default {
     name: 'LearnersRootPage',
@@ -84,22 +86,25 @@
       CoachHeader,
     },
     mixins: [commonCoach, commonCoreStrings],
-    data() {
+    setup() {
+      const { entireClassLabel$ } = coachStrings;
+
+      const recipientSelected = ref({
+        label: entireClassLabel$(),
+        value: entireClassLabel$(),
+      });
+
       return {
-        filterOptions: [
-          {
-            label: this.coreString('allLabel'),
-            value: this.coreString('allLabel'),
-          },
-        ],
-        filterSelection: { label: this.coreString('allLabel'), value: this.coreString('allLabel') },
+        entireClassLabel$,
+        recipientSelected,
         PageNames,
       };
     },
     computed: {
       table() {
         const sorted = sortBy(this.learners, ['name']);
-        return sorted.map(learner => {
+
+        let augmentedTable = sorted.map(learner => {
           const groupNames = this.getGroupNames(
             this._.map(
               this.groups.filter(group => group.member_ids.includes(learner.id)),
@@ -121,6 +126,37 @@
           Object.assign(augmentedObj, learner);
           return augmentedObj;
         });
+
+        const recipientsFilter = this.recipientSelected.value;
+
+        if (recipientsFilter !== this.entireClassLabel$()) {
+          augmentedTable = augmentedTable.filter(entry => {
+            return entry.groups.includes(recipientsFilter) || entry.id === recipientsFilter;
+          });
+        }
+
+        return augmentedTable;
+      },
+
+      recipientsOptions() {
+        const groupOptions = this.groups.map(group => ({
+          label: group.name,
+          value: group.name,
+        }));
+
+        const learnerOptions = this.learners.map(learner => ({
+          label: learner.name,
+          value: learner.id,
+        }));
+
+        return [
+          {
+            label: this.entireClassLabel$(),
+            value: this.entireClassLabel$(),
+          },
+          ...groupOptions,
+          ...learnerOptions,
+        ];
       },
     },
     methods: {