464 lines
13 KiB
Vue
464 lines
13 KiB
Vue
<template>
|
|
<div class="page-container">
|
|
<H2>Client Contact List</H2>
|
|
|
|
<DataTable
|
|
:data="tableData"
|
|
:columns="columns"
|
|
:filters="filters"
|
|
:tableActions="tableActions"
|
|
tableName="clients"
|
|
:lazy="true"
|
|
:totalRecords="totalRecords"
|
|
:loading="isLoading"
|
|
@lazy-load="handleLazyLoad"
|
|
@row-click="handleRowClick"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { onMounted, ref, watch, computed } from "vue";
|
|
import Card from "../common/Card.vue";
|
|
import DataTable from "../common/DataTable.vue";
|
|
import StatusChart from "../common/StatusChart.vue";
|
|
import Api from "../../api";
|
|
import { FilterMatchMode } from "@primevue/core";
|
|
import { useLoadingStore } from "../../stores/loading";
|
|
import { usePaginationStore } from "../../stores/pagination";
|
|
import { useFiltersStore } from "../../stores/filters";
|
|
import { useModalStore } from "../../stores/modal";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { useNotificationStore } from "../../stores/notifications-primevue";
|
|
import { useCompanyStore } from "../../stores/company";
|
|
import TodoChart from "../common/TodoChart.vue";
|
|
import { Calendar, Community, Hammer, PathArrowSolid, Clock, Shield, ShieldSearch,
|
|
ClipboardCheck, DoubleCheck, CreditCard, CardNoAccess, ChatBubbleQuestion, Edit,
|
|
WateringSoil, Soil, Truck, SoilAlt,
|
|
Filter} from "@iconoir/vue";
|
|
|
|
const notifications = useNotificationStore();
|
|
const loadingStore = useLoadingStore();
|
|
const paginationStore = usePaginationStore();
|
|
const filtersStore = useFiltersStore();
|
|
const modalStore = useModalStore();
|
|
const router = useRouter();
|
|
const route = useRoute();
|
|
const companyStore = useCompanyStore();
|
|
|
|
const tableData = ref([]);
|
|
const totalRecords = ref(0);
|
|
const isLoading = ref(false);
|
|
const statusCounts = ref({}); // Start with empty object
|
|
const currentWeekParams = ref({});
|
|
const chartLoading = ref(true); // Start with loading state
|
|
|
|
const lookup = route.query.lookup;
|
|
const lastLazyLoadEvent = ref(null);
|
|
|
|
// Watch for company changes to reload data
|
|
watch(
|
|
() => companyStore.currentCompany,
|
|
async () => {
|
|
console.log("Company changed, reloading client data...");
|
|
if (lastLazyLoadEvent.value) {
|
|
await handleLazyLoad(lastLazyLoadEvent.value);
|
|
}
|
|
// Also refresh status counts
|
|
await refreshStatusCounts();
|
|
}
|
|
);
|
|
|
|
// Computed property to get current filters for the chart
|
|
const currentFilters = computed(() => {
|
|
filters = { ...filtersStore.getTableFilters("clients"),
|
|
company: { value: companyStore.currentCompany, matchMode: FilterMatchMode.CONTAINS}
|
|
};
|
|
});
|
|
|
|
// Handle week change from chart
|
|
const handleWeekChange = async (weekParams) => {
|
|
console.log("handleWeekChange called with:", weekParams);
|
|
currentWeekParams.value = weekParams;
|
|
await refreshStatusCounts();
|
|
};
|
|
|
|
// Refresh status counts with current week and filters
|
|
const refreshStatusCounts = async () => {
|
|
chartLoading.value = true;
|
|
try {
|
|
let params = {};
|
|
|
|
// Only apply weekly filtering if weekParams is provided (not null)
|
|
if (currentWeekParams.value) {
|
|
params = {
|
|
weekly: true,
|
|
weekStartDate: currentWeekParams.value.weekStartDate,
|
|
weekEndDate: currentWeekParams.value.weekEndDate,
|
|
};
|
|
console.log("Using weekly filter:", params);
|
|
} else {
|
|
// No weekly filtering - get all time data
|
|
params = {
|
|
weekly: false,
|
|
};
|
|
console.log("Using all-time data (no weekly filter)");
|
|
}
|
|
|
|
// Add current filters to the params
|
|
const currentFilters = filtersStore.getTableFilters("clients");
|
|
if (currentFilters && Object.keys(currentFilters).length > 0) {
|
|
params.filters = currentFilters;
|
|
}
|
|
|
|
const response = await Api.getClientStatusCounts(params);
|
|
statusCounts.value = response || {};
|
|
|
|
console.log("Status counts updated:", statusCounts.value);
|
|
} catch (error) {
|
|
console.error("Error refreshing status counts:", error);
|
|
statusCounts.value = {};
|
|
} finally {
|
|
chartLoading.value = false;
|
|
}
|
|
};
|
|
|
|
const filters = {
|
|
customerName: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
address: { value: null, matchMode: FilterMatchMode.CONTAINS },
|
|
};
|
|
|
|
const columns = [
|
|
{
|
|
label: "Customer Name",
|
|
fieldName: "customerName",
|
|
type: "link",
|
|
sortable: true,
|
|
filterable: true,
|
|
filterInputId: "customerSearchInput",
|
|
onLinkClick: (link, rowData) => handleCustomerClick(link, rowData),
|
|
},
|
|
{
|
|
label: "Type",
|
|
fieldName: "clientType",
|
|
type: "text",
|
|
sortable: true,
|
|
},
|
|
{
|
|
label: "Property",
|
|
fieldName: "address",
|
|
type: "link",
|
|
sortable: true,
|
|
filterable: true,
|
|
filterInputId: "propertySearchInput",
|
|
onLinkClick: (link, rowData) => handlePropertyClick(link, rowData),
|
|
},
|
|
//{
|
|
// label: "Create Estimate",
|
|
// fieldName: "createEstimate",
|
|
// type: "status-button",
|
|
// buttonVariant: "outlined",
|
|
// onStatusClick: (status, rowData) => handleEstimateClick(status, rowData),
|
|
//},
|
|
//{
|
|
// label: "Appt. Scheduled",
|
|
// fieldName: "appointmentScheduledStatus",
|
|
// type: "status-button",
|
|
// sortable: true,
|
|
// buttonVariant: "outlined",
|
|
// onStatusClick: (status, rowData) => handleAppointmentClick(status, rowData),
|
|
// // disableCondition: (status) => status?.toLowerCase() !== "not started",
|
|
//},
|
|
//{
|
|
// label: "Estimate Sent",
|
|
// fieldName: "estimateSentStatus",
|
|
// type: "status-button",
|
|
// sortable: true,
|
|
// buttonVariant: "outlined",
|
|
// onStatusClick: (status, rowData) => handleEstimateClick(status, rowData),
|
|
// // disableCondition: (status) => status?.toLowerCase() !== "not started",
|
|
//},
|
|
//{
|
|
// label: "Payment Received",
|
|
// fieldName: "paymentReceivedStatus",
|
|
// type: "status-button",
|
|
// sortable: true,
|
|
// buttonVariant: "outlined",
|
|
// onStatusClick: (status, rowData) => handlePaymentClick(status, rowData),
|
|
// // disableCondition: (status) => status?.toLowerCase() !== "not started",
|
|
//},
|
|
//{
|
|
// label: "Job Status",
|
|
// fieldName: "jobStatus",
|
|
// type: "status-button",
|
|
// sortable: true,
|
|
// buttonVariant: "outlined",
|
|
// onStatusClick: (status, rowData) => handleJobClick(status, rowData),
|
|
// // disableCondition: (status) => status?.toLowerCase() !== "not started",
|
|
//},
|
|
];
|
|
|
|
const tableActions = [
|
|
{
|
|
label: "Add Client",
|
|
action: () => {
|
|
router.push("/client?new=true");
|
|
},
|
|
type: "button",
|
|
style: "primary",
|
|
icon: "pi pi-plus",
|
|
layout: {
|
|
position: "left",
|
|
variant: "filled",
|
|
},
|
|
// Global action - always available
|
|
},
|
|
{
|
|
label: "Create Estimate",
|
|
rowAction: true,
|
|
action: (rowData) => {
|
|
const address = encodeURIComponent(rowData.address);
|
|
router.push(`/estimate?new=true&address=${address}`);
|
|
},
|
|
},
|
|
// {
|
|
// label: "Export Selected",
|
|
// action: (selectedRows) => {
|
|
// console.log("Exporting", selectedRows.length, "clients:", selectedRows);
|
|
// // Implementation would export selected clients
|
|
// },
|
|
// type: "button",
|
|
// style: "success",
|
|
// icon: "pi pi-download",
|
|
// requiresMultipleSelection: true, // Bulk action - operates on selected rows
|
|
// layout: {
|
|
// position: "right".,
|
|
// variant: "filled",
|
|
// },
|
|
// },
|
|
];
|
|
// Handle lazy loading events from DataTable
|
|
const handleLazyLoad = async (event) => {
|
|
console.log("Clients page - handling lazy load:", event);
|
|
lastLazyLoadEvent.value = event;
|
|
|
|
try {
|
|
isLoading.value = true;
|
|
|
|
// If this is a sort event, update the store first
|
|
if (event.sortField !== undefined && event.sortOrder !== undefined) {
|
|
console.log("Sort event detected - updating store with:", {
|
|
sortField: event.sortField,
|
|
sortOrder: event.sortOrder,
|
|
orderType: typeof event.sortOrder,
|
|
});
|
|
filtersStore.updateTableSorting("clients", event.sortField, event.sortOrder);
|
|
}
|
|
|
|
// Get sorting information from filters store in backend format
|
|
const sortingArray = filtersStore.getTableSortingForBackend("clients");
|
|
console.log("Current sorting array for backend:", sortingArray);
|
|
|
|
// Get pagination parameters
|
|
const paginationParams = {
|
|
page: event.page || 0,
|
|
pageSize: event.rows || 10,
|
|
}; // Get filters (convert PrimeVue format to API format)
|
|
const filters = {};
|
|
if (event.filters) {
|
|
Object.keys(event.filters).forEach((key) => {
|
|
if (key !== "global" && event.filters[key] && event.filters[key].value) {
|
|
filters[key] = event.filters[key];
|
|
}
|
|
});
|
|
}
|
|
|
|
// For cache key, use primary sort field/order for compatibility
|
|
const primarySortField = filtersStore.getPrimarySortField("clients") || event.sortField;
|
|
const primarySortOrder = filtersStore.getPrimarySortOrder("clients") || event.sortOrder;
|
|
|
|
// Always fetch fresh data from API (cache only stores pagination/filter/sort state, not data)
|
|
// Call API with pagination, filters, and sorting in backend format
|
|
console.log("Making API call with:", {
|
|
paginationParams,
|
|
filters,
|
|
sortingArray,
|
|
});
|
|
filters["company"] = { value: companyStore.currentCompany, matchMode: FilterMatchMode.CONTAINS};
|
|
|
|
const result = await Api.getPaginatedClientDetailsV2(
|
|
paginationParams,
|
|
filters,
|
|
sortingArray,
|
|
);
|
|
|
|
console.log("API response:", result);
|
|
|
|
// Update local state - extract from pagination structure
|
|
tableData.value = result.data;
|
|
totalRecords.value = result.pagination.total;
|
|
|
|
// Update pagination store with new total
|
|
paginationStore.setTotalRecords("clients", result.pagination.total);
|
|
} catch (error) {
|
|
console.error("Error loading client data:", error);
|
|
// You could also show a toast or other error notification here
|
|
tableData.value = [];
|
|
totalRecords.value = 0;
|
|
} finally {
|
|
isLoading.value = false;
|
|
}
|
|
};
|
|
// Status button click handlers
|
|
const handleAppointmentClick = (status, rowData) => {
|
|
const address = encodeURIComponent(rowData.address);
|
|
if (status?.toLowerCase() === "not started") {
|
|
// Navigate to schedule on-site meeting
|
|
router.push(`/calendar?tab=bids&new=true&address=${address}`);
|
|
} else {
|
|
// Navigate to view appointment details
|
|
router.push('/calendar?tab=bids&address=' + address);
|
|
}
|
|
};
|
|
|
|
const handleCustomerClick = (link, rowData) => {
|
|
console.log("DEBUG: Customer Link Clicked.");
|
|
const client = encodeURIComponent(rowData.customerName);
|
|
const address = encodeURIComponent(rowData.address);
|
|
router.push(`/client?client=${client}&address=${address}`);
|
|
}
|
|
|
|
const handlePropertyClick = (link, rowData) => {
|
|
console.log("DEBUG: Property Link Clicked.");
|
|
const client = encodeURIComponent(rowData.customerName);
|
|
const address = encodeURIComponent(rowData.address);
|
|
router.push(`/property?client=${client}&address=${address}`);
|
|
}
|
|
|
|
const handleEstimateClick = (status, rowData) => {
|
|
const address = encodeURIComponent(rowData.address);
|
|
router.push(`/estimate?new=true&address=${address}`);
|
|
};
|
|
|
|
const handlePaymentClick = (status, rowData) => {
|
|
notifications.addWarning("Payment view/create coming soon!");
|
|
// const address = encodeURIComponent(rowData.address);
|
|
// if (status?.toLowerCase() === "not started") {
|
|
// // Navigate to payment processing
|
|
// router.push(`/payments?new=true&address=${address}`);
|
|
// }
|
|
// else {
|
|
// // Navigate to view payment details
|
|
// router.push('/payments?address=' + address);
|
|
// }
|
|
};
|
|
|
|
const handleJobClick = (status, rowData) => {
|
|
notifications.addWarning("Job view/create coming soon!");
|
|
// const address = encodeURIComponent(rowData.address);
|
|
// if (status?.toLowerCase() === "not started") {
|
|
// // Navigate to job creation
|
|
// router.push(`/job?new=true&address=${address}`);
|
|
// } else {
|
|
// // Navigate to view job details
|
|
// router.push('/job?address=' + address);
|
|
// }
|
|
};
|
|
|
|
// Watch for filters change to update status counts
|
|
watch(
|
|
() => filtersStore.getTableFilters("clients"),
|
|
async () => {
|
|
await refreshStatusCounts();
|
|
},
|
|
{ deep: true },
|
|
);
|
|
|
|
// Handle row click to navigate to client details
|
|
const handleRowClick = (event) => {
|
|
const rowData = event.data;
|
|
router.push(`/client?client=${rowData.customerName}&address=${rowData.address}`);
|
|
};
|
|
|
|
onMounted(async () => {
|
|
// if lookup has a value (it will either be "customer" or "property", put focus onto the appropriate search input)
|
|
if (lookup) {
|
|
const inputElement = document.getElementById(`${lookup}SearchInput`);
|
|
if (inputElement) {
|
|
inputElement.focus();
|
|
}
|
|
}
|
|
// Initialize pagination and filters
|
|
paginationStore.initializeTablePagination("clients", { rows: 10 });
|
|
filtersStore.initializeTableFilters("clients", columns);
|
|
filtersStore.initializeTableSorting("clients");
|
|
|
|
// Load first page
|
|
const initialPagination = paginationStore.getTablePagination("clients");
|
|
const initialFilters = filtersStore.getTableFilters("clients");
|
|
const primarySortField = filtersStore.getPrimarySortField("clients");
|
|
const primarySortOrder = filtersStore.getPrimarySortOrder("clients");
|
|
|
|
// Don't load initial status counts here - let the chart component handle it
|
|
// The chart will emit the initial week parameters and trigger refreshStatusCounts
|
|
|
|
await handleLazyLoad({
|
|
page: initialPagination.page,
|
|
rows: initialPagination.rows,
|
|
first: initialPagination.first,
|
|
sortField: primarySortField || initialPagination.sortField,
|
|
sortOrder: primarySortOrder || initialPagination.sortOrder,
|
|
filters: initialFilters,
|
|
});
|
|
});
|
|
</script scoped>
|
|
<style lang="css">
|
|
.widgets-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.widget-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 20px 20px 0;
|
|
}
|
|
|
|
.widget-icon {
|
|
color: var(--theme-primary-strong);
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.widget-header h3 {
|
|
margin: 0;
|
|
color: #2c3e50;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.widget-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0;
|
|
width: 200px;
|
|
align-items: center;
|
|
padding: 20px 20px 20px;
|
|
/*gap: 15px;*/
|
|
}
|
|
.sidebar-button {
|
|
justify-content: center;
|
|
}
|
|
|
|
.page-container {
|
|
height: 100%;
|
|
margin: 20px;
|
|
gap: 20px;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.chart-section {
|
|
margin-bottom: 20px;
|
|
}
|
|
</style>
|