Client Tasks v3 (#8926)

* tasks hover state

* hide column background if task too close

* wip edit tasks

* wip: replace tags

* upgrade bootstrap-vue and fix creare btn for tasks

* difficulty options colors and active label fixes

* fix tags

.babelrc

@@ -1,6 +1,7 @@
 {
   "presets": ["es2015"],
   "plugins": [
+    "transform-object-rest-spread",
     ["transform-async-to-module-method", {
       "module": "bluebird",
       "method": "coroutine"

package.json

@@ -31,7 +31,7 @@
     "bluebird": "^3.3.5",
     "body-parser": "^1.15.0",
     "bootstrap": "^4.0.0-alpha.6",
-    "bootstrap-vue": "^0.16.1",
+    "bootstrap-vue": "^0.18.0",
     "bower": "~1.3.12",
     "browserify": "~12.0.1",
     "compression": "^1.6.1",

website/client/assets/scss/button.scss

@@ -80,6 +80,10 @@
   }
 }
 
+.show > .btn-success.dropdown-toggle {
+  background: $green-50;
+}
+
 .btn-info {
   background: $blue-50;
 

website/client/assets/scss/dropdown.scss

@@ -6,7 +6,7 @@
   line-height: 1.43;
 }
 
-.dropdown.show > .dropdown-toggle {
+.dropdown.show > .dropdown-toggle:not(.btn-success) {
   color: $purple-200;
   border-color: $purple-500 !important;
   box-shadow: none;

website/client/assets/scss/form.scss

@@ -119,6 +119,26 @@ $bg-disabled-control: #34303a;
   }
 }
 
+.inline-edit-input-group {
+  .input-group-btn {
+    cursor: pointer;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+
+  .destroy-icon {
+    width: 14px;
+    height: 16px;
+  }
+}
+
+.inline-edit-input {
+  margin-bottom: 0px;
+  border-radius: 0px;
+  border: none !important;
+  padding-left: 36px;
+}
+
 @mixin custom-radio-checked-icon ($bg-color) {
   background-image: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$bg-color}'/%3E%3C/svg%3E"), "#", "%23");
 }

website/client/assets/scss/task.scss

@@ -20,6 +20,10 @@
   &-purple {
     background: $purple-300;
 
+    &-color {
+      color: $purple-300;
+    }
+
     &-control-habit {
       background: $purple-300;
     }
@@ -31,6 +35,11 @@
 
   &-worst {
     background: $maroon-100;
+    
+    &-color {
+      color: darken($maroon-100, 12%);
+    }
+
     &-control-habit {
       background: darken($maroon-100, 12%);
     }
@@ -47,6 +56,11 @@
 
   &-worse {
     background: $red-100;
+    
+    &-color {
+      color: darken($red-100, 12%);
+    }
+
     &-control-habit {
       background: darken($red-100, 12%);
     }
@@ -63,6 +77,11 @@
 
   &-bad {
     background: $orange-100;
+    
+    &-color {
+      color: darken($orange-100, 12%);
+    }
+
     &-control-habit {
       background: darken($orange-100, 12%);
     }
@@ -79,6 +98,11 @@
 
   &-neutral {
     background: $yellow-100;
+    
+    &-color {
+      color: darken($yellow-100, 12%);
+    }
+
     &-control-habit {
       background: darken($yellow-100, 12%);
     }
@@ -95,6 +119,11 @@
 
   &-good {
     background: $green-10;
+    
+    &-color {
+      color: darken($green-10, 12%);
+    }
+
     &-control-habit {
       background: darken($green-10, 12%);
     }
@@ -111,6 +140,11 @@
 
   &-better {
     background: $blue-50;
+    
+    &-color {
+      color: darken($blue-50, 12%);
+    }
+
     &-control-habit {
       background: darken($blue-50, 12%);
     }
@@ -127,6 +161,11 @@
 
   &-best {
     background: $teal-50;
+    
+    &-color {
+      color: darken($teal-50, 12%);
+    }
+
     &-control-habit {
       background: darken($teal-50, 12%);
     }

website/client/components/groups/membersModal.vue

@@ -21,20 +21,25 @@ div
       .col-3.actions
         b-dropdown(:text="$t('sort')", right=true)
           b-dropdown-item(@click='sort(option.value)')
-            .svg-icon(v-html="icons.removeIcon")
+            span.dropdown-icon-item
-            | {{$t('removeMember')}}
+              .svg-icon.inline(v-html="icons.removeIcon")
+              span.text {{$t('removeMember')}}
           b-dropdown-item(@click='sort(option.value)')
-            .svg-icon(v-html="icons.messageIcon")
+            span.dropdown-icon-item
-            | {{$t('sendMessage')}}
+              .svg-icon.inline(v-html="icons.messageIcon")
+              span.text {{$t('sendMessage')}}
           b-dropdown-item(@click='sort(option.value)')
-            .svg-icon(v-html="icons.starIcon")
+            span.dropdown-icon-item
-            | {{$t('promoteToLeader')}}
+              .svg-icon.inline(v-html="icons.starIcon")
+              span.text {{$t('promoteToLeader')}}
           b-dropdown-item(@click='sort(option.value)')
-            .svg-icon(v-html="icons.starIcon")
+            span.dropdown-icon-item
-            | {{$t('addManager')}}
+              .svg-icon.inline(v-html="icons.starIcon")
+              span.text {{$t('addManager')}}
           b-dropdown-item(@click='sort(option.value)')
-            .svg-icon(v-html="icons.removeIcon")
+            span.dropdown-icon-item
-            | {{$t('removeManager2')}}
+              .svg-icon.inline(v-html="icons.removeIcon")
+              span.text {{$t('removeManager2')}}
     .row.gradient(v-if='members.length > 3')
 
   b-modal#remove-member(:title="$t('confirmRemoveMember')")
@@ -93,11 +98,8 @@ div
     }
   }
 
-  .dropdown-menu .svg-icon {
+  .dropdown-icon-item .svg-icon {
     width: 20px;
-    display: inline-block;
-    vertical-align: bottom;
-    margin-right: .5em;
   }
 </style>
 

website/client/components/tasks/column.vue

@@ -9,7 +9,7 @@
         :class="{active: activeFilter.label === filter.label}",
         @click="activateFilter(type, filter)",
       ) {{ $t(filter.label) }}
-  .tasks-list
+  .tasks-list(ref="taskList")
     task(
       v-for="task in taskList",
       :key="task.id", :task="task",
@@ -18,7 +18,11 @@
       @editTask="editTask",
     )
     .bottom-gradient
-    .column-background(v-if="isUser === true", :class="{'initial-description': tasks[`${type}s`].length === 0}")
+    .column-background(
+      v-if="isUser === true", 
+      :class="{'initial-description': tasks[`${type}s`].length === 0}",
+      ref="columnBackground",
+    )
       .svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
       h3(v-once) {{$t('theseAreYourTasks', {taskType: `${type}s`})}}
       .small-text {{$t(`${type}sDesc`)}}
@@ -139,6 +143,7 @@ import dailyIcon from 'assets/svg/daily.svg';
 import todoIcon from 'assets/svg/todo.svg';
 import rewardIcon from 'assets/svg/reward.svg';
 import bModal from 'bootstrap-vue/lib/components/modal';
+import throttle from 'lodash/throttle';
 
 export default {
   components: {
@@ -206,6 +211,17 @@ export default {
       return this.tasks[`${this.type}s`];
     },
   },
+  watch: {
+    taskList: {
+      handler: throttle(function setColumnBackgroundVisibility () {
+        this.setColumnBackgroundVisibility();
+      }, 250),
+      deep: true,
+    },
+  },
+  mounted () {
+    this.setColumnBackgroundVisibility();
+  },
   methods: {
     ...mapActions({loadCompletedTodos: 'tasks:fetchCompletedTodos'}),
     editTask (task) {
@@ -217,6 +233,23 @@ export default {
       }
       this.activeFilter = filter;
     },
+    setColumnBackgroundVisibility () {
+      this.$nextTick(() => {
+        const taskListEl = this.$refs.taskList;
+        const tasklistHeight = taskListEl.offsetHeight;
+        let combinedTasksHeights = 0;
+        Array.from(taskListEl.getElementsByClassName('task')).forEach(el => {
+          combinedTasksHeights += el.offsetHeight;
+        });
+        const columnBackgroundStyle = this.$refs.columnBackground.style;
+
+        if (tasklistHeight - combinedTasksHeights < 150) {
+          columnBackgroundStyle.display = 'none';
+        } else {
+          columnBackgroundStyle.display = 'block';
+        }
+      });
+    },
     filterTask (task) {
       // View
       if (!this.activeFilter.filter(task)) return false;

website/client/components/tasks/task.vue

@@ -61,10 +61,18 @@
 .task {
   margin-bottom: 8px;
   box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
-  background: $white;
+  background: transparent;
   border-radius: 2px;
   z-index: 9;
   position: relative;
+
+  &:hover {
+    box-shadow: 0 1px 8px 0 rgba($black, 0.12), 0 4px 4px 0 rgba($black, 0.16);
+
+    .left-control, .right-control, .task-content {
+      border-color: $purple-500;
+    }
+  }
 }
 
 .task-title {
@@ -87,6 +95,12 @@
   padding: 8px;
   flex-grow: 1;
   cursor: pointer;
+  background: $white;
+  border: 1px solid transparent;
+
+  &.no-right-border {
+    border-right: none !important;
+  }
 }
 
 .checklist {
@@ -182,12 +196,20 @@
   border-top-left-radius: 2px;
   border-bottom-left-radius: 2px;
   min-height: 60px;
+  border: 1px solid transparent;
+  border-right: none;
+
+  & + .task-content {
+    border-left: none;
+  }
 }
 
 .right-control {
   border-top-right-radius: 2px;
   border-bottom-right-radius: 2px;
   min-height: 56px;
+  border: 1px solid transparent;
+  border-left: none;
 }
 
 .task-control, .reward-control {
@@ -315,7 +337,12 @@ export default {
       return this.getTaskClasses(this.task, 'control');
     },
     contentClass () {
-      return this.getTaskClasses(this.task, 'content');
+      const classes = [];
+      classes.push(this.getTaskClasses(this.task, 'content'));
+      if (this.task.type === 'reward' || this.task.type === 'habit') {
+        classes.push('no-right-border');
+      }
+      return classes;
     },
     showStreak () {
       if (this.task.streak !== undefined) return true;

website/client/components/tasks/taskModal.vue

@@ -25,18 +25,18 @@ form(
       .option(v-if="['daily', 'todo'].indexOf(task.type) > -1")
         label(v-once) {{ $t('checklist') }}
         br
-        .checklist-group.input-group(v-for="(item, $index) in task.checklist")
+        .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in task.checklist")
-          input.checklist-item.form-control(type="text", :value="item.text")
+          input.inline-edit-input.checklist-item.form-control(type="text", :value="item.text")
           span.input-group-btn(@click="removeChecklistItem($index)")
             .svg-icon.destroy-icon(v-html="icons.destroy")
-        input.checklist-item.form-control(type="text", :placeholder="$t('newChecklistItem')", @keydown.enter="addChecklistItem($event)", v-model="newChecklistItem")
+        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="{'option-item-selected': task.up === true}", @click="task.up = !task.up")
+        .option-item(:class="optionClass(task.up === true)", @click="task.up = !task.up")
           .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="{'option-item-selected': task.down === true}", @click="task.down = !task.down")
+        .option-item(:class="optionClass(task.down === true)", @click="task.down = !task.down")
           .option-item-box
             .task-control.habit-control(:class="controlClass.down + '-control-habit'")
               .svg-icon.negative(v-html="icons.negative")
@@ -46,19 +46,19 @@ form(
           span.float-left {{ $t('difficulty') }}
           .svg-icon.info-icon(v-html="icons.information")
         .d-flex.justify-content-center
-          .option-item(:class="{'option-item-selected': task.priority === 0.1}", @click="task.priority = 0.1")
+          .option-item(:class="optionClass(task.priority === 0.1)", @click="task.priority = 0.1")
             .option-item-box
               .svg-icon.difficulty-trivial-icon(v-html="icons.difficultyTrivial")
             .option-item-label(v-once) {{ $t('trivial') }}
-          .option-item(:class="{'option-item-selected': task.priority === 1}", @click="task.priority = 1")
+          .option-item(:class="optionClass(task.priority === 1)", @click="task.priority = 1")
             .option-item-box
               .svg-icon.difficulty-normal-icon(v-html="icons.difficultyNormal")
             .option-item-label(v-once) {{ $t('easy') }}
-          .option-item(:class="{'option-item-selected': task.priority === 1.5}", @click="task.priority = 1.5")
+          .option-item(:class="optionClass(task.priority === 1.5)", @click="task.priority = 1.5")
             .option-item-box
               .svg-icon.difficulty-medium-icon(v-html="icons.difficultyMedium")
             .option-item-label(v-once) {{ $t('medium') }}
-          .option-item(:class="{'option-item-selected': task.priority === 2}", @click="task.priority = 2")
+          .option-item(:class="optionClass(task.priority === 2)", @click="task.priority = 2")
             .option-item-box
               .svg-icon.difficulty-hard-icon(v-html="icons.difficultyHard")
             .option-item-label(v-once) {{ $t('hard') }}
@@ -227,6 +227,12 @@ form(
         margin-right: 0px;
       }
 
+      &-selected {
+        .option-item-label {
+          color: inherit !important;
+        }
+      }
+
       &-box {
         width: 64px;
         height: 64px;
@@ -263,17 +269,6 @@ form(
 
     .checklist-group {
       border-top: 1px solid $gray-500;
-
-      .input-group-btn {
-        cursor: pointer;
-        padding-left: 10px;
-        padding-right: 10px;
-      }
-
-      .destroy-icon {
-        width: 14px;
-        height: 16px;
-      }
     }
 
     .checklist-item {
@@ -283,12 +278,12 @@ form(
       padding-left: 36px;
 
       &:last-child {
-        background-size: 10px 10px;
-        background-image: url(~client/assets/svg/for-css/positive.svg);
         background-repeat: no-repeat;
         background-position: center left 10px;
         border-top: 1px solid $gray-500 !important;
         border-bottom: 1px solid $gray-500 !important;
+        background-size: 10px 10px;
+        background-image: url(~client/assets/svg/for-css/positive.svg);
       }
     }
 
@@ -326,6 +321,7 @@ import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import Datepicker from 'vuejs-datepicker';
 import moment from 'moment';
+import uuid from 'uuid';
 
 import informationIcon from 'assets/svg/information.svg';
 import difficultyTrivialIcon from 'assets/svg/difficulty-trivial.svg';
@@ -425,8 +421,19 @@ export default {
   },
   methods: {
     ...mapActions({saveTask: 'tasks:save', destroyTask: 'tasks:destroy', createTask: 'tasks:create'}),
+    optionClass (activeCondition) {
+      if (activeCondition) {
+        return [`${this.cssClass}-color`, 'option-item-selected'];
+      } else {
+        return [];
+      }
+    },
     addChecklistItem (e) {
-      this.task.checklist.push({text: this.newChecklistItem, completed: false});
+      this.task.checklist.push({
+        id: uuid.v4(),
+        text: this.newChecklistItem,
+        completed: false,
+      });
       this.newChecklistItem = null;
       e.preventDefault();
     },

website/client/components/tasks/user.vue

@@ -13,27 +13,41 @@
           input.form-control.input-search(type="text", :placeholder="$t('search')", v-model="searchText")
           .filter-panel(v-if="isFilterPanelOpen")
             .tags-category.d-flex(v-for="tagsType in tagsByType", v-if="tagsType.tags.length > 0", :key="tagsType.key")
-              .tags-header(v-once)
+              .tags-header
-                strong {{ $t(tagsType.key) }}
+                strong(v-once) {{ $t(tagsType.key) }}
-                a.d-block(v-if="tagsType.key === 'tags'", v-once) {{ $t('editTags2') }}
+                a.d-block(v-if="tagsType.key === 'tags' && !editingTags", @click="editTags()") {{ $t('editTags2') }}
               .tags-list.container
-                .row.no-gutters
+                .row(:class="{'no-gutters': !editingTags}")
-                  .col-6(v-for="tag in tagsType.tags",)
+                  template(v-if="editingTags && tagsType.key === 'tags'")
-                    label.custom-control.custom-checkbox
+                    .col-6(v-for="(tag, tagIndex) in tagsSnap")
-                      input.custom-control-input(
+                      .inline-edit-input-group.tag-edit-item.input-group
-                        type="checkbox",
+                        input.tag-edit-input.inline-edit-input.form-control(type="text", :value="tag.name")
-                        :checked="isTagSelected(tag)",
+                        span.input-group-btn(@click="removeTag(tagIndex)")
-                        @change="toggleTag(tag)",
+                          .svg-icon.destroy-icon(v-html="icons.destroy")
-                      )
+                    .col-6
-                      span.custom-control-indicator
+                      input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event)", v-model="newTag")
-                      span.custom-control-description {{ tag.name }}
+                  template(v-else)
+                    .col-6(v-for="(tag, tagIndex) in tagsType.tags")
+                      label.custom-control.custom-checkbox
+                        input.custom-control-input(
+                          type="checkbox",
+                          :checked="isTagSelected(tag)",
+                          @change="toggleTag(tag)",
+                        )
+                        span.custom-control-indicator
+                        span.custom-control-description {{ tag.name }}
 
             .filter-panel-footer.clearfix
-              .float-left
+              template(v-if="editingTags === true")
-                a.reset-filters(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
+                .text-center
-              .float-right
+                  a.mr-3.btn-filters-primary(@click="saveTags()", v-once) {{ $t('saveEdits') }}
-                a.mr-3.apply-filters(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
+                  a.btn-filters-secondary(@click="cancelTagsEditing()", v-once) {{ $t('cancel') }}
-                a.cancel-filters(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
+              template(v-else)
+                .float-left
+                  a.btn-filters-danger(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
+                .float-right
+                  a.mr-3.btn-filters-primary(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
+                  a.btn-filters-secondary(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
           span.input-group-btn
             button.btn.btn-secondary.filter-button(
               type="button",
@@ -43,13 +57,15 @@
               .d-flex.align-items-center
                 span(v-once) {{ $t('filter') }}
                 .svg-icon.filter-icon(v-html="icons.filter")
-      .col-1.offset-3
+      #create-dropdown.col-1.offset-3
-        //button.btn.btn-success(v-once)
+        b-dropdown(:right="true", :variant="'success'")
-          .svg-icon.positive(v-html="icons.positive")
+          div(slot="button-content")
-          | {{ $t('create') }}
+            .svg-icon.positive(v-html="icons.positive")
-        b-dropdown(:text="$t('create')")
+            | {{ $t('create') }}
           b-dropdown-item(v-for="type in columns", :key="type", @click="createTask(type)")
-            | {{$t(type)}}
+            span.dropdown-icon-item(v-once)
+              span.svg-icon.inline(v-html="icons[type]")
+              span.text {{$t(type)}}
 
     .row.tasks-columns
       task-column.col-3(
@@ -61,6 +77,12 @@
       )
 </template>
 
+<style lang="scss">
+#create-dropdown .dropdown-toggle::after {
+  display: none;
+}
+</style>
+
 <style lang="scss" scoped>
   @import '~client/assets/scss/colors.scss';
 
@@ -80,6 +102,10 @@
     padding-top: 6px;
   }
 
+  .dropdown-icon-item .svg-icon {
+    width: 16px;
+  }
+
   button.btn.btn-secondary.filter-button {
     box-shadow: none;
     border-radius: 2px;
@@ -144,6 +170,32 @@
       }
     }
 
+    .tag-edit-input {
+      border-bottom: 1px solid $gray-500 !important;
+
+      &:focus, &:focus ~ .input-group-btn {
+        border-color: $purple-500 !important;
+      }
+    }
+
+    .new-tag-item {
+      width: 100%;
+      background-repeat: no-repeat;
+      background-position: center left 10px;
+      border-bottom: 1px solid $gray-500 !important;
+      background-size: 10px 10px;
+      padding-left: 40px;
+      background-image: url(~client/assets/svg/for-css/positive.svg);
+    }
+
+    .tag-edit-item .input-group-btn {
+      border-bottom: 1px solid $gray-500 !important;
+
+      &:focus {
+        border-color: $purple-500;
+      }
+    }
+
     .custom-control-description {
       margin-left: 10px;
     }
@@ -158,15 +210,15 @@
         }
       }
 
-      .reset-filters {
+      .btn-filters-danger {
         color: $red-50;
       }
 
-      .apply-filters {
+      .btn-filters-primary {
         color: $blue-10;
       }
 
-      .cancel-filters {
+      .btn-filters-secondary {
         color: $gray-300;
       }
     }
@@ -179,13 +231,19 @@ import TaskModal from './taskModal';
 
 import positiveIcon from 'assets/svg/positive.svg';
 import filterIcon from 'assets/svg/filter.svg';
+import deleteIcon from 'assets/svg/delete.svg';
+import habitIcon from 'assets/svg/habit.svg';
+import dailyIcon from 'assets/svg/daily.svg';
+import todoIcon from 'assets/svg/todo.svg';
+import rewardIcon from 'assets/svg/reward.svg';
 
+import uuid from 'uuid';
 import Vue from 'vue';
 import bDropdown from 'bootstrap-vue/lib/components/dropdown';
 import bDropdownItem from 'bootstrap-vue/lib/components/dropdown-item';
 import throttle from 'lodash/throttle';
 import cloneDeep from 'lodash/cloneDeep';
-import { mapState } from 'client/libs/store';
+import { mapState, mapActions } from 'client/libs/store';
 import taskDefaults from 'common/script/libs/taskDefaults';
 
 export default {
@@ -204,9 +262,17 @@ export default {
       icons: Object.freeze({
         positive: positiveIcon,
         filter: filterIcon,
+        destroy: deleteIcon,
+        habit: habitIcon,
+        daily: dailyIcon,
+        todo: todoIcon,
+        reward: rewardIcon,
       }),
       selectedTags: [],
       temporarilySelectedTags: [],
+      tagsSnap: null, // tags snapshot when being edited
+      editingTags: false,
+      newTag: null,
       editingTask: null,
       creatingTask: null,
     };
@@ -249,6 +315,28 @@ export default {
     }, 250),
   },
   methods: {
+    ...mapActions({setUser: 'user:set'}),
+    editTags () {
+      // clone the arrays being edited so that we can revert if needed
+      this.tagsSnap = this.tagsByType.user.tags.slice();
+      this.editingTags = true;
+    },
+    addTag () {
+      this.tagsSnap.push({id: uuid.v4(), name: this.newTag});
+      this.newTag = null;
+    },
+    removeTag (index) {
+      this.tagsSnap.splice(index, 1);
+    },
+    saveTags () {
+      this.setUser({tags: this.tagsSnap});
+      this.cancelTagsEditing();
+    },
+    cancelTagsEditing () {
+      this.editingTags = false;
+      this.tagsSnap = null;
+      this.newTag = null;
+    },
     editTask (task) {
       this.editingTask = cloneDeep(task);
       // Necessary otherwise the first time the modal is not rendered

website/client/store/actions/user.js

@@ -18,7 +18,16 @@ export function set (store, changes) {
   const user = store.state.user.data;
 
   for (let key in changes) {
-    setProps(user, key, changes[key]);
+    if (key === 'tags') {
+      // Keep challenge and group tags
+      const oldTags = user.tags.filter(t => {
+        return t.group || t.challenge;
+      });
+
+      user.tags = changes[key].concat(oldTags);
+    } else {
+      setProps(user, key, changes[key]);
+    }
   }
 
   axios.put('/api/v3/user', changes);

website/common/locales/en/newClient.json

@@ -251,6 +251,7 @@
   "featuredset": "Featured Set <%= name %>",
   "mysterySets": "Mystery Sets",
   "fetchRecentMessages": "Fetch Recent Messages",
+  "saveEdits": "Save Edits",
   "showMore": "Show More",
   "showLess": "Show Less",
   "hatchedPetNotesPart1": "Visit the ",

website/server/controllers/api-v3/user.js

@@ -20,6 +20,7 @@ import {
 } from '../../libs/email';
 import nconf from 'nconf';
 import get from 'lodash/get';
+import { model as Tag } from '../../models/tag';
 
 const TECH_ASSISTANCE_EMAIL = nconf.get('EMAILS:TECH_ASSISTANCE_EMAIL');
 const DELETE_CONFIRMATION = 'DELETE';
@@ -157,6 +158,7 @@ let updatablePaths = [
   'profile',
   'stats',
   'inbox.optOut',
+  'tags',
 ];
 
 // This tells us for which paths users can call `PUT /user`.
@@ -247,8 +249,43 @@ api.updateUser = {
         throw new NotAuthorized(res.t('mustPurchaseToSet', { val, key }));
       }
 
-      if (acceptablePUTPaths[key]) {
+      if (acceptablePUTPaths[key] && key !== 'tags') {
         _.set(user, key, val);
+      } else if (key === 'tags') {
+        if (!Array.isArray(val)) throw new BadRequest('mustBeArray');
+
+        const removedTagsIds = [];
+
+        const oldTags = [];
+
+        // Keep challenge and group tags
+        user.tags.forEach(t => {
+          if (t.group || t.challenge) {
+            oldTags.push(t);
+          } else {
+            removedTagsIds.push(t.id);
+          }
+        });
+
+        user.tags = oldTags;
+
+        val.forEach(t => {
+          let oldI = removedTagsIds.findIndex(id => id === t.id);
+          if (oldI > -1) {
+            removedTagsIds.splice(oldI, 1);
+          }
+
+          user.tags.push(Tag.sanitize(t));
+        });
+
+        // Remove from all the tasks TODO test
+        Tasks.Task.update({
+          userId: user._id,
+        }, {
+          $pull: {
+            tags: {$in: [removedTagsIds]},
+          },
+        }, {multi: true}).exec();
       } else {
         throw new NotAuthorized(res.t('messageUserOperationProtected', { operation: key }));
       }

website/server/models/tag.js

@@ -22,8 +22,14 @@ export let schema = new Schema({
 });
 
 schema.plugin(baseModel, {
-  noSet: ['_id', 'id', 'challenge'],
+  noSet: ['_id', 'challenge', 'group'],
   _id: false, // use id instead of _id
 });
 
+// A list of additional fields that cannot be updated (but can be set on creation)
+const noUpdate = ['id'];
+schema.statics.sanitizeUpdate = function sanitizeUpdate (updateObj) {
+  return this.sanitize(updateObj, noUpdate);
+};
+
 export let model = mongoose.model('Tag', schema);