314 lines
12 KiB
Vue
314 lines
12 KiB
Vue
<!-- src/pages/service/ServiceHome.vue -->
|
|
<template>
|
|
<div class="flex">
|
|
<div class="w-full px-4 md:px-10 py-4">
|
|
<!-- Breadcrumbs & Title -->
|
|
<div class="text-sm breadcrumbs">
|
|
<ul>
|
|
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
|
|
<li>Service Calls</li>
|
|
</ul>
|
|
</div>
|
|
<h1 class="text-3xl font-bold mt-4">Service Calls</h1>
|
|
|
|
<!-- Main Content Card -->
|
|
<div class="bg-neutral rounded-lg p-4 sm:p-6 mt-6">
|
|
<!-- Header: Title and Count -->
|
|
<div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 mb-4">
|
|
<h2 class="text-lg font-bold">Upcoming and Active Service Calls</h2>
|
|
<div v-if="!isLoading" class="badge badge-ghost">{{ services.length }} calls found</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="isLoading" class="text-center p-10">
|
|
<span class="loading loading-spinner loading-lg"></span>
|
|
<p class="mt-2">Loading service calls...</p>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="services.length === 0" class="text-center p-10">
|
|
<p>No active service calls found.</p>
|
|
</div>
|
|
|
|
<!-- Data Display -->
|
|
<div v-else>
|
|
<!-- DESKTOP VIEW: Table -->
|
|
<div class="overflow-x-auto hidden xl:block">
|
|
<table class="table w-full">
|
|
<thead>
|
|
<tr>
|
|
<th>Date / Time</th>
|
|
<th>Customer</th>
|
|
<th>Address</th>
|
|
<th>Service Type</th>
|
|
<th>Description</th>
|
|
<th class="text-right">Cost</th>
|
|
<th class="text-right">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Removed @click from tr to avoid conflicting actions -->
|
|
<tr v-for="service in services" :key="service.id" class=" hover:bg-blue-600">
|
|
<td class="align-top">
|
|
<div>{{ formatDate(service.scheduled_date) }}</div>
|
|
<div class="text-xs opacity-70">{{ formatTime(service.scheduled_date) }}</div>
|
|
</td>
|
|
<td class="align-top">{{ service.customer_name }}</td>
|
|
<td class="align-top">{{ service.customer_address }}, {{ service.customer_town }}</td>
|
|
<td class="align-top">
|
|
<span
|
|
class="badge badge-sm text-white"
|
|
:style="{ 'background-color': getServiceTypeColor(service.type_service_call), 'border-color': getServiceTypeColor(service.type_service_call) }"
|
|
>
|
|
{{ getServiceTypeName(service.type_service_call) }}
|
|
</span>
|
|
</td>
|
|
<td class="whitespace-normal text-sm align-top">
|
|
<!-- TRUNCATION LOGIC FOR DESKTOP -->
|
|
<div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
|
|
{{ service.description }}
|
|
<a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
|
|
</div>
|
|
<div v-else>
|
|
{{ truncateDescription(service.description) }}
|
|
<a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
|
|
</div>
|
|
</td>
|
|
<td class="text-right font-mono align-top">{{ formatCurrency(service.service_cost) }}</td>
|
|
<td class="text-right align-top">
|
|
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- MOBILE VIEW: Cards -->
|
|
<div class="xl:hidden space-y-4">
|
|
<div v-for="service in services" :key="service.id" class="card bg-base-100 shadow-md">
|
|
<div class="card-body p-4">
|
|
<div class="flex justify-between items-start">
|
|
<div>
|
|
<h2 class="card-title text-base">{{ service.customer_name }}</h2>
|
|
<p class="text-xs text-gray-400">{{ service.customer_address }}, {{ service.customer_town }}</p>
|
|
</div>
|
|
<div class="badge badge-outline text-right" :style="{ 'border-color': getServiceTypeColor(service.type_service_call), color: getServiceTypeColor(service.type_service_call) }">
|
|
{{ getServiceTypeName(service.type_service_call) }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-sm mt-2 grid grid-cols-2 gap-x-4 gap-y-1">
|
|
<p><strong class="font-semibold">Date:</strong> {{ formatDate(service.scheduled_date) }}</p>
|
|
<p><strong class="font-semibold">Time:</strong> {{ formatTime(service.scheduled_date) }}</p>
|
|
<p><strong class="font-semibold">Cost:</strong> <span class="font-mono">{{ formatCurrency(service.service_cost) }}</span></p>
|
|
</div>
|
|
|
|
<!-- TRUNCATION LOGIC FOR MOBILE -->
|
|
<div v-if="service.description" class="text-sm mt-2 p-2 bg-base-200 rounded-md prose max-w-none">
|
|
<div v-if="!isLongDescription(service.description) || isExpanded(service.id)">
|
|
{{ service.description }}
|
|
<a v-if="isLongDescription(service.description)" @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Show less</a>
|
|
</div>
|
|
<div v-else>
|
|
{{ truncateDescription(service.description) }}
|
|
<a @click.prevent="toggleExpand(service.id)" href="#" class="link link-info link-hover text-xs ml-1 whitespace-nowrap">Read more</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-actions justify-end mt-2">
|
|
<button @click="openEditModal(service)" class="btn btn-sm btn-primary">View</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Footer />
|
|
|
|
<ServiceEditModal
|
|
v-if="selectedServiceForEdit"
|
|
:service="selectedServiceForEdit"
|
|
@close-modal="closeEditModal"
|
|
@save-changes="handleSaveChanges"
|
|
@delete-service="handleDeleteService"
|
|
/>
|
|
</template>
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import axios from 'axios'
|
|
import authHeader from '../../services/auth.header'
|
|
import Footer from '../../layouts/footers/footer.vue'
|
|
import ServiceEditModal from './ServiceEditModal.vue'
|
|
import dayjs from 'dayjs';
|
|
|
|
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;
|
|
}
|
|
|
|
export default defineComponent({
|
|
name: 'ServiceHome',
|
|
components: { Footer, ServiceEditModal },
|
|
data() {
|
|
return {
|
|
user: null,
|
|
services: [] as ServiceCall[],
|
|
isLoading: true,
|
|
selectedServiceForEdit: null as ServiceCall | null,
|
|
// --- ADDITIONS FOR TRUNCATION ---
|
|
wordLimit: 50,
|
|
expandedIds: [] as number[],
|
|
}
|
|
},
|
|
created() {
|
|
this.userStatus();
|
|
this.fetchUpcomingServices();
|
|
},
|
|
methods: {
|
|
async fetchUpcomingServices(): Promise<void> {
|
|
this.isLoading = true;
|
|
try {
|
|
const path = import.meta.env.VITE_BASE_URL + '/service/upcoming';
|
|
const response = await axios.get(path, {
|
|
headers: authHeader(),
|
|
withCredentials: true,
|
|
});
|
|
this.services = response.data;
|
|
} catch (error) {
|
|
console.error("Failed to fetch upcoming service calls:", error);
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
},
|
|
|
|
userStatus() {
|
|
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
|
|
axios({
|
|
method: 'get',
|
|
url: path,
|
|
withCredentials: true,
|
|
headers: authHeader(),
|
|
})
|
|
.then((response: any) => {
|
|
if (response.data.ok) {
|
|
this.user = response.data.user;
|
|
}
|
|
})
|
|
.catch(() => {
|
|
this.user = null
|
|
})
|
|
},
|
|
|
|
openEditModal(service: ServiceCall) {
|
|
this.selectedServiceForEdit = service;
|
|
},
|
|
|
|
closeEditModal() {
|
|
this.selectedServiceForEdit = null;
|
|
},
|
|
isLongDescription(text: string): boolean {
|
|
if (!text) return false;
|
|
return text.split(/\s+/).length > this.wordLimit;
|
|
},
|
|
truncateDescription(text: string): string {
|
|
if (!this.isLongDescription(text)) return text;
|
|
const words = text.split(/\s+/);
|
|
return words.slice(0, this.wordLimit).join(' ') + '...';
|
|
},
|
|
isExpanded(id: number): boolean {
|
|
return this.expandedIds.includes(id);
|
|
},
|
|
toggleExpand(id: number): void {
|
|
const index = this.expandedIds.indexOf(id);
|
|
if (index === -1) {
|
|
this.expandedIds.push(id);
|
|
} else {
|
|
this.expandedIds.splice(index, 1);
|
|
}
|
|
},
|
|
async handleSaveChanges(updatedService: ServiceCall) {
|
|
try {
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
|
|
const response = await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
|
|
if (response.data.ok) {
|
|
const index = this.services.findIndex(s => s.id === updatedService.id);
|
|
if (index !== -1) {
|
|
this.services[index] = response.data.service;
|
|
}
|
|
this.closeEditModal();
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to save changes:", error);
|
|
alert("An error occurred while saving. Please check the console.");
|
|
}
|
|
},
|
|
|
|
async handleDeleteService(serviceId: number) {
|
|
try {
|
|
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
|
|
const response = await axios.delete(path, { headers: authHeader(), withCredentials: true });
|
|
if (response.data.ok) {
|
|
this.services = this.services.filter(s => s.id !== serviceId);
|
|
this.closeEditModal();
|
|
}
|
|
} catch (error) {
|
|
console.error("Failed to delete service call:", error);
|
|
alert("An error occurred while deleting. Please check the console.");
|
|
}
|
|
},
|
|
|
|
formatDate(dateString: string): string {
|
|
if (!dateString) return 'N/A';
|
|
return dayjs(dateString).format('MMMM D, YYYY');
|
|
},
|
|
|
|
formatTime(dateString: string): string {
|
|
if (!dateString) return 'N/A';
|
|
return dayjs(dateString).format('h:mm A');
|
|
},
|
|
|
|
getServiceTypeName(typeId: number): string {
|
|
const typeMap: { [key: number]: string } = {
|
|
0: 'Tune-up',
|
|
1: 'No Heat',
|
|
2: 'Fix',
|
|
3: 'Tank Install',
|
|
4: 'Other',
|
|
};
|
|
return typeMap[typeId] || 'Unknown Service';
|
|
},
|
|
// --- ADD THIS METHOD ---
|
|
formatCurrency(value: string | number): string {
|
|
if (value === null || value === undefined || value === '') return '$0.00';
|
|
const numberValue = Number(value);
|
|
if (isNaN(numberValue)) return '$0.00';
|
|
|
|
return new Intl.NumberFormat('en-US', {
|
|
style: 'currency',
|
|
currency: 'USD',
|
|
}).format(numberValue);
|
|
},
|
|
getServiceTypeColor(typeId: number): string {
|
|
const colorMap: { [key: number]: string } = {
|
|
0: 'blue',
|
|
1: 'red',
|
|
2: 'green',
|
|
3: '#B58900',
|
|
4: 'black',
|
|
};
|
|
return colorMap[typeId] || 'gray';
|
|
}
|
|
},
|
|
})
|
|
</script> |