fix: link to detail views and replace checkboxes with dots

acdh-oeaw · May 15, 2024 · 08a5f3c · 08a5f3c
1 parent 8616aba
commit 08a5f3c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/components/data-network-view.vue b/components/data-network-view.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { z } from "zod";
 
-import type { SearchFormData } from "@/components/search-form.vue";
+import type { SearchFormData as CategoryFormData } from "@/components/network-legend-panel.vue";
+import type { SearchFormData } from "@/components/network-search-form.vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -17,12 +18,12 @@ const searchFilters = computed(() => {
 
 type SearchFilters = z.infer<typeof searchFiltersSchema>;
 
-function setSearchFilters(query: Partial<SearchFilters>) {
-	void router.push({ query });
+function onChangeSearchFilters(values: SearchFormData) {
+	void router.push({ query: { ...searchFilters.value, ...values } });
 }
 
-function onChangeSearchFilters(values: SearchFormData) {
-	setSearchFilters(values);
+function onChangeCategory(values: CategoryFormData) {
+	void router.push({ query: { ...searchFilters.value, ...values } });
 }
 
 const { data, error, isPending, isPlaceholderData, suspense } = useGetNetworkData(
@@ -39,6 +40,7 @@ const { data, error, isPending, isPlaceholderData, suspense } = useGetNetworkDat
 				"external_reference",
 				"administrative_unit",
 				"edition",
+				"type_tools",
 			],
 		};
 	}),
@@ -67,7 +69,6 @@ const systemClasses = computed(() => {
 
 	return systemClasses;
 });
-
 </script>
 
 <template>
@@ -82,7 +83,7 @@ const systemClasses = computed(() => {
 			<NetworkLegendPanel
 				class="absolute bottom-0 right-0 z-10 m-3"
 				:system-classes="systemClasses"
-				@submit="onChangeSearchFilters"
+				@submit="onChangeCategory"
 			></NetworkLegendPanel>
 			<DataGraph :network-data="entities" :search-node="searchFilters.search" />
 			<Centered v-if="isLoading" class="pointer-events-none">

diff --git a/components/entity-data-graph.vue b/components/entity-data-graph.vue
@@ -92,5 +92,5 @@ function getNodeColor(nodeClass: string) {
 			</span>
 		</Card>
 	</div>
-	<Network v-if="graph !== undefined" :graph="graph"></Network>
+	<Network v-if="graph !== undefined" :graph="graph" search-node=""></Network>
 </template>
diff --git a/components/network-legend-panel.vue b/components/network-legend-panel.vue
@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import { DotIcon } from "lucide-vue-next";
+
 import { colors } from "../project.config.json";
 
 export interface SearchFormData {
-	category: string;
+	category: string; // TODO: stricter typings
 }
 
 const props = defineProps<{
@@ -15,7 +17,7 @@ const emit = defineEmits<{
 
 function onSubmit(element: string) {
 	emit("submit", {
-		category: element,
+		category: element, //Array, checkbox-group html + how do i get teh values in the submit event handler
 	});
 }
 
@@ -56,14 +58,18 @@ const systemClassColors = colors.entityColors;
 			:style="`color: ${systemClassColors[el] ? systemClassColors[el] : '#666'}`"
 		>
 			<div class="grid grid-cols-[auto_1fr] gap-2">
-				<input
+				<!-- <input
 					:id="el"
 					type="checkbox"
 					name="systemClassCheckbox"
 					:style="`accent-color: ${systemClassColors[el] ? systemClassColors[el] : '#666'}`"
 					checked
-					@submit="onSubmit(el)"
-				/>
+					@change="onSubmit(el)"
+				/> -->
+				<span
+					class="m-1.5 size-2 rounded-full"
+					:style="`background-color: ${systemClassColors[el] ? systemClassColors[el] : '#666'}`"
+				></span>
 				<span v-if="labels[el]">{{ labels[el] }}</span>
 				<span v-else> {{ el }}</span>
 			</div>

diff --git a/components/network.client.vue b/components/network.client.vue
@@ -97,6 +97,7 @@ watch(
 			skipIndexation: true,
 		});
 	},
+	{ immediate: true },
 );
 
 onMounted(async () => {