Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feat/search table #5

Merged
merged 4 commits into from
Jun 14, 2024
Merged

Feat/search table #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c2daa0b
chore: add all relevant columns to the search-results table
oliviareichl May 28, 2024
b27c3e4
feat: pagination and search / filtering ui
oliviareichl Jun 14, 2024
fa92621
fix: add new pnpm version to the package manager
oliviareichl Jun 14, 2024
999e519
fix: ignore typescript errors
oliviareichl Jun 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
121 changes: 84 additions & 37 deletions components/search-data-table/data-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,16 +13,62 @@ import type { SearchResults } from "@/types/api.ts";

const props = defineProps<{
data: SearchResults["results"];
resultsTotal: number;
}>();

const columns: Array<ColumnDef<SearchResults["results"][number]>> = [
{
accessorKey: "work_type",
header: () => h("div", "Typ"),
cell: ({ row }) => {
// 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(", "));
},
},
{
accessorKey: "title",
header: () => h("div", "Titel"),
cell: ({ row }) => {
return h("div", row.getValue("title"));
},
},
{
accessorKey: "expression_data",
header: () => h("div", "Edition"),
cell: ({ row }) => {
// 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 }) => {
// 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 }) => {
// 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 }) => {
// 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(", "));
},
},
];

const table = useVueTable({
Expand All @@ -37,43 +83,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>
114 changes: 114 additions & 0 deletions components/search-filter.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,114 @@
<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>
<!-- FIX ME: Make checkbox groups!-->
<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>
57 changes: 57 additions & 0 deletions components/search-form.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 6 additions & 1 deletion components/ui/button/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -14,13 +14,18 @@ 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",
xs: "h-7 rounded px-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "size-9",
searchform: "h-9",
},
},
defaultVariants: {
Expand Down
44 changes: 44 additions & 0 deletions components/ui/checkbox/Checkbox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
<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;
});

// FIXME: fix types later!
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const forwarded = useForwardPropsEmits(delegatedProps, emits) as any;
</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>
1 change: 1 addition & 0 deletions components/ui/checkbox/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default as Checkbox } from "./Checkbox.vue";
Loading
Loading