Remove filtersettings url argument by saving settings in local storage

package-lock.json

@@ -751,6 +751,12 @@
       "integrity": "sha1-nufoM3KQ2pUoggGmpX9BcDF4MN4=",
       "dev": true
     },
+    "babel-plugin-syntax-object-rest-spread": {
+      "version": "6.13.0",
+      "resolved": "http://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
+      "integrity": "sha1-/WU28rzhODb/o6VFjEkDpZe7O/U=",
+      "dev": true
+    },
     "babel-plugin-syntax-trailing-function-commas": {
       "version": "6.22.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-6.22.0.tgz",
@@ -1013,6 +1019,16 @@
         "babel-runtime": "^6.22.0"
       }
     },
+    "babel-plugin-transform-object-rest-spread": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz",
+      "integrity": "sha1-DzZpLVD+9rfi1LOsFHgTepY7ewY=",
+      "dev": true,
+      "requires": {
+        "babel-plugin-syntax-object-rest-spread": "^6.8.0",
+        "babel-runtime": "^6.26.0"
+      }
+    },
     "babel-plugin-transform-regenerator": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-transform-regenerator/-/babel-plugin-transform-regenerator-6.26.0.tgz",

package.json

@@ -32,6 +32,7 @@
   "devDependencies": {
     "@symfony/webpack-encore": "^0.19.0",
     "autoprefixer": "^8.6.5",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "node-sass": "^4.9.3",
     "postcss-loader": "^2.1.6",
     "sass-loader": "^6.0.7",

web/typo3conf/ext/ep_products/Classes/Controller/AjaxSearchController.php

@@ -84,8 +84,8 @@ class AjaxSearchController extends ActionController
     /**
      * @param FilterSettings $filterSettings
      * @param integer $referringPageUid
-     *
      * @return string
+     * @throws \Doctrine\DBAL\DBALException
      */
     public function searchresultAction(FilterSettings $filterSettings = null, $referringPageUid = null)
     {
@@ -115,7 +115,6 @@ class AjaxSearchController extends ActionController
         $options = [
             'defaultDetailPageUid' => $this->settings['defaultDetailPageUid'],
             'referringPageUid' => $referringPageUid,
-            'filterSettings' => $filterSettings,
         ];
 
         $this->searchResultUrlService->process($searchResult, $options);

web/typo3conf/ext/ep_products/Classes/Controller/SearchController.php

@@ -110,25 +110,15 @@ class SearchController extends ActionController
      */
     public function searchresultAction(SearchParams $searchParams = null, FilterSettings $filterSettings = null)
     {
-        if ($searchParams === null) {
+        if ($searchParams !== null) {
-            $searchParams = new SearchParams();
-        } else {
             $this->logSearch($searchParams);
-        }
-        if ($filterSettings === null) {
             $filterSettings = FilterSettings::fromSearchParams($searchParams);
         }
-        $excludedConceptUids = GeneralUtility::trimExplode(',', $this->settings['excludedConceptUids']);
-        $filterOptions = $this->filterService->getFilterOptions($filterSettings, $excludedConceptUids);
-        if ($filterOptions === null) {
-            $filterOptions = $this->filterService->getFilterOptions($this->defaultFilterSettings, $excludedConceptUids);
-        }
 
         $this->view->assignMultiple([
             'detailPageUid' => $this->settings['detailPageUid'],
             'referringPageUid' => $GLOBALS['TSFE']->id,
             'filterSettings' => $filterSettings,
-            'filterOptions' => $filterOptions,
         ]);
     }
 

web/typo3conf/ext/ep_products/Classes/Service/SearchResultUrlService.php

@@ -54,13 +54,9 @@ class SearchResultUrlService implements SingletonInterface
     public function process(SearchResult $searchResult, array $options)
     {
         $optionsResolver = new OptionsResolver();
-        $optionsResolver->setRequired([ 'defaultDetailPageUid', 'referringPageUid', 'filterSettings' ]);
+        $optionsResolver->setRequired([ 'defaultDetailPageUid', 'referringPageUid' ]);
-        $optionsResolver->setAllowedTypes('filterSettings', FilterSettings::class);
         $resolvedOptions = $optionsResolver->resolve($options);
 
-        /** @var FilterSettings $filterSettings */
-        $filterSettings = $resolvedOptions['filterSettings'];
-        $encodedFilterSettings = FilterSettingsEncoder::encode($filterSettings);
         $defaultDetailPageUid = $resolvedOptions['defaultDetailPageUid'];
         $referringPageUid = $resolvedOptions['referringPageUid'];
 
@@ -75,7 +71,6 @@ class SearchResultUrlService implements SingletonInterface
                     'product' => $item['product']['uid'],
                     'hotel' => $item['hotel']['uid'],
                     'referringPageUid' => $referringPageUid,
-                    'filterSettings' => $encodedFilterSettings,
                 ];
                 $uri = $this
                     ->uriBuilder

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_filteroptions.js

@@ -0,0 +1,13 @@
+export default {
+    priceRanges: {},
+    destinations: {},
+    concepts: {},
+    pax: [],
+    nights: [],
+    hotelTypes: [],
+    boardTypes: [],
+    roomTypes: [],
+    dateFrom: null,
+    dateTo: null,
+    busAvailable: false
+}

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/DaterangeSelect.vue

@@ -80,15 +80,21 @@
                 }
             }
         },
-        created () {
+        watch: {
+            minDate (date) {
+                this.picker.set('minDate', new Date(date))
+            },
+            maxDate (date) {
+                this.picker.set('maxDate', new Date(date))
+            }
+        },
+        mounted () {
             Vue.nextTick(() => {
                 this.picker = $(this.$refs.field).flatpickr({
                     mode: 'range',
                     dateFormat: 'd.m.Y',
                     locale: German,
                     inline: true,
-                    minDate: new Date(this.minDate),
-                    maxDate: new Date(this.maxDate),
                     onChange: (selectedDates) => {
                         if (selectedDates.length === 2) {
                             this.selectedFrom = selectedDates[0];

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/ProductDetail.vue

@@ -16,6 +16,8 @@
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
 
+    import defaultFilterSettings from '../_filtersettings'
+
     export default {
         components: {
             DatesTable,
@@ -46,16 +48,11 @@
                 detailShow: false,
                 loading: true,
                 activeSection: null,
-                singleDate: false
+                singleDate: false,
+                filterSettings: defaultFilterSettings
             }
         },
         props: {
-            filterSettings: {
-                type: Object,
-                default () {
-                    return {}
-                }
-            },
             argumentPrefix: {
                 type: String,
                 required: true
@@ -190,6 +187,9 @@
             }
         },
         created () {
+            if (this.$session.has('filterSettings')) {
+                this.filterSettings = this.$session.get('filterSettings')
+            }
             EventBus.$on('loadDatesTable', () => {
                 this.loadDatesView();
             });

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/SearchResult.vue

@@ -18,6 +18,7 @@
     import 'dayjs/locale/de'
 
     import defaultFilterSettings from '../_filtersettings'
+    import defaultFilterOptions from '../_filteroptions'
 
     export default {
         components: {
@@ -39,9 +40,8 @@
                 loading: false,
                 resultData: {},
                 resultMeta: null,
-                defaultFilterSettings: defaultFilterSettings,
+                filterSettings: defaultFilterSettings,
-                filterSettings: this.initialFilterSettings,
+                filterOptions: defaultFilterOptions
-                filterOptions: this.initialFilterOptions
             }
         },
         props: {
@@ -51,15 +51,7 @@
             },
             initialFilterSettings: {
                 type: Object,
-                default () {
+                default: null
-                    return defaultFilterSettings;
-                }
-            },
-            initialFilterOptions: {
-                type: Object,
-                default () {
-                    return defaultFilterSettings;
-                }
             },
             referringPageUid: {
                 type: Number
@@ -141,62 +133,81 @@
                 });
             },
             resetFilterSettings () {
-                this.filterSettings = this.defaultFilterSettings;
+                this.updateFilterSettings(defaultFilterSettings);
                 EventBus.$emit('filterSettingsReset');
                 this.loadResults();
             },
             updateDestination (destination) {
-                this.filterSettings.destinationUid = destination.uid;
+                this.updateFilterSettings({
-                this.filterSettings.destinationType = destination.type;
+                    destinationUid: destination.uid,
-                this.filterSettings.destinationName = destination.name;
+                    destinationType: destination.type,
+                    destinationName: destination.name
+                });
                 this.loadResults();
             },
             updateDestinations (destinations) {
-                this.filterSettings.countryUids = destinations.countryUids;
+                this.updateFilterSettings({
-                this.filterSettings.regionUids = destinations.regionUids;
+                    countryUids: destinations.countryUids,
+                    regionUids: destinations.regionUids
+                });
                 this.loadResults();
             },
             updateConcepts (conceptUids) {
-                this.filterSettings.conceptUids = conceptUids;
+                this.updateFilterSettings({ conceptUids: conceptUids });
                 this.loadResults();
             },
             updateDateRange (range) {
-                this.filterSettings.dateFrom = (range.from !== null) ? dayjs(range.from).format('YYYY-MM-DD') : null;
+                const dateFrom = (range.from !== null) ? dayjs(range.from).format('YYYY-MM-DD') : null;
-                this.filterSettings.dateTo = (range.to !== null) ? dayjs(range.to).format('YYYY-MM-DD') : null;
+                const dateTo = (range.to !== null) ? dayjs(range.to).format('YYYY-MM-DD') : null;
+                this.updateFilterSettings({ dateFrom: dateFrom, dateTo: dateTo });
                 this.loadResults();
             },
             updateDateSelectMobile () {
-                if (this.filterSettings.dateFrom === '') {
+                let dateFrom = this.filterSettings.dateFrom;
-                    this.filterSettings.dateFrom = null;
+                let dateTo = this.filterSettings.dateTo;
+                if (dateFrom === '') {
+                    dateFrom = null;
                 }
-                if (this.filterSettings.dateTo === '') {
+                if (dateTo === '') {
-                    this.filterSettings.dateTo = null;
+                    dateTo = null;
                 }
+                this.updateFilterSettings({ dateFrom: dateFrom, dateTo: dateTo });
                 this.loadResults();
             },
             updatePriceRange (range) {
-                this.filterSettings.priceRange = range;
+                this.updateFilterSettings({ priceRange: range });
                 this.loadResults();
             },
             updatePax (pax) {
-                this.filterSettings.pax = pax;
+                this.updateFilterSettings({ pax: pax });
                 this.loadResults();
             },
             updateHotelTypes (hotelTypes) {
-                this.filterSettings.hotelTypes = hotelTypes;
+                this.updateFilterSettings({ hotelTypes: hotelTypes });
                 this.loadResults();
             },
-            updateBoardTypes (hotelTypes) {
+            updateBoardTypes (boardTypes) {
-                this.filterSettings.boardTypes = hotelTypes;
+                this.updateFilterSettings({ boardTypes: boardTypes });
                 this.loadResults();
             },
             updateRoomTypes (roomTypes) {
-                this.filterSettings.roomTypes = roomTypes;
+                this.updateFilterSettings({ roomTypes: roomTypes });
                 this.loadResults();
             },
             updateBus (bus) {
-                this.filterSettings.bus = bus;
+                this.updateFilterSettings({ bus: bus });
                 this.loadResults();
+            },
+            updateFilterSettings (settings) {
+                this.filterSettings = { ...this.filterSettings, ...settings };
+                this.$session.set('filterSettings', this.filterSettings);
+            }
+        },
+        created () {
+            if (!$.isEmptyObject(this.initialFilterSettings)) {
+                this.updateFilterSettings(this.initialFilterSettings)
+            } else if (this.$session.has('filterSettings')) {
+                this.updateFilterSettings(this.$session.get('filterSettings'))
             }
         },
         mounted () {

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Product/Detail.html

@@ -11,7 +11,6 @@
         <div class="container" id="detail">
             <noscript><h1>{product.headline}</h1></noscript>
             <product-detail
-                :filter-settings='<v:format.json.encode>{filterSettings}</v:format.json.encode>'
                 :uris='{
                     dates: "<f:format.raw>{ep:uri.ajax(action: 'dates', controller: 'AjaxDate', arguments: '{product: product, hotel: hotel}', format: 'json', noCacheHash: 1)}</f:format.raw>",
                     contingents: "<f:format.raw>{ep:uri.ajax(action: 'list', controller: 'AjaxContingent', format: 'json', noCacheHash: 1)}</f:format.raw>",

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchresult.html

@@ -10,7 +10,6 @@
             <search-result
                 results-uri="{ep:uri.ajax(action: 'searchresult', controller: 'AjaxSearch', pageUid: settings.defaultAjaxUid, format: 'json')}"
                 :initial-filter-settings='<v:format.json.encode>{filterSettings}</v:format.json.encode>'
-                :initial-filter-options='<v:format.json.encode>{filterOptions}</v:format.json.encode>'
                 :referring-page-uid="{referringPageUid}"
                 argument-prefix="{ep:argumentPrefix(pluginName: 'ajax')}"
                 :date-presets='{settings.datePickerPresets -> v:format.json.encode()}'

webpack.config.js

@@ -26,6 +26,9 @@ Encore
         css: 'css/[name].css',
         images: 'images/[name].[ext]'
     })
+    .configureBabel(function (babelConfig) {
+        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+    })
 ;
 
 const EpThemeConfig = Encore.getWebpackConfig();
@@ -50,6 +53,9 @@ Encore
         css: 'css/[name].css',
         images: 'images/[name].[ext]'
     })
+    .configureBabel(function (babelConfig) {
+        babelConfig.plugins = [ 'transform-object-rest-spread' ]
+    })
 ;
 
 const EpEventsConfig = Encore.getWebpackConfig();