Add department opening hours management and scheduler integration

2025-05-27 16:59:49 +02:00
parent 444daa1a66
commit 2c86cc716f
3 changed files with 120 additions and 8 deletions
@@ -296,19 +296,17 @@ const getSelectedTimeSlot = () => {
 };

 const setDepartment = (dept, deptObject) => {
-  console.log('Setting department:', dept, deptObject);
  // Function to set the department for the booking
  if (dept && dept > 0) {
    department_var.value = dept;
    departmentObject.value = deptObject; // Set the department object if provided
-    console.log('Department set to:', department_var.value, departmentObject.value);
  } else {
    department_var.value = null; // Reset the department if no valid department is selected
    departmentObject.value = null; // Reset the department object
-    console.log('Department reset to null');
  }
 };

+
 // Watch for changes in the phone number and country code, format them accordingly
 watch([phone, phone_country_code], ([newPhone, newCountryCode]) => {
  if (newPhone) phone.value = formatPhoneNumber(newPhone);
@@ -2,6 +2,44 @@
 import { ref, computed, watch } from "vue";

 /** Time & Date */
+const week_opening_hours = ref({
+  monday: { start: null, end: null },
+  tuesday: { start: null, end: null },
+  wednesday: { start: null, end: null },
+  thursday: { start: null, end: null },
+  friday: { start: null, end: null },
+  saturday: { start: null, end: null }, // Saturday closed
+  sunday: { start: null, end: null } // Sunday closed
+});
+
+const setWeekOpeningHours = (newHours) => {
+  // Update the week opening hours with the new hours
+  week_opening_hours.value = { ...week_opening_hours.value, ...newHours };
+};
+
+const getOpeningHours = (date) => {
+  const dayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, ..., 6 = Saturday
+  const dayName = ['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][dayOfWeek];
+  console.log('getOpeningHours called for:', dayName, week_opening_hours.value[dayName]);
+
+  return {
+    start: {
+      hour: week_opening_hours.value[dayName].start ? parseInt(week_opening_hours.value[dayName].start.split(':')[0]) : null,
+      minute: week_opening_hours.value[dayName].start ? parseInt(week_opening_hours.value[dayName].start.split(':')[1]) : null
+    },
+    end: {
+      hour: week_opening_hours.value[dayName].end ? parseInt(week_opening_hours.value[dayName].end.split(':')[0]) : null,
+      minute: week_opening_hours.value[dayName].end ? parseInt(week_opening_hours.value[dayName].end.split(':')[1]) : null
+    }
+  }
+};
+
+const opening_hours = {
+  week: week_opening_hours,
+  set: setWeekOpeningHours,
+  get: getOpeningHours
+};
+
 const date_selected = ref(new Date());
 const date_selected_week_start = computed(() => {
  const date = new Date(date_selected.value);
@@ -47,13 +85,25 @@ const generateDefaultSlots = (day = null) => {
  const dateToUse = day ? new Date(day.date) : date_selected_week_start.value;
  // Start time for the debug slots (8 AM)
  const startTime = new Date(dateToUse);
-  startTime.setHours(grid_layout_days.start_hour, 0, 0, 0); // Set to 8 AM
+  startTime.setHours(getOpeningHours(dateToUse).start.hour, getOpeningHours(dateToUse).start.minute, 0, 0); // Set to 8 AM
  // End time for the debug slots (6 PM)
  const endTime = new Date(dateToUse);
-  endTime.setHours(grid_layout_days.end_hour, 0, 0, 0); // Set to 6 PM
+  endTime.setHours(getOpeningHours(dateToUse).end.hour, getOpeningHours(dateToUse).end.minute, 0, 0); // Set to 6 PM
+  // Make sure there's actually time to book
+  if (startTime >= endTime) {
+    console.warn('No valid time slots available for the selected day:', dateToUse);
+    return []; // No valid slots if start time is not before end time
+  }
  // Generate time slots in the defined minute intervals
  const slots = [];
  for (let time = startTime; time <= endTime; time.setMinutes(time.getMinutes() + time_slot_duration)) {
+    // Get the slots time after adding the duration
+    let timeSlotEnd = new Date(time);
+    timeSlotEnd.setMinutes(timeSlotEnd.getMinutes() + time_slot_duration);
+    // Only add the slot if it is within the opening hours
+    if (timeSlotEnd > endTime) {
+      break; // Stop if the slot end time exceeds the end time
+    }
    slots.push(new Date(time));
  }
  let result = [];
@@ -201,8 +251,6 @@ const grid_layout_days = {
      days: 7, // Monday to Sunday
    }
  },
-  start_hour: 8, // Start at 8 AM
-  end_hour: 18, // End at 6 PM
  view: 'work_week', // Default view
  week_start_day: 1, // Monday as the first day of the week
 };
@@ -278,7 +326,9 @@ export const timeBookingsNewScheduler = {
  /** Layout */
  layout: layout,
  /** Days */
-  days: days
+  days: days,
+  /** Week Opening Hours */
+  opening_hours: opening_hours,
 }

 </script>
@@ -35,6 +35,70 @@ const onSelected = (slot) => {
  emits('update:selected', slot);
 };

+const departmentOpeningHours = ref([]);
+const getDepartmentOpeningHours = (departmentId) => {
+  // Make sure the departmentId is valid
+  if (!departmentId || isNaN(departmentId)) {
+    console.warn('Invalid department ID:', departmentId);
+    return;
+  }
+  // Fetch department opening hours
+  SessionUser.objects.department_time_bookings_opening_hours.get.single(departmentId).then(options => {
+    console.log('Department opening hours:', options, departmentId);
+    departmentOpeningHours.value = options;
+  });
+};
+
+watch(() => props.timeBookingsNewProcess.department.value, (newValue) => {
+  if (newValue) {
+    getDepartmentOpeningHours(newValue);
+  }
+});
+
+// If the departmentId is already set, fetch the opening hours
+if (props.timeBookingsNewProcess.department.value) {
+  getDepartmentOpeningHours(props.timeBookingsNewProcess.department.value);
+}
+
+// Watch for changes in the department opening hours
+watch(departmentOpeningHours, (newOpeningHours) => {
+    // Set the opening hours for the scheduler
+    timeBookingsNewScheduler.opening_hours.set({
+      /**
+       * {
+       *     "id": 4,
+       *     "department_id": 11,
+       *     "monday_start": null,
+       *     "monday_end": null,
+       *     "tuesday_start": null,
+       *     "tuesday_end": null,
+       *     "wednesday_start": null,
+       *     "wednesday_end": null,
+       *     "thursday_start": null,
+       *     "thursday_end": null,
+       *     "friday_start": null,
+       *     "friday_end": null,
+       *     "saturday_start": null,
+       *     "saturday_end": null,
+       *     "sunday_start": null,
+       *     "sunday_end": null
+       * }
+       */
+      monday: { start: newOpeningHours.monday_start, end: newOpeningHours.monday_end },
+      tuesday: { start: newOpeningHours.tuesday_start, end: newOpeningHours.tuesday_end },
+      wednesday: { start: newOpeningHours.wednesday_start, end: newOpeningHours.wednesday_end },
+      thursday: { start: newOpeningHours.thursday_start, end: newOpeningHours.thursday_end },
+      friday: { start: newOpeningHours.friday_start, end: newOpeningHours.friday_end },
+      saturday: { start: newOpeningHours.saturday_start, end: newOpeningHours.saturday_end },
+      sunday: { start: newOpeningHours.sunday_start, end: newOpeningHours.sunday_end },
+    });
+});
+
+timeBookingsNewScheduler.opening_hours.set({
+  //monday: { start: '08:00', end: '16:00' },
+  //tuesday: { start: '08:00', end: '16:00' },
+})
+
 </script>

 <template>