Remove filtersettings url argument by saving settings in local storage
This commit is contained in:
Björn Fromme
@@ -0,0 +1,13 @@
|
||||
export default {
|
||||
priceRanges: {},
|
||||
destinations: {},
|
||||
concepts: {},
|
||||
pax: [],
|
||||
nights: [],
|
||||
hotelTypes: [],
|
||||
boardTypes: [],
|
||||
roomTypes: [],
|
||||
dateFrom: null,
|
||||
dateTo: null,
|
||||
busAvailable: false
|
||||
}
|
||||
+9
-3
@@ -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];
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
|
||||
+43
-32
@@ -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: this.initialFilterSettings,
|
||||
filterOptions: this.initialFilterOptions
|
||||
filterSettings: defaultFilterSettings,
|
||||
filterOptions: defaultFilterOptions
|
||||
}
|
||||
},
|
||||
props: {
|
||||
@@ -51,15 +51,7 @@
|
||||
},
|
||||
initialFilterSettings: {
|
||||
type: Object,
|
||||
default () {
|
||||
return defaultFilterSettings;
|
||||
}
|
||||
},
|
||||
initialFilterOptions: {
|
||||
type: Object,
|
||||
default () {
|
||||
return defaultFilterSettings;
|
||||
}
|
||||
default: null
|
||||
},
|
||||
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.filterSettings.destinationType = destination.type;
|
||||
this.filterSettings.destinationName = destination.name;
|
||||
this.updateFilterSettings({
|
||||
destinationUid: destination.uid,
|
||||
destinationType: destination.type,
|
||||
destinationName: destination.name
|
||||
});
|
||||
this.loadResults();
|
||||
},
|
||||
updateDestinations (destinations) {
|
||||
this.filterSettings.countryUids = destinations.countryUids;
|
||||
this.filterSettings.regionUids = destinations.regionUids;
|
||||
this.updateFilterSettings({
|
||||
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;
|
||||
this.filterSettings.dateTo = (range.to !== null) ? dayjs(range.to).format('YYYY-MM-DD') : null;
|
||||
const dateFrom = (range.from !== null) ? dayjs(range.from).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 === '') {
|
||||
this.filterSettings.dateFrom = null;
|
||||
let dateFrom = this.filterSettings.dateFrom;
|
||||
let dateTo = this.filterSettings.dateTo;
|
||||
if (dateFrom === '') {
|
||||
dateFrom = null;
|
||||
}
|
||||
if (this.filterSettings.dateTo === '') {
|
||||
this.filterSettings.dateTo = null;
|
||||
if (dateTo === '') {
|
||||
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) {
|
||||
this.filterSettings.boardTypes = hotelTypes;
|
||||
updateBoardTypes (boardTypes) {
|
||||
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 () {
|
||||
|
||||
@@ -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>",
|
||||
|
||||
@@ -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()}'
|
||||
|
||||
Reference in New Issue
Block a user