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

Fixed pagination/lazy load issues on the Tasks list.

Browse source
This commit is contained in:
rocketdebris 2026-01-13 10:14:22 -05:00
parent 3e1fd039b3
commit 59e21a51f2
1 changed files with 36 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

113
frontend/src/components/pages/Tasks.vue
View file

@ -20,7 +20,7 @@
</template>
<script setup>
import DataTable from "../common/DataTable.vue";
import { ref, onMounted, watch } from "vue";
import { ref, onMounted, watch, computed } from "vue";
import { useRouter } from "vue-router";
import Api from "../../api";
import { useLoadingStore } from "../../stores/loading";
@ -37,6 +37,11 @@ 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,
@ -65,19 +70,25 @@ const handleLazyLoad = async (event) => {
try {
isLoading.value = true;
// Get sorting information from filters store first (needed for cache key)
const sorting = filtersStore.getTableSorting("tasks");
console.log("Current sorting state:", sorting);
// If this is a sort event, update the store first
if (event.sortField !== undefined && event.sortOrder !== undefined) {
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,
sortOrder: event.sortOrder,
};
// Get filters (convert PrimeVue format to API format)
}; // Get filters (convert PrimeVue format to API format)
const filters = {};
if (event.filters) {
Object.keys(event.filters).forEach((key) => {
@ -87,41 +98,25 @@ 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("tasks");
}
// For cache key, use primary sort field/order for compatibility
const primarySortField = filtersStore.getPrimarySortField("tasks") || event.sortField;
const primarySortOrder = filtersStore.getPrimarySortOrder("tasks") || event.sortOrder;
// Check cache first
const cachedData = paginationStore.getCachedPage(
"tasks",
paginationParams.page,
paginationParams.pageSize,
sorting.field || paginationParams.sortField,
sorting.order || paginationParams.sortOrder,
// Always fetch fresh data from API (cache only stores pagination/filter/sort state, not data)
// Call API with pagination, filters, and sorting in backend format
console.log("Making API call with:", {
paginationParams,
filters,
sortingArray,
});
const result = await Api.getPaginatedTaskDetails(
paginationParams,
filters,
sortingArray,
);
if (cachedData) {
// 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);
console.log("API response:", result);
// Update local state - extract from pagination structure
tableData.value = result.data;
@ -129,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;
@ -186,15 +154,6 @@ const handlePropertyClick = (link, rowData) => {
// router.push(`/task?taskId=${rowData.name}`);
//}
// Watch for filters change to update status counts
watch(
() => filtersStore.getTableFilters("tasks"),
async () => {
await refreshStatusCounts();
},
{ deep: true },
);
// Load initial data
onMounted(async () => {
notifications.addWarning("Tasks page coming soon");