Fix view learn device regression

kolibri/plugins/coach/assets/src/views/common/ReportsControls.vue

@@ -8,7 +8,7 @@
     <div class="report-controls-buttons">
       <KRouterLink
         v-if="isMainReport"
-        :text="$tr('viewLearners')"
+        :text="coachString('viewLearners')"
         appearance="basic-link"
         :to="classLearnersListRoute"
       />
@@ -49,6 +49,7 @@
 
   import pickBy from 'lodash/pickBy';
   import useUser from 'kolibri/composables/useUser';
+  import { mapState, mapActions } from 'vuex';
   import commonCoach from '../common';
   import { ClassesPageNames } from '../../../../../learn/assets/src/constants';
   import { LastPages } from '../../constants/lastPagesConstants';
@@ -59,7 +60,6 @@
     mixins: [commonCoach],
     setup() {
       const { isAppContext } = useUser();
-
       return {
         isAppContext,
       };
@@ -74,19 +74,33 @@
         default: false,
       },
     },
+    data() {
+      return {
+        userList: [],
+      };
+    },
     computed: {
+      ...mapState('classSummary', ['learnerMap']),
       exportDisabled() {
         // Always disable in app mode until we add the ability to download files.
         return this.isAppContext || this.disableExport;
       },
+      filteredLearnMap() {
+        return Object.fromEntries(
+          Object.entries(this.learnerMap || {}).filter(([key]) => this.userList.includes(key)),
+        );
+      },
       isMainReport() {
-        return [
-          PageNames.LEARNERS_ROOT,
-          PageNames.LESSONS_ROOT,
-          PageNames.EXAMS_ROOT,
-          PageNames.EXAM_SUMMARY,
-          PageNames.LESSON_SUMMARY,
-        ].includes(this.$route.name);
+        return (
+          [
+            PageNames.LEARNERS_ROOT,
+            PageNames.LESSONS_ROOT,
+            PageNames.LESSONS_ROOT_BETTER,
+            PageNames.EXAMS_ROOT,
+            PageNames.EXAM_SUMMARY,
+            PageNames.LESSON_SUMMARY,
+          ].includes(this.$route.name) && Object.keys(this.filteredLearnMap).length > 0
+        );
       },
       classLearnersListRoute() {
         const { query } = this.$route;
@@ -105,11 +119,17 @@
         return route;
       },
     },
-    $trs: {
-      viewLearners: {
-        message: 'View learner devices',
-        context:
-          "Option in the Reports > Quizzes section which allows coach to view a list of the learners' devices.\n\nLearner devices are ones that have Kolibri features for learners, but not those for coaches and admins.",
+    created() {
+      this.fetchClassListSyncStatus();
+    },
+    methods: {
+      ...mapActions(['fetchUserSyncStatus']),
+      fetchClassListSyncStatus() {
+        this.fetchUserSyncStatus({ member_of: this.$route.params.classId }).then(data => {
+          if (Array.isArray(data)) {
+            this.userList = data.map(item => item.user);
+          }
+        });
       },
     },
   };

kolibri/plugins/coach/assets/src/views/common/commonCoachStrings.js

@@ -58,6 +58,10 @@ const coachStrings = createTranslator('CommonCoachStrings', {
     context:
       'Option to view all elements that make up a class. For example, all quizzes or all lessons.',
   },
+  viewLearners: {
+    message: 'View learner devices',
+    context: 'View a list of learners in a class.',
+  },
 
   // labels, phrases, titles, headers...
   activityLabel: {

kolibri/plugins/coach/assets/src/views/home/HomePage/OverviewBlock.vue

@@ -41,9 +41,9 @@
         </template>
         <template #value>
           {{ $formatNumber(learnerNames.length) }}
-          <template v-if="learnerNames.length > 0">
+          <template v-if="Object.keys(filteredLearnMap).length > 0">
             <KRouterLink
-              :text="$tr('viewLearners')"
+              :text="coachString('viewLearners')"
               appearance="basic-link"
               :to="classLearnersListRoute"
               style="margin-left: 24px"
@@ -59,10 +59,11 @@
 
 <script>
 
-  import { mapGetters } from 'vuex';
+  import { mapGetters, mapActions } from 'vuex';
   import pickBy from 'lodash/pickBy';
   import commonCoreStrings from 'kolibri/uiText/commonCoreStrings';
   import useFacilities from 'kolibri-common/composables/useFacilities';
+  import { ref } from 'vue';
   import { ClassesPageNames } from '../../../../../../learn/assets/src/constants';
   import commonCoach from '../../common';
   import { LastPages } from '../../../constants/lastPagesConstants';
@@ -72,13 +73,19 @@
     mixins: [commonCoach, commonCoreStrings],
     setup() {
       const { userIsMultiFacilityAdmin } = useFacilities();
-      return { userIsMultiFacilityAdmin };
+      const userList = ref([]);
+      return { userIsMultiFacilityAdmin, userList };
     },
     computed: {
       ...mapGetters(['classListPageEnabled']),
       coachNames() {
         return this.coaches.map(coach => coach.name);
       },
+      filteredLearnMap() {
+        return Object.fromEntries(
+          Object.entries(this.learnerMap || {}).filter(([key]) => this.userList.includes(key)),
+        );
+      },
       learnerNames() {
         return this.learners.map(learner => learner.name);
       },
@@ -106,6 +113,19 @@
         return route;
       },
     },
+    created() {
+      this.fetchClassListSyncStatus();
+    },
+    methods: {
+      ...mapActions(['fetchUserSyncStatus']),
+      fetchClassListSyncStatus() {
+        this.fetchUserSyncStatus({ member_of: this.$route.params.classId }).then(data => {
+          if (Array.isArray(data)) {
+            this.userList = data.map(item => item.user);
+          }
+        });
+      },
+    },
     $trs: {
       allClassesLabel: {
         message: 'All classes',
@@ -119,10 +139,6 @@
         message: '{count, plural, one {Learner} other {Learners}}',
         context: 'Refers to the learner or learners who are in a class.',
       },
-      viewLearners: {
-        message: 'View learners',
-        context: 'Button which allows coach to view a list of learners in a class.',
-      },
     },
   };