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

moving towards real data

Browse source
This commit is contained in:
Casey 2025-11-06 13:00:19 -06:00
parent ac3c05cb78
commit 40c4a5a37f
8 changed files with 303 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

136
frontend/src/components/common/DataTable.vue
View file

@ -1,6 +1,6 @@
<template lang="html">
<!-- Filter Controls Panel -->
<div v-if="lazy && hasFilters" class="filter-controls-panel mb-3 p-3 bg-light rounded">
<div v-if="hasFilters" class="filter-controls-panel mb-3 p-3 bg-light rounded">
<div class="row g-3 align-items-end">
<div v-for="col in filterableColumns" :key="col.fieldName" class="col-md-4 col-lg-3">
<label :for="`filter-${col.fieldName}`" class="form-label small fw-semibold">
@ -41,7 +41,7 @@
</div>
<!-- Page Jump Controls -->
<div v-if="lazy && totalPages > 1" class="page-controls-panel mb-3 p-2 bg-light rounded">
<div v-if="totalPages > 1" class="page-controls-panel mb-3 p-2 bg-light rounded">
<div class="row g-3 align-items-center">
<div class="col-auto">
<small class="text-muted">Quick navigation:</small>
@ -69,12 +69,13 @@
</div>
<DataTable
ref="dataTableRef"
:value="data"
:rowsPerPageOptions="[5, 10, 20, 50]"
:paginator="true"
:rows="currentRows"
:lazy="lazy"
:totalRecords="lazy ? totalRecords : data.length"
:totalRecords="lazy ? totalRecords : getFilteredDataLength"
@page="handlePage"
@sort="handleSort"
@filter="handleFilter"
@ -201,6 +202,11 @@ const props = defineProps({
type: Number,
default: 0,
},
// Total filtered records for non-lazy tables (when server-side filtering is used)
totalFilteredRecords: {
type: Number,
default: null,
},
// Custom pagination event handler
onLazyLoad: {
type: Function,
@ -208,7 +214,14 @@ const props = defineProps({
},
});
const emit = defineEmits(["rowClick", "lazy-load", "page-change", "sort-change", "filter-change"]);
const emit = defineEmits([
"rowClick",
"lazy-load",
"page-change",
"sort-change",
"filter-change",
"data-refresh",
]);
// Computed loading state that considers both prop and global store
const loading = computed(() => {
@ -292,6 +305,8 @@ watch(
const selectedRows = ref();
const pendingFilters = ref({});
const selectedPageJump = ref("");
const dataTableRef = ref();
const currentPageState = ref({ page: 0, first: 0 }); // Track current page for non-lazy tables
// Computed properties for filtering
const filterableColumns = computed(() => {
@ -319,8 +334,12 @@ const hasFilterChanges = computed(() => {
});
const totalPages = computed(() => {
if (!props.lazy) return 0;
return paginationStore.getTotalPages(props.tableName);
if (props.lazy) {
return paginationStore.getTotalPages(props.tableName);
}
// For non-lazy tables, calculate based on current filtered data
const filteredDataLength = getFilteredDataLength.value;
return Math.ceil(filteredDataLength / currentRows.value) || 1;
});
// Initialize pending filters from store
@ -331,6 +350,17 @@ onMounted(() => {
});
});
// Computed property to get filtered data length for non-lazy tables
const getFilteredDataLength = computed(() => {
if (props.lazy) {
return props.totalRecords;
}
// For non-lazy tables, use totalFilteredRecords if provided (server-side filtering),
// otherwise fall back to data length (client-side filtering)
return props.totalFilteredRecords !== null ? props.totalFilteredRecords : props.data.length;
});
// Filter management methods
const applyFilters = () => {
// Update store with pending filter values
@ -344,10 +374,16 @@ const applyFilters = () => {
);
});
// For lazy tables, reset to first page and trigger reload
// Reset to first page when filters change (for both lazy and non-lazy)
currentPageState.value = { page: 0, first: 0 };
// For both lazy and non-lazy tables, trigger reload with new filters
if (props.lazy) {
paginationStore.resetToFirstPage(props.tableName);
triggerLazyLoad();
} else {
// For non-lazy tables, also trigger a reload to get fresh data from server
triggerDataRefresh();
}
};
@ -360,10 +396,16 @@ const clearFilters = () => {
// Clear store filters
filtersStore.clearTableFilters(props.tableName);
// For lazy tables, reset to first page and trigger reload
// Reset to first page when filters are cleared (for both lazy and non-lazy)
currentPageState.value = { page: 0, first: 0 };
// For both lazy and non-lazy tables, trigger reload with cleared filters
if (props.lazy) {
paginationStore.resetToFirstPage(props.tableName);
triggerLazyLoad();
} else {
// For non-lazy tables, also trigger a reload to get fresh data from server
triggerDataRefresh();
}
};
@ -383,21 +425,53 @@ const getActiveFiltersText = () => {
// Page navigation methods
const jumpToPage = () => {
if (selectedPageJump.value && props.lazy) {
if (selectedPageJump.value) {
const pageNumber = parseInt(selectedPageJump.value) - 1; // Convert to 0-based
paginationStore.setPage(props.tableName, pageNumber);
triggerLazyLoad();
if (props.lazy) {
paginationStore.setPage(props.tableName, pageNumber);
triggerLazyLoad();
} else {
// For non-lazy tables, update our internal state
// The DataTable will handle the actual pagination
currentPageState.value = {
page: pageNumber,
first: pageNumber * currentRows.value,
};
}
}
selectedPageJump.value = ""; // Reset selection
};
const getPageInfo = () => {
return paginationStore.getPageInfo(props.tableName);
if (props.lazy) {
return paginationStore.getPageInfo(props.tableName);
}
// For non-lazy tables, calculate based on current page state and filtered data
const filteredTotal = getFilteredDataLength.value;
const rows = currentRows.value;
const currentFirst = currentPageState.value.first;
const start = filteredTotal > 0 ? currentFirst + 1 : 0;
const end = Math.min(filteredTotal, currentFirst + rows);
return {
start,
end,
total: filteredTotal,
};
};
// Handle pagination events
const handlePage = (event) => {
console.log("Page event:", event);
// Update current page state for both lazy and non-lazy tables
currentPageState.value = {
page: event.page,
first: event.first,
};
if (props.lazy) {
paginationStore.updateTablePagination(props.tableName, {
page: event.page,
@ -424,8 +498,11 @@ const handleSort = (event) => {
// Handle filter events
const handleFilter = (event) => {
console.log("Filter event:", event);
// Reset to first page when filters change (for both lazy and non-lazy)
currentPageState.value = { page: 0, first: 0 };
if (props.lazy) {
// Reset to first page when filters change
paginationStore.resetToFirstPage(props.tableName);
triggerLazyLoad();
}
@ -453,6 +530,37 @@ const triggerLazyLoad = () => {
}
};
// Trigger data refresh for non-lazy tables when filters change
const triggerDataRefresh = () => {
const filters = filtersStore.getTableFilters(props.tableName);
const refreshEvent = {
filters: filters,
page: currentPageState.value.page,
first: currentPageState.value.first,
rows: currentRows.value,
};
console.log("Triggering data refresh with:", refreshEvent);
emit("data-refresh", refreshEvent);
};
const handleFilterInput = (fieldName, value, filterCallback) => {
// Update the filter store
filtersStore.updateTableFilter(props.tableName, fieldName, value, FilterMatchMode.CONTAINS);
// Call the PrimeVue callback to update the filter
if (filterCallback) {
filterCallback();
}
// For non-lazy tables, also trigger a data refresh when individual filters change
if (!props.lazy) {
// Reset to first page when filters change
currentPageState.value = { page: 0, first: 0 };
triggerDataRefresh();
}
};
const getBadgeColor = (status) => {
console.log("DEBUG: - getBadgeColor status", status);
switch (status?.toLowerCase()) {
@ -498,6 +606,8 @@ defineExpose({
refresh: () => {
if (props.lazy) {
triggerLazyLoad();
} else {
triggerDataRefresh();
}
},