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 59f63be17..9cbf97bce 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Index.vue +++ b/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; - - @include from($tablet) { - padding: $main-margin; - } + padding: $main-margin; .frame { max-height: calc(100% - #{2 * $main-margin}); 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 3d737ae07..2e25052a5 100644 --- a/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue +++ b/platypush/backend/http/webapp/src/components/panels/Entities/Selector.vue @@ -17,6 +17,10 @@ @click.stop="toggleGroup(g)" /> + +
+ +
@@ -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) => - !!this.selectedGroups[entity[this.value?.grouping]] - ).reduce((obj, entity) => { + return Object.values(this.entityGroups.id).filter((entity) => { + if (!this.selectedGroups[entity[this.value?.grouping]]) + 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) }, }