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

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)
-                strong {{ $t(tagsType.key) }}
-                a.d-block(v-if="tagsType.key === 'tags'", v-once) {{ $t('editTags2') }}
+              .tags-header
+                strong(v-once) {{ $t(tagsType.key) }}
+                a.d-block(v-if="tagsType.key === 'tags' && !editingTags", @click="editTags()") {{ $t('editTags2') }}
               .tags-list.container
-                .row.no-gutters
-                  .col-6(v-for="tag 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 }}
+                .row(:class="{'no-gutters': !editingTags}")
+                  template(v-if="editingTags && tagsType.key === 'tags'")
+                    .col-6(v-for="(tag, tagIndex) in tagsSnap")
+                      .inline-edit-input-group.tag-edit-item.input-group
+                        input.tag-edit-input.inline-edit-input.form-control(type="text", :value="tag.name")
+                        span.input-group-btn(@click="removeTag(tagIndex)")
+                          .svg-icon.destroy-icon(v-html="icons.destroy")
+                    .col-6
+                      input.new-tag-item.edit-tag-item.inline-edit-input.form-control(type="text", :placeholder="$t('newTag')", @keydown.enter="addTag($event)", v-model="newTag")
+                  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
-                a.reset-filters(@click="resetFilters()", v-once) {{ $t('resetFilters') }}
-              .float-right
-                a.mr-3.apply-filters(@click="applyFilters()", v-once) {{ $t('applyFilters') }}
-                a.cancel-filters(@click="closeFilterPanel()", v-once) {{ $t('cancel') }}
+              template(v-if="editingTags === true")
+                .text-center
+                  a.mr-3.btn-filters-primary(@click="saveTags()", v-once) {{ $t('saveEdits') }}
+                  a.btn-filters-secondary(@click="cancelTagsEditing()", 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
-        //button.btn.btn-success(v-once)
-          .svg-icon.positive(v-html="icons.positive")
-          | {{ $t('create') }}
-        b-dropdown(:text="$t('create')")
+      #create-dropdown.col-1.offset-3
+        b-dropdown(:right="true", :variant="'success'")
+          div(slot="button-content")
+            .svg-icon.positive(v-html="icons.positive")
+            | {{ $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