From 5b2a008edaf94b8ce126255c24b386f0a1e1a99d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bjo=CC=88rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Tue, 22 Jun 2021 15:41:47 +0200
Subject: [PATCH] Finalize watchlist migration

---
 .../js/controllers/contactbar_controller.js   | 26 ++++++++++++++++---
 .../watchlist_toggle_controller.js            | 15 +++--------
 .../Private/Partials/ContactBar.html          |  4 +--
 3 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactbar_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactbar_controller.js
index 029b07d8..d41cf5b9 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactbar_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/contactbar_controller.js
@@ -2,9 +2,29 @@ import { Controller } from 'stimulus'
 
 export default class extends Controller {
 
-    static targets = [ 'watchlist' ]
+    static targets = [ 'watchlist', 'watchlistLabel' ]
+    static values = { watchlist: Array }
 
-    updateWatchlist(e) {
-        this.watchlistTarget.style.display = e.detail.length ? 'block' : 'none'
+    connect() {
+        const initialList = JSON.parse(sessionStorage.getItem('myep-watchlist'))
+        this.watchlistValue = initialList ? initialList : []
+    }
+
+    toggleWatchlist(e) {
+        const uid = e.detail
+        const currentList = this.watchlistValue
+        const listIndex = currentList.indexOf(uid)
+        if (-1 === listIndex) {
+            currentList.push(uid)
+        } else {
+            currentList.splice(listIndex, 1)
+        }
+        this.watchlistValue = currentList
+        sessionStorage.setItem('myep-watchlist', JSON.stringify(currentList))
+    }
+
+    watchlistValueChanged() {
+        this.watchlistTarget.style.display = this.watchlistValue.length > 0 ? 'block' : 'none'
+        this.watchlistLabelTarget.textContent = `Merkliste (${this.watchlistValue.length})`
     }
 }
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js
index 6b0c82fe..30a91758 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Assets/js/controllers/watchlist_toggle_controller.js
@@ -12,18 +12,9 @@ export default class extends Controller {
 
     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
+        this.onListValue = !this.onListValue
+        window.dispatchEvent(new CustomEvent('watchlist-toggle', {
+            detail: this.uidValue
         }))
     }
 
diff --git a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
index 6ab25b88..4f058924 100644
--- a/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
+++ b/public/typo3conf/ext/ep_theme/Resources/Private/Partials/ContactBar.html
@@ -1,9 +1,9 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
-<div class="ep-contactnav" data-controller="contactbar" data-action="watchlist-update@window->contactbar#updateWatchlist">
+<div class="ep-contactnav" data-controller="contactbar" data-action="watchlist-toggle@window->contactbar#toggleWatchlist">
     <a href="{f:uri.typolink(parameter: settings.watchlistPageUid)}" class="bg-red watchlist"
        data-contactbar-target="watchlist" rel="nofollow">
         <span class="fa fa-list" aria-hidden="true"></span>
-        <div>Merkliste ({{ $store.getters.watchlistCount }})</div>
+        <div data-contactbar-target="watchlistLabel"></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>