diff --git a/components/search-data-table/data-table.vue b/components/search-data-table/data-table.vue index fa923b9..d489a1d 100644 --- a/components/search-data-table/data-table.vue +++ b/components/search-data-table/data-table.vue @@ -47,7 +47,7 @@ const columns: Array> = [ h(Tooltip, {}, () => [ h(TooltipTrigger, { class: "cursor-default" }, () => [ IconComponent - ? h(IconComponent, { class: "size-4 shrink-0" }) + ? h(IconComponent.icon, { class: "size-4 shrink-0" }) : h("span", {}, workType.map((type) => type.name).join(", ")), ]), h(TooltipContent, {}, () => workType.map((type) => type.name).join(", ")), @@ -58,7 +58,7 @@ const columns: Array> = [ h(Popover, {}, () => [ h(PopoverTrigger, { class: "cursor-default" }, () => [ IconComponent - ? h(IconComponent, { class: "size-4 shrink-0" }) + ? h(IconComponent.icon, { class: "size-4 shrink-0" }) : h("span", {}, workType.map((type) => type.name).join(", ")), ]), h(PopoverContent, {}, () => workType.map((type) => type.name).join(", ")), diff --git a/components/search-filter.vue b/components/search-filter.vue index 8e5484d..6f04668 100644 --- a/components/search-filter.vue +++ b/components/search-filter.vue @@ -10,71 +10,28 @@ import { } from "@/components/ui/accordion"; import type { SearchResultFacets } from "@/types/api"; +interface workType { + id: number; + key: string; + count: number; + children: Array | null; +} + const route = useRoute(); const router = useRouter(); -const primaryWork = [ - { - label: "Prosa", - subterms: [ - "Roman", - "Erzählung", - "Literarischer Text", - "Poetik-Vorlesung", - "Kinder- und Jugendbuch", - "Rede", - "Essay", - "Vorlesung", - "Rezension", - ], - }, - { label: "Lyrik", subterms: [] }, - { label: "Dramatik", subterms: ["Drama", "Hörspieldrehbuch", "Filmdrehbuch, Filmvorlage"] }, - { - label: "Veröffentlichung in audiovisuellen Medien", - subterms: [ - "Hörspiel", - "Film", - "Kinder- und Jugendproduktion", - "Hörspieübersetzung, Hörspielbearbeitung", - "Literatursendung", - "Anderweitiger Beitrag in audiovisuellen Medien", - ], - }, - { label: "Paratext" }, - { label: "Abbildung" }, -]; - -const secondaryWork = [ - { - label: "Akademische Rezeption", - subterms: ["Monografie", "Sammelband", "Artikel", "Journalartikel", "Hochschulschrift"], - }, - { - label: "Journalistische Rezeption", - subterms: [ - "Besprechung", - "Bericht", - "Ankündigung", - "Porträt", - "Anderweitiger Beitrag in audiovisuellen Medien", - ], - }, - { - label: "Produktive Rezeption", - subterms: ["Drama-, Opernaufführung", "Nachdichtung von Barbara Frischmuth"], - }, -]; - const checkedFacets = computed(() => { + const workTypeValue: Array | LocationQueryValue | undefined = + route.query.workType; const languageValue: Array | LocationQueryValue | undefined = route.query.language; const topicValue: Array | LocationQueryValue | undefined = route.query.topic; return { + workType: Array.isArray(workTypeValue) ? workTypeValue : workTypeValue ? [workTypeValue] : [], language: Array.isArray(languageValue) ? languageValue : languageValue ? [languageValue] : [], topic: Array.isArray(topicValue) ? topicValue : topicValue ? [topicValue] : [], - } as { language: Array; topic: Array }; + } as { language: Array; topic: Array; workType: Array }; }); const props = defineProps<{ @@ -82,6 +39,35 @@ const props = defineProps<{ filterCount: number; }>(); +function sortChildrenByCount(item: workType) { + if (!item.children) return item; + + const sortedChildren: Array = item.children + .slice() + .sort((a, b) => b.count - a.count) + .map((child) => sortChildrenByCount(child)); + + return { + ...item, + children: sortedChildren, + }; +} + +const primaryWork = computed(() => { + const primary = + props.facets?.work_type?.find((work_type) => work_type.key === "Primärwerk") ?? null; + + return primary ? sortChildrenByCount(primary as workType) : primary; +}); + +const secondaryWork = computed(() => { + const secondary = + props.facets?.work_type?.find((work_type) => work_type.key === "Rezeption/Sekundärwerk") ?? + null; + + return secondary ? sortChildrenByCount(secondary as workType) : secondary; +}); + const showMore = ref(false); function toggleShowMore() { @@ -128,6 +114,7 @@ function removeFilter() { if (newQuery.language) delete newQuery.language; if (newQuery.topic) delete newQuery.topic; + if (newQuery.workType) delete newQuery.workType; void router.push({ query: newQuery }); selectedCheckboxes.value = []; @@ -136,35 +123,33 @@ function removeFilter() { const slider = { min: 1940, max: 2024 }; const sliderValue = ref([slider.min, slider.max]); -function toggleWork(workLabel: string, subterms: Array) { - const isChecked = selectedCheckboxes.value.includes(workLabel); +function toggleWork(key: string, subterms: Array) { + const isChecked = selectedCheckboxes.value.includes(key); - updateSelectedCheckboxes(workLabel, !isChecked); + updateSelectedCheckboxes(key, !isChecked); subterms.forEach((subterm) => { - updateSelectedCheckboxes(subterm, !isChecked); + updateSelectedCheckboxes(subterm.key as unknown as string, !isChecked); + if (subterm.children != null && subterm.children.length > 0) { + subterm.children.forEach((subterm) => { + updateSelectedCheckboxes(subterm.key as unknown as string, !isChecked); + }); + } }); } -function toggleSubterm(subtermLabel: string, workLabel: string, subterms: Array) { - const isChecked = selectedCheckboxes.value.includes(subtermLabel); - - updateSelectedCheckboxes(subtermLabel, !isChecked); - - const areAllSubtermsChecked = subterms.every((subterm) => - selectedCheckboxes.value.includes(subterm), - ); - - updateSelectedCheckboxes(workLabel, areAllSubtermsChecked); +function toggleSubterm(key: string) { + const isChecked = selectedCheckboxes.value.includes(key); + updateSelectedCheckboxes(key, !isChecked); } -function updateSelectedCheckboxes(label: string, isChecked: boolean) { +function updateSelectedCheckboxes(id: string, isChecked: boolean) { if (isChecked) { - if (!selectedCheckboxes.value.includes(label)) { - selectedCheckboxes.value.push(label); + if (!selectedCheckboxes.value.includes(id)) { + selectedCheckboxes.value.push(id); } } else { - const index = selectedCheckboxes.value.indexOf(label); + const index = selectedCheckboxes.value.indexOf(id); if (index > -1) { selectedCheckboxes.value.splice(index, 1); } @@ -196,219 +181,354 @@ function updateSelectedCheckboxes(label: string, isChecked: boolean) { -
- - - -
Werktyp | Primärliteratur
-
- -
-
-
-
- - -
-
-
-
- - -
-
+
+ + +
+
+ + +
+ +
+
+ Primärliteratur + + ({{ + primaryWork != null && primaryWork?.count > 0 ? primaryWork?.count : 0 + }}) +
-
+
- - - - -
-
- - - -
Werktyp | Sekundärliteratur
-
- -
-
-
-
- - -
-
-
-
- -
-
- - - - -
-
- - - -
Erscheinungsjahr
-
- -
-
-
{{ sliderValue[0] }}
-
{{ sliderValue[1] }}
+ +
+ Keine weiteren Filtermöglichkeiten vorhanden.
- -
- - - - -
-
- - - -
Sprache
-
- + +
+
+ +
+
+ +
-
- Sprachen -
- - ({{ item.count }}) +
+ + +
+ +
+
+ Sekundärlitertur / Rezeption + + ({{ + secondaryWork != null && secondaryWork?.count > 0 + ? secondaryWork?.count + : 0 + }}) + +
-
+
+ +
+
+ Werktyp | Sekundärliteratur / Rezeption +
+
+ +
+ + ({{ work.count }}) +
+
+
+
+
+ +
+
+ + ({{ subwork.count }}) +
+
+
+
+
+
+
+
-
- Keine weiteren Filtermöglichkeiten vorhanden. -
-
-
-
- -
-
- - - -
Thema
-
- -
-
- Themen -
- - ({{ item.count }}) +
+ Keine weiteren Filtermöglichkeiten vorhanden. +
+ + + + +
+
+ + + +
Erscheinungsjahr
+
+ +
+
+
{{ sliderValue[0] }}
+
{{ sliderValue[1] }}
-
-
-
- Keine weiteren Filtermöglichkeiten vorhanden. -
- -
-
-
- -
- + +
+ + + + +
+
+ + + +
Sprache
+
+ +
+
+ Sprachen +
+ + ({{ item.count }}) +
+
+
+ +
+ Keine weiteren Filtermöglichkeiten vorhanden. +
+
+
+
+ +
+
+ + + +
Thema
+
+ +
+
+ Themen +
+ + ({{ item.count }}) +
+
+
+
+ Keine weiteren Filtermöglichkeiten vorhanden. +
+ +
+
+
+ +
+ +
diff --git a/components/search-form.vue b/components/search-form.vue index b2710c0..ec50b90 100644 --- a/components/search-form.vue +++ b/components/search-form.vue @@ -1,6 +1,7 @@