Add scheduling report courses view

app/Http/Resources/InstructorResource.php

@@ -21,6 +21,7 @@ public function toArray($request) {
             'email' => $this->email,
             'title' => $this->title,
             'jobCode' => $this->jobCode,
+            'instructorRole' => $this->instructorRole,
             'leaves' => $this->when($this->leaves->isNotEmpty(), $this->leaves),
             'academicAppointment' => Utilities::trimWithFallback($this->jobCategory),
             'emplid' => $this->emplid,

app/Library/UserService.php

@@ -54,6 +54,7 @@ public function attachInstructorsToCourses(Collection $courses, Collection $empl
 
             $user->jobCategory = $employeeInfo?->CATEGORY;
             $user->jobCode = $employeeInfo?->JOBCODE;
+            $user->instructorRole = $course->INSTRUCTOR_ROLE;
 
             $course->instructor = $user;
         });

package.json

@@ -28,6 +28,7 @@
     "p-debounce": "^4.0.0",
     "p-map": "^6.0.0",
     "papaparse": "^5.4.1",
+    "pinia": "^2.1.7",
     "popper.js": "^1.16.1",
     "v-tooltip": "^2.0.3",
     "vue": "^3.1.0",
@@ -42,7 +43,7 @@
     "@vue/compiler-sfc": "^3.1.0",
     "autoprefixer": "^10.4.14",
     "cross-env": "^5.2.1",
-    "cypress": "12.17.1",
+    "cypress": "13.4.0",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-cypress": "^2.14.0",

resources/js/App.vue

@@ -67,9 +67,11 @@
 
 <script>
 import { AppHeader, NavbarItem, AppFooter } from "@umn-latis/cla-vue-template";
-import UserLookup from "./components/UserLookup.vue";
-import CreateGroup from "./components/CreateGroup.vue";
-import { $can } from "./lib";
+import UserLookup from "@/components/UserLookup.vue";
+import CreateGroup from "@/components/CreateGroup.vue";
+import { $can } from "@/utils";
+import { mapStores } from "pinia";
+import { useTermsStore } from "./stores/useTermsStore";
 
 export default {
   components: {
@@ -86,6 +88,9 @@ export default {
       createGroup: false,
     };
   },
+  computed: {
+    ...mapStores(useTermsStore),
+  },
   mounted() {
     this.$store.dispatch("fetchUser");
     console.log("Component mounted.");

resources/js/api.ts

@@ -1,41 +1,32 @@
-import { axios } from "@/lib";
-import {
-  ApiUserLookupResponse,
-  ApiUserResponse,
-  UserLookupItem,
-  User,
-  Leave,
-  NewLeave,
-  Course,
-  Term,
-  Group,
-  InstructorRole,
-} from "@/types";
-
-export async function lookupUsers(query: string): Promise<UserLookupItem[]> {
-  const res = await axios.get<ApiUserLookupResponse>(
+import { axios } from "@/utils";
+import type * as Types from "@/types";
+
+export async function lookupUsers(
+  query: string,
+): Promise<Types.UserLookupItem[]> {
+  const res = await axios.get<Types.ApiUserLookupResponse>(
     `/api/autocompleter/user?searchType=nameAndInternetId&q=${query}`,
   );
   return res.data.items;
 }
 
-export async function getUser(userId: number): Promise<User> {
-  const res = await axios.get<ApiUserResponse>(`/api/user/${userId}`);
+export async function getUser(userId: number): Promise<Types.User> {
+  const res = await axios.get<Types.ApiUserResponse>(`/api/user/${userId}`);
   return res.data;
 }
 
-export async function updateUser(user: User) {
-  const res = await axios.put<User>(`/api/user/${user.id}`, user);
+export async function updateUser(user: Types.User) {
+  const res = await axios.put<Types.User>(`/api/user/${user.id}`, user);
   return res.data;
 }
 
-export async function createLeave(leave: NewLeave) {
-  const res = await axios.post<Leave>(`/api/leaves`, leave);
+export async function createLeave(leave: Types.NewLeave) {
+  const res = await axios.post<Types.Leave>(`/api/leaves`, leave);
   return res.data;
 }
 
-export async function updateLeave(leave: Leave) {
-  const res = await axios.put<Leave>(`/api/leaves/${leave.id}`, leave);
+export async function updateLeave(leave: Types.Leave) {
+  const res = await axios.put<Types.Leave>(`/api/leaves/${leave.id}`, leave);
   return res.data;
 }
 
@@ -44,38 +35,56 @@ export async function deleteLeave(leaveId: number) {
   return res.data;
 }
 
-export async function getUserLeaves(userId: number): Promise<Leave[]> {
-  const res = await axios.get<Leave[]>(`/api/users/${userId}/leaves`);
+export async function getUserLeaves(userId: number): Promise<Types.Leave[]> {
+  const res = await axios.get<Types.Leave[]>(`/api/users/${userId}/leaves`);
   return res.data;
 }
 
-export async function updateUserLeaves(userId: number, leaves: Leave[]) {
-  const res = await axios.put<Leave[]>(`/api/users/${userId}/leaves`, {
+export async function updateUserLeaves(userId: number, leaves: Types.Leave[]) {
+  const res = await axios.put<Types.Leave[]>(`/api/users/${userId}/leaves`, {
     leaves,
   });
   return res.data;
 }
 
-let getTermsCache = [] as Term[];
+let getTermsCache = [] as Types.Term[];
 export async function getTerms() {
   if (getTermsCache.length) {
     return getTermsCache;
   }
-  const res = await axios.get<Term[]>(`/api/terms`);
+  const res = await axios.get<Types.Term[]>(`/api/terms`);
   getTermsCache = res.data;
   return res.data;
 }
 
+const toCourse = (
+  rawCourse: Types.ApiCourseInstructorRecord,
+): Types.Course => ({
+  shortCode: `${rawCourse.subject}-${rawCourse.catalogNumber}`,
+  classNumber: rawCourse.classNumber,
+  term: rawCourse.term,
+  subject: rawCourse.subject,
+  catalogNumber: rawCourse.catalogNumber,
+  classSection: rawCourse.classSection,
+  title: rawCourse.title,
+  enrollmentCap: rawCourse.enrollmentCap,
+  enrollmentTotal: rawCourse.enrollmentTotal,
+  cancelled: rawCourse.cancelled,
+  courseType: rawCourse.courseType,
+  courseLevel: rawCourse.courseLevel,
+  instructors: [],
+});
+
 export async function getGroupCoursesByTerm({
   groupId,
   termId,
   roles,
 }: {
   groupId: number;
   termId: number;
-  roles: InstructorRole[];
+  roles: Types.InstructorRole[];
 }) {
-  const res = await axios.get<Course[]>(
+  const res = await axios.get<Types.ApiCourseInstructorRecord[]>(
     `/api/terms/${termId}/groups/${groupId}/courses`,
     {
       params: {
@@ -84,10 +93,23 @@ export async function getGroupCoursesByTerm({
     },
   );
 
-  return res.data;
+  const coursesByClassNumber = new Map<
+    Types.Course["classNumber"],
+    Types.Course
+  >();
+
+  res.data.forEach((rawCourse) => {
+    const course =
+      coursesByClassNumber.get(rawCourse.classNumber) ?? toCourse(rawCourse);
+    course.instructors.push(rawCourse.instructor);
+
+    coursesByClassNumber.set(rawCourse.classNumber, course);
+  });
+
+  return [...coursesByClassNumber.values()];
 }
 
 export async function getGroup(groupId: number) {
-  const res = await axios.get<Group>(`/api/group/${groupId}`);
+  const res = await axios.get<Types.Group>(`/api/group/${groupId}`);
   return res.data;
 }

resources/js/app.js

@@ -7,6 +7,7 @@
 import "./bootstrap";
 
 import { createApp } from "vue";
+import { createPinia } from "pinia";
 import VTooltip from "v-tooltip";
 import { store } from "./store";
 import { router } from "./router";
@@ -17,4 +18,8 @@ import "@umn-latis/cla-vue-template/dist/style.css";
 import "../sass/app.scss";
 import "../sass/utils.css";
 
-createApp(App).use(store).use(router).use(VTooltip).mount("#app");
+const pinia = createPinia();
+
+const app = createApp(App).use(store).use(pinia).use(router).use(VTooltip);
+
+app.mount("#app");

resources/js/components/EditGroup.vue

@@ -299,7 +299,7 @@ import Members from "./Members.vue";
 import Modal from "./Modal.vue";
 import FolderWidget from "./FolderWidget.vue";
 import PersonSearch from "./PersonSearch.vue";
-import { dayjs, axios } from "@/lib";
+import { dayjs, axios } from "@/utils";
 
 export default {
   components: {

resources/js/components/Favorites.vue

@@ -29,15 +29,21 @@
             >{{ favorite[titleItem] }}
           </router-link>
         </td>
-        <td>{{ favorite.updated_at ? dayjs(favorite.updated_at).format("YYYY, MMM Do") : '' }}</td>
+        <td>
+          {{
+            favorite.updated_at
+              ? dayjs(favorite.updated_at).format("YYYY, MMM Do")
+              : ""
+          }}
+        </td>
       </tr>
     </tbody>
   </table>
 </template>
 
 <script>
 import SortableLink from "./SortableLink.vue";
-import { dayjs } from "@/lib";
+import { dayjs } from "@/utils";
 
 export default {
   components: {

resources/js/components/Gantt.vue

@@ -36,7 +36,7 @@
 
 <script lang="ts">
 import GanttRow from "./GanttRow.vue";
-import { dayjs } from "@/lib";
+import { dayjs } from "@/utils";
 
 export default {
   components: {
@@ -57,7 +57,7 @@ export default {
   },
   methods: {
     dayjs,
-  }
+  },
 };
 </script>
 

resources/js/components/GanttRow.vue

@@ -25,7 +25,7 @@
 
 <script lang="ts">
 import $ from "jquery";
-import dayjs from "../lib/dayjs";
+import { dayjs } from "@/utils";
 
 $(function () {
   $("[data-toggle='tooltip']").tooltip();

resources/js/components/LeaveChip.vue

@@ -29,19 +29,25 @@
         >✧</span
       >
       <NoIcon v-if="leave.status === 'cancelled'" title="cancelled" />
-      <span
+      <div
         :class="{
           'tw-line-through': leave.status === 'cancelled',
         }"
       >
-        {{ prettyLeaveType }} Leave
-      </span>
+        <span v-if="variant === 'instructor' && instructor">
+          {{ instructor.surName }}, {{ instructor.givenName }}
+        </span>
+        <span v-else> {{ prettyLeaveType }} Leave </span>
+      </div>
     </header>
     <div
       v-if="isOpen"
       class="leave-details tw-flex tw-flex-col tw-gap-2 tw-items-center tw-text-xs tw-normal-case"
     >
       <ul class="tw-text-xs tw-pl-6 tw-list-none tw-m-0">
+        <li v-if="variant === 'instructor'" class="tw-capitalize">
+          {{ leave.type }} Leave
+        </li>
         <li class="tw-capitalize">
           {{ isOnlyPartiallyEligible ? "Eligible when Tenured" : leave.status }}
         </li>
@@ -65,9 +71,11 @@ const props = withDefaults(
   defineProps<{
     leave: Leave;
     instructor?: Instructor;
+    variant?: "leaveType" | "instructor";
   }>(),
   {
     instructor: undefined,
+    variant: "leaveType",
   },
 );