Files
habitica/website/client/components/challenges/closeChallengeModal.vue
negue 4108a22d78 [WIP] bootstrap-vue upgrade (#9178)
* update bootstrap-vue to 1.0.0-beta.9 - remove all individual bootstrap components and use BootstrapVue into Vue

* change modal action names from show::modal to bv::show::modal

* check if drops are undefined

* fix modal widths - sellModal now using input instead of dropbox

* upgrade to bootstrap 4.0beta

* include package-lock changes

* fix app menu dropdown position

* upgrade bootstrap to beta2 (was missing grid offset and other fixes) - refix header menu position

* fix tags popup (auto width to max not working) - fix filter panel width (adding width: 100% works until max-width)

* show hide logo on different screensize (new css breakpoints - http://getbootstrap.com/docs/4.0/utilities/display/ )

* fix package-lock?

* fix active button style / app header toggle button

* fix package-lock !

* update package lock after merge - new mixin "openedItemRows" to save the "show more/show less" in stable

* mixin naming style

* fix buyQuestModal marginTop

* fix customMenuDropdown position

* fix userDropdown items
2017-11-08 18:40:37 +01:00

127 lines
3.2 KiB
Vue

<template lang="pug">
div
b-modal#close-challenge-modal(:title="$t('createGuild')", size='md')
.header-wrap(slot="modal-header")
h2.text-center(v-once) {{$t('endChallenge')}}
.row.text-center
.col-12
.support-habitica
// @TODO: Add challenge achievement badge here
.col-12
strong(v-once) {{$t('selectChallengeWinnersDescription')}}
.col-12
b-dropdown.create-dropdown(:text="winnerText")
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 }}
.col-12
button.btn.btn-primary(v-once, @click='closeChallenge') {{$t('awardWinners')}}
.col-12
hr
.or {{$t('or')}}
.col-12
strong(v-once) {{$t('doYouWantedToDeleteChallenge')}}
.col-12
button.btn.btn-danger(v-once, @click='deleteChallenge()') {{$t('deleteChallenge')}}
.footer-wrap(slot="modal-footer")
</template>
<style lang='scss'>
@import '~client/assets/scss/colors.scss';
#close-challenge-modal {
h2 {
color: $purple-200
}
#close-challenge-modal_modal_body {
padding-bottom: 2em;
}
.header-wrap {
width: 100%;
padding-top: 2em;
}
.support-habitica {
background-image: url('~client/assets/svg/for-css/support-habitica-gems.svg');
width: 325px;
height: 89px;
margin: 0 auto;
}
.modal-footer, .modal-header {
border: none !important;
}
.footer-wrap {
display: none;
}
.col-12 {
margin-top: 2em;
}
.or {
margin-top: -2em;
background: $white;
width: 40px;
margin-right: auto;
margin-left: auto;
font-weight: bold;
}
}
</style>
<script>
import debounce from 'lodash/debounce';
export default {
props: ['challengeId', 'members'],
data () {
return {
winner: {},
searchTerm: '',
memberResults: [],
};
},
watch: {
searchTerm: debounce(function searchTerm (newSearch) {
this.searchChallengeMember(newSearch);
}, 500),
members () {
this.memberResults = this.members;
},
},
computed: {
winnerText () {
if (!this.winner.profile) return this.$t('selectMember');
return this.winner.profile.name;
},
},
methods: {
async searchChallengeMember (search) {
this.memberResults = await this.$store.dispatch('members:getChallengeMembers', {
challengeId: this.challengeId,
searchTerm: search,
});
},
selectMember (member) {
this.winner = member;
},
async closeChallenge () {
this.challenge = await this.$store.dispatch('challenges:selectChallengeWinner', {
challengeId: this.challengeId,
winnerId: this.winner._id,
});
this.$router.push('/challenges/myChallenges');
},
async deleteChallenge () {
if (!confirm('Are you sure you want to delete this challenge?')) return;
this.challenge = await this.$store.dispatch('challenges:deleteChallenge', {challengeId: this.challengeId});
this.$router.push('/challenges/myChallenges');
},
},
};
</script>