Merge branch 'feat/show-entity-references' into dev

acdh-oeaw · Jul 4, 2024 · fb29b9f · fb29b9f
2 parents 2efb23a + 708a27a
commit fb29b9f
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 47 deletions.
diff --git 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, references: () => [] },
+);
 // 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,13 +62,11 @@ 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 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
@@ -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="Number(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
@@ -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="Number(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
@@ -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="Number(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
@@ -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="Number(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
@@ -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="Number(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
@@ -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="Number(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>