mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-16 06:07:21 +01:00
* Added notification for when leader is updated * Abstracted challenge member search component * Added challenge member search modal to challenge detail * Added group search
59 lines
1.2 KiB
Vue
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>
|