Fixed pagination/lazy load issues on the Tasks list.

frontend/src/components/pages/Tasks.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="page-container">
-		<h2>Admin Tasks</h2>
+		<h2>Tasks</h2>
 		<!-- Todo Chart Section -->
 		<div class = "widgets-grid">
 			<!-- Widget Cards go here if needed -->
@@ -8,6 +8,8 @@
 		<DataTable
 			:data="tableData"
 			:columns="columns"
+			:filters="filters"
+			:tableActions="tableActions"
 			tableName="tasks"
 			:lazy="true"
 			:totalRecords="totalRecords"
@@ -18,7 +20,7 @@
 </template>
 <script setup>
 import DataTable from "../common/DataTable.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch, computed } from "vue";
 import { useRouter } from "vue-router";
 import Api from "../../api";
 import { useLoadingStore } from "../../stores/loading";
@@ -35,10 +37,19 @@ const tableData = ref([]);
 const totalRecords = ref(0);
 const isLoading = ref(false);
 
+// Computed property to get current filters for the chart
+const currentFilters = computed(() => {
+	return filtersStore.getTableFilters("tasks");
+});
+
 const columns = [
 	{ label: "Task", fieldName: "subject", type: "text", sortable: true, filterable: true },
-	{ label: "Project", fieldName: "project", type: "link", sortable: true },
+	{ label: "Project", fieldName: "project", type: "link", sortable: true,
-	{ label: "Address", fieldName: "address", type: "text", sortable: true },
+		onLinkClick: (link, rowData) => handleProjectClick(link, rowData)
+	},
+	{ label: "Address", fieldName: "address", type: "link", sortable: true,
+		onLinkClick: (link, rowData) => handlePropertyClick(link, rowData)
+	},
 	{ label: "Type", fieldName: "type", type: "text", sortable: true },
 	{ label: "Overall Status", fieldName: "status", type: "status", sortable: true },
 ];
@@ -59,19 +70,25 @@ const handleLazyLoad = async (event) => {
 	try {
 		isLoading.value = true;
 
-		// Get sorting information from filters store first (needed for cache key)
+		// If this is a sort event, update the store first
-		const sorting = filtersStore.getTableSorting("tasks");
+		if (event.sortField !== undefined && event.sortOrder !== undefined) {
-		console.log("Current sorting state:", sorting);
+			console.log("Sort event detected - updating store with:", {
+				sortField: event.sortField,
+				sortOrder: event.sortOrder,
+				orderType: typeof event.sortOrder,
+			});
+			filtersStore.updateTableSorting("tasks", event.sortField, event.sortOrder);
+		}
+
+		// Get sorting information from filters store in backend format
+		const sortingArray = filtersStore.getTableSortingForBackend("tasks");
+		console.log("Current sorting array for backend:", sortingArray);
 
 		// Get pagination parameters
 		const paginationParams = {
 			page: event.page || 0,
 			pageSize: event.rows || 10,
-			sortField: event.sortField,
+		}; // Get filters (convert PrimeVue format to API format)
-			sortOrder: event.sortOrder,
-		};
-
-		// Get filters (convert PrimeVue format to API format)
 		const filters = {};
 		if (event.filters) {
 			Object.keys(event.filters).forEach((key) => {
@@ -81,41 +98,25 @@ const handleLazyLoad = async (event) => {
 			});
 		}
 
-		// Clear cache when filters or sorting are active to ensure fresh data
+		// For cache key, use primary sort field/order for compatibility
-		const hasActiveFilters = Object.keys(filters).length > 0;
+		const primarySortField = filtersStore.getPrimarySortField("tasks") || event.sortField;
-		const hasActiveSorting = paginationParams.sortField && paginationParams.sortOrder;
+		const primarySortOrder = filtersStore.getPrimarySortOrder("tasks") || event.sortOrder;
-		if (hasActiveFilters || hasActiveSorting) {
-			paginationStore.clearTableCache("tasks");
-		}
 
-		// Check cache first
+		// Always fetch fresh data from API (cache only stores pagination/filter/sort state, not data)
-		const cachedData = paginationStore.getCachedPage(
+		// Call API with pagination, filters, and sorting in backend format
-			"tasks",
+		console.log("Making API call with:", {
-			paginationParams.page,
+			paginationParams,
-			paginationParams.pageSize,
-			sorting.field || paginationParams.sortField,
-			sorting.order || paginationParams.sortOrder,
 			filters,
+			sortingArray,
+		});
+
+		const result = await Api.getPaginatedTaskDetails(
+			paginationParams,
+			filters,
+			sortingArray,
 		);
 
-		if (cachedData) {
+		console.log("API response:", result);
-			// Use cached data
-			tableData.value = cachedData.records;
-			totalRecords.value = cachedData.totalRecords;
-			paginationStore.setTotalRecords("tasks", 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 });
-
-		// Call API with pagination, filters, and sorting
-		const result = await Api.getPaginatedTaskDetails(paginationParams, filters, sorting);
 
 		// Update local state - extract from pagination structure
 		tableData.value = result.data;
@@ -123,35 +124,8 @@ const handleLazyLoad = async (event) => {
 
 		// Update pagination store with new total
 		paginationStore.setTotalRecords("tasks", result.pagination.total);
-
-		console.log("Updated pagination state:", {
-			tableData: tableData.value.length,
-			totalRecords: totalRecords.value,
-			storeTotal: paginationStore.getTablePagination("tasks").totalRecords,
-			storeTotalPages: paginationStore.getTotalPages("tasks"),
-		});
-
-		// Cache the result
-		paginationStore.setCachedPage(
-			"tasks",
-			paginationParams.page,
-			paginationParams.pageSize,
-			sorting.field || paginationParams.sortField,
-			sorting.order || paginationParams.sortOrder,
-			filters,
-			{
-				records: result.data,
-				totalRecords: result.pagination.total,
-			},
-		);
-
-		console.log("Loaded from API:", {
-			records: result.data.length,
-			total: result.pagination.total,
-			page: paginationParams.page + 1,
-		});
 	} catch (error) {
-		console.error("Error loading job data:", error);
+		console.error("Error loading task data:", error);
 		// You could also show a toast or other error notification here
 		tableData.value = [];
 		totalRecords.value = 0;
@@ -160,6 +134,20 @@ const handleLazyLoad = async (event) => {
 	}
 };
 
+const handleProjectClick = (link, rowData) => {
+	console.log("DEBUG: Project Link Clicked.");
+	const jobId = encodeURIComponent(rowData.project);
+	router.push(`/job?jobId=${jobId}`);
+};
+
+const handlePropertyClick = (link, rowData) => {
+	console.log("DEBUG: Property Link Clicked.");
+	const client = encodeURIComponent(rowData.customerName);
+	const address = encodeURIComponent(rowData.address);
+	router.push(`/property?client=${client}&address=${address}`);
+}
+
+
 // If we implement a Task Detail View, this may be helpful
 //const handleRowClick = (event) => {
 //	const rowData = event.data;