From f6b3d34effd224f378df4ee82f7ee45666177c85 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sun, 22 Sep 2024 01:43:25 +0200
Subject: [PATCH] [UI] Better handling of nested modals on the entities page.

If a modal was spawned from within an entity in a group, then the whole
group needs to get its zIndex bumped.

Otherwise, the modal component will be "caged" within the scope of the
parent and other entity groups will be rendered above it.
---
 .../src/components/panels/Entities/Index.vue  | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
index 95747aedc1..ec64ef3528 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -28,7 +28,10 @@
       <NoItems v-if="!Object.keys(displayGroups || {})?.length">No entities found</NoItems>
 
       <div class="groups-container" v-else>
-        <div class="group fade-in" v-for="group in displayGroups" :key="group.name">
+        <div class="group fade-in"
+             v-for="group in displayGroups"
+             :key="group.name"
+             :ref="`group-${group.name}`">
           <div class="frame">
             <div class="header">
               <span class="section left">
@@ -386,6 +389,29 @@ export default {
       }
     },
 
+    onModalOpen(modal) {
+      const group = this.getParentGroup(modal.$el)
+      if (!group)
+        return
+
+      group.style.zIndex = '' + (parseInt(group.style.zIndex || 0) + 1)
+    },
+
+    onModalClose(modal) {
+      const group = this.getParentGroup(modal.$el)
+      if (!group)
+        return
+
+      group.style.zIndex = '' + Math.max(0, parseInt(group.style.zIndex || 0) - 1)
+    },
+
+    getParentGroup(element) {
+      let parent = element
+      while (parent && !parent.classList?.contains('group'))
+        parent = parent.parentElement
+      return parent
+    },
+
     loadCachedEntities() {
       const cachedEntities = window.localStorage.getItem('entities')
       if (cachedEntities) {
@@ -427,6 +453,9 @@ export default {
       'platypush.message.event.entities.EntityDeleteEvent'
     )
 
+    bus.on('modal-open', this.onModalOpen)
+    bus.on('modal-close', this.onModalClose)
+
     const hasCachedEntities = this.loadCachedEntities()
     await this.sync(!hasCachedEntities)
     await this.refresh(null, !hasCachedEntities)