From e2044f7eb012ba35a1b16a5a7b839e1bd1fdf08a Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:34:53 -0500
Subject: [PATCH 1/4] Add PLAN_LESSONS_ROOT_BETTER to LessonsPageNames
 constants

---
 kolibri/plugins/coach/assets/src/constants/lessonsConstants.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/kolibri/plugins/coach/assets/src/constants/lessonsConstants.js b/kolibri/plugins/coach/assets/src/constants/lessonsConstants.js
index c0cc59694e4..ea7d512759e 100644
--- a/kolibri/plugins/coach/assets/src/constants/lessonsConstants.js
+++ b/kolibri/plugins/coach/assets/src/constants/lessonsConstants.js
@@ -1,5 +1,6 @@
 export const LessonsPageNames = {
   PLAN_LESSONS_ROOT: 'PLAN_LESSONS_ROOT',
+  PLAN_LESSONS_ROOT_BETTER: 'PLAN_LESSONS_ROOT_BETTER',
   LESSON_CREATION_ROOT: 'LESSON_CREATION_ROOT',
   LESSON_CREATION_ROOT_BETTER: 'LESSON_CREATION_ROOT_BETTER',
   SUMMARY: 'SUMMARY',

From 604986b6143f36b0b400603ca4e17a7648743eed Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:35:30 -0500
Subject: [PATCH 2/4] Create /lessonstemp route as the temporary root lessons
 landing page using the LessonsRootPage component

---
 .../coach/assets/src/routes/planLessonsRoutes.js   | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
index 747295ef8a8..2ad60d24e17 100644
--- a/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
+++ b/kolibri/plugins/coach/assets/src/routes/planLessonsRoutes.js
@@ -55,6 +55,20 @@ export default [
       titleParts: ['lessonsLabel', 'CLASS_NAME'],
     },
   },
+  {
+    name: LessonsPageNames.PLAN_LESSONS_ROOT_BETTER,
+    path: '/:classId/plan/lessonstemp',
+    component: LessonsRootPage,
+    handler(toRoute, fromRoute, next) {
+      if (classIdParamRequiredGuard(toRoute, PageNames.PLAN_PAGE, next)) {
+        return;
+      }
+      showLessonsRootPage(store, toRoute.params.classId);
+    },
+    meta: {
+      titleParts: ['lessonsLabel', 'CLASS_NAME'],
+    },
+  },
   {
     name: LessonsPageNames.LESSON_CREATION_ROOT,
     path: path(CLASS, ALL_LESSONS, '/new'),

From 22795e1cdcce7adb24c70b35871a4fb782ce7eb9 Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Wed, 9 Oct 2024 14:40:32 -0500
Subject: [PATCH 3/4] Update LessonsRootPage table to include progress from
 reports,  maintaining the same empty states for unavailable data

---
 .../src/views/plan/LessonsRootPage/index.vue  | 30 +++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
index 02b7d555eda..777c68f9780 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
@@ -7,7 +7,10 @@
         :tabsId="PLAN_TABS_ID"
         :activeTabId="PlanTabs.LESSONS"
       >
-        <p v-if="lessons.length && lessons.length > 0">
+        <p
+          v-if="calcTotalSizeOfVisibleLessons !== null"
+          class="total-size"
+        >
           {{ coachString('totalLessonsSize', { size: calcTotalSizeOfVisibleLessons }) }}
         </p>
         <div class="filter-and-button">
@@ -32,6 +35,7 @@
         >
           <template #headers>
             <th>{{ coachString('titleLabel') }}</th>
+            <th>{{ coreString('progressLabel') }}</th>
             <th>{{ $tr('size') }}</th>
             <th>{{ coachString('recipientsLabel') }}</th>
             <th>{{ coachString('lessonVisibleLabel') }}</th>
@@ -53,6 +57,12 @@
                     icon="lesson"
                   />
                 </td>
+                <td>
+                  <StatusSummary
+                    :tally="lesson.tally"
+                    :verbose="true"
+                  />
+                </td>
                 <td>
                   {{
                     coachString('resourcesAndSize', {
@@ -222,7 +232,19 @@
       ...mapState('classSummary', { classId: 'id' }),
       ...mapState('lessonsRoot', ['lessons', 'learnerGroups']),
       sortedLessons() {
-        return this._.orderBy(this.lessons, ['date_created'], ['desc']);
+        const sorted = this._.orderBy(this.lessons, ['date_created'], ['desc']);
+        return sorted.map(lesson => {
+          const learners = this.getLearnersForLesson(lesson);
+          const sortedLesson = {
+            totalLearners: learners.length,
+            tally: this.getLessonStatusTally(lesson.id, learners),
+            groupNames: this.getGroupNames(lesson.assignments),
+            recipientNames: this.getRecipientNamesForLesson(lesson),
+            hasAssignments: learners.length > 0,
+          };
+          Object.assign(sortedLesson, lesson);
+          return sortedLesson;
+        });
       },
       userHasDismissedModal() {
         return Lockr.get(LESSON_VISIBILITY_MODAL_DISMISSED);
@@ -426,4 +448,8 @@
     }
   }
 
+  .total-size {
+    padding: 16px 0;
+  }
+
 </style>

From b9da77ed077c9746ff7a2def99407111507427ba Mon Sep 17 00:00:00 2001
From: Liana Harris <46411498+LianaHarris360@users.noreply.github.com>
Date: Wed, 9 Oct 2024 15:45:16 -0500
Subject: [PATCH 4/4] Add KSelect recipients filter, print and download
 buttons, and class title to LessonsRootPage; move new lesson button to top of
 UI

---
 .../src/views/plan/LessonsRootPage/index.vue  | 102 +++++++++++++-----
 .../src/views/reports/ReportsControls.vue     |   4 +-
 2 files changed, 76 insertions(+), 30 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
index 777c68f9780..8b8ad2de172 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonsRootPage/index.vue
@@ -2,7 +2,31 @@
 
   <CoachAppBarPage :showSubNav="true">
     <KPageContainer>
-      <PlanHeader :activeTabId="PlanTabs.LESSONS" />
+      <PlanHeader :activeTabId="PlanTabs.LESSONS">
+        <template #header>
+          <div style="display: flex; justify-content: space-between">
+            <span>
+              <h1>{{ coreString('lessonsLabel') }}</h1>
+              <p>
+                <KIcon
+                  icon="classes"
+                  class="class-name-icon"
+                />
+                <span>{{ className }}</span>
+              </p>
+            </span>
+            <span>
+              <KRouterLink
+                :style="{ alignSelf: 'flex-end', marginTop: '1em' }"
+                :primary="true"
+                appearance="raised-button"
+                :text="coachString('newLessonAction')"
+                :to="newLessonRoute"
+              />
+            </span>
+          </div>
+        </template>
+      </PlanHeader>
       <KTabsPanel
         :tabsId="PLAN_TABS_ID"
         :activeTabId="PlanTabs.LESSONS"
@@ -13,21 +37,24 @@
         >
           {{ coachString('totalLessonsSize', { size: calcTotalSizeOfVisibleLessons }) }}
         </p>
-        <div class="filter-and-button">
-          <KSelect
-            v-model="filterSelection"
-            class="select"
-            :label="coachString('filterLessonStatus')"
-            :options="filterOptions"
-            :inline="true"
-          />
-          <KRouterLink
-            :primary="true"
-            appearance="raised-button"
-            :text="coachString('newLessonAction')"
-            :to="newLessonRoute"
-          />
-        </div>
+        <ReportsControls @export="exportCSV">
+          <div :style="windowIsSmall ? { display: 'grid' } : {}">
+            <KSelect
+              v-model="filterSelection"
+              class="select"
+              :label="coachString('filterLessonStatus')"
+              :options="filterOptions"
+              :inline="true"
+            />
+            <KSelect
+              :value="{ label: coreString('allLabel'), value: coreString('allLabel') }"
+              class="select"
+              :label="coachString('recipientsLabel')"
+              :options="[]"
+              :inline="true"
+            />
+          </div>
+        </ReportsControls>
 
         <CoreTable
           :dataLoading="lessonsAreLoading"
@@ -187,6 +214,7 @@
   import useKShow from 'kolibri-design-system/lib/composables/useKShow';
   import bytesForHumans from 'kolibri.utils.bytesForHumans';
   import useSnackbar from 'kolibri.coreVue.composables.useSnackbar';
+  import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CoachAppBarPage from '../../CoachAppBarPage';
   import { LessonsPageNames } from '../../../constants/lessonsConstants';
   import { PLAN_TABS_ID, PlanTabs } from '../../../constants/tabsConstants';
@@ -195,6 +223,9 @@
   import AssignmentDetailsModal from '../../plan/assignments/AssignmentDetailsModal';
   import { lessonSummaryLink } from '../../../routes/planLessonsRouterUtils';
   import { useLessons } from '../../../composables/useLessons';
+  import ReportsControls from '../../reports/ReportsControls';
+  import * as csvFields from '../../../csv/fields';
+  import CSVExporter from '../../../csv/exporter';
 
   export default {
     name: 'LessonsRootPage',
@@ -203,13 +234,15 @@
       CoreTable,
       CoachAppBarPage,
       AssignmentDetailsModal,
+      ReportsControls,
     },
     mixins: [commonCoach, commonCoreStrings],
     setup() {
       const { show } = useKShow();
       const { lessonsAreLoading } = useLessons();
       const { createSnackbar } = useSnackbar();
-      return { show, lessonsAreLoading, createSnackbar };
+      const { windowIsSmall } = useKResponsiveWindow();
+      return { show, lessonsAreLoading, createSnackbar, windowIsSmall };
     },
     data() {
       return {
@@ -401,6 +434,16 @@
         this.showLessonIsVisibleModal = false;
         this.showLessonIsNotVisibleModal = false;
       },
+      exportCSV() {
+        const columns = [
+          ...csvFields.title(),
+          ...csvFields.recipients(this.className),
+          ...csvFields.tally(),
+          ...csvFields.allLearners('totalLearners'),
+        ];
+        const fileName = this.$tr('printLabel', { className: this.className });
+        new CSVExporter(columns, fileName).export(this.table);
+      },
       bytesForHumans,
     },
     $trs: {
@@ -428,6 +471,11 @@
         context:
           'The size of the file or files that will be removed from learner devices for the lesson, (i.e. 20 KB)',
       },
+      printLabel: {
+        message: '{className} Lessons',
+        context:
+          "Title that displays on a printed copy of the Lessons Report. This shows if the user uses the 'Print' option by clicking on the printer icon.",
+      },
     },
   };
 
@@ -436,20 +484,16 @@
 
 <style lang="scss" scoped>
 
-  .filter-and-button {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-top: 24px;
-    margin-bottom: 24px;
-
-    button {
-      align-self: flex-end;
-    }
+  .total-size {
+    padding: 16px 0 0;
   }
 
-  .total-size {
-    padding: 16px 0;
+  .class-name-icon {
+    position: relative;
+    top: 0.4em;
+    width: 1.5em;
+    height: 1.5em;
+    margin-right: 0.5em;
   }
 
 </style>
diff --git a/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue b/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
index 15a689ae307..d9223e88f3a 100644
--- a/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
+++ b/kolibri/plugins/coach/assets/src/views/reports/ReportsControls.vue
@@ -78,7 +78,9 @@
           this.$route.name === 'ReportsQuizListPage' ||
           this.$route.name === 'ReportsGroupListPage' ||
           this.$route.name === 'ReportsLearnerListPage' ||
-          this.$route.name === 'ReportsLessonListPage'
+          this.$route.name === 'ReportsLessonListPage' ||
+          this.$route.name === 'PLAN_LESSONS_ROOT' ||
+          this.$route.name === 'PLAN_LESSONS_ROOT_BETTER'
         );
       },
       classLearnersListRoute() {