From 2c86cc716f4dcb798badf25c178631630796c592 Mon Sep 17 00:00:00 2001 From: Jepp9350 <2jepp9350@gmail.com> Date: Tue, 27 May 2025 16:59:49 +0200 Subject: [PATCH] Add department opening hours management and scheduler integration --- .../book/TimeBookingsNewProcess.vue | 4 +- .../book/TimeBookingsNewScheduler.vue | 60 +++++++++++++++-- .../book/steps/TimeBookingsNewStep3.vue | 64 +++++++++++++++++++ 3 files changed, 120 insertions(+), 8 deletions(-) diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewProcess.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewProcess.vue index dec741fd..cfedd0fb 100644 --- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewProcess.vue +++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewProcess.vue @@ -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); diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewScheduler.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewScheduler.vue index 82a33f9f..1e23d259 100644 --- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewScheduler.vue +++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/TimeBookingsNewScheduler.vue @@ -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, } \ No newline at end of file diff --git a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/steps/TimeBookingsNewStep3.vue b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/steps/TimeBookingsNewStep3.vue index 4f4df068..28a9f3de 100644 --- a/src/views/dashboards/departmentDashboard/modules/time-bookings/book/steps/TimeBookingsNewStep3.vue +++ b/src/views/dashboards/departmentDashboard/modules/time-bookings/book/steps/TimeBookingsNewStep3.vue @@ -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' }, +}) +