Code cleanup

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search-bar.js

@@ -17,18 +17,16 @@ export default props => ({
     dateRangeLabel: null,
     init() {
         this.$watch('dateRangeSelected', () => {
-            let dateRangeLabel = ''
             if (null === this.dateRangeSelected.from && null === this.dateRangeSelected.to) {
                 this.searchParams.dateFrom = null
                 this.searchParams.dateTo = null
             } else {
                 let dateFrom = this.dateRangeSelected.from
                 let dateTo = this.dateRangeSelected.to
-                dateRangeLabel = `${flatpickr.formatDate(dateFrom, 'd.m.Y')} - ${flatpickr.formatDate(dateTo, 'd.m.Y')}`
                 this.searchParams.dateFrom = flatpickr.formatDate(dateFrom, 'Y-m-d')
                 this.searchParams.dateTo = flatpickr.formatDate(dateTo, 'Y-m-d')
             }
-            this.dateRangeLabel = dateRangeLabel
+            this.updateDateRangeLabel()
             this.load()
         })
     },
@@ -48,20 +46,28 @@ export default props => ({
     applyOptions(json) {
         this.filterOptions.totalResults = json.totalResults
         const filterOptions = json.filterOptions
-        this.filterOptions.priceRanges = filterOptions.priceRanges
+        this.filterOptions = {
-        this.filterOptions.pax = filterOptions.pax
+            ...this.filterOptions,
-        this.filterOptions.destinations = filterOptions.destinations
+            totalResults: json.totalResults,
+            priceRanges: filterOptions.priceRanges,
+            pax: filterOptions.pax,
+            destinations: filterOptions.destinations
+        }
         if (filterOptions.dateFrom !== null) {
             this.filterOptions.selectableRangeFrom = filterOptions.dateFrom
+            if (this.picker !== null) {
                 this.picker.set('minDate', new Date(filterOptions.dateFrom))
             }
+        }
         if (filterOptions.dateTo !== null) {
             this.filterOptions.selectableRangeTo = filterOptions.dateTo
+            if (this.picker !== null) {
                 this.picker.set('maxDate', new Date(filterOptions.dateTo))
             }
+        }
     },
     updateSearchParam(param, value) {
-        this.searchParams[param] = value
+        this.searchParams = {...this.searchParams, [param]: value}
         this.load()
     },
     selectDateRangePreset(preset) {
@@ -79,16 +85,14 @@ export default props => ({
         this.destinationName = name
         this.destinationSelected = type !== 'concept'
         this.conceptSelected = type === 'concept'
-        this.searchParams.destinationUid = uid
+        this.searchParams = {...this.searchParams, destinationUid: uid, destinationType: type}
-        this.searchParams.destinationType = type
         this.load()
     },
     resetDestination() {
         this.destinationName = 'beliebig'
         this.destinationSelected = false
         this.conceptSelected = false
-        this.searchParams.destinationUid = null
+        this.searchParams = {...this.searchParams, destinationUid: null, destinationType: null}
-        this.searchParams.destinationType = null
         this.load()
     },
     initDatePicker() {
@@ -126,4 +130,13 @@ export default props => ({
         }
         return min + ' - ' + max + ' €'
     },
+    updateDateRangeLabel() {
+        let dateRangeLabel = ''
+        if (null !== this.dateRangeSelected.from && null !== this.dateRangeSelected.to) {
+            let dateFrom = this.dateRangeSelected.from
+            let dateTo = this.dateRangeSelected.to
+            dateRangeLabel = `${flatpickr.formatDate(dateFrom, 'd.m.Y')} - ${flatpickr.formatDate(dateTo, 'd.m.Y')}`
+        }
+        this.dateRangeLabel = dateRangeLabel
+    },
 })

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search.js

@@ -16,13 +16,15 @@ export default props => ({
     dateRangeLabel: null,
     contentWrapper: null,
     init() {
+        this.$watch('dateRangeSelected', () => {
+            this.updateDateRangeLabel()
+        })
         this.contentWrapper = this.$refs.container
         this.updateFilterCount()
         this.load()
     },
     refresh() {
         this.updateFilterCount()
-        this.updateDateRangeLabel()
         this.load()
     },
     load() {
@@ -39,7 +41,6 @@ export default props => ({
                 if (null !== this.filterSettings.dateFrom && null !== this.filterSettings.dateTo) {
                     this.picker.setDate([ this.filterSettings.dateFrom, this.filterSettings.dateTo ])
                     this.dateRangeSelected = { from: new Date(this.filterSettings.dateFrom), to: new Date(this.filterSettings.dateTo) }
-                    this.updateDateRangeLabel()
                 }
                 this.$el.scrollIntoView({behavior: 'smooth'})
             })
@@ -65,6 +66,7 @@ export default props => ({
                         dateTo: flatpickr.formatDate(selectedDates[1], 'Y-m-d'),
                     })
                     this.show = null
+                    this.refresh()
                 }
             }
         })
@@ -83,6 +85,7 @@ export default props => ({
             dateTo: flatpickr.formatDate(dateTo, 'Y-m-d'),
         })
         this.show = null
+        this.refresh()
     },
     resetDateRange() {
         this.dateRangeSelected = { from: null, to: null }
@@ -90,7 +93,10 @@ export default props => ({
             dateFrom: null,
             dateTo: null,
         })
+        this.picker.clear()
+        this.picker.jumpToDate()
         this.show = null
+        this.refresh()
     },
     updateDateRangeLabel() {
         let dateRangeLabel = ''

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbar.html

@@ -155,7 +155,7 @@
                                         <input type="text"
                                                class="form-control cursor-pointer"
                                                x-bind:class="loading && 'cursor-not-allowed'"
-                                               x-bind:value="priceRangeLabel()"
+                                               x-bind:value="priceRangeLabel"
                                                x-on:click.prevent="show = show === 'priceRange' ? null : 'priceRange'"/>
                                         <div class="absolute top-100 left-0 bg-white p-4 shadow-md w-full h-48 overflow-y-scroll" x-show="show === 'priceRange'" x-transition x-cloak>
                                             <ul class="m-0 p-0">

public/typo3conf/ext/ep_theme/Resources/Private/Templates/Search/Searchbox.html

@@ -6,10 +6,12 @@
 
     <f:section name="Main">
         <div id="searchbox" class="searchbox hidden-lg" x-show="$store.show.searchBox" x-transition x-cloak x-data='searchBar({
-            uri: "<ep:uri.ajax controller="AjaxSearchbar" action="update" pageUid="{settings.defaultAjaxUid}" />",
+        <f:format.raw>
-            initialSearchParams: {searchParams -> f:format.json() -> f:format.raw()},
+            uri: "{ep:uri.ajax(controller: "AjaxSearchbar", action: "update", pageUid: settings.defaultAjaxUid)}",
-            initialFilterOptions: {filterOptions -> f:format.json() -> f:format.raw()},
+            initialSearchParams: {searchParams -> f:format.json()},
-            datePresets: {settings.datePickerPresets -> f:format.json() -> f:format.raw()}
+            initialFilterOptions: {filterOptions -> f:format.json()},
+            datePresets: {settings.datePickerPresets -> f:format.json()}
+        </f:format.raw>
         })'>
             <div class="container">
                 <f:form action="processSearch" controller="Search" method="post" name="searchParams"
@@ -32,6 +34,8 @@
                                     x-model="searchParams.dateFrom"
                                     x-bind:min="filterOptions.dateFrom"
                                     x-bind:max="filterOptions.dateTo"
+                                    x-on:change="load()"
+                                    x-bind:disabled="loading"
                                     class="form-control"
                                 >
                             </div>
@@ -42,6 +46,8 @@
                                     x-model="searchParams.dateTo"
                                     x-bind:min="filterOptions.dateFrom"
                                     x-bind:max="filterOptions.dateTo"
+                                    x-on:change="load()"
+                                    x-bind:disabled="loading"
                                     class="form-control"
                                 >
                             </div>
@@ -56,6 +62,8 @@
                                     min="1"
                                     max="20"
                                     x-model="searchParams.pax"
+                                    x-on:change="load()"
+                                    x-bind:disabled="loading"
                                     class="form-control"
                                 >
                             </div>

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

@@ -22,7 +22,7 @@
                     })'>
                     <div class="row" x-ref="container"></div>
                     <div x-show="loading" class="absolute z-20 inset-0 w-full h-fill bg-overlay-white">
-                        <div class="absolute mt-16 top-0 left-1/2 -translate-x-1/2 flex items-center space-x-4">
+                        <div class="absolute mt-16 top-0 left-1/2 -translate-x-1/2 flex items-center space-x-4 alert alert-info">
                             <f:image src="EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif" alt="Loading" />
                             <span>Suchergebnis wird geladen...</span>
                         </div>