bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

finish client table for now

Browse source
This commit is contained in:
Casey 2025-11-07 07:50:19 -06:00
parent 60d3f35988
commit f4d04e90a9
6 changed files with 254 additions and 106 deletions
Download patch file Download diff file Expand all files Collapse all files

34
frontend/src/components/pages/Clients.vue
View file

@ -14,7 +14,6 @@
:lazy="true"
:totalRecords="totalRecords"
:loading="isLoading"
:onLazyLoad="handleLazyLoad"
@lazy-load="handleLazyLoad"
/>
</div>
@ -44,13 +43,13 @@ const onClick = () => {
};
const filters = {
addressName: { value: null, matchMode: FilterMatchMode.CONTAINS },
addressTitle: { value: null, matchMode: FilterMatchMode.CONTAINS },
};
const columns = [
{
label: "Name",
fieldName: "addressName",
fieldName: "addressTitle",
type: "text",
sortable: true,
filterable: true,
@ -68,7 +67,7 @@ const columns = [
type: "status",
sortable: true,
},
{ label: "Job Status", fieldName: "jobScheduledStatus", type: "status", sortable: true },
{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
];
// Handle lazy loading events from DataTable
const handleLazyLoad = async (event) => {
@ -77,6 +76,10 @@ const handleLazyLoad = async (event) => {
try {
isLoading.value = true;
// Get sorting information from filters store first (needed for cache key)
const sorting = filtersStore.getTableSorting("clients");
console.log("Current sorting state:", sorting);
// Get pagination parameters
const paginationParams = {
page: event.page || 0,
@ -95,9 +98,10 @@ const handleLazyLoad = async (event) => {
});
}
// Clear cache when filters are active to ensure fresh data
// Clear cache when filters or sorting are active to ensure fresh data
const hasActiveFilters = Object.keys(filters).length > 0;
if (hasActiveFilters) {
const hasActiveSorting = paginationParams.sortField && paginationParams.sortOrder;
if (hasActiveFilters || hasActiveSorting) {
paginationStore.clearTableCache("clients");
}
@ -106,8 +110,8 @@ const handleLazyLoad = async (event) => {
"clients",
paginationParams.page,
paginationParams.pageSize,
paginationParams.sortField,
paginationParams.sortOrder,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
filters,
);
@ -127,8 +131,8 @@ const handleLazyLoad = async (event) => {
console.log("Making API call with:", { paginationParams, filters });
// Call API with pagination and filters
const result = await Api.getPaginatedClientDetails(paginationParams, filters);
// Call API with pagination, filters, and sorting
const result = await Api.getPaginatedClientDetails(paginationParams, filters, sorting);
// Update local state - extract from pagination structure
tableData.value = result.data;
@ -149,8 +153,8 @@ const handleLazyLoad = async (event) => {
"clients",
paginationParams.page,
paginationParams.pageSize,
paginationParams.sortField,
paginationParams.sortOrder,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
filters,
{
records: result.data,
@ -178,17 +182,19 @@ onMounted(async () => {
// 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 initialSorting = filtersStore.getTableSorting("clients");
await handleLazyLoad({
page: initialPagination.page,
rows: initialPagination.rows,
first: initialPagination.first,
sortField: initialPagination.sortField,
sortOrder: initialPagination.sortOrder,
sortField: initialSorting.field || initialPagination.sortField,
sortOrder: initialSorting.order || initialPagination.sortOrder,
filters: initialFilters,
});
});