feat(scheduling): enhance scheduling features with nested work types and team-based calendars (#1329)

* feat(scheduling): enhance scheduling features with nested work types and team-based calendars

- **Team Model Updates**: Added `color` field to the `Team` model for team-based calendar color coding.
- **Work Types Enhancements**: Introduced support for nested work types within `WorkTypeSchedule`, displaying additional case details (e.g., multiple work types) in scheduling components.
- **Scheduling Calendar Features**: Integrated `@schedule-x/calendar-controls` for advanced calendar controls and unified time slot rounding.
- **Improved Team Calendar Integration**: Dynamically set team-specific colors on calendar views based on the `color` attribute from the Team model.
- **UI/UX Improvements**: Enhanced worksite scheduling UI, clarified view labels, and added nested work type information to interactive components like maps and dialogs.
- **Data Exports**: Simplified export logic for CSV, PDF, and ICS formats to handle nested work types and team data.
- **Model Consistency**: Extended `WorkTypeSchedule` types to include nested properties for work types and teams.
- **Event Scheduling Simplification**: Allowed scheduling multiple work types with a single payload for better performance and flexibility.
- **Optimized Initialization**: Consolidated scheduling initialization logic into a single `initialize` function.

This commit enhances scheduling functionality for better worksite management, improved calendar-based workflows, and streamlined event handling.

* chore(workflows): update `download-artifact` action to v4

- Updated `actions/download-artifact` from v3 to v4 in `.github/workflows/main.yml`.
- Updated `actions/download-artifact` from v3 to v4 in `.github/workflows/e2e.yml`.

This improves compatibility with the latest `actions/download-artifact` features and ensures better long-term maintenance.

* chore(ci): update `upload-artifact` action to v4 in workflows

- Bumped `actions/upload-artifact` from v3 to v4 in `.github/workflows/main.yml`
  - Updated usage in "Upload blob report to GitHub Actions Artifacts"
  - Updated usage in "Upload HTML report"
- Bumped `actions/upload-artifact` from v3 to v4 in `.github/workflows/e2e.yml`
  - Updated usage in "Upload blob report to GitHub Actions Artifacts"
  - Updated usage in "Upload Test Result"
  - Updated usage in "Upload HTML report"

Overall: Ensures workflows leverage the latest version of `upload-artifact` for improved performance and compatibility.

Author: tabiodun

.github/workflows/e2e.yml

@@ -103,7 +103,7 @@ jobs:
 
       - name: 📤 Upload blob report to GitHub Actions Artifacts
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: all-blob-reports-${{ matrix.stage }}
           path: blob-report
@@ -116,7 +116,7 @@ jobs:
 
       - name: Upload Test Result
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: matrix-outputs
           path: test-result-${{ matrix.stage }}-${{ matrix.project }}.txt
@@ -131,7 +131,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Download all artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: matrix-outputs
           path: test-results
@@ -218,7 +218,7 @@ jobs:
         run: pnpm install
 
       - name: 📥 Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: all-blob-reports-${{ matrix.stage }}
           path: all-blob-reports
@@ -274,7 +274,7 @@ jobs:
           cat report.md >> $GITHUB_STEP_SUMMARY # report.md is generated from markdown reporter
 
       - name: 📤 Upload HTML report (${{ matrix.stage }})
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: e2e-report-${{ matrix.stage }}-${{ github.run_id }}-attempt_${{ github.run_attempt }}
           path: playwright-report

.github/workflows/main.yml

@@ -209,7 +209,7 @@ jobs:
 
       - name: 📤 Upload blob report to GitHub Actions Artifacts
         if: always()
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: all-blob-reports
           path: blob-report
@@ -236,7 +236,7 @@ jobs:
         run: pnpm install
 
       - name: 📥 Download blob reports from GitHub Actions Artifacts
-        uses: actions/download-artifact@v3
+        uses: actions/download-artifact@v4
         with:
           name: all-blob-reports
           path: all-blob-reports
@@ -258,7 +258,7 @@ jobs:
           cat report.md >> $GITHUB_STEP_SUMMARY # report.md is generated from markdown reporter
 
       - name: 📤 Upload HTML report
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: e2e-report-${{ github.run_id }}-attempt-${{ github.run_attempt }}
           path: playwright-report

package.json

@@ -65,6 +65,7 @@
     "@pixi/ticker": "6.5.10",
     "@pixi/utils": "6.5.10",
     "@schedule-x/calendar": "^2.18.0",
+    "@schedule-x/calendar-controls": "^2.19.0",
     "@schedule-x/current-time": "^2.19.0",
     "@schedule-x/drag-and-drop": "^2.18.0",
     "@schedule-x/events-service": "^2.18.0",

pnpm-lock.yaml

@@ -221,6 +221,7 @@ interface WorkType {
 interface Worksite {
   id: number;
   case_number: string;
+  name: string;
   work_types: WorkType[];
 }
 
@@ -275,7 +276,7 @@ function validateForm(): boolean {
       );
     }
   } else {
-    selectedWorkTypeIds.value.forEach((wtId: string) => {
+    selectedWorkTypeIds.value.forEach((wtId: number) => {
       const start = individualTimes.value[wtId]?.start;
       const end = individualTimes.value[wtId]?.end;
 
@@ -314,7 +315,7 @@ function handleWorkTypeCheckbox(isChecked: boolean, workTypeId: number) {
     }
   } else {
     selectedWorkTypeIds.value = selectedWorkTypeIds.value.filter(
-      (id: string) => id !== workTypeId,
+      (id: number) => id !== workTypeId,
     );
     delete individualTimes.value[workTypeId];
     delete individualTeams.value[workTypeId];
@@ -336,25 +337,23 @@ async function saveSchedules() {
   if (!worksite || selectedWorkTypeIds.value.length === 0) return;
   saving.value = true;
 
-  const payloads = selectedWorkTypeIds.value.map((wtId: string) => {
-    let start, end, team_id;
-    if (sameTimeForAll.value) {
-      start = moment(commonStartAt.value).toISOString();
-      end = moment(commonEndAt.value).toISOString();
-      team_id = commonTeam.value;
-    } else {
-      start = moment(individualTimes.value[wtId].start).toISOString();
-      end = moment(individualTimes.value[wtId].end).toISOString();
-      team_id = individualTeams.value[wtId];
-    }
-    return {
-      worksite_work_type: wtId,
-      start,
-      end,
-      team: team_id,
-      notes: notes.value,
-    };
-  });
+  const payloads: any[] = sameTimeForAll.value
+    ? [
+        {
+          worksite_work_types_ids: selectedWorkTypeIds.value,
+          start: moment(commonStartAt.value).toISOString(),
+          end: moment(commonEndAt.value).toISOString(),
+          team: commonTeam.value,
+          notes: notes.value,
+        },
+      ]
+    : selectedWorkTypeIds.value.map((wtId: number) => ({
+        worksite_work_types_ids: [wtId],
+        start: moment(individualTimes.value[wtId].start).toISOString(),
+        end: moment(individualTimes.value[wtId].end).toISOString(),
+        team: individualTeams.value[wtId],
+        notes: notes.value,
+      }));
 
   try {
     await Promise.all(

src/components/scheduling/AddScheduleDialog.vue

@@ -146,6 +146,7 @@
 
 <script setup lang="ts">
 import axios from 'axios';
+import { ref, computed, onMounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useToast } from 'vue-toastification';
 import moment from 'moment';
@@ -169,6 +170,9 @@ import BaseButton from '@/components/BaseButton.vue';
  *   end: string;   // ISO date
  *   team: number|null;
  *   notes?: string;
+ *   worksite_work_types?: WorksiteWorkType[]; // new many-to-many field
+ *   work_type_key?: string; // legacy field
+ *   worksite_id: number;
  *   ...
  * }
  */
@@ -178,9 +182,12 @@ interface ScheduleItem {
   end: string;
   team?: number | null;
   notes?: string;
+  worksite_work_types?: { work_type_key?: string }[];
+  work_type_key?: string;
+  worksite_id: number;
 }
 
-/** Props: we receive the schedule ID. */
+/** Props: we receive the schedule ID via event prop. */
 const props = defineProps<{
   event: Record<string, any>;
 }>();
@@ -208,6 +215,19 @@ const form = ref({
   notes: '',
 });
 
+// Update markerIcon to use the first work type key from the nested array if available
+const markerIcon = computed(() => {
+  let workTypeKey = null;
+  if (schedule.value) {
+    workTypeKey =
+      schedule.value.worksite_work_types &&
+      schedule.value.worksite_work_types.length > 0
+        ? schedule.value.worksite_work_types[0].work_type_key
+        : schedule.value.work_type_key;
+  }
+  return getBasicWorktypeSVG(workTypeKey, 35);
+});
+
 function closeDialog() {
   emitter.emit('modal_component:close', 'edit_schedule_dialog');
 }
@@ -321,10 +341,6 @@ function openInGoogleMaps() {
   window.open(url, '_blank');
 }
 
-const markerIcon = computed(() => {
-  return getBasicWorktypeSVG(schedule.value.work_type_key, 35);
-});
-
 onMounted(async () => {
   await fetchTeams();
   await fetchSchedule(props.event.id);

src/components/scheduling/EditScheduleDialog.vue

@@ -46,9 +46,17 @@ async function loadMap() {
   const bounds = L.latLngBounds([]);
 
   props.schedules.forEach((appt: WorkTypeSchedule) => {
+    // Get coordinates or fallback to defaults
     const coords = appt.worksite_location?.coordinates || [-96.4, 35.7];
     const latLng = L.latLng(coords[1], coords[0]);
-    const markerSvg = getBasicWorktypeSVG(appt.work_type_key, 35);
+
+    // Use nested work types if available, otherwise fallback to legacy work_type_key
+    let workTypeKey = appt.work_type_key;
+    if (appt.worksite_work_types && appt.worksite_work_types.length > 0) {
+      workTypeKey = appt.worksite_work_types[0].work_type_key;
+    }
+
+    const markerSvg = getBasicWorktypeSVG(workTypeKey, 35);
     const divIcon = L.divIcon({
       className: 'leaflet-data-marker',
       html: markerSvg,
@@ -57,9 +65,7 @@ async function loadMap() {
       popupAnchor: [0, -28],
     });
 
-    const marker = L.marker(latLng, {
-      icon: divIcon,
-    }).addTo(map.value);
+    const marker = L.marker(latLng, { icon: divIcon }).addTo(map.value);
 
     marker.on('click', () => {
       emit('workTypeScheduleClick', appt);