add summary field to challenges and guilds (#8960)

* create new summary field for challenges * finish implementating summary for challenges, add some support for guilds * make small improvements to challenges code * fix lint errors * add more code to support summaries for guilds (still more needed) * fix existing tests by adding summary field * make existing tests pass * WIP make "Public Challenges" text translatable * change "leader" locale key to "guildOrPartyLeader" to make searches for it easier * remove v-once from h2 headings * remove failed attempt to localise text in <script> * add quick-and-dirty error checking for guild not having categories * make "Public Challenges" text translatable * rename final ...PlaceHolder strings to ...Placeholder (lower-case "h") for consistency with existing Placeholder strings
2025-12-16 14:17:22 +01:00 · 2017-08-23 06:39:45 +10:00
parent bd46e3e195
commit 7d0ab1ba25
14 changed files with 199 additions and 92 deletions
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -56,7 +56,9 @@
      div(v-if='isLeader')
        button.btn.btn-danger(v-once, @click='closeChallenge()') {{$t('endChallenge')}}
    .description-section
-      h2(v-once) {{$t('challengeDescription')}}
+      h2 {{$t('challengeSummary')}}
+      p {{challenge.summary}}
+      h2 {{$t('challengeDescription')}}
      p {{challenge.description}}
 </template>

--- a/website/client/components/challenges/challengeModal.vue
+++ b/website/client/components/challenges/challengeModal.vue
@@ -3,31 +3,30 @@
    .form
      .form-group
        label
-          strong(v-once) {{$t('name')}}*
-        b-form-input(type="text", :placeholder="$t('challengeNamePlaceHolder')", v-model="workingChallenge.name")
+          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')}}*
+          strong(v-once) {{$t('shortName')}} *
        b-form-input(type="text", :placeholder="$t('shortNamePlaceholder')", v-model="workingChallenge.shortName")
      .form-group
        label
-          strong(v-once) {{$t('description')}}*
-        div.description-count.float-right {{charactersRemaining}} {{ $t('charactersRemaining') }}
-        b-form-input.description-textarea(type="text", textarea, :placeholder="$t('challengeDescriptionPlaceHolder')", v-model="workingChallenge.description")
+          strong(v-once) {{$t('challengeSummary')}} *
+        div.summary-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
+        b-form-input.summary-textarea(type="text", textarea, :placeholder="$t('challengeSummaryPlaceholder')", v-model="workingChallenge.summary")
      .form-group
        label
-          strong(v-once) Challenge Information*
+          strong(v-once) {{$t('challengeDescription')}} *
        a.float-right {{ $t('markdownFormattingHelp') }}
-        b-form-input.information-textarea(type="text", textarea,
-          :placeholder="$t('challengeInformationPlaceHolder')", v-model="workingChallenge.description")
+        b-form-input.description-textarea(type="text", textarea, :placeholder="$t('challengeDescriptionPlaceholder')", v-model="workingChallenge.description")
      .form-group(v-if='creating')
        label
-          strong(v-once) {{$t('where')}}
+          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')}}*
+          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])}}
@@ -37,7 +36,7 @@
            :key="group.key",
          )
            label.custom-control.custom-checkbox
-              input.custom-control-input(type="checkbox", :value='group.key' v-model="workingChallenge.categories")
+              input.custom-control-input(type="checkbox", :value="group.key" v-model="workingChallenge.categories")
              span.custom-control-indicator
              span.custom-control-description(v-once) {{ $t(group.label) }}
          button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
@@ -76,11 +75,19 @@
      display: none;
    }

-    .description-textarea {
+    .summary-count {
+      font-size: 12px;
+      line-height: 1.33;
+      margin-top: 1em;
+      color: $gray-200;
+      text-align: right;
+    }
+
+    .summary-textarea {
      height: 90px;
    }

-    .information-textarea {
+    .description-textarea {
      height: 220px;
    }

@@ -123,7 +130,7 @@ import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import bFormInput from 'bootstrap-vue/lib/components/form-input';

-import { TAVERN_ID } from '../../../common/script/constants';
+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 {
@@ -201,7 +208,6 @@ export default {

    return {
      creating: true,
-      charactersRemaining: 250,
      workingChallenge: {},
      showCategorySelect: false,
      categoryOptions,
@@ -228,11 +234,11 @@ export default {
    }

    this.groups.push({
-      name: 'Public',
+      name: this.$t('publicChallengesTitle'),
      _id: TAVERN_ID,
    });

-    this.ressetWorkingChallenge();
+    this.resetWorkingChallenge();
  },
  watch: {
    user () {
@@ -241,6 +247,10 @@ export default {
  },
  computed: {
    ...mapState({user: 'user.data'}),
+    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;
@@ -266,11 +276,11 @@ export default {
    },
  },
  methods: {
-    ressetWorkingChallenge () {
+    resetWorkingChallenge () {
      this.workingChallenge = {
        name: '',
+        summary: '',
        description: '',
-        information: '',
        categories: [],
        group: '',
        dailys: [],
@@ -285,26 +295,36 @@ export default {
      };
    },
    async createChallenge () {
-      if (!this.workingChallenge.name) alert('Name is required');
-      if (!this.workingChallenge.description) alert('Description is required');
+      // @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 += 'Name is required\n';
+      if (this.workingChallenge.shortName.length < MIN_SHORTNAME_SIZE_FOR_CHALLENGES) errors += 'Tag name is too short\n';
+      if (!this.workingChallenge.summary) errors += 'Summary is required\n';
+      if (this.workingChallenge.summary.length > MAX_SUMMARY_SIZE_FOR_CHALLENGES) errors += 'Summary is too long\n';
+      if (!this.workingChallenge.description) errors += 'Description is required\n';
+      if (!this.workingChallenge.group) errors += 'Location of challenge is required ("Add to")\n';
+      if (!this.workingChallenge.categories || this.workingChallenge.categories.length === 0) errors += 'One or more categories must be selected\n';
+      if (errors) {
+        alert(errors);
+      } else {
+        this.workingChallenge.timestamp = new Date().getTime();

-      this.workingChallenge.timestamp = new Date().getTime();
+        let challenge = await this.$store.dispatch('challenges:createChallenge', {challenge: this.workingChallenge});
+        // @TODO: When to remove from guild instead?
+        this.user.balance -= this.workingChallenge.prize / 4;

-      let challenge = await this.$store.dispatch('challenges:createChallenge', {challenge: this.workingChallenge});
-      // @TODO: When to remove from guild instead?
-      this.user.balance -= this.workingChallenge.prize / 4;
-
-      this.$emit('createChallenge', challenge);
-      this.ressetWorkingChallenge();
-      this.$root.$emit('hide::modal', 'challenge-modal');
-      this.$router.push(`/challenges/${challenge._id}`);
+        this.$emit('createChallenge', challenge);
+        this.resetWorkingChallenge();
+        this.$root.$emit('hide::modal', 'challenge-modal');
+        this.$router.push(`/challenges/${challenge._id}`);
+      }
    },
    updateChallenge () {
      this.$emit('updatedChallenge', {
        challenge: this.workingChallenge,
      });
      this.$store.dispatch('challenges:updateChallenge', {challenge: this.workingChallenge});
-      this.ressetWorkingChallenge();
+      this.resetWorkingChallenge();
      this.$root.$emit('hide::modal', 'challenge-modal');
    },
    toggleCategorySelect () {
--- a/website/client/components/groups/group.vue
+++ b/website/client/components/groups/group.vue
@@ -27,7 +27,7 @@
      .col-12
        h3(v-once) {{ $t('chat') }}

-        textarea(:placeholder="!isParty ? $t('chatPlaceHolder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition')
+        textarea(:placeholder="!isParty ? $t('chatPlaceholder') : $t('partyChatPlaceholder')", v-model='newMessage', @keydown='updateCarretPosition')
        autocomplete(:text='newMessage', v-on:select="selectedAutocomplete", :coords='coords', :groupId='groupId')
        button.btn.btn-secondary.send-chat.float-right(v-once, @click='sendMessage()') {{ $t('send') }}
        button.btn.btn-secondary.float-left(v-once, @click='fetchRecentMessages()') {{ $t('fetchRecentMessages') }}
@@ -106,7 +106,19 @@
    .section-header
      .row
        .col-10
-          h3(v-once) {{ $t('description') }}
+          h3(v-once) {{ $t('guildSummary') }}
+        .col-2
+          .toggle-up(@click="sections.summary = !sections.summary", v-if="sections.summary")
+            .svg-icon(v-html="icons.upIcon")
+          .toggle-down(@click="sections.summary = !sections.summary", v-if="!sections.summary")
+            .svg-icon(v-html="icons.downIcon")
+      .section(v-if="sections.summary")
+        p {{ group.summary }}
+
+    .section-header
+      .row
+        .col-10
+          h3 {{ $t('groupDescription') }}
        .col-2
          .toggle-up(@click="sections.description = !sections.description", v-if="sections.description")
            .svg-icon(v-html="icons.upIcon")
@@ -115,18 +127,6 @@
      .section(v-if="sections.description")
        p {{ group.description }}

-    .section-header
-      .row
-        .col-10
-          h3 {{ $t('guildInformation') }}
-        .col-2
-          .toggle-up(@click="sections.information = !sections.information", v-if="sections.information")
-            .svg-icon(v-html="icons.upIcon")
-          .toggle-down(@click="sections.information = !sections.information", v-if="!sections.information")
-            .svg-icon(v-html="icons.downIcon")
-      .section(v-if="sections.information")
-        p {{ group.information }}
-
    .section-header.challenge
      .row
        .col-10.information-header
@@ -442,8 +442,8 @@ export default {
      selectedQuest: {},
      sections: {
        quest: true,
+        summary: true,
        description: true,
-        information: true,
        challenges: true,
      },
      newMessage: '',
--- a/website/client/components/groups/groupFormModal.vue
+++ b/website/client/components/groups/groupFormModal.vue
@@ -4,17 +4,16 @@
      .form-group
        label
          strong(v-once) {{$t('name')}} *
-        b-form-input(type="text", :placeholder="$t('newGuildPlaceHolder')", v-model="workingGuild.name")
-
+        b-form-input(type="text", :placeholder="$t('newGuildPlaceholder')", v-model="workingGuild.name")
      .form-group(v-if='workingGuild.id && members.length > 0')
        label
-          strong(v-once) {{$t('leader')}} *
+          strong(v-once) {{$t('guildOrPartyLeader')}} *
        select.form-control(v-model="workingGuild.newLeader")
          option(v-for='member in members', :value="member._id") {{ member.profile.name }}

      .form-group
        label
-          strong(v-once) {{$t('privacySettings')}}*
+          strong(v-once) {{$t('privacySettings')}} *
        br
        label.custom-control.custom-checkbox
          input.custom-control-input(type="checkbox", v-model="workingGuild.onlyLeaderCreatesChallenges")
@@ -43,16 +42,18 @@
          span.custom-control-indicator
          span.custom-control-description(v-once) {{ $t('allowGuildInvationsFromNonMembers') }}

-      .form-group
-        label
-          strong(v-once) {{$t('description')}} *
-        div.description-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
-        textarea.form-control(:placeholder="isParty ? $t('partyDescriptionPlaceHolder') : $t('guildDescriptionPlaceHolder')", v-model="workingGuild.description")
-
      .form-group(v-if='!creatingParty')
        label
-          strong(v-once) {{$t('guildInformation')}} *
-        textarea.form-control(:placeholder="isParty ? $t('partyInformationPlaceHolder'): $t('guildInformationPlaceHolder')", v-model="workingGuild.guildInformation")
+          strong(v-once) {{$t('guildSummary')}} *
+        div.summary-count {{charactersRemaining}} {{ $t('charactersRemaining') }}
+        textarea.form-control.summary-textarea(:placeholder="$t('guildSummaryPlaceholder')", v-model="workingGuild.summary")
+        // @TODO: need summary only for PUBLIC GUILDS, not for tavern, private guilds, or party
+
+      .form-group
+        label
+          strong(v-once) {{$t('groupDescription')}} *
+        a.float-right {{ $t('markdownFormattingHelp') }}
+        b-form-input.description-textarea(type="text", textarea, :placeholder="creatingParty ? $t('partyDescriptionPlaceholder') : $t('guildDescriptionPlaceholder')", v-model="workingGuild.description")

      .form-group(v-if='creatingParty && !workingGuild.id')
        span
@@ -60,7 +61,7 @@

      .form-group(style='position: relative;', v-if='!creatingParty && !isParty')
        label
-          strong(v-once) {{$t('categories')}}*
+          strong(v-once) {{$t('categories')}} *
        div.category-wrap(@click.prevent="toggleCategorySelect")
          span.category-select(v-if='workingGuild.categories.length === 0') {{$t('none')}}
          .category-label(v-for='category in workingGuild.categories') {{$t(categoriesHashByKey[category])}}
@@ -74,11 +75,12 @@
              span.custom-control-indicator
              span.custom-control-description(v-once) {{ $t(group.label) }}
          button.btn.btn-primary(@click.prevent="toggleCategorySelect") {{$t('close')}}
+        // @TODO: need categories only for PUBLIC GUILDS, not for tavern, private guilds, or party

      .form-group(v-if='inviteMembers && !workingGuild.id')
        label
          strong(v-once) Invite via Email or User ID
-          p Invite users via a valid email or 36-digit User ID. If an email isn’t registered yet, we’ll invite them to join.
+          p(v-once) {{$t('inviteMembersHowTo')}} *

        div
          div(v-for='(member, index) in membersToInvite')
@@ -108,19 +110,27 @@
    height: 150px;
  }

-  .description-count, .gem-description {
+  .summary-count, .gem-description {
    font-size: 12px;
    line-height: 1.33;
-    text-align: center;
+    margin-top: 1em;
    color: $gray-200;
  }

-  .description-count {
+  .summary-count {
    text-align: right;
  }

  .gem-description {
-    margin-top: 1em;
+    text-align: center;
+  }
+
+  .summary-textarea {
+    height: 90px;
+  }
+
+  .description-textarea {
+    height: 220px;
  }

  .item-with-icon {
@@ -139,10 +149,6 @@
    }
  }

-  .description-count {
-    margin-top: 1em;
-  }
-
  .icon {
    margin-left: .5em;
    display: inline-block;
@@ -161,6 +167,8 @@ import toggleSwitch from 'client/components/ui/toggleSwitch';
 import gemIcon from 'assets/svg/gem.svg';
 import informationIcon from 'assets/svg/information.svg';

+import { MAX_SUMMARY_SIZE_FOR_GUILDS } from '../../../common/script/constants';
+
 // @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
@@ -184,8 +192,8 @@ export default {
        name: '',
        type: 'guild',
        privacy: 'private',
+        summary: '',
        description: '',
-        guildInformation: '',
        categories: [],
        onlyLeaderCreatesChallenges: true,
        guildLeaderCantBeMessaged: true,
@@ -282,9 +290,8 @@ export default {
      this.workingGuild.name = editingGroup.name;
      this.workingGuild.type = editingGroup.type;
      this.workingGuild.privacy = editingGroup.privacy;
-      if (editingGroup.description) this.workingGuild.description = editingGroup.description;
-      if (editingGroup.information) this.workingGuild.information = editingGroup.information;
      if (editingGroup.summary) this.workingGuild.summary = editingGroup.summary;
+      if (editingGroup.description) this.workingGuild.description = editingGroup.description;
      if (editingGroup._id) this.workingGuild.id = editingGroup._id;
      if (editingGroup.leader._id) this.workingGuild.newLeader = editingGroup.leader._id;
      if (editingGroup._id) this.getMembers();
@@ -292,7 +299,8 @@ export default {
  },
  computed: {
    charactersRemaining () {
-      return 500 - this.workingGuild.description.length;
+      let currentLength = this.workingGuild.summary ? this.workingGuild.summary.length : 0;
+      return MAX_SUMMARY_SIZE_FOR_GUILDS - currentLength;
    },
    title () {
      if (this.creatingParty) return this.$t('createParty');
@@ -339,14 +347,26 @@ export default {
      }

      if (!this.workingGuild.name || !this.workingGuild.description) {
-        // @TODO: Add proper notifications
+        // @TODO: Add proper notifications - split this out into two, make errors translatable. Suggestion: `<% fieldName %> is required` for all errors where possible, where `fieldName` is inserted as the translatable string that's used for the field header.
        alert('Enter a name and description');
        return;
      }

-      if (this.workingGuild.description.length > 500) {
+      if (!this.workingGuild.summary) {
+        // @TODO: Add proper notifications. Summary is mandatory for only public guilds (not tavern, private guilds, parties)
+        alert('Enter a summary');
+        return;
+      }
+
+      if (this.workingGuild.summary.length > MAX_SUMMARY_SIZE_FOR_GUILDS) {
+        // @TODO: Add proper notifications. Summary is mandatory for only public guilds (not tavern, private guilds, parties)
+        alert('Summary is too long');
+        return;
+      }
+
+      if (!this.workingGuild.categories || this.workingGuild.categories.length === 0) {
        // @TODO: Add proper notifications
-        alert('Description is too long');
+        alert('One or more categories must be selected');
        return;
      }