Restructure search components

acdh-oeaw · Jun 26, 2024 · 127f0d9 · 127f0d9
1 parent 194b9d4
commit 127f0d9
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 74 deletions.
diff --git a/components/search-navigation.vue b/components/search-navigation.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { Calendar, Contact, HandCoins, MapPin, School2, User } from "lucide-vue-next";
+
+const t = useTranslations();
+const localePath = useLocalePath();
+const links = computed(() => {
+	return {
+		functions: {
+			href: { path: localePath("/search/functions") },
+			label: t("Pages.searchviews.function.label"),
+			icon: Contact,
+		},
+		people: {
+			href: { path: localePath("/search/persons") },
+			label: t("Pages.searchviews.person.label"),
+			icon: User,
+		},
+		institutions: {
+			href: { path: localePath("/search/institutions") },
+			label: t("Pages.searchviews.institution.label"),
+			icon: School2,
+		},
+		places: {
+			href: { path: localePath("/search/places") },
+			label: t("Pages.searchviews.place.label"),
+			icon: MapPin,
+		},
+		events: {
+			href: { path: localePath("/search/events") },
+			label: t("Pages.searchviews.event.label"),
+			icon: Calendar,
+		},
+		salaries: {
+			href: { path: localePath("/search/salaries") },
+			label: t("Pages.searchviews.salary.label"),
+			icon: HandCoins,
+		},
+	};
+});
+</script>
+
+<template>
+	<div
+		class="m-2 flex h-fit flex-wrap gap-2 md:flex-col md:gap-4 md:pt-4 lg:mx-4 xl:m-4 xl:max-w-sm"
+	>
+		<NuxtLink
+			v-for="link in links"
+			:key="link.label"
+			:to="link.href"
+			class="group flex h-fit items-center gap-4 rounded-md border p-2 shadow transition hover:bg-primary-100 active:bg-primary-100 xl:mx-0 dark:hover:bg-primary-900 dark:active:bg-primary-900"
+			:class="$route.path === link.href.path && 'bg-primary-100 dark:bg-primary-900'"
+		>
+			<component
+				:is="link.icon"
+				v-if="link.icon"
+				class="transition group-hover:scale-110 group-active:scale-90"
+			/>
+			{{ link.label }}
+		</NuxtLink>
+	</div>
+</template>
diff --git a/components/search-page.vue b/components/search-page.vue
@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import SearchNavigation from "@/components/search-navigation.vue";
+import type { PaginatedListResultType } from "@/types/resulttypes";
+
+interface ColumnEntry {
+	key: string;
+	label: string;
+}
+const _props = defineProps<{
+	className: string;
+	endpoint: (
+		queries?: Record<string, Record<string, number | string>> | undefined,
+	) => Promise<PaginatedListResultType>;
+	cols: Array<ColumnEntry>;
+}>();
+</script>
+
+<template>
+	<div class="h-full gap-4 md:mx-4 md:grid md:grid-cols-[2fr_6fr] md:grid-rows-[auto_1fr]">
+		<SearchNavigation></SearchNavigation>
+		<div class="xl:my-4">
+			<SearchTable :endpoint="endpoint" :cols="cols" :class-name="className"></SearchTable>
+		</div>
+	</div>
+</template>
diff --git a/pages/search.vue b/pages/search.vue
@@ -1,72 +1,11 @@
 <script lang="ts" setup>
-import { Calendar, Contact, HandCoins, MapPin, School2, User } from "lucide-vue-next";
-
-const t = useTranslations();
-const localePath = useLocalePath();
-const links = computed(() => {
-	return {
-		functions: {
-			href: { path: localePath("/search/functions") },
-			label: t("Pages.searchviews.function.label"),
-			icon: Contact,
-		},
-		people: {
-			href: { path: localePath("/search/persons") },
-			label: t("Pages.searchviews.person.label"),
-			icon: User,
-		},
-		institutions: {
-			href: { path: localePath("/search/institutions") },
-			label: t("Pages.searchviews.institution.label"),
-			icon: School2,
-		},
-		places: {
-			href: { path: localePath("/search/places") },
-			label: t("Pages.searchviews.place.label"),
-			icon: MapPin,
-		},
-		events: {
-			href: { path: localePath("/search/events") },
-			label: t("Pages.searchviews.event.label"),
-			icon: Calendar,
-		},
-		salaries: {
-			href: { path: localePath("/search/salaries") },
-			label: t("Pages.searchviews.salary.label"),
-			icon: HandCoins,
-		},
-	};
-});
-
 definePageMeta({
 	title: "Pages.searchviews.title",
 });
 </script>
 
 <template>
 	<main class="max-w-[100dvw]">
-		<div class="h-full gap-4 md:mx-4 md:grid md:grid-cols-[2fr_6fr] md:grid-rows-[auto_1fr]">
-			<div
-				class="m-2 flex h-fit flex-wrap gap-2 md:flex-col md:gap-4 md:pt-4 lg:mx-4 xl:m-4 xl:max-w-sm"
-			>
-				<NuxtLink
-					v-for="link in links"
-					:key="link.label"
-					:to="link.href"
-					class="group flex h-fit items-center gap-4 rounded-md border p-2 shadow transition hover:bg-primary-100 active:bg-primary-100 xl:mx-0 dark:hover:bg-primary-900 dark:active:bg-primary-900"
-					:class="$route.path === link.href.path && 'bg-primary-100 dark:bg-primary-900'"
-				>
-					<component
-						:is="link.icon"
-						v-if="link.icon"
-						class="transition group-hover:scale-110 group-active:scale-90"
-					/>
-					{{ link.label }}
-				</NuxtLink>
-			</div>
-			<div class="xl:my-4">
-				<NuxtPage />
-			</div>
-		</div>
+		<NuxtPage />
 	</main>
 </template>
diff --git a/pages/search/events.vue b/pages/search/events.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import SearchTable from "@/components/search-table.vue";
+import SearchPage from "@/components/search-page.vue";
 
 definePageMeta({
 	title: "Pages.searchviews.event.title",
@@ -34,5 +34,5 @@ const columns = [
 </script>
 
 <template>
-	<SearchTable :endpoint="endpoint" :cols="columns" class-name="Event"></SearchTable>
+	<SearchPage :endpoint="endpoint" :cols="columns" class-name="Event"></SearchPage>
 </template>
diff --git a/pages/search/functions.vue b/pages/search/functions.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import SearchTable from "@/components/search-table.vue";
+import SearchPage from "@/components/search-page.vue";
 
 definePageMeta({
 	title: "Pages.searchviews.function.title",
@@ -29,5 +29,5 @@ const columns = [
 </script>
 
 <template>
-	<SearchTable :endpoint="endpoint" :cols="columns" class-name="Function"></SearchTable>
+	<SearchPage :endpoint="endpoint" :cols="columns" class-name="Function"></SearchPage>
 </template>
diff --git a/pages/search/institutions.vue b/pages/search/institutions.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import SearchTable from "@/components/search-table.vue";
+import SearchPage from "@/components/search-page.vue";
 
 definePageMeta({
 	title: "Pages.searchviews.institution.title",
@@ -34,5 +34,5 @@ const columns = [
 </script>
 
 <template>
-	<SearchTable :endpoint="endpoint" :cols="columns" class-name="Institution"></SearchTable>
+	<SearchPage :endpoint="endpoint" :cols="columns" class-name="Institution"></SearchPage>
 </template>
diff --git a/pages/search/persons.vue b/pages/search/persons.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import SearchTable from "@/components/search-table.vue";
+import SearchPage from "@/components/search-page.vue";
 
 definePageMeta({
 	title: "Pages.searchviews.person.title",
@@ -39,5 +39,5 @@ const columns = [
 </script>
 
 <template>
-	<SearchTable :endpoint="endpoint" :cols="columns" class-name="Person"></SearchTable>
+	<SearchPage :endpoint="endpoint" :cols="columns" class-name="Person"></SearchPage>
 </template>
diff --git a/pages/search/places.vue b/pages/search/places.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import SearchTable from "@/components/search-table.vue";
+import SearchPage from "@/components/search-page.vue";
 
 definePageMeta({
 	title: "Pages.searchviews.place.title",
@@ -24,5 +24,5 @@ const columns = [
 </script>
 
 <template>
-	<SearchTable :endpoint="endpoint" :cols="columns" class-name="Place"></SearchTable>
+	<SearchPage :endpoint="endpoint" :cols="columns" class-name="Place"></SearchPage>
 </template>
diff --git a/pages/search/salaries.vue b/pages/search/salaries.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import SearchTable from "@/components/search-table.vue";
+import SearchPage from "@/components/search-page.vue";
 
 definePageMeta({
 	title: "Pages.searchviews.salary.title",
@@ -25,5 +25,5 @@ const columns = [
 </script>
 
 <template>
-	<SearchTable :endpoint="endpoint" :cols="columns" class-name="Salary"></SearchTable>
+	<SearchPage :endpoint="endpoint" :cols="columns" class-name="Salary"></SearchPage>
 </template>