Eamco/eamco_office_frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Working calender/service

Browse Source
This commit is contained in:
Edwin Eames
2025-08-22 14:48:28 -04:00
parent 7eed45ab32
commit 4bcff598e6
9 changed files with 629 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

169
src/pages/service/ServiceCalendar.vue Normal file
View File

@@ -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>

125
src/pages/service/ServiceEditModal.vue
View File

@@ -12,67 +12,48 @@
</span>
</div>
<button
@click="$emit('close-modal')"
type="button"
class="absolute top-0 right-0 mt-4 mr-4 text-gray-400 hover:text-gray-600 focus:outline-none"
aria-label="Close modal"
>
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
<button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-400 hover:text-gray-600 focus:outline-none" aria-label="Close modal">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
</button>
<!-- Form for Editing -->
<form @submit.prevent="saveChanges">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Scheduled Date -->
<!-- Scheduled Date Input -->
<div class="mb-4">
<label for="edit-date" class="block text-sm font-medium text-gray-700">Scheduled Date</label>
<input type="date" id="edit-date" v-model="editableService.scheduled_date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<input type="date" id="edit-date" v-model="editableService.date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
</div>
<!-- Service Type -->
<!-- NEW: Time Input -->
<div class="mb-4">
<label for="edit-service-type" class="block text-sm font-medium text-gray-700">Type of Service</label>
<select id="edit-service-type" v-model.number="editableService.type_service_call" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<option v-for="option in serviceOptions" :key="option.value" :value="option.value">
{{ option.text }}
</option>
<label for="edit-time" class="block text-sm font-medium text-gray-700">Scheduled Time</label>
<select id="edit-time" v-model.number="editableService.time" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
</select>
</div>
</div>
<!-- Description -->
<!-- Service Type (Moved to its own row) -->
<div class="mb-4">
<label for="edit-description" class="block text-sm font-medium text-gray-700">Description</label>
<!-- ====================================================== -->
<!-- ============== THIS LINE HAS BEEN UPDATED ============== -->
<!-- ====================================================== -->
<textarea
id="edit-description"
v-model="editableService.description"
rows="4"
required
class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm text-black focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
></textarea>
<!-- ====================================================== -->
<!-- ================ END OF UPDATED LINE ================ -->
<!-- ====================================================== -->
<label for="edit-service-type" class="block text-sm font-medium text-gray-700">Type of Service</label>
<select id="edit-service-type" v-model.number="editableService.type_service_call" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<option v-for="option in serviceOptions" :key="option.value" :value="option.value">
{{ option.text }}
</option>
</select>
</div>
<div class="mb-4">
<label for="edit-description" class="block text-sm font-medium text-gray-700">Description</label>
<textarea id="edit-description" v-model="editableService.description" rows="4" required class="mt-1 block w-full rounded-md border border-gray-300 shadow-sm text-black focus:border-indigo-500 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"></textarea>
</div>
<!-- Action Buttons -->
<div class="mt-6 flex justify-between items-center">
<button @click.prevent="confirmDelete" type="button" class="px-4 py-2 bg-red-600 text-white font-medium rounded-md shadow-sm hover:bg-red-700">
Delete Call
</button>
<button @click.prevent="confirmDelete" type="button" class="px-4 py-2 bg-red-600 text-white font-medium rounded-md shadow-sm hover:bg-red-700">Delete Call</button>
<div class="flex space-x-3">
<button @click.prevent="$emit('close-modal')" type="button" class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-md shadow-sm hover:bg-gray-300">
Cancel
</button>
<button type="submit" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700">
Save Changes
</button>
<button @click.prevent="$emit('close-modal')" type="button" class="px-4 py-2 bg-gray-200 text-gray-800 font-medium rounded-md shadow-sm hover:bg-gray-300">Cancel</button>
<button type="submit" class="px-4 py-2 bg-blue-600 text-white font-medium rounded-md shadow-sm hover:bg-blue-700">Save Changes</button>
</div>
</div>
</form>
@@ -82,10 +63,11 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import dayjs from 'dayjs'; // Import dayjs for easier date/time manipulation
interface ServiceCall {
id: number;
scheduled_date: string;
scheduled_date: string; // This is an ISO string like "2025-08-26T14:00:00"
customer_name: string;
customer_address: string;
customer_town: string;
@@ -93,33 +75,43 @@ interface ServiceCall {
description: string;
}
// Define the shape of our local, editable object
interface EditableService extends Omit<ServiceCall, 'scheduled_date'> {
date: string; // 'YYYY-MM-DD'
time: number; // 0-23
}
export default defineComponent({
name: 'ServiceEditModal',
props: {
// The prop can be a full ServiceCall or a simplified object from the calendar
service: {
type: Object as PropType<ServiceCall>,
type: Object as PropType<Partial<ServiceCall>>,
required: true,
},
},
data() {
return {
editableService: {} as Partial<ServiceCall>,
editableService: {} as Partial<EditableService>,
serviceOptions: [
{ text: 'Tune-up', value: 0 },
{ text: 'No Heat', value: 1 },
{ text: 'Fix', value: 2 },
{ text: 'Tank Install', value: 3 },
{ text: 'Other', value: 4 },
{ text: 'Tune-up', value: 0 }, { text: 'No Heat', value: 1 }, { text: 'Fix', value: 2 },
{ text: 'Tank Install', value: 3 }, { text: 'Other', value: 4 },
],
};
},
watch: {
service: {
handler(newVal) {
this.editableService = JSON.parse(JSON.stringify(newVal));
if (this.editableService.scheduled_date) {
this.editableService.scheduled_date = this.editableService.scheduled_date.split('T')[0];
}
if (!newVal) return;
// The date string could be from the DB (full ISO) or from FullCalendar (simpler)
const scheduled = dayjs(newVal.scheduled_date || new Date());
this.editableService = {
...newVal,
date: scheduled.format('YYYY-MM-DD'),
time: scheduled.hour(),
};
},
immediate: true,
deep: true,
@@ -127,26 +119,33 @@ export default defineComponent({
},
methods: {
saveChanges() {
this.$emit('save-changes', this.editableService);
// Re-combine date and time into a single ISO string before emitting
const date = this.editableService.date;
const time = this.editableService.time || 0;
const combinedDateTime = dayjs(`${date} ${time}:00`).format('YYYY-MM-DDTHH:mm:ss');
const finalPayload = {
...this.service,
...this.editableService,
scheduled_date: combinedDateTime,
};
this.$emit('save-changes', finalPayload);
},
confirmDelete() {
if (window.confirm(`Are you sure you want to delete this service call for "${this.service.customer_name}"?`)) {
if (this.service.id && window.confirm(`Are you sure you want to delete this service call?`)) {
this.$emit('delete-service', this.service.id);
}
},
getServiceTypeName(typeId: number | undefined | null): string {
if (typeId === undefined || typeId === null) {
return 'Unknown';
}
if (typeId === undefined || typeId === null) return 'Unknown';
const typeMap: { [key: number]: string } = {
0: 'Tune-up', 1: 'No Heat', 2: 'Fix', 3: 'Tank Install', 4: 'Other',
};
return typeMap[typeId] || 'Unknown';
},
getServiceTypeColor(typeId: number | undefined | null): string {
if (typeId === undefined || typeId === null) {
return 'gray';
}
if (typeId === undefined || typeId === null) return 'gray';
const colorMap: { [key: number]: string } = {
0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black',
};

164
src/pages/service/ServiceHome.vue
View File

@@ -7,47 +7,63 @@
<div class=" w-full px-10 ">
<div class="text-sm breadcrumbs mb-10">
<ul>
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
<li>Service Calls</li>
<li>
<router-link :to="{ name: 'home' }">
Home
</router-link>
</li>
<li>
Service Calls
</li>
</ul>
</div>
<div class="flex text-2xl mb-5 font-bold">
Upcoming Service Calls
Service Calls
</div>
<div v-if="isLoading" class="text-center p-10">
<p>Loading upcoming service calls...</p>
<p>Loading service calls...</p>
</div>
<div v-else-if="services.length === 0" class="text-center p-10 bg-gray-100 rounded-md">
<p>No upcoming service calls found.</p>
<div v-else-if="services.length === 0" class="text-center p-10 bg-base-200 rounded-md">
<p>No service calls found.</p>
</div>
<div v-else class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class=" bg-neutral">
<!-- ============================================= -->
<!-- ============== UPDATED TABLE SECTION ============== -->
<!-- ============================================= -->
<div v-else class="overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-base-200">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scheduled Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Scheduled Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Customer Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
</tr>
</thead>
<tbody class=" divide-y bg-neutral">
<tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-blue-600 hover:text-black cursor-pointer">
<tbody class="bg-base-100 divide-y divide-gray-700">
<!-- The hover color is now a slightly lighter shade of the background -->
<tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ service.customer_name }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ service.customer_address }}, {{ service.customer_town }}</td>
<td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
{{ getServiceTypeName(service.type_service_call) }}
</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500">{{ service.description }}</td>
<td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
</tr>
</tbody>
</table>
</div>
<!-- ============================================= -->
<!-- ============== END UPDATED SECTION ============== -->
<!-- ============================================= -->
</div>
</div>
@@ -63,13 +79,14 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import authHeader from '../../services/auth.header';
import Header from '../../layouts/headers/headerauth.vue';
import SideBar from '../../layouts/sidebar/sidebar.vue';
import Footer from '../../layouts/footers/footer.vue';
import ServiceEditModal from './ServiceEditModal.vue';
import { defineComponent } from 'vue'
import axios from 'axios'
import authHeader from '../../services/auth.header'
import Header from '../../layouts/headers/headerauth.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
import ServiceEditModal from './ServiceEditModal.vue'
import dayjs from 'dayjs'; // Import dayjs to handle date/time formatting
interface ServiceCall {
id: number;
@@ -90,7 +107,7 @@ export default defineComponent({
services: [] as ServiceCall[],
isLoading: true,
selectedServiceForEdit: null as ServiceCall | null,
};
}
},
created() {
this.userStatus();
@@ -112,7 +129,7 @@ export default defineComponent({
this.isLoading = false;
}
},
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios({
@@ -131,12 +148,53 @@ export default defineComponent({
})
},
// --- HELPER METHODS WITH IMPLEMENTATIONS RESTORED ---
openEditModal(service: ServiceCall) {
this.selectedServiceForEdit = service;
},
closeEditModal() {
this.selectedServiceForEdit = null;
},
async handleSaveChanges(updatedService: ServiceCall) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
const response = await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
if (response.data.ok) {
const index = this.services.findIndex(s => s.id === updatedService.id);
if (index !== -1) {
this.services[index] = response.data.service;
}
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) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
if (response.data.ok) {
this.services = this.services.filter(s => s.id !== serviceId);
this.closeEditModal();
}
} catch (error) {
console.error("Failed to delete service call:", error);
alert("An error occurred while deleting. Please check the console.");
}
},
formatDate(dateString: string): string {
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
// Adding a timeZone option helps prevent off-by-one-day errors
return new Date(dateString).toLocaleDateString(undefined, { ...options, timeZone: 'UTC' });
if (!dateString) return 'N/A';
return dayjs(dateString).format('MMMM D, YYYY');
},
formatTime(dateString: string): string {
if (!dateString) return 'N/A';
return dayjs(dateString).format('h:mm A');
},
getServiceTypeName(typeId: number): string {
@@ -155,51 +213,11 @@ export default defineComponent({
0: 'blue',
1: 'red',
2: 'green',
3: '#B58900', // A darker yellow for text
3: '#B58900',
4: 'black',
};
return colorMap[typeId] || 'gray';
},
// --- MODAL MANAGEMENT METHODS ---
openEditModal(service: ServiceCall) {
this.selectedServiceForEdit = service;
},
closeEditModal() {
this.selectedServiceForEdit = null;
},
async handleSaveChanges(updatedService: ServiceCall) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
const response = await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
if (response.data.ok) {
const index = this.services.findIndex(s => s.id === updatedService.id);
if (index !== -1) {
this.services[index] = response.data.service;
}
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) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
if (response.data.ok) {
this.services = this.services.filter(s => s.id !== serviceId);
this.closeEditModal();
}
} catch (error) {
console.error("Failed to delete service call:", error);
alert("An error occurred while deleting. Please check the console.");
}
},
}
},
});
})
</script>

84
src/pages/service/calender/CalendarCustomer.vue
View File

@@ -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);
}

8
src/pages/service/calender/EventSidebar.vue
View File

@@ -40,11 +40,7 @@
</select>
</div>
<div class="mb-4">
<!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
<label for="event-end-date" class="block text-sm font-medium text-gray-200">End Date (Optional for multi-day)</label>
<input type="date" id="event-end-date" v-model="event.endDate" :min="event.date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
</div>
<button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700">
Add Event
@@ -161,4 +157,4 @@ export default defineComponent({
},
},
});
</script>
</script>

27
src/pages/service/routes.ts
View File

@@ -1,8 +1,7 @@
import ServiceHome from './ServiceHome.vue' // Adjust the import path
// Import the new component at the top
import ServiceHome from './ServiceHome.vue'
import CalendarCustomer from './calender/CalendarCustomer.vue'
import ServiceCalendar from './ServiceCalendar.vue'
const serviceRoutes = [
{
@@ -11,14 +10,20 @@ const serviceRoutes = [
component: ServiceHome
},
// --- NEW ROUTE FOR THE MASTER CALENDAR ---
{
path: '/service/calendar', // Note: No '/:id' parameter
name: 'ServiceCalendar',
component: ServiceCalendar,
},
// -----------------------------------------
{
path: '/service/calender/:id',
name: 'CalenderCustomer',
component: CalendarCustomer,
},
{
path: '/service/calender/:id', // Note the typo, should likely be 'calendar'
name: 'CalenderCustomer',
component: CalendarCustomer,
},
]
export default serviceRoutes
//sourceMappingURL=index.ts.map
//sourceMappingURL=index.ts.map