wikijs-fork/client/components/common/user-search.vue

123 lines
2.8 KiB
Vue

<template lang="pug">
v-dialog(
v-model='dialogOpen'
max-width='650'
)
v-card
.dialog-header
span Search User
v-spacer
v-progress-circular(
indeterminate
color='white'
:size='20'
:width='2'
v-show='searchLoading'
)
v-card-text
v-text-field(
solo
flat
label='Search Users...'
v-model='search'
prepend-icon='search'
:class='$vuetify.dark ? "grey darken-4" : "blue lighten-5"'
color='primary'
ref='searchIpt'
)
v-list(two-line)
template(v-for='(usr, idx) in items')
v-list-tile(:key='usr.id', @click='setUser(usr.id)')
v-list-tile-avatar(size='40', color='primary')
span.body-1.white--text {{usr.name | initials}}
v-list-tile-content
v-list-tile-title {{usr.name}}
v-list-tile-sub-title {{usr.email}}
v-list-tile-action
v-icon(color='primary') arrow_forward
v-divider.my-0(v-if='idx < items.length - 1')
v-card-chin
v-spacer
v-btn(
flat
@click='close'
:disabled='loading'
) Cancel
</template>
<script>
import _ from 'lodash'
import searchUsersQuery from 'gql/common/common-users-query-search.gql'
export default {
filters: {
initials(val) {
return val.split(' ').map(v => v.substring(0, 1)).join()
}
},
props: {
multiple: {
type: Boolean,
default: false
},
value: {
type: Boolean,
default: false
}
},
data() {
return {
loading: false,
searchLoading: false,
search: '',
items: []
}
},
computed: {
dialogOpen: {
get() { return this.value },
set(value) { this.$emit('input', value) }
}
},
watch: {
value(newValue, oldValue) {
if (newValue && !oldValue) {
this.search = ''
this.selectedItems = null
_.delay(() => { this.$refs.searchIpt.focus() }, 100)
}
}
},
methods: {
close() {
this.$emit('input', false)
},
setUser(id) {
this.$emit('select', id)
this.close()
},
searchFilter(item, queryText, itemText) {
return _.includes(_.toLower(item.email), _.toLower(queryText)) || _.includes(_.toLower(item.name), _.toLower(queryText))
}
},
apollo: {
items: {
query: searchUsersQuery,
variables() {
return {
query: this.search
}
},
skip() {
return !this.search || this.search.length < 2
},
update: (data) => data.users.search,
watchLoading (isLoading) {
this.searchLoading = isLoading
}
}
}
}
</script>