Implement global store, refactor session handling

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

@@ -2,7 +2,6 @@
 
 // Import dependencies
 import Vue from 'vue'
-import VueSession from 'vue-session'
 import $ from 'jquery'
 import dayjs from 'dayjs'
 import 'dayjs/locale/de'
@@ -40,17 +39,18 @@ const sliderPrevArrow = '<button class="slider-pagination__arrow slider-paginati
 const sliderNextArrow = '<button class="slider-pagination__arrow slider-pagination__arrow--next"><i class="fa fa-2x fa-chevron-right"></i></button>';
 const sliderDot = '<button class="slider-pagination__dot" data-role="none" role="button" tabindex="0" />';
 
-// Enable session handling
-Vue.use(VueSession, { persist: true });
-
 // Define date filter for vue templates
 Vue.filter('date', (value) => {
     return dayjs(value).format('DD.MM.YYYY');
 });
 
+// Store
+import store from './_store';
+
 // Initialize vue app
 new Vue({
     el: '#app',
+    store,
     components: {
         SearchBar,
         SearchBox,
@@ -70,7 +70,6 @@ new Vue({
     },
     data () {
         return {
-            config: {},
             maxWindowWidth: 991,
             lastScrollPosition: 0,
             scrollTopVisible: false,
@@ -78,20 +77,10 @@ new Vue({
             navbarLocked: false,
             searchbarFixed: false,
             mobileMode: false,
-            backgroundImageMode: 'mobile',
+            backgroundImageMode: 'mobile'
-            watchlist: []
-        }
-    },
-    computed: {
-        watchlistCount () {
-            return this.watchlist.length;
         }
     },
     methods: {
-        parseConfig () {
-            const configElement = document.getElementById('appconfig');
-            this.config = JSON.parse(configElement.innerHTML);
-        },
         setMobileMode () {
             this.mobileMode = $window.outerWidth() < this.maxWindowWidth;
         },
@@ -334,7 +323,7 @@ new Vue({
                 });
         },
         appendPaCode () {
-            const paCode = this.config.paCode;
+            const paCode = this.$store.state.config.paCode;
             if (!paCode) {
                 return;
             }
@@ -356,7 +345,8 @@ new Vue({
         }
     },
     created () {
-        this.parseConfig();
+        this.$store.commit('initConfig');
+        this.$store.commit('initWatchlist');
         EventBus.$on('ajaxContentLoaded', () => {
             Vue.nextTick(() => {
                 this.initContentsliders();
@@ -373,25 +363,6 @@ new Vue({
         EventBus.$on('scrollTo', (anchorId, offset) => {
             this.scrollTo(anchorId, offset);
         });
-        EventBus.$on('watchlistToggle', uid => {
-            let list = this.watchlist;
-            let watchlistIndex = list.indexOf(uid);
-            if (watchlistIndex === -1) {
-                list.push(uid)
-            } else {
-                list.splice(watchlistIndex, 1)
-            }
-            this.watchlist = list;
-            this.$session.set('watchlist', this.watchlist);
-
-        });
-        if (!this.$session.exists()) {
-            this.$session.start();
-        }
-        if (!this.$session.has('watchlist')) {
-            this.$session.set('watchlist', []);
-        }
-        this.watchlist = this.$session.get('watchlist');
     },
     mounted () {
         Vue.nextTick(() => {

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

@@ -2,16 +2,11 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'
 
-import AddressStore from './stores/address'
+import AddressStore from './myep/stores/address'
-import CrmDataStore from './stores/crmdata'
+import CrmDataStore from './myep/stores/crmdata'
-import TeamerStore from './stores/teamer'
+import TeamerStore from './myep/stores/teamer'
-import EventsStore from './stores/events'
+import EventsStore from './myep/stores/events'
-import NewsletterStore from './stores/newsletter'
+import NewsletterStore from './myep/stores/newsletter'
-
-const configElement = document.getElementById('appconfig');
-const config = JSON.parse(configElement.innerHTML);
-
-axios.defaults.baseURL = config.myEpApiBaseUrl;
 
 Vue.use(Vuex);
 
@@ -24,12 +19,14 @@ export default new Vuex.Store({
         newsletter: NewsletterStore
     },
     state: {
-        config: config,
+        config: {},
+        watchlist: [],
+        watchlistId: null,
         loading: false,
         authToken: sessionStorage.getItem('token'),
         loggedIn: !!sessionStorage.getItem('token'),
-        isTeamer: JSON.parse(sessionStorage.getItem('teamerId')) !== null,
+        isTeamer: JSON.parse(sessionStorage.getItem('isTeamer')),
-        teamerId: JSON.parse(sessionStorage.getItem('teamerId')),
+        memberId: JSON.parse(sessionStorage.getItem('memberId')),
         countries: [],
         abilities: [],
         timeFrames: [],
@@ -40,6 +37,40 @@ export default new Vuex.Store({
         }
     },
     mutations: {
+        initConfig (state) {
+            const configElement = document.getElementById('appconfig');
+            state.config = JSON.parse(configElement.innerHTML);
+            axios.defaults.baseURL = state.config.myEpApiBaseUrl;
+        },
+        initWatchlist (state, list = null) {
+            if (list) {
+                sessionStorage.setItem('watchlist', JSON.stringify(list.items));
+                sessionStorage.setItem('watchlistId', JSON.stringify(list.id));
+            } else if (!sessionStorage.getItem('watchlist')) {
+                sessionStorage.setItem('watchlist', JSON.stringify([]));
+                sessionStorage.setItem('watchlistId', JSON.stringify(null));
+            }
+            state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
+            state.watchlistId = JSON.parse(sessionStorage.getItem('watchlistId'));
+        },
+        watchlistToggle (state, uid) {
+            let list = state.watchlist;
+            let watchlistIndex = list.indexOf(uid);
+            if (watchlistIndex === -1) {
+                list.push(uid)
+            } else {
+                list.splice(watchlistIndex, 1)
+            }
+            state.watchlist = list;
+            sessionStorage.setItem('watchlist', JSON.stringify(list));
+            if (state.watchlistId) {
+                axios({
+                    url: '/api/watchlists/' + state.watchlistId,
+                    data: state.watchlist,
+                    method: 'put'
+                });
+            }
+        },
         loginSuccess (state, token) {
             state.loggedIn = true;
             state.authToken = token;
@@ -54,16 +85,20 @@ export default new Vuex.Store({
             state.teamerId = null;
             state.authToken = null;
             sessionStorage.removeItem('token');
-            sessionStorage.removeItem('teamerId');
+            sessionStorage.removeItem('isTeamer');
+            sessionStorage.removeItem('memberId');
         },
         alert (state, payload) {
             state.message.text = payload.message;
             state.message.class = payload.class;
         },
-        isTeamer (state, teamerId) {
+        isTeamer (state) {
             state.isTeamer = true;
-            state.teamerId = teamerId;
+            sessionStorage.setItem('isTeamer', JSON.stringify(true));
-            sessionStorage.setItem('teamerId', teamerId);
+        },
+        setMember (state, memberId) {
+            state.memberId = memberId;
+            sessionStorage.setItem('memberId', memberId);
         },
         loadingBegin (state) {
             state.loading = true;
@@ -98,9 +133,13 @@ export default new Vuex.Store({
                 method: 'post',
                 withCredentials: true
             }).then((response) => {
-                let teamerId = parseInt(response.data.teamer_id);
+                let memberId = parseInt(response.data.member_id);
-                if (teamerId > 0) {
+                commit('setMember', memberId);
-                    commit('isTeamer', teamerId);
+                if (response.data.watchlist) {
+                    commit('initWatchlist', response.data.watchlist);
+                }
+                if (response.data.is_teamer) {
+                    commit('isTeamer');
                 }
                 commit('loginSuccess', response.data.token);
                 commit('loadingFinish');
@@ -164,6 +203,12 @@ export default new Vuex.Store({
         }
     },
     getters: {
+        watchlistCount: state => {
+            return state.watchlist.length;
+        },
+        onWatchlist: (state) => (uid) => {
+            return state.watchlist.indexOf(uid) !== -1;
+        },
         authToken: state => {
             return state.authToken;
         },
@@ -175,4 +220,3 @@ export default new Vuex.Store({
         }
     }
 });
-

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

@@ -31,8 +31,8 @@
             }
         },
         created () {
-            if (this.$session.has('filterSettings')) {
+            if (sessionStorage.getItem('filterSettings')) {
-                this.filterSettings = this.$session.get('filterSettings')
+                this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
             }
         }
     }

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

@@ -72,12 +72,6 @@
                     return {}
                 }
             },
-            watchlist: {
-                type: Array,
-                default () {
-                    return []
-                }
-            },
             daytrip: {
                 type: Number,
                 default: 0
@@ -188,12 +182,12 @@
             }
         },
         created () {
-            if (this.$session.has('filterSettings')) {
+            if (sessionStorage.getItem('filterSettings')) {
-                this.filterSettings = this.$session.get('filterSettings')
+                this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
             }
-            if (this.$session.has('referringPage')) {
+            if (sessionStorage.getItem('referringPage')) {
-                this.referringPage = this.$session.get('referringPage');
+                this.referringPage = JSON.parse(sessionStorage.getItem('referringPage'));
-                this.$session.remove('referringPage');
+                sessionStorage.removeItem('referringPage');
             }
             EventBus.$on('loadDatesTable', () => {
                 this.loadDatesView();

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

@@ -20,7 +20,7 @@
         methods: {
             storeReferringPage () {
                 if (this.referringPage.url && this.referringPage.label) {
-                    this.$session.set('referringPage', this.referringPage)
+                    sessionStorage.setItem('referringPage', JSON.stringify(this.referringPage))
                 }
             }
         }

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

@@ -71,12 +71,6 @@
                 default () {
                     return {};
                 }
-            },
-            watchlist: {
-                type: Array,
-                default () {
-                    return [];
-                }
             }
         },
         computed: {
@@ -211,14 +205,14 @@
             },
             updateFilterSettings (settings) {
                 this.filterSettings = { ...this.filterSettings, ...settings };
-                this.$session.set('filterSettings', this.filterSettings);
+                sessionStorage.setItem('filterSettings', JSON.stringify(this.filterSettings));
             }
         },
         created () {
             if (!$.isEmptyObject(this.initialFilterSettings)) {
                 this.updateFilterSettings(this.initialFilterSettings)
-            } else if (this.$session.has('filterSettings')) {
+            } else if (sessionStorage.getItem('filterSettings')) {
-                this.updateFilterSettings(this.$session.get('filterSettings'))
+                this.updateFilterSettings(JSON.parse(sessionStorage.getItem('filterSettings')))
             }
         },
         mounted () {

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

@@ -62,7 +62,7 @@
                 </referrer-link>
             </div>
         </div>
-        <watchlist-toggle :uid="item.key" :watchlist="watchlist" class="teaserbox-watchlist"></watchlist-toggle>
+        <watchlist-toggle :uid="item.key" class="teaserbox-watchlist"></watchlist-toggle>
     </div>
 </template>
 
@@ -86,12 +86,6 @@
                 type: Object,
                 required: true
             },
-            watchlist: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
             referringPage: {
                 type: Object,
                 default () {

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

@@ -8,8 +8,7 @@
                         :key="item.key"
                         :item="item"
                         :section="section"
-                        :referring-page="referringPage"
+                        :referring-page="referringPage"></search-result-item>
-                        :watchlist="watchlist"></search-result-item>
             </div>
         </template>
         <div class="alert alert-info" v-if="total === 0">
@@ -40,12 +39,6 @@
                 type: String,
                 required: true
             },
-            watchlist: {
-                type: Array,
-                default () {
-                    return [];
-                }
-            },
             referringPageUrl: {
                 type: String,
                 default: null
@@ -53,6 +46,7 @@
         },
         data () {
             return {
+                watchlist: [],
                 teasers: {},
                 total: 0,
                 loading: false,
@@ -94,6 +88,7 @@
             });
         },
         mounted () {
+            this.watchlist = this.$store.state.watchlist;
             Vue.nextTick(() => {
                 this.loadList();
             })

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

@@ -17,10 +17,6 @@
                 type: String,
                 required: true
             },
-            watchlist: {
-                type: Array,
-                required: true
-            },
             layout: {
                 type: String,
                 default: 'toggle'
@@ -28,12 +24,13 @@
         },
         methods: {
             toggleWatchlist () {
-                EventBus.$emit('watchlistToggle', this.uid);
+                this.$store.commit('watchlistToggle', this.uid);
+                EventBus.$emit('watchlistToggle');
             }
         },
         computed: {
             onWatchlist () {
-                return this.watchlist.indexOf(this.uid) !== -1;
+                return this.$store.getters.onWatchlist(this.uid);
             }
         }
     }

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/_router.js

@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import store from './_store';
+import store from './../_store';
 
 Vue.use(VueRouter);
 

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

@@ -43,7 +43,7 @@
 </template>
 
 <script>
-    import store from '../_store'
+    import store from '../../_store'
     import router from '../_router'
     import EventBus from '../../_bus'
 

web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/myep/stores/teamer.js

@@ -14,7 +14,7 @@ export default {
                 }
             });
 
-            return client.get('/api/teamers/' + rootState.teamerId)
+            return client.get('/api/teamers/' + rootState.memberId)
                 .then((response) => {
                     commit('loadingFinish', null, { root: true });
                     return response.data;
@@ -38,7 +38,7 @@ export default {
                 }
             });
 
-            return client.put('/api/teamers/' + rootState.teamerId, data)
+            return client.put('/api/teamers/' + rootState.memberId, data)
                 .then(() => {
                     commit('loadingFinish', null, { root: true });
                     commit('alert', {

web/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html

@@ -1,9 +1,9 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 <div class="ep-contactnav">
     <a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}" class="bg-red watchlist"
-       v-show="watchlistCount > 0" v-cloak rel="nofollow">
+       v-show="$store.getters.watchlistCount > 0" v-cloak rel="nofollow">
         <span class="fa fa-list" aria-hidden="true"></span>
-        <div>Merkliste ({{ watchlistCount }})</div>
+        <div>Merkliste ({{ $store.getters.watchlistCount }})</div>
     </a>
     <a href="tel:{settings.phoneNumberLink}" class="bg-red phone" title="Telefonische Beratung" rel="nofollow">
         <span class="fa fa-phone" aria-hidden="true"></span>

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

@@ -18,7 +18,6 @@
             argument-prefix='<ep:argumentPrefix pluginName="Ajax" />'
             :hotel-first="{f:if(condition: settings.hotelOnTop, then: 'true', else: 'false')}"
             :fb-pixel-data="{ productUid: <f:format.raw>{product.busProId}</f:format.raw>, nameInternal: '<f:format.raw>{product.nameInternal}</f:format.raw>' }"
-            :watchlist="watchlist"
             :daytrip="{product.daytrip -> v:variable.convert(type: 'int')}"
             inline-template>
             <article>
@@ -78,8 +77,7 @@
                                     </div>
                                     <div class="col-xs-12">
                                         <p>
-                                            <watchlist-toggle :watchlist="watchlist" uid="{hotel.uid}:{product.uid}"
+                                            <watchlist-toggle uid="{hotel.uid}:{product.uid}" layout="link"></watchlist-toggle>
-                                                             layout="link"></watchlist-toggle>
                                         </p>
                                     </div>
                                 </div>

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

@@ -6,7 +6,6 @@
 
     <f:section name="Main">
         <hotel-list
-            :watchlist="watchlist"
             referring-page-url="{f:uri.typolink(parameter: currentPageUid)}"
             inline-template>
             <article>

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

@@ -13,7 +13,6 @@
                 referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
                 argument-prefix="{ep:argumentPrefix(pluginName: 'ajax')}"
                 :date-presets='{settings.datePickerPresets -> v:format.json.encode()}'
-                :watchlist="watchlist"
                 inline-template>
                 <div class="searchresult-wrapper">
                     <div class="pagehead pagehead--searchresult">
@@ -303,8 +302,7 @@
                                                 :key="item.key"
                                                 :item="item"
                                                 :section="section"
-                                                :referring-page="referringPage"
+                                                :referring-page="referringPage"></search-result-item>
-                                                :watchlist="watchlist"></search-result-item>
                                         </div>
                                     </template>
                                 </div>

web/typo3conf/ext/ep_theme/Resources/Private/Templates/Watchlist/List.html

@@ -6,8 +6,7 @@
 
     <f:section name="Main">
 
-        <watchlist :watchlist="watchlist"
+        <watchlist loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
-                   loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
                    referring-page-url="{f:uri.typolink(parameter: referringPageUid)}"
                    watchlist-uri="{ep:uri.ajax(action: 'list', controller: 'AjaxWatchlist', pageUid: settings.defaultAjaxUid)}"></watchlist>
     </f:section>

webpack.config.js

@@ -10,7 +10,7 @@ Encore
     .addEntry('unichamp', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/js/unichamp.js')
     .addStyleEntry('rte', './web/typo3conf/ext/ep_theme/Resources/Private/Assets/scss/rte.scss')
     .createSharedEntry('vendor', [
-        'jquery', 'vue', 'vue-session', 'vuex', 'vue-router', 'axios', 'flatpickr', 'lazysizes',
+        'jquery', 'vue', 'vuex', 'vue-router', 'axios', 'flatpickr', 'lazysizes',
         'bootstrap-sass/assets/javascripts/bootstrap', 'slick-carousel',
         'dayjs', 'cookieconsent', 'picturefill', '@fancyapps/fancybox', 'leaflet'
     ])