Files
habitica/website/client/components/members/groupMemberSearchDropdown.vue
Keith Holliday c28ec24c33 Added notification for when leader is updated (#9674)
* Added notification for when leader is updated

* Abstracted challenge member search component

* Added challenge member search modal to challenge detail

* Added group search
2017-12-14 12:12:43 -06:00

59 lines
1.2 KiB
Vue

<template lang="pug">
b-dropdown.select-member(:text="text")
input.form-control(type='text', v-model='searchTerm')
b-dropdown-item(v-for="member in memberResults", :key="member._id", @click="selectMember(member)")
| {{ member.profile.name }}
</template>
<style lang="scss" scoped>
.select-member {
width: 100%;
}
</style>
<script>
// @TODO: how do we subclass the other member search or compose?
import debounce from 'lodash/debounce';
export default {
props: {
text: {
type: String,
required: true,
},
members: {
type: Array,
required: true,
},
groupId: {
type: String,
},
},
data () {
return {
searchTerm: '',
memberResults: [],
};
},
mounted () {
this.memberResults = this.members;
},
watch: {
searchTerm: debounce(function searchTerm (newSearch) {
this.searchMember(newSearch);
}, 500),
},
methods: {
selectMember (member) {
this.$emit('member-selected', member);
},
async searchMember (search) {
this.memberResults = await this.$store.dispatch('members:getGroupMembers', {
groupId: this.groupId,
searchTerm: search,
});
},
},
};
</script>