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/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")
-          input.checklist-item.form-control(type="text", :value="item.text")
+        .inline-edit-input-group.checklist-group.input-group(v-for="(item, $index) in task.checklist")
+          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)
-                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