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

fix filtering and sorting

Browse source
This commit is contained in:
Casey 2025-11-12 07:01:26 -06:00
parent ba507f8e6a
commit 3b86ed0ee7
7 changed files with 334 additions and 201 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -223,7 +223,7 @@
:lazy="lazy"
:totalRecords="lazy ? totalRecords : getFilteredDataLength"
@page="handlePage"
@sort="triggerLazyLoad"
@sort="handleSort"
@filter="handleFilter"
sortMode="single"
removableSort
@ -823,6 +823,52 @@ const handlePage = (event) => {
};
// Handle sorting events
const handleSort = (event) => {
console.log("Sort event received:", {
sortField: event.sortField,
sortOrder: event.sortOrder,
type: typeof event.sortOrder,
event: event,
});
try {
// Handle removable sort - when sortOrder is null/undefined, clear sorting
if (event.sortOrder === null || event.sortOrder === undefined) {
console.log("Clearing sort due to removable sort");
filtersStore.updateTableSorting(props.tableName, null, null);
} else {
// Update the stored sorting state immediately
filtersStore.updateTableSorting(props.tableName, event.sortField, event.sortOrder);
}
// Reset to first page when sorting changes
currentPageState.value = { page: 0, first: 0 };
selectedPageJump.value = ""; // Reset page jump dropdown
if (props.lazy) {
paginationStore.clearTableCache(props.tableName);
paginationStore.resetToFirstPage(props.tableName);
// Trigger lazy load with sort information (or no sort if cleared)
triggerLazyLoad({
sortField: event.sortField || null,
sortOrder: event.sortOrder || null,
page: 0,
first: 0,
});
} else {
// For non-lazy tables, trigger data refresh
triggerDataRefresh();
}
emit("sort-change", event);
} catch (error) {
console.error("Error in handleSort:", error);
console.error("Event that caused error:", event);
console.error("Stack trace:", error.stack);
}
};
// Handle filter events
const handleFilter = (event) => {
console.log("Filter event:", event);
@ -844,9 +890,9 @@ const triggerLazyLoad = (event = {}) => {
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);
// Get current sorting state from store
const primarySortField = filtersStore.getPrimarySortField(props.tableName);
const primarySortOrder = filtersStore.getPrimarySortOrder(props.tableName);
const lazyEvent = {
first: event.first !== undefined ? event.first : paginationParams.offset,
@ -855,31 +901,14 @@ const triggerLazyLoad = (event = {}) => {
sortField:
event.sortField !== undefined
? event.sortField
: storedSorting.field || paginationParams.sortField,
: primarySortField || paginationParams.sortField,
sortOrder:
event.sortOrder !== undefined
? event.sortOrder
: storedSorting.order || paginationParams.sortOrder,
: primarySortOrder || 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);
}
@ -888,11 +917,12 @@ const triggerLazyLoad = (event = {}) => {
// 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 primarySortField = filtersStore.getPrimarySortField(props.tableName);
const primarySortOrder = filtersStore.getPrimarySortOrder(props.tableName);
const refreshEvent = {
filters: filters,
sortField: sorting.field,
sortOrder: sorting.order,
sortField: primarySortField,
sortOrder: primarySortOrder,
page: currentPageState.value.page,
first: currentPageState.value.first,
rows: currentRows.value,

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

@ -103,7 +103,7 @@ const refreshStatusCounts = async () => {
const filters = {
customerName: { value: null, matchMode: FilterMatchMode.CONTAINS },
addressTitle: { value: null, matchMode: FilterMatchMode.CONTAINS },
address: { value: null, matchMode: FilterMatchMode.CONTAINS },
};
const columns = [
@ -112,11 +112,11 @@ const columns = [
fieldName: "customerName",
type: "text",
sortable: true,
filterable: true
filterable: true,
},
{
label: "Address",
fieldName: "addressTitle",
fieldName: "address",
type: "text",
sortable: true,
filterable: true,
@ -143,7 +143,7 @@ const columns = [
label: "Job Status",
fieldName: "jobStatus",
type: "status",
sortable: true
sortable: true,
},
];
@ -187,7 +187,7 @@ const tableActions = [
// icon: "pi pi-download",
// requiresMultipleSelection: true, // Bulk action - operates on selected rows
// layout: {
// position: "right",
// position: "right".,
// variant: "filled",
// },
// },
@ -229,18 +229,25 @@ const handleLazyLoad = async (event) => {
try {
isLoading.value = true;
// Get sorting information from filters store first (needed for cache key)
const sorting = filtersStore.getTableSorting("clients");
// 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,
sortField: event.sortField,
sortOrder: event.sortOrder,
};
// Get filters (convert PrimeVue format to API format)
}; // Get filters (convert PrimeVue format to API format)
const filters = {};
if (event.filters) {
Object.keys(event.filters).forEach((key) => {
@ -252,18 +259,22 @@ const handleLazyLoad = async (event) => {
// Clear cache when filters or sorting are active to ensure fresh data
const hasActiveFilters = Object.keys(filters).length > 0;
const hasActiveSorting = paginationParams.sortField && paginationParams.sortOrder;
const hasActiveSorting = event.sortField && event.sortOrder;
if (hasActiveFilters || hasActiveSorting) {
paginationStore.clearTableCache("clients");
}
// For cache key, use primary sort field/order for compatibility
const primarySortField = filtersStore.getPrimarySortField("clients") || event.sortField;
const primarySortOrder = filtersStore.getPrimarySortOrder("clients") || event.sortOrder;
// Check cache first
const cachedData = paginationStore.getCachedPage(
"clients",
paginationParams.page,
paginationParams.pageSize,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
primarySortField,
primarySortOrder,
filters,
);
@ -281,10 +292,20 @@ const handleLazyLoad = async (event) => {
return;
}
// Call API with pagination, filters, and sorting
const result = await Api.getPaginatedClientDetails(paginationParams, filters, sorting);
// Call API with pagination, filters, and sorting in backend format
console.log("Making API call with:", {
paginationParams,
filters,
sortingArray,
});
console.log(result);
const result = await Api.getPaginatedClientDetails(
paginationParams,
filters,
sortingArray,
);
console.log("API response:", result);
// Update local state - extract from pagination structure
tableData.value = result.data;
@ -292,13 +313,13 @@ const handleLazyLoad = async (event) => {
// Update pagination store with new total
paginationStore.setTotalRecords("clients", result.pagination.total);
// Cache the result
// Cache the result using primary sort for compatibility
paginationStore.setCachedPage(
"clients",
paginationParams.page,
paginationParams.pageSize,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
primarySortField,
primarySortOrder,
filters,
{
records: result.data,
@ -332,7 +353,8 @@ onMounted(async () => {
// Load first page
const initialPagination = paginationStore.getTablePagination("clients");
const initialFilters = filtersStore.getTableFilters("clients");
const initialSorting = filtersStore.getTableSorting("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
@ -341,8 +363,8 @@ onMounted(async () => {
page: initialPagination.page,
rows: initialPagination.rows,
first: initialPagination.first,
sortField: initialSorting.field || initialPagination.sortField,
sortOrder: initialSorting.order || initialPagination.sortOrder,
sortField: primarySortField || initialPagination.sortField,
sortOrder: primarySortOrder || initialPagination.sortOrder,
filters: initialFilters,
});
});