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

View file

@ -17,6 +17,10 @@
@click.stop="toggleGroup(g)" /> @click.stop="toggleGroup(g)" />
</Dropdown> </Dropdown>
</div> </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> </div>
</template> </template>
@ -47,6 +51,7 @@ export default {
data() { data() {
return { return {
selectedGroups: {}, selectedGroups: {},
searchTerm: '',
} }
}, },
@ -70,9 +75,22 @@ export default {
}, },
selectedEntities() { 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 obj[entity.id] = entity
return obj return obj
}, {}) }, {})
@ -103,6 +121,13 @@ export default {
this.$emit('input', value) this.$emit('input', value)
}, },
updateSearchTerm() {
const value = {...this.value}
value.searchTerm = this.searchTerm
value.selectedEntities = this.selectedEntities
this.$emit('input', value)
},
resetGroupFilter() { resetGroupFilter() {
this.selectedGroups = Object.keys( this.selectedGroups = Object.keys(
this.entityGroups[this.value?.grouping] || {} this.entityGroups[this.value?.grouping] || {}
@ -138,6 +163,7 @@ export default {
mounted() { mounted() {
this.resetGroupFilter() this.resetGroupFilter()
this.$watch(() => this.value?.grouping, this.resetGroupFilter) this.$watch(() => this.value?.grouping, this.resetGroupFilter)
this.$watch(() => this.searchTerm, this.updateSearchTerm)
this.$watch(() => this.entityGroups, this.resetGroupFilter) this.$watch(() => this.entityGroups, this.resetGroupFilter)
}, },
} }