From 9c2f5213cb3fd02cc334f813d42911445789d3eb Mon Sep 17 00:00:00 2001
From: Keith Holliday <krh121791@yahoo.com>
Date: Fri, 17 Nov 2017 17:13:07 -0600
Subject: [PATCH] Challenge fixes (#9528)

* Added challenge member search to progress dropdown

* Added leave challenge modal

* Allowed editing for challenge leader only

* Pevented users from editing challenge task info

* Set default progress default to daily

* Removed reward filters from user challenge progress
---
 .../components/challenges/challengeDetail.vue | 24 ++++----
 .../challenges/closeChallengeModal.vue        | 17 +-----
 .../challenges/leaveChallengeModal.vue        | 45 ++++++++++++++
 .../components/groups/groupFormModal.vue      | 15 ++---
 website/client/components/tasks/column.vue    | 18 ++++--
 website/client/components/tasks/taskModal.vue | 60 ++++++++++++++-----
 .../client/mixins/challengeMemberSearch.js    | 21 +++++++
 website/common/locales/en/challenge.json      |  3 +-
 8 files changed, 147 insertions(+), 56 deletions(-)
 create mode 100644 website/client/components/challenges/leaveChallengeModal.vue
 create mode 100644 website/client/mixins/challengeMemberSearch.js

diff --git a/website/client/components/challenges/challengeDetail.vue b/website/client/components/challenges/challengeDetail.vue
index ea01f8ffa7..392f0c3f16 100644
--- a/website/client/components/challenges/challengeDetail.vue
+++ b/website/client/components/challenges/challengeDetail.vue
@@ -1,6 +1,7 @@
 <template lang="pug">
 .row
   challenge-modal(:cloning='cloning' v-on:updatedChallenge='updatedChallenge')
+  leave-challenge-modal(:challengeId='challenge._id')
   close-challenge-modal(:members='members', :challengeId='challenge._id')
   challenge-member-progress-modal(:memberId='progressMemberId', :challengeId='challenge._id')
 
@@ -33,7 +34,8 @@
         span.view-progress
           strong {{ $t('viewProgressOf') }}
         b-dropdown.create-dropdown(text="Select a Participant")
-          b-dropdown-item(v-for="member in members", :key="member._id", @click="openMemberProgressModal(member._id)")
+          input.form-control(type='text', v-model='searchTerm')
+          b-dropdown-item(v-for="member in memberResults", :key="member._id", @click="openMemberProgressModal(member._id)")
             | {{ member.profile.name }}
         span(v-if='isLeader || isAdmin')
           b-dropdown.create-dropdown(:text="$t('addTaskToChallenge')", :variant="'success'")
@@ -189,6 +191,8 @@ import TaskModal from '../tasks/taskModal';
 import markdownDirective from 'client/directives/markdown';
 import challengeModal from './challengeModal';
 import challengeMemberProgressModal from './challengeMemberProgressModal';
+import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
+import leaveChallengeModal from './leaveChallengeModal';
 
 import taskDefaults from 'common/script/libs/taskDefaults';
 
@@ -198,11 +202,13 @@ import calendarIcon from 'assets/svg/calendar.svg';
 
 export default {
   props: ['challengeId'],
+  mixins: [challengeMemberSearchMixin],
   directives: {
     markdown: markdownDirective,
   },
   components: {
     closeChallengeModal,
+    leaveChallengeModal,
     challengeModal,
     challengeMemberProgressModal,
     TaskColumn: Column,
@@ -231,6 +237,8 @@ export default {
       workingTask: {},
       taskFormPurpose: 'create',
       progressMemberId: '',
+      searchTerm: '',
+      memberResults: [],
     };
   },
   computed: {
@@ -365,19 +373,7 @@ export default {
       await this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true});
     },
     async leaveChallenge () {
-      let keepChallenge = confirm('Do you want to keep challenge tasks?');
-      let keep = 'keep-all';
-      if (!keepChallenge) keep = 'remove-all';
-
-      let index = findIndex(this.user.challenges, (challengeId) => {
-        return challengeId === this.searchId;
-      });
-      this.user.challenges.splice(index, 1);
-      await this.$store.dispatch('challenges:leaveChallenge', {
-        challengeId: this.searchId,
-        keep,
-      });
-      await this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true});
+      this.$root.$emit('bv::show::modal', 'leave-challenge-modal');
     },
     closeChallenge () {
       this.$root.$emit('bv::show::modal', 'close-challenge-modal');
diff --git a/website/client/components/challenges/closeChallengeModal.vue b/website/client/components/challenges/closeChallengeModal.vue
index 6d1a46a046..ea2d93e756 100644
--- a/website/client/components/challenges/closeChallengeModal.vue
+++ b/website/client/components/challenges/closeChallengeModal.vue
@@ -74,10 +74,11 @@ div
 </style>
 
 <script>
-import debounce from 'lodash/debounce';
+import challengeMemberSearchMixin from 'client/mixins/challengeMemberSearch';
 
 export default {
   props: ['challengeId', 'members'],
+  mixins: [challengeMemberSearchMixin],
   data () {
     return {
       winner: {},
@@ -85,14 +86,6 @@ export default {
       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');
@@ -100,12 +93,6 @@ export default {
     },
   },
   methods: {
-    async searchChallengeMember (search) {
-      this.memberResults = await this.$store.dispatch('members:getChallengeMembers', {
-        challengeId: this.challengeId,
-        searchTerm: search,
-      });
-    },
     selectMember (member) {
       this.winner = member;
     },
diff --git a/website/client/components/challenges/leaveChallengeModal.vue b/website/client/components/challenges/leaveChallengeModal.vue
new file mode 100644
index 0000000000..0f889cf6d0
--- /dev/null
+++ b/website/client/components/challenges/leaveChallengeModal.vue
@@ -0,0 +1,45 @@
+<template lang="pug">
+  b-modal#leave-challenge-modal(:title="$t('leaveChallenge')", size='sm', :hide-footer="true")
+    .modal-body
+      h2 {{ $t('confirmKeepChallengeTasks') }}
+      div
+        button.btn.btn-primary(@click='leaveChallenge("keep")') {{ $t('keepIt') }}
+        button.btn.btn-danger(@click='leaveChallenge("remove-all")') {{ $t('removeIt') }}
+</template>
+
+<style scoped>
+  .modal-body {
+    padding-bottom: 2em;
+  }
+</style>
+
+<script>
+import findIndex from 'lodash/findIndex';
+import { mapState } from 'client/libs/store';
+import notifications from 'client/mixins/notifications';
+
+export default {
+  props: ['challengeId'],
+  mixins: [notifications],
+  computed: {
+    ...mapState({user: 'user.data'}),
+  },
+  methods: {
+    async leaveChallenge (keep) {
+      let index = findIndex(this.user.challenges, (id) => {
+        return id === this.challengeId;
+      });
+      this.user.challenges.splice(index, 1);
+      await this.$store.dispatch('challenges:leaveChallenge', {
+        challengeId: this.challengeId,
+        keep,
+      });
+      await this.$store.dispatch('tasks:fetchUserTasks', {forceLoad: true});
+      this.close();
+    },
+    close () {
+      this.$root.$emit('bv::hide::modal', 'leave-challenge-modal');
+    },
+  },
+};
+</script>
diff --git a/website/client/components/groups/groupFormModal.vue b/website/client/components/groups/groupFormModal.vue
index 54e9c103cb..1d0111eacd 100644
--- a/website/client/components/groups/groupFormModal.vue
+++ b/website/client/components/groups/groupFormModal.vue
@@ -11,7 +11,7 @@
         select.form-control(v-model="workingGroup.newLeader")
           option(v-for='potentialLeader in potentialLeaders', :value="potentialLeader._id") {{ potentialLeader.name }}
 
-      .form-group(v-if='!this.workingGroup.id')
+      .form-group
         label
           strong(v-once) {{$t('privacySettings')}} *
         br
@@ -35,7 +35,7 @@
           // @TODO discuss the impact of this with moderators before implementing
 
         br
-        label.custom-control.custom-checkbox(v-if='!isParty')
+        label.custom-control.custom-checkbox(v-if='!isParty && !this.workingGroup.id')
           input.custom-control-input(type="checkbox", v-model="workingGroup.privateGuild")
           span.custom-control-indicator
           span.custom-control-description(v-once) {{ $t('privateGuild') }}
@@ -345,6 +345,9 @@ export default {
       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;
+
       if (editingGroup.leader._id) {
         this.workingGroup.newLeader = editingGroup.leader._id;
         this.workingGroup.currentLeaderId = editingGroup.leader._id;
@@ -410,11 +413,9 @@ export default {
         this.workingGroup.privacy = 'public';
       }
 
-      if (!this.workingGroup.onlyLeaderCreatesChallenges) {
-        this.workingGroup.leaderOnly = {
-          challenges: true,
-        };
-      }
+      this.workingGroup.leaderOnly = {
+        challenges: this.workingGroup.onlyLeaderCreatesChallenges,
+      };
 
       let categoryKeys = this.workingGroup.categories;
       let serverCategories = [];
diff --git a/website/client/components/tasks/column.vue b/website/client/components/tasks/column.vue
index f56054a6b7..61e67aee90 100644
--- a/website/client/components/tasks/column.vue
+++ b/website/client/components/tasks/column.vue
@@ -64,7 +64,6 @@
               @click.prevent.stop="togglePinned(ctx.item)"
             )
               span.svg-icon.inline.icon-12.color(v-html="icons.pin")
-
 </template>
 
 <style lang="scss" scoped>
@@ -334,6 +333,16 @@ export default {
       user: 'user.data',
       userPreferences: 'user.data.preferences',
     }),
+    onUserPage () {
+      let onUserPage = Boolean(this.taskList.length) && (!this.taskListOverride || this.taskListOverride.length === 0);
+
+      if (!onUserPage) {
+        this.activateFilter('daily', this.types.daily.filters[0]);
+        this.types.reward.filters = [];
+      }
+
+      return onUserPage;
+    },
     taskList () {
       // @TODO: This should not default to user's tasks. It should require that you pass options in
       const filter = this.activeFilters[this.type];
@@ -399,6 +408,7 @@ export default {
       if (this.user.preferences.dailyDueDefaultView) {
         this.activateFilter('daily', this.types.daily.filters[1]);
       }
+
       return this.user.preferences.dailyDueDefaultView;
     },
     quickAddPlaceholder () {
@@ -434,9 +444,8 @@ export default {
       deep: true,
     },
     dailyDueDefaultView () {
-      if (this.user.preferences.dailyDueDefaultView) {
-        this.activateFilter('daily', this.types.daily.filters[1]);
-      }
+      if (!this.dailyDueDefaultView) return;
+      this.activateFilter('daily', this.types.daily.filters[1]);
     },
   },
   mounted () {
@@ -526,6 +535,7 @@ export default {
       if (type === 'todo' && filter.label === 'complete2') {
         this.loadCompletedTodos();
       }
+
       this.activeFilters[type] = filter;
     },
     setColumnBackgroundVisibility () {
diff --git a/website/client/components/tasks/taskModal.vue b/website/client/components/tasks/taskModal.vue
index 9c9267a787..55ecd16010 100644
--- a/website/client/components/tasks/taskModal.vue
+++ b/website/client/components/tasks/taskModal.vue
@@ -13,7 +13,7 @@
             type="text", :class="[`${cssClass}-modal-input`]",
             required, v-model="task.text",
             autofocus, spellcheck="true",
-            :disabled="groupAccessRequiredAndOnPersonalPage"
+            :disabled="groupAccessRequiredAndOnPersonalPage || challengeAccessRequired"
           )
         .form-group
           label(v-once) {{ $t('notes') }}
@@ -34,12 +34,12 @@
                 .svg-icon.destroy-icon(v-html="icons.destroy")
           input.inline-edit-input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
         .d-flex.justify-content-center(v-if="task.type === 'habit'")
-          .option-item(:class="optionClass(task.up === true)", @click="task.up = !task.up")
+          .option-item(:class="optionClass(task.up === true)", @click="toggleUpDirection()")
             .option-item-box
               .task-control.habit-control(:class="controlClass.up + '-control-habit'")
                 .svg-icon.positive(v-html="icons.positive")
             .option-item-label(v-once) {{ $t('positive') }}
-          .option-item(:class="optionClass(task.down === true)", @click="task.down = !task.down")
+          .option-item(:class="optionClass(task.down === true)", @click="toggleDownDirection()")
             .option-item-box
               .task-control.habit-control(:class="controlClass.down + '-control-habit'")
                 .svg-icon.negative(v-html="icons.negative")
@@ -49,19 +49,19 @@
             span.float-left {{ $t('difficulty') }}
             // @TODO .svg-icon.info-icon(v-html="icons.information")
           .d-flex.justify-content-center
-            .option-item(:class="optionClass(task.priority === 0.1)", @click="task.priority = 0.1")
+            .option-item(:class="optionClass(task.priority === 0.1)", @click="setDifficulty(0.1)")
               .option-item-box
                 .svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
               .option-item-label(v-once) {{ $t('trivial') }}
-            .option-item(:class="optionClass(task.priority === 1)", @click="task.priority = 1")
+            .option-item(:class="optionClass(task.priority === 1)", @click="setDifficulty(1)")
               .option-item-box
                 .svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
               .option-item-label(v-once) {{ $t('easy') }}
-            .option-item(:class="optionClass(task.priority === 1.5)", @click="task.priority = 1.5")
+            .option-item(:class="optionClass(task.priority === 1.5)", @click="setDifficulty(1.5)")
               .option-item-box
                 .svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
               .option-item-label(v-once) {{ $t('medium') }}
-            .option-item(:class="optionClass(task.priority === 2)", @click="task.priority = 2")
+            .option-item(:class="optionClass(task.priority === 2)", @click="setDifficulty(2)")
               .option-item-box
                 .svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
               .option-item-label(v-once) {{ $t('hard') }}
@@ -72,28 +72,33 @@
             :clearButton='true',
             clearButtonIcon='category-select',
             :clearButtonText='$t("clear")',
-            :todayButton='true',
+            :todayButton='!challengeAccessRequired',
             todayButtonIcon='category-select',
             :todayButtonText='$t("today")',
+            :disabled-picker='challengeAccessRequired'
           )
         .option(v-if="task.type === 'daily'")
           label(v-once) {{ $t('startDate') }}
           datepicker.d-inline-block(
             v-model="task.startDate",
             :clearButton='false',
-            :todayButton='true',
+            :todayButton='!challengeAccessRequired',
             todayButtonIcon='category-select',
             :todayButtonText='$t("today")',
+            :disabled-picker='challengeAccessRequired'
           )
         .option(v-if="task.type === 'daily'")
           .form-group
             label(v-once) {{ $t('repeats') }}
             b-dropdown(:text="$t(task.frequency)")
-              b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']", :key="frequency", @click="task.frequency = frequency", :class="{active: task.frequency === frequency}")
+              b-dropdown-item(v-for="frequency in ['daily', 'weekly', 'monthly', 'yearly']",
+              :key="frequency", @click="task.frequency = frequency",
+              :disabled='challengeAccessRequired',
+              :class="{active: task.frequency === frequency}")
                 | {{ $t(frequency) }}
           .form-group
             label(v-once) {{ $t('repeatEvery') }}
-            input(type="number", v-model="task.everyX", min="0", required)
+            input(type="number", v-model="task.everyX", min="0", required, :disabled='challengeAccessRequired')
             | {{ repeatSuffix }}
             br
           template(v-if="task.frequency === 'weekly'")
@@ -102,7 +107,7 @@
               :key="dayNumber",
             )
               label.custom-control.custom-checkbox
-                input.custom-control-input(type="checkbox", v-model="task.repeat[day]")
+                input.custom-control-input(type="checkbox", v-model="task.repeat[day]", :disabled='challengeAccessRequired')
                 span.custom-control-indicator
                 span.custom-control-description(v-once) {{ weekdaysMin(dayNumber) }}
           template(v-if="task.frequency === 'monthly'")
@@ -118,7 +123,7 @@
         .tags-select.option(v-if="isUserTask")
           .tags-inline
             label(v-once) {{ $t('tags') }}
-            .category-wrap(@click="showTagsSelect = !showTagsSelect", v-bind:class="{ active: showTagsSelect }")
+            .category-wrap(@click="toggleTagSelect()", v-bind:class="{ active: showTagsSelect }")
               span.category-select(v-if='task.tags && task.tags.length === 0')
                 .tags-none {{$t('none')}}
                 .dropdown-toggle
@@ -137,7 +142,7 @@
         .option(v-if="task.type === 'daily' && isUserTask && purpose === 'edit'")
           .form-group
             label(v-once) {{ $t('restoreStreak') }}
-            input(type="number", v-model="task.streak", min="0", required)
+            input(type="number", v-model="task.streak", min="0", required, :disabled='challengeAccessRequired')
 
         .option.group-options(v-if='groupId')
           label(v-once) Assigned To
@@ -598,12 +603,21 @@ export default {
       dayMapping: 'constants.DAY_MAPPING',
     }),
     groupAccessRequiredAndOnPersonalPage () {
-      if (!this.groupId && this.task.group.id) return true;
+      if (!this.groupId && this.task.group && this.task.group.id) return true;
       return false;
     },
     checklistEnabled () {
       return ['daily', 'todo'].indexOf(this.task.type) > -1 && !this.isOriginalChallengeTask;
     },
+    isChallengeTask () {
+      return Boolean(this.task.challenge && this.task.challenge.id);
+    },
+    onUserPage () {
+      return !this.challengeId && !this.groupId;
+    },
+    challengeAccessRequired () {
+      return this.onUserPage && this.isChallengeTask;
+    },
     isOriginalChallengeTask () {
       let isUserChallenge = Boolean(this.task.userId);
       return !isUserChallenge && (this.challengeId || this.task.challenge && this.task.challenge.id);
@@ -682,6 +696,22 @@ export default {
     closeTagsPopup () {
       this.showTagsSelect = false;
     },
+    setDifficulty (level) {
+      if (this.challengeAccessRequired) return;
+      this.task.priority = level;
+    },
+    toggleUpDirection () {
+      if (this.challengeAccessRequired) return;
+      this.task.up = !this.task.up;
+    },
+    toggleDownDirection () {
+      if (this.challengeAccessRequired) return;
+      this.task.down = !this.task.down;
+    },
+    toggleTagSelect () {
+      if (this.challengeAccessRequired) return;
+      this.showTagsSelect = !this.showTagsSelect;
+    },
     sortedChecklist (data) {
       let sorting = clone(this.task.checklist);
       let movingItem = sorting[data.oldIndex];
diff --git a/website/client/mixins/challengeMemberSearch.js b/website/client/mixins/challengeMemberSearch.js
new file mode 100644
index 0000000000..f2bc79bd6b
--- /dev/null
+++ b/website/client/mixins/challengeMemberSearch.js
@@ -0,0 +1,21 @@
+// @TODO: How do we require data or make this functional
+import debounce from 'lodash/debounce';
+
+export default {
+  watch: {
+    searchTerm: debounce(function searchTerm (newSearch) {
+      this.challengeMemberSearchMixin_searchChallengeMember(newSearch);
+    }, 500),
+    members () {
+      this.memberResults = this.members;
+    },
+  },
+  methods: {
+    async challengeMemberSearchMixin_searchChallengeMember (search) { // eslint-disable-line
+      this.memberResults = await this.$store.dispatch('members:getChallengeMembers', {
+        challengeId: this.challengeId,
+        searchTerm: search,
+      });
+    },
+  },
+};
diff --git a/website/common/locales/en/challenge.json b/website/common/locales/en/challenge.json
index e4cba4d389..d1f3618902 100644
--- a/website/common/locales/en/challenge.json
+++ b/website/common/locales/en/challenge.json
@@ -129,5 +129,6 @@
   "locationRequired": "Location of challenge is required ('Add to')",
   "categoiresRequired": "One or more categories must be selected",
   "viewProgressOf": "View Progress Of",
-  "selectMember": "Select Member"
+  "selectMember": "Select Member",
+  "confirmKeepChallengeTasks": "Do you want to keep challenge tasks?"
 }