Feat/display data lists (#29)

display on all the data pages in the explore view (places, themes,
research-perspectives and glossary) corresponding lists of that specific
data.

components/detail-sidebar.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { EyeIcon } from "lucide-vue-next";
+
+import { Drawer, DrawerContent, DrawerTrigger } from "@/components/ui/drawer";
+
+const props = defineProps<{
+	source: {
+		name?: string | undefined;
+		alternative_name?: string | undefined;
+		description?: string | undefined;
+	};
+	sourceType: string;
+	isMobile: boolean;
+}>();
+</script>
+
+<template>
+	<div v-if="props.isMobile">
+		<Drawer>
+			<DrawerTrigger class="w-full">
+				<EyeIcon class="text-frisch-orange" :size="16" />
+			</DrawerTrigger>
+			<DrawerContent>
+				<div class="flex items-center gap-1 px-4 pt-2 text-sm">
+					{{ props.sourceType }}
+				</div>
+				<h1 class="px-4 pb-2 text-lg font-semibold">{{ props.source.name }}</h1>
+				<h2
+					v-if="props.source.alternative_name"
+					class="px-4 pb-2 font-normal text-muted-foreground"
+				>
+					{{ props.source.name }}
+				</h2>
+				<div class="px-4 py-2">
+					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
+					<div class="text-black">
+						{{ props.source.description }}
+					</div>
+				</div>
+			</DrawerContent>
+		</Drawer>
+	</div>
+	<div v-else>
+		<Sheet>
+			<SheetTrigger as-child>
+				<EyeIcon class="text-frisch-orange" :size="16" />
+			</SheetTrigger>
+			<SheetContent>
+				<div class="flex items-center gap-1 text-sm">
+					{{ props.sourceType }}
+				</div>
+				<SheetTitle class="pb-2">
+					{{ props.source.name }}
+					<h2
+						v-if="props.source.alternative_name"
+						class="px-4 pb-2 font-normal text-muted-foreground"
+					>
+						{{ props.source.name }}
+					</h2></SheetTitle
+				>
+				<SheetDescription>
+					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
+					<div class="text-black">
+						{{ props.source.description }}
+					</div>
+				</SheetDescription>
+			</SheetContent>
+		</Sheet>
+	</div>
+</template>

components/map-sidebar.vue

@@ -7,11 +7,11 @@ const router = useRouter();
 
 const props = defineProps<{
 	place: {
-		id: number | undefined;
-		name: string | undefined;
-		longitude: number | null | undefined;
-		latitude: number | null | undefined;
-		description: string | undefined;
+		id?: number | undefined;
+		name?: string | undefined;
+		longitude?: number | null | undefined;
+		latitude?: number | null | undefined;
+		description?: string | undefined;
 	};
 	relation: string;
 	isMobile: boolean;
@@ -47,7 +47,7 @@ function setPlaceQuery(id: number | undefined) {
 						/>
 					</div>
 					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
-					<div v-if="props.place.description !== ''">
+					<div v-if="props.place.description !== ''" class="text-black">
 						{{ props.place.description }}
 					</div>
 					<div v-else class="text-sm text-muted-foreground">Keine Beschreibung vorhanden.</div>
@@ -76,7 +76,7 @@ function setPlaceQuery(id: number | undefined) {
 						/>
 					</div>
 					<div class="py-2 text-base font-semibold text-black">Beschreibung</div>
-					<div v-if="props.place.description !== ''">
+					<div v-if="props.place.description !== ''" class="text-black">
 						{{ props.place.description }}
 					</div>
 					<div v-else>Keine Beschreibung vorhanden.</div>

composables/use-get-glossary.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { GlossaryEntries } from "@/types/api";
+
+export function useGetGlossary() {
+	const { $api } = useNuxtApp();
+
+	return useQuery({
+		queryKey: ["glossaryList"] as const,
+		async queryFn() {
+			let allResults: GlossaryEntries = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.glossar_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
+
+			return { count: allResults.length, results: allResults };
+		},
+	});
+}

composables/use-get-places.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { Places } from "@/types/api";
+
+export function useGetPlaces() {
+	const { $api } = useNuxtApp();
+
+	return useQuery({
+		queryKey: ["placelist"] as const,
+		async queryFn() {
+			let allResults: Places = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.place_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
+
+			return { count: allResults.length, results: allResults };
+		},
+	});
+}

composables/use-get-research-perspectives.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { ResearchPerspectives } from "@/types/api";
+
+export function useGetPerspectives() {
+	const { $api } = useNuxtApp();
+
+	return useQuery({
+		queryKey: ["perspectivesList"] as const,
+		async queryFn() {
+			let allResults: ResearchPerspectives = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.researchperspective_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
+
+			return { count: allResults.length, results: allResults };
+		},
+	});
+}

composables/use-get-topics.ts

@@ -0,0 +1,35 @@
+import { useQuery } from "@tanstack/vue-query";
+
+import type { Topics } from "@/types/api";
+
+export function useGetTopics() {
+	const { $api } = useNuxtApp();
+
+	return useQuery({
+		queryKey: ["topiclist"] as const,
+		async queryFn() {
+			let allResults: Topics = [];
+			let nextUrl: boolean;
+			let offset = 0;
+			const limit = 500;
+
+			do {
+				const response = await $api["apis_api_apis_ontology.topic_list"]({
+					queries: { limit, offset },
+				});
+
+				allResults = [...allResults, ...response.results];
+
+				if (response.next) {
+					const url = new URL(response.next);
+					offset = Number(url.searchParams.get("offset")) || offset + limit;
+					nextUrl = true;
+				} else {
+					nextUrl = false;
+				}
+			} while (nextUrl);
+
+			return { count: allResults.length, results: allResults };
+		},
+	});
+}

layouts/default.vue

@@ -96,7 +96,7 @@ router.afterEach((to, from) => {
 </script>
 
 <template>
-	<div class="grid min-h-full grid-rows-[auto_1fr_auto] overflow-y-hidden antialiased">
+	<div class="grid h-full grid-rows-[auto_1fr_auto]">
 		<SkipLink target-id="main-content">{{ t("DefaultLayout.skip-to-main-content") }}</SkipLink>
 
 		<AppHeader />

nuxt.config.ts

@@ -9,6 +9,12 @@ export default defineNuxtConfig({
 		"@": fileURLToPath(new URL("./", import.meta.url)),
 	},
 
+	router: {
+		options: {
+			scrollBehaviorType: "smooth",
+		},
+	},
+
 	app: {
 		layoutTransition: false,
 		pageTransition: false,

package.json

@@ -44,6 +44,7 @@
 		"@nuxtjs/color-mode": "^3.5.2",
 		"@nuxtjs/i18n": "^9.2.0",
 		"@radix-icons/vue": "^1.0.0",
+		"@sindresorhus/transliterate": "^1.6.0",
 		"@stefanprobst/netlify-cms-oauth-client": "^0.4.0",
 		"@tanstack/vue-query": "^5.66.0",
 		"@tanstack/vue-table": "^8.20.5",