tons fixes

src/pages/service/calender/CalendarCustomer.vue

@@ -42,15 +42,13 @@ import Header from '../../../layouts/headers/headerauth.vue';
 import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
-// --- FIX: Removed 'EventApi' as it's no longer used ---
 import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
 import EventSidebar from './EventSidebar.vue';
-import ServiceEditModal from '../ServiceEditModal.vue'; 
+import ServiceEditModal from '../../service/ServiceEditModal.vue'; 
 import axios from 'axios';
 import authHeader from '../../../services/auth.header';
 
-// --- Interfaces (no changes) ---
-interface ServiceCall { id: number; scheduled_date: string; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
+interface ServiceCall { id: number; scheduled_date: string; customer_id: string; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
 interface Customer { id: number; customer_last_name: string; customer_first_name: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; customer_address: string; customer_home_type: number; customer_apt: string; }
 
 export default defineComponent({
@@ -60,12 +58,11 @@ export default defineComponent({
     return {
       isLoading: false,
       selectedServiceForEdit: null as Partial<ServiceCall> | null,
-      // --- FIX: Define calendarOptions directly here to resolve "unused variable" warnings ---
       calendarOptions: {
         plugins: [dayGridPlugin, interactionPlugin],
         initialView: 'dayGridMonth',
         weekends: true,
-        events: [] as any[], // Start with a typed empty array
+        events: [] as any[],
         eventClick: this.handleEventClick,
       } as CalendarOptions,
       customer: null as Customer | null,
@@ -80,29 +77,35 @@ export default defineComponent({
     },
   },
   created() {
-    // The created hook is now only responsible for fetching data
     this.fetchEvents();
   },
   methods: {
+    // --- THIS IS THE FIX ---
+    // The logic from ServiceCalendar.vue is now correctly applied here.
     handleEventClick(clickInfo: EventClickArg): void {
       const events = (this.calendarOptions.events as any[]) || [];
       const originalEvent = events.find(e => e.id == clickInfo.event.id);
 
       if (originalEvent) {
+          // We "flatten" the nested object from the calendar into the simple,
+          // flat structure that the modal expects, ensuring customer_id is included.
           this.selectedServiceForEdit = {
               id: originalEvent.id,
               scheduled_date: originalEvent.start,
-              customer_name: originalEvent.title.split(': ')[1] || '',
-              customer_address: '',
-              customer_town: '',
+              customer_id: originalEvent.customer_id, // This was the missing piece
+              customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
               type_service_call: originalEvent.extendedProps.type_service_call,
               description: originalEvent.extendedProps.description,
+              customer_address: '',
+              customer_town: '',
           };
       }
     },
+
     closeEditModal() {
         this.selectedServiceForEdit = null;
     },
+
     async handleSaveChanges(updatedService: ServiceCall) {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
@@ -114,10 +117,22 @@ export default defineComponent({
         alert("An error occurred while saving. Please check the console.");
       }
     },
+
     async handleDeleteService(serviceId: number) {
-        await this.handleEventDelete(String(serviceId));
-        this.closeEditModal();
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
+        const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
+        if (response.data.ok === true) {
+            await this.fetchEvents();
+            this.closeEditModal();
+        } else {
+            console.error("Failed to delete event:", response.data.error);
+        }
+      } catch (error) { 
+        console.error("Error deleting event:", error); 
+      }
     },
+    
     async getCustomer(customerId: string): Promise<void> {
       this.isLoading = true;
       this.customer = null;
@@ -133,6 +148,7 @@ export default defineComponent({
         this.isLoading = false;
       }
     },
+
     async fetchEvents(): Promise<void> {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -142,6 +158,7 @@ export default defineComponent({
         console.error("Error fetching all calendar events:", error);
       }
     },
+
     async handleEventScheduled(eventData: any): Promise<void> {
       if (!this.customer) {
           alert("Error: A customer must be loaded in the sidebar to create a new event.");
@@ -154,7 +171,6 @@ export default defineComponent({
         };
         const path = import.meta.env.VITE_BASE_URL + "/service/create";
         const response = await axios.post(path, payload, { withCredentials: true, headers: authHeader() });
-
         if (response.data.ok === true) {
           await this.fetchEvents();
         } else {
@@ -164,20 +180,10 @@ export default defineComponent({
         console.error("Error creating event:", error);
       }
     },
+
     async handleEventDelete(eventId: string): Promise<void> {
-      try {
-        const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${eventId}`;
-        const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
-        if (response.data.ok === true) {
-            const calendarApi = (this.$refs.fullCalendar as any).getApi();
-            const eventToRemove = calendarApi.getEventById(eventId);
-            if (eventToRemove) eventToRemove.remove();
-        } else {
-            console.error("Failed to delete event:", response.data.error);
-        }
-      } catch (error) { 
-        console.error("Error deleting event:", error); 
-      }
+        // This is a simple alias now, as handleDeleteService is more specific
+        await this.handleDeleteService(Number(eventId));
     },
   },
 });