Added price for service
This commit is contained in:
@@ -81,11 +81,14 @@
|
||||
<router-link :to="{ name: 'ServiceHome' }">
|
||||
<div class=" hover:underline py-1" v-if="upcoming_service_count > 0">
|
||||
<div class="flex gap-5">
|
||||
<div class="">Services</div>
|
||||
<div class="">Service Upcomming</div>
|
||||
<div class="text-orange-600"> ({{ upcoming_service_count }})</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=" hover:underline py-1" v-else>Services</div>
|
||||
</router-link>
|
||||
<router-link :to="{ name: 'ServicePast' }">
|
||||
<div class=" hover:underline py-1">Past Service</div>
|
||||
</router-link>
|
||||
</li>
|
||||
|
||||
|
||||
@@ -19,6 +19,7 @@
|
||||
|
||||
<div class="flex h-screen font-sans">
|
||||
<div class="flex-1 p-4 overflow-auto">
|
||||
<!-- The 'ref' is important for accessing the calendar's API -->
|
||||
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -58,6 +59,7 @@ interface ServiceCall {
|
||||
customer_town: string;
|
||||
type_service_call: number;
|
||||
description: string;
|
||||
service_cost: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
@@ -71,77 +73,80 @@ export default defineComponent({
|
||||
plugins: [dayGridPlugin, interactionPlugin],
|
||||
initialView: 'dayGridMonth',
|
||||
weekends: true,
|
||||
events: [] as any[],
|
||||
// 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, response) => {
|
||||
// This is where you could transform data if needed
|
||||
return content;
|
||||
},
|
||||
eventSourceFailure: (error) => {
|
||||
console.error("Failed to fetch calendar events:", error);
|
||||
}
|
||||
} as CalendarOptions,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.userStatus();
|
||||
this.fetchEvents();
|
||||
// We no longer need to call fetchEvents() here because FullCalendar does it automatically.
|
||||
},
|
||||
methods: {
|
||||
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);
|
||||
}
|
||||
},
|
||||
// We can remove the fetchEvents method as FullCalendar now handles it.
|
||||
// async fetchEvents(): Promise<void> { ... }
|
||||
|
||||
// --- THIS IS THE FIX ---
|
||||
handleEventClick(clickInfo: EventClickArg): void {
|
||||
const events = (this.calendarOptions.events as any[]) || [];
|
||||
const originalEvent = events.find(e => e.id == clickInfo.event.id);
|
||||
|
||||
if (originalEvent) {
|
||||
// We "flatten" the nested object from the calendar into the simple,
|
||||
// flat structure that the modal expects.
|
||||
this.selectedServiceForEdit = {
|
||||
id: originalEvent.id,
|
||||
scheduled_date: originalEvent.start,
|
||||
customer_id: originalEvent.customer_id,
|
||||
// Extract the customer name from the title
|
||||
customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
|
||||
// Pull the properties out of the nested extendedProps
|
||||
type_service_call: originalEvent.extendedProps.type_service_call,
|
||||
description: originalEvent.extendedProps.description,
|
||||
|
||||
// Add dummy values for other fields the ServiceCall interface expects
|
||||
customer_address: '',
|
||||
customer_town: '',
|
||||
};
|
||||
}
|
||||
// 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,
|
||||
};
|
||||
},
|
||||
|
||||
closeEditModal() {
|
||||
this.selectedServiceForEdit = 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 });
|
||||
await this.fetchEvents();
|
||||
|
||||
// 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.");
|
||||
}
|
||||
},
|
||||
// =================== END OF CORRECTED SECTION ===================
|
||||
|
||||
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();
|
||||
this.closeEditModal();
|
||||
} else {
|
||||
console.error("Failed to delete event:", response.data.error);
|
||||
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);
|
||||
}
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
<!-- Modal Overlay -->
|
||||
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
|
||||
<!-- Modal Content -->
|
||||
<div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-4xl">
|
||||
<!-- 1. Reduced max-width for a more compact modal -->
|
||||
<div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-3xl">
|
||||
|
||||
<!-- Modal Header -->
|
||||
<div class="flex justify-between items-center border-b border-gray-700 pb-3 mb-4">
|
||||
@@ -16,9 +17,8 @@
|
||||
<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>
|
||||
|
||||
<!-- Customer & Parts Info Section (Two Columns) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
|
||||
<!-- Left Column: Customer Info -->
|
||||
<!-- Customer & Parts Info Section (Remains the same) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
|
||||
<div v-if="customer" class="p-4 bg-base-200 rounded-md">
|
||||
<div class="font-bold text-lg">{{ customer.account_number }}</div>
|
||||
<div class="text-sm">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
|
||||
@@ -26,66 +26,63 @@
|
||||
<div class="text-sm">{{ customer.customer_town }}, {{ customer.customer_state }} {{ customer.customer_zip }}</div>
|
||||
<div class="text-sm mt-1">{{ customer.customer_phone_number }}</div>
|
||||
</div>
|
||||
<div v-else class="p-4 bg-base-200 rounded-md text-center">
|
||||
<p>Loading customer details...</p>
|
||||
</div>
|
||||
|
||||
<!-- ====================================================== -->
|
||||
<!-- ============== SERVICE PARTS (VIEW-ONLY) ============== -->
|
||||
<!-- ====================================================== -->
|
||||
<div v-else class="p-4 bg-base-200 rounded-md text-center"><p>Loading customer details...</p></div>
|
||||
<div v-if="!isLoadingParts && serviceParts" class="p-4 bg-base-200 rounded-md">
|
||||
<h4 class="font-bold text-lg mb-2">Service Parts on File</h4>
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-2 text-sm">
|
||||
<div>
|
||||
<label class="block text-xs font-medium opacity-70">Oil Filter</label>
|
||||
<p class="font-semibold">{{ serviceParts.oil_filter || 'N/A' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium opacity-70">Oil Filter 2</label>
|
||||
<p class="font-semibold">{{ serviceParts.oil_filter_2 || 'N/A' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium opacity-70">Oil Nozzle</label>
|
||||
<p class="font-semibold">{{ serviceParts.oil_nozzle || 'N/A' }}</p>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium opacity-70">Oil Nozzle 2</label>
|
||||
<p class="font-semibold">{{ serviceParts.oil_nozzle_2 || 'N/A' }}</p>
|
||||
</div>
|
||||
<div><label class="block text-xs font-medium opacity-70">Oil Filter</label><p class="font-semibold">{{ serviceParts.oil_filter || 'N/A' }}</p></div>
|
||||
<div><label class="block text-xs font-medium opacity-70">Oil Filter 2</label><p class="font-semibold">{{ serviceParts.oil_filter_2 || 'N/A' }}</p></div>
|
||||
<div><label class="block text-xs font-medium opacity-70">Oil Nozzle</label><p class="font-semibold">{{ serviceParts.oil_nozzle || 'N/A' }}</p></div>
|
||||
<div><label class="block text-xs font-medium opacity-70">Oil Nozzle 2</label><p class="font-semibold">{{ serviceParts.oil_nozzle_2 || 'N/A' }}</p></div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="p-4 bg-base-200 rounded-md text-center">
|
||||
<p>Loading service parts...</p>
|
||||
</div>
|
||||
<!-- ====================================================== -->
|
||||
<!-- ================ END VIEW-ONLY SECTION =============== -->
|
||||
<!-- ====================================================== -->
|
||||
<div v-else class="p-4 bg-base-200 rounded-md text-center"><p>Loading service parts...</p></div>
|
||||
</div>
|
||||
|
||||
<!-- Form for Editing Service Call Details -->
|
||||
<!-- ===================================================================== -->
|
||||
<!-- ============== 2. Re-organized Form into a Compact Grid ============= -->
|
||||
<!-- ===================================================================== -->
|
||||
<form @submit.prevent="saveChanges">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div class="mb-4">
|
||||
<!-- New grid container for all form fields -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-x-6 gap-y-4">
|
||||
|
||||
<!-- Scheduled Date -->
|
||||
<div>
|
||||
<label for="edit-date" class="block text-sm font-medium">Scheduled Date</label>
|
||||
<input type="date" id="edit-date" v-model="editableService.date" required class="input input-bordered w-full mt-1">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
|
||||
<!-- Scheduled Time -->
|
||||
<div>
|
||||
<label for="edit-time" class="block text-sm font-medium">Scheduled Time</label>
|
||||
<select id="edit-time" v-model.number="editableService.time" class="select select-bordered w-full mt-1">
|
||||
<option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Type of Service -->
|
||||
<div>
|
||||
<label for="edit-service-type" class="block text-sm font-medium">Type of Service</label>
|
||||
<select id="edit-service-type" v-model.number="editableService.type_service_call" required class="select select-bordered w-full mt-1">
|
||||
<option v-for="option in serviceOptions" :key="option.value" :value="option.value">{{ option.text }}</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Total Cost -->
|
||||
<div>
|
||||
<label for="edit-service-cost" class="block text-sm font-medium">Total</label>
|
||||
<input type="number" step="0.01" placeholder="" id="edit-service-cost" v-model="editableService.service_cost" class="input input-bordered w-full mt-1">
|
||||
</div>
|
||||
|
||||
<!-- Description (Spans full width of the grid) -->
|
||||
<div class="md:col-span-2">
|
||||
<label for="edit-description" class="block text-sm font-medium">Description</label>
|
||||
<textarea id="edit-description" v-model="editableService.description" rows="4" required class="textarea textarea-bordered w-full mt-1"></textarea>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="edit-service-type" class="block text-sm font-medium">Type of Service</label>
|
||||
<select id="edit-service-type" v-model.number="editableService.type_service_call" required class="select select-bordered w-full mt-1">
|
||||
<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">Description</label>
|
||||
<textarea id="edit-description" v-model="editableService.description" rows="4" required class="textarea textarea-bordered w-full mt-1"></textarea>
|
||||
</div>
|
||||
|
||||
<!-- Buttons -->
|
||||
<div class="mt-6 flex justify-between items-center">
|
||||
<button @click.prevent="confirmDelete" type="button" class="btn btn-error">Delete Call</button>
|
||||
<div class="flex space-x-3">
|
||||
@@ -105,7 +102,7 @@ import axios from 'axios';
|
||||
import authHeader from '../../services/auth.header';
|
||||
|
||||
// --- Interfaces ---
|
||||
interface ServiceCall { id: number; scheduled_date: string; customer_id: number; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
|
||||
interface ServiceCall { id: number; scheduled_date: string; customer_id: number; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; service_cost: string }
|
||||
interface EditableService extends Omit<ServiceCall, 'scheduled_date'> { date: string; time: number; }
|
||||
interface Customer { account_number: string; customer_first_name: string; customer_last_name: string; customer_address: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; }
|
||||
interface ServiceParts { customer_id: number; oil_filter: string; oil_filter_2: string; oil_nozzle: string; oil_nozzle_2: string; }
|
||||
@@ -157,9 +154,7 @@ export default defineComponent({
|
||||
.catch((error: any) => { console.error("Failed to fetch service parts:", error); })
|
||||
.finally(() => { this.isLoadingParts = false; });
|
||||
},
|
||||
// --- UPDATED: Simplified saveChanges method ---
|
||||
async saveChanges() {
|
||||
// This method now only saves the service call itself.
|
||||
const date = this.editableService.date;
|
||||
const time = this.editableService.time || 0;
|
||||
const combinedDateTime = dayjs(`${date} ${time}:00`).format('YYYY-MM-DDTHH:mm:ss');
|
||||
|
||||
@@ -55,6 +55,7 @@
|
||||
{{ getServiceTypeName(service.type_service_call) }}
|
||||
</td>
|
||||
<td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
|
||||
<td class="px-6 py-4 whitespace-normal text-sm">{{ service.service_cost }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@@ -93,6 +94,7 @@ interface ServiceCall {
|
||||
customer_town: string;
|
||||
type_service_call: number;
|
||||
description: string;
|
||||
service_cost: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
|
||||
246
src/pages/service/ServicePast.vue
Normal file
246
src/pages/service/ServicePast.vue
Normal file
@@ -0,0 +1,246 @@
|
||||
<template>
|
||||
<Header />
|
||||
<div class="flex">
|
||||
<div class="">
|
||||
<SideBar />
|
||||
</div>
|
||||
<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>
|
||||
PastService Calls
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex text-2xl mb-5 font-bold">
|
||||
Past Service Calls
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="text-center p-10">
|
||||
<p>Loading service calls...</p>
|
||||
</div>
|
||||
|
||||
<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 rounded-lg">
|
||||
<table class="min-w-full divide-y divide-gray-700 table-fixed">
|
||||
|
||||
<!-- =================== THIS IS THE CORRECTED SECTION =================== -->
|
||||
<thead class="bg-base-200">
|
||||
<tr>
|
||||
<!-- Columns with predictable, shorter content get fixed widths -->
|
||||
<th scope="col" class="w-48 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Scheduled Date</th>
|
||||
<th scope="col" class="w-32 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
|
||||
|
||||
<!-- Columns with variable text content can share the remaining space -->
|
||||
<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>
|
||||
|
||||
<!-- Another fixed-width column -->
|
||||
<th scope="col" class="w-32 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
|
||||
|
||||
<!-- Description can be left to fill remaining space -->
|
||||
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
|
||||
|
||||
<!-- Service Cost now has a smaller, fixed width -->
|
||||
<th scope="col" class="w-20 px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Cost</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- =================== END OF CORRECTED SECTION =================== -->
|
||||
|
||||
<tbody class="bg-base-100 divide-y divide-gray-700">
|
||||
<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 hover:text-blue-600 truncate">{{ service.customer_name }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap truncate">{{ 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">{{ service.description }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-right">{{ formatCurrency(service.service_cost) }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<ServiceEditModal
|
||||
v-if="selectedServiceForEdit"
|
||||
:service="selectedServiceForEdit"
|
||||
@close-modal="closeEditModal"
|
||||
@save-changes="handleSaveChanges"
|
||||
@delete-service="handleDeleteService"
|
||||
/>
|
||||
</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 dayjs from 'dayjs';
|
||||
|
||||
interface ServiceCall {
|
||||
id: number;
|
||||
scheduled_date: string;
|
||||
customer_id: number;
|
||||
customer_name: string;
|
||||
customer_address: string;
|
||||
customer_town: string;
|
||||
type_service_call: number;
|
||||
description: string;
|
||||
service_cost: string;
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ServiceHPast',
|
||||
components: { Header, SideBar, Footer, ServiceEditModal },
|
||||
data() {
|
||||
return {
|
||||
user: null,
|
||||
services: [] as ServiceCall[],
|
||||
isLoading: true,
|
||||
selectedServiceForEdit: null as ServiceCall | null,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.userStatus();
|
||||
this.fetchUpcomingServices();
|
||||
},
|
||||
methods: {
|
||||
// --- API and Data Handling Methods ---
|
||||
async fetchUpcomingServices(): Promise<void> {
|
||||
this.isLoading = true;
|
||||
try {
|
||||
const path = import.meta.env.VITE_BASE_URL + '/service/past';
|
||||
const response = await axios.get(path, {
|
||||
headers: authHeader(),
|
||||
withCredentials: true,
|
||||
});
|
||||
this.services = response.data;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch upcoming service calls:", error);
|
||||
} finally {
|
||||
this.isLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
})
|
||||
},
|
||||
|
||||
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.");
|
||||
}
|
||||
},
|
||||
|
||||
// --- Formatting and Display Methods ---
|
||||
formatCurrency(value: string): string {
|
||||
if (!value) return '$0.00';
|
||||
const costAsNumber = parseFloat(value);
|
||||
if (isNaN(costAsNumber)) {
|
||||
return value;
|
||||
}
|
||||
return new Intl.NumberFormat('en-US', {
|
||||
style: 'currency',
|
||||
currency: 'USD',
|
||||
}).format(costAsNumber);
|
||||
},
|
||||
|
||||
formatDate(dateString: string): string {
|
||||
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 {
|
||||
const typeMap: { [key: number]: string } = {
|
||||
0: 'Tune-up',
|
||||
1: 'No Heat',
|
||||
2: 'Fix',
|
||||
3: 'Tank Install',
|
||||
4: 'Other',
|
||||
};
|
||||
return typeMap[typeId] || 'Unknown Service';
|
||||
},
|
||||
|
||||
getServiceTypeColor(typeId: number): string {
|
||||
const colorMap: { [key: number]: string } = {
|
||||
0: 'blue',
|
||||
1: 'red',
|
||||
2: 'green',
|
||||
3: '#B58900',
|
||||
4: 'black',
|
||||
};
|
||||
return colorMap[typeId] || 'gray';
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
@@ -48,7 +48,7 @@ import ServiceEditModal from '../../service/ServiceEditModal.vue';
|
||||
import axios from 'axios';
|
||||
import authHeader from '../../../services/auth.header';
|
||||
|
||||
interface ServiceCall { id: number; scheduled_date: string; customer_id: number; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
|
||||
interface ServiceCall { id: number; scheduled_date: string; customer_id: number; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; service_cost: 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; }
|
||||
|
||||
export default defineComponent({
|
||||
@@ -96,6 +96,7 @@ export default defineComponent({
|
||||
customer_name: originalEvent.title.split(': ')[1] || 'Unknown Customer',
|
||||
type_service_call: originalEvent.extendedProps.type_service_call,
|
||||
description: originalEvent.extendedProps.description,
|
||||
service_cost: originalEvent.extendedProps.description,
|
||||
customer_address: '',
|
||||
customer_town: '',
|
||||
};
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
// Import the new component at the top
|
||||
import ServiceHome from './ServiceHome.vue'
|
||||
import ServicePast from './ServicePast.vue'
|
||||
import CalendarCustomer from './calender/CalendarCustomer.vue'
|
||||
import ServiceCalendar from './ServiceCalendar.vue'
|
||||
|
||||
@@ -9,7 +10,11 @@ const serviceRoutes = [
|
||||
name: 'ServiceHome',
|
||||
component: ServiceHome
|
||||
},
|
||||
|
||||
{
|
||||
path: '/service/past',
|
||||
name: 'ServicePast',
|
||||
component: ServicePast
|
||||
},
|
||||
// --- NEW ROUTE FOR THE MASTER CALENDAR ---
|
||||
{
|
||||
path: '/service/calendar', // Note: No '/:id' parameter
|
||||
|
||||
Reference in New Issue
Block a user