Merge pull request #14419 from akolson/hid-mark-attendance-button

Hide mark attendance button when no learners are enrolled

Author: rtibbles

kolibri/plugins/coach/frontend/views/home/HomePage/AttendanceBlock.vue

@@ -9,7 +9,7 @@
       {{ attendanceLabel$() }}
     </template>
 
-    <div>
+    <div v-if="learners.length">
       <KRouterLink
         :text="markAttendanceAction$()"
         :primary="true"
@@ -20,9 +20,14 @@
 
     <KCircularLoader v-if="loading" />
 
-    <p v-else-if="sessions.length === 0">
-      {{ noSessionsMessage$() }}
-    </p>
+    <div v-else-if="sessions.length === 0">
+      <p v-if="learners.length">
+        {{ noSessionsMessage$() }}
+      </p>
+      <p v-else>
+        {{ noSessionsEnrollMessage$() }}
+      </p>
+    </div>
 
     <template v-else>
       <BlockItem
@@ -100,6 +105,7 @@
         noSessionsMessage$,
         presentCount$,
         absentCount$,
+        noSessionsEnrollMessage$,
       } = attendanceStrings;
 
       const loading = ref(true);
@@ -108,6 +114,8 @@
       const presentColor = palette.green.v_500;
       const absentColor = palette.red.v_500;
 
+      const learners = computed(() => store.getters['classSummary/learners']);
+
       onMounted(() => {
         fetchRecentSessions(classId.value)
           .catch(error => {
@@ -152,6 +160,8 @@
         presentCount$,
         absentCount$,
         PageNames,
+        learners,
+        noSessionsEnrollMessage$,
       };
     },
   };

kolibri/plugins/coach/frontend/views/home/HomePage/__tests__/AttendanceBlock.spec.js

@@ -3,6 +3,7 @@ import VueRouter from 'vue-router';
 import { ref } from 'vue';
 import store from 'kolibri/store';
 import makeStore from '../../../../__tests__/utils/makeStore';
+import classSummaryModule from '../../../../modules/classSummary';
 // eslint-disable-next-line import/named
 import { useAttendance, useAttendanceMock } from '../../../../composables/useAttendance';
 import AttendanceBlock from '../AttendanceBlock.vue';
@@ -69,7 +70,17 @@ const STUBS = {
   KLabeledIcon: { name: 'KLabeledIcon', template: '<span><slot /></span>' },
 };
 
-function makeWrapper({ sessions = [], pendingFetch = false, rejectWith = null } = {}) {
+const MOCK_LEARNERS = [
+  { id: 'learner-1', name: 'Learner One', username: 'learner1' },
+  { id: 'learner-2', name: 'Learner Two', username: 'learner2' },
+];
+
+function makeWrapper({
+  sessions = [],
+  learners = MOCK_LEARNERS,
+  pendingFetch = false,
+  rejectWith = null,
+} = {}) {
   const recentSessions = ref(sessions);
   let fetchRecentSessions;
   if (rejectWith) {
@@ -88,6 +99,19 @@ function makeWrapper({ sessions = [], pendingFetch = false, rejectWith = null }
 
   const testStore = makeStore();
 
+  // Populate learnerMap so the component's learners computed property works
+  const learnerMap = {};
+  learners.forEach(l => {
+    learnerMap[l.id] = l;
+  });
+  testStore.state.classSummary.learnerMap = learnerMap;
+
+  // Ensure the classSummary module is registered on the singleton store
+  // so that store.getters['classSummary/learners'] is available
+  if (!store.hasModule('classSummary')) {
+    store.registerModule('classSummary', classSummaryModule);
+  }
+
   // Point the kolibri/store singleton state at the test store state
   store.replaceState(testStore.state);
 
@@ -122,10 +146,18 @@ describe('AttendanceBlock', () => {
     expect(wrapper.find('[data-test="loader"]').exists()).toBe(true);
   });
 
-  it('renders empty state when no sessions exist', async () => {
-    const { wrapper } = makeWrapper({ sessions: [] });
+  it('renders empty state when no sessions exist but learners are enrolled', async () => {
+    const { wrapper } = makeWrapper({ sessions: [], learners: MOCK_LEARNERS });
+    await global.flushPromises();
+    expect(wrapper.text()).toContain('No attendance sessions yet');
+    expect(wrapper.text()).not.toContain('Enroll learners');
+  });
+
+  it('renders enroll message when no sessions and no learners are enrolled', async () => {
+    const { wrapper } = makeWrapper({ sessions: [], learners: [] });
     await global.flushPromises();
     expect(wrapper.text()).toContain('No attendance sessions yet');
+    expect(wrapper.text()).toContain('Enroll learners to mark attendance');
   });
 
   it('renders sessions with present and absent counts', async () => {

packages/kolibri-common/strings/attendanceStrings.js

@@ -174,4 +174,9 @@ export const attendanceStrings = createTranslator('AttendanceStrings', {
     message: 'Absent',
     context: 'Column header for the count of learners absent',
   },
+  noSessionsEnrollMessage: {
+    message: 'No attendance sessions yet. Enroll learners to mark attendance',
+    context:
+      'Empty state message when no attendance sessions exist and no learners are enrolled in the class',
+  },
 });