frontend/src/components/namespace/namespace-search.vue

48 lines
801 B
Vue

<template>
<multiselect
:placeholder="$t('namespace.search')"
@search="findNamespaces"
:search-results="namespaces"
@select="select"
label="title"
:search-delay="10"
/>
</template>
<script>
import Multiselect from '@/components/input/multiselect.vue'
export default {
name: 'namespace-search',
data() {
return {
query: '',
}
},
components: {
Multiselect,
},
computed: {
namespaces() {
if (this.query === '') {
return []
}
return this.$store.state.namespaces.namespaces.filter(n => {
return !n.isArchived &&
n.id > 0 &&
n.title.toLowerCase().includes(this.query.toLowerCase())
})
},
},
methods: {
findNamespaces(query) {
this.query = query
},
select(namespace) {
this.$emit('selected', namespace)
},
},
}
</script>