Added a rough and dirty Job page and the JS API methods for it.

frontend/src/api.js

@@ -15,6 +15,7 @@ const FRAPPE_ESTIMATE_UPDATE_RESPONSE_METHOD = "custom_ui.api.db.estimates.manua
 // Job methods
 const FRAPPE_GET_JOBS_METHOD = "custom_ui.api.db.get_jobs";
 const FRAPPE_UPSERT_JOB_METHOD = "custom_ui.api.db.jobs.upsert_job";
+const FRAPPE_GET_JOB_TASK_LIST_METHOD = "custom_ui.api.db.get_job_task_list";
 // Invoice methods
 const FRAPPE_GET_INVOICES_METHOD = "custom_ui.api.db.invoices.get_invoice_table_data";
 const FRAPPE_UPSERT_INVOICE_METHOD = "custom_ui.api.db.invoices.upsert_invoice";
@@ -267,6 +268,19 @@ class Api {
 		return result;
 	}
 
+	static async getJobTaskList(jobName) {
+		if (frappe.db.exists("Project", jobName) {
+			const result = await request(FRAPPE_GET_JOB_TASK_LIST_METHOD, { data: jobName )
+			console.log(`DEBUG: API - retrieved task list from job ${jobName}:`, result);
+			return result
+		}
+		else {
+			console.log(`DEBUG: API - no record found for task like from job ${jobName}: `, result);
+		}
+	}
+
+
+
 	// ============================================================================
 	// INVOICE / PAYMENT METHODS
 	// ============================================================================

frontend/src/components/pages/Job.vue

@@ -0,0 +1,162 @@
+<template>
+	<div class= "job-page">
+		<h2>{{ isNew ? 'Create Job' : 'View Job' }}</h2>
+		<div  class="page-actions">
+		</div>
+		<div class="info-section">
+			<div class="address-info">
+			</div>
+			<div class="customer-info">
+			</div>
+		</div>
+		<div class="task-list">
+			<DataTable
+				:data="tableData"
+				:columns="columns"
+				tableName="jobs"
+				:lazy="true"
+				:totalRecords="totalRecords"
+				:loading="isLoading"
+				@lazy-load="handleLazyLoad"
+			/>
+		</div>
+	</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: "Task", fieldName: "", type: "text", sortable: true, filterable: true },
+	{ label: "Address", fieldName: "", type: "text", sortable: true, filterable: true },
+	{ label: "Category", fieldName: "", type: "text", sortable: true, filterable: true },
+	{ label: "Status", fieldName: "", type: "text", sortable: true, filterable: true },
+];
+
+const handleLazyLoad = async (event) => {
+	console.log("Task list on Job Page - handling lazy load:", event);
+	try {
+		isLoading.value = true;
+
+		// Get sorting information from filters store first (needed for cache key)
+		const sorting = filtersStore.getTableSorting("jobTasks");
+		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("jobTasks");
+		}
+
+		// Check cache first
+		const cachedData = paginationStore.getCachedPage(
+			"jobTasks",
+			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("jobTasks", 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.getPaginatedJobTaskDetails(tpaginationParams, 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("jobTasks", result.pagination.total);
+
+		console.log("Updated pagination state:", {
+			tableData: tableData.value.length,
+			totalRecords: totalRecords.value,
+			storeTotal: paginationStore.getTablePagination("jobTasks").totalRecords,
+			storeTotalPages: paginationStore.getTotalPages("jobTasks"),
+		});
+
+		// Cache the result
+		paginationStore.setCachedPage(
+			"jobTasks",
+			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;
+	}
+};
+
+onMounted(async () => {
+});
+</script>
+
+<style scoped>
+</style>