major claude changes
This commit is contained in:
@@ -99,8 +99,8 @@
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import dayjs from 'dayjs';
|
||||
import axios from 'axios';
|
||||
import authHeader from '../../services/auth.header';
|
||||
@@ -111,88 +111,94 @@ interface EditableService extends Omit<ServiceCall, 'scheduled_date'> { date: st
|
||||
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; }
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ServiceEditModal',
|
||||
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 },
|
||||
],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
service: {
|
||||
handler(newVal) {
|
||||
if (!newVal) return;
|
||||
const scheduled = dayjs(newVal.scheduled_date || new Date());
|
||||
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: {
|
||||
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; });
|
||||
},
|
||||
async saveChanges() {
|
||||
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 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?`)) {
|
||||
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';
|
||||
},
|
||||
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';
|
||||
}
|
||||
},
|
||||
});
|
||||
// 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>
|
||||
|
||||
Reference in New Issue
Block a user