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

Added price for service

Browse Source
This commit is contained in:
Edwin Eames
2025-08-26 17:19:41 -04:00
parent 87a50fa37c
commit 76cbca94e3
7 changed files with 350 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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');