mirror of
https://github.com/HabitRPG/habitica.git
synced 2025-12-15 13:47:33 +01:00
470 lines
14 KiB
Vue
470 lines
14 KiB
Vue
<template lang="pug">
|
|
b-modal#challenge-modal(:title="title", size='lg', @shown="shown")
|
|
.form
|
|
.form-group
|
|
label
|
|
strong(v-once) {{$t('name')}} *
|
|
b-form-input(type="text", :placeholder="$t('challengeNamePlaceholder')", v-model="workingChallenge.name")
|
|
.form-group
|
|
label
|
|
strong(v-once) {{$t('shortName')}} *
|
|
b-form-input(type="text", :placeholder="$t('shortNamePlaceholder')", v-model="workingChallenge.shortName")
|
|
.form-group
|
|
label
|
|
strong(v-once) {{$t('challengeSummary')}} *
|
|
div.summary-count {{ $t('charactersRemaining', {characters: charactersRemaining}) }}
|
|
textarea.summary-textarea.form-control(:placeholder="$t('challengeSummaryPlaceholder')", v-model="workingChallenge.summary")
|
|
.form-group
|
|
label
|
|
strong(v-once) {{$t('challengeDescription')}} *
|
|
a.float-right(v-markdown='$t("markdownFormattingHelp")')
|
|
textarea.description-textarea.form-control(:placeholder="$t('challengeDescriptionPlaceholder')", v-model="workingChallenge.description")
|
|
.form-group(v-if='creating')
|
|
label
|
|
strong(v-once) {{$t('challengeGuild')}} *
|
|
select.form-control(v-model='workingChallenge.group')
|
|
option(v-for='group in groups', :value='group._id') {{group.name}}
|
|
.form-group(v-if='workingChallenge.categories')
|
|
label
|
|
strong(v-once) {{$t('categories')}} *
|
|
div.category-wrap(@click.prevent="toggleCategorySelect")
|
|
span.category-select(v-if='workingChallenge.categories.length === 0') {{$t('none')}}
|
|
.category-label(v-for='category in workingChallenge.categories') {{$t(categoriesHashByKey[category])}}
|
|
.category-box(v-if="showCategorySelect")
|
|
.form-check(
|
|
v-for="group in categoryOptions",
|
|
:key="group.key",
|
|
v-if='group.key !== "habitica_official" || user.contributor.admin'
|
|
)
|
|
.custom-control.custom-checkbox
|
|
input.custom-control-input(type="checkbox",
|
|
:value="group.key",
|
|
:id="group.key",
|
|
v-model="workingChallenge.categories")
|
|
label.custom-control-label(v-once, :for="group.key") {{ $t(group.label) }}
|
|
button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
|
|
// @TODO: Implement in V2 .form-group
|
|
label
|
|
strong(v-once) {{$t('endDate')}}
|
|
b-form-input.end-date-input
|
|
.form-group(v-if='creating')
|
|
label
|
|
strong(v-once) {{$t('prize')}}
|
|
input(type='number', :min='minPrize', :max='maxPrize', v-model="workingChallenge.prize")
|
|
.row.footer-wrap
|
|
.col-12.text-center.submit-button-wrapper
|
|
.alert.alert-warning(v-if='insufficientGemsForTavernChallenge') You do not have enough gems to create a Tavern challenge
|
|
// @TODO if buy gems button is added, add analytics tracking to it
|
|
// see https://github.com/HabitRPG/habitica/blob/develop/website/views/options/social/challenges.jade#L134
|
|
button.btn.btn-primary(v-if='creating && !cloning', @click='createChallenge()', :disabled='loading') {{$t('createChallengeAddTasks')}}
|
|
button.btn.btn-primary(v-once, v-if='cloning', @click='createChallenge()', :disabled='loading') {{$t('createChallengeCloneTasks')}}
|
|
button.btn.btn-primary(v-once, v-if='!creating && !cloning', @click='updateChallenge()') {{$t('updateChallenge')}}
|
|
.col-12.text-center
|
|
p(v-once) {{$t('challengeMinimum')}}
|
|
</template>
|
|
|
|
<style lang='scss'>
|
|
@import '~client/assets/scss/colors.scss';
|
|
|
|
#challenge-modal {
|
|
h5 {
|
|
color: $purple-200;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
.modal-header {
|
|
border: none;
|
|
}
|
|
|
|
.modal-footer {
|
|
display: none;
|
|
}
|
|
|
|
.summary-count {
|
|
font-size: 12px;
|
|
line-height: 1.33;
|
|
margin-top: 1em;
|
|
color: $gray-200;
|
|
text-align: right;
|
|
}
|
|
|
|
.summary-textarea {
|
|
height: 90px;
|
|
}
|
|
|
|
.description-textarea {
|
|
height: 220px;
|
|
}
|
|
|
|
label {
|
|
margin-right: .5em;
|
|
}
|
|
|
|
.end-date-input {
|
|
width: 150px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.submit-button-wrapper {
|
|
margin-bottom: .5em;
|
|
}
|
|
|
|
.footer-wrap {
|
|
margin-top: 2em;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.category-wrap {
|
|
position: relative;
|
|
}
|
|
|
|
.category-box {
|
|
top: 20em !important;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import clone from 'lodash/clone';
|
|
|
|
import markdownDirective from 'client/directives/markdown';
|
|
|
|
import { TAVERN_ID, MIN_SHORTNAME_SIZE_FOR_CHALLENGES, MAX_SUMMARY_SIZE_FOR_CHALLENGES } from '../../../common/script/constants';
|
|
import { mapState } from 'client/libs/store';
|
|
|
|
export default {
|
|
props: ['groupId'],
|
|
directives: {
|
|
markdown: markdownDirective,
|
|
},
|
|
data () {
|
|
let categoryOptions = [
|
|
{
|
|
label: 'habitica_official',
|
|
key: 'habitica_official',
|
|
},
|
|
{
|
|
label: 'academics',
|
|
key: 'academics',
|
|
},
|
|
{
|
|
label: 'advocacy_causes',
|
|
key: 'advocacy_causes',
|
|
},
|
|
{
|
|
label: 'creativity',
|
|
key: 'creativity',
|
|
},
|
|
{
|
|
label: 'entertainment',
|
|
key: 'entertainment',
|
|
},
|
|
{
|
|
label: 'finance',
|
|
key: 'finance',
|
|
},
|
|
{
|
|
label: 'health_fitness',
|
|
key: 'health_fitness',
|
|
},
|
|
{
|
|
label: 'hobbies_occupations',
|
|
key: 'hobbies_occupations',
|
|
},
|
|
{
|
|
label: 'location_based',
|
|
key: 'location_based',
|
|
},
|
|
{
|
|
label: 'mental_health',
|
|
key: 'mental_health',
|
|
},
|
|
{
|
|
label: 'getting_organized',
|
|
key: 'getting_organized',
|
|
},
|
|
{
|
|
label: 'self_improvement',
|
|
key: 'self_improvement',
|
|
},
|
|
{
|
|
label: 'spirituality',
|
|
key: 'spirituality',
|
|
},
|
|
{
|
|
label: 'time_management',
|
|
key: 'time_management',
|
|
},
|
|
];
|
|
let hashedCategories = {};
|
|
categoryOptions.forEach((category) => {
|
|
hashedCategories[category.key] = category.label;
|
|
});
|
|
let categoriesHashByKey = hashedCategories;
|
|
|
|
return {
|
|
workingChallenge: {
|
|
name: '',
|
|
summary: '',
|
|
description: '',
|
|
categories: [],
|
|
group: '',
|
|
dailys: [],
|
|
habits: [],
|
|
leader: '',
|
|
members: [],
|
|
official: false,
|
|
prize: 1,
|
|
rewards: [],
|
|
shortName: '',
|
|
todos: [],
|
|
},
|
|
cloning: false,
|
|
cloningChallengeId: '',
|
|
showCategorySelect: false,
|
|
categoryOptions,
|
|
categoriesHashByKey,
|
|
loading: false,
|
|
groups: [],
|
|
};
|
|
},
|
|
mounted () {
|
|
this.$root.$on('habitica:clone-challenge', (data) => {
|
|
if (!data.challenge) return;
|
|
this.cloning = true;
|
|
this.cloningChallengeId = data.challenge._id;
|
|
this.$store.state.challengeOptions.workingChallenge = Object.assign({}, this.$store.state.challengeOptions.workingChallenge, data.challenge);
|
|
this.$root.$emit('bv::show::modal', 'challenge-modal');
|
|
});
|
|
},
|
|
beforeDestroy () {
|
|
this.$root.$off('habitica:clone-challenge');
|
|
},
|
|
watch: {
|
|
user () {
|
|
if (!this.challenge) this.workingChallenge.leader = this.user._id;
|
|
},
|
|
challenge () {
|
|
this.setUpWorkingChallenge();
|
|
},
|
|
cloning () {
|
|
this.setUpWorkingChallenge();
|
|
},
|
|
},
|
|
computed: {
|
|
...mapState({user: 'user.data'}),
|
|
creating () {
|
|
return !this.workingChallenge.id;
|
|
},
|
|
title () {
|
|
if (this.creating) {
|
|
return this.$t('createChallenge');
|
|
}
|
|
return this.$t('editingChallenge');
|
|
},
|
|
charactersRemaining () {
|
|
let currentLength = this.workingChallenge.summary ? this.workingChallenge.summary.length : 0;
|
|
return MAX_SUMMARY_SIZE_FOR_CHALLENGES - currentLength;
|
|
},
|
|
maxPrize () {
|
|
let userBalance = this.user.balance || 0;
|
|
userBalance = userBalance * 4;
|
|
|
|
let groupBalance = 0;
|
|
let group;
|
|
this.groups.forEach(item => {
|
|
if (item._id === this.workingChallenge.group) {
|
|
group = item;
|
|
return;
|
|
}
|
|
});
|
|
|
|
if (group && group.balance && group.leader === this.user._id) {
|
|
groupBalance = group.balance * 4;
|
|
}
|
|
|
|
return userBalance + groupBalance;
|
|
},
|
|
minPrize () {
|
|
if (this.workingChallenge.group === TAVERN_ID) return 1;
|
|
return 0;
|
|
},
|
|
insufficientGemsForTavernChallenge () {
|
|
let balance = this.user.balance || 0;
|
|
let isForTavern = this.workingChallenge.group === TAVERN_ID;
|
|
|
|
if (isForTavern) {
|
|
return balance <= 0;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
challenge () {
|
|
return this.$store.state.challengeOptions.workingChallenge;
|
|
},
|
|
},
|
|
methods: {
|
|
async shown () {
|
|
this.groups = await this.$store.dispatch('guilds:getMyGuilds');
|
|
await this.$store.dispatch('party:getParty');
|
|
const party = this.$store.state.party.data;
|
|
if (party._id) {
|
|
this.groups.push({
|
|
name: party.name,
|
|
_id: party._id,
|
|
privacy: 'private',
|
|
});
|
|
}
|
|
|
|
this.groups.push({
|
|
name: this.$t('publicChallengesTitle'),
|
|
_id: TAVERN_ID,
|
|
});
|
|
|
|
this.setUpWorkingChallenge();
|
|
},
|
|
setUpWorkingChallenge () {
|
|
this.resetWorkingChallenge();
|
|
|
|
if (!this.challenge) return;
|
|
|
|
this.workingChallenge = Object.assign({}, this.workingChallenge, this.challenge);
|
|
// @TODO: Should we use a separate field? I think the API expects `group` but it is confusing
|
|
this.workingChallenge.group = this.workingChallenge.group._id;
|
|
this.workingChallenge.categories = [];
|
|
|
|
if (this.challenge.categories) {
|
|
this.challenge.categories.forEach(category => {
|
|
this.workingChallenge.categories.push(category.slug);
|
|
});
|
|
}
|
|
|
|
if (this.cloning) {
|
|
this.$delete(this.workingChallenge, '_id');
|
|
this.$delete(this.workingChallenge, 'id');
|
|
}
|
|
},
|
|
resetWorkingChallenge () {
|
|
this.workingChallenge = {
|
|
name: '',
|
|
summary: '',
|
|
description: '',
|
|
categories: [],
|
|
group: '',
|
|
dailys: [],
|
|
habits: [],
|
|
leader: '',
|
|
members: [],
|
|
official: false,
|
|
prize: 1,
|
|
rewards: [],
|
|
shortName: '',
|
|
todos: [],
|
|
};
|
|
|
|
this.$store.state.workingChallenge = {};
|
|
},
|
|
async createChallenge () {
|
|
this.loading = true;
|
|
// @TODO: improve error handling, add it to updateChallenge, make errors translatable. Suggestion: `<% fieldName %> is required` where possible, where `fieldName` is inserted as the translatable string that's used for the field header.
|
|
let errors = [];
|
|
|
|
if (!this.workingChallenge.name) errors.push(this.$t('nameRequired'));
|
|
if (this.workingChallenge.shortName.length < MIN_SHORTNAME_SIZE_FOR_CHALLENGES) errors.push(this.$t('tagTooShort'));
|
|
if (!this.workingChallenge.summary) errors.push(this.$t('summaryRequired'));
|
|
if (this.workingChallenge.summary.length > MAX_SUMMARY_SIZE_FOR_CHALLENGES) errors.push(this.$t('summaryTooLong'));
|
|
if (!this.workingChallenge.description) errors.push(this.$t('descriptionRequired'));
|
|
if (!this.workingChallenge.group) errors.push(this.$t('locationRequired'));
|
|
if (!this.workingChallenge.categories || this.workingChallenge.categories.length === 0) errors.push(this.$t('categoiresRequired'));
|
|
|
|
if (errors.length > 0) {
|
|
alert(errors.join('\n'));
|
|
this.loading = false;
|
|
return;
|
|
}
|
|
|
|
this.workingChallenge.timestamp = new Date().getTime();
|
|
let categoryKeys = this.workingChallenge.categories;
|
|
let serverCategories = [];
|
|
categoryKeys.forEach(key => {
|
|
let catName = this.categoriesHashByKey[key];
|
|
serverCategories.push({
|
|
slug: key,
|
|
name: catName,
|
|
});
|
|
});
|
|
|
|
let challengeDetails = clone(this.workingChallenge);
|
|
challengeDetails.categories = serverCategories;
|
|
|
|
let challenge;
|
|
if (this.cloning) {
|
|
challenge = await this.$store.dispatch('challenges:cloneChallenge', {
|
|
challenge: challengeDetails,
|
|
cloningChallengeId: this.cloningChallengeId,
|
|
});
|
|
this.cloningChallengeId = '';
|
|
} else {
|
|
challenge = await this.$store.dispatch('challenges:createChallenge', {challenge: challengeDetails});
|
|
}
|
|
|
|
// Update Group Prize
|
|
let challengeGroup = this.groups.find(group => {
|
|
return group._id === this.workingChallenge.group;
|
|
});
|
|
|
|
// @TODO: Share with server
|
|
const prizeCost = this.workingChallenge.prize / 4;
|
|
const challengeGroupLeader = challengeGroup.leader && challengeGroup.leader._id ? challengeGroup.leader._id : challengeGroup.leader;
|
|
const userIsLeader = challengeGroupLeader === this.user._id;
|
|
if (challengeGroup && userIsLeader && challengeGroup.balance > 0 && challengeGroup.balance >= prizeCost) {
|
|
// Group pays for all of prize
|
|
} else if (challengeGroup && userIsLeader && challengeGroup.balance > 0) {
|
|
// User pays remainder of prize cost after group
|
|
let remainder = prizeCost - challengeGroup.balance;
|
|
this.user.balance -= remainder;
|
|
} else {
|
|
// User pays for all of prize
|
|
this.user.balance -= prizeCost;
|
|
}
|
|
|
|
this.$emit('createChallenge', challenge);
|
|
this.resetWorkingChallenge();
|
|
|
|
this.$root.$emit('bv::hide::modal', 'challenge-modal');
|
|
this.$router.push(`/challenges/${challenge._id}`);
|
|
},
|
|
updateChallenge () {
|
|
let categoryKeys = this.workingChallenge.categories;
|
|
let serverCategories = [];
|
|
categoryKeys.forEach(key => {
|
|
let newKey = key.trim();
|
|
let catName = this.categoriesHashByKey[newKey];
|
|
serverCategories.push({
|
|
slug: newKey,
|
|
name: catName,
|
|
});
|
|
});
|
|
|
|
let challengeDetails = clone(this.workingChallenge);
|
|
challengeDetails.categories = serverCategories;
|
|
|
|
this.$emit('updatedChallenge', {
|
|
challenge: challengeDetails,
|
|
});
|
|
this.$store.dispatch('challenges:updateChallenge', {challenge: challengeDetails});
|
|
this.resetWorkingChallenge();
|
|
this.$root.$emit('bv::hide::modal', 'challenge-modal');
|
|
},
|
|
toggleCategorySelect () {
|
|
this.showCategorySelect = !this.showCategorySelect;
|
|
},
|
|
},
|
|
};
|
|
</script>
|