From 48a6951e78a644fd25492a30b26f51483013c5a9 Mon Sep 17 00:00:00 2001
From: FrantisekMichalSebestyen <sebestyen.frantisek.michal@gmail.com>
Date: Thu, 24 Aug 2023 09:20:40 +0200
Subject: [PATCH] fix: handle aggregation funct on FE (#883)

* fix: handle aggregation funct on FE

* feat: year slider functionality

* fix: remove unnecessary code

* fix: rmeove unnecessary type conversion
---
 app/Http/Controllers/NewCatalogController.php | 10 +-------
 app/Item.php                                  | 25 -------------------
 .../catalog-new/ItemsFilterController.vue     |  6 ++++-
 .../catalog-new/SearchOptionsController.vue   | 17 ++++++++++---
 .../frontend/catalog-new/index-new.blade.php  | 18 +++++++------
 5 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/app/Http/Controllers/NewCatalogController.php b/app/Http/Controllers/NewCatalogController.php
index 333890819..a769b7418 100644
--- a/app/Http/Controllers/NewCatalogController.php
+++ b/app/Http/Controllers/NewCatalogController.php
@@ -15,14 +15,6 @@ class NewCatalogController extends Controller
      */
     public function index()
     {
-        $yearLimits = Cache::remember(
-            'items.year-limits',
-            now()->addHours(1),
-            fn() => Item::getYearLimits()
-        );
-
-        return view('frontend.catalog-new.index-new', [
-            'yearLimits' => $yearLimits,
-        ]);
+        return view('frontend.catalog-new.index-new');
     }
 }
diff --git a/app/Item.php b/app/Item.php
index 89d548dcc..abd9467f9 100644
--- a/app/Item.php
+++ b/app/Item.php
@@ -144,31 +144,6 @@ public function getCitation()
         return $this->getTitleWithAuthors() . ', ' . $this->getDatingFormated() . ', ' . $this->gallery . ', ' . $this->getUrl();
     }
 
-    // Get limits from elastic, because date_earliest and date_latest 
-    // are not indexed in DB
-    public static function getYearLimits()
-    {
-        $searchResult = self::searchQuery(Query::matchAll())
-            ->size(false)
-            ->aggregate('min', [
-                'min' => [
-                    'field' => 'date_earliest',
-                ],
-            ])
-            ->aggregate('max', [
-                'max' => [
-                    'field' => 'date_latest',
-                ],
-            ])
-            ->execute()
-            ->raw();
-
-        return [
-            'min' => $searchResult['aggregations']['min']['value'],
-            'max' => $searchResult['aggregations']['max']['value'],
-        ];
-    }
-
     public static function loadValidatorMetadata(ClassMetadata $metadata) {
         $metadata->addGetterConstraint('images', new Valid());
     }
diff --git a/resources/js/components/catalog-new/ItemsFilterController.vue b/resources/js/components/catalog-new/ItemsFilterController.vue
index 4315f6e53..8d8a7300f 100644
--- a/resources/js/components/catalog-new/ItemsFilterController.vue
+++ b/resources/js/components/catalog-new/ItemsFilterController.vue
@@ -23,7 +23,7 @@ function getParsedFilterFromUrl() {
 }
 
 function stringifyUrl({ url, params }) {
-    const { filter, size, terms, page } = params
+    const { filter, size, terms, page, min, max } = params
     const {
         yearRange,
         author,
@@ -63,6 +63,8 @@ function stringifyUrl({ url, params }) {
         sort: {
             [sort]: SORT_DIRECTIONS[sort],
         },
+        min,
+        max,
         page,
         terms,
         size,
@@ -254,6 +256,8 @@ export default {
                                 filter: this.query,
                                 terms: AGGREGATIONS_TERMS,
                                 size: AGGREGATIONS_SIZE,
+                                min: { date_earliest: 'date_earliest' },
+                                max: { date_latest: 'date_latest' },
                             },
                         }),
                         { headers: this.apiHeaders }
diff --git a/resources/js/components/catalog-new/SearchOptionsController.vue b/resources/js/components/catalog-new/SearchOptionsController.vue
index 0903c17bc..d7107e6b7 100644
--- a/resources/js/components/catalog-new/SearchOptionsController.vue
+++ b/resources/js/components/catalog-new/SearchOptionsController.vue
@@ -10,12 +10,21 @@ export default {
         filteredOptions() {
             // TODO better matching algorithm?
             const query = this.search.toLowerCase()
-            return this.options
-                .filter((option) => option.value.toLowerCase().includes(query))
-                .map((option) => ({
+            const optionsWithSelected = [
+                ...this.options.map((option) => ({
                     ...option,
                     checked: this.selected.includes(option.value),
-                }))
+                })),
+                ...this.selected
+                    .filter((queryItem) =>
+                        this.options.every((option) => option.value !== queryItem)
+                    )
+                    .map((selected) => ({ value: selected, count: 0, checked: true })),
+            ]
+
+            return optionsWithSelected.filter((option) =>
+                option.value.toLowerCase().includes(query)
+            )
         },
     },
     render() {
diff --git a/resources/views/frontend/catalog-new/index-new.blade.php b/resources/views/frontend/catalog-new/index-new.blade.php
index 8bf72cf7a..8b48d7e58 100644
--- a/resources/views/frontend/catalog-new/index-new.blade.php
+++ b/resources/views/frontend/catalog-new/index-new.blade.php
@@ -228,10 +228,12 @@ class="tw-mb-3">
                                                                 {{ trans('item.filter.clear') }}
                                                             </x-filter.reset_button>
                                                         </div>
-                                                        <filter-new-year-slider :default-from="Number(query.yearRange?.from)"
-                                                            :default-to="Number(query.yearRange?.to)" :min="{{ $yearLimits['min'] ?? 0 }}"
-                                                            :max="{{ $yearLimits['max'] ?? now()->year }}"
-                                                            @change="handleYearRangeChange">
+                                                        <filter-new-year-slider
+                                                            v-bind:default-from="query.yearRange?.from"
+                                                            v-bind:default-to="query.yearRange?.to"
+                                                            v-bind:min="aggregations.date_earliest - 5"
+                                                            v-bind:max="Math.min(aggregations.date_latest + 5, new Date().getFullYear())"
+                                                            v-on:change="handleYearRangeChange">
                                                         </filter-new-year-slider>
                                                     </div>
                                                 </div>
@@ -389,9 +391,11 @@ class="tw-ml-2"
                                                             @endslot
                                                             @slot('body')
                                                                 <filter-new-year-slider class="tw-px-4"
-                                                                    :default-from="Number(query.yearRange?.from)" :default-to="Number(query.yearRange?.to)"
-                                                                    :min="{{ $yearLimits['min'] ?? 0 }}" :max="{{ $yearLimits['max'] ?? now()->year }}"
-                                                                    @change="handleYearRangeChange">
+                                                                    v-bind:default-from="query.yearRange?.from"
+                                                                    v-bind:default-to="query.yearRange?.to"
+                                                                    v-bind:min="aggregations.date_earliest - 5"
+                                                                    v-bind:max="Math.min(aggregations.date_latest + 5, new Date().getFullYear())"
+                                                                    v-on:change="handleYearRangeChange">
                                                                 </filter-new-year-slider>
                                                                 <div v-if="query.yearRange"
                                                                     class="tw-flex tw-justify-center">