Show selected/active filters (#587)

Author: BobWez98

resources/js/components/Listing/Filters/SelectedFiltersValues.vue

@@ -0,0 +1,56 @@
+<script>
+import { swatches } from '../../../stores/useSwatches'
+
+export default {
+    props: {
+        selectedValues: {
+            type: Object,
+            default: () => {},
+        },
+    },
+
+    render() {
+        return this.$scopedSlots.default(this)
+    },
+
+    computed: {
+        activeFilters() {
+            return Object.keys(this.selectedValues)
+                .filter((filterKey) => {
+                    let { showFilter, value } = this.selectedValues[filterKey]
+                    return showFilter && (Array.isArray(value) ? value.length : !!value)
+                })
+                .reduce((result, filterKey) => {
+                    let { value } = this.selectedValues[filterKey]
+
+                    if (filterKey === 'category') {
+                        return result.concat({ code: filterKey, value: config.subcategories[value] })
+                    }
+
+                    if (filterKey === 'price') {
+                        let [minPrice, maxPrice] = value
+                        return result.concat({ code: filterKey, value: price(minPrice) + ' - ' + price(maxPrice) })
+                    }
+
+                    if (Array.isArray(value)) {
+                        // Check if the value is a swatch value, boolean or just an array
+                        let items = Object.keys(swatches.value).includes(filterKey)
+                            ? value.map((selected) => swatches.value[filterKey].options[selected].label)
+                            : value.map((item) =>
+                                  item === '0'
+                                      ? window.config.translations.filters.no
+                                      : item === '1'
+                                        ? window.config.translations.filters.yes
+                                        : item,
+                              )
+
+                        // We can have a filter where multiple values may be selected, so we need to map and concat all of them
+                        return result.concat(items.map((item) => ({ code: filterKey, value: item })))
+                    }
+
+                    return result
+                }, [])
+        },
+    },
+}
+</script>

resources/js/filters.js

@@ -1,17 +1,21 @@
-Vue.filter('truncate', function (value, limit) {
+window.truncate = function (value, limit) {
     if (value.length > limit) {
         value = value.substring(0, limit - 3) + '...'
     }
 
     return value
-})
+}
+
+Vue.filter('truncate', window.truncate)
 
-Vue.filter('price', function (value) {
+window.price = function (value) {
     return new Intl.NumberFormat(config.locale.replace('_', '-'), {
         style: 'currency',
         currency: config.currency,
     }).format(value)
-})
+}
+
+Vue.filter('price', window.price)
 
 window.url = function (path = '') {
     // Transform urls starting with / into url with domain

resources/js/vue-components.js

@@ -28,3 +28,4 @@ Vue.component('login', () => import('./components/User/Login.vue'))
 Vue.component('listing', () => import('./components/Listing/Listing.vue'))
 Vue.component('checkout-success', () => import('./components/Checkout/CheckoutSuccess.vue'))
 Vue.component('popup', () => import('./components/Popup.vue'))
+Vue.component('selected-filters-values', () => import('./components/Listing/Filters/SelectedFiltersValues.vue'))

resources/lang/en/frontend.php

@@ -23,6 +23,11 @@
         'email'             => 'An email address is required.',
     ],
 
+    'filters' => [
+        'no'  => 'No',
+        'yes' => 'Yes',
+    ],
+
     'asc'       => 'asc',
     'desc'      => 'desc',
     'relevance' => 'Relevance',

resources/views/listing/partials/filter/price.blade.php

@@ -4,7 +4,6 @@
             :component-id="filter.code"
             :data-field="filter.code"
             :react="{and: ['query-filter']}"
-            :show-filter="false"
             :slider-options="{ dragOnClick: true, useKeyboard: false }"
             :inner-class="{
                 slider: '!pt-4 !mt-0 mx-2',

resources/views/listing/partials/filter/selected.blade.php

@@ -1,20 +1,32 @@
-<selected-filters :inner-class="{ button: '!hidden last:!inline-flex' }">
-    <x-rapidez::button
-        class="w-full mb-3 text-sm"
-        slot-scope="{ clearValues, selectedValues, components }"
-        v-on:click="clearValues"
+<selected-filters>
+    <div
+        slot-scope="{ clearValues, selectedValues, setValue, components }"
         v-if="Object.keys(selectedValues).filter(function (id) {
             let value = selectedValues[id].value
             let isArray = Array.isArray(value)
-
-            return components.includes(id)
-                && selectedValues[id].showFilter
-                && (
-                    (isArray && value.length)
-                    || (!isArray && value)
-                )
-        }).length"
+            return components.includes(id) && selectedValues[id].showFilter && ((isArray && value.length) || (!isArray && value))}).length"
     >
-        @lang('Reset filters')
-    </x-rapidez::button>
+        <selected-filters-values :selected-values="selectedValues">
+            <div slot-scope="{ activeFilters }" class="flex flex-wrap items-center w-full md:w-auto relative mb-5">
+                <div class="flex flex-wrap items-baseline justify-between gap-2 w-full border-t py-4">
+                    <div class="text-neutral font-semibold text-base font-sans">
+                        @lang('You have filtered on'):
+                    </div>
+                    <button v-on:click="clearValues" class="!font-sans text-sm text-inactive transition-all hover:underline">
+                        @lang('Reset filters')
+                    </button>
+                </div>
+                <div class="flex gap-2 flex-wrap">
+                    <div class="flex flex-wrap gap-2 relative cursor-pointer" v-for="filter in activeFilters">
+                        <div v-on:click="setValue(filter.code, null)" class="flex justify-between items-center transition hover:opacity-80">
+                            <span class="font-sans flex gap-1 p-1 items-center text-xs test-neutral rounded-lg bg-inactive-100">
+                                @{{ filter.value }}
+                                <x-heroicon-o-x-mark class="size-3 shrink-0 text-neutral"/>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </selected-filters-values>
+    </div>
 </selected-filters>

src/Http/Controllers/CategoryController.php

@@ -10,6 +10,7 @@ public function show(int $categoryId)
         $category = $categoryModel::findOrFail($categoryId);
 
         config(['frontend.category' => $category->only('entity_id')]);
+        config(['frontend.subcategories' => $category->subcategories->pluck('name', 'entity_id')]);
         session(['latest_category_path' => $category->path]);
 
         return view('rapidez::category.overview', compact('category'));