fix filtering and sorting

frontend/src/components/common/DataTable.vue

@@ -223,7 +223,7 @@
 		:lazy="lazy"
 		:totalRecords="lazy ? totalRecords : getFilteredDataLength"
 		@page="handlePage"
-		@sort="triggerLazyLoad"
+		@sort="handleSort"
 		@filter="handleFilter"
 		sortMode="single"
 		removableSort
@@ -823,6 +823,52 @@ const handlePage = (event) => {
 };
 
 // Handle sorting events
+const handleSort = (event) => {
+	console.log("Sort event received:", {
+		sortField: event.sortField,
+		sortOrder: event.sortOrder,
+		type: typeof event.sortOrder,
+		event: event,
+	});
+
+	try {
+		// Handle removable sort - when sortOrder is null/undefined, clear sorting
+		if (event.sortOrder === null || event.sortOrder === undefined) {
+			console.log("Clearing sort due to removable sort");
+			filtersStore.updateTableSorting(props.tableName, null, null);
+		} else {
+			// Update the stored sorting state immediately
+			filtersStore.updateTableSorting(props.tableName, event.sortField, event.sortOrder);
+		}
+
+		// Reset to first page when sorting changes
+		currentPageState.value = { page: 0, first: 0 };
+		selectedPageJump.value = ""; // Reset page jump dropdown
+
+		if (props.lazy) {
+			paginationStore.clearTableCache(props.tableName);
+			paginationStore.resetToFirstPage(props.tableName);
+
+			// Trigger lazy load with sort information (or no sort if cleared)
+			triggerLazyLoad({
+				sortField: event.sortField || null,
+				sortOrder: event.sortOrder || null,
+				page: 0,
+				first: 0,
+			});
+		} else {
+			// For non-lazy tables, trigger data refresh
+			triggerDataRefresh();
+		}
+
+		emit("sort-change", event);
+	} catch (error) {
+		console.error("Error in handleSort:", error);
+		console.error("Event that caused error:", event);
+		console.error("Stack trace:", error.stack);
+	}
+};
+
 // Handle filter events
 const handleFilter = (event) => {
 	console.log("Filter event:", event);
@@ -844,9 +890,9 @@ const triggerLazyLoad = (event = {}) => {
 		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);
+		// Get current sorting state from store
+		const primarySortField = filtersStore.getPrimarySortField(props.tableName);
+		const primarySortOrder = filtersStore.getPrimarySortOrder(props.tableName);
 
 		const lazyEvent = {
 			first: event.first !== undefined ? event.first : paginationParams.offset,
@@ -855,31 +901,14 @@ const triggerLazyLoad = (event = {}) => {
 			sortField:
 				event.sortField !== undefined
 					? event.sortField
-					: storedSorting.field || paginationParams.sortField,
+					: primarySortField || paginationParams.sortField,
 			sortOrder:
 				event.sortOrder !== undefined
 					? event.sortOrder
-					: storedSorting.order || paginationParams.sortOrder,
+					: primarySortOrder || 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);
 	}
@@ -888,11 +917,12 @@ const triggerLazyLoad = (event = {}) => {
 // 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 primarySortField = filtersStore.getPrimarySortField(props.tableName);
+	const primarySortOrder = filtersStore.getPrimarySortOrder(props.tableName);
 	const refreshEvent = {
 		filters: filters,
-		sortField: sorting.field,
-		sortOrder: sorting.order,
+		sortField: primarySortField,
+		sortOrder: primarySortOrder,
 		page: currentPageState.value.page,
 		first: currentPageState.value.first,
 		rows: currentRows.value,