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

26
frontend/src/api.js
View file

@ -32,7 +32,7 @@ class Api {
}
static async getClientDetails(clientName) {
return await this.request(FRAPPE_GET_CLIENT_DETAILS_METHOD);
return await this.request(FRAPPE_GET_CLIENT_DETAILS_METHOD, { clientName });
}
static async getJobDetails() {
@ -107,24 +107,14 @@ class Api {
* @param {Object} sorting - Sorting parameters from store (optional)
* @returns {Promise<{data: Array, pagination: Object}>}
*/
static async getPaginatedClientDetails(paginationParams = {}, filters = {}, sorting = null) {
const { page = 0, pageSize = 10, sortField = null, sortOrder = null } = paginationParams;
// Use sorting from the dedicated sorting parameter first, then fall back to pagination params
const actualSortField = sorting?.field || sortField;
const actualSortOrder = sorting?.order || sortOrder;
const options = {
page: page + 1, // Backend expects 1-based pages
page_size: pageSize,
static async getPaginatedClientDetails(paginationParams = {}, filters = {}, sorting = []) {
const { page = 0, pageSize = 10 } = paginationParams;
const result = await this.request(FRAPPE_GET_CLIENT_TABLE_DATA_METHOD, {
filters,
sorting:
actualSortField && actualSortOrder
? `${actualSortField} ${actualSortOrder === -1 ? "desc" : "asc"}`
: null,
for_table: true,
};
const result = await this.request(FRAPPE_GET_CLIENT_TABLE_DATA_METHOD, { options });
sorting,
page: page + 1,
pageSize,
});
return result;
}

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

105
frontend/src/stores/filters.js
View file

@ -5,7 +5,7 @@ export const useFiltersStore = defineStore("filters", {
state: () => ({
// Store filters by table/component name
tableFilters: {},
// Store sorting by table/component name
// Store sorting by table/component name - now supports multiple sorts as array
tableSorting: {},
}),
actions: {
@ -16,7 +16,43 @@ export const useFiltersStore = defineStore("filters", {
// Generic method to get sorting for a specific table
getTableSorting(tableName) {
return this.tableSorting[tableName] || { field: null, order: null };
return this.tableSorting[tableName] || [];
},
// Get sorting in backend format: [["field", "asc/desc"], ["field", "asc/desc"]]
getTableSortingForBackend(tableName) {
const sorting = this.tableSorting[tableName] || [];
console.log("getTableSortingForBackend - raw sorting:", sorting);
const result = sorting.map((sort) => {
const direction = sort.order === 1 ? "asc" : "desc";
console.log("Converting sort:", {
field: sort.field,
order: sort.order,
direction,
});
return [sort.field, direction];
});
console.log("getTableSortingForBackend result:", result);
return result;
},
// Get primary sort field for compatibility with PrimeVue
getPrimarySortField(tableName) {
const sorting = this.tableSorting[tableName] || [];
return sorting.length > 0 ? sorting[0].field : null;
},
// Get primary sort order for compatibility with PrimeVue
getPrimarySortOrder(tableName) {
const sorting = this.tableSorting[tableName] || [];
if (sorting.length > 0) {
const order = sorting[0].order;
console.log("getPrimarySortOrder returning:", order, typeof order);
return order;
}
return null;
},
// Generic method to update a specific filter
@ -37,13 +73,62 @@ export const useFiltersStore = defineStore("filters", {
}
},
// Generic method to update sorting for a table
// Generic method to update sorting for a table (supports single sort from PrimeVue)
updateTableSorting(tableName, field, order) {
if (!this.tableSorting[tableName]) {
this.tableSorting[tableName] = { field: null, order: null };
this.tableSorting[tableName] = [];
}
this.tableSorting[tableName].field = field;
this.tableSorting[tableName].order = order;
// Clear sorting if no field provided or order is null/undefined
if (!field || order === null || order === undefined) {
console.log("Clearing sort for table:", tableName);
this.tableSorting[tableName] = [];
return;
}
// Ensure order is a number (PrimeVue uses 1 for asc, -1 for desc)
let numericOrder = order;
if (typeof order === "string") {
numericOrder = order.toLowerCase() === "asc" ? 1 : -1;
} else if (typeof order === "number") {
// Ensure it's 1 or -1
numericOrder = order > 0 ? 1 : -1;
} else {
console.warn("Invalid sort order type:", typeof order, order);
return;
}
console.log("updateTableSorting called with:", {
tableName,
field,
order,
numericOrder,
});
// Replace existing sort with new single sort (PrimeVue behavior)
this.tableSorting[tableName] = [{ field, order: numericOrder }];
},
// Method to add or update a specific sort field (for multi-sort support)
addTableSort(tableName, field, order) {
if (!this.tableSorting[tableName]) {
this.tableSorting[tableName] = [];
}
// Remove existing sort for this field
this.tableSorting[tableName] = this.tableSorting[tableName].filter(
(sort) => sort.field !== field,
);
// Add new sort if field and order provided
if (field && order) {
this.tableSorting[tableName].push({ field, order });
}
},
// Method to set multiple sorts at once
setTableSorting(tableName, sortArray) {
this.tableSorting[tableName] = sortArray || [];
},
// Method to clear all filters for a table
@ -57,9 +142,7 @@ export const useFiltersStore = defineStore("filters", {
// Method to clear sorting for a table
clearTableSorting(tableName) {
if (this.tableSorting[tableName]) {
this.tableSorting[tableName] = { field: null, order: null };
}
this.tableSorting[tableName] = [];
},
// Method to clear both filters and sorting for a table
@ -87,7 +170,7 @@ export const useFiltersStore = defineStore("filters", {
// Method to initialize sorting for a table
initializeTableSorting(tableName) {
if (!this.tableSorting[tableName]) {
this.tableSorting[tableName] = { field: null, order: null };
this.tableSorting[tableName] = [];
}
},
@ -102,7 +185,7 @@ export const useFiltersStore = defineStore("filters", {
// Method to check if sorting is active
isSortingActive(tableName) {
const sorting = this.getTableSorting(tableName);
return sorting.field !== null && sorting.order !== null;
return sorting.length > 0;
},
// Method to get all table state (filters + sorting)

13
frontend/src/utils.js
View file

@ -1696,8 +1696,21 @@ class DataUtils {
];
static toSnakeCaseObject(obj) {
console.log("Converting to snake case:", obj);
const newObj = Object.entries(obj).reduce((acc, [key, value]) => {
const snakeKey = key.replace(/[A-Z]/g, (match) => "_" + match.toLowerCase());
if (key === "sorting") {
value = value
? value.map((item) => {
const [field, order] = item;
const snakeField = field.replace(
/[A-Z]/g,
(match) => "_" + match.toLowerCase(),
);
return [snakeField, order];
})
: value;
}
if (Array.isArray(value)) {
value = value.map((item) => {
return Object.prototype.toString.call(item) === "[object Object]"