custom_ui/frontend/src/components/pages/Jobs.vue

<template>
	<div>
		<h2>Jobs</h2>
		<DataTable
			:data="tableData"
			:columns="columns"
			tableName="jobs"
			:lazy="true"
			:totalRecords="totalRecords"
			:loading="isLoading"
			@lazy-load="handleLazyLoad"
		/>
	</div>
</template>
<script setup>
import DataTable from "../common/DataTable.vue";
import { ref, onMounted } from "vue";
import Api from "../../api";
import { useLoadingStore } from "../../stores/loading";
import { usePaginationStore } from "../../stores/pagination";
import { useFiltersStore } from "../../stores/filters";
import { useNotificationStore } from "../../stores/notifications-primevue";

const loadingStore = useLoadingStore();
const paginationStore = usePaginationStore();
const filtersStore = useFiltersStore();
const notifications = useNotificationStore();

const tableData = ref([]);
const totalRecords = ref(0);
const isLoading = ref(false);

const columns = [
	{ label: "Job ID", fieldName: "name", type: "text", sortable: true, filterable: true },
	{ label: "Address", fieldName: "customInstallationAddress", type: "text", sortable: true },
	{ label: "Customer", fieldName: "customer", type: "text", sortable: true, filterable: true },
	{ label: "Overall Status", fieldName: "status", type: "status", sortable: true },
	{ label: "Progress", fieldName: "percentComplete", type: "text", sortable: true },
];

// Handle lazy loading events from DataTable
const handleLazyLoad = async (event) => {
	console.log("Jobs page - handling lazy load:", event);

	try {
		isLoading.value = true;

		// Get sorting information from filters store first (needed for cache key)
		const sorting = filtersStore.getTableSorting("jobs");
		console.log("Current sorting state:", sorting);

		// 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];
				}
			});
		}

		// 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;
		if (hasActiveFilters || hasActiveSorting) {
			paginationStore.clearTableCache("jobs");
		}

		// Check cache first
		const cachedData = paginationStore.getCachedPage(
			"jobs",
			paginationParams.page,
			paginationParams.pageSize,
			sorting.field || paginationParams.sortField,
			sorting.order || paginationParams.sortOrder,
			filters,
		);

		if (cachedData) {
			// Use cached data
			tableData.value = cachedData.records;
			totalRecords.value = cachedData.totalRecords;
			paginationStore.setTotalRecords("jobs", 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.getPaginatedJobDetails(paginationParams, filters, sorting);

		// Update local state - extract from pagination structure
		tableData.value = result.data;
		totalRecords.value = result.pagination.total;

		// Update pagination store with new total
		paginationStore.setTotalRecords("jobs", result.pagination.total);

		console.log("Updated pagination state:", {
			tableData: tableData.value.length,
			totalRecords: totalRecords.value,
			storeTotal: paginationStore.getTablePagination("jobs").totalRecords,
			storeTotalPages: paginationStore.getTotalPages("jobs"),
		});

		// Cache the result
		paginationStore.setCachedPage(
			"jobs",
			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);
		// You could also show a toast or other error notification here
		tableData.value = [];
		totalRecords.value = 0;
	} finally {
		isLoading.value = false;
	}
};

// Load initial data
onMounted(async () => {
	notifications.addWarning("Jobs page coming soon");
	// Initialize pagination and filters
	// paginationStore.initializeTablePagination("jobs", { rows: 10 });
	// filtersStore.initializeTableFilters("jobs", columns);
	// filtersStore.initializeTableSorting("jobs");

	// // Load first page
	// const initialPagination = paginationStore.getTablePagination("jobs");
	// const initialFilters = filtersStore.getTableFilters("jobs");
	// const initialSorting = filtersStore.getTableSorting("jobs");

	// await handleLazyLoad({
	// 	page: initialPagination.page,
	// 	rows: initialPagination.rows,
	// 	first: initialPagination.first,
	// 	sortField: initialSorting.field || initialPagination.sortField,
	// 	sortOrder: initialSorting.order || initialPagination.sortOrder,
	// 	filters: initialFilters,
	// });
});
</script>
<style lang=""></style>