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,21 +136,15 @@ 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( (obj, group) => {
(obj, group) => { obj[group] = true
obj[group] = true 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>