From c2daa0b5a449a97db957a47fd38fde4b50be9839 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Tue, 28 May 2024 14:06:38 +0200
Subject: [PATCH 1/4] chore: add all relevant columns to the search-results
 table

---
 components/search-data-table/data-table.vue | 40 +++++++++++++++++++++
 pages/search.vue                            |  2 +-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/components/search-data-table/data-table.vue b/components/search-data-table/data-table.vue
index 20d975f..65e5a03 100644
--- a/components/search-data-table/data-table.vue
+++ b/components/search-data-table/data-table.vue
@@ -23,6 +23,46 @@ const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
 			return h("div", row.getValue("title"));
 		},
 	},
+	{
+		accessorKey: "work_type",
+		header: () => h("div", "Typ"),
+		cell: ({ row }) => {
+			const workType = row.getValue("work_type");
+			return h("div", {}, workType.map((type) => type.name).join(", "));
+		},
+	},
+	{
+		accessorKey: "expression_data",
+		header: () => h("div", "Edition"),
+		cell: ({ row }) => {
+			const edition = row.getValue("expression_data");
+			return h("div", {}, edition.map((type) => type.edition).join(", "));
+		},
+	},
+	{
+		accessorKey: "expression_data",
+		header: () => h("div", "Ort"),
+		cell: ({ row }) => {
+			const placeOfPublication = row.getValue("expression_data");
+			return h("div", {}, placeOfPublication.map((type) => type.place_of_publication).join(", "));
+		},
+	},
+	{
+		accessorKey: "expression_data",
+		header: () => h("div", "Verlag"),
+		cell: ({ row }) => {
+			const publisher = row.getValue("expression_data");
+			return h("div", {}, publisher.map((type) => type.publisher).join(", "));
+		},
+	},
+	{
+		accessorKey: "expression_data",
+		header: () => h("div", "Veröffentlichungsdatum"),
+		cell: ({ row }) => {
+			const publicationDate = row.getValue("expression_data");
+			return h("div", {}, publicationDate.map((type) => type.publication_date).join(", "));
+		},
+	},
 ];
 
 const table = useVueTable({
diff --git a/pages/search.vue b/pages/search.vue
index 71fca5d..84a2419 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -14,7 +14,7 @@ const { data, isFetching } = useQuery({
 	queryKey: ["worklist"] as const,
 	async queryFn() {
 		return $api.api_work_preview_list({
-			queries: { limit: 10, offset: 0 },
+			queries: { limit: 20, offset: 0 },
 		});
 	},
 });

From b27c3e455b68d121137436baf59bfad2c000eaf6 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Fri, 14 Jun 2024 16:41:02 +0200
Subject: [PATCH 2/4] feat: pagination and search / filtering ui

---
 components/search-data-table/data-table.vue   |  90 +++++++-------
 components/search-filter.vue                  | 113 ++++++++++++++++++
 components/search-form.vue                    |  57 +++++++++
 components/ui/button/index.ts                 |   7 +-
 components/ui/checkbox/Checkbox.vue           |  42 +++++++
 components/ui/checkbox/index.ts               |   1 +
 components/ui/input/Input.vue                 |  33 +++++
 components/ui/input/index.ts                  |   1 +
 .../ui/pagination/PaginationEllipsis.vue      |   2 +-
 components/ui/pagination/PaginationFirst.vue  |   2 +-
 components/ui/pagination/PaginationLast.vue   |   2 +-
 components/ui/pagination/PaginationNext.vue   |   2 +-
 components/ui/pagination/PaginationPrev.vue   |   2 +-
 components/ui/slider/Slider.vue               |  41 +++++++
 components/ui/slider/index.ts                 |   1 +
 composables/use-get-search-results.ts         |  20 ++++
 package.json                                  |   2 +-
 pages/search.vue                              |  90 +++++++++++---
 tailwind.config.ts                            |   3 +-
 19 files changed, 441 insertions(+), 70 deletions(-)
 create mode 100644 components/search-filter.vue
 create mode 100644 components/search-form.vue
 create mode 100644 components/ui/checkbox/Checkbox.vue
 create mode 100644 components/ui/checkbox/index.ts
 create mode 100644 components/ui/input/Input.vue
 create mode 100644 components/ui/input/index.ts
 create mode 100644 components/ui/slider/Slider.vue
 create mode 100644 components/ui/slider/index.ts
 create mode 100644 composables/use-get-search-results.ts

diff --git a/components/search-data-table/data-table.vue b/components/search-data-table/data-table.vue
index 65e5a03..e204ee2 100644
--- a/components/search-data-table/data-table.vue
+++ b/components/search-data-table/data-table.vue
@@ -13,16 +13,10 @@ import type { SearchResults } from "@/types/api.ts";
 
 const props = defineProps<{
 	data: SearchResults["results"];
+	resultsTotal: number;
 }>();
 
 const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
-	{
-		accessorKey: "title",
-		header: () => h("div", "Titel"),
-		cell: ({ row }) => {
-			return h("div", row.getValue("title"));
-		},
-	},
 	{
 		accessorKey: "work_type",
 		header: () => h("div", "Typ"),
@@ -31,6 +25,13 @@ const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
 			return h("div", {}, workType.map((type) => type.name).join(", "));
 		},
 	},
+	{
+		accessorKey: "title",
+		header: () => h("div", "Titel"),
+		cell: ({ row }) => {
+			return h("div", row.getValue("title"));
+		},
+	},
 	{
 		accessorKey: "expression_data",
 		header: () => h("div", "Edition"),
@@ -77,43 +78,44 @@ const table = useVueTable({
 </script>
 
 <template>
-	<div class="font-semibold text-frisch-indigo">Suchergebnisse ({{ table.getRowCount() }})</div>
-	<div class="rounded-md border">
-		<Table>
-			<TableHeader>
-				<TableCaption class="sr-only">
-					<span>Suchergebnisse</span>
-				</TableCaption>
-				<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-					<TableHead v-for="header in headerGroup.headers" :key="header.id">
-						<FlexRender
-							v-if="!header.isPlaceholder"
-							:render="header.column.columnDef.header"
-							:props="header.getContext()"
-						/>
-					</TableHead>
-				</TableRow>
-			</TableHeader>
-			<TableBody>
-				<template v-if="table.getRowModel().rows?.length">
-					<TableRow
-						v-for="row in table.getRowModel().rows"
-						:key="row.id"
-						:data-state="row.getIsSelected() ? 'selected' : undefined"
-					>
-						<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
-							<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
-						</TableCell>
-					</TableRow>
-				</template>
-				<template v-else>
-					<TableRow>
-						<TableCell :col-span="columns.length" class="h-24 text-center">
-							Keine Einträge zu dieser Suche.
-						</TableCell>
+	<div>
+		<div class="rounded-md border">
+			<Table>
+				<TableHeader>
+					<TableCaption class="sr-only">
+						<span>Suchergebnisse</span>
+					</TableCaption>
+					<TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
+						<TableHead v-for="header in headerGroup.headers" :key="header.id">
+							<FlexRender
+								v-if="!header.isPlaceholder"
+								:render="header.column.columnDef.header"
+								:props="header.getContext()"
+							/>
+						</TableHead>
 					</TableRow>
-				</template>
-			</TableBody>
-		</Table>
+				</TableHeader>
+				<TableBody>
+					<template v-if="table.getRowModel().rows?.length">
+						<TableRow
+							v-for="row in table.getRowModel().rows"
+							:key="row.id"
+							:data-state="row.getIsSelected() ? 'selected' : undefined"
+						>
+							<TableCell v-for="cell in row.getVisibleCells()" :key="cell.id">
+								<FlexRender :render="cell.column.columnDef.cell" :props="cell.getContext()" />
+							</TableCell>
+						</TableRow>
+					</template>
+					<template v-else>
+						<TableRow>
+							<TableCell :col-span="columns.length" class="h-24 text-center">
+								Keine Einträge zu dieser Suche.
+							</TableCell>
+						</TableRow>
+					</template>
+				</TableBody>
+			</Table>
+		</div>
 	</div>
 </template>
diff --git a/components/search-filter.vue b/components/search-filter.vue
new file mode 100644
index 0000000..c55928a
--- /dev/null
+++ b/components/search-filter.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const slider = { min: 1940, max: 2024 };
+const sliderValue = ref([slider.min, slider.max]);
+</script>
+
+<template>
+	<div class="text-lg font-medium text-frisch-orange">
+		<div class="pb-4">
+			<div class="pb-2 text-xl">Sortierung</div>
+			<Separator class="bg-frisch-orange"></Separator>
+		</div>
+		<div class="pb-4">
+			<div>Medium</div>
+			<div class="grid grid-cols-2 py-3 text-sm font-normal">
+				<div class="flex w-full flex-col">
+					<div class="flex items-center">
+						<Checkbox id="medium1" type="checkbox" />
+						<label for="medium1" class="pl-2">Buch</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="medium2" type="checkbox" />
+						<label for="medium2" class="pl-2">Buchteil</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="medium3" type="checkbox" />
+						<label for="medium3" class="pl-2">Sekundärliteratur</label>
+					</div>
+				</div>
+				<div class="flex w-full flex-col">
+					<div class="flex items-center">
+						<Checkbox id="medium4" type="checkbox" />
+						<label for="medium4" class="pl-2">Hörspiel</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="medium5" type="checkbox" />
+						<label for="medium5" class="pl-2">Artikel</label>
+					</div>
+				</div>
+			</div>
+			<Separator class="bg-frisch-orange"></Separator>
+		</div>
+		<div class="pb-4">
+			<div>Erscheinungsjahr</div>
+			<div class="w-full py-3 text-sm font-normal">
+				<div class="grid w-full grid-cols-[1fr_auto] pb-4">
+					<div>{{ sliderValue[0] }}</div>
+					<div>{{ sliderValue[1] }}</div>
+				</div>
+				<Slider v-model="sliderValue" class="pb-3" :max="slider.max" :min="slider.min" :step="1" />
+			</div>
+			<Separator class="bg-frisch-orange"></Separator>
+		</div>
+		<div class="pb-4">
+			<div>Sprache</div>
+			<div class="grid grid-cols-2 py-3 text-sm font-normal">
+				<div class="flex w-full flex-col">
+					<div class="flex items-center">
+						<Checkbox id="language1" type="checkbox" />
+						<label for="language1" class="pl-2">Deutsch</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="language2" type="checkbox" />
+						<label for="language2" class="pl-2">Englisch</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="language3" type="checkbox" />
+						<label for="language3" class="pl-2">Türkisch</label>
+					</div>
+				</div>
+				<div class="flex w-full flex-col">
+					<div class="flex items-center">
+						<Checkbox id="language4" type="checkbox" />
+						<label for="language4" class="pl-2">Ungarisch</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="language5" type="checkbox" />
+						<label for="language5" class="pl-2">Arabisch</label>
+					</div>
+				</div>
+			</div>
+			<Separator class="bg-frisch-orange"></Separator>
+		</div>
+		<div>
+			<div>Thema</div>
+			<div class="grid grid-cols-2 py-3 text-sm font-normal">
+				<div class="flex w-full flex-col">
+					<div class="flex items-center">
+						<Checkbox id="theme1" type="checkbox" />
+						<label for="theme1" class="pl-2">Familie</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="theme2" type="checkbox" />
+						<label for="theme2" class="pl-2">Beziehung</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="theme3" type="checkbox" />
+						<label for="theme3" class="pl-2">Karriere</label>
+					</div>
+				</div>
+				<div class="flex w-full flex-col">
+					<div class="flex items-center">
+						<Checkbox id="theme4" type="checkbox" />
+						<label for="theme4" class="pl-2">Selbstermächtigung</label>
+					</div>
+					<div class="flex items-center">
+						<Checkbox id="theme5" type="checkbox" />
+						<label for="theme5" class="pl-2">Künstler*innenleben</label>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
diff --git a/components/search-form.vue b/components/search-form.vue
new file mode 100644
index 0000000..ca8decb
--- /dev/null
+++ b/components/search-form.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+export interface SearchFormData {
+	search: string;
+}
+
+const props = defineProps<SearchFormData>();
+
+const emit = defineEmits<{
+	(event: "submit", values: SearchFormData): void;
+}>();
+
+function onSubmit(event: Event) {
+	const element = event.currentTarget as HTMLFormElement;
+	const formData = new FormData(element);
+
+	emit("submit", {
+		search: formData.get("q") as string,
+	});
+}
+
+const searchLabelId = "search-field";
+</script>
+
+<template>
+	<div class="grid grid-cols-[1fr_auto]">
+		<div class="w-full bg-frisch-orange-searchform">
+			<form
+				class="grid size-full min-w-96 grid-rows-[auto_1fr] gap-8 px-6 py-14"
+				role="search"
+				@submit.prevent="onSubmit"
+			>
+				<div class="grid h-full grid-rows-[auto_1fr]">
+					<div>
+						<Input
+							:id="searchLabelId"
+							:default-value="props.search"
+							name="q"
+							placeholder="Suche"
+							type="search"
+						/>
+					</div>
+
+					<div class="flex justify-end">
+						<Button type="submit" variant="searchform" size="searchform">suchen</Button>
+					</div>
+				</div>
+
+				<div class="size-full bg-frisch-orange-super-light p-6">
+					<SearchFilter />
+				</div>
+			</form>
+		</div>
+		<div
+			class="size-0 border-y-[85px] border-l-[85px] border-y-transparent border-l-frisch-orange"
+		/>
+	</div>
+</template>
diff --git a/components/ui/button/index.ts b/components/ui/button/index.ts
index ec2a644..8967808 100644
--- a/components/ui/button/index.ts
+++ b/components/ui/button/index.ts
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 export { default as Button } from "./Button.vue";
 
 export const buttonVariants = cva(
-	"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+	"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
 	{
 		variants: {
 			variant: {
@@ -14,6 +14,10 @@ export const buttonVariants = cva(
 				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
 				ghost: "hover:bg-accent hover:text-accent-foreground",
 				link: "text-primary underline-offset-4 hover:underline",
+				searchform:
+					"items-end justify-end bg-none text-lg font-bold text-frisch-orange hover:text-frisch-indigo",
+				pagination: "bg-frisch-indigo text-lg text-white hover:bg-frisch-indigo/90",
+				paginationActive: "bg-frisch-orange text-lg text-white",
 			},
 			size: {
 				default: "h-9 px-4 py-2",
@@ -21,6 +25,7 @@ export const buttonVariants = cva(
 				sm: "h-8 rounded-md px-3 text-xs",
 				lg: "h-10 rounded-md px-8",
 				icon: "size-9",
+				searchform: "h-9",
 			},
 		},
 		defaultVariants: {
diff --git a/components/ui/checkbox/Checkbox.vue b/components/ui/checkbox/Checkbox.vue
new file mode 100644
index 0000000..5c04b82
--- /dev/null
+++ b/components/ui/checkbox/Checkbox.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { CheckIcon } from "@radix-icons/vue";
+import {
+	CheckboxIndicator,
+	CheckboxRoot,
+	type CheckboxRootEmits,
+	type CheckboxRootProps,
+	useForwardPropsEmits,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<CheckboxRoot
+		v-bind="forwarded"
+		:class="
+			cn(
+				'peer h-4 w-4 shrink-0 border border-frisch-orange focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-frisch-orange data-[state=checked]:text-primary-foreground',
+				props.class,
+			)
+		"
+	>
+		<CheckboxIndicator class="flex size-full items-center justify-center text-current">
+			<slot>
+				<CheckIcon class="size-4" />
+			</slot>
+		</CheckboxIndicator>
+	</CheckboxRoot>
+</template>
diff --git a/components/ui/checkbox/index.ts b/components/ui/checkbox/index.ts
new file mode 100644
index 0000000..75be342
--- /dev/null
+++ b/components/ui/checkbox/index.ts
@@ -0,0 +1 @@
+export { default as Checkbox } from "./Checkbox.vue";
diff --git a/components/ui/input/Input.vue b/components/ui/input/Input.vue
new file mode 100644
index 0000000..b46a49e
--- /dev/null
+++ b/components/ui/input/Input.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+import type { HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<{
+	defaultValue?: number | string;
+	modelValue?: number | string;
+	class?: HTMLAttributes["class"];
+}>();
+
+const emits = defineEmits<{
+	(e: "update:modelValue", payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, "modelValue", emits, {
+	passive: true,
+	defaultValue: props.defaultValue,
+});
+</script>
+
+<template>
+	<input
+		v-model="modelValue"
+		:class="
+			cn(
+				'flex h-11 w-full bg-white px-3 py-1 text-md shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-red-500 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50',
+				props.class,
+			)
+		"
+	/>
+</template>
diff --git a/components/ui/input/index.ts b/components/ui/input/index.ts
new file mode 100644
index 0000000..110f046
--- /dev/null
+++ b/components/ui/input/index.ts
@@ -0,0 +1 @@
+export { default as Input } from "./Input.vue";
diff --git a/components/ui/pagination/PaginationEllipsis.vue b/components/ui/pagination/PaginationEllipsis.vue
index 2e32dbf..dea8c94 100644
--- a/components/ui/pagination/PaginationEllipsis.vue
+++ b/components/ui/pagination/PaginationEllipsis.vue
@@ -20,7 +20,7 @@ const delegatedProps = computed(() => {
 		:class="cn('w-9 h-9 flex items-center justify-center', props.class)"
 	>
 		<slot>
-			<DotsHorizontalIcon />
+			<DotsHorizontalIcon class="size-5" />
 		</slot>
 	</PaginationEllipsis>
 </template>
diff --git a/components/ui/pagination/PaginationFirst.vue b/components/ui/pagination/PaginationFirst.vue
index f32fe83..50b83b9 100644
--- a/components/ui/pagination/PaginationFirst.vue
+++ b/components/ui/pagination/PaginationFirst.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
 
 <template>
 	<PaginationFirst v-bind="delegatedProps">
-		<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+		<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
 			<slot>
 				<DoubleArrowLeftIcon />
 			</slot>
diff --git a/components/ui/pagination/PaginationLast.vue b/components/ui/pagination/PaginationLast.vue
index c770340..1c10c32 100644
--- a/components/ui/pagination/PaginationLast.vue
+++ b/components/ui/pagination/PaginationLast.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
 
 <template>
 	<PaginationLast v-bind="delegatedProps">
-		<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+		<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
 			<slot>
 				<DoubleArrowRightIcon />
 			</slot>
diff --git a/components/ui/pagination/PaginationNext.vue b/components/ui/pagination/PaginationNext.vue
index 761122f..a7cecf9 100644
--- a/components/ui/pagination/PaginationNext.vue
+++ b/components/ui/pagination/PaginationNext.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
 
 <template>
 	<PaginationNext v-bind="delegatedProps">
-		<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+		<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
 			<slot>
 				<ChevronRightIcon />
 			</slot>
diff --git a/components/ui/pagination/PaginationPrev.vue b/components/ui/pagination/PaginationPrev.vue
index 772816e..5804ede 100644
--- a/components/ui/pagination/PaginationPrev.vue
+++ b/components/ui/pagination/PaginationPrev.vue
@@ -22,7 +22,7 @@ const delegatedProps = computed(() => {
 
 <template>
 	<PaginationPrev v-bind="delegatedProps">
-		<Button :class="cn('w-9 h-9 p-0', props.class)" variant="outline">
+		<Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
 			<slot>
 				<ChevronLeftIcon />
 			</slot>
diff --git a/components/ui/slider/Slider.vue b/components/ui/slider/Slider.vue
new file mode 100644
index 0000000..e30e51b
--- /dev/null
+++ b/components/ui/slider/Slider.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import {
+	SliderRange,
+	SliderRoot,
+	type SliderRootEmits,
+	type SliderRootProps,
+	SliderThumb,
+	SliderTrack,
+	useForwardPropsEmits,
+} from "radix-vue";
+import { computed, type HTMLAttributes } from "vue";
+
+import { cn } from "@/utils/styles";
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes["class"] }>();
+const emits = defineEmits<SliderRootEmits>();
+
+const delegatedProps = computed(() => {
+	const { class: _, ...delegated } = props;
+
+	return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<SliderRoot
+		:class="cn('relative flex w-full touch-none select-none items-center', props.class)"
+		v-bind="forwarded"
+	>
+		<SliderTrack class="relative h-1.5 w-full grow overflow-hidden bg-frisch-orange-light/60">
+			<SliderRange class="absolute h-full bg-frisch-orange" />
+		</SliderTrack>
+		<SliderThumb
+			v-for="(_, key) in modelValue"
+			:key="key"
+			class="block size-5 border border-frisch-orange bg-white ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+		/>
+	</SliderRoot>
+</template>
diff --git a/components/ui/slider/index.ts b/components/ui/slider/index.ts
new file mode 100644
index 0000000..765baab
--- /dev/null
+++ b/components/ui/slider/index.ts
@@ -0,0 +1 @@
+export { default as Slider } from "./Slider.vue";
diff --git a/composables/use-get-search-results.ts b/composables/use-get-search-results.ts
new file mode 100644
index 0000000..36bb94c
--- /dev/null
+++ b/composables/use-get-search-results.ts
@@ -0,0 +1,20 @@
+import { useQuery } from "@tanstack/vue-query";
+
+const { $api } = useNuxtApp();
+
+export interface SearchFilters {
+	limit: number;
+	offset: number;
+}
+
+export function useGetSearchResults(params: MaybeRef<SearchFilters>) {
+	return useQuery({
+		queryKey: ["worklist", params] as const,
+		async queryFn({ queryKey }) {
+			const [, params] = queryKey;
+			return $api.api_work_preview_list({
+				queries: { ...params },
+			});
+		},
+	});
+}
diff --git a/package.json b/package.json
index c5e6000..ed9d2d5 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
 	"type": "module",
 	"engines": {
 		"node": "20.x",
-		"pnpm": "8.x"
+		"pnpm": "9.x"
 	},
 	"packageManager": "pnpm@8.15.5",
 	"scripts": {
diff --git a/pages/search.vue b/pages/search.vue
index 84a2419..a1ec342 100644
--- a/pages/search.vue
+++ b/pages/search.vue
@@ -1,28 +1,82 @@
 <script setup lang="ts">
-import { useQuery } from "@tanstack/vue-query";
+import {
+	Pagination,
+	PaginationEllipsis,
+	PaginationFirst,
+	PaginationLast,
+	PaginationList,
+	PaginationListItem,
+	PaginationNext,
+	PaginationPrev,
+} from "@/components/ui/pagination";
 
 defineRouteRules({ prerender: true });
 
-const t = useTranslations();
+function onUpdatePage(newPage: number) {
+	offset.value = (newPage - 1) * limit;
+}
 
-usePageMetadata({
-	title: t("SearchPage.meta.title"),
-});
+const offset = ref(0);
+const limit = 20;
 
-const { $api } = useNuxtApp();
-const { data, isFetching } = useQuery({
-	queryKey: ["worklist"] as const,
-	async queryFn() {
-		return $api.api_work_preview_list({
-			queries: { limit: 20, offset: 0 },
-		});
-	},
-});
+const { data } = useGetSearchResults(
+	computed(() => {
+		return {
+			limit: limit,
+			offset: offset.value,
+		};
+	}),
+);
 </script>
 
 <template>
-	<MainContent class="container py-8">
-		<span v-if="isFetching">Loading...</span>
-		<DataTable v-if="data != null" :data="data.results"></DataTable>
-	</MainContent>
+	<div class="h-full bg-frisch-marine pr-20">
+		<div class="grid h-full grid-cols-[1fr_3fr]">
+			<SearchForm search=""></SearchForm>
+			<div
+				v-if="data != null"
+				class="grid w-full grid-rows-[auto_1fr_auto] items-center bg-white p-8"
+			>
+				<div class="pt-9 font-semibold text-frisch-indigo">Suchergebnisse ({{ data.count }})</div>
+				<DataTable :data="data.results" :results-total="data.count"></DataTable>
+				<div class="flex justify-center p-8">
+					<Pagination
+						v-if="data?.count != null"
+						v-slot="{ page }"
+						class="justify-self-center"
+						:sibling-count="1"
+						:show-edges="true"
+						:total="data.count"
+						:items-per-page="limit"
+						@update:page="onUpdatePage"
+					>
+						<PaginationList v-slot="{ items }" class="flex items-center gap-1">
+							<PaginationFirst />
+							<PaginationPrev />
+
+							<template v-for="(item, index) of items">
+								<PaginationListItem
+									v-if="item.type === 'page'"
+									:key="index"
+									as-child
+									:value="item.value"
+								>
+									<Button
+										class="size-10 p-0"
+										:variant="item.value === page ? 'paginationActive' : 'pagination'"
+									>
+										{{ item.value }}
+									</Button>
+								</PaginationListItem>
+								<PaginationEllipsis v-else :key="item.type" :index="index" />
+							</template>
+
+							<PaginationNext :disabled="offset >= data.count - limit" />
+							<PaginationLast :disabled="offset >= data.count - limit" />
+						</PaginationList>
+					</Pagination>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 5a1eb97..f91b602 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -51,8 +51,9 @@ const config: Config = {
 				"frisch-indigo": "rgb(20 28 84 / <alpha-value>)",
 				"frisch-grey": "rgb(148 151 170 / <alpha-value>)",
 				"frisch-orange": "rgb(236 81 0 / <alpha-value>)",
+				"frisch-orange-searchform": "rgb(253 234 226 / <alpha-value>)",
 				"frisch-orange-light": "rgb(231 171 147 / <alpha-value>)",
-				"frisch-orange-super-light": "rgb(253 234 226 / <alpha-value>)",
+				"frisch-orange-super-light": "rgb(255 249 247 / <alpha-value>)",
 				"frisch-marine": "rgb(233 238 252 / <alpha-value>)",
 				border: "hsl(var(--border))",
 				input: "hsl(var(--input))",

From fa926217023567c3cee2ef76c144aefeb9fb2cbd Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Fri, 14 Jun 2024 16:46:43 +0200
Subject: [PATCH 3/4] fix: add new pnpm version to the package manager

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index ed9d2d5..ed703b3 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
 		"node": "20.x",
 		"pnpm": "9.x"
 	},
-	"packageManager": "pnpm@8.15.5",
+	"packageManager": "pnpm@9.3.0",
 	"scripts": {
 		"analyze": "nuxt analyze",
 		"build": "nuxt build --dotenv ./.env.local",

From 999e519575274147a1fa5563c9e3bde09275cdc2 Mon Sep 17 00:00:00 2001
From: oliviareichl <Olivia.Reichl@oeaw.ac.at>
Date: Fri, 14 Jun 2024 17:02:59 +0200
Subject: [PATCH 4/4] fix: ignore typescript errors

---
 components/search-data-table/data-table.vue | 25 ++++++++++++---------
 components/search-filter.vue                |  1 +
 components/ui/checkbox/Checkbox.vue         |  4 +++-
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/components/search-data-table/data-table.vue b/components/search-data-table/data-table.vue
index e204ee2..53714f9 100644
--- a/components/search-data-table/data-table.vue
+++ b/components/search-data-table/data-table.vue
@@ -21,8 +21,9 @@ const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
 		accessorKey: "work_type",
 		header: () => h("div", "Typ"),
 		cell: ({ row }) => {
-			const workType = row.getValue("work_type");
-			return h("div", {}, workType.map((type) => type.name).join(", "));
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+			const workType = row.getValue("work_type") as Array<any> | undefined;
+			return h("div", {}, workType?.map((type) => type.name).join(", "));
 		},
 	},
 	{
@@ -36,32 +37,36 @@ const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
 		accessorKey: "expression_data",
 		header: () => h("div", "Edition"),
 		cell: ({ row }) => {
-			const edition = row.getValue("expression_data");
-			return h("div", {}, edition.map((type) => type.edition).join(", "));
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+			const edition = row.getValue("expression_data") as Array<any> | undefined;
+			return h("div", {}, edition?.map((type) => type.edition).join(", "));
 		},
 	},
 	{
 		accessorKey: "expression_data",
 		header: () => h("div", "Ort"),
 		cell: ({ row }) => {
-			const placeOfPublication = row.getValue("expression_data");
-			return h("div", {}, placeOfPublication.map((type) => type.place_of_publication).join(", "));
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+			const placeOfPublication = row.getValue("expression_data") as Array<any> | undefined;
+			return h("div", {}, placeOfPublication?.map((type) => type.place_of_publication).join(", "));
 		},
 	},
 	{
 		accessorKey: "expression_data",
 		header: () => h("div", "Verlag"),
 		cell: ({ row }) => {
-			const publisher = row.getValue("expression_data");
-			return h("div", {}, publisher.map((type) => type.publisher).join(", "));
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+			const publisher = row.getValue("expression_data") as Array<any> | undefined;
+			return h("div", {}, publisher?.map((type) => type.publisher).join(", "));
 		},
 	},
 	{
 		accessorKey: "expression_data",
 		header: () => h("div", "Veröffentlichungsdatum"),
 		cell: ({ row }) => {
-			const publicationDate = row.getValue("expression_data");
-			return h("div", {}, publicationDate.map((type) => type.publication_date).join(", "));
+			// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion, @typescript-eslint/no-explicit-any
+			const publicationDate = row.getValue("expression_data") as Array<any> | undefined;
+			return h("div", {}, publicationDate?.map((type) => type.publication_date).join(", "));
 		},
 	},
 ];
diff --git a/components/search-filter.vue b/components/search-filter.vue
index c55928a..77162ac 100644
--- a/components/search-filter.vue
+++ b/components/search-filter.vue
@@ -9,6 +9,7 @@ const sliderValue = ref([slider.min, slider.max]);
 			<div class="pb-2 text-xl">Sortierung</div>
 			<Separator class="bg-frisch-orange"></Separator>
 		</div>
+		<!-- FIX ME: Make checkbox groups!-->
 		<div class="pb-4">
 			<div>Medium</div>
 			<div class="grid grid-cols-2 py-3 text-sm font-normal">
diff --git a/components/ui/checkbox/Checkbox.vue b/components/ui/checkbox/Checkbox.vue
index 5c04b82..c29ae11 100644
--- a/components/ui/checkbox/Checkbox.vue
+++ b/components/ui/checkbox/Checkbox.vue
@@ -20,7 +20,9 @@ const delegatedProps = computed(() => {
 	return delegated;
 });
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+// FIXME: fix types later!
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const forwarded = useForwardPropsEmits(delegatedProps, emits) as any;
 </script>
 
 <template>