From c4c065ab6193abb8df773ea6142e152cf4babfff Mon Sep 17 00:00:00 2001
From: Ernest Walzel <ernest.walzel@sng.sk>
Date: Fri, 19 Apr 2024 22:29:53 +0200
Subject: [PATCH] SortSelect using radix-vue

---
 resources/js/app.js                           |   2 +
 .../js/components/catalog-new/SortSelect.vue  |  88 ++++++++++++++
 .../frontend/catalog-new/index.blade.php      | 107 +-----------------
 3 files changed, 96 insertions(+), 101 deletions(-)
 create mode 100644 resources/js/components/catalog-new/SortSelect.vue

diff --git a/resources/js/app.js b/resources/js/app.js
index f1eb3592a..e64682c74 100644
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -44,6 +44,7 @@ import CatalogNewArtworkImageController from './components/catalog-new/ArtworkIm
 import CatalogNewNumberFormatter from './components/catalog-new/NumberFormatter.vue'
 import CatalogNewAuthorFormatter from './components/catalog-new/AuthorFormatter.vue'
 import CatalogNewPopover from './components/catalog-new/Popover.vue'
+import CatalogNewSortSelect from './components/catalog-new/SortSelect.vue'
 import Flickity from './components/Flickity.vue'
 import HomeShuffleOrchestrator from './components/home/ShuffleOrchestrator.vue'
 import HomeTransitionInPlace from './components/home/TransitionInPlace.vue'
@@ -103,6 +104,7 @@ createApp({
     .component('catalog.number-formatter', CatalogNewNumberFormatter)
     .component('catalog.author-formatter', CatalogNewAuthorFormatter)
     .component('catalog.popover', CatalogNewPopover)
+    .component('catalog.sort-select', CatalogNewSortSelect)
     .component('flickity', Flickity)
     .component('home.shuffle-orchestrator', HomeShuffleOrchestrator)
     .component('home.transition-in-place', HomeTransitionInPlace)
diff --git a/resources/js/components/catalog-new/SortSelect.vue b/resources/js/components/catalog-new/SortSelect.vue
new file mode 100644
index 000000000..2679a3376
--- /dev/null
+++ b/resources/js/components/catalog-new/SortSelect.vue
@@ -0,0 +1,88 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { trans } from 'laravel-vue-i18n'
+import {
+    SelectRoot,
+    SelectTrigger,
+    SelectPortal,
+    SelectContent,
+    SelectViewport,
+    SelectItem,
+    SelectItemText,
+} from 'radix-vue'
+import CaretUpIcon from './icons/CaretUp.vue'
+
+const props = defineProps({
+    defaultValue: String,
+})
+
+const value = ref(props.defaultValue ?? 'relevance')
+
+const emit = defineEmits(['change'])
+
+const options = [
+    { value: 'created_at', label: trans('sortable.created_at') },
+    { value: 'title', label: trans('sortable.title') },
+    { value: 'author', label: trans('sortable.author') },
+    { value: 'date_earliest', label: trans('sortable.oldest') },
+    { value: 'date_latest', label: trans('sortable.newest') },
+    { value: 'view_count', label: trans('sortable.view_count') },
+    { value: 'random', label: trans('sortable.random') },
+    { value: 'updated_at', label: trans('sortable.updated_at') },
+    { value: 'relevance', label: trans('sortable.relevance') },
+]
+
+const label = computed(
+    () => options.find((option) => option.value === value.value)?.label ?? value.value
+)
+</script>
+<template>
+    <SelectRoot v-model="value" @update:modelValue="emit('change', value)">
+        <SelectTrigger
+            class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4 tw-outline-none"
+        >
+            <transition
+                enter-from-class="tw-opacity-0"
+                leave-to-class="tw-opacity-0"
+                enter-active-class="tw-duration-50 tw-transition"
+                leave-active-class="tw-duration-50 tw-transition"
+                mode="out-in"
+            >
+                <div class="tw-flex tw-items-center tw-space-x-1" :key="value">
+                    <span>
+                        {{ label }}
+                    </span>
+                    <CaretUpIcon class="tw-h-4 tw-w-4 tw-rotate-180" />
+                </div>
+            </transition>
+        </SelectTrigger>
+
+        <SelectPortal>
+            <div class="tailwind-rules">
+                <transition
+                    enter-from-class="tw-opacity-0"
+                    leave-to-class="tw-opacity-0"
+                    enter-active-class="tw-transition-opacity tw-duration-100"
+                    leave-active-class="tw-transition-opacity tw-duration-100"
+                >
+                    <SelectContent
+                        position="popper"
+                        class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4"
+                    >
+                        <SelectViewport>
+                            <SelectItem
+                                v-for="option in options"
+                                v-show="option.value !== value"
+                                :key="option.value"
+                                :value="option.value"
+                                class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200 tw-outline-none"
+                            >
+                                <SelectItemText>{{ option.label }}</SelectItemText>
+                            </SelectItem>
+                        </SelectViewport>
+                    </SelectContent>
+                </transition>
+            </div>
+        </SelectPortal>
+    </SelectRoot>
+</template>
diff --git a/resources/views/frontend/catalog-new/index.blade.php b/resources/views/frontend/catalog-new/index.blade.php
index 9a30e6976..f31e3c732 100644
--- a/resources/views/frontend/catalog-new/index.blade.php
+++ b/resources/views/frontend/catalog-new/index.blade.php
@@ -872,108 +872,13 @@ class="tw-capitalize">{{ trans_choice('item.filter.displaying', 5) }}</span>
                                         <catalog.number-formatter v-bind:value="artworks_total">
                                         </catalog.number-formatter>
                                     </span>
-                                    {{ trans_choice('item.filter.artworks_sorted_by', 5) }}</span>
-                                <span class="tw-font-semibold">
-                                    <div class="tw-z-10 tw-inline-block">
-                                        <filter-new-popover.group-controller>
-                                            <filter-popover-controller name="sort">
-                                                <template #button="pc">
-                                                    <button id="button-sort"
-                                                        class="tw-font-bold tw-underline tw-decoration-2 tw-underline-offset-4"
-                                                        v-on:click="pc.togglePopover('sort')">
-                                                        <transition enter-from-class="tw-opacity-0"
-                                                            leave-to-class="tw-opacity-0"
-                                                            enter-active-class="tw-duration-50 tw-transition"
-                                                            leave-active-class="tw-duration-50 tw-transition"
-                                                            mode="out-in">
-                                                            <span
-                                                                v-if="query.sort === 'created_at' ">{{ trans('sortable.created_at') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'title' ">{{ trans('sortable.title') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'author' ">{{ trans('sortable.author') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'date_earliest' ">{{ trans('sortable.oldest') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'date_latest' ">{{ trans('sortable.newest') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'view_count' ">{{ trans('sortable.view_count') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'random' ">{{ trans('sortable.random') }}</span>
-                                                            <span
-                                                                v-else-if="query.sort === 'updated_at'">{{ trans('sortable.updated_at') }}</span>
-                                                            <span
-                                                                v-else>{{ trans('sortable.relevance') }}</span>
-                                                        </transition>
-                                                        <x-icons.caret-down
-                                                            class="tw-inline tw-h-4 tw-w-4 tw-fill-current">
-                                                        </x-icons.caret-down>
-                                                    </button>
-
-                                                </template>
-                                                <template #body="pc">
-                                                    <transition enter-from-class="tw-opacity-0"
-                                                        leave-to-class="tw-opacity-0"
-                                                        enter-active-class="tw-transition tw-duration-100"
-                                                        leave-active-class="tw-transition tw-duration-100">
-                                                        <div v-if="pc.isOpen"
-                                                            v-click-away="pc.closeOpenedPopover"
-                                                            class="tw-w-80 tw-border-2 tw-border-gray-800 tw-bg-white tw-p-4">
-
-                                                            <ul>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('created_at');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'created_at'">
-                                                                    {{ trans('sortable.created_at') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('title');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'title'">
-                                                                    {{ trans('sortable.title') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('author');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'author'">
-                                                                    {{ trans('sortable.author') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('date_earliest');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'date_earliest'">
-                                                                    {{ trans('sortable.oldest') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('date_latest');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'date_latest'">
-                                                                    {{ trans('sortable.newest') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('view_count');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'view_count'">
-                                                                    {{ trans('sortable.view_count') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('random');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'random'">
-                                                                    {{ trans('sortable.random') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange('updated_at');pc.closeOpenedPopover()"
-                                                                    v-if="query.sort !== 'updated_at'">
-                                                                    {{ trans('sortable.updated_at') }}
-                                                                </li>
-                                                                <li class="tw-cursor-pointer tw-py-0.5 tw-pl-2 hover:tw-bg-gray-200"
-                                                                    v-on:click="handleSortChange(null);pc.closeOpenedPopover()"
-                                                                    v-if="query.sort">
-                                                                    {{ trans('sortable.relevance') }}
-                                                                </li>
-                                                            </ul>
-                                                        </div>
-                                                    </transition>
-                                                </template>
-                                            </filter-popover-controller>
-                                        </filter-new-popover.group-controller>
-                                    </div>
+                                    {{ trans_choice('item.filter.artworks_sorted_by', 5) }}
                                 </span>
+
+                                <catalog.sort-select
+                                    v-on:change="handleSortChange"
+                                    v-bind:default-value="query.sort">
+                                </catalog.sort-select>
                                 <span>
                                     {{ utrans('item.filter.try_also') }}
                                     <button v-on:click="handleSelectRandomly"