fix filtering and sorting

frontend/src/components/pages/Clients.vue

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