bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

hook jobs up with real data

Browse source
This commit is contained in:
Casey 2025-11-07 08:03:36 -06:00
parent f4d04e90a9
commit 942e9beeab
3 changed files with 178 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

60
frontend/src/components/pages/Jobs.vue
View file

@ -8,7 +8,6 @@
:lazy="true"
:totalRecords="totalRecords"
:loading="isLoading"
:onLazyLoad="handleLazyLoad"
@lazy-load="handleLazyLoad"
/>
</div>
@ -44,6 +43,10 @@ const handleLazyLoad = async (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,
@ -62,13 +65,20 @@ const handleLazyLoad = async (event) => {
});
}
// 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,
paginationParams.sortField,
paginationParams.sortOrder,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
filters,
);
@ -88,43 +98,45 @@ const handleLazyLoad = async (event) => {
console.log("Making API call with:", { paginationParams, filters });
// For now, use existing API but we should create a paginated version
// TODO: Create Api.getPaginatedJobDetails() method
let data = await Api.getJobDetails();
// Call API with pagination, filters, and sorting
const result = await Api.getPaginatedJobDetails(paginationParams, filters, sorting);
// 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 local state - extract from pagination structure
tableData.value = result.data;
totalRecords.value = result.pagination.total;
// Update pagination store with new total
paginationStore.setTotalRecords("jobs", data.length);
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,
paginationParams.sortField,
paginationParams.sortOrder,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
filters,
{
records: paginatedData,
totalRecords: data.length,
records: result.data,
totalRecords: result.pagination.total,
},
);
console.log("Loaded from API:", {
records: paginatedData.length,
total: data.length,
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 {
@ -137,17 +149,19 @@ onMounted(async () => {
// 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: initialPagination.sortField,
sortOrder: initialPagination.sortOrder,
sortField: initialSorting.field || initialPagination.sortField,
sortOrder: initialSorting.order || initialPagination.sortOrder,
filters: initialFilters,
});
});