Skip to content

Commit

Permalink
AuthorSelectOptions
Browse files Browse the repository at this point in the history
  • Loading branch information
eronisko committed Apr 25, 2024
1 parent d4d5646 commit 90808fe
Show file tree
Hide file tree
Showing 4 changed files with 28 additions and 22 deletions.
2 changes: 2 additions & 0 deletions resources/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down Expand Up @@ -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)
Expand Down
8 changes: 8 additions & 0 deletions resources/js/components/catalog-new/AuthorSelectOptions.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<script setup>
import SelectOptions from './SelectOptions.vue'
import { formatAuthorName } from './formatters.js'
</script>

<template>
<SelectOptions :formatLabel="formatAuthorName" />
</template>
23 changes: 14 additions & 9 deletions resources/js/components/catalog-new/SelectOptions.vue
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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
})
Expand Down Expand Up @@ -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>
Expand Down
17 changes: 4 additions & 13 deletions resources/views/frontend/catalog-new/index.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down

0 comments on commit 90808fe

Please sign in to comment.