Add empty states to various coach tables and widgets

kolibri/core/assets/src/views/CoreTable.vue

@@ -11,6 +11,10 @@
         default: false,
         required: false,
       },
+      emptyMessage: {
+        type: String,
+        required: false,
+      },
     },
     computed: {
       tHeadStyle() {
@@ -38,11 +42,20 @@
       },
     },
     render(createElement) {
+      let tableHasRows = true;
       this.$slots.thead.forEach(thead => {
         thead.data.style = Object.assign(thead.data.style || {}, this.tHeadStyle);
       });
+
       this.$slots.tbody.forEach(tbody => {
+        // Need to check componentOptions if wrapped in <transition-group>, or just children
+        // if in regular <tbody>
+        if (tbody.componentOptions && tbody.componentOptions.children) {
+          tableHasRows = tbody.componentOptions.children.length > 0;
+        }
+
         if (tbody.children) {
+          tableHasRows = tbody.children.length > 0;
           tbody.children.forEach(child => {
             if (!child.data) {
               child.data = {};
@@ -56,12 +69,18 @@
           });
         }
       });
+
+      // Insert an empty message as a <p> at the end if it is provided and the
+      // table has no rows.
+      const showEmptyMessage = this.emptyMessage && !tableHasRows;
+
       return createElement('div', { class: 'core-table-container' }, [
         createElement('table', { class: 'core-table' }, [
           ...(this.$slots.default || []),
           this.$slots.thead,
           this.$slots.tbody,
         ]),
+        showEmptyMessage && createElement('p', this.emptyMessage),
       ]);
     },
   };
@@ -110,4 +129,8 @@
     }
   }
 
+  /deep/ .core-table-button-col {
+    padding: 4px;
+  }
+
 </style>

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

@@ -53,10 +53,9 @@
     computed: {
       ...mapGetters('coachNotifications', ['summarizedNotifications']),
       notifications() {
-        return orderBy(this.summarizedNotifications, 'lastId', ['desc']).slice(
-          0,
-          MAX_NOTIFICATIONS
-        );
+        return orderBy(this.summarizedNotifications, ({ lastId }) => Number(lastId), [
+          'desc',
+        ]).slice(0, MAX_NOTIFICATIONS);
       },
     },
     methods: {

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

@@ -19,20 +19,11 @@
         />
       </KGridItem>
 
-      <KGridItem size="75" percentage>
+      <KGridItem size="100" percentage>
         <StatusSummary
           :tally="tally"
         />
       </KGridItem>
-
-      <KGridItem size="25" percentage alignment="right">
-        <HelpNeeded
-          v-if="tally.helpNeeded"
-          :count="tally.helpNeeded"
-          :verbose="false"
-          :ratio="false"
-        />
-      </KGridItem>
     </KGrid>
   </router-link>
 

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

@@ -9,6 +9,10 @@
       {{ coachStrings.$tr('lessonsLabel') }}
     </KLabeledIcon>
 
+    <p v-if="table.length === 0">
+      {{ coachStrings.$tr('lessonListEmptyState') }}
+    </p>
+
     <BlockItem
       v-for="tableRow in table"
       :key="tableRow.key"

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

@@ -9,6 +9,10 @@
       {{ coachStrings.$tr('quizzesLabel') }}
     </KLabeledIcon>
 
+    <p v-if="table.length === 0">
+      {{ coachStrings.$tr('quizListEmptyState') }}
+    </p>
+
     <BlockItem
       v-for="tableRow in table"
       :key="tableRow.key"

kolibri/plugins/coach/assets/src/views/plan/CoachExamsPage/index.vue

@@ -60,7 +60,7 @@
               <QuizActive :active="exam.active" />
             </td>
 
-            <td class="options">
+            <td class="options core-table-button-col">
               <KDropdownMenu
                 slot="optionsDropdown"
                 :text="examReportPageStrings.$tr('options')"

kolibri/plugins/coach/assets/src/views/plan/GroupsPage/GroupRow.vue

@@ -13,7 +13,7 @@
     <td>
       {{ group.users.length }}
     </td>
-    <td class="ta-r">
+    <td class="ta-r core-table-button-col">
       <KDropdownMenu
         v-if="!isUngrouped"
         appearance="flat-button"

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupActivityPage.vue

@@ -16,6 +16,7 @@
       <ActivityList
         :notificationParams="notificationParams"
         embeddedPageName="ReportsGroupActivityPage"
+        :noActivityString="coachStrings.$tr('activityListEmptyState')"
       />
 
     </KPageContainer>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupLearnerListPage.vue

@@ -11,7 +11,7 @@
 
     <KPageContainer>
       <ReportsGroupHeader />
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('learnerListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('nameLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupListPage.vue

@@ -11,7 +11,7 @@
 
     <KPageContainer>
       <ReportsHeader />
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('groupListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('groupNameLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupReportLessonExerciseLearnerListPage.vue

@@ -17,7 +17,7 @@
         <StatusSummary :tally="tally" />
       </p>
 
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('activityListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('nameLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupReportLessonExerciseQuestionListPage.vue

@@ -14,7 +14,7 @@
       <ReportsGroupReportLessonExerciseHeader />
 
       <h2>{{ coachStrings.$tr('overallLabel') }}</h2>
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('questionListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('questionLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupReportLessonPage.vue

@@ -21,7 +21,7 @@
       <HeaderTable>
         <HeaderTableRow>
           <template slot="key">{{ coachStrings.$tr('statusLabel') }}</template>
-          <template slot="value"><LessonActive :active="true" /></template>
+          <template slot="value"><LessonActive :active="lesson.active" /></template>
         </HeaderTableRow>
         <!-- TODO COACH
         <HeaderTableRow>
@@ -31,7 +31,7 @@
          -->
       </HeaderTable>
 
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('lessonListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('titleLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupReportLessonResourceLearnerListPage.vue

@@ -37,7 +37,7 @@
       <p>
         <StatusSummary :tally="tally" />
       </p>
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('activityListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('nameLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupReportQuizLearnerListPage.vue

@@ -13,10 +13,10 @@
 
       <ReportsGroupReportQuizHeader />
 
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('activityListEmptyState')">
         <thead slot="thead">
           <tr>
-            <th>{{ coachStrings.$tr('titleLabel') }}</th>
+            <th>{{ coachStrings.$tr('nameLabel') }}</th>
             <th>{{ coachStrings.$tr('progressLabel') }}</th>
             <th>{{ coachStrings.$tr('scoreLabel') }}</th>
           </tr>

kolibri/plugins/coach/assets/src/views/reports/ReportsGroupReportQuizQuestionListPage.vue

@@ -14,7 +14,7 @@
       <ReportsGroupReportQuizHeader />
 
       <h2>{{ coachStrings.$tr('overallLabel') }}</h2>
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('questionListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('questionLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerActivityPage.vue

@@ -16,6 +16,7 @@
       <ActivityList
         :notificationParams="notificationParams"
         embeddedPageName="ReportsLearnerActivityPage"
+        :noActivityString="coachStrings.$tr('activityListEmptyState')"
       />
 
     </KPageContainer>

kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerListPage.vue

@@ -15,7 +15,7 @@
       <KCheckbox :label="coachStrings.$tr('viewByGroupsLabel')" />
       <h2>{{ coachStrings.$tr('overallLabel') }}</h2>
        -->
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('learnerListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('nameLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportLessonPage.vue

@@ -25,7 +25,7 @@
       <HeaderTable>
         <HeaderTableRow>
           <template slot="key">{{ coachStrings.$tr('statusLabel') }}</template>
-          <template slot="value"><LessonActive :active="true" /></template>
+          <template slot="value"><LessonActive :active="lesson.active" /></template>
         </HeaderTableRow>
         <!-- TODO COACH
         <HeaderTableRow>
@@ -35,7 +35,7 @@
          -->
       </HeaderTable>
 
-      <CoreTable>
+      <CoreTable :emptyMessage="emptyMessage">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('titleLabel') }}</th>
@@ -78,13 +78,19 @@
 
 <script>
 
+  import { crossComponentTranslator } from 'kolibri.utils.i18n';
   import commonCoach from '../common';
+  import LessonSummaryPage from '../plan/LessonSummaryPage';
+
+  const LessonSummaryPageStrings = crossComponentTranslator(LessonSummaryPage);
 
   export default {
     name: 'ReportsLearnerReportLessonPage',
-    components: {},
     mixins: [commonCoach],
     computed: {
+      emptyMessage() {
+        return LessonSummaryPageStrings.$tr('noResourcesInLesson');
+      },
       lesson() {
         return this.lessonMap[this.$route.params.lessonId];
       },

kolibri/plugins/coach/assets/src/views/reports/ReportsLearnerReportPage.vue

@@ -16,7 +16,7 @@
       <KGrid>
         <KGridItem :sizes="[100, 100, 50]" percentage>
           <h2>{{ coachStrings.$tr('lessonsAssignedLabel') }}</h2>
-          <CoreTable>
+          <CoreTable :emptyMessage="coachStrings.$tr('lessonListEmptyState')">
             <thead slot="thead">
               <tr>
                 <th>{{ coachStrings.$tr('titleLabel') }}</th>
@@ -43,7 +43,7 @@
         </KGridItem>
         <KGridItem :sizes="[100, 100, 50]" percentage>
           <h2>{{ coachStrings.$tr('quizzesAssignedLabel') }}</h2>
-          <CoreTable>
+          <CoreTable :emptyMessage="coachStrings.$tr('quizListEmptyState')">
             <thead slot="thead">
               <tr>
                 <th>{{ coachStrings.$tr('titleLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsLessonExerciseLearnerListPage.vue

@@ -22,7 +22,7 @@
         <StatusSummary :tally="tally" />
       </p>
 
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('activityListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('nameLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsLessonExerciseQuestionListPage.vue

@@ -18,7 +18,7 @@
       -->
 
       <h2>{{ coachStrings.$tr('overallLabel') }}</h2>
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('questionListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('questionLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerListPage.vue

@@ -15,10 +15,10 @@
 
       <h2>{{ coachStrings.$tr('overallLabel') }}</h2>
 
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('learnerListEmptyState')">
         <thead slot="thead">
           <tr>
-            <th>{{ coachStrings.$tr('titleLabel') }}</th>
+            <th>{{ coachStrings.$tr('nameLabel') }}</th>
             <th>{{ coachStrings.$tr('progressLabel') }}</th>
             <th>{{ coachStrings.$tr('groupsLabel') }}</th>
           </tr>

kolibri/plugins/coach/assets/src/views/reports/ReportsLessonLearnerPage.vue

@@ -23,7 +23,7 @@
         </KLabeledIcon>
       </h1>
 
-      <CoreTable>
+      <CoreTable :emptyMessage="coachStrings.$tr('activityListEmptyState')">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('titleLabel') }}</th>

kolibri/plugins/coach/assets/src/views/reports/ReportsLessonListPage.vue

@@ -16,7 +16,7 @@
         :options="filterOptions"
         :inline="true"
       />
-      <CoreTable>
+      <CoreTable :emptyMessage="emptyMessage">
         <thead slot="thead">
           <tr>
             <th>{{ coachStrings.$tr('titleLabel') }}</th>
@@ -59,9 +59,13 @@
 
 <script>
 
+  import { crossComponentTranslator } from 'kolibri.utils.i18n';
   import commonCoach from '../common';
+  import LessonsRootPage from '../plan/LessonsRootPage';
   import ReportsHeader from './ReportsHeader';
 
+  const LessonsRootPageStrings = crossComponentTranslator(LessonsRootPage);
+
   export default {
     name: 'ReportsLessonListPage',
     components: {
@@ -74,6 +78,17 @@
       };
     },
     computed: {
+      emptyMessage() {
+        if (this.filter.value === 'allLessons') {
+          return this.coachStrings.$tr('lessonListEmptyState');
+        }
+        if (this.filter.value === 'activeLessons') {
+          return LessonsRootPageStrings.$tr('noActiveLessons');
+        }
+        if (this.filter.value === 'inactiveLessons') {
+          return LessonsRootPageStrings.$tr('noInactiveLessons');
+        }
+      },
       filterOptions() {
         return [
           {