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

Working time

Browse Source
This commit is contained in:
Edwin Eames
2025-08-22 12:58:17 -04:00
parent 29ca1a6605
commit 7eed45ab32
2 changed files with 35 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -23,7 +23,13 @@
<div class="flex-1 p-4 overflow-auto">
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
</div>
<EventModal v-if="selectedEvent" :event="selectedEvent" @close-modal="selectedEvent = null" @delete-event="handleEventDelete" />
<EventModal
v-if="selectedEvent"
:event="selectedEvent"
@close-modal="selectedEvent = null"
@delete-event="handleEventDelete"
/>
</div>
</div>
</div>
@@ -37,12 +43,14 @@ import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarOptions, EventApi, EventClickArg } from '@fullcalendar/core';
import EventSidebar from './EventSidebar.vue';
import EventModal from './EventModal.vue';
import EventModal from './EventModal.vue';
import axios from 'axios';
import authHeader from '../../../services/auth.header'; // Assuming you have this service
import authHeader from '../../../services/auth.header';
// --- Interfaces (no changes) ---
// --- Interfaces ---
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',
@@ -71,19 +79,19 @@ export default defineComponent({
events: [],
eventClick: this.handleEventClick,
};
// --- KEY CHANGE: Fetch ALL events when the component is created ---
this.fetchEvents();
},
methods: {
// --- METHOD IMPLEMENTATIONS RESTORED ---
async getCustomer(customerId: string): Promise<void> {
this.isLoading = true;
this.customer = null;
try {
const path = `${import.meta.env.VITE_BASE_URL}/customer/${customerId}`;
const response = await axios.get(path, { withCredentials: true });
const response = await axios.get(path, { withCredentials: true, headers: authHeader() });
if (response.data && response.data.id) {
this.customer = response.data;
// --- REMOVED: No longer need to fetch events from here ---
}
} catch (error) {
console.error("API call to get customer FAILED:", error);
@@ -92,15 +100,10 @@ export default defineComponent({
}
},
// --- KEY CHANGE: This method now fetches ALL events and is independent ---
async fetchEvents(): Promise<void> {
try {
console.log("fetchEvents: Fetching ALL events for the master calendar.");
// Call the new '/service/all' endpoint
const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
const response = await axios.get(path, { headers: authHeader(), withCredentials: true });
console.log("fetchEvents: Received all events from API:", response.data);
this.calendarOptions.events = response.data;
} catch (error) {
console.error("Error fetching all calendar events:", error);
@@ -125,7 +128,6 @@ export default defineComponent({
const response = await axios.post(path, payload, { withCredentials: true, headers: authHeader() });
if (response.data.ok === true) {
// After creating a new event, refresh the entire master calendar
await this.fetchEvents();
} else {
console.error("Failed to create event:", response.data.error);
@@ -136,7 +138,6 @@ export default defineComponent({
},
async handleEventDelete(eventId: string): Promise<void> {
// ... (no changes needed in this method)
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${eventId}`;
const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
@@ -145,8 +146,12 @@ export default defineComponent({
const eventToRemove = calendarApi.getEventById(eventId);
if (eventToRemove) eventToRemove.remove();
this.selectedEvent = null;
} else {
console.error("Failed to delete event:", response.data.error);
}
} catch (error) { console.error("Error deleting event:", error); }
} catch (error) {
console.error("Error deleting event:", error);
}
},
},
});

31
src/pages/service/calender/EventModal.vue
View File

@@ -1,23 +1,26 @@
<template>
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
<div class="relative bg-white p-6 rounded-lg shadow-xl w-full max-w-md">
<div class="text-left">
<h3 class="text-2xl leading-6 font-bold text-gray-900 mb-2">{{ event?.title }}</h3>
<div class="mt-4">
<p class="text-sm text-gray-600 whitespace-pre-wrap">{{ event?.extendedProps.description }}</p>
<p class="text-sm text-gray-500 mt-4">
<strong>Start:</strong> {{ formatEventDate(event?.start) }}
</p>
<p v-if="event?.end" class="text-sm text-gray-500">
<strong>End:</strong> {{ formatEventDate(event?.end, true) }}
<strong>When:</strong> {{ formatEventDate(event?.start) }}
</p>
</div>
</div>
<div class="mt-6 flex justify-end space-x-3">
<button @click="confirmDelete" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
Delete
<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>
<div class="mt-6 flex justify-between items-center">
<button @click="confirmDelete" class="px-4 py-2 bg-red-600 text-white text-base font-medium rounded-md shadow-sm hover:bg-red-700">
Delete Event
</button>
<button @click="$emit('close-modal')" class="px-4 py-2 bg-gray-200 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">
<button @click="$emit('close-modal')" class="px-4 py-2 bg-gray-200 text-gray-800 text-base font-medium rounded-md shadow-sm hover:bg-gray-300">
Close
</button>
</div>
@@ -32,6 +35,7 @@ import dayjs from 'dayjs';
export default defineComponent({
name: 'EventModal',
// This modal correctly expects a prop named 'event' of type 'EventApi'
props: {
event: {
type: Object as PropType<EventApi | null>,
@@ -44,15 +48,10 @@ export default defineComponent({
this.$emit('delete-event', this.event.id);
}
},
formatEventDate(date: Date | string | null | undefined, isEndDate: boolean = false): string {
formatEventDate(date: Date | string | null | undefined): string {
if (!date) return 'N/A';
let dateObj = dayjs(date);
if (isEndDate) {
dateObj = dateObj.subtract(1, 'day');
}
return dateObj.format('MMMM D, YYYY');
// Format the date and time from the FullCalendar event object
return dayjs(date).format('MMMM D, YYYY [at] h:mm A');
}
},
});