mirror of
https://github.com/sudoxnym/habitica.git
synced 2026-04-14 11:46:23 +00:00
613 lines
18 KiB
Vue
613 lines
18 KiB
Vue
<template>
|
|
<b-modal
|
|
id="guild-form"
|
|
:title="title"
|
|
:hide-footer="true"
|
|
size="lg"
|
|
>
|
|
<form @submit.stop.prevent="submit">
|
|
<div class="form-group">
|
|
<label>
|
|
<strong v-once>{{ $t('name') }} *</strong>
|
|
</label>
|
|
<b-form-input
|
|
v-model="workingGroup.name"
|
|
type="text"
|
|
:placeholder="isParty ? $t('newPartyPlaceholder') : $t('newGuildPlaceholder')"
|
|
/>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<strong v-once>{{ $t('privacySettings') }}</strong>
|
|
</label>
|
|
<br>
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="onlyLeaderCreatesChallenges"
|
|
v-model="workingGroup.onlyLeaderCreatesChallenges"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="onlyLeaderCreatesChallenges"
|
|
>{{ $t('onlyLeaderCreatesChallenges') }}</label>
|
|
<div
|
|
id="groupPrivateDescription1"
|
|
class="icon"
|
|
:title="$t('privateDescription')"
|
|
>
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.information"
|
|
></div>
|
|
</div>
|
|
<b-tooltip
|
|
:title="$t('onlyLeaderCreatesChallengesDetail')"
|
|
target="groupPrivateDescription1"
|
|
/>
|
|
</div>
|
|
<!-- br-->
|
|
<!-- @TODO Implement in V2 .custom-control.custom-checkboxinput.custom
|
|
-control-input(type="checkbox", v-model="workingGroup.guildLeaderCantBeMessaged")
|
|
label.custom-control-label(v-once) {{ $t('guildLeaderCantBeMessaged') }}
|
|
// "guildLeaderCantBeMessaged": "Leader can not be messaged directly",
|
|
// @TODO discuss the impact of this with moderators before implementing
|
|
-->
|
|
<br>
|
|
<div
|
|
v-if="!isParty && !workingGroup.id"
|
|
class="custom-control custom-checkbox"
|
|
>
|
|
<input
|
|
id="privateGuild"
|
|
v-model="workingGroup.privateGuild"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="privateGuild"
|
|
>{{ $t('privateGuild') }}</label>
|
|
<div
|
|
id="groupPrivateDescription2"
|
|
class="icon"
|
|
:title="$t('privateDescription')"
|
|
>
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.information"
|
|
></div>
|
|
</div>
|
|
<b-tooltip
|
|
:title="$t('privateDescription')"
|
|
target="groupPrivateDescription2"
|
|
/>
|
|
</div>
|
|
<!-- br-->
|
|
<!-- @TODO: Implement in v2 .custom-control.custom-checkbox(v-if='!creatingParty')
|
|
input.custom-control-input(type="checkbox", v-model="workingGroup.allowG
|
|
uildInvitationsFromNonMembers")
|
|
label.custom-control-label(v-once) {{ $t('allowGuildInvitationsFromNonMembers') }}
|
|
// "allowGuildInvitationsFromNonMembers": "Allow Guild invitations from non-members",
|
|
-->
|
|
</div>
|
|
<div
|
|
v-if="isAdmin && workingGroup.id"
|
|
class="form-group"
|
|
>
|
|
<label>
|
|
<strong v-once>{{ $t('languageSettings') }}</strong>
|
|
</label>
|
|
<br>
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
id="bannedWordsAllowed"
|
|
v-model="workingGroup.bannedWordsAllowed"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
for="bannedWordsAllowed"
|
|
>{{ $t('bannedWordsAllowed') }}</label>
|
|
<div
|
|
v-once
|
|
id="groupBannedWordsAllowedDescription"
|
|
class="icon"
|
|
:title="$t('bannedWordsAllowedDetail')"
|
|
>
|
|
<div
|
|
v-once
|
|
class="svg-icon"
|
|
v-html="icons.information"
|
|
></div>
|
|
</div>
|
|
<b-tooltip
|
|
v-once
|
|
:title="$t('bannedWordsAllowedDetail')"
|
|
target="groupBannedWordsAllowedDescription"
|
|
/>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
<div
|
|
v-if="!isParty"
|
|
class="form-group"
|
|
>
|
|
<label>
|
|
<strong v-once>{{ $t('guildSummary') }} *</strong>
|
|
</label>
|
|
<div
|
|
class="summary-count"
|
|
>
|
|
{{ $t('charactersRemaining', {characters: charactersRemaining}) }}
|
|
</div>
|
|
<textarea
|
|
v-model="workingGroup.summary"
|
|
class="form-control summary-textarea"
|
|
:placeholder="isParty ? $t('partyDescriptionPlaceholder') : $t('guildSummaryPlaceholder')"
|
|
></textarea>
|
|
<!-- @TODO: need summary only for PUBLIC GUILDS, not for tavern, private guilds, or party-->
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<strong v-if="isParty">{{ $t('groupDescription') }}</strong>
|
|
<strong v-else>{{ $t('groupDescription') }} *</strong>
|
|
</label>
|
|
<a
|
|
v-markdown="$t('markdownFormattingHelp')"
|
|
class="float-right"
|
|
></a>
|
|
<textarea
|
|
v-model="workingGroup.description"
|
|
class="form-control description-textarea"
|
|
type="text"
|
|
textarea="textarea"
|
|
:placeholder="isParty
|
|
? $t('partyDescriptionPlaceholder') : $t('guildDescriptionPlaceholder')"
|
|
></textarea>
|
|
</div>
|
|
<div
|
|
v-if="creatingParty && !workingGroup.id"
|
|
class="form-group"
|
|
>
|
|
<span>
|
|
<toggleSwitch
|
|
v-model="inviteMembers"
|
|
:label="$t('inviteMembersNow')"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div
|
|
v-if="!creatingParty && !isParty"
|
|
class="form-group"
|
|
style="position: relative;"
|
|
>
|
|
<label>
|
|
<strong v-once>{{ $t('categories') }} *</strong>
|
|
</label>
|
|
<div
|
|
class="category-wrap"
|
|
@click.prevent="toggleCategorySelect"
|
|
>
|
|
<span
|
|
v-if="workingGroup.categories.length === 0"
|
|
class="category-select"
|
|
>{{ $t('none') }}</span>
|
|
<div
|
|
v-for="category in workingGroup.categories"
|
|
:key="category"
|
|
class="category-label"
|
|
>
|
|
{{ $t(categoriesHashByKey[category]) }}
|
|
</div>
|
|
</div>
|
|
<div
|
|
v-if="showCategorySelect"
|
|
class="category-box"
|
|
>
|
|
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
|
|
<div
|
|
v-for="group in categoryOptions"
|
|
v-if="group.key !== 'habitica_official' || hasPermission(user, 'challengeAdmin')"
|
|
:key="group.key"
|
|
class="form-check"
|
|
>
|
|
<!-- eslint-enable vue/no-use-v-if-with-v-for -->
|
|
<div class="custom-control custom-checkbox">
|
|
<input
|
|
:id="`category-${group.key}`"
|
|
v-model="workingGroup.categories"
|
|
class="custom-control-input"
|
|
type="checkbox"
|
|
:value="group.key"
|
|
>
|
|
<label
|
|
v-once
|
|
class="custom-control-label"
|
|
:for="`category-${group.key}`"
|
|
>{{ $t(group.label) }}</label>
|
|
</div>
|
|
</div>
|
|
<button
|
|
class="btn btn-primary"
|
|
@click.prevent="toggleCategorySelect"
|
|
>
|
|
{{ $t('close') }}
|
|
</button>
|
|
</div>
|
|
<!-- @TODO: need categories only for PUBLIC GUILDS,
|
|
not for tavern, private guilds, or party-->
|
|
</div>
|
|
<div
|
|
v-if="inviteMembers && !workingGroup.id"
|
|
class="form-group"
|
|
>
|
|
<label>
|
|
<strong v-once>Invite via Email or User ID</strong>
|
|
<p v-once>{{ $t('inviteMembersHowTo') }} *</p>
|
|
</label>
|
|
<div>
|
|
<!-- eslint-disable-next-line vue/require-v-for-key -->
|
|
<div v-for="(member, index) in membersToInvite">
|
|
<input
|
|
v-model="member.value"
|
|
type="text"
|
|
>
|
|
<button @click.prevent="removeMemberToInvite(index)">
|
|
Remove
|
|
</button>
|
|
</div>
|
|
<div>
|
|
<input
|
|
v-model="newMemberToInvite.value"
|
|
type="text"
|
|
placeholder="Email address or User ID"
|
|
>
|
|
<button @click.prevent="addMemberToInvite()">
|
|
Add
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-group text-center">
|
|
<div
|
|
v-if="!workingGroup.id"
|
|
class="item-with-icon"
|
|
>
|
|
<div
|
|
class="svg-icon"
|
|
v-html="icons.gem"
|
|
></div>
|
|
<span class="count">4</span>
|
|
</div>
|
|
<button
|
|
v-if="!workingGroup.id"
|
|
class="btn btn-primary btn-md"
|
|
:disabled="!workingGroup.name || !workingGroup.description"
|
|
>
|
|
{{ creatingParty ? $t('createParty') : $t('createGuild') }}
|
|
</button>
|
|
<button
|
|
v-if="workingGroup.id"
|
|
class="btn btn-primary btn-md"
|
|
:disabled="!workingGroup.name || (!isParty && !workingGroup.description)"
|
|
>
|
|
{{ isParty ? $t('updateParty') : $t('updateGuild') }}
|
|
</button>
|
|
<div
|
|
v-if="!workingGroup.id"
|
|
v-once
|
|
class="gem-description"
|
|
>
|
|
{{ $t('guildGemCostInfo') }}
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</b-modal>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '@/assets/scss/colors.scss';
|
|
|
|
.custom-control-input {
|
|
z-index: 1 !important;
|
|
}
|
|
|
|
.svg-icon {
|
|
width: 16px;
|
|
}
|
|
|
|
textarea {
|
|
height: 150px;
|
|
}
|
|
|
|
.summary-count, .gem-description {
|
|
font-size: 12px;
|
|
line-height: 1.33;
|
|
margin-top: 1em;
|
|
color: $gray-200;
|
|
}
|
|
|
|
.summary-count {
|
|
text-align: right;
|
|
}
|
|
|
|
.gem-description {
|
|
text-align: center;
|
|
}
|
|
|
|
.summary-textarea {
|
|
height: 90px;
|
|
}
|
|
|
|
.description-textarea {
|
|
height: 220px;
|
|
}
|
|
|
|
.item-with-icon {
|
|
display: inline-block;
|
|
|
|
img {
|
|
height: 20px;
|
|
margin-right: .5em;
|
|
}
|
|
|
|
.count {
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
margin-right: 1em;
|
|
color: $green-10;
|
|
}
|
|
}
|
|
|
|
.icon {
|
|
margin-left: .5em;
|
|
display: inline-block;
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '@/../../common/script/constants';
|
|
import CategoryOptions from '@/../../common/script/content/categoryOptions';
|
|
import toggleSwitch from '@/components/ui/toggleSwitch';
|
|
import markdownDirective from '@/directives/markdown';
|
|
import gemIcon from '@/assets/svg/gem.svg?raw';
|
|
import informationIcon from '@/assets/svg/information.svg?raw';
|
|
|
|
import { userStateMixin } from '../../mixins/userState';
|
|
|
|
// @TODO: Not sure the best way to pass party creating status
|
|
// Since we need the modal in the header, passing props doesn't work
|
|
// because we can't import the create group in the index of groups
|
|
// I think state is the correct spot, but maybe we should separate into
|
|
// two modals?
|
|
|
|
export default {
|
|
components: {
|
|
toggleSwitch,
|
|
},
|
|
directives: {
|
|
markdown: markdownDirective,
|
|
},
|
|
mixins: [userStateMixin],
|
|
data () {
|
|
const data = {
|
|
workingGroup: {
|
|
id: '',
|
|
name: '',
|
|
type: 'guild',
|
|
privacy: 'private',
|
|
summary: '',
|
|
description: '',
|
|
categories: [],
|
|
onlyLeaderCreatesChallenges: true,
|
|
guildLeaderCantBeMessaged: true,
|
|
privateGuild: true,
|
|
allowGuildInvitationsFromNonMembers: true,
|
|
bannedWordsAllowed: null,
|
|
},
|
|
categoryOptions: CategoryOptions,
|
|
showCategorySelect: false,
|
|
members: [],
|
|
inviteMembers: false,
|
|
newMemberToInvite: {
|
|
value: '',
|
|
type: '',
|
|
},
|
|
membersToInvite: [],
|
|
};
|
|
|
|
const hashedCategories = {};
|
|
data.categoryOptions.forEach(category => {
|
|
hashedCategories[category.key] = category.label;
|
|
});
|
|
data.categoriesHashByKey = hashedCategories;
|
|
|
|
data.icons = Object.freeze({
|
|
gem: gemIcon,
|
|
information: informationIcon,
|
|
});
|
|
|
|
return data;
|
|
},
|
|
computed: {
|
|
editingGroup () {
|
|
return this.$store.state.editingGroup;
|
|
},
|
|
charactersRemaining () {
|
|
const currentLength = this.workingGroup.summary ? this.workingGroup.summary.length : 0;
|
|
return MAX_SUMMARY_SIZE_FOR_GUILDS - currentLength;
|
|
},
|
|
title () {
|
|
if (this.creatingParty) return this.$t('createParty');
|
|
if (!this.workingGroup._id && !this.workingGroup.id) return this.$t('createGuild');
|
|
if (this.isParty) return this.$t('updateParty');
|
|
return this.$t('updateGuild');
|
|
},
|
|
creatingParty () {
|
|
return this.$store.state.groupFormOptions.createParty;
|
|
},
|
|
isParty () {
|
|
return this.workingGroup.type === 'party';
|
|
},
|
|
isAdmin () {
|
|
return Boolean(this.hasPermission(this.user, 'moderator'));
|
|
},
|
|
},
|
|
watch: {
|
|
editingGroup () {
|
|
const { editingGroup } = this;
|
|
|
|
if (!editingGroup._id) {
|
|
this.resetWorkingGroup();
|
|
return;
|
|
}
|
|
|
|
this.workingGroup.name = editingGroup.name;
|
|
this.workingGroup.type = editingGroup.type;
|
|
|
|
this.workingGroup.privateGuild = true;
|
|
if (editingGroup.privacy === 'public') {
|
|
this.workingGroup.privateGuild = false;
|
|
}
|
|
|
|
this.workingGroup.categories = [];
|
|
if (editingGroup.categories) {
|
|
editingGroup.categories.forEach(category => {
|
|
this.workingGroup.categories.push(category.slug);
|
|
});
|
|
}
|
|
|
|
if (editingGroup.summary) this.workingGroup.summary = editingGroup.summary;
|
|
if (editingGroup.description) this.workingGroup.description = editingGroup.description;
|
|
if (editingGroup._id) this.workingGroup.id = editingGroup._id;
|
|
|
|
this.workingGroup.onlyLeaderCreatesChallenges = editingGroup.leaderOnly.challenges;
|
|
|
|
this.workingGroup.leader = editingGroup.leader;
|
|
|
|
this.workingGroup.bannedWordsAllowed = editingGroup.bannedWordsAllowed;
|
|
|
|
if (editingGroup._id) this.getMembers();
|
|
},
|
|
},
|
|
methods: {
|
|
async getMembers () {
|
|
if (!this.workingGroup.id) return;
|
|
const members = await this.$store.dispatch('members:getGroupMembers', {
|
|
groupId: this.workingGroup.id,
|
|
includeAllPublicFields: true,
|
|
});
|
|
this.members = members;
|
|
},
|
|
addMemberToInvite () {
|
|
// @TODO: determine type
|
|
this.membersToInvite.push(this.newMemberToInvite);
|
|
this.newMemberToInvite = {
|
|
value: '',
|
|
type: '',
|
|
};
|
|
},
|
|
removeMemberToInvite (index) {
|
|
this.membersToInvite.splice(index, 1);
|
|
},
|
|
toggleCategorySelect () {
|
|
this.showCategorySelect = !this.showCategorySelect;
|
|
},
|
|
async submit () {
|
|
if (this.$store.state.user.data.balance < 1 && !this.workingGroup.id) {
|
|
// @TODO: Add proper notifications
|
|
window.alert(this.$t('notEnoughGems')); // eslint-disable-line no-alert
|
|
return;
|
|
// @TODO return $rootScope.openModal('buyGems', {track:"Gems > Gems > Create Group"});
|
|
}
|
|
|
|
const errors = [];
|
|
|
|
if (!this.workingGroup.name) errors.push(this.$t('nameRequired'));
|
|
if (!this.workingGroup.summary) errors.push(this.$t('summaryRequired'));
|
|
if (this.workingGroup.summary.length > MAX_SUMMARY_SIZE_FOR_GUILDS) errors.push(this.$t('summaryTooLong'));
|
|
if (!this.isParty && !this.workingGroup.description) errors.push(this.$t('descriptionRequired'));
|
|
if (!this.isParty && (!this.workingGroup.categories || this.workingGroup.categories.length === 0)) errors.push(this.$t('categoiresRequired'));
|
|
|
|
if (errors.length > 0) {
|
|
window.alert(errors.join('\n')); // eslint-disable-line no-alert
|
|
return;
|
|
}
|
|
|
|
// @TODO: Add proper notifications
|
|
if (!this.workingGroup.id && !window.confirm(this.$t('confirmGuild'))) return; // eslint-disable-line no-alert
|
|
|
|
if (!this.workingGroup.privateGuild) {
|
|
this.workingGroup.privacy = 'public';
|
|
}
|
|
|
|
this.workingGroup.leaderOnly = {
|
|
challenges: this.workingGroup.onlyLeaderCreatesChallenges,
|
|
};
|
|
|
|
const categoryKeys = this.workingGroup.categories;
|
|
const categories = [];
|
|
categoryKeys.forEach(key => {
|
|
const catName = this.categoriesHashByKey[key];
|
|
categories.push({
|
|
slug: key,
|
|
name: catName,
|
|
});
|
|
});
|
|
|
|
const groupData = { ...this.workingGroup, categories };
|
|
|
|
let newgroup;
|
|
if (groupData.id) {
|
|
await this.$store.dispatch('guilds:update', { group: groupData });
|
|
this.$root.$emit('updatedGroup', groupData);
|
|
// @TODO: this doesn't work because of the async resource
|
|
// if (updatedGroup.type === 'party') this.$store.state.party = {data: updatedGroup};
|
|
} else {
|
|
newgroup = await this.$store.dispatch('guilds:create', { group: groupData });
|
|
this.$store.state.user.data.balance -= 1;
|
|
}
|
|
|
|
this.$store.state.editingGroup = {};
|
|
|
|
this.workingGroup = {
|
|
name: '',
|
|
type: 'guild',
|
|
privacy: 'private',
|
|
description: '',
|
|
categories: [],
|
|
onlyLeaderCreatesChallenges: true,
|
|
guildLeaderCantBeMessaged: true,
|
|
privateGuild: true,
|
|
allowGuildInvitationsFromNonMembers: true,
|
|
};
|
|
|
|
if (newgroup && newgroup._id) {
|
|
this.$router.push(`/groups/guild/${newgroup._id}`);
|
|
}
|
|
this.$root.$emit('bv::hide::modal', 'guild-form');
|
|
},
|
|
resetWorkingGroup () {
|
|
this.workingGroup = {
|
|
id: '',
|
|
name: '',
|
|
type: 'guild',
|
|
privacy: 'private',
|
|
summary: '',
|
|
description: '',
|
|
categories: [],
|
|
onlyLeaderCreatesChallenges: true,
|
|
guildLeaderCantBeMessaged: true,
|
|
privateGuild: true,
|
|
allowGuildInvitationsFromNonMembers: true,
|
|
};
|
|
},
|
|
},
|
|
};
|
|
</script>
|