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
SlovakNationalGallery · Aug 24, 2023 · 48a6951 · 48a6951
1 parent 5894192
commit 48a6951
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 46 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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">