Support for filtering entities by search string

This commit is contained in:
Fabio Manganiello 2022-04-10 17:57:51 +02:00
parent f301fd7e69
commit 532217be12
Signed by untrusted user: blacklight
GPG key ID: D90FBA7F76362774
2 changed files with 33 additions and 8 deletions

View file

@ -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});

View file

@ -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) =>
!!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)
},
}