WIP Migrate watchlist

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

@@ -54,6 +54,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
 
 
+/// LEGACY CODE FROM HERE ///
 
 // Import dependencies
 import Vue from 'vue'
@@ -81,7 +82,6 @@ import OsmMap from './components/OsmMap.vue'
 import Calendar from './components/Calendar.vue'
 import EventPricetable from './components/EventPriceTable.vue'
 import ContactForm from './components/ContactForm.vue'
-import WatchlistToggle from './components/WatchlistToggle.vue'
 import Watchlist from './components/Watchlist.vue'
 import HotelList from './components/HotelList.vue'
 
@@ -113,7 +113,6 @@ new Vue({
         Calendar,
         EventPricetable,
         ContactForm,
-        WatchlistToggle,
         Watchlist,
         HotelList,
         MyEp: () => import('./myep/App.vue'),

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/_styles.js

@@ -3,6 +3,5 @@
 require('font-awesome/css/font-awesome.min.css');
 require('cookieconsent/build/cookieconsent.min.css');
 require('@fancyapps/fancybox/dist/jquery.fancybox.min.css');
-require('slick-carousel/slick/slick.css');
 require('leaflet/dist/leaflet.css');
 require('flatpickr/dist/flatpickr.css');

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

@@ -1,12 +1,7 @@
 <script>
-    import WatchlistToggle from './WatchlistToggle'
-
     import defaultFilterSettings from '../_filtersettings'
 
     export default {
-        components: {
-            WatchlistToggle,
-        },
         props: {
             referringPageUrl: {
                 type: String,

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

@@ -11,7 +11,6 @@
     import DaterangeSelect from './DaterangeSelect.vue'
     import AjaxContent from './AjaxContent.vue'
     import Calendar from './Calendar.vue'
-    import WatchlistToggle from './WatchlistToggle.vue'
     import OsmMap from './OsmMap.vue'
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
@@ -26,7 +25,6 @@
             DaterangeSelect,
             AjaxContent,
             Calendar,
-            WatchlistToggle,
             OsmMap,
         },
         data () {

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

@@ -61,19 +61,22 @@
                 </a>
             </div>
         </div>
-        <watchlist-toggle :uid="item.key" class="teaserbox-watchlist"></watchlist-toggle>
+        <a href="#"
+           data-controller="watchlist-toggle"
+           :data-watchlist-toggle-uid-value="item.key"
+           data-action="watchlist-toggle#toggle">
+          <span data-microtip-position="top" data-watchlist-toggle-target="tooltip" role="tooltip">
+            <i class="fa" data-watchlist-toggle-target="icon"></i>
+          </span>
+        </a>
     </div>
 </template>
 
 <script>
     import dayjs from 'dayjs'
     import 'dayjs/locale/de'
-    import WatchlistToggle from './WatchlistToggle.vue'
 
     export default {
-        components: {
-            WatchlistToggle
-        },
         props: {
             item: {
                 type: Object,

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

@@ -22,7 +22,6 @@
 
 <script>
     import Vue from 'vue'
-    import { mapState, mapGetters } from 'vuex'
     import axios from 'axios'
     import EventBus from '../_bus'
     import SearchResultItem from './SearchResultItem.vue'
@@ -58,13 +57,13 @@
         },
         methods: {
             loadList () {
-                if (this.watchlistCount === 0) {
+                if (this.watchlist.length === 0) {
                     this.teasers = {};
                     this.total = 0;
                     return;
                 }
                 let query = {};
-                query['tx_epproducts_ajax[watchlistUids]'] = this.userData.watchList;
+                query['tx_epproducts_ajax[watchlistUids]'] = this.watchlist;
                 this.loading = true;
                 axios({
                     url: this.watchlistUri,
@@ -84,11 +83,13 @@
             }
         },
         computed: {
-            ...mapState(['userData']),
-            ...mapGetters(['watchlistCount', 'onWatchlist'])
+            watchlist() {
+              const initialList = JSON.parse(sessionStorage.getItem('myep-watchlist'))
+              return initialList ? initialList : []
+            },
         },
         created () {
-            EventBus.$on('watchlistToggle', () => {
+            EventBus.$on('oggle', () => {
                 this.loadList();
             });
         },

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

@@ -1,38 +0,0 @@
-<template>
-    <a href="#" @click.prevent="toggleWatchlist()">
-        <span data-microtip-position="top" :aria-label="onWatchlist ? 'von der Merkliste löschen' : 'auf die Merkliste setzen'" role="tooltip">
-          <i class="fa" :class="{ 'fa-minus-circle': onWatchlist, 'fa-plus-circle': !onWatchlist }"></i>
-        </span>
-        <span v-if="layout === 'link'">
-            {{ onWatchlist ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen' }}
-        </span>
-    </a>
-</template>
-
-<script>
-    import EventBus from '../_bus'
-
-    export default {
-        props: {
-            uid: {
-                type: String,
-                required: true
-            },
-            layout: {
-                type: String,
-                default: 'toggle'
-            }
-        },
-        methods: {
-            toggleWatchlist () {
-                this.$store.dispatch('watchlistToggle', this.uid);
-                EventBus.$emit('watchlistToggle');
-            }
-        },
-        computed: {
-            onWatchlist () {
-                return this.$store.getters.onWatchlist(this.uid)
-            }
-        }
-    }
-</script>

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactbar_controller.js

@@ -0,0 +1,10 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+
+    static targets = [ 'watchlist' ]
+
+    updateWatchlist(e) {
+        this.watchlistTarget.style.display = e.detail.length ? 'block' : 'none'
+    }
+}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js

@@ -0,0 +1,48 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+
+    static targets = [ 'tooltip', 'label', 'icon' ]
+    static values = { uid: String, onList: Boolean }
+
+    connect() {
+        const list = this.getCurrentList()
+        this.onListValue = -1 !== list.indexOf(this.uidValue)
+    }
+
+    toggle(e) {
+        e.preventDefault()
+        const list = this.getCurrentList()
+        const listIndex = list.indexOf(this.uidValue)
+        if (-1 === listIndex) {
+            list.push(this.uidValue)
+            this.onListValue = true
+        } else {
+            list.splice(listIndex, 1)
+            this.onListValue = false
+        }
+        sessionStorage.setItem('myep-watchlist', JSON.stringify(list))
+        window.dispatchEvent(new CustomEvent('watchlist-update', {
+            detail: list
+        }))
+    }
+
+    onListValueChanged() {
+        const label = this.onListValue ? 'von der Merkliste entfernen' : 'auf die Merkliste setzen'
+        if (this.hasTooltipTarget) {
+            this.tooltipTarget.setAttribute('aria-label', label)
+        }
+        if (this.hasLabelTarget) {
+            this.labelTarget.textContent = label
+        }
+        if (this.hasIconTarget) {
+            this.iconTarget.classList.toggle('fa-minus-circle', this.onListValue)
+            this.iconTarget.classList.toggle('fa-plus-circle', !this.onListValue)
+        }
+    }
+
+    getCurrentList() {
+        const initialList = JSON.parse(sessionStorage.getItem('myep-watchlist'))
+        return initialList ? initialList : []
+    }
+}

public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/store/index.js

@@ -19,7 +19,6 @@ const defaultUserData = {
     phoneMobile: '',
     phonePrivate: '',
     newsletter: false,
-    watchList: []
 };
 
 export default new Vuex.Store({
@@ -47,16 +46,6 @@ export default new Vuex.Store({
             state.config = JSON.parse(configElement.innerHTML);
             axios.defaults.baseURL = state.config.myEpApiBaseUrl;
         },
-        initWatchlist(state) {
-            if (!sessionStorage.getItem('myep-watchlist')) {
-                sessionStorage.setItem('myep-watchlist', JSON.stringify([]));
-            }
-            state.userData.watchList = JSON.parse(sessionStorage.getItem('myep-watchlist'));
-        },
-        setWatchlist(state, list) {
-            state.userData.watchList = list;
-            sessionStorage.setItem('myep-watchlist', JSON.stringify(list));
-        },
         setUserData(state, data) {
             data.watchList = [...state.userData.watchList, ...data.watchList];
             state.userData = data;
@@ -73,7 +62,6 @@ export default new Vuex.Store({
             state.refreshToken = null;
             sessionStorage.removeItem('myep-auth-token');
             sessionStorage.removeItem('myep-refresh-token');
-            sessionStorage.removeItem('myep-watchlist');
         },
         alert(state, payload) {
             state.alert = payload;
@@ -94,7 +82,6 @@ export default new Vuex.Store({
     actions: {
         init({commit}) {
             commit('initConfig');
-            commit('initWatchlist');
             commit('initSession');
         },
         login({commit, dispatch}, credentials) {
@@ -155,19 +142,6 @@ export default new Vuex.Store({
                 commit('endLoading');
             });
         },
-        watchlistToggle({commit, state}, uid) {
-            let list = state.userData.watchList;
-            let watchlistIndex = list.indexOf(uid);
-            if (watchlistIndex === -1) {
-                list.push(uid)
-            } else {
-                list.splice(watchlistIndex, 1)
-            }
-            commit('setWatchlist', list);
-            if (!!state.authToken) {
-                axios.put('/api/watchlist', list)
-            }
-        },
         loadAddress({commit, state}) {
             commit('beginLoading');
 
@@ -211,7 +185,6 @@ export default new Vuex.Store({
         }
     },
     getters: {
-        watchlistCount: state => state.userData.watchList.length,
         onWatchlist: state => uid => state.userData.watchList.indexOf(uid) !== -1,
         isLoggedIn: state => !!state.authToken,
         isTeamer: state => !!state.userData.isTeamer,

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

@@ -1,7 +1,7 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
-<div class="ep-contactnav">
+<div class="ep-contactnav" data-controller="contactbar" data-action="watchlist-update@window->contactbar#updateWatchlist">
     <a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}" class="bg-red watchlist"
-       v-show="$store.getters.watchlistCount > 0" v-cloak rel="nofollow">
+       data-contactbar-target="watchlist" rel="nofollow">
         <span class="fa fa-list" aria-hidden="true"></span>
         <div>Merkliste ({{ $store.getters.watchlistCount }})</div>
     </a>

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Hotel/TeaserWide.html

@@ -117,7 +117,12 @@
                     </f:else>
                 </f:if>
             </div>
-            <watchlist-toggle uid="{item.hotel.uid}:{product.uid}" class="teaserbox-watchlist"></watchlist-toggle>
+            <a href="#"
+               class="teaserbox-watchlist"
+               data-controller="watchlist-toggle"
+               data-watchlist-toggle-uid-value="{item.hotel.uid}:{product.uid}"
+               data-action="watchlist-toggle#toggle">
+            </a>
         </div>
     </f:section>
 

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Product/TeaserWide.html

@@ -92,7 +92,12 @@
                     </a>
                 </div>
             </div>
-            <watchlist-toggle uid="{teaser.key}" class="teaserbox-watchlist"></watchlist-toggle>
+            <a href="#"
+               class="teaserbox-watchlist"
+               data-controller="watchlist-toggle"
+               data-watchlist-toggle-uid-value="{teaser.key}"
+               data-action="watchlist-toggle#toggle">
+            </a>
         </div>
     </f:section>
 

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

@@ -83,7 +83,17 @@
                                     </div>
                                     <div class="col-xs-12">
                                         <p>
-                                            <watchlist-toggle uid="{hotel.uid}:{product.uid}" layout="link"></watchlist-toggle>
+                                            <a href="#"
+                                               data-controller="watchlist-toggle"
+                                               data-watchlist-toggle-uid-value="{hotel.uid}:{product.uid}"
+                                               data-action="watchlist-toggle#toggle">
+                                                <span data-microtip-position="top" data-watchlist-toggle-target="tooltip" role="tooltip">
+                                                  <i class="fa" data-watchlist-toggle-target="icon"></i>
+                                                </span>
+                                                <span data-watchlist-toggle-target="label">
+                                                    auf die Merkliste setzen
+                                                </span>
+                                            </a>
                                         </p>
                                         <p>
                                             <a href="{f:uri.typolink(parameter: settings.coronaUpdatesPageUid)}"