added button which links to detail page of hierarchy node, resolves #90

acdh-oeaw · Mar 20, 2024 · 4a6e986 · 4a6e986
1 parent 4fd0eb0
commit 4a6e986
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/components/content/header-wrapper.vue b/components/content/header-wrapper.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="mx-auto w-fit">
 		<div
-			class="mx-2 mb-8 flex w-fit flex-col justify-center truncate hyphens-auto border-b-4 pb-4 text-center text-3xl text-primary-600 sm:text-5xl lg:flex-row"
+			class="mx-2 mb-8 flex w-fit flex-col justify-center hyphens-auto border-b-4 pb-4 text-center text-3xl text-primary-600 sm:text-5xl lg:flex-row"
 		>
 			<slot />
 		</div>

diff --git a/locales/de.json b/locales/de.json
@@ -24,7 +24,8 @@
 				"add functions": "Institutionen + Funktionen",
 				"add functions and persons": "Institutionen + Funktionen + Personen",
 				"show institution hierarchy": "Institutionshierarchie",
-				"show amt and persons": "Amt und Personen"
+				"show amt and persons": "Amt und Personen",
+				"goto": "Zur Detail Seite"
 			},
 			"legend": {
 				"legend": "Legende",

diff --git a/locales/en.json b/locales/en.json
@@ -24,7 +24,8 @@
 				"add functions": "Institutions and functions",
 				"add functions and persons": "Institutions, functions and persons",
 				"show institution hierarchy": "Institutions hierarchy",
-				"show amt and persons": "Amt and persons"
+				"show amt and persons": "Amt and persons",
+				"goto": "Go to detail page"
 			},
 			"legend": {
 				"legend": "Legend",

diff --git a/pages/hierarchy.vue b/pages/hierarchy.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useQuery } from "@tanstack/vue-query";
-import { Loader2 } from "lucide-vue-next";
+import { ArrowRight, Loader2 } from "lucide-vue-next";
 
 import HierarchyWrapper from "@/components/hierarchy-wrapper.vue";
 import { getTreeData } from "@/lib/get-tree-data";
@@ -9,6 +9,7 @@ const router = useRouter();
 const route = useRoute();
 
 const t = useTranslations();
+const localePath = useLocalePath();
 
 const comQuery = computed({
 	get() {
@@ -36,7 +37,7 @@ const comQuery = computed({
 });
 
 const showItems = computed(() => {
-	switch (route.query.model) {
+	switch (comQuery.value?.group) {
 		case "Institution": {
 			const instArgs = [
 				{
@@ -134,17 +135,27 @@ useHead({
 		<div class="container mx-auto flex flex-wrap justify-between">
 			<div class="flex flex-wrap">
 				<Autocomplete v-model="comQuery" />
-				<ClientOnly>
-					<GenericListbox v-model="show" class="m-2 w-full min-w-56 md:w-auto" :items="showItems" />
-					<GenericListbox
-						v-model="direction"
-						class="m-2 w-full min-w-48 md:w-auto"
-						:items="[
-							{ value: 'down', label: t('pages.hierarchy.options.down') },
-							{ value: 'up', label: t('pages.hierarchy.options.up') },
-						]"
-					/>
-				</ClientOnly>
+				<GenericListbox v-model="show" class="m-2 w-full min-w-56 md:w-auto" :items="showItems" />
+				<GenericListbox
+					v-if="comQuery?.group === 'Institution'"
+					v-model="direction"
+					class="m-2 w-full min-w-48 md:w-auto"
+					:items="[
+						{ value: 'down', label: t('pages.hierarchy.options.down') },
+						{ value: 'up', label: t('pages.hierarchy.options.up') },
+					]"
+				/>
+				<NuxtLink
+					v-if="comQuery && ['Person', 'Institution'].includes(comQuery.group)"
+					:href="localePath(`/detail/${comQuery.group.toLowerCase()}s/${comQuery.pk}`)"
+				>
+					<button
+						class="m-2 flex min-h-11 items-center gap-1 rounded border bg-white px-2 shadow-md transition hover:bg-slate-200 active:bg-slate-300"
+					>
+						<span>{{ t("pages.hierarchy.options.goto") }}</span>
+						<ArrowRight class="h-5 w-5 shrink-0" />
+					</button>
+				</NuxtLink>
 			</div>
 			<div class="m-2 min-h-11 w-full self-end rounded border bg-white p-2 shadow-lg md:w-fit">
 				<div class="flex flex-wrap items-center justify-between gap-x-4 gap-y-2">