fix: remove radix ui collapsible from entity sidebar and make filtere…

…dRelations reactive
acdh-oeaw · Sep 10, 2024 · d6b312a · d6b312a
1 parent fe2e43c
commit d6b312a
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 67 deletions.
diff --git a/components/grouped-relation-collapsible.vue b/components/grouped-relation-collapsible.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { groupByToMap } from "@acdh-oeaw/lib";
-import { ChevronDown, ChevronUp } from "lucide-vue-next";
 
 import { useFilterRelations } from "@/composables/use-filter-relations";
 
@@ -14,10 +13,22 @@ const props = defineProps<{
 	systemClass?: string;
 }>();
 
-const filteredRelations = useFilterRelations(props.relations, {
-	relationType: props.relationType,
-	systemClass: props.systemClass,
-});
+type Relations = Array<NonNullable<EntityFeature["relations"]>[0]>;
+
+const filteredRelations = ref<Relations>([]);
+
+watch(
+	() => {
+		return props.relations;
+	},
+	(relations) => {
+		filteredRelations.value = useFilterRelations(relations, {
+			relationType: props.relationType,
+			systemClass: props.systemClass,
+		});
+	},
+	{ immediate: true },
+);
 
 computed(() => {
 	return props.relations?.reduce(
@@ -48,7 +59,7 @@ computed(() => {
 });
 
 const groupedByType = computed(() => {
-	return groupByToMap(filteredRelations, (rel): string | null | undefined => {
+	return groupByToMap(filteredRelations.value, (rel): string | null | undefined => {
 		return rel.type;
 	});
 });
@@ -60,45 +71,31 @@ const relationsWithoutType = computed(() => {
 
 const isOpen = ref(false);
 
-if (filteredRelations.length && filteredRelations.length === 1) isOpen.value = true;
+if (filteredRelations.value.length && filteredRelations.value.length === 1) isOpen.value = true;
 </script>
 
 <template>
 	<div v-if="filteredRelations?.length" class="rounded-md border px-4 py-3 text-sm">
-		<Collapsible v-model:open="isOpen" class="space-y-2">
-			<div class="flex items-center justify-between space-x-4">
-				<h4 class="text-sm font-semibold">
-					{{ title }}
-					{{
-						filteredRelations?.length && filteredRelations.length > 1
-							? `(${filteredRelations.length})`
-							: ""
-					}}
-				</h4>
-				<CollapsibleTrigger
-					v-if="filteredRelations?.length && filteredRelations.length > 1"
-					as-child
-				>
-					<Button variant="ghost" size="sm" class="w-9 p-0">
-						<ChevronUp v-if="isOpen" class="size-4" />
-						<ChevronDown v-else class="size-4" />
-						<span class="sr-only">Toggle</span>
-					</Button>
-				</CollapsibleTrigger>
-			</div>
-			<CollapsibleContent>
-				<template v-if="relationsWithoutType && relationsWithoutType.length">
-					<RelationListEntry v-for="rel in relationsWithoutType" :key="rel.label" :relation="rel" />
-				</template>
-				<template v-for="[type, rels] in groupedByType" :key="type">
-					<RelationCollapsible
-						v-if="type !== null"
-						class="mb-8"
-						:title="type ?? ''"
-						:relations="rels"
-					/>
-				</template>
-			</CollapsibleContent>
-		</Collapsible>
+		<div class="flex items-center justify-between space-x-4">
+			<h4 class="text-sm font-semibold">
+				{{ title }}
+				{{
+					filteredRelations?.length && filteredRelations.length > 1
+						? `(${filteredRelations.length})`
+						: ""
+				}}
+			</h4>
+		</div>
+		<template v-if="relationsWithoutType && relationsWithoutType.length">
+			<RelationListEntry v-for="rel in relationsWithoutType" :key="rel.label" :relation="rel" />
+		</template>
+		<template v-for="[type, rels] in groupedByType" :key="type">
+			<RelationCollapsible
+				v-if="type !== null"
+				class="mb-8"
+				:title="type ?? ''"
+				:relations="rels"
+			/>
+		</template>
 	</div>
 </template>
diff --git a/components/relation-collapsible.vue b/components/relation-collapsible.vue
@@ -1,32 +1,18 @@
 <script lang="ts" setup>
-import { ChevronDown, ChevronUp } from "lucide-vue-next";
-
 defineProps<{ title: string; relations: Array<NonNullable<EntityFeature["relations"]>[0]> }>();
-
-const isOpen = ref(false);
 </script>
 
 <template v-if="relations?.length">
-	<Collapsible v-model:open="isOpen" class="space-y-2">
-		<div class="space-x-4 px-4"></div>
-		<div class="flex items-center justify-between">
-			<h4 class="text-sm font-semibold">
-				{{ title }} {{ relations.length > 1 ? `(${relations.length})` : "" }}
-			</h4>
-			<CollapsibleTrigger v-if="relations.length > 1" as-child>
-				<Button variant="ghost" size="sm" class="w-9 p-0">
-					<ChevronUp v-if="isOpen" class="size-4" />
-					<ChevronDown v-else class="size-4" />
-					<span class="sr-only">Toggle</span>
-				</Button>
-			</CollapsibleTrigger>
-		</div>
+	<div class="space-x-4 px-4"></div>
+	<div class="flex items-center justify-between">
+		<h4 class="text-sm font-semibold">
+			{{ title }} {{ relations.length > 1 ? `(${relations.length})` : "" }}
+		</h4>
+	</div>
+
+	<RelationListEntry v-if="relations[0]" :relation="relations[0]" />
 
-		<RelationListEntry v-if="relations[0]" :relation="relations[0]" />
-		<CollapsibleContent v-if="relations.length > 1" class="space-y-3">
-			<template v-for="relation in relations.slice(1)" :key="getUnprefixedId(relation.relationTo)">
-				<RelationListEntry :relation="relation" />
-			</template>
-		</CollapsibleContent>
-	</Collapsible>
+	<template v-for="relation in relations.slice(1)" :key="getUnprefixedId(relation.relationTo)">
+		<RelationListEntry :relation="relation" />
+	</template>
 </template>