Use sub routes to manage tabs

learningequality · Sep 30, 2024 · 4ce565d · 4ce565d
1 parent a535618
commit 4ce565d
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 31 deletions.
diff --git a/kolibri/plugins/coach/assets/src/constants/index.js b/kolibri/plugins/coach/assets/src/constants/index.js
@@ -17,6 +17,10 @@ export const PageNames = {
   QUIZ_SECTION_ORDER: 'QUIZ_SECTION_ORDER',
   BOOK_MARKED_RESOURCES: 'BOOK_MARKED_RESOURCES',
 
+  /** Quiz summary page */
+  QUIZ_LEARNERS_REPORT_TAB: 'QUIZ_LEARNERS_REPORT_TAB',
+  QUIZ_DIFFICULT_QUESTIONS_REPORT_TAB: 'QUIZ_DIFFICULT_QUESTIONS_REPORT_TAB',
+
   EXAM_REPORT: 'EXAM_REPORT',
   EXAM_REPORT_DETAIL: 'EXAM_REPORT_DETAIL',
   EXAM_REPORT_DETAIL_ROOT: 'EXAM_REPORT_DETAIL_ROOT',

diff --git a/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js b/kolibri/plugins/coach/assets/src/routes/planExamRoutes.js
@@ -7,6 +7,9 @@ import CoachExamsPage from '../views/plan/CoachExamsPage';
 import QuizSummaryPage from '../views/plan/QuizSummaryPage';
 import SectionOrder from '../views/plan/CreateExamPage/SectionOrder';
 import { generateQuestionListHandler } from '../modules/questionList/handlers';
+import ReportsLearnersTable from '../views/reports/ReportsLearnersTable.vue';
+import ReportsDifficultQuestionsTable from '../views/reports/ReportsDifficultQuestionsTable.vue';
+import { QuizzesTabs } from '../constants/tabsConstants';
 
 export default [
   {
@@ -54,11 +57,35 @@ export default [
   },
   {
     name: QuizSummaryPage.name,
-    path: '/:classId/plan/quizzes/:quizId/:tabId?',
+    path: '/:classId/plan/quizzes/:quizId',
     component: QuizSummaryPage,
     handler: generateQuestionListHandler(['quizId']),
     meta: {
       titleParts: ['QUIZ_NAME', 'quizzesLabel', 'CLASS_NAME'],
     },
+    children: [
+      {
+        name: PageNames.QUIZ_LEARNERS_REPORT_TAB,
+        path: QuizzesTabs.REPORT,
+        component: ReportsLearnersTable,
+      },
+      {
+        name: PageNames.QUIZ_DIFFICULT_QUESTIONS_REPORT_TAB,
+        path: QuizzesTabs.DIFFICULT_QUESTIONS,
+        component: ReportsDifficultQuestionsTable,
+      },
+      {
+        path: '*',
+        redirect: {
+          name: PageNames.QUIZ_LEARNERS_REPORT_TAB,
+        },
+      },
+      {
+        path: '',
+        redirect: {
+          name: PageNames.QUIZ_LEARNERS_REPORT_TAB,
+        },
+      },
+    ],
   },
 ];
diff --git a/kolibri/plugins/coach/assets/src/views/CoachAppBarPage.vue b/kolibri/plugins/coach/assets/src/views/CoachAppBarPage.vue
@@ -13,7 +13,10 @@
       </div>
     </AppBarPage>
 
-    <router-view />
+    <!--
+      Not sure the implications of removing this router-view, but because of this the table
+      was being rendered twice
+    -->
   </NotificationsRoot>
 
 </template>

diff --git a/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/QuizSummaryPage/index.vue
@@ -51,20 +51,11 @@
             :tabsId="QUIZZES_TABS_ID"
             :activeTabId="activeTabId"
           >
-            <template #[QuizzesTabs.REPORT]>
-              <ReportsLearnersTable
-                ref="table"
-                :entries="learnersTable"
-                :questionCount="exam.question_count"
-              />
-            </template>
-            <template #[QuizzesTabs.DIFFICULT_QUESTIONS]>
-              <ReportsDifficultQuestionsTable
-                ref="table"
-                :entries="difficultQuestionsTable"
-                :isMissingResource="exam.missing_resource"
-              />
-            </template>
+            <router-view
+              ref="table"
+              :entries="entries"
+              :questionCount="exam.question_count"
+            />
           </KTabsPanel>
         </KPageContainer>
       </KGridItem>
@@ -101,8 +92,6 @@
   import CoachAppBarPage from '../../CoachAppBarPage';
   import { coachStringsMixin } from '../../common/commonCoachStrings';
   import ReportsControls from '../../reports/ReportsControls';
-  import ReportsLearnersTable from '../../reports/ReportsLearnersTable';
-  import ReportsDifficultQuestionsTable from '../../reports/ReportsDifficultQuestionsTable';
   import QuizOptionsDropdownMenu from './QuizOptionsDropdownMenu';
   import ManageExamModals from './ManageExamModals';
   import {
@@ -118,9 +107,7 @@
       CoachAppBarPage,
       ReportsControls,
       ManageExamModals,
-      ReportsLearnersTable,
       QuizOptionsDropdownMenu,
-      ReportsDifficultQuestionsTable,
     },
     mixins: [commonCoach, coachStringsMixin, commonCoreStrings],
     setup() {
@@ -152,7 +139,6 @@
         loading: true,
         currentAction: '',
         QUIZZES_TABS_ID,
-        QuizzesTabs,
       };
     },
     computed: {
@@ -166,7 +152,7 @@
         return this.$route.params.quizId;
       },
       activeTabId() {
-        const { tabId } = this.$route.params;
+        const tabId = this.$route.path.split('/').pop();
         if (Object.values(QuizzesTabs).includes(tabId)) {
           return tabId;
         }
@@ -194,6 +180,7 @@
           {
             id: QuizzesTabs.REPORT,
             label: this.coachString('reportLabel'),
+            to: this.classRoute('QUIZ_LEARNERS_REPORT_TAB', { quizId: this.quizId }),
           },
         ];
 
@@ -202,15 +189,18 @@
           tabsList.push({
             id: QuizzesTabs.DIFFICULT_QUESTIONS,
             label: this.coachString('difficultQuestionsLabel'),
+            to: this.classRoute('QUIZ_DIFFICULT_QUESTIONS_REPORT_TAB', { quizId: this.quizId }),
           });
         }
 
-        tabsList.forEach(tab => {
-          tab.to = this.classRoute('QuizSummaryPage', { quizId: this.quizId, tabId: tab.id });
-        });
-
         return tabsList;
       },
+      entries() {
+        if (this.activeTabId === QuizzesTabs.REPORT) {
+          return this.learnersTable;
+        }
+        return this.difficultQuestionsTable;
+      },
       learnersTable() {
         const learners = this.recipients.map(learnerId => this.learnerMap[learnerId]);
         const sorted = sortBy(learners, ['name']);

diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsDifficultQuestionsTable.vue
@@ -17,7 +17,7 @@
           <td>
             <span v-if="$isPrint">{{ tableRow.title }}</span>
             <KRouterLink
-              v-if="!isMissingResource"
+              v-if="!exam.missing_resource"
               :text="tableRow.title"
               :to="questionLink(tableRow.item)"
               icon="question"
@@ -70,10 +70,6 @@
         type: Array,
         default: () => [],
       },
-      isMissingResource: {
-        type: Boolean,
-        default: false,
-      },
     },
     computed: {
       exam() {