Working calender/service

2025-08-22 14:48:28 -04:00
parent 7eed45ab32
commit 4bcff598e6
9 changed files with 629 additions and 466 deletions
@@ -0,0 +1,169 @@
+<template>
+  <Header />
+  <div class="flex">
+    <div class="">
+      <SideBar />
+    </div>
+    <div class="w-full px-10">
+      <div class="text-sm breadcrumbs mb-4">
+        <ul>
+          <li><router-link :to="{ name: 'home' }">Home</router-link></li>
+          <li><router-link :to="{ name: 'ServiceHome' }">Service</router-link></li>
+          <li>Master Calendar</li>
+        </ul>
+      </div>
+
+      <div class="flex text-2xl mb-5 font-bold">
+        Master Service Calendar
+      </div>
+
+      <!-- This component has no sidebar, so the calendar takes up the full content area -->
+      <div class="flex h-screen font-sans">
+        <div class="flex-1 p-4 overflow-auto">
+          <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <Footer />
+
+  <!-- Re-using the powerful edit modal for this page -->
+  <ServiceEditModal
+    v-if="selectedServiceForEdit"
+    :service="selectedServiceForEdit"
+    @close-modal="closeEditModal"
+    @save-changes="handleSaveChanges"
+    @delete-service="handleDeleteService"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import Header from '../../layouts/headers/headerauth.vue';
+import SideBar from '../../layouts/sidebar/sidebar.vue';
+import Footer from '../../layouts/footers/footer.vue';
+import FullCalendar from '@fullcalendar/vue3';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
+import ServiceEditModal from './ServiceEditModal.vue'; 
+import axios from 'axios';
+import authHeader from '../../services/auth.header';
+
+// --- Interfaces ---
+interface ServiceCall {
+  id: number;
+  scheduled_date: string;
+  customer_name: string;
+  customer_address: string;
+  customer_town: string;
+  type_service_call: number;
+  description: string;
+}
+
+export default defineComponent({
+  name: 'ServiceCalendar',
+  components: { Header, SideBar, Footer, FullCalendar, ServiceEditModal },
+  data() {
+    return {
+      user: null, // For header/sidebar logic if needed
+      selectedServiceForEdit: null as Partial<ServiceCall> | null,
+      calendarOptions: {
+        plugins: [dayGridPlugin, interactionPlugin],
+        initialView: 'dayGridMonth',
+        weekends: true,
+        events: [] as any[],
+        eventClick: this.handleEventClick,
+      } as CalendarOptions,
+    };
+  },
+  created() {
+    this.userStatus();
+    this.fetchEvents();
+  },
+  methods: {
+    // This method fetches ALL events for the master calendar
+    async fetchEvents(): Promise<void> {
+      try {
+        const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
+        const response = await axios.get(path, { headers: authHeader(), withCredentials: true });
+        this.calendarOptions.events = response.data;
+      } catch (error) {
+        console.error("Error fetching all calendar events:", error);
+      }
+    },
+
+    // This opens the modal when a calendar event is clicked
+    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,
+          };
+      }
+    },
+
+    // Closes the modal
+    closeEditModal() {
+        this.selectedServiceForEdit = null;
+    },
+
+    // Saves changes from the modal and refreshes the calendar
+    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.");
+      }
+    },
+
+    // Deletes the service from the modal and refreshes the calendar
+    async handleDeleteService(serviceId: number) {
+      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(); // Refresh the calendar from the database
+            this.closeEditModal();
+        } else {
+            console.error("Failed to delete event:", response.data.error);
+        }
+      } catch (error) { 
+        console.error("Error deleting event:", error); 
+      }
+    },
+
+    // Standard method for user status, e.g., for the header
+    userStatus() {
+      let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
+      axios({
+        method: 'get',
+        url: path,
+        withCredentials: true,
+        headers: authHeader(),
+      })
+        .then((response: any) => {
+          if (response.data.ok) {
+            this.user = response.data.user;
+          }
+        })
+        .catch(() => {
+          this.user = null
+        })
+    },
+  },
+});
+</script>