chore: hide empty rows after feature selection

acdh-oeaw · Nov 11, 2024 · 06a1443 · 06a1443
1 parent 80b1e9c
commit 06a1443
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 14 deletions.
diff --git a/components/data-table/data-table.vue b/components/data-table/data-table.vue
@@ -8,11 +8,17 @@ import {
 	getFilteredRowModel,
 	getPaginationRowModel,
 	useVueTable,
+	type VisibilityState,
 } from "@tanstack/vue-table";
 
 import customFacetedUniqueValues from "@/utils/customFacetedUniqueValues";
 
-const emit = defineEmits(["table-ready", "columnFiltersChange", "globalFilterChange"]);
+const emit = defineEmits([
+	"table-ready",
+	"columnFiltersChange",
+	"globalFilterChange",
+	"columnVisibilityChange",
+]);
 
 interface Props {
 	items: Array<never>;
@@ -23,9 +29,21 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const { items, columns } = toRefs(props);
+const { items, columns, initialColumnVisibility } = toRefs(props);
 const columnFilters = ref<ColumnFiltersState>([]);
 const globalFilter = ref("");
+const columnVisibility = ref<VisibilityState>({
+	label: true,
+	person: false,
+	age: false,
+	sex: false,
+	type: true,
+	region: true,
+	settlement: true,
+	date: true,
+	respPerson: true,
+	...initialColumnVisibility.value,
+});
 const table = useVueTable({
 	get data() {
 		return items.value;
@@ -34,18 +52,8 @@ const table = useVueTable({
 		return columns.value;
 	},
 	initialState: {
-		columnVisibility: {
-			label: true,
-			person: false,
-			age: false,
-			sex: false,
-			type: true,
-			region: true,
-			settlement: true,
-			date: true,
-			respPerson: true,
-			...props.initialColumnVisibility,
-		},
+		columnVisibility: columnVisibility.value,
+		globalFilter: globalFilter.value,
 	},
 	state: {
 		get columnFilters() {
@@ -54,6 +62,9 @@ const table = useVueTable({
 		get globalFilter() {
 			return globalFilter.value;
 		},
+		get columnVisibility() {
+			return columnVisibility.value;
+		},
 	},
 	onColumnFiltersChange: (updaterOrValue) => {
 		columnFilters.value =
@@ -65,6 +76,13 @@ const table = useVueTable({
 			typeof updaterOrValue === "function" ? updaterOrValue(globalFilter.value) : updaterOrValue;
 		emit("globalFilterChange", globalFilter.value);
 	},
+	onColumnVisibilityChange: (updaterOrValue) => {
+		columnVisibility.value =
+			typeof updaterOrValue === "function"
+				? updaterOrValue(columnVisibility.value)
+				: updaterOrValue;
+		emit("columnVisibilityChange", table);
+	},
 	getCoreRowModel: getCoreRowModel(),
 	getPaginationRowModel: getPaginationRowModel(),
 	getFilteredRowModel: getFilteredRowModel(),

diff --git a/components/geojson-table-window-content.vue b/components/geojson-table-window-content.vue
@@ -47,12 +47,19 @@ const columns = computed(() => {
 										);
 									},
 									filterFn: (row, columnId, filterValue) => {
+										if (
+											!row.getValue(columnId) ||
+											(row.getValue(columnId) as Array<string>).length === 0
+										) {
+											return false;
+										}
 										if (Object.keys(filterValue).length === 0) return true;
 										const filter = Object.values(filterValue).some((val) =>
 											(row.getValue(columnId) as Array<string>).includes(String(val)),
 										);
 										return filter;
 									},
+									enableGlobalFilter: true,
 								};
 							}),
 					});
@@ -78,6 +85,7 @@ const columns = computed(() => {
 									accessorFn: (cell: FeatureType) =>
 										cell.properties[String(Object.keys(heading)[0])],
 									enableColumnFilter: false,
+									enableGlobalFilter: false,
 								};
 							}),
 					});
@@ -93,6 +101,11 @@ const columnVisibility = computed(() => {
 	);
 });
 
+function applyGlobalFilter(table: Table<FeatureType>) {
+	table.resetGlobalFilter(true);
+	table.setGlobalFilter(true);
+}
+
 function registerTable(table: Table<FeatureType>) {
 	tables.value.set(url, table);
 	const mw = findWindowByTypeAndParam("GeojsonMap", "url", url);
@@ -144,6 +157,7 @@ function registerTable(table: Table<FeatureType>) {
 			:initial-column-visibility="columnVisibility"
 			:items="fetchedData.get(url)?.features as Array<never>"
 			:min-header-depth="1"
+			@column-visibility-change="applyGlobalFilter"
 			@table-ready="registerTable"
 		></DataTable>
 		<div class="grid justify-items-end py-2">