From 635c4c914a558e6f13969c7c65abe6c955bcbcaa Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Thu, 25 Apr 2024 14:48:11 +0200
Subject: [PATCH] AuthorSelectOptions

---
 resources/js/app.js                           |  2 ++
 .../catalog-new/AuthorSelectOptions.vue       |  8 +++++++
 .../components/catalog-new/SelectOptions.vue  | 23 +++++++++++--------
 .../frontend/catalog-new/index.blade.php      | 17 ++++----------
 4 files changed, 28 insertions(+), 22 deletions(-)
 create mode 100644 resources/js/components/catalog-new/AuthorSelectOptions.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index 992f10508..a149614b4 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -28,6 +28,7 @@ import FeaturedPieceClickTracker from './components/FeaturedPieceClickTracker.vu
 import FilterSortBy from './components/filter/SortBy.vue'
 import FilterCheckbox from './components/filter/Checkbox.vue'
 import FilterCustomSelect from './components/filter/CustomSelect.vue'
+import CatalogNewAuthorSelectOptions from './components/catalog-new/AuthorSelectOptions.vue'
 import CatalogNewEmptyAnimation from './components/catalog-new/EmptyAnimation.vue'
 import CatalogNewItemsFilterController from './components/catalog-new/ItemsFilterController.vue'
 import CatalogNewNewCustomSelectPopoverLabel from './components/catalog-new/NewCustomSelectPopoverLabel.vue'
@@ -93,6 +94,7 @@ createApp({
     .component('filter-disclosure-controller', CatalogNewDisclosureModalController)
     .component('toggle-controller', ToggleController)
     .component('reload-controller', ReloadController)
+    .component('catalog.author-select-options', CatalogNewAuthorSelectOptions)
     .component('catalog.empty-animation', CatalogNewEmptyAnimation)
     .component('catalog.infinite-scroll', CatalogNewInfiniteScroll)
     .component('catalog.artwork-image-controller', CatalogNewArtworkImageController)
diff --git a/resources/js/components/catalog-new/AuthorSelectOptions.vue b/resources/js/components/catalog-new/AuthorSelectOptions.vue
new file mode 100644
index 000000000..e4562678e
--- /dev/null
+++ b/resources/js/components/catalog-new/AuthorSelectOptions.vue
@@ -0,0 +1,8 @@
+<script setup>
+import SelectOptions from './SelectOptions.vue'
+import { formatAuthorName } from './formatters.js'
+</script>
+
+<template>
+    <SelectOptions :formatLabel="formatAuthorName" />
+</template>
diff --git a/resources/js/components/catalog-new/SelectOptions.vue b/resources/js/components/catalog-new/SelectOptions.vue
index 95ed6b82c..808abe393 100644
--- a/resources/js/components/catalog-new/SelectOptions.vue
+++ b/resources/js/components/catalog-new/SelectOptions.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { matchSorter } from 'match-sorter'
-import { formatAuthorName } from './formatters'
 
 import ResetButton from './ResetButton.vue'
 import Count from './NumberFormatter.vue'
@@ -11,27 +10,35 @@ const props = defineProps<{
     options: { value: string; count: number }[]
     selected?: string[]
     searchPlaceholder: string
+    formatLabel?: (value: string) => string
 }>()
 
 const emit = defineEmits(['change', 'reset'])
+
+const selected = props.selected ?? []
+const formatLabel = props.formatLabel ?? ((value: string) => value)
+
 const search = ref('')
 
 const options = computed(() => {
-    const selected = props.selected ?? []
     const optionsWithSelected = [
         ...props.options.map((option) => ({
             ...option,
             checked: selected.includes(option.value),
+            label: formatLabel(option.value),
         })),
         ...selected
             .filter((queryItem) => props.options.every((option) => option.value !== queryItem))
-            .map((selected) => ({ value: selected, count: 0, checked: true })),
+            .map((value) => ({
+                value,
+                count: 0,
+                checked: true,
+                label: formatLabel(value),
+            })),
     ]
     return search.value
         ? matchSorter(optionsWithSelected, search.value, {
-              keys: [
-                  (option: (typeof optionsWithSelected)[number]) => formatAuthorName(option.value),
-              ],
+              keys: ['label'],
           })
         : optionsWithSelected
 })
@@ -80,9 +87,7 @@ const options = computed(() => {
                     @change="emit('change', $event)"
                 />
                 <span class="tw-inline-block tw-min-w-0 tw-break-words tw-text-base tw-font-normal">
-                    <slot name="label" :option="option">
-                        {{ option.value }}
-                    </slot>
+                    {{ option.label }}
                     <span class="tw-font-semibold"> (<Count :value="option.count" />) </span>
                 </span>
             </label>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index 6057bf15a..b9403c423 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -30,17 +30,13 @@ class="tw-hidden tw-gap-x-3 tw-gap-y-2 tw-overflow-x-auto md:tw-flex md:tw-flex-
                                     </template>
                                     <template #content>
                                         <div class="tw-w-64">
-                                            <catalog.select-options
+                                            <catalog.author-select-options
                                                 search-placeholder="{{ trans('item.filter.placeholder.name_human') }}"
                                                 v-bind:options="aggregations.author"
                                                 v-bind:selected="query.author"
                                                 v-on:change="e => handleMultiSelectChange('author', e)"
                                                 v-on:reset="clearFilterSelection('author')">
-                                                <template #label="{ option }">
-                                                    <catalog.author-formatter v-bind:value="option.value">
-                                                    </catalog.author-formatter>
-                                                </template>
-                                            </catalog.select-options>
+                                            </catalog.author-select-options>
                                         </div>
                                     </template>
                                 </catalog.popover>
@@ -492,18 +488,13 @@ class="tw-pb-2"
                                                         @slot('body')
                                                             <div
                                                                 class="tw-inset-x-0 tw-box-border tw-flex tw-min-h-0 tw-flex-1 tw-flex-col tw-overflow-auto">
-                                                                <catalog.select-options
+                                                                <catalog.author-select-options
                                                                     search-placeholder="{{ utrans('item.filter.placeholder.name_human') }}"
                                                                     v-bind:options="aggregations.author"
                                                                     v-bind:selected="query.author"
                                                                     v-on:change="e => handleMultiSelectChange('author', e)"
                                                                     v-on:reset="clearFilterSelection('author')">
-                                                                    <template #label="{ option }">
-                                                                        <catalog.author-formatter
-                                                                            v-bind:value="option.value">
-                                                                        </catalog.author-formatter>
-                                                                    </template>
-                                                                </catalog.select-options>
+                                                                </catalog.author-select-options>
                                                             </div>
                                                         @endslot
                                                     </x-filter.disclosure_view>