chore: add search query and active filter count to search page on mob…

…ile view
acdh-oeaw · Oct 22, 2024 · b757574 · b757574
1 parent ca13272
commit b757574
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 18 deletions.
diff --git a/components/character-fictionality.vue b/components/character-fictionality.vue
@@ -7,8 +7,6 @@ const props = defineProps<{
 	isTablet: boolean;
 }>();
 
-console.log(props.isMobile, props.isTablet);
-
 type Icon = typeof UserRoundIcon;
 
 const characterIcons: Record<string, Icon> = {

diff --git a/components/search-filter.vue b/components/search-filter.vue
@@ -79,6 +79,7 @@ const checkedFacets = computed(() => {
 
 const props = defineProps<{
 	facets: SearchResultFacets | null;
+	filterCount: number;
 }>();
 
 const showMore = ref(false);
@@ -102,13 +103,10 @@ const sortedTopics = computed(() => {
 });
 
 const selectedCheckboxes = ref<Array<string>>([]);
-const filterCount = ref(0);
 
 watch(
 	checkedFacets,
-	({ language, topic }) => {
-		// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-		filterCount.value = (language?.length || 0) + (topic?.length || 0);
+	() => {
 		selectedCheckboxes.value = [];
 	},
 	{ immediate: true },
@@ -182,9 +180,9 @@ function updateSelectedCheckboxes(label: string, isChecked: boolean) {
 					<div class="grid grid-cols-2 items-center">
 						<span class="pb-2 text-xl">Filterung</span>
 						<div class="ml-auto grid grid-cols-[1fr_auto] items-center">
-							<span class="text-sm">Aktive Filter ({{ filterCount }})</span>
+							<span class="text-sm">Aktive Filter ({{ props.filterCount }})</span>
 							<Button
-								v-if="filterCount > 0"
+								v-if="props.filterCount > 0"
 								type="reset"
 								class="items-center p-2"
 								variant="searchform"

diff --git a/components/search-text-input.vue b/components/search-text-input.vue
@@ -1,12 +1,22 @@
 <script setup lang="ts">
 const searchLabelId = "search-field";
+
+const props = defineProps<{
+	searchQuery: string;
+}>();
 </script>
 
 <template>
 	<div class="grid min-w-96 grid-rows-[auto_1fr] gap-8 px-6 pt-14">
 		<div class="grid h-full grid-rows-[auto_1fr]">
 			<div>
-				<Input :id="searchLabelId" name="query" placeholder="Suche" type="search" />
+				<Input
+					:id="searchLabelId"
+					name="query"
+					placeholder="Suche"
+					type="search"
+					:default-value="props.searchQuery"
+				/>
 				<SubmitButton />
 			</div>
 		</div>

diff --git a/pages/search.vue b/pages/search.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { SearchIcon } from "lucide-vue-next";
+import { ListFilter, SearchIcon } from "lucide-vue-next";
 import * as v from "valibot";
 import type { LocationQueryValue } from "vue-router";
 
@@ -21,6 +21,13 @@ defineRouteRules({
 	prerender: true,
 });
 
+const filterCount = computed(() => {
+	const language = route.query.language;
+	const topic = route.query.topic;
+
+	return (language?.length ?? 0) + (topic?.length ?? 0);
+});
+
 const router = useRouter();
 const route = useRoute();
 const t = useTranslations();
@@ -43,6 +50,10 @@ const isMobile = computed(() => {
 	return window.innerWidth < 1024;
 });
 
+const searchQuery = computed(() => {
+	return route.query.query as string;
+});
+
 const offset = ref(0);
 const limit = 20;
 
@@ -118,8 +129,8 @@ const facets = computed(() => {
 		>
 			<div class="hidden md:block">
 				<SearchForm query="" @submit="onChange">
-					<SearchTextInput />
-					<SearchFilter :facets="facets" />
+					<SearchTextInput :search-query="searchQuery ?? ''" />
+					<SearchFilter :filter-count="filterCount" :facets="facets" />
 				</SearchForm>
 			</div>
 			<div
@@ -128,23 +139,47 @@ const facets = computed(() => {
 			<div class="flex md:hidden">
 				<Drawer v-model:open="isMobileSearchOpen">
 					<DrawerTrigger class="w-full">
-						<span class="flex w-full items-center bg-frisch-orange-searchform">
-							<SearchIcon :size="32" class="m-1.5 p-1 text-frisch-orange" />
-							<span class="font-semibold text-frisch-orange">Suche</span>
+						<span
+							class="grid w-full grid-cols-2 items-center bg-frisch-orange-searchform text-frisch-orange"
+						>
+							<div class="flex items-center">
+								<SearchIcon :size="32" class="m-1.5 p-1" />
+								<span class="font-semibold">Suche</span>
+							</div>
+							<div class="flex justify-end px-4">
+								<div class="ml-auto grid grid-cols-[1fr_auto] items-center gap-1">
+									<div class="font-semibold">({{ filterCount }}) Filter</div>
+									<ListFilter />
+								</div>
+							</div>
 						</span>
 					</DrawerTrigger>
 					<DrawerContent>
 						<SearchForm query="" @submit="onChange">
-							<SearchTextInput />
-							<SearchFilter :facets="facets" />
+							<SearchTextInput :search-query="searchQuery ?? ''" />
+							<SearchFilter :facets="facets" :filter-count="filterCount" />
 						</SearchForm>
 					</DrawerContent>
 				</Drawer>
 			</div>
 			<div v-if="data != null" class="w-full !overflow-auto bg-white px-3 pt-4 lg:p-8">
-				<div class="font-semibold text-frisch-indigo lg:pt-9">
+				<div class="hidden font-semibold text-frisch-indigo md:block lg:pt-9">
 					Suchergebnisse ({{ data.count }})
 				</div>
+				<div
+					v-if="searchQuery != null"
+					class="block font-semibold text-frisch-indigo md:hidden lg:pt-9"
+				>
+					<p>
+						{{ data.count }}
+						{{ data.count === 1 ? "Suchergebnis" : "Suchergebnisse" }}
+						für "{{ searchQuery }}"
+					</p>
+				</div>
+				<div v-else class="block font-semibold text-frisch-indigo md:hidden">
+					Suchergebnisse ({{ data.count }})
+				</div>
+
 				<div class="!overflow-auto">
 					<DataTable
 						class="flex align-top"

diff --git a/styles/index.css b/styles/index.css
@@ -9,6 +9,7 @@ body,
 
 	block-size: 100%;
 	isolation: isolate;
+	text-rendering: optimizeLegibility;
 }
 
 /* Width and height of the scrollbar */