major claude changes
This commit is contained in:
@@ -35,8 +35,8 @@
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue';
|
||||
import Header from '../../layouts/headers/headerauth.vue';
|
||||
import SideBar from '../../layouts/sidebar/sidebar.vue';
|
||||
import Footer from '../../layouts/footers/footer.vue';
|
||||
@@ -44,7 +44,7 @@ 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 ServiceEditModal from './ServiceEditModal.vue';
|
||||
import axios from 'axios';
|
||||
import authHeader from '../../services/auth.header';
|
||||
|
||||
@@ -60,113 +60,111 @@ interface ServiceCall {
|
||||
service_cost: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ServiceCalendar',
|
||||
components: { Header, SideBar, Footer, FullCalendar, ServiceEditModal },
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
selectedServiceForEdit: null as Partial<ServiceCall> | null,
|
||||
calendarOptions: {
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
weekends: true,
|
||||
// Instead of a static array, we use a function source.
|
||||
// This is the standard way FullCalendar fetches events.
|
||||
events: `${import.meta.env.VITE_BASE_URL}/service/all`,
|
||||
eventClick: this.handleEventClick,
|
||||
// Add headers for authentication if needed by your API
|
||||
eventSourceSuccess: (content) => {
|
||||
// This is where you could transform data if needed
|
||||
return content;
|
||||
},
|
||||
eventSourceFailure: (error) => {
|
||||
console.error("Failed to fetch calendar events:", error);
|
||||
}
|
||||
} as CalendarOptions,
|
||||
};
|
||||
// Reactive data
|
||||
const user = ref(null)
|
||||
const selectedServiceForEdit = ref(null as Partial<ServiceCall> | null)
|
||||
const fullCalendar = ref()
|
||||
|
||||
// Functions
|
||||
// We can remove the fetchEvents method as FullCalendar now handles it.
|
||||
// async fetchEvents(): Promise<void> { ... }
|
||||
|
||||
const handleEventClick = (clickInfo: EventClickArg): void => {
|
||||
// This logic remains the same, as it correctly pulls data from extendedProps
|
||||
selectedServiceForEdit.value = {
|
||||
id: parseInt(clickInfo.event.id),
|
||||
scheduled_date: clickInfo.event.startStr,
|
||||
customer_name: clickInfo.event.title.split(': ')[1] || 'Unknown Customer',
|
||||
customer_id: clickInfo.event.extendedProps.customer_id,
|
||||
type_service_call: clickInfo.event.extendedProps.type_service_call,
|
||||
description: clickInfo.event.extendedProps.description,
|
||||
service_cost: clickInfo.event.extendedProps.service_cost,
|
||||
};
|
||||
}
|
||||
|
||||
// Calendar options
|
||||
const calendarOptions = ref({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
weekends: true,
|
||||
// Instead of a static array, we use a function source.
|
||||
// This is the standard way FullCalendar fetches events.
|
||||
events: `${import.meta.env.VITE_BASE_URL}/service/all`,
|
||||
eventClick: handleEventClick,
|
||||
// Add headers for authentication if needed by your API
|
||||
eventSourceSuccess: (content) => {
|
||||
// This is where you could transform data if needed
|
||||
return content;
|
||||
},
|
||||
created() {
|
||||
this.userStatus();
|
||||
// We no longer need to call fetchEvents() here because FullCalendar does it automatically.
|
||||
},
|
||||
methods: {
|
||||
// We can remove the fetchEvents method as FullCalendar now handles it.
|
||||
// async fetchEvents(): Promise<void> { ... }
|
||||
eventSourceFailure: (error) => {
|
||||
console.error("Failed to fetch calendar events:", error);
|
||||
}
|
||||
} as CalendarOptions)
|
||||
|
||||
handleEventClick(clickInfo: EventClickArg): void {
|
||||
// This logic remains the same, as it correctly pulls data from extendedProps
|
||||
this.selectedServiceForEdit = {
|
||||
id: parseInt(clickInfo.event.id),
|
||||
scheduled_date: clickInfo.event.startStr,
|
||||
customer_name: clickInfo.event.title.split(': ')[1] || 'Unknown Customer',
|
||||
customer_id: clickInfo.event.extendedProps.customer_id,
|
||||
type_service_call: clickInfo.event.extendedProps.type_service_call,
|
||||
description: clickInfo.event.extendedProps.description,
|
||||
service_cost: clickInfo.event.extendedProps.service_cost,
|
||||
};
|
||||
},
|
||||
// Lifecycle
|
||||
onMounted(() => {
|
||||
userStatus();
|
||||
// We no longer need to call fetchEvents() here because FullCalendar does it automatically.
|
||||
})
|
||||
|
||||
closeEditModal() {
|
||||
this.selectedServiceForEdit = null;
|
||||
},
|
||||
const closeEditModal = () => {
|
||||
selectedServiceForEdit.value = null;
|
||||
}
|
||||
|
||||
// =================== THIS IS THE CORRECTED SECTION ===================
|
||||
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 });
|
||||
// =================== THIS IS THE CORRECTED SECTION ===================
|
||||
const handleSaveChanges = async (updatedService: ServiceCall) => {
|
||||
try {
|
||||
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
|
||||
await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
|
||||
|
||||
// Get the FullCalendar component instance from the ref
|
||||
const calendarApi = (this.$refs.fullCalendar as any).getApi();
|
||||
if (calendarApi) {
|
||||
// Tell FullCalendar to re-fetch its events from the source.
|
||||
// This is the most reliable way to refresh the view immediately.
|
||||
calendarApi.refetchEvents();
|
||||
}
|
||||
|
||||
this.closeEditModal();
|
||||
} catch (error) {
|
||||
console.error("Failed to save changes:", error);
|
||||
alert("An error occurred while saving. Please check the console.");
|
||||
// Get the FullCalendar component instance from the ref
|
||||
const calendarApi = (fullCalendar.value as any).getApi();
|
||||
if (calendarApi) {
|
||||
// Tell FullCalendar to re-fetch its events from the source.
|
||||
// This is the most reliable way to refresh the view immediately.
|
||||
calendarApi.refetchEvents();
|
||||
}
|
||||
|
||||
closeEditModal();
|
||||
} catch (error) {
|
||||
console.error("Failed to save changes:", error);
|
||||
alert("An error occurred while saving. Please check the console.");
|
||||
}
|
||||
}
|
||||
// =================== END OF CORRECTED SECTION ===================
|
||||
|
||||
const handleDeleteService = async (serviceId: number) => {
|
||||
try {
|
||||
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
|
||||
await axios.delete(path, { withCredentials: true, headers: authHeader() });
|
||||
|
||||
// Also refresh the calendar after a delete
|
||||
const calendarApi = (fullCalendar.value as any).getApi();
|
||||
if (calendarApi) {
|
||||
calendarApi.refetchEvents();
|
||||
}
|
||||
|
||||
closeEditModal();
|
||||
} catch (error) {
|
||||
console.error("Error deleting event:", error);
|
||||
}
|
||||
}
|
||||
|
||||
const 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) {
|
||||
user.value = response.data.user;
|
||||
}
|
||||
},
|
||||
// =================== END OF CORRECTED SECTION ===================
|
||||
|
||||
async handleDeleteService(serviceId: number) {
|
||||
try {
|
||||
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
|
||||
await axios.delete(path, { withCredentials: true, headers: authHeader() });
|
||||
|
||||
// Also refresh the calendar after a delete
|
||||
const calendarApi = (this.$refs.fullCalendar as any).getApi();
|
||||
if (calendarApi) {
|
||||
calendarApi.refetchEvents();
|
||||
}
|
||||
|
||||
this.closeEditModal();
|
||||
} catch (error) {
|
||||
console.error("Error deleting event:", error);
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
})
|
||||
},
|
||||
},
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
user.value = null
|
||||
})
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user