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

Added calender

Browse Source
This commit is contained in:
Edwin Eames
2025-08-21 17:53:39 -04:00
parent eeaf45defe
commit b74fd5d3a2
17 changed files with 984 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

157
src/pages/service/ServiceEditModal.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<!-- 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">
<!-- 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>
<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"
>
<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 -->
<form @submit.prevent="saveChanges">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Scheduled Date -->
<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.scheduled_date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
</div>
<!-- Service Type -->
<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>
</select>
</div>
</div>
<!-- Description -->
<div class="mb-4">
<label for="edit-description" class="block text-sm font-medium text-gray-700">Description</label>
<!-- ====================================================== -->
<!-- ============== THIS LINE HAS BEEN UPDATED ============== -->
<!-- ====================================================== -->
<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>
<!-- ====================================================== -->
<!-- ================ END OF UPDATED LINE ================ -->
<!-- ====================================================== -->
</div>
<!-- Action Buttons -->
<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>
<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>
</div>
</div>
</form>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue';
interface ServiceCall {
id: number;
scheduled_date: string;
customer_name: string;
customer_address: string;
customer_town: string;
type_service_call: number;
description: string;
}
export default defineComponent({
name: 'ServiceEditModal',
props: {
service: {
type: Object as PropType<ServiceCall>,
required: true,
},
},
data() {
return {
editableService: {} as Partial<ServiceCall>,
serviceOptions: [
{ text: 'Tune-up', value: 0 },
{ text: 'No Heat', value: 1 },
{ text: 'Fix', value: 2 },
{ text: 'Tank Install', value: 3 },
{ text: 'Other', value: 4 },
],
};
},
watch: {
service: {
handler(newVal) {
this.editableService = JSON.parse(JSON.stringify(newVal));
if (this.editableService.scheduled_date) {
this.editableService.scheduled_date = this.editableService.scheduled_date.split('T')[0];
}
},
immediate: true,
deep: true,
},
},
methods: {
saveChanges() {
this.$emit('save-changes', this.editableService);
},
confirmDelete() {
if (window.confirm(`Are you sure you want to delete this service call for "${this.service.customer_name}"?`)) {
this.$emit('delete-service', this.service.id);
}
},
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';
},
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';
}
},
});
</script>