205 lines
10 KiB
Vue
205 lines
10 KiB
Vue
<!-- src/pages/service/ServiceEditModal.vue -->
|
|
<template>
|
|
<!-- Modal Overlay -->
|
|
<div class="fixed inset-0 bg-gray-800 bg-opacity-75 flex items-center justify-center z-50">
|
|
<!-- Modal Content -->
|
|
<!-- 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">
|
|
<h3 class="text-2xl font-bold">Service Call</h3>
|
|
<span class="font-bold text-white px-3 py-1 mr-10 rounded" :style="{ backgroundColor: getServiceTypeColor(editableService.type_service_call) }">
|
|
{{ getServiceTypeName(editableService.type_service_call) }}
|
|
</span>
|
|
</div>
|
|
|
|
<button @click="$emit('close-modal')" type="button" class="absolute top-0 right-0 mt-4 mr-4 text-gray-500 hover:text-white 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>
|
|
|
|
<!-- 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="flex justify-between items-center font-bold text-lg">
|
|
<div>{{ customer.account_number }}</div>
|
|
<router-link :to="{ name: 'customerProfile', params: { id: customer.id } }" class="btn btn-sm btn-primary">Profile</router-link>
|
|
</div>
|
|
<div class="text-sm">{{ customer.customer_first_name }} {{ customer.customer_last_name }}</div>
|
|
<div class="text-sm">{{ customer.customer_address }}</div>
|
|
<div class="text-sm">{{ customer.customer_town }}, {{ getStateAbbrev(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>
|
|
<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>
|
|
</div>
|
|
<div v-else class="p-4 bg-base-200 rounded-md text-center"><p>Loading service parts...</p></div>
|
|
</div>
|
|
|
|
<!-- ===================================================================== -->
|
|
<!-- ============== 2. Re-organized Form into a Compact Grid ============= -->
|
|
<!-- ===================================================================== -->
|
|
<form @submit.prevent="saveChanges">
|
|
<!-- 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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- 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">
|
|
<button @click.prevent="$emit('close-modal')" type="button" class="btn btn-ghost">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Save Changes</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue';
|
|
import dayjs from 'dayjs';
|
|
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; service_cost: string }
|
|
interface EditableService extends Omit<ServiceCall, 'scheduled_date'> { date: string; time: number; }
|
|
interface Customer { id: number; 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; }
|
|
|
|
// Props and Emits
|
|
const props = defineProps<{
|
|
service: Partial<ServiceCall>
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
'close-modal': []
|
|
'save-changes': [service: ServiceCall]
|
|
'delete-service': [serviceId: number]
|
|
}>()
|
|
|
|
// Reactive data
|
|
const editableService = ref({} as Partial<EditableService>)
|
|
const customer = ref(null as Customer | null)
|
|
const serviceParts = ref(null as ServiceParts | null)
|
|
const isLoadingParts = ref(true)
|
|
const serviceOptions = ref([
|
|
{ text: 'Tune-up', value: 0 }, { text: 'No Heat', value: 1 }, { text: 'Fix', value: 2 },
|
|
{ text: 'Tank Install', value: 3 }, { text: 'Other', value: 4 },
|
|
])
|
|
|
|
// Watchers
|
|
watch(() => props.service, (newVal) => {
|
|
if (!newVal) return;
|
|
const scheduled = dayjs(newVal.scheduled_date || new Date());
|
|
editableService.value = { ...newVal, date: scheduled.format('YYYY-MM-DD'), time: scheduled.hour() };
|
|
if (newVal.customer_id) {
|
|
getCustomer(newVal.customer_id);
|
|
getServiceParts(newVal.customer_id);
|
|
}
|
|
}, { immediate: true, deep: true })
|
|
|
|
// Functions
|
|
const getCustomer = (customerId: number) => {
|
|
customer.value = null;
|
|
let path = import.meta.env.VITE_BASE_URL + '/customer/' + customerId;
|
|
axios.get(path, { headers: authHeader() })
|
|
.then((response: any) => { customer.value = response.data; })
|
|
.catch((error: any) => { console.error("Failed to fetch customer details for modal:", error); });
|
|
}
|
|
|
|
const getServiceParts = (customerId: number) => {
|
|
isLoadingParts.value = true;
|
|
serviceParts.value = null;
|
|
let path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
|
|
axios.get(path, { headers: authHeader() })
|
|
.then((response: any) => { serviceParts.value = response.data; })
|
|
.catch((error: any) => { console.error("Failed to fetch service parts:", error); })
|
|
.finally(() => { isLoadingParts.value = false; });
|
|
}
|
|
|
|
const saveChanges = async () => {
|
|
const date = editableService.value.date;
|
|
const time = editableService.value.time || 0;
|
|
const combinedDateTime = dayjs(`${date} ${time}:00`).format('YYYY-MM-DDTHH:mm:ss');
|
|
const finalPayload = { ...props.service, ...editableService.value, scheduled_date: combinedDateTime };
|
|
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${finalPayload.id}`;
|
|
try {
|
|
await axios.put(path, finalPayload, { headers: authHeader(), withCredentials: true });
|
|
emit('save-changes', finalPayload as ServiceCall);
|
|
} catch (error) {
|
|
console.error("Failed to save changes:", error);
|
|
alert("An error occurred while saving. Please check the console.");
|
|
}
|
|
}
|
|
|
|
const confirmDelete = () => {
|
|
if (props.service.id && window.confirm(`Are you sure you want to delete this service call?`)) {
|
|
emit('delete-service', props.service.id);
|
|
}
|
|
}
|
|
|
|
const getServiceTypeName = (typeId: number | undefined | null): string => {
|
|
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';
|
|
}
|
|
|
|
const getServiceTypeColor = (typeId: number | undefined | null): string => {
|
|
if (typeId === undefined || typeId === null) return 'gray';
|
|
const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
|
|
return colorMap[typeId] || 'gray';
|
|
}
|
|
|
|
const getStateAbbrev = (stateId: number | undefined | null): string => {
|
|
if (stateId === undefined || stateId === null) return 'Unknown';
|
|
const stateMap: { [key: number]: string } = { 0: 'MA', 1: 'RI', 2: 'NH', 3: 'ME', 4: 'VT', 5: 'CT', 6: 'NY' };
|
|
return stateMap[stateId] || 'Unknown';
|
|
}
|
|
</script>
|