finish client table for now

frontend/src/components/common/DataTable.vue

@@ -82,12 +82,13 @@
 		:rowsPerPageOptions="[5, 10, 20, 50]"
 		:paginator="true"
 		:rows="currentRows"
+		:first="currentFirst"
 		:lazy="lazy"
 		:totalRecords="lazy ? totalRecords : getFilteredDataLength"
 		@page="handlePage"
-		@sort="handleSort"
+		@sort="triggerLazyLoad"
 		@filter="handleFilter"
-		sortMode="multiple"
+		sortMode="single"
 		removableSort
 		filterDisplay="none"
 		v-model:filters="filterRef"
@@ -252,9 +253,18 @@ const currentRows = computed(() => {
 	return 10; // Default for non-lazy tables
 });
 
+// Get current first index for pagination synchronization
+const currentFirst = computed(() => {
+	if (props.lazy) {
+		return paginationStore.getTablePagination(props.tableName).first;
+	}
+	return currentPageState.value.first;
+});
+
 // Initialize filters and pagination in store when component mounts
 onMounted(() => {
 	filtersStore.initializeTableFilters(props.tableName, props.columns);
+	filtersStore.initializeTableSorting(props.tableName);
 	if (props.lazy) {
 		paginationStore.initializeTablePagination(props.tableName, {
 			rows: 10,
@@ -348,10 +358,7 @@ const hasFilters = computed(() => {
 });
 
 const hasActiveFilters = computed(() => {
-	const currentFilters = filtersStore.getTableFilters(props.tableName);
-	return Object.values(currentFilters).some(
-		(filter) => filter.value && filter.value.trim() !== "",
-	);
+	return filtersStore.getActiveFiltersCount(props.tableName) > 0;
 });
 
 const hasFilterChanges = computed(() => {
@@ -406,6 +413,7 @@ const applyFilters = () => {
 
 	// Reset to first page when filters change (for both lazy and non-lazy)
 	currentPageState.value = { page: 0, first: 0 };
+	selectedPageJump.value = ""; // Reset page jump dropdown
 
 	// For both lazy and non-lazy tables, trigger reload with new filters
 	if (props.lazy) {
@@ -423,14 +431,16 @@ const clearFilters = () => {
 		pendingFilters.value[col.fieldName] = "";
 	});
 
-	// Clear store filters
+	// Clear store filters (but keep sorting)
 	filtersStore.clearTableFilters(props.tableName);
 
 	// Reset to first page when filters are cleared (for both lazy and non-lazy)
 	currentPageState.value = { page: 0, first: 0 };
+	selectedPageJump.value = ""; // Reset page jump dropdown
 
 	// For both lazy and non-lazy tables, trigger reload with cleared filters
 	if (props.lazy) {
+		paginationStore.clearTableCache(props.tableName);
 		paginationStore.resetToFirstPage(props.tableName);
 		triggerLazyLoad();
 	} else {
@@ -459,11 +469,11 @@ const jumpToPage = () => {
 		const pageNumber = parseInt(selectedPageJump.value) - 1; // Convert to 0-based
 
 		if (props.lazy) {
+			// Update pagination store - the currentFirst computed property will automatically sync
 			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,
@@ -514,23 +524,13 @@ const handlePage = (event) => {
 };
 
 // Handle sorting events
-const handleSort = (event) => {
-	console.log("Sort event:", event);
-	if (props.lazy) {
-		paginationStore.setSorting(props.tableName, event.sortField, event.sortOrder);
-		// Reset to first page when sorting changes
-		paginationStore.resetToFirstPage(props.tableName);
-		triggerLazyLoad();
-	}
-	emit("sort-change", 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 };
+	selectedPageJump.value = ""; // Reset page jump dropdown
 
 	if (props.lazy) {
 		paginationStore.resetToFirstPage(props.tableName);
@@ -540,31 +540,60 @@ const handleFilter = (event) => {
 };
 
 // Trigger lazy load event
-const triggerLazyLoad = () => {
-	if (props.lazy && props.onLazyLoad) {
+const triggerLazyLoad = (event = {}) => {
+	if (props.lazy) {
 		const paginationParams = paginationStore.getPaginationParams(props.tableName);
 		const filters = filtersStore.getTableFilters(props.tableName);
 
+		// Use sort information from the event if provided (from DataTable sort event)
+		// Otherwise fall back to stored sorting state
+		const storedSorting = filtersStore.getTableSorting(props.tableName);
+
 		const lazyEvent = {
-			first: paginationParams.offset,
-			rows: paginationParams.limit,
-			page: paginationParams.page,
-			sortField: paginationParams.sortField,
-			sortOrder: paginationParams.sortOrder,
-			filters: filters,
+			first: event.first !== undefined ? event.first : paginationParams.offset,
+			rows: event.rows !== undefined ? event.rows : paginationParams.limit,
+			page: event.page !== undefined ? event.page : paginationParams.page,
+			sortField:
+				event.sortField !== undefined
+					? event.sortField
+					: storedSorting.field || paginationParams.sortField,
+			sortOrder:
+				event.sortOrder !== undefined
+					? event.sortOrder
+					: storedSorting.order || paginationParams.sortOrder,
+			filters: { ...filters, ...(event.filters || {}) },
 		};
 
+		// If this is a sort event, update the stored sorting state
+		if (event.sortField !== undefined || event.sortOrder !== undefined) {
+			filtersStore.updateTableSorting(
+				props.tableName,
+				lazyEvent.sortField,
+				lazyEvent.sortOrder,
+			);
+
+			// Reset to first page when sorting changes
+			currentPageState.value = { page: 0, first: 0 };
+			selectedPageJump.value = ""; // Reset page jump dropdown
+			paginationStore.clearTableCache(props.tableName);
+			paginationStore.resetToFirstPage(props.tableName);
+			lazyEvent.page = 0;
+			lazyEvent.first = 0;
+		}
+
 		console.log("Triggering lazy load with:", lazyEvent);
 		emit("lazy-load", lazyEvent);
-		props.onLazyLoad(lazyEvent);
 	}
 };
 
 // Trigger data refresh for non-lazy tables when filters change
 const triggerDataRefresh = () => {
 	const filters = filtersStore.getTableFilters(props.tableName);
+	const sorting = filtersStore.getTableSorting(props.tableName);
 	const refreshEvent = {
 		filters: filters,
+		sortField: sorting.field,
+		sortOrder: sorting.order,
 		page: currentPageState.value.page,
 		first: currentPageState.value.first,
 		rows: currentRows.value,
@@ -583,10 +612,15 @@ const handleFilterInput = (fieldName, value, 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 };
+	// Reset to first page when filters change (for both lazy and non-lazy)
+	currentPageState.value = { page: 0, first: 0 };
+
+	// For lazy tables, reset pagination and trigger lazy load
+	if (props.lazy) {
+		paginationStore.resetToFirstPage(props.tableName);
+		triggerLazyLoad();
+	} else {
+		// For non-lazy tables, also trigger a data refresh when individual filters change
 		triggerDataRefresh();
 	}
 };