Files
habitica/website/client/components/members/memberSearchDropdown.vue
cheng-shiqi 0ee29e2fa3 Enable challenges to be closed by "End Challenge" button fix#11339 (#11342)
* fix the dropdown list empty problem in close-challenge-modal

* fix the memberSearchDropdown not accepting input problem

* prevent submit event in dropdown input reloading the page
2019-09-04 16:30:43 -04:00

49 lines
1.1 KiB
Vue

<template lang="pug">
b-dropdown.create-dropdown(:text="text", no-flip)
b-dropdown-form(:disabled='false', v-on:submit.prevent="onSubmit")
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>
</style>
<script>
// @TODO: how do we subclass this rather than type checking?
import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
export default {
mixins: [challengeMemberSearchMixin],
props: {
text: {
type: String,
required: true,
},
members: {
type: Array,
required: true,
},
challengeId: {
type: String,
},
},
data () {
return {
searchTerm: '',
memberResults: [],
};
},
watch: {
memberResults () {
if (this.memberResults.length > 10) this.memberResults.length = 10;
},
},
methods: {
selectMember (member) {
this.$emit('member-selected', member);
},
},
};
</script>