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

98
frontend/src/components/common/DataTable.vue
View file

@ -82,12 +82,13 @@
:rowsPerPageOptions="[5, 10, 20, 50]"
:paginator="true"
:rows="currentRows"
:first="currentFirst"
:lazy="lazy"
:totalRecords="lazy ? totalRecords : getFilteredDataLength"
@page="handlePage"
@sort="handleSort"
@sort="triggerLazyLoad"
@filter="handleFilter"
sortMode="multiple"
sortMode="single"
removableSort
filterDisplay="none"
v-model:filters="filterRef"
@ -252,9 +253,18 @@ const currentRows = computed(() => {
return 10; // Default for non-lazy tables
});
// Get current first index for pagination synchronization
const currentFirst = computed(() => {
if (props.lazy) {
return paginationStore.getTablePagination(props.tableName).first;
}
return currentPageState.value.first;
});
// Initialize filters and pagination in store when component mounts
onMounted(() => {
filtersStore.initializeTableFilters(props.tableName, props.columns);
filtersStore.initializeTableSorting(props.tableName);
if (props.lazy) {
paginationStore.initializeTablePagination(props.tableName, {
rows: 10,
@ -348,10 +358,7 @@ const hasFilters = computed(() => {
});
const hasActiveFilters = computed(() => {
const currentFilters = filtersStore.getTableFilters(props.tableName);
return Object.values(currentFilters).some(
(filter) => filter.value && filter.value.trim() !== "",
);
return filtersStore.getActiveFiltersCount(props.tableName) > 0;
});
const hasFilterChanges = computed(() => {
@ -406,6 +413,7 @@ const applyFilters = () => {
// Reset to first page when filters change (for both lazy and non-lazy)
currentPageState.value = { page: 0, first: 0 };
selectedPageJump.value = ""; // Reset page jump dropdown
// For both lazy and non-lazy tables, trigger reload with new filters
if (props.lazy) {
@ -423,14 +431,16 @@ const clearFilters = () => {
pendingFilters.value[col.fieldName] = "";
});
// Clear store filters
// Clear store filters (but keep sorting)
filtersStore.clearTableFilters(props.tableName);
// Reset to first page when filters are cleared (for both lazy and non-lazy)
currentPageState.value = { page: 0, first: 0 };
selectedPageJump.value = ""; // Reset page jump dropdown
// For both lazy and non-lazy tables, trigger reload with cleared filters
if (props.lazy) {
paginationStore.clearTableCache(props.tableName);
paginationStore.resetToFirstPage(props.tableName);
triggerLazyLoad();
} else {
@ -459,11 +469,11 @@ const jumpToPage = () => {
const pageNumber = parseInt(selectedPageJump.value) - 1; // Convert to 0-based
if (props.lazy) {
// Update pagination store - the currentFirst computed property will automatically sync
paginationStore.setPage(props.tableName, pageNumber);
triggerLazyLoad();
} else {
// For non-lazy tables, update our internal state
// The DataTable will handle the actual pagination
currentPageState.value = {
page: pageNumber,
first: pageNumber * currentRows.value,
@ -514,23 +524,13 @@ const handlePage = (event) => {
};
// Handle sorting events
const handleSort = (event) => {
console.log("Sort event:", event);
if (props.lazy) {
paginationStore.setSorting(props.tableName, event.sortField, event.sortOrder);
// Reset to first page when sorting changes
paginationStore.resetToFirstPage(props.tableName);
triggerLazyLoad();
}
emit("sort-change", event);
};
// Handle filter events
const handleFilter = (event) => {
console.log("Filter event:", event);
// Reset to first page when filters change (for both lazy and non-lazy)
currentPageState.value = { page: 0, first: 0 };
selectedPageJump.value = ""; // Reset page jump dropdown
if (props.lazy) {
paginationStore.resetToFirstPage(props.tableName);
@ -540,31 +540,60 @@ const handleFilter = (event) => {
};
// Trigger lazy load event
const triggerLazyLoad = () => {
if (props.lazy && props.onLazyLoad) {
const triggerLazyLoad = (event = {}) => {
if (props.lazy) {
const paginationParams = paginationStore.getPaginationParams(props.tableName);
const filters = filtersStore.getTableFilters(props.tableName);
// Use sort information from the event if provided (from DataTable sort event)
// Otherwise fall back to stored sorting state
const storedSorting = filtersStore.getTableSorting(props.tableName);
const lazyEvent = {
first: paginationParams.offset,
rows: paginationParams.limit,
page: paginationParams.page,
sortField: paginationParams.sortField,
sortOrder: paginationParams.sortOrder,
filters: filters,
first: event.first !== undefined ? event.first : paginationParams.offset,
rows: event.rows !== undefined ? event.rows : paginationParams.limit,
page: event.page !== undefined ? event.page : paginationParams.page,
sortField:
event.sortField !== undefined
? event.sortField
: storedSorting.field || paginationParams.sortField,
sortOrder:
event.sortOrder !== undefined
? event.sortOrder
: storedSorting.order || paginationParams.sortOrder,
filters: { ...filters, ...(event.filters || {}) },
};
// If this is a sort event, update the stored sorting state
if (event.sortField !== undefined || event.sortOrder !== undefined) {
filtersStore.updateTableSorting(
props.tableName,
lazyEvent.sortField,
lazyEvent.sortOrder,
);
// Reset to first page when sorting changes
currentPageState.value = { page: 0, first: 0 };
selectedPageJump.value = ""; // Reset page jump dropdown
paginationStore.clearTableCache(props.tableName);
paginationStore.resetToFirstPage(props.tableName);
lazyEvent.page = 0;
lazyEvent.first = 0;
}
console.log("Triggering lazy load with:", lazyEvent);
emit("lazy-load", lazyEvent);
props.onLazyLoad(lazyEvent);
}
};
// Trigger data refresh for non-lazy tables when filters change
const triggerDataRefresh = () => {
const filters = filtersStore.getTableFilters(props.tableName);
const sorting = filtersStore.getTableSorting(props.tableName);
const refreshEvent = {
filters: filters,
sortField: sorting.field,
sortOrder: sorting.order,
page: currentPageState.value.page,
first: currentPageState.value.first,
rows: currentRows.value,
@ -583,10 +612,15 @@ const handleFilterInput = (fieldName, value, filterCallback) => {
filterCallback();
}
// For non-lazy tables, also trigger a data refresh when individual filters change
if (!props.lazy) {
// Reset to first page when filters change
currentPageState.value = { page: 0, first: 0 };
// Reset to first page when filters change (for both lazy and non-lazy)
currentPageState.value = { page: 0, first: 0 };
// For lazy tables, reset pagination and trigger lazy load
if (props.lazy) {
paginationStore.resetToFirstPage(props.tableName);
triggerLazyLoad();
} else {
// For non-lazy tables, also trigger a data refresh when individual filters change
triggerDataRefresh();
}
};

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,
});
});