From 61ebdbf0d95e7dfb70231eac745f163e43846323 Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Thu, 21 Sep 2023 13:56:17 +0200
Subject: [PATCH 1/8] Fix(T34716): add update method to the tooltip directory

---
 src/components/DpTooltip/utils/tooltip.js | 32 ++++++++++++++++++-----
 src/directives/Tooltip/Tooltip.js         | 13 ++++++++-
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/DpTooltip/utils/tooltip.js b/src/components/DpTooltip/utils/tooltip.js
index 1b05655e6..a42ac2a4e 100644
--- a/src/components/DpTooltip/utils/tooltip.js
+++ b/src/components/DpTooltip/utils/tooltip.js
@@ -5,6 +5,7 @@ import { v4 as uuid } from 'uuid'
 let handleShowTooltip = null
 let handleHideTooltip = null
 let handleTimeoutForDestroy = null
+let tooltips = []
 
 const deleteTooltip = (tooltipEl) => {
   if (tooltipEl) {
@@ -32,18 +33,21 @@ const getZIndex = (element) => {
 }
 
 const hideTooltip = (tooltipEl) => {
-  tooltipEl.classList.add('z-below-zero')
-  tooltipEl.classList.add('opacity-0')
+  if (tooltipEl) {
+    tooltipEl.classList.add('z-below-zero')
+    tooltipEl.classList.add('opacity-0')
+  }
 
   handleTimeoutForDestroy = setTimeout(() => deleteTooltip(tooltipEl), 300)
 }
 
 const createTooltip = (id, el, value, container, classes) => {
-  // this has to be in sync with the Template in DpTooltip
+  const tooltip = tooltips.find(el => el.id === id)
+
   const tooltipHtml =
-    `<div class="tooltip absolute ${classes} z-below-zero" role="tooltip" id="${id}">` +
+    `<div class="tooltip absolute ${classes} z-below-zero" role="tooltip" id="${tooltip.id}">` +
     `<div class="tooltip__arrow" data-tooltip-arrow></div>` +
-    `<div class="tooltip__inner">${value}</div>` +
+    `<div class="tooltip__inner">${tooltip.value}</div>` +
     `</div>`
 
   const range = document.createRange()
@@ -59,6 +63,10 @@ const initTooltip = (el, value, options) => {
 
   const id = `tooltip-${uuid()}`
   const zIndex = getZIndex(el)
+  const tooltipData = { id: id, value: value }
+
+  tooltips.push(tooltipData)
+  el.setAttribute('aria-describedby', id)
 
   handleShowTooltip = () => showTooltip(
     id,
@@ -129,4 +137,16 @@ const showTooltip = async (id, wrapperEl, value, { place = 'top', container = 'b
   tooltipEl.classList.remove('opacity-0')
 }
 
-export { destroyTooltip, initTooltip }
+const updateTooltip = (elWrapper, value) => {
+  if (!value) return
+
+  const wrapperId = elWrapper.getAttribute('aria-describedby')
+
+  tooltips.forEach(el => {
+    if (wrapperId === el.id) {
+      el.value = value
+    }
+  })
+}
+
+export { destroyTooltip, initTooltip, updateTooltip }
diff --git a/src/directives/Tooltip/Tooltip.js b/src/directives/Tooltip/Tooltip.js
index e22fcabcc..92a6de3f4 100644
--- a/src/directives/Tooltip/Tooltip.js
+++ b/src/directives/Tooltip/Tooltip.js
@@ -1,5 +1,5 @@
 import { VPopover as Popover } from 'v-tooltip'
-import { destroyTooltip, initTooltip } from '../../components/DpTooltip/utils/tooltip'
+import { destroyTooltip, initTooltip, updateTooltip } from '../../components/DpTooltip/utils/tooltip'
 
 /**
  * @deprecated Use DpTooltip instead
@@ -60,6 +60,17 @@ const Tooltip = {
 
     initTooltip(element, content, options)
   },
+
+  update: function (element, binding) {
+    let content = binding.value
+
+    if (binding.value && typeof binding.value === 'object') {
+      content = binding.value.content
+    }
+
+    updateTooltip(element, content)
+  },
+
   unbind: function (element) {
     destroyTooltip(element)
   }

From e03320bf52370913b5c8e709fd2322e92c0bccb2 Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Thu, 21 Sep 2023 14:39:49 +0200
Subject: [PATCH 2/8] Fix(T34716): remove the value from the createTooltip
 method, as it is being saved in the tooltips variable

---
 src/components/DpTooltip/utils/tooltip.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/DpTooltip/utils/tooltip.js b/src/components/DpTooltip/utils/tooltip.js
index a42ac2a4e..93cf309e7 100644
--- a/src/components/DpTooltip/utils/tooltip.js
+++ b/src/components/DpTooltip/utils/tooltip.js
@@ -41,7 +41,7 @@ const hideTooltip = (tooltipEl) => {
   handleTimeoutForDestroy = setTimeout(() => deleteTooltip(tooltipEl), 300)
 }
 
-const createTooltip = (id, el, value, container, classes) => {
+const createTooltip = (id, el, container, classes) => {
   const tooltip = tooltips.find(el => el.id === id)
 
   const tooltipHtml =
@@ -71,7 +71,6 @@ const initTooltip = (el, value, options) => {
   handleShowTooltip = () => showTooltip(
     id,
     el,
-    value,
     options,
     zIndex
   )
@@ -83,9 +82,9 @@ const initTooltip = (el, value, options) => {
   el.addEventListener('blur', handleHideTooltip)
 }
 
-const showTooltip = async (id, wrapperEl, value, { place = 'top', container = 'body', classes = '' }, zIndex)  => {
+const showTooltip = async (id, wrapperEl, { place = 'top', container = 'body', classes = '' }, zIndex)  => {
   if (!document.getElementById(wrapperEl.getAttribute('aria-describedby'))) {
-    createTooltip(id, wrapperEl, value, container, classes)
+    createTooltip(id, wrapperEl, container, classes)
   } else {
     clearTimeout(handleTimeoutForDestroy)
   }

From df2bfcaa86c045fcc5a267992753fded2f9870d0 Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Thu, 21 Sep 2023 15:16:07 +0200
Subject: [PATCH 3/8] Fix(T34716): Replace the old tooltip value with a new one
 by deleting the existing tooltip and creating a new one in the update hook.
 It makes it possible to display the actual value dynamically.

---
 src/components/DpTooltip/utils/tooltip.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/DpTooltip/utils/tooltip.js b/src/components/DpTooltip/utils/tooltip.js
index 93cf309e7..48c46bbf2 100644
--- a/src/components/DpTooltip/utils/tooltip.js
+++ b/src/components/DpTooltip/utils/tooltip.js
@@ -41,7 +41,7 @@ const hideTooltip = (tooltipEl) => {
   handleTimeoutForDestroy = setTimeout(() => deleteTooltip(tooltipEl), 300)
 }
 
-const createTooltip = (id, el, container, classes) => {
+const createTooltip = (id, container, classes) => {
   const tooltip = tooltips.find(el => el.id === id)
 
   const tooltipHtml =
@@ -51,7 +51,6 @@ const createTooltip = (id, el, container, classes) => {
     `</div>`
 
   const range = document.createRange()
-  el.setAttribute('aria-describedby', id)
 
   const content = range.createContextualFragment(tooltipHtml)
 
@@ -84,7 +83,7 @@ const initTooltip = (el, value, options) => {
 
 const showTooltip = async (id, wrapperEl, { place = 'top', container = 'body', classes = '' }, zIndex)  => {
   if (!document.getElementById(wrapperEl.getAttribute('aria-describedby'))) {
-    createTooltip(id, wrapperEl, container, classes)
+    createTooltip(id, container, classes)
   } else {
     clearTimeout(handleTimeoutForDestroy)
   }
@@ -136,16 +135,24 @@ const showTooltip = async (id, wrapperEl, { place = 'top', container = 'body', c
   tooltipEl.classList.remove('opacity-0')
 }
 
-const updateTooltip = (elWrapper, value) => {
+const updateTooltip = (elWrapper, value, options) => {
   if (!value) return
 
   const wrapperId = elWrapper.getAttribute('aria-describedby')
+  const zIndex = getZIndex(elWrapper)
 
   tooltips.forEach(el => {
     if (wrapperId === el.id) {
       el.value = value
     }
   })
+
+  const tooltipEl = document.getElementById(wrapperId)
+
+  if (tooltipEl) {
+    deleteTooltip(tooltipEl)
+    showTooltip(wrapperId, elWrapper, options, zIndex)
+  }
 }
 
 export { destroyTooltip, initTooltip, updateTooltip }

From 4d1bc2a86fd4c543430221bb1fe8bb818501ccfb Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Thu, 21 Sep 2023 15:19:59 +0200
Subject: [PATCH 4/8] Fix(T34716): add a comment

---
 src/components/DpTooltip/utils/tooltip.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/DpTooltip/utils/tooltip.js b/src/components/DpTooltip/utils/tooltip.js
index 48c46bbf2..72e0088c0 100644
--- a/src/components/DpTooltip/utils/tooltip.js
+++ b/src/components/DpTooltip/utils/tooltip.js
@@ -43,7 +43,7 @@ const hideTooltip = (tooltipEl) => {
 
 const createTooltip = (id, container, classes) => {
   const tooltip = tooltips.find(el => el.id === id)
-
+  // this has to be in sync with the Template in DpTooltip
   const tooltipHtml =
     `<div class="tooltip absolute ${classes} z-below-zero" role="tooltip" id="${tooltip.id}">` +
     `<div class="tooltip__arrow" data-tooltip-arrow></div>` +

From 046c3cbd298a96460c7ba1b2f30a98701f9aefca Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Thu, 21 Sep 2023 15:23:16 +0200
Subject: [PATCH 5/8] Fix(T34716): add options to the Tooltip update hook

---
 src/directives/Tooltip/Tooltip.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/directives/Tooltip/Tooltip.js b/src/directives/Tooltip/Tooltip.js
index 92a6de3f4..7dc2a212a 100644
--- a/src/directives/Tooltip/Tooltip.js
+++ b/src/directives/Tooltip/Tooltip.js
@@ -63,12 +63,21 @@ const Tooltip = {
 
   update: function (element, binding) {
     let content = binding.value
+    let options = { place: 'top' }
 
     if (binding.value && typeof binding.value === 'object') {
       content = binding.value.content
+
+      if (binding.value.container) {
+        options = { ...options, container: binding.value.container }
+      }
+
+      if (binding.value.classes) {
+        options = { ...options, classes: binding.value.classes }
+      }
     }
 
-    updateTooltip(element, content)
+    updateTooltip(element, content, options)
   },
 
   unbind: function (element) {

From dc15c03a1f34f76ff4b81fbc03e94cd7a0c51fb0 Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Thu, 21 Sep 2023 16:13:26 +0200
Subject: [PATCH 6/8] Fix(T34716): remove tooltip by id from the tooltips array
 when the deleteTooltip action is triggered

---
 src/components/DpTooltip/utils/tooltip.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/DpTooltip/utils/tooltip.js b/src/components/DpTooltip/utils/tooltip.js
index 72e0088c0..9b502afc2 100644
--- a/src/components/DpTooltip/utils/tooltip.js
+++ b/src/components/DpTooltip/utils/tooltip.js
@@ -9,6 +9,7 @@ let tooltips = []
 
 const deleteTooltip = (tooltipEl) => {
   if (tooltipEl) {
+    tooltips.filter(el => el.id !== tooltipEl.id)
     tooltipEl.remove()
   }
 }

From f4102553846455c57f7e55a9f4174056425a5cf8 Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Fri, 22 Sep 2023 10:28:13 +0200
Subject: [PATCH 7/8] Fix(T34716): refactored tooltip.js, save tooltips as an
 object

---
 src/components/DpTooltip/utils/tooltip.js | 27 +++++++++--------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/components/DpTooltip/utils/tooltip.js b/src/components/DpTooltip/utils/tooltip.js
index 9b502afc2..00e5d1632 100644
--- a/src/components/DpTooltip/utils/tooltip.js
+++ b/src/components/DpTooltip/utils/tooltip.js
@@ -5,11 +5,10 @@ import { v4 as uuid } from 'uuid'
 let handleShowTooltip = null
 let handleHideTooltip = null
 let handleTimeoutForDestroy = null
-let tooltips = []
+let tooltips = {}
 
 const deleteTooltip = (tooltipEl) => {
   if (tooltipEl) {
-    tooltips.filter(el => el.id !== tooltipEl.id)
     tooltipEl.remove()
   }
 }
@@ -43,12 +42,12 @@ const hideTooltip = (tooltipEl) => {
 }
 
 const createTooltip = (id, container, classes) => {
-  const tooltip = tooltips.find(el => el.id === id)
+  const value = tooltips[id]
   // this has to be in sync with the Template in DpTooltip
   const tooltipHtml =
-    `<div class="tooltip absolute ${classes} z-below-zero" role="tooltip" id="${tooltip.id}">` +
+    `<div class="tooltip absolute ${classes} z-below-zero" role="tooltip" id="${id}">` +
     `<div class="tooltip__arrow" data-tooltip-arrow></div>` +
-    `<div class="tooltip__inner">${tooltip.value}</div>` +
+    `<div class="tooltip__inner">${value}</div>` +
     `</div>`
 
   const range = document.createRange()
@@ -63,9 +62,8 @@ const initTooltip = (el, value, options) => {
 
   const id = `tooltip-${uuid()}`
   const zIndex = getZIndex(el)
-  const tooltipData = { id: id, value: value }
+  tooltips[id] = value
 
-  tooltips.push(tooltipData)
   el.setAttribute('aria-describedby', id)
 
   handleShowTooltip = () => showTooltip(
@@ -136,23 +134,18 @@ const showTooltip = async (id, wrapperEl, { place = 'top', container = 'body', c
   tooltipEl.classList.remove('opacity-0')
 }
 
-const updateTooltip = (elWrapper, value, options) => {
+const updateTooltip = (wrapper, value, options) => {
   if (!value) return
 
-  const wrapperId = elWrapper.getAttribute('aria-describedby')
-  const zIndex = getZIndex(elWrapper)
-
-  tooltips.forEach(el => {
-    if (wrapperId === el.id) {
-      el.value = value
-    }
-  })
+  const wrapperId = wrapper.getAttribute('aria-describedby')
+  tooltips[wrapperId] = value
 
+  const zIndex = getZIndex(wrapper)
   const tooltipEl = document.getElementById(wrapperId)
 
   if (tooltipEl) {
     deleteTooltip(tooltipEl)
-    showTooltip(wrapperId, elWrapper, options, zIndex)
+    showTooltip(wrapperId, wrapper, options, zIndex)
   }
 }
 

From 5b06b7794e320b357c931175c7cde28c05e3c173 Mon Sep 17 00:00:00 2001
From: Natalija Sakuta <sakuta@demos-deutschland.de>
Date: Fri, 22 Sep 2023 12:14:23 +0200
Subject: [PATCH 8/8] Fix(T34716): update changelog

---
 CHANGELOG.md | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5a5ce3d0b..ca3029bfa 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,10 +4,13 @@ Since v0.0.10, this Changelog is formatted according to the [Common Changelog][c
 
 ## UNRELEASED
 
+### Added
+- ([#542](https://github.com/demos-europe/demosplan-ui/pull/542)) Add update hook to tooltip directive for dynamic value updates ([@sakutademos](https://github.com/sakutademos))
+
 ## v0.1.15 - 2023-09-18
 
 ### Added
-- ([#523](https://github.com/demos-europe/demosplan-ui/pull/523)) Added a method that checks the z-index of the parent element and appends zIndex + 1 to the style of the tooltip ([@sakutademos](https://github.com/sakutademos))
+- ([#523](https://github.com/demos-europe/demosplan-ui/pull/523)) Add a method that checks the z-index of the parent element and appends zIndex + 1 to the style of the tooltip ([@sakutademos](https://github.com/sakutademos))
 
 ## v0.1.14 - 2023-09-07