Download Faculty Leaves Planning Report tabs as spreadsheet

.eslintrc.cjs

@@ -23,6 +23,7 @@ module.exports = {
   rules: {
     "no-unused-vars": "off",
     "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-empty-function": "warn",
     "vue/multi-word-component-names": "off",
     "vue/attribute-hyphenation": ["error", "never"],
     "vue/v-on-event-hyphenation": ["error", "never"],

.github/workflows/tests.yml

@@ -42,6 +42,9 @@ jobs:
       - name: Run integration tests with Pest
         run: docker-compose exec -T app ./vendor/bin/pest
 
+      - name: Run unit tests with Jest
+        run: yarn test:unit
+
       - name: Run E2E tests with Cypress
         uses: cypress-io/github-action@v5
         with:

app/Http/Resources/CourseSectionResource.php

@@ -37,6 +37,7 @@ public function sisSectionToArray($request) {
     public function dbSectionToArray($request) {
         return [
             'id' => $this->getSectionId(),
+            'classNumber' => null,
             'dbId' => $this->id,
             'courseId' => $this->course_id,
             'termId' => $this->term_id,

app/Http/Resources/PersonResource.php

@@ -22,6 +22,7 @@ public function toArray($request) {
             'title' => $this->title,
             'leaveIds' => $this->leaveIds,
             'academicAppointment' => Utilities::trimWithFallback($this->jobCategory),
+            'jobCode' => $this->jobCode,
             'emplid' => $this->emplid,
             'sslEligible' => $this->ssl_eligible,
             'midcareerEligible' => $this->midcareer_eligible,

jest.config.cjs

@@ -0,0 +1,14 @@
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  testEnvironment: "jsdom",
+  testMatch: [
+    "**/resources/js/**/__tests__/**/*.?(m)[jt]s?(x)",
+    "**/resources/js/**/?(*.)+(spec|test).?(m)[tj]s?(x)",
+  ],
+  preset: "ts-jest/presets/js-with-ts-esm",
+  moduleNameMapper: {
+    "^@/(.*)$": "<rootDir>/resources/js/$1",
+    "^lodash-es$": "lodash",
+  },
+  prettierPath: require.resolve("prettier-2"),
+};

package.json

@@ -11,6 +11,7 @@
     "lint": "eslint --ext .js,.vue resources/js",
     "lint:watch": "nodemon --exec 'npm run lint' --ext js,vue",
     "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "jest --passWithNoTests",
     "test:e2e": "npm run cypress:headless"
   },
   "dependencies": {
@@ -32,10 +33,12 @@
     "popper.js": "^1.16.1",
     "v-tooltip": "^2.0.3",
     "vue": "^3.1.0",
-    "vue-router": "4"
+    "vue-router": "4",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@tailwindcss/forms": "^0.5.6",
+    "@types/jest": "^29.5.12",
     "@types/lodash": "^4.14.195",
     "@types/sortablejs": "^1.15.7",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
@@ -48,12 +51,16 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.14.0",
     "eslint-plugin-vue": "^9.15.1",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "laravel-vite-plugin": "^0.7.8",
     "nodemon": "^3.0.1",
     "postcss": "^8.4.27",
+    "prettier-2": "npm:prettier@^2",
     "prettier": "3.0.0",
     "sass": "^1.44.0",
     "tailwindcss": "^3.3.3",
+    "ts-jest": "^29.1.2",
     "typescript": "^5.1.6",
     "vite": "^4.4.3"
   }

resources/js/components/DownloadSpreadsheetButton.vue

@@ -0,0 +1,89 @@
+<template>
+  <Button
+    variant="tertiary"
+    title="Download Spreadsheet"
+    @click="handleDownloadClick"
+  >
+    <template v-if="downloadStatus === 'idle'">
+      <DownloadIcon /> <span class="tw-sr-only">Download</span>
+    </template>
+    <template v-else-if="downloadStatus === 'loading'">
+      <Spinner class="tw-w-5 tw-h-5 tw-text-blue-500" />
+      <span class="tw-sr-only">Loading</span>
+      {{ Math.round(progress * 100) }}%
+    </template>
+    <template v-else-if="downloadStatus === 'complete'">
+      <CheckIcon /> <span class="tw-sr-only">Complete</span>
+    </template>
+    <template v-else>
+      <CircleXIcon /> <span class="tw-sr-only">Error</span>
+    </template>
+  </Button>
+</template>
+<script setup lang="ts">
+import * as T from "@/types";
+import { useErrorStore } from "@/stores/useErrorStore";
+import Button from "./Button.vue";
+import { DownloadIcon } from "@/icons";
+import { LoadState } from "@/types";
+import { nextTick, ref } from "vue";
+import { utils, writeFileXLSX } from "xlsx";
+import Spinner from "./Spinner.vue";
+import { CheckIcon, CircleXIcon } from "@/icons";
+import { useSimulatedProgress } from "@/features/course-planning/helpers/useSimulatedProgress";
+
+const props = defineProps<{
+  filename: string;
+  sheetData: T.SpreadsheetData[];
+}>();
+
+const downloadStatus = ref<LoadState>("idle");
+
+const errorStore = useErrorStore();
+const { progress, simulateUpTo } = useSimulatedProgress();
+
+async function downloadSpreadsheet(): Promise<void> {
+  const wb = utils.book_new();
+  for (const sheet of props.sheetData) {
+    if (typeof sheet.data === "function") {
+      const complete = simulateUpTo(1 / props.sheetData.length);
+      sheet.data = await sheet.data();
+      complete();
+    }
+    const ws = utils.json_to_sheet(sheet.data);
+    utils.book_append_sheet(wb, ws, sheet.sheetName);
+  }
+  writeFileXLSX(wb, props.filename);
+}
+
+function resetDownloadStatus(delay = 3000): void {
+  setTimeout(() => {
+    downloadStatus.value = "idle";
+  }, delay);
+}
+
+async function handleDownloadClick(): Promise<void> {
+  downloadStatus.value = "loading";
+
+  // Wait for the next tick to ensure the loading state is rendered
+  await nextTick();
+
+  // also wrap in a setTimeout to push the download to the end of the
+  // event loop, allowing the state change to render
+  setTimeout(async () => {
+    try {
+      await downloadSpreadsheet();
+      downloadStatus.value = "complete";
+      resetDownloadStatus();
+    } catch (error) {
+      console.error(error);
+      downloadStatus.value = "error";
+      if (error instanceof Error) {
+        errorStore.setError(error);
+      }
+      resetDownloadStatus(10000);
+    }
+  }, 0);
+}
+</script>
+<style scoped></style>

resources/js/components/ErrorModal.vue

@@ -7,7 +7,6 @@
       >
         <Notification
           :title="errorTitle"
-          :message="error.name"
           type="danger"
           :isDismissable="true"
           class="tw-w-full tw-max-w-md tw-border-none max-h-[80vh] !overflow-auto"
@@ -60,6 +59,10 @@ const messages: Record<number | string, string> = {
 };
 
 const message = computed(() => {
+  if (typeof error.value === "string") {
+    return error.value;
+  }
+
   if (!(error.value instanceof ApiError)) {
     return error.value?.message || "An unknown error occurred.";
   }

resources/js/components/Table/Table.vue

@@ -4,6 +4,7 @@
       class="tw-shadow-sm tw-ring-1 tw-ring-black tw-ring-opacity-5 sm:tw-rounded-lg tw-overflow-auto tw-max-h-[90vh]"
     >
       <table
+        ref="tableElement"
         class="better-table tw-min-w-full tw-divide-y tw-divide-gray-300 tw-h-full"
         :class="{
           'better-table--sticky-header': stickyHeader,
@@ -16,6 +17,8 @@
   </div>
 </template>
 <script setup lang="ts">
+import { ref } from 'vue';
+
 withDefaults(
   defineProps<{
     stickyHeader?: boolean;
@@ -26,6 +29,20 @@ withDefaults(
     stickyFirstColumn: false,
   },
 );
+
+const tableElement = ref<HTMLTableElement | null>(null);
+
+export interface Exposed {
+  getTableElement: () => HTMLTableElement | null;
+}
+
+function getTableElement() {
+  return tableElement.value;
+}
+
+defineExpose<Exposed>({
+  getTableElement,
+});
 </script>
 <style>
 .better-table.better-table--sticky-header tbody tr {

resources/js/components/Table/index.ts

@@ -1,6 +1,12 @@
-export { default as Table } from "./Table.vue";
+import { Exposed as TableExposed } from "./Table.vue";
+// import separately so that we can use in the TableType definition
+import Table from "./Table.vue";
+
+export { Table };
 export { default as TBody } from "./TBody.vue";
 export { default as THead } from "./THead.vue";
 export { default as Tr } from "./Tr.vue";
 export { default as Th } from "./Th.vue";
 export { default as Td } from "./Td.vue";
+
+export type TableType = InstanceType<typeof Table> & TableExposed;

resources/js/pages/CoursePlanningPage/components/CoursePlanningFilters.vue → resources/js/features/course-planning/components/CoursePlanningFilters.vue

@@ -131,10 +131,10 @@
 import { computed } from "vue";
 import SelectGroup from "@/components/SelectGroup.vue";
 import Button from "@/components/Button.vue";
-import { useRootCoursePlanningStore } from "../stores/useRootCoursePlanningStore";
+import { useCoursePlanningStore } from "../stores/useCoursePlanningStore";
 import { storeToRefs } from "pinia";
 
-const coursePlanningStore = useRootCoursePlanningStore();
+const coursePlanningStore = useCoursePlanningStore();
 
 const { filters, sortedCourseLevels, sortedCourseTypes } =
   storeToRefs(coursePlanningStore);

resources/js/pages/CoursePlanningPage/components/CourseTable/CourseTable.vue → resources/js/features/course-planning/components/CourseTable/CourseTable.vue

@@ -13,7 +13,7 @@
         class="term-col"
         :class="{
           'tw-bg-striped':
-            coursePlanningStore.isInPlanningMode &&
+            coursePlanningStore.filters.inPlanningMode &&
             !coursePlanningStore.termsStore.isTermPlannable(term.id),
         }"
       />
@@ -36,7 +36,7 @@ import { Table, TBody, THead } from "@/components/Table";
 import CourseTableCourseRow from "./CourseTableCourseRow.vue";
 import CourseTableLeavesRow from "./CourseTableLeavesRow.vue";
 import ReportTableHeaderRow from "../ReportTableHeaderRow.vue";
-import { useRootCoursePlanningStore } from "../../stores/useRootCoursePlanningStore";
+import { useCoursePlanningStore } from "../../stores/useCoursePlanningStore";
 import { Group } from "@/types";
 import { computed } from "vue";
 
@@ -45,7 +45,7 @@ defineProps<{
   groupId: Group["id"];
 }>();
 
-const coursePlanningStore = useRootCoursePlanningStore();
+const coursePlanningStore = useCoursePlanningStore();
 const courses = computed(() => coursePlanningStore.courseStore.allCourses);
 </script>
 <style scoped lang="scss">

resources/js/pages/CoursePlanningPage/components/CourseTable/CourseTableCell.vue → resources/js/features/course-planning/components/CourseTable/CourseTableCell.vue

@@ -46,7 +46,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import * as T from "@/types";
-import { useRootCoursePlanningStore } from "../../stores/useRootCoursePlanningStore";
+import { useCoursePlanningStore } from "../../stores/useCoursePlanningStore";
 import EnrollmentInPublishedSection from "./EnrollmentInPublishedSection.vue";
 import EnrollmentInUnpublishedSection from "./EnrollmentInUnpublishedSection.vue";
 import { partition } from "lodash";
@@ -60,7 +60,7 @@ const props = defineProps<{
   term: T.Term;
 }>();
 
-const coursePlanningStore = useRootCoursePlanningStore();
+const coursePlanningStore = useCoursePlanningStore();
 const isShowingEditModal = ref(false);
 
 const enrollmentsInCourseByTermLookup = computed(
@@ -91,7 +91,7 @@ const enrollmentsInUnpublishedSection = computed(() => {
 
 const arePlannedSectionsViewable = computed(() => {
   return (
-    coursePlanningStore.isInPlanningMode &&
+    coursePlanningStore.filters.inPlanningMode &&
     coursePlanningStore.termsStore.isTermPlannable(props.term.id) &&
     $can("view planned courses")
   );

resources/js/pages/CoursePlanningPage/components/CourseTable/CourseTableCourseRow.vue → resources/js/features/course-planning/components/CourseTable/CourseTableCourseRow.vue

@@ -48,15 +48,15 @@
 <script setup lang="ts">
 import { Td } from "@/components/Table";
 import CourseTableCell from "./CourseTableCell.vue";
-import { useRootCoursePlanningStore } from "../../stores/useRootCoursePlanningStore";
+import { useCoursePlanningStore } from "../../stores/useCoursePlanningStore";
 import * as T from "@/types";
 import { computed } from "vue";
 
 const props = defineProps<{
   course: T.Course;
 }>();
 
-const coursePlanningStore = useRootCoursePlanningStore();
+const coursePlanningStore = useCoursePlanningStore();
 const visibleTerms = computed(() => coursePlanningStore.visibleTerms);
 
 const isCourseVisible = computed(() => {

resources/js/pages/CoursePlanningPage/components/CourseTable/CourseTableLeavesRow.vue → resources/js/features/course-planning/components/CourseTable/CourseTableLeavesRow.vue

@@ -1,14 +1,13 @@
 <template>
   <tr
-    v-if="hasVisibleLeaves"
     class="course-table-leaves-row"
     :class="{
       'course-table-leaves-row--sticky': sticky,
     }"
   >
-    <Td> Leaves </Td>
+    <Td>Leaves</Td>
     <Td
-      v-for="term in coursePlanningStore.visibleTerms"
+      v-for="{ term, leaves } in termLeaves"
       :key="term.id"
       class="term-data-column"
       :class="{
@@ -19,8 +18,7 @@
     >
       <div class="leaves-container tw-flex tw-flex-col tw-gap-1">
         <LeaveChip
-          v-for="leave in getLeavesByTermId(term.id)"
-          v-show="coursePlanningStore.isPersonVisibleById(leave.user_id)"
+          v-for="leave in leaves"
           :key="leave.id"
           :leave="leave"
           variant="person"
@@ -35,10 +33,10 @@
 <script setup lang="ts">
 import LeaveChip from "../LeaveChip.vue";
 import { Td } from "@/components/Table";
-import type { Term, Group } from "@/types";
-import { useRootCoursePlanningStore } from "../../stores/useRootCoursePlanningStore";
+import type { Group } from "@/types";
+import { useCoursePlanningStore } from "../../stores/useCoursePlanningStore";
 import { computed } from "vue";
-// import { doesInstructorNameMatchSearchTerm } from "./doesInstructorNameMatchSearchTerm";
+import { getListOfTermLeaves } from "../../helpers/getListOfTermLeaves";
 
 withDefaults(
   defineProps<{
@@ -50,15 +48,16 @@ withDefaults(
   },
 );
 
-const coursePlanningStore = useRootCoursePlanningStore();
-const getLeavesByTermId = computed(
-  () => coursePlanningStore.leaveStore.getLeavesByTermId,
-);
+const coursePlanningStore = useCoursePlanningStore();
+
+const termLeaves = computed(() => {
+  const lookups = coursePlanningStore.getCoursePlanningLookups();
+  const filters = coursePlanningStore.getCoursePlanningFilters();
 
-const hasVisibleLeaves = computed(() => {
-  return coursePlanningStore.leaveStore.leaves.some((leave) =>
-    coursePlanningStore.isPersonVisibleById(leave.user_id),
-  );
+  return getListOfTermLeaves({
+    lookups,
+    filters,
+  });
 });
 </script>
 <style scoped>