From 01c7d230f1a3ade98bd20a86f34690df0c29fd0d Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Sat, 14 Oct 2023 13:30:01 +0200
Subject: [PATCH] [Entities UI] Added `Expand`/`Collapse` and `Hide` actions to
 groups.

Also, replaced all the deprecated `::v-deep` SCSS notations with
`:deep`.
---
 .../src/components/elements/DropdownItem.vue  |  2 +-
 .../src/components/panels/Entities/Index.vue  | 41 +++++++++++++++++--
 .../src/components/panels/Media/Header.vue    |  2 +-
 .../src/components/panels/Media/Index.vue     |  8 ++--
 .../src/components/panels/Media/Players.vue   |  6 +--
 .../src/components/panels/Media/Results.vue   |  2 +-
 .../src/components/panels/Music/Header.vue    |  2 +-
 .../src/components/panels/Music/Index.vue     | 12 +++---
 .../src/components/panels/Music/Library.vue   |  2 +-
 .../src/components/panels/Music/Playlist.vue  |  2 +-
 .../src/components/panels/Music/Playlists.vue |  2 +-
 .../src/components/panels/Music/Search.vue    |  6 +--
 .../src/components/panels/Music/track.scss    |  2 +-
 .../components/panels/MusicSnapcast/Index.vue |  4 +-
 .../src/components/panels/Torrent/Header.vue  |  2 +-
 .../src/components/panels/Torrent/View.vue    |  4 +-
 .../backend/http/webapp/src/style/items.scss  |  4 +-
 17 files changed, 68 insertions(+), 35 deletions(-)

diff --git a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
index c3c44dd4fa..691b15a3f7 100644
--- a/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
+++ b/platypush/backend/http/webapp/src/components/elements/DropdownItem.vue
@@ -81,7 +81,7 @@ export default {
     align-items: center;
   }
 
-  ::v-deep(.icon-container) {
+  :deep(.icon-container) {
     width: 2em;
     display: inline-flex;
     align-items: center;
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 e8db9f4653..048f0c975d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -43,13 +43,18 @@
               </span>
 
               <span class="section right">
-                <button title="Refresh" @click="refresh(group)">
-                  <i class="fa fa-sync-alt" />
-                </button>
+                <Dropdown title="Actions" icon-class="fa fa-ellipsis-h">
+                  <DropdownItem text="Refresh" icon-class="fa fa-sync-alt" @click="refresh(group)" />
+                  <DropdownItem text="Hide" icon-class="fa fa-eye-slash" @click="hideGroup(group)" />
+                  <DropdownItem text="Collapse" icon-class="fa fa-caret-up"
+                    @click="collapsedGroups[group] = true" v-if="!collapsedGroups[group]" />
+                  <DropdownItem text="Expand" icon-class="fa fa-caret-down"
+                    @click="collapsedGroups[group] = false" v-else />
+                </Dropdown>
               </span>
             </div>
 
-            <div class="body">
+            <div class="body" v-if="!collapsedGroups[group]">
               <div class="entity-frame"
                  v-for="entity in Object.values(group.entities).sort((a, b) => a.name.localeCompare(b.name))"
                  :key="entity.id">
@@ -76,6 +81,8 @@
 
 <script>
 import Utils from "@/Utils"
+import Dropdown from "@/components/elements/Dropdown";
+import DropdownItem from "@/components/elements/DropdownItem";
 import Loading from "@/components/Loading";
 import Icon from "@/components/elements/Icon";
 import NoItems from "@/components/elements/NoItems";
@@ -91,6 +98,8 @@ export default {
   name: "Entities",
   mixins: [Utils],
   components: {
+    Dropdown,
+    DropdownItem,
     Entity,
     EntityModal,
     Icon,
@@ -129,6 +138,7 @@ export default {
         selectedEntities: {},
         selectedGroups: {},
       },
+      collapsedGroups: {},
     }
   },
 
@@ -217,6 +227,14 @@ export default {
       )
     },
 
+    hideGroup(group) {
+      Object.keys(group.entities).forEach((id) => {
+        if (this.selector.selectedEntities[id])
+          delete this.selector.selectedEntities[id]
+      })
+      delete this.selector.selectedGroups[group.name]
+    },
+
     async refresh(group) {
       const entities = (group ? group.entities : this.entities) || {}
       const args = {}
@@ -625,5 +643,20 @@ export default {
       }
     }
   }
+
+  :deep(.dropdown-container) {
+    .dropdown {
+      min-width: 10em;
+      margin-left: 0;
+
+      .item {
+        box-shadow: none;
+      }
+    }
+
+    button {
+      background: none;
+    }
+  }
 }
 </style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Header.vue b/platypush/backend/http/webapp/src/components/panels/Media/Header.vue
index d26431cb98..b138797561 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Header.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Header.vue
@@ -163,7 +163,7 @@ export default {
     }
   }
 
-  ::v-deep(button) {
+  :deep(button) {
     background: none;
     padding: 0 .25em;
     border: 0;
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
index cb2c99c1c1..27d81190ed 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Index.vue
@@ -398,11 +398,11 @@ export default {
   }
 }
 
-::v-deep(.loading) {
+:deep(.loading) {
   z-index: 10;
 }
 
-::v-deep(.media-info-container) {
+:deep(.media-info-container) {
   .modal-container {
     .content {
       max-width: 75%;
@@ -415,7 +415,7 @@ export default {
   }
 }
 
-::v-deep(.subtitles-container) {
+:deep(.subtitles-container) {
   .body {
     padding: 0 !important;
 
@@ -425,7 +425,7 @@ export default {
   }
 }
 
-::v-deep(.play-url-container) {
+:deep(.play-url-container) {
   .body {
     padding: 1em !important;
   }
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Players.vue b/platypush/backend/http/webapp/src/components/panels/Media/Players.vue
index 5bec47e0f1..01c5694cef 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Players.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Players.vue
@@ -118,7 +118,7 @@ export default {
 }
 
 .players {
-  ::v-deep(.dropdown) {
+  :deep(.dropdown) {
     direction: ltr;
     .item {
       padding: .5em;
@@ -129,13 +129,13 @@ export default {
     }
   }
 
-  ::v-deep(.refresh) {
+  :deep(.refresh) {
     font-weight: bold;
     font-size: .8em;
     opacity: .7;
   }
 
-  ::v-deep(.player.selected) {
+  :deep(.player.selected) {
     color: $selected-fg;
   }
 }
diff --git a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
index dcaf8c4963..13a0ad5fed 100644
--- a/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Media/Results.vue
@@ -92,7 +92,7 @@ export default {
         margin-right: .5em;
       }
 
-      ::v-deep(.dropdown-container) {
+      :deep(.dropdown-container) {
         .item {
           box-shadow: none;
         }
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Header.vue b/platypush/backend/http/webapp/src/components/panels/Music/Header.vue
index f4e05ad701..3641c5c142 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Header.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Header.vue
@@ -20,7 +20,7 @@ export default {
   padding: .5em;
   box-shadow: $border-shadow-bottom;
 
-  ::v-deep(.dropdown) {
+  :deep(.dropdown) {
     .item.active {
       color: $default-hover-fg;
     }
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Index.vue b/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
index 09776e0411..16af2fb05d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Index.vue
@@ -347,7 +347,7 @@ main {
     overflow: auto;
   }
 
-  ::v-deep(button) {
+  :deep(button) {
     background: none;
     padding: .5em .75em;
     border: 0;
@@ -358,7 +358,7 @@ main {
     }
   }
 
-  ::v-deep(a) {
+  :deep(a) {
     color: $default-fg;
     opacity: 0.65;
 
@@ -370,13 +370,13 @@ main {
 }
 
 .playlists-modal-container {
-  ::v-deep(.body) {
+  :deep(.body) {
     display: flex;
     flex-direction: column;
     padding: 0 !important;
   }
 
-  ::v-deep(.filter) {
+  :deep(.filter) {
     padding: .33em;
     background-color: $default-bg-6;
     border-bottom: $default-border-2;
@@ -386,7 +386,7 @@ main {
     }
   }
 
-  ::v-deep(.playlists) {
+  :deep(.playlists) {
     overflow: auto;
     padding: 1.5em;
 
@@ -406,7 +406,7 @@ main {
 }
 
 .track-info-container {
-  ::v-deep(.body) {
+  :deep(.body) {
     height: 15em;
     overflow: auto;
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Library.vue b/platypush/backend/http/webapp/src/components/panels/Music/Library.vue
index a88ab693c8..35cbb19f22 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Library.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Library.vue
@@ -205,7 +205,7 @@ export default {
     }
   }
 
-  ::v-deep(.header) {
+  :deep(.header) {
     display: flex;
     width: 100%;
     align-items: center;
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue b/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
index e7111eba19..7d891f2e95 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Playlist.vue
@@ -365,7 +365,7 @@ export default {
   }
 }
 
-::v-deep(.track-info-content) {
+:deep(.track-info-content) {
   .attr {
     opacity: 0.75;
   }
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue b/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue
index 51aa2f071c..0c09799063 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Playlists.vue
@@ -357,7 +357,7 @@ export default {
     width: 100%;
   }
 
-  ::v-deep(.header) {
+  :deep(.header) {
     .back-btn {
       padding-left: .25em;
     }
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/Search.vue b/platypush/backend/http/webapp/src/components/panels/Music/Search.vue
index 476f861d7c..78d20e1f9d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/Search.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Music/Search.vue
@@ -242,13 +242,13 @@ export default {
       width: 100%;
     }
 
-    ::v-deep(.form-footer) {
+    :deep(.form-footer) {
       height: 3em;
       padding-right: 0;
       border: 0;
     }
 
-    ::v-deep(button) {
+    :deep(button) {
       border: 0;
 
       &[type=submit] {
@@ -268,7 +268,7 @@ export default {
     overflow: auto;
   }
 
-  ::v-deep(.header) {
+  :deep(.header) {
     display: flex;
     width: 100%;
     align-items: center;
diff --git a/platypush/backend/http/webapp/src/components/panels/Music/track.scss b/platypush/backend/http/webapp/src/components/panels/Music/track.scss
index 14f3e0aa73..a1042b7d9e 100644
--- a/platypush/backend/http/webapp/src/components/panels/Music/track.scss
+++ b/platypush/backend/http/webapp/src/components/panels/Music/track.scss
@@ -69,7 +69,7 @@
   }
 
   .actions {
-    ::v-deep(button) {
+    :deep(button) {
       opacity: .7;
     }
   }
diff --git a/platypush/backend/http/webapp/src/components/panels/MusicSnapcast/Index.vue b/platypush/backend/http/webapp/src/components/panels/MusicSnapcast/Index.vue
index 46504253db..821eeff2fc 100644
--- a/platypush/backend/http/webapp/src/components/panels/MusicSnapcast/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/MusicSnapcast/Index.vue
@@ -400,7 +400,7 @@ export default {
   background: $background-color;
 }
 
-::v-deep(.info) {
+:deep(.info) {
   .modal {
     .content {
       width: 90%;
@@ -497,4 +497,4 @@ export default {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/platypush/backend/http/webapp/src/components/panels/Torrent/Header.vue b/platypush/backend/http/webapp/src/components/panels/Torrent/Header.vue
index 1cb12a5bc9..0b0052b611 100644
--- a/platypush/backend/http/webapp/src/components/panels/Torrent/Header.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Torrent/Header.vue
@@ -50,7 +50,7 @@ export default {
     }
   }
 
-  ::v-deep(button) {
+  :deep(button) {
     background: none;
     padding: 0 .25em;
     border: 0;
diff --git a/platypush/backend/http/webapp/src/components/panels/Torrent/View.vue b/platypush/backend/http/webapp/src/components/panels/Torrent/View.vue
index b90d5b91c9..86347fda1d 100644
--- a/platypush/backend/http/webapp/src/components/panels/Torrent/View.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Torrent/View.vue
@@ -246,7 +246,7 @@ export default {
   }
 }
 
-::v-deep(.modal-body) {
+:deep(.modal-body) {
   .row {
     display: flex;
     border-bottom: $default-border;
@@ -276,7 +276,7 @@ export default {
   }
 }
 
-::v-deep(.modal-body) {
+:deep(.modal-body) {
   .dropdown-container {
     .row {
       box-shadow: none;
diff --git a/platypush/backend/http/webapp/src/style/items.scss b/platypush/backend/http/webapp/src/style/items.scss
index ba88c4ae5b..f568abce5d 100644
--- a/platypush/backend/http/webapp/src/style/items.scss
+++ b/platypush/backend/http/webapp/src/style/items.scss
@@ -55,7 +55,7 @@ $header-height: 3.5em;
   }
 
   .actions {
-    ::v-deep(button) {
+    :deep(button) {
       opacity: .65;
     }
   }
@@ -65,7 +65,7 @@ $header-height: 3.5em;
     margin-right: .75em;
   }
 
-  ::v-deep(.dropdown-container) {
+  :deep(.dropdown-container) {
     .item {
       box-shadow: none;
     }