TaskModal: Checklist component extracted (#12287)

* wip: checklist component extracted

* fixing icons:
Trash can - Delete
Little X - Remove
Big X - Close
Block - Block

* remove checklist code from taskModal and replace with the component + fix styles

* save checklist item on blur

* remove console.info

* fix pr comments + empty checklist item + icon

website/client/config/storybook/config.js

@@ -31,14 +31,22 @@ import '../../src/assets/css/sprites/spritesmith-main-24.css';
 import '../../src/assets/css/sprites/spritesmith-main-25.css';
 import '../../src/assets/css/sprites/spritesmith-main-26.css';
 import Vue from 'vue';
+import BootstrapVue from 'bootstrap-vue';
 import StoreModule from '@/libs/store';
 
+// couldn't inject the languages easily,
+// so just a "$t()"  string to show that this will be translated
+Vue.prototype.$t = function translateString (...args) {
+  return `$t(${JSON.stringify(args)})`;
+};
+
+Vue.use(BootstrapVue);
+Vue.use(StoreModule);
+
 const req = require.context('../../src', true, /.stories.js$/);
 
 function loadStories () {
   req.keys().forEach(filename => req(filename));
 }
 
-Vue.use(StoreModule);
-
 configure(loadStories, module);

website/client/src/assets/members/remove.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-    <path fill="#878190" fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
-</svg>

website/client/src/assets/svg/block.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <path fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
+</svg>

website/client/src/assets/svg/chevron.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="9" viewBox="0 0 14 9">
+    <path fill="none" fill-rule="evenodd" stroke="#878190" stroke-width="2.5" d="M13 1L7 7 1 1"/>
+</svg>

website/client/src/assets/svg/grip.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="10" height="16" viewBox="0 0 10 16">
+    <path fill="#878190" fill-rule="evenodd" d="M2 12c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zM2 6c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zM2 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2zm6 0c1.105 0 2 .895 2 2s-.895 2-2 2-2-.895-2-2 .895-2 2-2z"/>
+</svg>

website/client/src/assets/svg/remove.svg

@@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<svg xmlns="http://www.w3.org/2000/svg" width="7" height="7" viewBox="0 0 7 7">
-    <path fill-rule="evenodd" d="M8 14a5.96 5.96 0 0 1-3.327-1.011l8.316-8.316A5.96 5.96 0 0 1 14 8c0 3.309-2.691 6-6 6M8 2a5.96 5.96 0 0 1 3.327 1.011l-8.316 8.316A5.96 5.96 0 0 1 2 8c0-3.309 2.691-6 6-6m0-2a8 8 0 1 0 0 16A8 8 0 0 0 8 0"/>
+    <g fill="none" fill-rule="evenodd" stroke="#878190" stroke-width="1.5">
+        <path d="M0 5l5-5M5 5L0 0" transform="translate(1 1)"/>
+    </g>
 </svg>

website/client/src/components/groups/membersModal.vue

@@ -161,8 +161,8 @@
               >
                 <span class="dropdown-icon-item">
                   <div
-                    class="svg-icon inline"
+                    class="svg-icon inline block-icon"
-                    v-html="icons.removeIcon"
+                    v-html="icons.blockIcon"
                   ></div>
                   <span class="text">{{ $t('removeManager2') }}</span>
                 </span>
@@ -181,8 +181,8 @@
               >
                 <span class="dropdown-icon-item">
                   <div
-                    class="svg-icon inline"
+                    class="svg-icon inline block-icon"
-                    v-html="icons.removeIcon"
+                    v-html="icons.blockIcon"
                   ></div>
                   <span class="text">{{ $t('removeMember') }}</span>
                 </span>
@@ -231,8 +231,8 @@
                 <span class="dropdown-icon-item">
                   <div
                     v-if="isLeader"
-                    class="svg-icon inline"
+                    class="svg-icon inline block-icon"
-                    v-html="icons.removeIcon"
+                    v-html="icons.blockIcon"
                   ></div>
                   <span class="text">{{ $t('removeInvite') }}</span>
                 </span>
@@ -279,6 +279,8 @@
 </style>
 
 <style lang='scss' scoped>
+  @import '~@/assets/scss/colors.scss';
+
   .apply-options {
     padding: 1em;
     margin: 0;
@@ -366,6 +368,10 @@
     border-bottom: 2px solid #4f2a93;
     cursor: pointer;
   }
+
+  .block-icon {
+    color:  $gray-200;
+  }
 </style>
 
 <script>
@@ -376,7 +382,7 @@ import { mapState } from '@/libs/store';
 import removeMemberModal from '@/components/members/removeMemberModal';
 import loadingGryphon from '@/components/ui/loadingGryphon';
 import MemberDetails from '../memberDetails';
-import removeIcon from '@/assets/members/remove.svg';
+import blockIcon from '@/assets/svg/block.svg';
 import messageIcon from '@/assets/members/message.svg';
 import starIcon from '@/assets/members/star.svg';
 import dots from '@/assets/svg/dots.svg';
@@ -438,7 +444,7 @@ export default {
       ],
       searchTerm: '',
       icons: Object.freeze({
-        removeIcon,
+        blockIcon,
         messageIcon,
         starIcon,
         dots,

website/client/src/components/messages/conversationItem.vue

@@ -34,7 +34,7 @@
             <span class="dropdown-icon-item">
               <div
                 class="svg-icon inline"
-                v-html="icons.remove"
+                v-html="icons.block"
               ></div><span class="text">{{ $t(isBlocked ? 'unblock' : 'block') }}</span></span>
           </b-dropdown-item>
         </b-dropdown>
@@ -65,7 +65,7 @@ import moment from 'moment';
 import userLabel from '../userLabel';
 
 import dots from '@/assets/svg/dots.svg';
-import remove from '@/assets/svg/remove.svg';
+import block from '@/assets/svg/block.svg';
 
 import { mapState } from '@/libs/store';
 
@@ -90,7 +90,7 @@ export default {
     return {
       icons: Object.freeze({
         dots,
-        remove,
+        block,
       }),
     };
   },

website/client/src/components/selectMembersModal.vue

@@ -147,7 +147,7 @@
 import sortBy from 'lodash/sortBy';
 
 import MemberDetails from './memberDetails';
-import removeIcon from '@/assets/members/remove.svg';
+import removeIcon from '@/assets/svg/remove.svg';
 import messageIcon from '@/assets/members/message.svg';
 import starIcon from '@/assets/members/star.svg';
 

website/client/src/components/tasks/modal-controls/checklist.stories.js

@@ -0,0 +1,46 @@
+import { storiesOf } from '@storybook/vue';
+import { withKnobs } from '@storybook/addon-knobs';
+
+import CheckList from './checklist.vue';
+
+const stories = storiesOf('CheckList', module);
+
+stories.addDecorator(withKnobs);
+
+stories
+  .add('simple', () => ({
+    components: { CheckList },
+    template: `
+      <div style="position: absolute; margin: 20px; background: white">
+        <check-list :items.sync="checklist">
+          
+        </check-list>
+        
+        <br/>
+        <br/>
+        Data: <br/>
+        {{ checklist }}
+      </div>
+    `,
+    data () {
+      return {
+        checklist: [
+          {
+            id: 'c0890cd2-3c69-4889-bf2c-b63ac0ee6628',
+            text: 'first',
+            completed: false,
+          },
+          {
+            id: '5b913020-b340-4099-9a53-afcd27dc5637',
+            text: 'second',
+            completed: true,
+          },
+          {
+            id: '77b52a8e-4a0e-4717-9650-55fb5462b42f',
+            text: 'third',
+            completed: false,
+          },
+        ],
+      };
+    },
+  }));

website/client/src/components/tasks/modal-controls/checklist.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="checklist-component">
+    <label v-once class="mb-1">{{ $t('checklist') }}</label>
+    <br>
+    <draggable
+      v-model="checklist"
+      :options="{
+        handle: '.grippy',
+        filter: '.task-dropdown',
+        disabled: disabled,
+      }"
+      @update="updateChecklist"
+    >
+      <div
+        v-for="(item, $index) in checklist"
+        :key="item.id"
+        class="inline-edit-input-group checklist-group input-group"
+      >
+        <span
+          class="grippy"
+          v-html="icons.grip"
+          v-if="!disabled"
+        >
+        </span>
+
+        <checkbox :checked.sync="item.completed"
+                  :disabled="disabled"
+                  class="input-group-prepend"
+                  :class="{'cursor-auto': disabled}"
+                  :id="`checklist-${item.id}`"/>
+
+        <input
+          v-model="item.text"
+          class="inline-edit-input checklist-item form-control"
+          type="text"
+          :disabled="disabled"
+        >
+        <span
+          class="input-group-append"
+          v-if="!disabled"
+          @click="removeChecklistItem($index)"
+        >
+          <div v-once
+               class="svg-icon destroy-icon"
+               v-html="icons.destroy"
+          >
+          </div>
+        </span>
+      </div>
+    </draggable>
+    <div
+      class="inline-edit-input-group checklist-group input-group new-checklist"
+      v-if="!disabled"
+    >
+      <span class="input-group-prepend new-icon"
+            v-once
+            v-html="icons.positive">
+      </span>
+
+      <input
+        v-model="newChecklistItem"
+        class="inline-edit-input checklist-item form-control"
+        type="text"
+        :placeholder="$t('newChecklistItem')"
+        @keypress.enter="setHasPossibilityOfIMEConversion(false)"
+        @keyup.enter="addChecklistItem($event, true)"
+        @blur="addChecklistItem($event, false)"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+// import clone from 'lodash/clone';
+import draggable from 'vuedraggable';
+import uuid from 'uuid';
+
+import positiveIcon from '@/assets/svg/positive.svg';
+import deleteIcon from '@/assets/svg/delete.svg';
+import chevronIcon from '@/assets/svg/chevron.svg';
+import gripIcon from '@/assets/svg/grip.svg';
+import checkbox from '@/components/ui/checkbox';
+
+export default {
+  components: {
+    draggable,
+    checkbox,
+  },
+  name: 'checklist',
+  data () {
+    return {
+      checklist: this.items,
+      hasPossibilityOfIMEConversion: true,
+      newChecklistItem: null,
+      icons: Object.freeze({
+        positive: positiveIcon,
+        destroy: deleteIcon,
+        chevron: chevronIcon,
+        grip: gripIcon,
+      }),
+    };
+  },
+  props: {
+    disabled: {
+      type: Boolean,
+    },
+    items: {
+      type: Array,
+    },
+  },
+  methods: {
+    updateChecklist () {
+      this.$emit('update:items', this.checklist);
+    },
+    setHasPossibilityOfIMEConversion (bool) {
+      this.hasPossibilityOfIMEConversion = bool;
+    },
+    addChecklistItem (e, checkIME) {
+      if (e) {
+        e.preventDefault();
+      }
+
+      const newChecklistItemText = (this.newChecklistItem || '').trim();
+
+      if ((checkIME && this.hasPossibilityOfIMEConversion)
+        || !newChecklistItemText) {
+        return;
+      }
+
+      const checkListItem = {
+        id: uuid.v4(),
+        text: newChecklistItemText,
+        completed: false,
+      };
+      this.checklist.push(checkListItem);
+      this.newChecklistItem = null;
+      this.setHasPossibilityOfIMEConversion(true);
+      this.updateChecklist();
+    },
+    removeChecklistItem (i) {
+      this.checklist.splice(i, 1);
+      this.updateChecklist();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '~@/assets/scss/colors.scss';
+
+  .checklist-component {
+
+    .checklist-group {
+      height: 2rem;
+      border-top: 1px solid $gray-500;
+
+      &.new-checklist {
+        border-bottom: 1px solid $gray-500;
+      }
+
+      .inline-edit-input  {
+        padding-left: 0.75rem;
+      }
+
+      .input-group-prepend {
+        margin-left: 0.375rem;
+        margin-top: 0.475rem;
+        margin-right: 0;
+        padding: 0;
+        &:not(.new-icon) {
+          width: 1.125rem;
+          height: 1.125rem;
+        }
+        &.new-icon {
+          margin-left: 0.688rem;
+          margin-top: 0.625rem;
+          margin-bottom: 0.625rem;
+        }
+      }
+
+      .input-group-append,
+      .input-group-prepend {
+        background: inherit;
+      }
+
+      .checklist-item {
+        padding: 0;
+        margin-left: 0.75rem;
+        margin-top: 0.188rem;
+        margin-bottom: 0.25rem;
+        height: 1.5rem;
+        font-size: 14px;
+        font-weight: normal;
+        font-stretch: normal;
+        font-style: normal;
+        line-height: 1.71;
+        letter-spacing: normal;
+        color: $gray-50;
+      }
+
+      .new-icon {
+        cursor: default;
+
+        svg {
+          width: 0.625rem;
+          height: 0.625rem;
+          object-fit: contain;
+          fill: $gray-200;
+        }
+      }
+    }
+
+    span.grippy {
+      position: absolute;
+      left: -15px;
+      width: 0.625rem;
+      height: 1rem;
+      object-fit: contain;
+      color: $gray-200;
+      top: 4px;
+    }
+
+    .checklist-item {
+      margin-bottom: 0px;
+      border-radius: 0px;
+      border: none !important;
+      padding-left: 36px;
+    }
+
+    .checklist-group {
+      .grippy {
+        opacity: 0;
+        cursor: pointer;
+
+        &:hover, &:active {
+          opacity: 1;
+        }
+      }
+
+      .destroy-icon {
+        display: none;
+      }
+
+      &:hover {
+        cursor: text;
+
+        .destroy-icon {
+          display: inline-block;
+          color: $gray-200;
+
+          &:hover {
+            color: $maroon-50;
+          }
+        }
+
+        .grippy {
+          display: inline-block;
+          opacity: 1;
+        }
+      }
+    }
+
+    label {
+      height: 1.5rem;
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 1.71;
+      letter-spacing: normal;
+      color: $gray-50;
+    }
+  }
+</style>

website/client/src/components/tasks/taskModal.vue

@@ -126,43 +126,7 @@
           v-if="checklistEnabled"
           class="option mt-0"
         >
-          <label v-once>{{ $t('checklist') }}</label>
+          <checklist :items.sync="task.checklist" />
-          <br>
-          <draggable
-            v-model="checklist"
-            :options="{handle: '.grippy', filter: '.task-dropdown'}"
-            @update="sortedChecklist"
-          >
-            <div
-              v-for="(item, $index) in checklist"
-              :key="item.id"
-              class="inline-edit-input-group checklist-group input-group"
-            >
-              <span class="grippy"></span>
-              <input
-                v-model="item.text"
-                class="inline-edit-input checklist-item form-control"
-                type="text"
-              >
-              <span
-                class="input-group-append"
-                @click="removeChecklistItem($index)"
-              >
-                <div
-                  class="svg-icon destroy-icon"
-                  v-html="icons.destroy"
-                ></div>
-              </span>
-            </div>
-          </draggable>
-          <input
-            v-model="newChecklistItem"
-            class="inline-edit-input checklist-item form-control"
-            type="text"
-            :placeholder="$t('newChecklistItem')"
-            @keypress.enter="setHasPossibilityOfIMEConversion(false)"
-            @keyup.enter="addChecklistItem($event)"
-          >
         </div>
         <div
           v-if="task.type === 'habit'"
@@ -1015,72 +979,7 @@
       }
     }
 
-    .checklist-group {
+    .delete-task-btn, .cancel-task-btn {
-      border-top: 1px solid $gray-500;
-
-      .input-group-append {
-        background: inherit;
-      }
-
-      .checklist-item {
-        padding-left: 12px;
-      }
-    }
-
-    // From: https://codepen.io/zachariab/pen/wkrbc
-    span.grippy {
-      content: '....';
-      width: 20px;
-      height: 20px;
-      display: inline-block;
-      overflow: hidden;
-      line-height: 5px;
-      padding: 3px 4px;
-      cursor: move;
-      vertical-align: middle;
-      margin-top: .5em;
-      margin-right: .3em;
-      font-size: 12px;
-      letter-spacing: 2px;
-      color: $gray-300;
-      text-shadow: 1px 0 1px black;
-    }
-
-    span.grippy::after {
-      content: '.. .. .. ..';
-    }
-
-    .checklist-item {
-      margin-bottom: 0px;
-      border-radius: 0px;
-      border: none !important;
-      padding-left: 36px;
-
-      &:last-child {
-        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(~@/assets/svg/for-css/positive.svg);
-      }
-    }
-
-    .checklist-group {
-      .destroy-icon {
-        display: none;
-      }
-
-      &:hover {
-        cursor: text;
-        .destroy-icon {
-          display: inline-block;
-          color: $gray-200;
-        }
-      }
-    }
-
-        .delete-task-btn, .cancel-task-btn {
       cursor: pointer;
       &:hover, &:focus, &:active {
         text-decoration: underline;
@@ -1243,12 +1142,11 @@
 import clone from 'lodash/clone';
 import Datepicker from 'vuejs-datepicker';
 import moment from 'moment';
-import uuid from 'uuid';
-import draggable from 'vuedraggable';
 import toggleSwitch from '@/components/ui/toggleSwitch';
 import markdownDirective from '@/directives/markdown';
 import { mapGetters, mapActions, mapState } from '@/libs/store';
 import TagsPopup from './tagsPopup';
+import checklist from './modal-controls/checklist';
 
 import informationIcon from '@/assets/svg/information.svg';
 import difficultyTrivialIcon from '@/assets/svg/difficulty-trivial.svg';
@@ -1268,7 +1166,7 @@ export default {
     TagsPopup,
     Datepicker,
     toggleSwitch,
-    draggable,
+    checklist,
   },
   directives: {
     markdown: markdownDirective,
@@ -1300,7 +1198,6 @@ export default {
       members: [],
       memberNamesById: {},
       assignedMembers: [],
-      checklist: [],
       showAdvancedOptions: false,
       attributesStrings: {
         str: 'strength',
@@ -1309,7 +1206,6 @@ export default {
         per: 'perception',
       },
       calendarHighlights: { dates: [new Date()] },
-      hasPossibilityOfIMEConversion: true,
     };
   },
   computed: {
@@ -1486,34 +1382,6 @@ export default {
     toggleTagSelect () {
       this.showTagsSelect = !this.showTagsSelect;
     },
-    sortedChecklist (data) {
-      const sorting = clone(this.task.checklist);
-      const movingItem = sorting[data.oldIndex];
-      sorting.splice(data.oldIndex, 1);
-      sorting.splice(data.newIndex, 0, movingItem);
-      this.task.checklist = sorting;
-    },
-    setHasPossibilityOfIMEConversion (bool) {
-      this.hasPossibilityOfIMEConversion = bool;
-    },
-    addChecklistItem (e) {
-      if (e) e.preventDefault();
-      if (this.hasPossibilityOfIMEConversion) return;
-      const checkListItem = {
-        id: uuid.v4(),
-        text: this.newChecklistItem,
-        completed: false,
-      };
-      this.task.checklist.push(checkListItem);
-      // @TODO: managing checklist separately to help with sorting on the UI
-      this.checklist.push(checkListItem);
-      this.newChecklistItem = null;
-      this.setHasPossibilityOfIMEConversion(true);
-    },
-    removeChecklistItem (i) {
-      this.task.checklist.splice(i, 1);
-      this.checklist = clone(this.task.checklist);
-    },
     weekdaysMin (dayNumber) {
       return moment.weekdaysMin(dayNumber);
     },

website/client/src/components/ui/checkbox.vue

@@ -16,6 +16,12 @@
   </div>
 </template>
 
+<style lang="scss" scoped>
+  label {
+    cursor: pointer;
+  }
+</style>
+
 <script>
 export default {
   props: {

website/client/src/components/userMenu/profile.vue

@@ -37,12 +37,12 @@
         <button
           v-if="user._id !== userLoggedIn._id && userLoggedIn.inbox.blocks.indexOf(user._id) === -1"
           v-b-tooltip.hover.right="$t('blockWarning')"
-          class="btn btn-secondary remove-icon"
+          class="btn btn-secondary block-icon"
           @click="blockUser()"
         >
-          <div
+          <div v-once
-            class="svg-icon remove-icon"
+               class="svg-icon block-icon"
-            v-html="icons.remove"
+               v-html="icons.block"
           ></div>
         </button>
         <button
@@ -500,7 +500,7 @@
     width: 12px;
   }
 
-  .remove-icon {
+  .block-icon {
     width: 16px;
     color: $gray-100;
   }
@@ -715,7 +715,7 @@ import profileStats from './profileStats';
 
 import message from '@/assets/svg/message.svg';
 import gift from '@/assets/svg/gift.svg';
-import remove from '@/assets/svg/remove.svg';
+import block from '@/assets/svg/block.svg';
 import positive from '@/assets/svg/positive.svg';
 import dots from '@/assets/svg/dots.svg';
 import megaphone from '@/assets/svg/broken-megaphone.svg';
@@ -740,7 +740,7 @@ export default {
     return {
       icons: Object.freeze({
         message,
-        remove,
+        block,
         positive,
         gift,
         dots,