Adapt detail page for events

acdh-oeaw · Apr 22, 2024 · 415dbbc · 415dbbc
1 parent e6486ed
commit 415dbbc
Showing 1 changed file with 17 additions and 12 deletions.
diff --git a/pages/detail/event/[id].vue b/pages/detail/event/[id].vue
@@ -22,16 +22,16 @@ const { data, isLoading } = useQuery({
 	queryFn: () => endpoint({ params: { id } }),
 });
 
-const maxFunctionCount = 3;
-const functionNames = computed(() => {
+const maxChipCount = 3;
+const chipNames = computed(() => {
 	if (isLoading.value) return [];
-	const fNames = [...new Set(data.value?.relations.function?.map((f) => f.to.name))];
-	if (fNames.length <= maxFunctionCount) return fNames;
-	const truncatedFunctionNames = [
-		...fNames.slice(0, maxFunctionCount),
-		t("DetailPage.andOthers", { count: fNames.length - maxFunctionCount }),
+	const fNames = [...new Set(data.value?.relations.place?.map((f) => f.to.name))];
+	if (fNames.length <= maxChipCount) return fNames;
+	const truncatedChipNames = [
+		...fNames.slice(0, maxChipCount),
+		t("DetailPage.andOthers", { count: fNames.length - maxChipCount }),
 	];
-	return truncatedFunctionNames;
+	return truncatedChipNames;
 });
 const flattenedRelations = computed(() => {
 	if (isLoading.value) return [];
@@ -56,21 +56,26 @@ const flattenedRelations = computed(() => {
 				{{ data?.first_name }} {{ data?.name }}
 			</h1>
 			<div
-				v-for="f in functionNames"
+				v-for="f in chipNames"
 				: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"
+				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>
 		</template>
 		<template #base>
 			<div class="col-span-2 my-2 border-t"></div>
-			<span>{{ t("Pages.searchviews.event.from") }}:</span>
+			<span>{{ t("Pages.searchviews.event.type") }}:</span>
+			<span>
+				{{ data?.type }}
+			</span>
+			<div class="col-span-2 my-2 border-t"></div>
+			<span>{{ t("Pages.searchviews.event.start_date") }}:</span>
 			<span>
 				{{ String(data?.start_date_written || data?.start_date || "").replace(/\<.*?\>/g, "") }}
 			</span>
 			<div class="col-span-2 my-2 border-t"></div>
-			<span>{{ t("Pages.searchviews.event.to") }}:</span>
+			<span>{{ t("Pages.searchviews.event.end_date") }}:</span>
 			<span>
 				{{ String(data?.end_date_written || data?.end_date || "").replace(/\<.*?\>/g, "") }}
 			</span>