From 8af3ae17b80e94170307bf7b562b956c80c1d5b0 Mon Sep 17 00:00:00 2001
From: Fabio Manganiello <fabio@manganiello.tech>
Date: Fri, 5 May 2023 02:33:34 +0200
Subject: [PATCH] A more efficient way of detecting the entity groups to
 display.

Instead of iterating over each of the entities in a grouping to find out
which groups should be displayed based on the selector's policy, the
selector can directly keep its `selectedGroups` attribute in sync with
the index.
---
 .../src/components/panels/Entities/Index.vue    | 17 +++++++----------
 .../src/components/panels/Entities/Selector.vue | 17 ++++++-----------
 2 files changed, 13 insertions(+), 21 deletions(-)

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 3ca45d233..ee697c276 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue
@@ -127,6 +127,7 @@ export default {
       selector: {
         grouping: 'plugin',
         selectedEntities: {},
+        selectedGroups: {},
       },
     }
   },
@@ -148,14 +149,9 @@ export default {
     },
 
     displayGroups() {
-      return Object.entries(this.entityGroups[this.selector.grouping]).
-        filter(
-          (entry) => Object.values(entry[1]).filter(
-            (e) =>
-              !!this.selector.selectedEntities[e.id] && e.parent_id == null
-          ).length > 0
-        ).
-        map(
+      return Object.entries(this.entityGroups[this.selector.grouping])
+        .filter((entry) => this.selector.selectedGroups[entry[0]])
+        .map(
           ([grouping, entities]) => {
             return {
               name: grouping,
@@ -164,8 +160,9 @@ export default {
               ),
             }
           }
-        ).
-        sort((a, b) => a.name.localeCompare(b.name))
+        )
+        .filter((group) => group.entities?.length > 0)
+        .sort((a, b) => a.name.localeCompare(b.name))
     },
   },
 
diff --git a/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue b/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue
index 4bd155fea..aa489e9f9 100644
--- a/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue
+++ b/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue
@@ -143,16 +143,11 @@ export default {
       return {}
     },
 
-    synchronizeSelectedEntities() {
-      const value = {...this.value}
-      value.selectedEntities = this.selectedEntities
-      this.$emit('input', value)
-    },
-
-    updateSearchTerm() {
+    sync() {
       const value = {...this.value}
       value.searchTerm = this.searchTerm
       value.selectedEntities = this.selectedEntities
+      value.selectedGroups = this.selectedGroups
       this.$emit('input', value)
     },
 
@@ -166,17 +161,17 @@ export default {
         }, {}
       )
 
-      this.synchronizeSelectedEntities()
+      this.sync()
     },
 
     toggleGroup(group) {
       this.selectedGroups[group] = !this.selectedGroups[group]
-      this.synchronizeSelectedEntities()
+      this.sync()
     },
 
     processEntityUpdate(entity) {
       const group = entity[this.value?.grouping]
-      if (group && this.selectedGroups[entity[group]] == null) {
+      if (group && this.selectedGroups[group] == null) {
         this.selectedGroups[group] = true
       }
     },
@@ -194,7 +189,7 @@ export default {
   mounted() {
     this.refreshGroupFilter()
     this.$watch(() => this.value?.grouping, () => { this.refreshGroupFilter() })
-    this.$watch(() => this.searchTerm, this.updateSearchTerm)
+    this.$watch(() => this.searchTerm, this.sync)
     bus.onEntity(this.processEntityUpdate)
   },
 }