update filter functionality

frontend/src/components/pages/Warranties.vue

@@ -6,7 +6,16 @@
 				Add New Warranty Claim
 			</button>
 		</div>
-		<DataTable :data="tableData" :columns="columns" :filters="filters" tableName="warranties" />
+		<DataTable
+			:data="tableData"
+			:columns="columns"
+			tableName="warranties"
+			:lazy="true"
+			:totalRecords="totalRecords"
+			:loading="isLoading"
+			:onLazyLoad="handleLazyLoad"
+			@lazy-load="handleLazyLoad"
+		/>
 	</div>
 </template>
 
@@ -15,8 +24,17 @@ import { onMounted, ref } from "vue";
 import DataTable from "../common/DataTable.vue";
 import Api from "../../api";
 import { FilterMatchMode } from "@primevue/core";
+import { useLoadingStore } from "../../stores/loading";
+import { usePaginationStore } from "../../stores/pagination";
+import { useFiltersStore } from "../../stores/filters";
+
+const loadingStore = useLoadingStore();
+const paginationStore = usePaginationStore();
+const filtersStore = useFiltersStore();
 
 const tableData = ref([]);
+const totalRecords = ref(0);
+const isLoading = ref(false);
 
 const addNewWarranty = () => {
 	// TODO: Open modal or navigate to create warranty form
@@ -25,13 +43,6 @@ const addNewWarranty = () => {
 	// For now, just log the action
 };
 
-const filters = {
-	customer: { value: null, matchMode: FilterMatchMode.CONTAINS },
-	warrantyId: { value: null, matchMode: FilterMatchMode.CONTAINS },
-	address: { value: null, matchMode: FilterMatchMode.CONTAINS },
-	assignedTechnician: { value: null, matchMode: FilterMatchMode.CONTAINS },
-};
-
 const columns = [
 	{
 		label: "Warranty ID",
@@ -93,12 +104,119 @@ const columns = [
 	},
 ];
 
-onMounted(async () => {
-	if (tableData.value.length > 0) {
-		return;
+// Handle lazy loading events from DataTable
+const handleLazyLoad = async (event) => {
+	console.log("Warranties page - handling lazy load:", event);
+
+	try {
+		isLoading.value = true;
+
+		// 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)
+		const filters = {};
+		if (event.filters) {
+			Object.keys(event.filters).forEach((key) => {
+				if (key !== "global" && event.filters[key] && event.filters[key].value) {
+					filters[key] = event.filters[key];
+				}
+			});
+		}
+
+		// Check cache first
+		const cachedData = paginationStore.getCachedPage(
+			"warranties",
+			paginationParams.page,
+			paginationParams.pageSize,
+			paginationParams.sortField,
+			paginationParams.sortOrder,
+			filters,
+		);
+
+		if (cachedData) {
+			// Use cached data
+			tableData.value = cachedData.records;
+			totalRecords.value = cachedData.totalRecords;
+			paginationStore.setTotalRecords("warranties", cachedData.totalRecords);
+
+			console.log("Loaded from cache:", {
+				records: cachedData.records.length,
+				total: cachedData.totalRecords,
+				page: paginationParams.page + 1,
+			});
+			return;
+		}
+
+		console.log("Making API call with:", { paginationParams, filters });
+
+		// For now, use existing API but we should create a paginated version
+		// TODO: Create Api.getPaginatedWarrantyData() method
+		let data = await Api.getWarrantyData();
+
+		// Simulate pagination on client side for now
+		const startIndex = paginationParams.page * paginationParams.pageSize;
+		const endIndex = startIndex + paginationParams.pageSize;
+		const paginatedData = data.slice(startIndex, endIndex);
+
+		// Update local state
+		tableData.value = paginatedData;
+		totalRecords.value = data.length;
+
+		// Update pagination store with new total
+		paginationStore.setTotalRecords("warranties", data.length);
+
+		// Cache the result
+		paginationStore.setCachedPage(
+			"warranties",
+			paginationParams.page,
+			paginationParams.pageSize,
+			paginationParams.sortField,
+			paginationParams.sortOrder,
+			filters,
+			{
+				records: paginatedData,
+				totalRecords: data.length,
+			},
+		);
+
+		console.log("Loaded from API:", {
+			records: paginatedData.length,
+			total: data.length,
+			page: paginationParams.page + 1,
+		});
+	} catch (error) {
+		console.error("Error loading warranty data:", error);
+		tableData.value = [];
+		totalRecords.value = 0;
+	} finally {
+		isLoading.value = false;
 	}
-	let data = await Api.getWarrantyData();
-	tableData.value = data;
+};
+
+// Load initial data
+onMounted(async () => {
+	// Initialize pagination and filters
+	paginationStore.initializeTablePagination("warranties", { rows: 10 });
+	filtersStore.initializeTableFilters("warranties", columns);
+
+	// Load first page
+	const initialPagination = paginationStore.getTablePagination("warranties");
+	const initialFilters = filtersStore.getTableFilters("warranties");
+
+	await handleLazyLoad({
+		page: initialPagination.page,
+		rows: initialPagination.rows,
+		first: initialPagination.first,
+		sortField: initialPagination.sortField,
+		sortOrder: initialPagination.sortOrder,
+		filters: initialFilters,
+	});
 });
 </script>