Merge branch 'store'

2018-12-20 16:40:41 +01:00
parent 3158004818 cccee74afa
commit 5a10151ae2
18 changed files with 114 additions and 118 deletions
@@ -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',
-            watchlist: []
-        }
-    },
-    computed: {
-        watchlistCount () {
-            return this.watchlist.length;
+            backgroundImageMode: 'mobile'
        }
    },
    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(() => {
@@ -2,16 +2,11 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios'

-import AddressStore from './stores/address'
-import CrmDataStore from './stores/crmdata'
-import TeamerStore from './stores/teamer'
-import EventsStore from './stores/events'
-import NewsletterStore from './stores/newsletter'
-
-const configElement = document.getElementById('appconfig');
-const config = JSON.parse(configElement.innerHTML);
-
-axios.defaults.baseURL = config.myEpApiBaseUrl;
+import AddressStore from './myep/stores/address'
+import CrmDataStore from './myep/stores/crmdata'
+import TeamerStore from './myep/stores/teamer'
+import EventsStore from './myep/stores/events'
+import NewsletterStore from './myep/stores/newsletter'

 Vue.use(Vuex);

@@ -24,12 +19,14 @@ export default new Vuex.Store({
        newsletter: NewsletterStore
    },
    state: {
-        config: config,
+        config: {},
+        watchlist: [],
        loading: false,
        authToken: sessionStorage.getItem('token'),
        loggedIn: !!sessionStorage.getItem('token'),
-        isTeamer: JSON.parse(sessionStorage.getItem('teamerId')) !== null,
-        teamerId: JSON.parse(sessionStorage.getItem('teamerId')),
+        isTeamer: JSON.parse(sessionStorage.getItem('isTeamer')),
+        memberId: JSON.parse(sessionStorage.getItem('memberId')),
+        memberName: sessionStorage.getItem('memberName'),
        countries: [],
        abilities: [],
        timeFrames: [],
@@ -40,6 +37,39 @@ 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));
+            } else if (!sessionStorage.getItem('watchlist')) {
+                sessionStorage.setItem('watchlist', JSON.stringify({ id: null, items: [] }));
+            }
+            state.watchlist = JSON.parse(sessionStorage.getItem('watchlist'));
+        },
+        watchlistToggle (state, uid) {
+            let list = state.watchlist.items;
+            let watchlistIndex = list.indexOf(uid);
+            if (watchlistIndex === -1) {
+                list.push(uid)
+            } else {
+                list.splice(watchlistIndex, 1)
+            }
+            state.watchlist.items = list;
+            sessionStorage.setItem('watchlist', JSON.stringify(state.watchlist));
+
+            if (state.loggedIn) {
+                const client = axios.create({
+                    headers: {
+                        'X-Auth-Token': state.authToken
+                    }
+                });
+                client.put('/api/watchlists/' + state.watchlist.id, state.watchlist);
+            }
+        },
        loginSuccess (state, token) {
            state.loggedIn = true;
            state.authToken = token;
@@ -53,17 +83,26 @@ export default new Vuex.Store({
            state.isTeamer = false;
            state.teamerId = null;
            state.authToken = null;
+            state.watchlist = { id: null, items: [] };
            sessionStorage.removeItem('token');
-            sessionStorage.removeItem('teamerId');
+            sessionStorage.removeItem('isTeamer');
+            sessionStorage.removeItem('memberId');
+            sessionStorage.removeItem('memberName');
+            sessionStorage.removeItem('watchlist');
        },
        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('teamerId', teamerId);
+            sessionStorage.setItem('isTeamer', JSON.stringify(true));
+        },
+        setMember (state, member) {
+            state.memberId = member.id;
+            state.memberName = member.name;
+            sessionStorage.setItem('memberId', member.id);
+            sessionStorage.setItem('memberName', member.name);
        },
        loadingBegin (state) {
            state.loading = true;
@@ -98,9 +137,13 @@ export default new Vuex.Store({
                method: 'post',
                withCredentials: true
            }).then((response) => {
-                let teamerId = parseInt(response.data.teamer_id);
-                if (teamerId > 0) {
-                    commit('isTeamer', teamerId);
+                let memberId = parseInt(response.data.member_id);
+                commit('setMember', { id: memberId, name: response.data.member_name });
+                if (response.data.watchlist) {
+                    commit('initWatchlist', response.data.watchlist);
+                }
+                if (response.data.is_teamer) {
+                    commit('isTeamer');
                }
                commit('loginSuccess', response.data.token);
                commit('loadingFinish');
@@ -115,6 +158,7 @@ export default new Vuex.Store({
            });
        },
        logout({ commit, state }) {
+            commit('loadingBegin');
            return axios({
                url: '/api/logout',
                headers: {
@@ -122,6 +166,14 @@ export default new Vuex.Store({
                }
            }).then(() => {
                commit('logout');
+                commit('loadingFinish');
+            }).catch((error) => {
+                commit('alert', {
+                    message: 'Der Logout ist fehlgeschlagen :(',
+                    class: 'alert-danger'
+                });
+                commit('loadingFinish');
+                throw error;
            });
        },
        resetPassword({ commit }, email) {
@@ -164,6 +216,12 @@ export default new Vuex.Store({
        }
    },
    getters: {
+        watchlistCount: state => {
+            return state.watchlist.items.length;
+        },
+        onWatchlist: (state) => (uid) => {
+            return state.watchlist.items.indexOf(uid) !== -1;
+        },
        authToken: state => {
            return state.authToken;
        },
@@ -175,4 +233,3 @@ export default new Vuex.Store({
        }
    }
 });
-
@@ -31,8 +31,8 @@
            }
        },
        created () {
-            if (this.$session.has('filterSettings')) {
-                this.filterSettings = this.$session.get('filterSettings')
+            if (sessionStorage.getItem('filterSettings')) {
+                this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
            }
        }
    }
@@ -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')) {
-                this.filterSettings = this.$session.get('filterSettings')
+            if (sessionStorage.getItem('filterSettings')) {
+                this.filterSettings = JSON.parse(sessionStorage.getItem('filterSettings'));
            }
-            if (this.$session.has('referringPage')) {
-                this.referringPage = this.$session.get('referringPage');
-                this.$session.remove('referringPage');
+            if (sessionStorage.getItem('referringPage')) {
+                this.referringPage = JSON.parse(sessionStorage.getItem('referringPage'));
+                sessionStorage.removeItem('referringPage');
            }
            EventBus.$on('loadDatesTable', () => {
                this.loadDatesView();
@@ -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))
                }
            }
        }
@@ -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')) {
-                this.updateFilterSettings(this.$session.get('filterSettings'))
+            } else if (sessionStorage.getItem('filterSettings')) {
+                this.updateFilterSettings(JSON.parse(sessionStorage.getItem('filterSettings')))
            }
        },
        mounted () {
@@ -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 () {
@@ -8,8 +8,7 @@
                        :key="item.key"
                        :item="item"
                        :section="section"
-                        :referring-page="referringPage"
-                        :watchlist="watchlist"></search-result-item>
+                        :referring-page="referringPage"></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.items;
            Vue.nextTick(() => {
                this.loadList();
            })
@@ -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);
            }
        }
    }
@@ -1,6 +1,6 @@
 import Vue from 'vue';
 import VueRouter from 'vue-router';
-import store from './_store';
+import store from './../_store';

 Vue.use(VueRouter);

@@ -43,7 +43,7 @@
 </template>

 <script>
-    import store from '../_store'
+    import store from '../../_store'
    import router from '../_router'
    import EventBus from '../../_bus'

@@ -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', {
@@ -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>
@@ -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}"
-                                                             layout="link"></watchlist-toggle>
+                                            <watchlist-toggle uid="{hotel.uid}:{product.uid}" layout="link"></watchlist-toggle>
                                        </p>
                                    </div>
                                </div>
@@ -6,7 +6,6 @@

    <f:section name="Main">
        <hotel-list
-            :watchlist="watchlist"
            referring-page-url="{f:uri.typolink(parameter: currentPageUid)}"
            inline-template>
            <article>
@@ -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"
-                                                :watchlist="watchlist"></search-result-item>
+                                                :referring-page="referringPage"></search-result-item>
                                        </div>
                                    </template>
                                </div>
@@ -6,8 +6,7 @@

    <f:section name="Main">

-        <watchlist :watchlist="watchlist"
-                   loader-uri="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/ajax-loader-white.gif')}"
+        <watchlist 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>
@@ -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'
    ])