massage data

frontend/src/api.js

@@ -246,23 +246,30 @@ class Api {
 	 * Get paginated client data with filtering and sorting
 	 * @param {Object} paginationParams - Pagination parameters from store
 	 * @param {Object} filters - Filter parameters from store
-	 * @returns {Promise<{data: Array, totalRecords: number}>}
+	 * @returns {Promise<{data: Array, pagination: Object}>}
 	 */
 	static async getPaginatedClientDetails(paginationParams = {}, filters = {}) {
 		const { page = 0, pageSize = 10, sortField = null, sortOrder = null } = paginationParams;
 
 		const options = {
-			page: page + 1,
-			pageSize,
+			page: page + 1, // Backend expects 1-based pages
+			page_size: pageSize,
 			filters,
-			sortField,
-			sortOrder,
+			sorting: sortField ? `${sortField} ${sortOrder === -1 ? "desc" : "asc"}` : null,
+			for_table: true,
 		};
 
-		const result = await this.getClientDetails(options);
+		const result = await this.request("custom_ui.api.db.get_clients", { options });
 
+		// Transform the response to match what the frontend expects
 		return {
-			...result,
+			data: result.data,
+			pagination: {
+				total: result.pagination.total,
+				page: result.pagination.page,
+				pageSize: result.pagination.page_size,
+				totalPages: result.pagination.total_pages,
+			},
 		};
 	}
 

frontend/src/components/common/DataTable.vue

@@ -1,6 +1,10 @@
 <template lang="html">
 	<!-- Filter Controls Panel -->
-	<div v-if="hasFilters" class="filter-controls-panel mb-3 p-3 bg-light rounded">
+	<div
+		v-if="hasFilters"
+		:key="`filter-controls-${tableName}`"
+		class="filter-controls-panel mb-3 p-3 bg-light rounded"
+	>
 		<div class="row g-3 align-items-end">
 			<div v-for="col in filterableColumns" :key="col.fieldName" class="col-md-4 col-lg-3">
 				<label :for="`filter-${col.fieldName}`" class="form-label small fw-semibold">
@@ -41,7 +45,11 @@
 	</div>
 
 	<!-- Page Jump Controls -->
-	<div v-if="totalPages > 1" class="page-controls-panel mb-3 p-2 bg-light rounded">
+	<div
+		v-if="totalPages > 1"
+		:key="`page-controls-${totalPages}-${getPageInfo().total}`"
+		class="page-controls-panel mb-3 p-2 bg-light rounded"
+	>
 		<div class="row g-3 align-items-center">
 			<div class="col-auto">
 				<small class="text-muted">Quick navigation:</small>
@@ -278,6 +286,28 @@ const filterRef = computed({
 	},
 });
 
+// Watch for changes in total records to update page controls reactivity
+watch(
+	() => props.totalRecords,
+	(newTotal) => {
+		if (props.lazy && newTotal !== undefined) {
+			// Force reactivity update for page controls
+			selectedPageJump.value = "";
+		}
+	},
+);
+
+// Watch for data changes to update page controls for non-lazy tables
+watch(
+	() => props.data,
+	(newData) => {
+		if (!props.lazy && newData) {
+			// Force reactivity update for page controls
+			selectedPageJump.value = "";
+		}
+	},
+);
+
 // Watch for filter changes to sync match mode changes
 watch(
 	filterRef,

frontend/src/components/pages/Clients.vue

@@ -44,26 +44,31 @@ const onClick = () => {
 };
 
 const filters = {
-	fullName: { value: null, matchMode: FilterMatchMode.CONTAINS },
+	addressName: { value: null, matchMode: FilterMatchMode.CONTAINS },
 };
 
 const columns = [
 	{
 		label: "Name",
-		fieldName: "fullName",
+		fieldName: "addressName",
 		type: "text",
 		sortable: true,
 		filterable: true,
 	},
 	{
 		label: "Appt. Scheduled",
-		fieldName: "appointmentStatus",
+		fieldName: "appointmentScheduledStatus",
 		type: "status",
 		sortable: true,
 	},
-	{ label: "Estimate Sent", fieldName: "estimateStatus", type: "status", sortable: true },
-	{ label: "Payment Received", fieldName: "paymentStatus", type: "status", sortable: true },
-	{ label: "Job Status", fieldName: "jobStatus", type: "status", sortable: true },
+	{ label: "Estimate Sent", fieldName: "estimateSentStatus", type: "status", sortable: true },
+	{
+		label: "Payment Received",
+		fieldName: "paymentReceivedStatus",
+		type: "status",
+		sortable: true,
+	},
+	{ label: "Job Status", fieldName: "jobScheduledStatus", type: "status", sortable: true },
 ];
 // Handle lazy loading events from DataTable
 const handleLazyLoad = async (event) => {
@@ -125,12 +130,19 @@ const handleLazyLoad = async (event) => {
 		// Call API with pagination and filters
 		const result = await Api.getPaginatedClientDetails(paginationParams, filters);
 
-		// Update local state
+		// Update local state - extract from pagination structure
 		tableData.value = result.data;
-		totalRecords.value = result.totalRecords;
+		totalRecords.value = result.pagination.total;
 
 		// Update pagination store with new total
-		paginationStore.setTotalRecords("clients", result.totalRecords);
+		paginationStore.setTotalRecords("clients", result.pagination.total);
+
+		console.log("Updated pagination state:", {
+			tableData: tableData.value.length,
+			totalRecords: totalRecords.value,
+			storeTotal: paginationStore.getTablePagination("clients").totalRecords,
+			storeTotalPages: paginationStore.getTotalPages("clients"),
+		});
 
 		// Cache the result
 		paginationStore.setCachedPage(
@@ -142,13 +154,13 @@ const handleLazyLoad = async (event) => {
 			filters,
 			{
 				records: result.data,
-				totalRecords: result.totalRecords,
+				totalRecords: result.pagination.total,
 			},
 		);
 
 		console.log("Loaded from API:", {
 			records: result.data.length,
-			total: result.totalRecords,
+			total: result.pagination.total,
 			page: paginationParams.page + 1,
 		});
 	} catch (error) {

frontend/src/stores/filters.js

@@ -6,7 +6,7 @@ export const useFiltersStore = defineStore("filters", {
 		// Store filters by table/component name
 		tableFilters: {
 			clients: {
-				fullName: { value: null, matchMode: FilterMatchMode.CONTAINS },
+				addressName: { value: null, matchMode: FilterMatchMode.CONTAINS },
 			},
 			jobs: {
 				customer: { value: null, matchMode: FilterMatchMode.CONTAINS },
@@ -25,24 +25,24 @@ export const useFiltersStore = defineStore("filters", {
 			routes: {
 				technician: { value: null, matchMode: FilterMatchMode.CONTAINS },
 				routeId: { value: null, matchMode: FilterMatchMode.CONTAINS },
-			}
-		}
+			},
+		},
 	}),
 	actions: {
 		// Generic method to get filters for a specific table
 		getTableFilters(tableName) {
 			return this.tableFilters[tableName] || {};
 		},
-		
+
 		// Generic method to update a specific filter
 		updateTableFilter(tableName, fieldName, value, matchMode = null) {
 			if (!this.tableFilters[tableName]) {
 				this.tableFilters[tableName] = {};
 			}
 			if (!this.tableFilters[tableName][fieldName]) {
-				this.tableFilters[tableName][fieldName] = { 
-					value: null, 
-					matchMode: FilterMatchMode.CONTAINS 
+				this.tableFilters[tableName][fieldName] = {
+					value: null,
+					matchMode: FilterMatchMode.CONTAINS,
 				};
 			}
 			this.tableFilters[tableName][fieldName].value = value;
@@ -55,7 +55,7 @@ export const useFiltersStore = defineStore("filters", {
 		// Method to clear all filters for a table
 		clearTableFilters(tableName) {
 			if (this.tableFilters[tableName]) {
-				Object.keys(this.tableFilters[tableName]).forEach(key => {
+				Object.keys(this.tableFilters[tableName]).forEach((key) => {
 					this.tableFilters[tableName][key].value = null;
 				});
 			}
@@ -66,12 +66,12 @@ export const useFiltersStore = defineStore("filters", {
 			if (!this.tableFilters[tableName]) {
 				this.tableFilters[tableName] = {};
 			}
-			
-			columns.forEach(column => {
+
+			columns.forEach((column) => {
 				if (column.filterable && !this.tableFilters[tableName][column.fieldName]) {
 					this.tableFilters[tableName][column.fieldName] = {
 						value: null,
-						matchMode: FilterMatchMode.CONTAINS
+						matchMode: FilterMatchMode.CONTAINS,
 					};
 				}
 			});
@@ -79,12 +79,12 @@ export const useFiltersStore = defineStore("filters", {
 
 		// Legacy method for backward compatibility
 		setClientNameFilter(filterValue) {
-			this.updateTableFilter('clients', 'fullName', filterValue);
+			this.updateTableFilter("clients", "addressName", filterValue);
 		},
-		
+
 		// Getter for legacy compatibility
 		get clientNameFilter() {
-			return this.tableFilters?.clients?.fullName?.value || "";
-		}
+			return this.tableFilters?.clients?.addressName?.value || "";
+		},
 	},
 });

frontend/src/utils.js

@@ -1698,7 +1698,15 @@ class DataUtils {
 	static toSnakeCaseObject(obj) {
 		const newObj = Object.entries(obj).reduce((acc, [key, value]) => {
 			const snakeKey = key.replace(/[A-Z]/g, (match) => "_" + match.toLowerCase());
-			value = Object.prototype.toString.call(value) === "[object Object]" ? this.toSnakeCaseObject(value) : value;
+			if (Array.isArray(value)) {
+				value = value.map((item) => {
+					return Object.prototype.toString.call(item) === "[object Object]"
+						? this.toSnakeCaseObject(item)
+						: item;
+				});
+			} else if (Object.prototype.toString.call(value) === "[object Object]") {
+				value = this.toSnakeCaseObject(value);
+			}
 			acc[snakeKey] = value;
 			return acc;
 		}, {});
@@ -1709,7 +1717,16 @@ class DataUtils {
 	static toCamelCaseObject(obj) {
 		const newObj = Object.entries(obj).reduce((acc, [key, value]) => {
 			const camelKey = key.replace(/_([a-z])/g, (match, p1) => p1.toUpperCase());
-			value = Object.prototype.toString.call(value) === "[object Object]" ? this.toCamelCaseObject(value) : value;
+			// check if value is an array
+			if (Array.isArray(value)) {
+				value = value.map((item) => {
+					return Object.prototype.toString.call(item) === "[object Object]"
+						? this.toCamelCaseObject(item)
+						: item;
+				});
+			} else if (Object.prototype.toString.call(value) === "[object Object]") {
+				value = this.toCamelCaseObject(value);
+			}
 			acc[camelKey] = value;
 			return acc;
 		}, {});