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

Working calender/service

Browse Source
This commit is contained in:
Edwin Eames
2025-08-22 14:48:28 -04:00
parent 7eed45ab32
commit 4bcff598e6
9 changed files with 629 additions and 466 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/footers/footer.vue
View File

@@ -8,8 +8,10 @@
</nav>
<nav>
<h6 class="footer-title">Quick Call</h6>
<div class="">WB Hill Tank Springfield - (413) 525-3678</div>
<div class="">LW Tank Uxbridge - (508) 234-6000</div>
<div class="">Trask Tank Worcester - (508) 791-5064</div>
<div class="">Eddys Truck - (508) 304-9552</div>
<div class="">David Mechanic - (774) 239-3776</div>
<div class="">Spring Rebuilders - (508) 799-9342</div>
</nav>
<nav>

35
src/layouts/sidebar/sidebar.vue
View File

@@ -72,15 +72,23 @@
<div class=" hover:underline py-1">Finalized Tickets</div>
</router-link>
</li>
<div class="font-bold text-lg text-gray-500 pt-5">Service</div>
<li class="text-white">
<router-link :to="{ name: 'ServiceCalendar' }">
<div class=" hover:underline py-1">Service Calendar</div>
</router-link>
<router-link :to="{ name: 'ServiceHome' }">
<div class=" hover:underline py-1">Service Home</div>
<div class=" hover:underline py-1" v-if="upcoming_service_count > 0">
<div class="flex gap-5">
<div class="">Services</div>
<div class="text-orange-600"> ({{ upcoming_service_count }})</div>
</div>
</div>
<div class=" hover:underline py-1" v-else>Services</div>
</router-link>
</li>
<div class="font-bold text-lg text-gray-500 pt-5">Automatics</div>
<li class="text-white">
<router-link :to="{ name: 'auto' }">
@@ -123,11 +131,12 @@
import { defineComponent } from "vue";
import axios from 'axios';
import authHeader from '../../services/auth.header'
import authHeader from '../../services/auth.header';
export default defineComponent({
name: "SideBar",
mounted() {
this.getUpcomingServiceCount();
this.getTodayCount();
this.getTommorrowCount();
this.getWaitingCount();
@@ -139,6 +148,7 @@ export default defineComponent({
},
data() {
return {
upcoming_service_count: 0,
waiting_count: 0,
today_count: 0,
tommorrow_count: 0,
@@ -148,6 +158,21 @@ export default defineComponent({
},
methods: {
getUpcomingServiceCount() {
let path = import.meta.env.VITE_BASE_URL + '/service/upcoming/count';
axios({
method: 'get',
url: path,
headers: authHeader(),
}).then((response: any) => {
this.upcoming_service_count = response.data.count;
// --- THIS IS THE FIX ---
// Explicitly type the 'error' parameter as 'any'
}).catch((error: any) => {
console.error("Failed to get upcoming service count:", error);
this.upcoming_service_count = 0;
});
},
updatestatus() {
let path = import.meta.env.VITE_BASE_URL + '/delivery/updatestatus';
axios({

479
src/pages/customer/profile/home.vue
View File

@@ -234,13 +234,10 @@
</div>
</div>
<div class="col-span-12 ">
<hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded dark:bg-gray-400">
</div>
<div class="col-span-6 ">
<div class="grid grid-cols-12">
<div class="col-span-6 font-bold flex text-2xl">
@@ -269,7 +266,6 @@
Inspected
</div>
<div class="col-span-12 py-2 font-bold">Inside/Outside </div>
<div class="col-span-12 py-2 px-2 " v-if="customer_tank.outside_or_inside == true">
Inside
@@ -277,10 +273,8 @@
<div class="col-span-12 py-2 px-2 text-orange-600" v-else>
Outside
</div>
</div>
<div class="col-span-6 ">
<div class="grid grid-cols-12">
<div class="col-span-12 py-2 font-bold">Fill Location</div>
@@ -291,7 +285,6 @@
<div class="col-span-12 py-2 px-2">
{{ customer_tank.tank_size }}
</div>
</div>
</div>
</div>
@@ -344,13 +337,9 @@
<div v-if="card.expiration_month == 10">10</div>
<div v-if="card.expiration_month == 11">11</div>
<div v-if="card.expiration_month == 12">12</div>
<div class=" pl-1 pr-1">/ </div>
<div class=""> {{ card.expiration_year }} </div>
</div>
<div class="flex p-1 pl-4">
{{ card.zip_code }}
</div>
@@ -358,7 +347,6 @@
{{ card.security_number }}
</div>
<div class="flex justify-between">
<a @click.prevent="editCard(card.id)" class="cursor-pointer underline hover:text-blue-300">
Edit Card
</a>
@@ -393,11 +381,8 @@
<div v-if="card.expiration_month == 10">10</div>
<div v-if="card.expiration_month == 11">11</div>
<div v-if="card.expiration_month == 12">12</div>
<div class=" pl-1 pr-1">/ </div>
<div class=""> {{ card.expiration_year }} </div>
</div>
<div class="flex p-1 pl-4">
{{ card.zip_code }}
@@ -416,27 +401,22 @@
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- ====================================================== -->
<!-- ============== COMMENTS SECTION (FIXED LAYOUT) ============== -->
<!-- ====================================================== -->
<div class="col-span-6 px-4">
<div class="grid grid-cols-12">
<form class="rounded-md col-span-12" enctype="multipart/form-data" @submit.prevent="onSubmitSocial">
<div class="mb-4">
<label class="block text-white text-sm font-bold mb-2">Customer Comment</label>
<textarea v-model="CreateSocialForm.basicInfo.comment" rows="4"
class="textarea block p-2.5 w-full input-bordered " id="description" type="text"
placeholder="Leave a Customer Comment" />
</div>
<div class="col-span-12 md:col-span-12 flex mt-5 mb-5">
<button class="btn btn-sm btn-secondary">
@@ -445,7 +425,6 @@
</div>
</form>
<div class="col-span-12">
<div v-for="comment in comments" :key="comment['id']">
<div class="grid grid-cols-12 bg-neutral my-5">
@@ -455,20 +434,16 @@
<div class="col-span-8">
</div>
<div class="col-span-1">
</div>
<div class="col-span-1">
<a href="" @click.prevent="deleteCustomerSocial(comment.id)" class="hover:text-blue-300">
Delete
</a>
</div>
<div class="col-span-12 p-5">
{{ comment.comment }}
</div>
</div>
</div>
</div>
</div>
@@ -478,67 +453,103 @@
<hr class=" h-1 mx-auto my-4 bg-gray-800 border-0 rounded dark:bg-gray-400">
</div>
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex text-2xl">Automatic Deliveries</div>
<div class="col-span-12 font-bold flex text-2xl mb-5">
Service Call History
</div>
</div>
<div class="grid grid-cols-12 bg-neutral">
<table class="table col-span-12">
<!-- head -->
<thead>
<div v-if="!serviceCalls || serviceCalls.length === 0" class="text-center p-10 bg-base-200 rounded-md">
<p>No service call history found for this customer.</p>
</div>
<div v-else class="overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-base-200">
<tr>
<th>id</th>
<th>Name</th>
<th>Address</th>
<th>Town</th>
<th>Gallons</th>
<th>Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr v-for="auto in autodeliveries" :key="auto['id']">
<td>{{ auto['id'] }}</td>
<td>{{ auto['customer_full_name'] }}</td>
<td>{{ auto['customer_address'] }}</td>
<td>{{ auto['customer_town'] }}</td>
<td>{{ auto['gallons_delivered'] }}</td>
<td>{{ auto['fill_date'] }}</td>
<tbody class="bg-base-100 divide-y divide-gray-700">
<tr v-for="service in serviceCalls" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
{{ getServiceTypeName(service.type_service_call) }}
</td>
<td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ====================================================== -->
<!-- ============== AUTOMATIC DELIVERIES (FIXED) ============== -->
<!-- ====================================================== -->
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex text-2xl">Orders</div>
<div class="col-span-12 font-bold flex text-2xl mb-5">Automatic Deliveries</div>
</div>
<div class="grid grid-cols-12 bg-neutral">
<table class="table col-span-12">
<!-- head -->
<thead>
<div v-if="!autodeliveries || autodeliveries.length === 0" class="text-center p-10 bg-base-200 rounded-md">
<p>No automatic delivery history found.</p>
</div>
<div v-else class="overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-base-200">
<tr>
<th>id</th>
<th>Status</th>
<th>Name</th>
<th>Address</th>
<th>Town</th>
<th>Gallons</th>
<th>Date</th>
<th></th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">id</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Town</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Gallons</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody>
<!-- row 1 -->
<tr v-for="oil in deliveries" :key="oil['id']">
<td>{{ oil['id'] }}</td>
<td>
<tbody class="bg-base-100 divide-y divide-gray-700">
<tr v-for="auto in autodeliveries" :key="auto['id']" class="hover:bg-base-300">
<td class="px-6 py-4 whitespace-nowrap">{{ auto['id'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_full_name'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_address'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ auto['customer_town'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ auto['gallons_delivered'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ auto['fill_date'] }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- ====================================================== -->
<!-- ============== ORDERS TABLE (FIXED) ============== -->
<!-- ====================================================== -->
<div class="col-span-12 p-5">
<div class="grid grid-cols-12">
<div class="col-span-12 font-bold flex text-2xl mb-5">Orders</div>
</div>
<div v-if="!deliveries || deliveries.length === 0" class="text-center p-10 bg-base-200 rounded-md">
<p>No order history found.</p>
</div>
<div v-else class="overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-base-200">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">id</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Status</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Town</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Gallons</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Date</th>
<th class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider"></th>
</tr>
</thead>
<tbody class="bg-base-100 divide-y divide-gray-700">
<tr v-for="oil in deliveries" :key="oil['id']" class="hover:bg-base-300">
<td class="px-6 py-4 whitespace-nowrap">{{ oil['id'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">
<div v-if="oil['delivery_status'] == 0">Waiting</div>
<div v-else-if="oil['delivery_status'] == 1">cancelled</div>
<div v-else-if="oil['delivery_status'] == 2">Out for Delivery</div>
@@ -547,55 +558,53 @@
<div v-else-if="oil['delivery_status'] == 10">Finalized</div>
<div v-else></div>
</td>
<td>{{ oil['customer_name'] }}</td>
<td>{{ oil['customer_address'] }}</td>
<td>{{ oil['customer_town'] }}</td>
<td v-if="oil['delivery_status'] != 10">
<td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_name'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_address'] }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ oil['customer_town'] }}</td>
<td class="px-6 py-4 whitespace-nowrap" v-if="oil['delivery_status'] != 10">
<div v-if="oil['customer_asked_for_fill'] == 1">Fill</div>
<div v-else> {{ oil['gallons_ordered'] }}</div>
</td>
<td v-else>
<td class="px-6 py-4 whitespace-nowrap" v-else>
{{ oil['gallons_delivered'] }}
</td>
<td>{{ oil['expected_delivery_date'] }}</td>
<td class="flex gap-5 ">
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
<button class="btn btn-secondary btn-sm">View</button>
</router-link>
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
<button class="btn btn-sm btn-secondary">Edit</button>
</router-link>
<router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }"
v-if="oil['delivery_status'] != 10">
<button class="btn btn-secondary btn-sm">Finalize</button>
</router-link>
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
<button class="btn btn-success btn-sm">Print Ticket</button>
</router-link>
<!--
<a @click.prevent="deleteCall(oil['id'])">
<button class="btn btn-sm btn-error">Delete</button>
</a> -->
<td class="px-6 py-4 whitespace-nowrap">{{ oil['expected_delivery_date'] }}</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<div class="flex gap-2">
<router-link :to="{ name: 'deliveryOrder', params: { id: oil['id'] } }">
<button class="btn btn-secondary btn-sm">View</button>
</router-link>
<router-link :to="{ name: 'deliveryEdit', params: { id: oil['id'] } }">
<button class="btn btn-sm btn-secondary">Edit</button>
</router-link>
<router-link :to="{ name: 'finalizeTicket', params: { id: oil['id'] } }"
v-if="oil['delivery_status'] != 10">
<button class="btn btn-secondary btn-sm">Finalize</button>
</router-link>
<router-link :to="{ name: 'Ticket', params: { id: oil['id'] } }">
<button class="btn btn-success btn-sm">Print Ticket</button>
</router-link>
</div>
</td>
</tr>
</tbody>
</table>
</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">
@@ -609,120 +618,54 @@ import PaginationComp from "../../../components/pagination.vue";
import { notify } from "@kyvg/vue3-notification";
import "leaflet/dist/leaflet.css";
import { LMap, LTileLayer } from "@vue-leaflet/vue-leaflet";
import dayjs from 'dayjs';
import ServiceEditModal from '../../service/ServiceEditModal.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: 'CustomerProfile',
components: {
Header,
SideBar,
Footer,
LMap,
LTileLayer,
ServiceEditModal,
},
data() {
return {
zoom: 14,
token: null,
user: {
user_id: 0,
user_name: '',
confirmed: '',
},
user: { user_id: 0, user_name: '', confirmed: '' },
isTrue: true,
automatic_status: 0,
automatic_response: 0,
customer_last_delivery: '',
comments: [
{
id: 0,
created: '',
customer_id: 0,
poster_employee_id: 0,
comment: '',
}
],
CreateSocialForm: {
basicInfo: {
comment: '',
},
},
credit_cards: [
{
id: 0,
name_on_card: '',
main_card: false,
card_number: '',
expiration_month: 0,
type_of_card: '',
last_four_digits: '',
expiration_year: '',
zip_code: '',
security_number: '',
}
],
comments: [ { id: 0, created: '', customer_id: 0, poster_employee_id: 0, comment: '' } ],
CreateSocialForm: { basicInfo: { comment: '' } },
credit_cards: [ { id: 0, name_on_card: '', main_card: false, card_number: '', expiration_month: 0, type_of_card: '', last_four_digits: '', expiration_year: '', zip_code: '', security_number: '' } ],
credit_cards_count: 0,
customer: {
id: 0,
user_id: 0,
customer_first_name: '',
customer_last_name: '',
customer_town: '',
customer_address: '',
customer_state: 0,
customer_zip: '',
customer_apt: '',
customer_home_type: 0,
customer_phone_number: '',
customer_latitude: 0,
customer_longitude: 0,
correct_address: true,
account_number: '',
},
customer_description: {
id: 0,
customer_id: 0,
account_number: '',
company_id: '',
fill_location: 0,
description: '',
},
customer_tank: {
id: 0,
last_tank_inspection: null,
tank_status: false,
outside_or_inside: false,
tank_size: 0,
},
customer_stats: {
id: 0,
customer_id: 0,
total_calls: 0,
service_calls_total: 0,
service_calls_total_spent: 0,
service_calls_total_profit: 0,
oil_deliveries: 0,
oil_total_gallons: 0,
oil_total_spent: 0,
oil_total_profit: 0,
},
customer: { id: 0, user_id: 0, customer_first_name: '', customer_last_name: '', customer_town: '', customer_address: '', customer_state: 0, customer_zip: '', customer_apt: '', customer_home_type: 0, customer_phone_number: '', customer_latitude: 0, customer_longitude: 0, correct_address: true, account_number: '' },
customer_description: { id: 0, customer_id: 0, account_number: '', company_id: '', fill_location: 0, description: '' },
customer_tank: { id: 0, last_tank_inspection: null, tank_status: false, outside_or_inside: false, tank_size: 0 },
customer_stats: { id: 0, customer_id: 0, total_calls: 0, service_calls_total: 0, service_calls_total_spent: 0, service_calls_total_profit: 0, oil_deliveries: 0, oil_total_gallons: 0, oil_total_spent: 0, oil_total_profit: 0 },
deliveries: [],
autodeliveries: [],
delivery_page: 1,
delivery_perPage: 50,
delivery_recordsLength: 0,
delivery_options: {
delivery_edgeNavigation: false,
delivery_format: false,
delivery_template: PaginationComp
},
delivery_options: { delivery_edgeNavigation: false, delivery_format: false, delivery_template: PaginationComp },
serviceCalls: [] as ServiceCall[],
selectedServiceForEdit: null as ServiceCall | null,
}
},
created() {
@@ -735,7 +678,6 @@ export default defineComponent({
mounted() {
this.getPage(this.delivery_page)
},
watch: {
$route() {
this.getCustomer(this.$route.params.id);
@@ -743,7 +685,6 @@ export default defineComponent({
},
methods: {
getPage: function (page: any) {
// we simulate an api call that fetch the records from a backend
this.getCustomerDelivery(this.$route.params.id, page)
},
userStatus() {
@@ -759,11 +700,8 @@ export default defineComponent({
this.user = response.data.user;
}
})
.catch(() => {
})
.catch(() => { })
},
userAutomaticStatus(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/status/' + userid;
axios({
@@ -773,17 +711,11 @@ export default defineComponent({
}).then((response: any) => {
this.automatic_status = response.data.status
if (this.automatic_status === 1){
this.getCustomerAutoDelivery(this.customer.id)
}
this.checktotalOil(this.customer.id)
})
},
userAutomatic(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/customer/automatic/assign/' + userid;
axios({
@@ -792,39 +724,20 @@ export default defineComponent({
headers: authHeader(),
}).then((response: any) => {
this.automatic_response = response.data.status
if (this.automatic_response == 1) {
this.$notify({
title: "Automatic Status",
text: 'Customer is now Automatic Customer',
type: 'Success'
});
this.$notify({ title: "Automatic Status", text: 'Customer is now Automatic Customer', type: 'Success' });
} else if (this.automatic_response == 2) {
this.$notify({
title: "Automatic Status",
text: 'Customer does not have a main credit card. Can not make automatic.',
type: 'Error'
});
this.$notify({ title: "Automatic Status", text: 'Customer does not have a main credit card. Can not make automatic.', type: 'Error' });
} else if (this.automatic_response == 3) {
this.$notify({
title: "Automatic Status",
text: 'Customer is now a Call in ',
type: 'Info' // Adjust type if needed
});
this.$notify({ title: "Automatic Status", text: 'Customer is now a Call in ', type: 'Info' });
} else {
this.$notify({
title: "Automatic Status",
text: 'Customer is now Manual Customer',
type: 'Warning' // Adjust type if needed
});
this.$notify({ title: "Automatic Status", text: 'Customer is now Manual Customer', type: 'Warning' });
}
this.getCustomer(this.$route.params.id);
this.getCreditCards(this.$route.params.id)
this.getCreditCardsCount(this.$route.params.id)
})
},
getCustomer(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/customer/' + userid;
axios({
@@ -832,7 +745,6 @@ export default defineComponent({
url: path,
headers: authHeader(),
}).then((response: any) => {
this.customer = response.data
this.checktotalOil(this.customer.id)
this.getCustomerTank(this.customer.id)
@@ -840,7 +752,7 @@ export default defineComponent({
this.getCustomerDescription(this.customer.id);
this.getCustomerStats(this.customer.id);
this.getCustomerLastDelivery(this.customer.id);
this.getServiceCalls(this.customer.id);
})
},
getCustomerLastDelivery(userid: any) {
@@ -850,9 +762,7 @@ export default defineComponent({
url: path,
headers: authHeader(),
}).then((response: any) => {
this.customer_last_delivery = response.data.date
})
},
getCustomerStats(userid: any) {
@@ -862,9 +772,7 @@ export default defineComponent({
url: path,
headers: authHeader(),
}).then((response: any) => {
this.customer_stats = response.data
})
},
checktotalOil(userid: any) {
@@ -874,7 +782,6 @@ export default defineComponent({
url: path,
headers: authHeader(),
})
},
getCustomerDescription(userid: any) {
let path = import.meta.env.VITE_BASE_URL + '/customer/description/' + userid;
@@ -883,7 +790,6 @@ export default defineComponent({
url: path,
headers: authHeader(),
}).then((response: any) => {
this.customer_description = response.data
})
},
@@ -895,10 +801,8 @@ export default defineComponent({
headers: authHeader(),
}).then((response: any) => {
this.customer_tank = response.data
})
},
getCreditCards(user_id: any) {
let path = import.meta.env.VITE_BASE_URL + '/payment/cards/' + user_id;
axios({
@@ -906,11 +810,9 @@ export default defineComponent({
url: path,
headers: authHeader(),
}).then((response: any) => {
this.credit_cards = response.data
})
},
getCreditCardsCount(user_id: any) {
let path = import.meta.env.VITE_BASE_URL + '/payment/cards/onfile/' + user_id;
axios({
@@ -918,11 +820,9 @@ export default defineComponent({
url: path,
headers: authHeader(),
}).then((response: any) => {
this.credit_cards_count = response.data.cards
})
},
getCustomerAutoDelivery(userid: any) {
let path = import.meta.env.VITE_AUTO_URL + '/delivery/all/profile/' + userid ;
axios({
@@ -933,7 +833,6 @@ export default defineComponent({
this.autodeliveries = response.data
})
},
getCustomerDelivery(userid: any, delivery_page: any) {
let path = import.meta.env.VITE_BASE_URL + '/delivery/customer/' + userid + '/' + delivery_page;
axios({
@@ -944,11 +843,9 @@ export default defineComponent({
this.deliveries = response.data
})
},
editCard(card_id: any) {
this.$router.push({ name: "cardedit", params: { id: card_id } });
},
removeCard(card_id: any) {
let path = import.meta.env.VITE_BASE_URL + '/payment/card/remove/' + card_id;
axios({
@@ -958,14 +855,9 @@ export default defineComponent({
}).then(() => {
this.getCreditCards(this.$route.params.id)
this.getCreditCardsCount(this.$route.params.id)
notify({
title: "Card Status",
text: "Card Removed",
type: "Success",
});
notify({ title: "Card Status", text: "Card Removed", type: "Success" });
})
},
deleteCall(delivery_id: any) {
let path = import.meta.env.VITE_BASE_URL + '/delivery/delete/' + delivery_id;
axios({
@@ -974,23 +866,13 @@ export default defineComponent({
headers: authHeader(),
}).then((response: any) => {
if (response.data.ok) {
notify({
title: "Success",
text: "deleted delivery",
type: "success",
});
notify({ title: "Success", text: "deleted delivery", type: "success" });
this.getPage(1)
} else {
notify({
title: "Failure",
text: "error deleting delivery",
type: "success",
});
notify({ title: "Failure", text: "error deleting delivery", type: "success" });
}
})
},
deleteCustomerSocial(comment_id: number) {
let path = import.meta.env.VITE_BASE_URL + '/social/delete/' + comment_id;
axios({
@@ -1002,8 +884,6 @@ export default defineComponent({
this.getCustomerSocial(this.customer.id, 1)
})
},
getCustomerSocial(userid: any, delivery_page: any) {
let path = import.meta.env.VITE_BASE_URL + '/social/posts/' + userid + '/' + delivery_page;
axios({
@@ -1014,13 +894,7 @@ export default defineComponent({
this.comments = response.data
})
},
CreateSocialComment(payload: {
comment: string;
poster_employee_id: number
}) {
CreateSocialComment(payload: { comment: string; poster_employee_id: number }) {
let path = import.meta.env.VITE_BASE_URL + "/social/create/" + this.customer.id;
axios({
method: "post",
@@ -1031,7 +905,6 @@ export default defineComponent({
})
.then((response: any) => {
if (response.data.ok) {
this.getCustomerSocial(this.customer.id, 1)
}
if (response.data.error) {
@@ -1040,14 +913,64 @@ export default defineComponent({
})
},
onSubmitSocial() {
let payload = {
comment: this.CreateSocialForm.basicInfo.comment,
poster_employee_id: this.user.user_id
};
let payload = { comment: this.CreateSocialForm.basicInfo.comment, poster_employee_id: this.user.user_id };
this.CreateSocialComment(payload);
},
getServiceCalls(customerId: number) {
let path = `${import.meta.env.VITE_BASE_URL}/service/for-customer/${customerId}`;
axios({
method: 'get',
url: path,
headers: authHeader(),
withCredentials: true,
}).then((response: any) => {
this.serviceCalls = response.data;
}).catch((error: any) => {
console.error("Failed to get customer service calls:", error);
});
},
openEditModal(service: ServiceCall) {
this.selectedServiceForEdit = service;
},
closeEditModal() {
this.selectedServiceForEdit = null;
},
async handleSaveChanges(updatedService: ServiceCall) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
this.getServiceCalls(this.customer.id);
this.closeEditModal();
} catch (error) {
console.error("Failed to save service call changes:", error);
}
},
async handleDeleteService(serviceId: number) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
await axios.delete(path, { headers: authHeader(), withCredentials: true });
this.getServiceCalls(this.customer.id);
this.closeEditModal();
} catch (error) {
console.error("Failed to delete service call:", error);
}
},
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';
},
getServiceTypeColor(typeId: number): string {
const colorMap: { [key: number]: string } = { 0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black' };
return colorMap[typeId] || 'gray';
}
},
})
</script>

169
src/pages/service/ServiceCalendar.vue Normal file
View File

@@ -0,0 +1,169 @@
<template>
<Header />
<div class="flex">
<div class="">
<SideBar />
</div>
<div class="w-full px-10">
<div class="text-sm breadcrumbs mb-4">
<ul>
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
<li><router-link :to="{ name: 'ServiceHome' }">Service</router-link></li>
<li>Master Calendar</li>
</ul>
</div>
<div class="flex text-2xl mb-5 font-bold">
Master Service Calendar
</div>
<!-- This component has no sidebar, so the calendar takes up the full content area -->
<div class="flex h-screen font-sans">
<div class="flex-1 p-4 overflow-auto">
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
</div>
</div>
</div>
</div>
<Footer />
<!-- Re-using the powerful edit modal for this page -->
<ServiceEditModal
v-if="selectedServiceForEdit"
:service="selectedServiceForEdit"
@close-modal="closeEditModal"
@save-changes="handleSaveChanges"
@delete-service="handleDeleteService"
/>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import Header from '../../layouts/headers/headerauth.vue';
import SideBar from '../../layouts/sidebar/sidebar.vue';
import Footer from '../../layouts/footers/footer.vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
import ServiceEditModal from './ServiceEditModal.vue';
import axios from 'axios';
import authHeader from '../../services/auth.header';
// --- Interfaces ---
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: 'ServiceCalendar',
components: { Header, SideBar, Footer, FullCalendar, ServiceEditModal },
data() {
return {
user: null, // For header/sidebar logic if needed
selectedServiceForEdit: null as Partial<ServiceCall> | null,
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
weekends: true,
events: [] as any[],
eventClick: this.handleEventClick,
} as CalendarOptions,
};
},
created() {
this.userStatus();
this.fetchEvents();
},
methods: {
// This method fetches ALL events for the master calendar
async fetchEvents(): Promise<void> {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
const response = await axios.get(path, { headers: authHeader(), withCredentials: true });
this.calendarOptions.events = response.data;
} catch (error) {
console.error("Error fetching all calendar events:", error);
}
},
// This opens the modal when a calendar event is clicked
handleEventClick(clickInfo: EventClickArg): void {
const events = (this.calendarOptions.events as any[]) || [];
const originalEvent = events.find(e => e.id == clickInfo.event.id);
if (originalEvent) {
this.selectedServiceForEdit = {
id: originalEvent.id,
scheduled_date: originalEvent.start,
customer_name: originalEvent.title.split(': ')[1] || '',
customer_address: '',
customer_town: '',
type_service_call: originalEvent.extendedProps.type_service_call,
description: originalEvent.extendedProps.description,
};
}
},
// Closes the modal
closeEditModal() {
this.selectedServiceForEdit = null;
},
// Saves changes from the modal and refreshes the calendar
async handleSaveChanges(updatedService: ServiceCall) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
await this.fetchEvents();
this.closeEditModal();
} catch (error) {
console.error("Failed to save changes:", error);
alert("An error occurred while saving. Please check the console.");
}
},
// Deletes the service from the modal and refreshes the calendar
async handleDeleteService(serviceId: number) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${serviceId}`;
const response = await axios.delete(path, { withCredentials: true, headers: authHeader() });
if (response.data.ok === true) {
await this.fetchEvents(); // Refresh the calendar from the database
this.closeEditModal();
} else {
console.error("Failed to delete event:", response.data.error);
}
} catch (error) {
console.error("Error deleting event:", error);
}
},
// Standard method for user status, e.g., for the header
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
})
},
},
});
</script>

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

@@ -12,67 +12,48 @@
</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 @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 -->
<!-- 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.scheduled_date" required class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
<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">
</div>
<!-- Service Type -->
<!-- NEW: Time Input -->
<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-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">
<option v-for="hour in 24" :key="hour" :value="hour - 1">{{ (hour - 1).toString().padStart(2, '0') }}:00</option>
</select>
</div>
</div>
<!-- Description -->
<!-- Service Type (Moved to its own row) -->
<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 ================ -->
<!-- ====================================================== -->
<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 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>
</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>
<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>
<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>
@@ -82,10 +63,11 @@
<script lang="ts">
import { defineComponent, PropType } from 'vue';
import dayjs from 'dayjs'; // Import dayjs for easier date/time manipulation
interface ServiceCall {
id: number;
scheduled_date: string;
scheduled_date: string; // This is an ISO string like "2025-08-26T14:00:00"
customer_name: string;
customer_address: string;
customer_town: string;
@@ -93,33 +75,43 @@ interface ServiceCall {
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
}
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<ServiceCall>,
type: Object as PropType<Partial<ServiceCall>>,
required: true,
},
},
data() {
return {
editableService: {} as Partial<ServiceCall>,
editableService: {} as Partial<EditableService>,
serviceOptions: [
{ text: 'Tune-up', value: 0 },
{ text: 'No Heat', value: 1 },
{ text: 'Fix', value: 2 },
{ text: 'Tank Install', value: 3 },
{ text: 'Other', value: 4 },
{ 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];
}
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(),
};
},
immediate: true,
deep: true,
@@ -127,26 +119,33 @@ export default defineComponent({
},
methods: {
saveChanges() {
this.$emit('save-changes', this.editableService);
// Re-combine date and time into a single ISO string before emitting
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,
};
this.$emit('save-changes', finalPayload);
},
confirmDelete() {
if (window.confirm(`Are you sure you want to delete this service call for "${this.service.customer_name}"?`)) {
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';
}
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';
}
if (typeId === undefined || typeId === null) return 'gray';
const colorMap: { [key: number]: string } = {
0: 'blue', 1: 'red', 2: 'green', 3: '#B58900', 4: 'black',
};

164
src/pages/service/ServiceHome.vue
View File

@@ -7,47 +7,63 @@
<div class=" w-full px-10 ">
<div class="text-sm breadcrumbs mb-10">
<ul>
<li><router-link :to="{ name: 'home' }">Home</router-link></li>
<li>Service Calls</li>
<li>
<router-link :to="{ name: 'home' }">
Home
</router-link>
</li>
<li>
Service Calls
</li>
</ul>
</div>
<div class="flex text-2xl mb-5 font-bold">
Upcoming Service Calls
Service Calls
</div>
<div v-if="isLoading" class="text-center p-10">
<p>Loading upcoming service calls...</p>
<p>Loading service calls...</p>
</div>
<div v-else-if="services.length === 0" class="text-center p-10 bg-gray-100 rounded-md">
<p>No upcoming service calls found.</p>
<div v-else-if="services.length === 0" class="text-center p-10 bg-base-200 rounded-md">
<p>No service calls found.</p>
</div>
<div v-else class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200">
<thead class=" bg-neutral">
<!-- ============================================= -->
<!-- ============== UPDATED TABLE SECTION ============== -->
<!-- ============================================= -->
<div v-else class="overflow-x-auto rounded-lg">
<table class="min-w-full divide-y divide-gray-700">
<thead class="bg-base-200">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Scheduled Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Customer Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Address</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Service Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Description</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Scheduled Date</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Time</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Customer Name</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Address</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Service Type</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-base-content uppercase tracking-wider">Description</th>
</tr>
</thead>
<tbody class=" divide-y bg-neutral">
<tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-blue-600 hover:text-black cursor-pointer">
<tbody class="bg-base-100 divide-y divide-gray-700">
<!-- The hover color is now a slightly lighter shade of the background -->
<tr v-for="service in services" :key="service.id" @click="openEditModal(service)" class="hover:bg-base-300 cursor-pointer">
<td class="px-6 py-4 whitespace-nowrap">{{ formatDate(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ formatTime(service.scheduled_date) }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ service.customer_name }}</td>
<td class="px-6 py-4 whitespace-nowrap">{{ service.customer_address }}, {{ service.customer_town }}</td>
<td class="px-6 py-4 whitespace-nowrap font-medium" :style="{ color: getServiceTypeColor(service.type_service_call) }">
{{ getServiceTypeName(service.type_service_call) }}
</td>
<td class="px-6 py-4 whitespace-normal text-sm text-gray-500">{{ service.description }}</td>
<td class="px-6 py-4 whitespace-normal text-sm">{{ service.description }}</td>
</tr>
</tbody>
</table>
</div>
<!-- ============================================= -->
<!-- ============== END UPDATED SECTION ============== -->
<!-- ============================================= -->
</div>
</div>
@@ -63,13 +79,14 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import axios from 'axios';
import authHeader from '../../services/auth.header';
import Header from '../../layouts/headers/headerauth.vue';
import SideBar from '../../layouts/sidebar/sidebar.vue';
import Footer from '../../layouts/footers/footer.vue';
import ServiceEditModal from './ServiceEditModal.vue';
import { defineComponent } from 'vue'
import axios from 'axios'
import authHeader from '../../services/auth.header'
import Header from '../../layouts/headers/headerauth.vue'
import SideBar from '../../layouts/sidebar/sidebar.vue'
import Footer from '../../layouts/footers/footer.vue'
import ServiceEditModal from './ServiceEditModal.vue'
import dayjs from 'dayjs'; // Import dayjs to handle date/time formatting
interface ServiceCall {
id: number;
@@ -90,7 +107,7 @@ export default defineComponent({
services: [] as ServiceCall[],
isLoading: true,
selectedServiceForEdit: null as ServiceCall | null,
};
}
},
created() {
this.userStatus();
@@ -112,7 +129,7 @@ export default defineComponent({
this.isLoading = false;
}
},
userStatus() {
let path = import.meta.env.VITE_BASE_URL + '/auth/whoami';
axios({
@@ -131,12 +148,53 @@ export default defineComponent({
})
},
// --- HELPER METHODS WITH IMPLEMENTATIONS RESTORED ---
openEditModal(service: ServiceCall) {
this.selectedServiceForEdit = service;
},
closeEditModal() {
this.selectedServiceForEdit = null;
},
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 {
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
// Adding a timeZone option helps prevent off-by-one-day errors
return new Date(dateString).toLocaleDateString(undefined, { ...options, timeZone: 'UTC' });
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 {
@@ -155,51 +213,11 @@ export default defineComponent({
0: 'blue',
1: 'red',
2: 'green',
3: '#B58900', // A darker yellow for text
3: '#B58900',
4: 'black',
};
return colorMap[typeId] || 'gray';
},
// --- MODAL MANAGEMENT METHODS ---
openEditModal(service: ServiceCall) {
this.selectedServiceForEdit = service;
},
closeEditModal() {
this.selectedServiceForEdit = null;
},
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.");
}
},
}
},
});
})
</script>

84
src/pages/service/calender/CalendarCustomer.vue
View File

@@ -24,11 +24,12 @@
<FullCalendar ref="fullCalendar" :options="calendarOptions" />
</div>
<EventModal
v-if="selectedEvent"
:event="selectedEvent"
@close-modal="selectedEvent = null"
@delete-event="handleEventDelete"
<ServiceEditModal
v-if="selectedServiceForEdit"
:service="selectedServiceForEdit"
@close-modal="closeEditModal"
@save-changes="handleSaveChanges"
@delete-service="handleDeleteService"
/>
</div>
</div>
@@ -41,25 +42,32 @@ import Header from '../../../layouts/headers/headerauth.vue';
import FullCalendar from '@fullcalendar/vue3';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import { CalendarOptions, EventApi, EventClickArg } from '@fullcalendar/core';
// --- FIX: Removed 'EventApi' as it's no longer used ---
import { CalendarOptions, EventClickArg } from '@fullcalendar/core';
import EventSidebar from './EventSidebar.vue';
import EventModal from './EventModal.vue';
import ServiceEditModal from '../ServiceEditModal.vue';
import axios from 'axios';
import authHeader from '../../../services/auth.header';
// --- Interfaces ---
// --- Interfaces (no changes) ---
interface ServiceCall { id: number; scheduled_date: string; customer_name: string; customer_address: string; customer_town: string; type_service_call: number; description: string; }
interface Customer { id: number; customer_last_name: string; customer_first_name: string; customer_town: string; customer_state: number; customer_zip: string; customer_phone_number: string; customer_address: string; customer_home_type: number; customer_apt: string; }
interface EventExtendedProps { description: string; type_service_call: number; }
interface AppEvent { id?: string; title: string; start: string; end?: string; extendedProps: EventExtendedProps; }
export default defineComponent({
name: 'CalendarCustomer',
components: { Header, FullCalendar, EventSidebar, EventModal },
components: { Header, FullCalendar, EventSidebar, ServiceEditModal },
data() {
return {
isLoading: false,
selectedEvent: null as EventApi | null,
calendarOptions: {} as CalendarOptions,
selectedServiceForEdit: null as Partial<ServiceCall> | null,
// --- FIX: Define calendarOptions directly here to resolve "unused variable" warnings ---
calendarOptions: {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
weekends: true,
events: [] as any[], // Start with a typed empty array
eventClick: this.handleEventClick,
} as CalendarOptions,
customer: null as Customer | null,
};
},
@@ -72,18 +80,44 @@ export default defineComponent({
},
},
created() {
this.calendarOptions = {
plugins: [dayGridPlugin, interactionPlugin],
initialView: 'dayGridMonth',
weekends: true,
events: [],
eventClick: this.handleEventClick,
};
// The created hook is now only responsible for fetching data
this.fetchEvents();
},
methods: {
// --- METHOD IMPLEMENTATIONS RESTORED ---
handleEventClick(clickInfo: EventClickArg): void {
const events = (this.calendarOptions.events as any[]) || [];
const originalEvent = events.find(e => e.id == clickInfo.event.id);
if (originalEvent) {
this.selectedServiceForEdit = {
id: originalEvent.id,
scheduled_date: originalEvent.start,
customer_name: originalEvent.title.split(': ')[1] || '',
customer_address: '',
customer_town: '',
type_service_call: originalEvent.extendedProps.type_service_call,
description: originalEvent.extendedProps.description,
};
}
},
closeEditModal() {
this.selectedServiceForEdit = null;
},
async handleSaveChanges(updatedService: ServiceCall) {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/update/${updatedService.id}`;
await axios.put(path, updatedService, { headers: authHeader(), withCredentials: true });
await this.fetchEvents();
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) {
await this.handleEventDelete(String(serviceId));
this.closeEditModal();
},
async getCustomer(customerId: string): Promise<void> {
this.isLoading = true;
this.customer = null;
@@ -99,7 +133,6 @@ export default defineComponent({
this.isLoading = false;
}
},
async fetchEvents(): Promise<void> {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/all`;
@@ -109,11 +142,6 @@ export default defineComponent({
console.error("Error fetching all calendar events:", error);
}
},
handleEventClick(clickInfo: EventClickArg): void {
this.selectedEvent = clickInfo.event;
},
async handleEventScheduled(eventData: any): Promise<void> {
if (!this.customer) {
alert("Error: A customer must be loaded in the sidebar to create a new event.");
@@ -136,7 +164,6 @@ export default defineComponent({
console.error("Error creating event:", error);
}
},
async handleEventDelete(eventId: string): Promise<void> {
try {
const path = `${import.meta.env.VITE_BASE_URL}/service/delete/${eventId}`;
@@ -145,7 +172,6 @@ export default defineComponent({
const calendarApi = (this.$refs.fullCalendar as any).getApi();
const eventToRemove = calendarApi.getEventById(eventId);
if (eventToRemove) eventToRemove.remove();
this.selectedEvent = null;
} else {
console.error("Failed to delete event:", response.data.error);
}

8
src/pages/service/calender/EventSidebar.vue
View File

@@ -40,11 +40,7 @@
</select>
</div>
<div class="mb-4">
<!-- CHANGED: Class updated to 'text-gray-200' for visibility on dark backgrounds -->
<label for="event-end-date" class="block text-sm font-medium text-gray-200">End Date (Optional for multi-day)</label>
<input type="date" id="event-end-date" v-model="event.endDate" :min="event.date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm text-black">
</div>
<button type="submit" class="w-full bg-green-600 text-white py-2 px-4 rounded-md hover:bg-green-700">
Add Event
@@ -161,4 +157,4 @@ export default defineComponent({
},
},
});
</script>
</script>

27
src/pages/service/routes.ts
View File

@@ -1,8 +1,7 @@
import ServiceHome from './ServiceHome.vue' // Adjust the import path
// Import the new component at the top
import ServiceHome from './ServiceHome.vue'
import CalendarCustomer from './calender/CalendarCustomer.vue'
import ServiceCalendar from './ServiceCalendar.vue'
const serviceRoutes = [
{
@@ -11,14 +10,20 @@ const serviceRoutes = [
component: ServiceHome
},
// --- NEW ROUTE FOR THE MASTER CALENDAR ---
{
path: '/service/calendar', // Note: No '/:id' parameter
name: 'ServiceCalendar',
component: ServiceCalendar,
},
// -----------------------------------------
{
path: '/service/calender/:id',
name: 'CalenderCustomer',
component: CalendarCustomer,
},
{
path: '/service/calender/:id', // Note the typo, should likely be 'calendar'
name: 'CalenderCustomer',
component: CalendarCustomer,
},
]
export default serviceRoutes
//sourceMappingURL=index.ts.map
//sourceMappingURL=index.ts.map