From 7bf39c1a38bf415388f8a28dcdfaf39e2c08a6d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Wed, 3 Jul 2024 16:48:39 +0200
Subject: [PATCH 1/2] Display entity references in detail view

---
 components/reference-button.vue   | 23 ++++++++++++++---------
 pages/detail/event/[id].vue       | 22 ++++++++++++++++------
 pages/detail/function/[id].vue    | 22 ++++++++++++++++------
 pages/detail/institution/[id].vue | 22 ++++++++++++++++------
 pages/detail/person/[id].vue      | 23 +++++++++++++++++------
 pages/detail/place/[id].vue       | 22 ++++++++++++++++------
 pages/detail/salary/[id].vue      | 18 +++++++++++++-----
 7 files changed, 108 insertions(+), 44 deletions(-)

diff --git a/components/reference-button.vue b/components/reference-button.vue
index d2e6178..82b9446 100644
--- a/components/reference-button.vue
+++ b/components/reference-button.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/no-v-html -->
 <script setup lang="ts">
-import { shift, useFloating } from "@floating-ui/vue";
+import { offset, type Placement, shift, useFloating } from "@floating-ui/vue";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 // @ts-expect-error missing types for citation-js
 import Cite from "citation-js";
@@ -9,16 +9,21 @@ import { ArrowDownToLine, BookOpenText } from "lucide-vue-next";
 import type { Reference } from "@/types/resulttypes";
 
 const t = useTranslations();
-const props = defineProps<{
-	references: Array<Reference>;
-}>();
+const props = withDefaults(
+	defineProps<{
+		references: Array<Reference>;
+		popupPosition?: Placement;
+		popupOffset?: number;
+	}>(),
+	{ popupPosition: "top", popupOffset: 12 },
+);
 // Popover positioning using floatingUI
 const reference = ref(null);
 const floating = ref(null);
 const { floatingStyles } = useFloating(reference, floating, {
 	transform: false,
-	placement: "top",
-	middleware: [shift()],
+	placement: props.popupPosition,
+	middleware: [offset(props.popupOffset), shift({ padding: 8 })],
 });
 
 const citationConfig = {
@@ -42,9 +47,9 @@ function downloadBibTex() {
 	<Popover>
 		<PopoverButton
 			ref="reference"
-			class="group inline-flex scale-90 items-center rounded-md font-medium text-neutral-600 transition-transform hover:scale-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 dark:text-neutral-200"
+			class="group inline-flex size-full scale-90 items-center rounded-md font-medium text-neutral-600 transition-transform hover:scale-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-white/75 dark:text-neutral-200"
 		>
-			<BookOpenText class="mx-auto" />
+			<BookOpenText class="mx-auto size-full" />
 			<span class="sr-only">{{ t("References.references") }}</span>
 		</PopoverButton>
 		<Transition
@@ -57,7 +62,7 @@ function downloadBibTex() {
 		>
 			<PopoverPanel
 				ref="floating"
-				class="z-10 max-w-72 cursor-auto"
+				class="z-10 max-h-96 max-w-72 cursor-auto overflow-auto"
 				:style="{ ...floatingStyles }"
 				@click.stop.prevent
 			>
diff --git a/pages/detail/event/[id].vue b/pages/detail/event/[id].vue
index 4ee2e8c..f62f0b5 100644
--- a/pages/detail/event/[id].vue
+++ b/pages/detail/event/[id].vue
@@ -69,12 +69,22 @@ const flattenedRelations = computed(() => {
 			<h1 class="text-2xl text-neutral-800 xl:my-3 xl:text-4xl dark:text-inherit">
 				{{ data.entity.data?.name }}
 			</h1>
-			<div
-				v-for="f in chipNames"
-				:key="f"
-				class="mr-3 inline-block w-fit rounded-md bg-place-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-place-900 dark:text-neutral-100"
-			>
-				{{ f }}
+			<div class="flex justify-between">
+				<div>
+					<div
+						v-for="f in chipNames"
+						:key="f"
+						class="mr-3 inline-block w-fit rounded-md bg-place-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-place-900 dark:text-neutral-100"
+					>
+						{{ f }}
+					</div>
+				</div>
+				<ReferenceButton
+					v-if="data.entity.data?.references?.length > 0"
+					:references="data.entity.data?.references"
+					class="ml-auto inline-block size-7 w-fit"
+					popup-position="left"
+				></ReferenceButton>
 			</div>
 		</template>
 		<template #base>
diff --git a/pages/detail/function/[id].vue b/pages/detail/function/[id].vue
index 6be940f..6a36f17 100644
--- a/pages/detail/function/[id].vue
+++ b/pages/detail/function/[id].vue
@@ -70,12 +70,22 @@ const flattenedRelations = computed(() => {
 			<h1 class="text-2xl text-neutral-800 xl:my-3 xl:text-4xl dark:text-inherit">
 				{{ data.entity.data?.name }}
 			</h1>
-			<div
-				v-for="f in chipNames"
-				:key="f"
-				class="mr-3 inline-block w-fit rounded-md bg-institution-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-institution-900 dark:text-neutral-100"
-			>
-				{{ f }}
+			<div class="flex justify-between">
+				<div>
+					<div
+						v-for="f in chipNames"
+						:key="f"
+						class="mr-3 inline-block w-fit rounded-md bg-institution-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-institution-900 dark:text-neutral-100"
+					>
+						{{ f }}
+					</div>
+				</div>
+				<ReferenceButton
+					v-if="data.entity.data?.references?.length > 0"
+					:references="data.entity.data?.references"
+					class="ml-auto inline-block size-7 w-fit"
+					popup-position="left"
+				></ReferenceButton>
 			</div>
 		</template>
 		<template #base>
diff --git a/pages/detail/institution/[id].vue b/pages/detail/institution/[id].vue
index ca0e84e..f26532f 100644
--- a/pages/detail/institution/[id].vue
+++ b/pages/detail/institution/[id].vue
@@ -70,12 +70,22 @@ const flattenedRelations = computed(() => {
 			<h1 class="text-2xl text-neutral-800 xl:my-3 xl:text-4xl dark:text-inherit">
 				{{ data.entity.data?.name }}
 			</h1>
-			<div
-				v-for="f in chipNames"
-				:key="f"
-				class="mr-3 inline-block w-fit rounded-md bg-place-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-place-900 dark:text-neutral-100"
-			>
-				{{ f }}
+			<div class="flex justify-between">
+				<div>
+					<div
+						v-for="f in chipNames"
+						:key="f"
+						class="mr-3 inline-block w-fit rounded-md bg-place-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-place-900 dark:text-neutral-100"
+					>
+						{{ f }}
+					</div>
+				</div>
+				<ReferenceButton
+					v-if="data.entity.data?.references?.length > 0"
+					:references="data.entity.data?.references"
+					class="ml-auto inline-block size-7 w-fit"
+					popup-position="left"
+				></ReferenceButton>
 			</div>
 		</template>
 		<template #base>
diff --git a/pages/detail/person/[id].vue b/pages/detail/person/[id].vue
index e312ad5..f94c14b 100644
--- a/pages/detail/person/[id].vue
+++ b/pages/detail/person/[id].vue
@@ -2,6 +2,7 @@
 import { useQuery } from "@tanstack/vue-query";
 
 import DetailPage from "@/components/detail-page.vue";
+import ReferenceButton from "@/components/reference-button.vue";
 import Timeline from "@/components/timeline.vue";
 import Loader from "@/components/ui/loader.vue";
 import { loadAndGroupRelations } from "@/lib/group-relations.ts";
@@ -70,12 +71,22 @@ const flattenedRelations = computed(() => {
 			<h1 class="text-2xl text-neutral-800 xl:my-3 xl:text-4xl dark:text-inherit">
 				{{ data.entity.data?.first_name }} {{ data.entity.data?.name }}
 			</h1>
-			<div
-				v-for="f in functionNames"
-				:key="f"
-				class="mr-3 inline-block w-fit rounded-md bg-function-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-function-900 dark:text-neutral-100"
-			>
-				{{ f }}
+			<div class="flex justify-between">
+				<div>
+					<div
+						v-for="f in functionNames"
+						:key="f"
+						class="mr-3 inline-block w-fit rounded-md bg-function-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-function-900 dark:text-neutral-100"
+					>
+						{{ f }}
+					</div>
+				</div>
+				<ReferenceButton
+					v-if="data.entity.data?.references?.length > 0"
+					:references="data.entity.data?.references"
+					class="ml-auto inline-block size-7 w-fit"
+					popup-position="left"
+				></ReferenceButton>
 			</div>
 		</template>
 		<template #base>
diff --git a/pages/detail/place/[id].vue b/pages/detail/place/[id].vue
index 622e597..d55c3d5 100644
--- a/pages/detail/place/[id].vue
+++ b/pages/detail/place/[id].vue
@@ -71,12 +71,22 @@ const flattenedRelations = computed(() => {
 			<h1 class="text-2xl text-neutral-800 xl:my-3 xl:text-4xl dark:text-inherit">
 				{{ data.entity.data?.name }}
 			</h1>
-			<div
-				v-for="f in chipNames"
-				:key="f"
-				class="mr-3 inline-block w-fit rounded-md bg-institution-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-institution-900 dark:text-neutral-100"
-			>
-				{{ f }}
+			<div class="flex justify-between">
+				<div>
+					<div
+						v-for="f in chipNames"
+						:key="f"
+						class="mr-3 inline-block w-fit rounded-md bg-institution-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-institution-900 dark:text-neutral-100"
+					>
+						{{ f }}
+					</div>
+				</div>
+				<ReferenceButton
+					v-if="data.entity.data?.references?.length > 0"
+					:references="data.entity.data?.references"
+					class="ml-auto inline-block size-7 w-fit"
+					popup-position="left"
+				></ReferenceButton>
 			</div>
 		</template>
 		<template #base>
diff --git a/pages/detail/salary/[id].vue b/pages/detail/salary/[id].vue
index afa0cca..92233e6 100644
--- a/pages/detail/salary/[id].vue
+++ b/pages/detail/salary/[id].vue
@@ -59,11 +59,19 @@ const flattenedRelations = computed(() => {
 			<h1 class="text-2xl text-neutral-800 xl:my-3 xl:text-4xl dark:text-inherit">
 				{{ data.entity.data?.name }}
 			</h1>
-			<div
-				v-if="data.entity.data?.repetitionType"
-				class="mr-3 inline-block w-fit rounded-md bg-salary-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-salary-900 dark:text-neutral-100"
-			>
-				{{ data.entity.data?.repetitionType }}
+			<div class="flex justify-between">
+				<div
+					v-if="data.entity.data?.repetitionType"
+					class="mr-3 inline-block w-fit rounded-md bg-salary-200 px-3 py-1.5 text-xs font-semibold uppercase dark:bg-salary-900 dark:text-neutral-100"
+				>
+					{{ data.entity.data?.repetitionType }}
+				</div>
+				<ReferenceButton
+					v-if="data.entity.data?.references?.length > 0"
+					:references="data.entity.data?.references"
+					class="ml-auto inline-block size-7 w-fit"
+					popup-position="left"
+				></ReferenceButton>
 			</div>
 		</template>
 		<template #base>

From 708a27a37cb2b86f1e70ea8c9c1b567d7149f1e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Katharina=20W=C3=BCnsche?= <katharina_wunsche@yahoo.de>
Date: Thu, 4 Jul 2024 12:04:57 +0200
Subject: [PATCH 2/2] fix: fix types

---
 components/reference-button.vue   | 8 +++-----
 pages/detail/event/[id].vue       | 2 +-
 pages/detail/function/[id].vue    | 2 +-
 pages/detail/institution/[id].vue | 2 +-
 pages/detail/person/[id].vue      | 2 +-
 pages/detail/place/[id].vue       | 2 +-
 pages/detail/salary/[id].vue      | 2 +-
 7 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/components/reference-button.vue b/components/reference-button.vue
index 82b9446..50eeb67 100644
--- a/components/reference-button.vue
+++ b/components/reference-button.vue
@@ -15,7 +15,7 @@ const props = withDefaults(
 		popupPosition?: Placement;
 		popupOffset?: number;
 	}>(),
-	{ popupPosition: "top", popupOffset: 12 },
+	{ popupPosition: "top", popupOffset: 12, references: () => [] },
 );
 // Popover positioning using floatingUI
 const reference = ref(null);
@@ -62,13 +62,11 @@ function downloadBibTex() {
 		>
 			<PopoverPanel
 				ref="floating"
-				class="z-10 max-h-96 max-w-72 cursor-auto overflow-auto"
+				class="z-10 max-h-96 max-w-72 cursor-auto overflow-auto rounded-lg shadow-lg ring-1 ring-black/5"
 				:style="{ ...floatingStyles }"
 				@click.stop.prevent
 			>
-				<div
-					class="overflow-auto rounded-lg bg-neutral-50 p-4 text-sm shadow-lg ring-1 ring-black/5 dark:bg-neutral-800"
-				>
+				<div class="overflow-auto bg-neutral-50 p-4 text-sm dark:bg-neutral-800">
 					<div class="ml-auto flex w-fit">
 						<button :title="t('References.download-bibtex')" @click.stop.prevent="downloadBibTex()">
 							<ArrowDownToLine class="size-4 transition-transform hover:scale-125" />
diff --git a/pages/detail/event/[id].vue b/pages/detail/event/[id].vue
index f62f0b5..8abcb3d 100644
--- a/pages/detail/event/[id].vue
+++ b/pages/detail/event/[id].vue
@@ -80,7 +80,7 @@ const flattenedRelations = computed(() => {
 					</div>
 				</div>
 				<ReferenceButton
-					v-if="data.entity.data?.references?.length > 0"
+					v-if="Number(data.entity.data?.references?.length) > 0"
 					:references="data.entity.data?.references"
 					class="ml-auto inline-block size-7 w-fit"
 					popup-position="left"
diff --git a/pages/detail/function/[id].vue b/pages/detail/function/[id].vue
index 6a36f17..fddf6a3 100644
--- a/pages/detail/function/[id].vue
+++ b/pages/detail/function/[id].vue
@@ -81,7 +81,7 @@ const flattenedRelations = computed(() => {
 					</div>
 				</div>
 				<ReferenceButton
-					v-if="data.entity.data?.references?.length > 0"
+					v-if="Number(data.entity.data?.references?.length) > 0"
 					:references="data.entity.data?.references"
 					class="ml-auto inline-block size-7 w-fit"
 					popup-position="left"
diff --git a/pages/detail/institution/[id].vue b/pages/detail/institution/[id].vue
index f26532f..e46c972 100644
--- a/pages/detail/institution/[id].vue
+++ b/pages/detail/institution/[id].vue
@@ -81,7 +81,7 @@ const flattenedRelations = computed(() => {
 					</div>
 				</div>
 				<ReferenceButton
-					v-if="data.entity.data?.references?.length > 0"
+					v-if="Number(data.entity.data?.references?.length) > 0"
 					:references="data.entity.data?.references"
 					class="ml-auto inline-block size-7 w-fit"
 					popup-position="left"
diff --git a/pages/detail/person/[id].vue b/pages/detail/person/[id].vue
index f94c14b..3ed75e9 100644
--- a/pages/detail/person/[id].vue
+++ b/pages/detail/person/[id].vue
@@ -82,7 +82,7 @@ const flattenedRelations = computed(() => {
 					</div>
 				</div>
 				<ReferenceButton
-					v-if="data.entity.data?.references?.length > 0"
+					v-if="Number(data.entity.data?.references?.length) > 0"
 					:references="data.entity.data?.references"
 					class="ml-auto inline-block size-7 w-fit"
 					popup-position="left"
diff --git a/pages/detail/place/[id].vue b/pages/detail/place/[id].vue
index d55c3d5..fbc8a3a 100644
--- a/pages/detail/place/[id].vue
+++ b/pages/detail/place/[id].vue
@@ -82,7 +82,7 @@ const flattenedRelations = computed(() => {
 					</div>
 				</div>
 				<ReferenceButton
-					v-if="data.entity.data?.references?.length > 0"
+					v-if="Number(data.entity.data?.references?.length) > 0"
 					:references="data.entity.data?.references"
 					class="ml-auto inline-block size-7 w-fit"
 					popup-position="left"
diff --git a/pages/detail/salary/[id].vue b/pages/detail/salary/[id].vue
index 92233e6..1b1f30f 100644
--- a/pages/detail/salary/[id].vue
+++ b/pages/detail/salary/[id].vue
@@ -67,7 +67,7 @@ const flattenedRelations = computed(() => {
 					{{ data.entity.data?.repetitionType }}
 				</div>
 				<ReferenceButton
-					v-if="data.entity.data?.references?.length > 0"
+					v-if="Number(data.entity.data?.references?.length) > 0"
 					:references="data.entity.data?.references"
 					class="ml-auto inline-block size-7 w-fit"
 					popup-position="left"