EP/website-typo3
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Code cleanup

Browse Source
This commit is contained in:
Björn Fromme
2021-07-28 12:08:11 +02:00
parent 3fe9098dcc
commit 60e69ae8b1
5 changed files with 48 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/components/search-bar.js
+26 -13
View File
@@ -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.pax = filterOptions.pax
this.filterOptions.destinations = filterOptions.destinations
this.filterOptions = {
...this.filterOptions,
totalResults: json.totalResults,
priceRanges: filterOptions.priceRanges,
pax: filterOptions.pax,
destinations: filterOptions.destinations
}
if (filterOptions.dateFrom !== null) {
this.filterOptions.selectableRangeFrom = filterOptions.dateFrom
this.picker.set('minDate', new Date(filterOptions.dateFrom))
if (this.picker !== null) {
this.picker.set('minDate', new Date(filterOptions.dateFrom))
}
}
if (filterOptions.dateTo !== null) {
this.filterOptions.selectableRangeTo = filterOptions.dateTo
this.picker.set('maxDate', new Date(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.destinationType = type
this.searchParams = {...this.searchParams, destinationUid: uid, destinationType: type}
this.load()
},
resetDestination() {
this.destinationName = 'beliebig'
this.destinationSelected = false
this.conceptSelected = false
this.searchParams.destinationUid = null
this.searchParams.destinationType = null
this.searchParams = {...this.searchParams, destinationUid: null, 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
+8 -2
View File
@@ -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
+1 -1
View File
@@ -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
+12 -4
View File
@@ -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}" />",
initialSearchParams: {searchParams -> f:format.json() -> f:format.raw()},
initialFilterOptions: {filterOptions -> f:format.json() -> f:format.raw()},
datePresets: {settings.datePickerPresets -> f:format.json() -> f:format.raw()}
<f:format.raw>
uri: "{ep:uri.ajax(controller: "AjaxSearchbar", action: "update", pageUid: settings.defaultAjaxUid)}",
initialSearchParams: {searchParams -> f:format.json()},
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
+1 -1
View File
@@ -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>