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

tons fixes

Browse Source
This commit is contained in:
Edwin Eames
2025-08-25 17:58:30 -04:00
parent 4bcff598e6
commit adc1606312
15 changed files with 800 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,58 +2,95 @@
<!-- 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-white p-6 rounded-lg shadow-xl w-full max-w-lg">
<div class="relative bg-base-100 text-base-content p-6 rounded-lg shadow-xl w-full max-w-4xl">
<!-- Modal Header -->
<div class="flex justify-between items-center border-b pb-3 mb-4">
<h3 class="text-2xl font-bold text-gray-800">Edit Service Call</h3>
<div class="flex justify-between items-center border-b border-gray-700 pb-3 mb-4">
<h3 class="text-2xl font-bold">Edit 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-400 hover:text-gray-600 focus:outline-none" aria-label="Close modal">
<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>
<!-- Form for Editing -->
<!-- Customer & Parts Info Section (Two Columns) -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-4">
<!-- Left Column: Customer Info -->
<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>
<div class="text-sm">{{ customer.customer_address }}</div>
<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-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>
<!-- ====================================================== -->
<!-- ================ END VIEW-ONLY SECTION =============== -->
<!-- ====================================================== -->
</div>
<!-- Form for Editing Service Call Details -->
<form @submit.prevent="saveChanges">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- 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.date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<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>
<!-- NEW: Time Input -->
<div class="mb-4">
<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">
<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>
</div>
<!-- Service Type (Moved to its own row) -->
<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-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 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>
<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 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="btn btn-error">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="btn btn-ghost">Cancel</button>
<button type="submit" class="btn btn-primary">Save Changes</button>
</div>
</div>
</form>
@@ -63,36 +100,25 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import dayjs from 'dayjs'; // Import dayjs for easier date/time manipulation
import dayjs from 'dayjs';
import axios from 'axios';
import authHeader from '../../services/auth.header';
interface ServiceCall {
id: number;
scheduled_date: string; // This is an ISO string like "2025-08-26T14:00:00"
customer_name: string;
customer_address: string;
customer_town: string;
type_service_call: number;
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
}
// --- 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 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; }
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<Partial<ServiceCall>>,
required: true,
},
},
props: { service: { type: Object as PropType<Partial<ServiceCall>>, required: true } },
data() {
return {
editableService: {} as Partial<EditableService>,
customer: null as Customer | null,
serviceParts: null as ServiceParts | null,
isLoadingParts: true,
serviceOptions: [
{ text: 'Tune-up', value: 0 }, { text: 'No Heat', value: 1 }, { text: 'Fix', value: 2 },
{ text: 'Tank Install', value: 3 }, { text: 'Other', value: 4 },
@@ -103,34 +129,50 @@ export default defineComponent({
service: {
handler(newVal) {
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(),
};
this.editableService = { ...newVal, date: scheduled.format('YYYY-MM-DD'), time: scheduled.hour() };
if (newVal.customer_id) {
this.getCustomer(newVal.customer_id);
this.getServiceParts(newVal.customer_id);
}
},
immediate: true,
deep: true,
},
},
methods: {
saveChanges() {
// Re-combine date and time into a single ISO string before emitting
getCustomer(customerId: number) {
this.customer = null;
let path = import.meta.env.VITE_BASE_URL + '/customer/' + customerId;
axios.get(path, { headers: authHeader() })
.then((response: any) => { this.customer = response.data; })
.catch((error: any) => { console.error("Failed to fetch customer details for modal:", error); });
},
getServiceParts(customerId: number) {
this.isLoadingParts = true;
this.serviceParts = null;
let path = `${import.meta.env.VITE_BASE_URL}/service/parts/customer/${customerId}`;
axios.get(path, { headers: authHeader() })
.then((response: any) => { this.serviceParts = response.data; })
.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');
const finalPayload = { ...this.service, ...this.editableService, scheduled_date: combinedDateTime };
const finalPayload = {
...this.service,
...this.editableService,
scheduled_date: combinedDateTime,
};
this.$emit('save-changes', finalPayload);
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${finalPayload.id}`;
try {
await axios.put(path, finalPayload, { headers: authHeader(), withCredentials: true });
this.$emit('save-changes', finalPayload);
} catch (error) {
console.error("Failed to save changes:", error);
alert("An error occurred while saving. Please check the console.");
}
},
confirmDelete() {
if (this.service.id && window.confirm(`Are you sure you want to delete this service call?`)) {
@@ -139,16 +181,12 @@ export default defineComponent({
},
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',
};
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';
const colorMap: { [key: number]: string } = {
0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black',
};
const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
return colorMap[typeId] || 'gray';
}
},