Fixed entity search.

It was broken by the previous refactor of the entities panel, which no
longer triggers the `watch` callback on the upstream `entityGroups`.

The new approach listens for entity updates on the frontend bus and
dynamically creates the entity groupings in `selectedGroups` if they are
missing.
This commit is contained in:
Fabio Manganiello 2023-05-03 02:12:14 +02:00
parent 9922305ac5
commit 7c7818dd76
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774

View file

@ -29,6 +29,7 @@ import Dropdown from "@/components/elements/Dropdown";
import DropdownItem from "@/components/elements/DropdownItem"; import DropdownItem from "@/components/elements/DropdownItem";
import meta from './meta.json' import meta from './meta.json'
import pluginIcons from '@/assets/icons.json' import pluginIcons from '@/assets/icons.json'
import { bus } from "@/bus";
export default { export default {
name: "Selector", name: "Selector",
@ -74,12 +75,12 @@ export default {
}, },
selectedEntities() { selectedEntities() {
const searchTerm = this.searchTerm?.toLowerCase()
return Object.values(this.entityGroups.id).filter((entity) => { return Object.values(this.entityGroups.id).filter((entity) => {
if (!this.selectedGroups[entity[this.value?.grouping]]) if (!this.selectedGroups[entity[this.value?.grouping]])
return false return false
if (this.searchTerm?.length) { if (searchTerm?.length) {
const searchTerm = this.searchTerm.toLowerCase()
return ( return (
((entity.name || '').toLowerCase()).indexOf(searchTerm) >= 0 || ((entity.name || '').toLowerCase()).indexOf(searchTerm) >= 0 ||
((entity.plugin || '').toLowerCase()).indexOf(searchTerm) >= 0 || ((entity.plugin || '').toLowerCase()).indexOf(searchTerm) >= 0 ||
@ -135,8 +136,7 @@ export default {
this.$emit('input', value) this.$emit('input', value)
}, },
refreshGroupFilter(reset) { refreshGroupFilter() {
if (reset)
this.selectedGroups = Object.keys( this.selectedGroups = Object.keys(
this.entityGroups[this.value?.grouping] || {} this.entityGroups[this.value?.grouping] || {}
).reduce( ).reduce(
@ -145,11 +145,6 @@ export default {
return obj return obj
}, {} }, {}
) )
else {
for (const group of Object.keys(this.entityGroups[this.value?.grouping]))
if (this.selectedGroups[group] == null)
this.selectedGroups[group] = true
}
this.synchronizeSelectedEntities() this.synchronizeSelectedEntities()
}, },
@ -159,6 +154,13 @@ export default {
this.synchronizeSelectedEntities() this.synchronizeSelectedEntities()
}, },
processEntityUpdate(entity) {
const group = entity[this.value?.grouping]
if (group && this.selectedGroups[entity[group]] == null) {
this.selectedGroups[group] = true
}
},
onGroupingChanged(grouping) { onGroupingChanged(grouping) {
if (!this.entityGroups[grouping] || grouping === this.value?.grouping) if (!this.entityGroups[grouping] || grouping === this.value?.grouping)
return false return false
@ -170,10 +172,10 @@ export default {
}, },
mounted() { mounted() {
this.refreshGroupFilter(true) this.refreshGroupFilter()
this.$watch(() => this.value?.grouping, () => { this.refreshGroupFilter(true) }) this.$watch(() => this.value?.grouping, () => { this.refreshGroupFilter() })
this.$watch(() => this.searchTerm, this.updateSearchTerm) this.$watch(() => this.searchTerm, this.updateSearchTerm)
this.$watch(() => this.entityGroups, () => { this.refreshGroupFilter(false) }) bus.onEntity(this.processEntityUpdate)
}, },
} }
</script> </script>