Generic Fixes (#42)

Co-authored-by: Robin Kaggl <robin.kaggl@oeaw.ac.at>

components/app-header.vue

@@ -45,10 +45,12 @@ const links = computed(() => {
 			</div>
 			<div class="md:hidden">
 				<Menu v-slot="{ open, close }" as="div" class="relative z-50 inline-block">
-					<MenuButton as="button" class="rounded border border-gray-300 p-2">
-						<X v-if="open" class="h-6 w-6 shrink-0" />
-						<MenuIcon v-else class="h-6 w-6 shrink-0" />
-					</MenuButton>
+					<ClientOnly>
+						<MenuButton as="button" class="rounded border border-gray-300 p-2">
+							<X v-if="open" class="h-6 w-6 shrink-0" />
+							<MenuIcon v-else class="h-6 w-6 shrink-0" />
+						</MenuButton>
+					</ClientOnly>
 					<Transition
 						enter-active-class="transition duration-100 ease-out"
 						enter-from-class="transform scale-95 -translate-y-8 opacity-0"

components/locale-switch.vue

@@ -1,15 +1,10 @@
 <script lang="ts" setup>
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/vue";
-import { computed } from "vue";
+import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/vue";
 
 import { locales } from "@/config/i18n.config";
 
 const { locale, setLocale } = useI18n();
 
-const selectedLocale = computed(() => {
-	return locales[locale.value];
-});
-
 defineProps<{
 	noSelect?: boolean;
 }>();
@@ -20,13 +15,12 @@ defineProps<{
 		v-if="!noSelect"
 		class="mx-4 rounded bg-white text-black transition hover:bg-slate-200 active:bg-slate-300"
 	>
-		<Listbox
-			:model-value="selectedLocale"
-			@update:model-value="(selectedValue) => setLocale(selectedValue.code)"
-		>
-			<ListboxButton class="px-4 py-2" data-testid="localeButton">
-				{{ selectedLocale.code.toUpperCase() }}
-			</ListboxButton>
+		<Menu as="div">
+			<ClientOnly>
+				<MenuButton class="px-4 py-2" data-testid="localeButton" as="button">
+					{{ locale.toUpperCase() }}
+				</MenuButton>
+			</ClientOnly>
 			<Transition
 				enter-active-class="transition duration-100 ease-out"
 				enter-from-class="transform scale-95 -translate-y-8 opacity-0"
@@ -35,27 +29,27 @@ defineProps<{
 				leave-from-class="transform scale-100 opacity-100"
 				leave-to-class="transform scale-95 opacity-0"
 			>
-				<ListboxOptions
-					class="fixed ml-4 mt-4 flex -translate-x-4 flex-col rounded bg-white shadow-lg"
-				>
-					<ListboxOption
+				<MenuItems class="fixed ml-4 mt-4 flex -translate-x-4 flex-col rounded bg-white shadow-lg">
+					<MenuItem
 						v-for="loc in locales"
 						:key="loc.code"
 						as="button"
-						:value="loc"
 						class="min-w-[5rem] p-4 text-gray-900 transition first:rounded-t last:rounded-b hover:bg-gray-300 active:bg-gray-400"
+						:data-testid="loc.code"
+						@click="setLocale(loc.code)"
 					>
 						{{ loc.code.toUpperCase() }}
-					</ListboxOption>
-				</ListboxOptions>
+					</MenuItem>
+				</MenuItems>
 			</Transition>
-		</Listbox>
+		</Menu>
 	</div>
 	<div v-else class="flex w-full divide-x">
 		<button
 			v-for="loc in locales"
 			:key="loc.code"
 			class="grow p-4 text-gray-900 transition hover:bg-gray-300 active:bg-gray-400"
+			:data-testid="loc.code"
 			@click="setLocale(loc.code)"
 		>
 			{{ loc.code.toUpperCase() }}

components/search-table.vue

@@ -1,13 +1,10 @@
 <script lang="ts" setup>
-import { useQuery, useQueryClient, type UseQueryReturnType } from "@tanstack/vue-query";
+import { useQuery, useQueryClient } from "@tanstack/vue-query";
 import { useWindowSize } from "@vueuse/core";
 import get from "lodash.get";
 import { ChevronDown, ChevronRight, Loader2, Search, XCircle } from "lucide-vue-next";
-import type { SearchResponse } from "typesense/lib/Typesense/Documents";
-import { computed, type ComputedRef, type Ref, ref } from "vue";
-import { type RouteLocationNormalized, useRoute } from "vue-router";
-
-import type { AnyEntity } from "@/types/schema";
+import { computed, ref } from "vue";
+import { useRoute } from "vue-router";
 
 const locale = useLocale();
 const t = useTranslations();
@@ -24,19 +21,16 @@ const props = defineProps<{
 
 const pageLimit = 25;
 
-const route: RouteLocationNormalized = useRoute();
+const route = useRoute();
 
 const input = ref(route.query.q === undefined ? "" : String(route.query.q));
 
-const docs: Ref<UseQueryReturnType<SearchResponse<AnyEntity>, object> | null> = ref(null);
-const loading = computed(() => docs.value === null || docs.value.isFetching);
-
 const windowWidth = useWindowSize().width;
 
-const pageNum: ComputedRef<number> = computed(() => {
+const pageNum = computed(() => {
 	return Number(route.query.page) || 1;
 });
-const limitNum: ComputedRef<number> = computed(() => {
+const limitNum = computed(() => {
 	return Number(route.query.limit) || pageLimit;
 });
 
@@ -52,7 +46,7 @@ const comQuery = computed(() => {
 		sort_by: String(query.sort ?? ""),
 	};
 });
-docs.value = useQuery({
+const { data, isFetching: loading } = useQuery({
 	queryKey: ["search", props.collectionName, comQuery] as const,
 	queryFn: async ({ queryKey }) => {
 		const [, collection, q] = queryKey;
@@ -124,12 +118,12 @@ const getDetailLink = (id: string) => {
 			</div>
 			<slot />
 			<Pagination
-				v-if="docs != null && docs.data && docs.data.page"
-				:page="docs.data.page"
-				:limit="docs.data.request_params.per_page || pageLimit"
-				:all="docs.data.found"
+				v-if="data && data.page"
+				:page="data.page"
+				:limit="data.request_params.per_page || pageLimit"
+				:all="data.found"
 			/>
-			<div v-if="!loading && docs?.data" class="w-full">
+			<div v-if="!loading && data" class="w-full">
 				<div class="mr-6 hidden md:grid" :class="cols">
 					<div v-for="key in koi" :key="key" class="m-2 font-semibold">
 						<SortableColumn v-if="sort && sort.includes(key)" :query="route.query" :col="key" />
@@ -145,9 +139,9 @@ const getDetailLink = (id: string) => {
 						</span>
 					</div>
 				</div>
-				<template v-if="docs !== null">
+				<template v-if="data !== null">
 					<div
-						v-for="hit in docs.data.hits"
+						v-for="hit in data.hits"
 						:key="String(hit.document.id)"
 						class="border-b py-1 md:border-t"
 					>
@@ -193,21 +187,21 @@ const getDetailLink = (id: string) => {
 					</div>
 				</template>
 				<Pagination
-					v-if="docs != null && docs?.data && docs.data.found != 0"
+					v-if="data && data.found != 0"
 					class="mt-2"
-					:page="docs.data.page"
-					:limit="docs.data.request_params.per_page || pageLimit"
-					:all="docs.data.found"
+					:page="data.page"
+					:limit="data.request_params.per_page || pageLimit"
+					:all="data.found"
 				/>
 			</div>
 			<Centered v-else>
 				<Loader2 class="h-8 w-8 animate-spin" />
 			</Centered>
 		</div>
-		<div v-if="!loading && docs !== null && docs.data">
+		<div v-if="!loading && data">
 			<FacetDisclosures
 				class="float-right m-4 w-96 max-w-full"
-				:facets="docs.data.facet_counts"
+				:facets="data.facet_counts"
 				:loading="loading"
 				:collection="collectionName"
 				:query-by="queryBy"

pages/imprint.vue

@@ -5,9 +5,8 @@ import { Loader2 } from "lucide-vue-next";
 import { getImprint } from "@/lib/get-imprint";
 
 const { locale } = useI18n();
-const imprintQuery = ref();
 
-imprintQuery.value = useQuery({
+const { data: html, isFetching } = useQuery({
 	queryKey: ["imprint", locale.value] as const,
 	queryFn: async ({ queryKey }) => {
 		const [, locale] = queryKey;
@@ -22,9 +21,9 @@ definePageMeta({
 </script>
 
 <template>
-	<MainContent class="mx-auto w-full max-w-container">
-		<div v-if="!imprintQuery.isFetching">
-			<p id="imprint" v-html="imprintQuery.data" />
+	<MainContent class="mx-auto w-full max-w-container px-2">
+		<div v-if="!isFetching">
+			<p id="imprint" v-html="html" />
 		</div>
 		<Centered v-else><Loader2 class="h-8 w-8 animate-spin" /></Centered>
 	</MainContent>

tests/navigation-tests.spec.ts

@@ -3,13 +3,12 @@ import { expect, test } from "@playwright/test";
 test("Switch locale", async ({ page }) => {
 	await page.goto("http://localhost:3000/de");
 	await page.getByTestId("localeButton").click();
-	await page.getByRole("option", { name: "EN" }).click();
-
+	await page.getByTestId("en").click();
 	await expect(page).toHaveTitle("Home - VieCPro");
 	await expect(page).toHaveURL("http://localhost:3000/en");
 
 	await page.getByTestId("localeButton").click();
-	await page.getByRole("option", { name: "DE" }).click();
+	await page.getByTestId("de").click();
 
 	await expect(page).toHaveTitle("Startseite - VieCPro");
 	await expect(page).toHaveURL("http://localhost:3000/de");
@@ -67,7 +66,7 @@ test("Imprint", async ({ page }) => {
 	).toBeVisible();
 
 	await page.getByTestId("localeButton").click();
-	await page.getByRole("option", { name: "EN" }).click();
+	await page.getByTestId("en").click();
 
 	await expect(
 		page.getByRole("heading", { name: "Legal disclosure according to" }).first(),