Working calender/service

src/pages/service/calender/CalendarCustomer.vue

@@ -24,11 +24,12 @@
           <FullCalendar ref="fullCalendar" :options="calendarOptions" />
         </div>
         
-        <EventModal
-          v-if="selectedEvent"
-          :event="selectedEvent"
-          @close-modal="selectedEvent = null"
-          @delete-event="handleEventDelete"
+        <ServiceEditModal
+          v-if="selectedServiceForEdit"
+          :service="selectedServiceForEdit"
+          @close-modal="closeEditModal"
+          @save-changes="handleSaveChanges"
+          @delete-service="handleDeleteService"
         />
       </div>
     </div>
@@ -41,25 +42,32 @@ import Header from '../../../layouts/headers/headerauth.vue';
 import FullCalendar from '@fullcalendar/vue3';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
-import { CalendarOptions, EventApi, EventClickArg } from '@fullcalendar/core';
+// --- FIX: Removed 'EventApi' as it's no longer used ---
+import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
 import EventSidebar from './EventSidebar.vue';
-import EventModal from './EventModal.vue'; 
+import ServiceEditModal from '../ServiceEditModal.vue'; 
 import axios from 'axios';
 import authHeader from '../../../services/auth.header';
 
-// --- Interfaces ---
+// --- 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 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; }
-interface EventExtendedProps { description: string; type_service_call: number; }
-interface AppEvent { id?: string; title: string; start: string; end?: string; extendedProps: EventExtendedProps; }
 
 export default defineComponent({
   name: 'CalendarCustomer',
-  components: { Header, FullCalendar, EventSidebar, EventModal },
+  components: { Header, FullCalendar, EventSidebar, ServiceEditModal },
   data() {
     return {
       isLoading: false,
-      selectedEvent: null as EventApi | null,
-      calendarOptions: {} as CalendarOptions,
+      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
+        eventClick: this.handleEventClick,
+      } as CalendarOptions,
       customer: null as Customer | null,
     };
   },
@@ -72,18 +80,44 @@ export default defineComponent({
     },
   },
   created() {
-    this.calendarOptions = {
-      plugins: [dayGridPlugin, interactionPlugin],
-      initialView: 'dayGridMonth',
-      weekends: true,
-      events: [],
-      eventClick: this.handleEventClick,
-    };
+    // The created hook is now only responsible for fetching data
     this.fetchEvents();
   },
   methods: {
-    // --- METHOD IMPLEMENTATIONS RESTORED ---
+    handleEventClick(clickInfo: EventClickArg): void {
+      const events = (this.calendarOptions.events as any[]) || [];
+      const originalEvent = events.find(e => e.id == clickInfo.event.id);
 
+      if (originalEvent) {
+          this.selectedServiceForEdit = {
+              id: originalEvent.id,
+              scheduled_date: originalEvent.start,
+              customer_name: originalEvent.title.split(': ')[1] || '',
+              customer_address: '',
+              customer_town: '',
+              type_service_call: originalEvent.extendedProps.type_service_call,
+              description: originalEvent.extendedProps.description,
+          };
+      }
+    },
+    closeEditModal() {
+        this.selectedServiceForEdit = null;
+    },
+    async handleSaveChanges(updatedService: ServiceCall) {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
+        await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
+        await this.fetchEvents();
+        this.closeEditModal();
+      } catch (error) {
+        console.error("Failed to save changes:", error);
+        alert("An error occurred while saving. Please check the console.");
+      }
+    },
+    async handleDeleteService(serviceId: number) {
+        await this.handleEventDelete(String(serviceId));
+        this.closeEditModal();
+    },
     async getCustomer(customerId: string): Promise<void> {
       this.isLoading = true;
       this.customer = null;
@@ -99,7 +133,6 @@ export default defineComponent({
         this.isLoading = false;
       }
     },
-
     async fetchEvents(): Promise<void> {
       try {
         const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -109,11 +142,6 @@ export default defineComponent({
         console.error("Error fetching all calendar events:", error);
       }
     },
-
-    handleEventClick(clickInfo: EventClickArg): void {
-      this.selectedEvent = clickInfo.event;
-    },
-
     async handleEventScheduled(eventData: any): Promise<void> {
       if (!this.customer) {
           alert("Error: A customer must be loaded in the sidebar to create a new event.");
@@ -136,7 +164,6 @@ 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}`;
@@ -145,7 +172,6 @@ export default defineComponent({
             const calendarApi = (this.$refs.fullCalendar as any).getApi();
             const eventToRemove = calendarApi.getEventById(eventId);
             if (eventToRemove) eventToRemove.remove();
-            this.selectedEvent = null;
         } else {
             console.error("Failed to delete event:", response.data.error);
         }