Support for filtering entities by search string

platypush/backend/http/webapp/src/components/panels/Entities/Index.vue

@@ -95,7 +95,9 @@ export default {
         ([grouping, entities]) => {
           return {
             name: grouping,
-            entities: entities,
+            entities: entities.filter(
+              (e) => e.id in this.selector.selectedEntities
+            ),
           }
         }
       )
@@ -190,10 +192,7 @@ export default {
     padding: $main-margin 0;
     display: flex;
     break-inside: avoid;
-
+    padding: $main-margin;
-    @include from($tablet) {
-      padding: $main-margin;
-    }
 
     .frame {
       max-height: calc(100% - #{2 * $main-margin});

platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue

@@ -17,6 +17,10 @@
           @click.stop="toggleGroup(g)" />
       </Dropdown>
     </div>
+
+    <div class="selector" v-if="Object.keys(entityGroups.id || {}).length">
+      <input ref="search" type="text" class="search-bar" placeholder="🔎" v-model="searchTerm">
+    </div>
   </div>
 </template>
 
@@ -47,6 +51,7 @@ export default {
   data() {
     return {
       selectedGroups: {},
+      searchTerm: '',
     }
   },
 
@@ -70,9 +75,22 @@ export default {
     },
 
     selectedEntities() {
-      return Object.values(this.entityGroups.id).filter((entity) =>
+      return Object.values(this.entityGroups.id).filter((entity) => {
-         !!this.selectedGroups[entity[this.value?.grouping]]
+        if (!this.selectedGroups[entity[this.value?.grouping]])
-      ).reduce((obj,  entity) => {
+         return false
+
+        if (this.searchTerm?.length) {
+          const searchTerm = this.searchTerm.toLowerCase()
+          return (
+            ((entity.name || '').toLowerCase()).indexOf(searchTerm) >= 0 ||
+            ((entity.plugin || '').toLowerCase()).indexOf(searchTerm) >= 0 ||
+            ((entity.external_id || '').toLowerCase()).indexOf(searchTerm) >= 0 ||
+            (entity.id || 0).toString() == searchTerm
+          )
+        }
+
+        return true
+      }).reduce((obj,  entity) => {
         obj[entity.id] = entity
         return obj
       }, {})
@@ -103,6 +121,13 @@ export default {
       this.$emit('input', value)
     },
 
+    updateSearchTerm() {
+      const value = {...this.value}
+      value.searchTerm = this.searchTerm
+      value.selectedEntities = this.selectedEntities
+      this.$emit('input', value)
+    },
+
     resetGroupFilter() {
       this.selectedGroups = Object.keys(
         this.entityGroups[this.value?.grouping] || {}
@@ -138,6 +163,7 @@ export default {
   mounted() {
     this.resetGroupFilter()
     this.$watch(() => this.value?.grouping, this.resetGroupFilter)
+    this.$watch(() => this.searchTerm, this.updateSearchTerm)
     this.$watch(() => this.entityGroups, this.resetGroupFilter)
   },
 }