From a2793f63092547c7f4a8da7c944a36659cb4202f Mon Sep 17 00:00:00 2001
From: Robin Kaggl <48437174+kaggl@users.noreply.github.com>
Date: Mon, 18 Mar 2024 16:02:28 +0100
Subject: [PATCH] small optimizations, added titles (#85)

resolves #84

---------

Co-authored-by: Robin Kaggl <robin.kaggl@oeaw.ac.at>
---
 components/autocomplete.vue        |  3 +++
 components/search-table.vue        |  6 ------
 pages/detail/courts/[id].vue       | 12 ++++++++++-
 pages/detail/events/[id].vue       | 12 +++++++++++
 pages/detail/institutions/[id].vue | 11 +++++++++-
 pages/detail/persons/[id].vue      | 11 +++++++++-
 pages/detail/places/[id].vue       | 10 ++++++++++
 pages/documentation/[...slug].vue  | 32 ++++++++++++++++++------------
 pages/hierarchy.vue                |  3 +++
 pages/index.vue                    |  4 +++-
 pages/search.vue                   |  4 ++++
 pages/search/courts.vue            |  6 ++++++
 pages/search/events.vue            |  6 ++++++
 pages/search/institutions.vue      | 10 ++++++++++
 pages/search/persons.vue           |  6 ++++++
 pages/search/places.vue            |  6 ++++++
 pages/search/references.vue        |  6 ++++++
 pages/search/relations.vue         |  6 ++++++
 18 files changed, 131 insertions(+), 23 deletions(-)

diff --git a/components/autocomplete.vue b/components/autocomplete.vue
index dc42857..e6600b1 100644
--- a/components/autocomplete.vue
+++ b/components/autocomplete.vue
@@ -12,6 +12,8 @@ import type { ModelRef } from "vue";
 
 import type { HierarchyNode } from "@/lib/types";
 
+const t = useTranslations();
+
 const query = ref(
 	useQuery({
 		queryKey: ["autocomplete"],
@@ -63,6 +65,7 @@ defineEmits(["change", "input"]);
 			/>
 			<ComboboxButton class="inset-y-0 right-0 flex items-center px-3 text-gray-500">
 				<Search class="h-5 w-5" />
+				<span class="sr-only">{{ t("ui.search-placeholder") }}</span>
 			</ComboboxButton>
 		</div>
 		<MenuTransition>
diff --git a/components/search-table.vue b/components/search-table.vue
index f5226fe..020c253 100644
--- a/components/search-table.vue
+++ b/components/search-table.vue
@@ -144,12 +144,6 @@ const getDetailLink = (id: string, entity?: string) => {
 				</button>
 			</div>
 			<slot />
-			<!-- <DownloadResultsWrapper
-				v-if="data && data.page"
-				:all="data.found"
-				:collection="collectionName"
-				:query="comQuery"
-			/> -->
 			<div class="flex w-full justify-end">
 				<DownloadMenu
 					v-if="data && data.page"
diff --git a/pages/detail/courts/[id].vue b/pages/detail/courts/[id].vue
index 2d582aa..4f95c00 100644
--- a/pages/detail/courts/[id].vue
+++ b/pages/detail/courts/[id].vue
@@ -39,6 +39,16 @@ const relCols = ["relation_type", "target.name", "start_date", "end_date"];
 definePageMeta({
 	title: "pages.searchviews.courts.title",
 });
+
+const title = computed(() => {
+	if (data.value.entity.data?.name)
+		return `${data.value.entity.data.name} - ${t("pages.searchviews.courts.sing")}`;
+	return t("pages.searchviews.courts.sing");
+});
+
+useHead({
+	title,
+});
 </script>
 
 <template>
@@ -65,7 +75,7 @@ definePageMeta({
 					<div class="flex items-center gap-2">
 						<Indicator class="w-24" :status="data.details.data?.ampel" />
 						<HierarchyLinkButton
-							:id="data.entity.data?.object_id"
+							:id="String(data.entity.data?.object_id)"
 							model="Institution"
 							:label="data.entity.data?.name"
 						/>
diff --git a/pages/detail/events/[id].vue b/pages/detail/events/[id].vue
index 538c2a8..b864cad 100644
--- a/pages/detail/events/[id].vue
+++ b/pages/detail/events/[id].vue
@@ -5,6 +5,8 @@ import { useRoute } from "vue-router";
 import type { Event } from "@/types/schema";
 import { definePageMeta, ref } from "#imports";
 
+const t = useTranslations();
+
 const route = useRoute();
 const id = String(route.params.id);
 
@@ -18,6 +20,16 @@ const data = ref({
 definePageMeta({
 	title: "pages.searchviews.events.title",
 });
+
+const title = computed(() => {
+	if (data.value.entity.data?.name)
+		return `${data.value.entity.data.name} - ${t("pages.searchviews.events.sing")}`;
+	return t("pages.searchviews.events.sing");
+});
+
+useHead({
+	title,
+});
 </script>
 
 <template>
diff --git a/pages/detail/institutions/[id].vue b/pages/detail/institutions/[id].vue
index 2daae68..1ea0adf 100644
--- a/pages/detail/institutions/[id].vue
+++ b/pages/detail/institutions/[id].vue
@@ -36,6 +36,15 @@ const loading = computed(() => ({
 definePageMeta({
 	title: "pages.searchviews.institutions.title",
 });
+
+const title = computed(() => {
+	if (data.value.entity.data?.name) return `${data.value.entity.data.name} - Institution`;
+	return "Institution";
+});
+
+useHead({
+	title,
+});
 </script>
 
 <template>
@@ -62,7 +71,7 @@ definePageMeta({
 					<div class="flex items-center gap-2">
 						<Indicator class="w-24" :status="data.entity.data?.ampel" />
 						<HierarchyLinkButton
-							:id="data.entity.data?.object_id"
+							:id="String(data.entity.data?.object_id)"
 							model="Institution"
 							:label="data.entity.data?.name"
 						/>
diff --git a/pages/detail/persons/[id].vue b/pages/detail/persons/[id].vue
index f7a1a36..659f781 100644
--- a/pages/detail/persons/[id].vue
+++ b/pages/detail/persons/[id].vue
@@ -65,6 +65,15 @@ const relCols = ["relation_type", "target.name", "start_date", "end_date"];
 definePageMeta({
 	title: "pages.searchviews.people.title",
 });
+
+const title = computed(() => {
+	if (data.value.entity.data?.name) return `${data.value.entity.data.fullname} - Person`;
+	return "Person";
+});
+
+useHead({
+	title,
+});
 </script>
 
 <template>
@@ -92,7 +101,7 @@ definePageMeta({
 					<div class="flex items-center gap-2">
 						<Indicator class="w-24" :status="data.entity.data?.ampel" />
 						<HierarchyLinkButton
-							:id="data.entity.data?.object_id"
+							:id="String(data.entity.data?.object_id)"
 							model="Person"
 							:label="data.entity.data?.fullname"
 						/>
diff --git a/pages/detail/places/[id].vue b/pages/detail/places/[id].vue
index 1140bbf..e445755 100644
--- a/pages/detail/places/[id].vue
+++ b/pages/detail/places/[id].vue
@@ -64,6 +64,16 @@ const relCols = ["relation_type", "target.name", "start_date", "end_date"];
 definePageMeta({
 	title: "pages.searchviews.places.title",
 });
+
+const title = computed(() => {
+	if (data.value.entity.data?.name)
+		return `${data.value.entity.data.name} - ${t("pages.searchviews.places.sing")}`;
+	return t("pages.searchviews.places.sing");
+});
+
+useHead({
+	title,
+});
 </script>
 
 <template>
diff --git a/pages/documentation/[...slug].vue b/pages/documentation/[...slug].vue
index e54e478..8d64fd7 100644
--- a/pages/documentation/[...slug].vue
+++ b/pages/documentation/[...slug].vue
@@ -15,6 +15,10 @@ const currentDoc = computed(() => {
 		return route.params.slug[0];
 	}
 });
+
+useHead({
+	title: t("pages.documentation.title"),
+});
 console.log(route.params.slug, locale.value);
 </script>
 
@@ -23,22 +27,24 @@ console.log(route.params.slug, locale.value);
 		<nav class="lg:justify-self-end" data-testid="docNav">
 			<ContentNavigation v-slot="{ navigation }" :query="{ where: [{ _locale: locale }] }">
 				<!-- :where="{ _locale: locale }" -->
-				<ul class="m-4 rounded bg-gray-200 p-4 text-lg shadow">
+				<div class="m-4 rounded bg-gray-200 p-4 text-lg shadow">
 					<h2 class="mb-2 text-xl font-black">
 						{{ t("pages.documentation.contents") }}
 					</h2>
-					<li v-for="link of navigation" :key="link._path">
-						<NuxtLink
-							:to="`/${locale}/documentation${link._path}`"
-							class="flex w-full items-center gap-1 rounded px-2 transition hover:bg-gray-300 active:bg-gray-400"
-						>
-							<ChevronRight class="h-4 w-4" />
-							<span>
-								{{ link.title }}
-							</span>
-						</NuxtLink>
-					</li>
-				</ul>
+					<ul>
+						<li v-for="link of navigation" :key="link._path">
+							<NuxtLink
+								:to="`/${locale}/documentation${link._path}`"
+								class="flex w-full items-center gap-1 rounded px-2 transition hover:bg-gray-300 active:bg-gray-400"
+							>
+								<ChevronRight class="h-4 w-4" />
+								<span>
+									{{ link.title }}
+								</span>
+							</NuxtLink>
+						</li>
+					</ul>
+				</div>
 			</ContentNavigation>
 		</nav>
 		<MainContent class="w-full px-6 py-4">
diff --git a/pages/hierarchy.vue b/pages/hierarchy.vue
index 3b5a04c..ef30995 100644
--- a/pages/hierarchy.vue
+++ b/pages/hierarchy.vue
@@ -124,6 +124,9 @@ const query = ref(
 definePageMeta({
 	title: "pages.hierarchy.title",
 });
+useHead({
+	title: t("pages.hierarchy.label"),
+});
 </script>
 
 <template>
diff --git a/pages/index.vue b/pages/index.vue
index e7a84bf..9bf9631 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,9 +11,11 @@ definePageMeta({
 		<div class="flex flex-col gap-16 md:gap-32">
 			<div>
 				<div class="h-2 w-full bg-primary-900" />
-				<img
+				<NuxtImg
+					:placeholder="[452, 128, 75]"
 					src="/assets/images/background-court-ship.jpeg"
 					alt=""
+					format="webp"
 					class="min-h-[20rem] w-full object-cover"
 				/>
 				<div class="h-2 w-full bg-primary-800" />
diff --git a/pages/search.vue b/pages/search.vue
index 104b944..6621995 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -127,6 +127,10 @@ watch(
 definePageMeta({
 	title: "pages.search.title",
 });
+
+useHead({
+	title: t("pages.search.title"),
+});
 </script>
 
 <template>
diff --git a/pages/search/courts.vue b/pages/search/courts.vue
index 7c31dad..a799c74 100644
--- a/pages/search/courts.vue
+++ b/pages/search/courts.vue
@@ -6,6 +6,8 @@ import SearchTable from "@/components/search-table.vue";
 import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
+const t = useTranslations();
+
 const collectionName = "viecpro_courts";
 
 const queryBy = ["name", "main_owner.name", "kategorie"];
@@ -30,6 +32,10 @@ const sortable = computed(
 definePageMeta({
 	title: "pages.searchviews.courts.title",
 });
+
+useHead({
+	title: `${t("pages.searchviews.courts.title")} ${t("pages.search.title")}`,
+});
 </script>
 
 <template>
diff --git a/pages/search/events.vue b/pages/search/events.vue
index 9fd5774..a57e3e6 100644
--- a/pages/search/events.vue
+++ b/pages/search/events.vue
@@ -6,6 +6,8 @@ import SearchTable from "@/components/search-table.vue";
 import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
+const t = useTranslations();
+
 const collectionName = "viecpro_events";
 
 const queryBy = ["name", "alternativenames"];
@@ -30,6 +32,10 @@ const sortable = computed(
 definePageMeta({
 	title: "pages.searchviews.events.title",
 });
+
+useHead({
+	title: `${t("pages.searchviews.events.title")} ${t("pages.search.title")}`,
+});
 </script>
 
 <template>
diff --git a/pages/search/institutions.vue b/pages/search/institutions.vue
index 4fac0d7..bf21d8a 100644
--- a/pages/search/institutions.vue
+++ b/pages/search/institutions.vue
@@ -6,6 +6,8 @@ import SearchTable from "@/components/search-table.vue";
 import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
+const t = useTranslations();
+
 const collectionName = "viecpro_institutions";
 const queryBy = ["name", "alternativenames"];
 const koi = ["name", "start", "end", "label:Auflösung", "label:Kategorie", "ampel"];
@@ -28,6 +30,14 @@ const sortable = computed(
 definePageMeta({
 	title: "pages.searchviews.institutions.title",
 });
+
+useHead({
+	title: `${t("pages.searchviews.institutions.title")} ${t("pages.search.title")}`,
+});
+
+useHead({
+	title: `${t("pages.searchviews.institutions.title")} ${t("pages.search.title")}`,
+});
 </script>
 
 <template>
diff --git a/pages/search/persons.vue b/pages/search/persons.vue
index 336d652..d04973c 100644
--- a/pages/search/persons.vue
+++ b/pages/search/persons.vue
@@ -6,6 +6,8 @@ import SearchTable from "@/components/search-table.vue";
 import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
+const t = useTranslations();
+
 const collectionName = "viecpro_persons";
 const queryBy = ["name", "first_name", "alternativenames", "functions", "institutions"];
 
@@ -29,6 +31,10 @@ const sortable = computed(
 definePageMeta({
 	title: "pages.searchviews.people.title",
 });
+
+useHead({
+	title: `${t("pages.searchviews.people.title")} ${t("pages.search.title")}`,
+});
 </script>
 
 <template>
diff --git a/pages/search/places.vue b/pages/search/places.vue
index a9c61c3..d942815 100644
--- a/pages/search/places.vue
+++ b/pages/search/places.vue
@@ -6,6 +6,8 @@ import SearchTable from "@/components/search-table.vue";
 import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
+const t = useTranslations();
+
 const collectionName = "viecpro_places";
 const queryBy = ["name", "alternativenames"];
 const koi = ["name", "kind", "ampel"];
@@ -28,6 +30,10 @@ const sortable = computed(
 definePageMeta({
 	title: "pages.searchviews.places.title",
 });
+
+useHead({
+	title: `${t("pages.searchviews.places.title")} ${t("pages.search.title")}`,
+});
 </script>
 
 <template>
diff --git a/pages/search/references.vue b/pages/search/references.vue
index 6b17e33..6b46319 100644
--- a/pages/search/references.vue
+++ b/pages/search/references.vue
@@ -6,6 +6,8 @@ import SearchTable from "@/components/search-table.vue";
 import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
+const t = useTranslations();
+
 const collectionName = "viecpro_references";
 const queryBy = "folio";
 const koi = ["id", "folio", "shortTitle", "related_doc.name"];
@@ -28,6 +30,10 @@ const sortable = computed(
 definePageMeta({
 	title: "pages.searchviews.courts.title",
 });
+
+useHead({
+	title: `${t("pages.searchviews.references.title")} ${t("pages.search.title")}`,
+});
 </script>
 
 <template>
diff --git a/pages/search/relations.vue b/pages/search/relations.vue
index bc5416a..afdd7b8 100644
--- a/pages/search/relations.vue
+++ b/pages/search/relations.vue
@@ -6,6 +6,8 @@ import SearchTable from "@/components/search-table.vue";
 import { getSchema } from "@/composables/use-ts-data";
 import { definePageMeta } from "#imports";
 
+const t = useTranslations();
+
 const collectionName = "viecpro_relations";
 const queryBy = ["target.name", "source.name", "relation_type"];
 const koi = ["source_kind", "source.name", "relation_type", "target.name", "target_kind"];
@@ -28,6 +30,10 @@ const sortable = computed(
 definePageMeta({
 	title: "pages.searchviews.relations.title",
 });
+
+useHead({
+	title: `${t("pages.searchviews.relations.title")} ${t("pages.search.title")}`,
+});
 </script>
 
 <template>