Client Tasks (#8889)

* tasks: markdown style, checkboxes. Misc fixes

* add filtering to tasks

* client tasks: complete filtering

website/client/app.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
-#app.h-100
+#app
   router-view(v-if="!isUserLoggedIn || isStaticPage")
   template(v-else)
     #loading-screen.h-100.w-100.d-flex.justify-content-center.align-items-center(v-if="!isUserLoaded")
       p Loading...
     template(v-else)
       app-menu
-      .container-fluid.h-100
+      .container-fluid
         app-header
         router-view
 </template>

website/client/assets/scss/index.scss

@@ -13,6 +13,7 @@
 
 // Global styles
 @import './typography';
+@import './markdown';
 @import './form';
 @import './button';
 @import './badge';

website/client/assets/scss/markdown.scss

@@ -0,0 +1,31 @@
+.markdown {
+  > p {
+    margin-bottom: 0px;
+  }
+
+  h1 {
+    line-height: 1.17;
+  }
+
+  h3 {
+    color: $gray-10;
+  }
+
+  h1, h2, h3 {
+    font-weight: normal;
+  }
+
+  h4 {
+    font-family: 'Roboto', sans-serif;
+    font-weight: bold;
+  }
+
+  a {
+    color: $blue-10;
+
+    &:hover, &:active, &:focus {
+      color: $blue-10;
+      text-decoration: underline;
+    }
+  }
+}

website/client/assets/scss/page.scss

@@ -1,7 +1,3 @@
-html {
-  overflow-x: hidden;
-}
-
 html, body {
   height: calc(100% - 56px); // 56px is the menu
 }

website/client/assets/svg/filter.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="12" height="10" viewBox="0 0 12 10">
+    <path fill="#686274" fill-rule="evenodd" d="M0 0h12v2H0V0zm2 4h8v2H2V4zm2 4h4v2H4V8z"/>
+</svg>

website/client/components/memberDetails.vue

@@ -120,6 +120,7 @@
   display: inline-block;
   margin-left: 16px;
   vertical-align: middle;
+  padding-top: 4px;
 
   .svg-icon {
     display: block;

website/client/components/tasks/column.vue

@@ -9,7 +9,11 @@
         @click="activeFilter = filter",
       ) {{ $t(filter.label) }}
   .tasks-list
-    task(v-for="task in tasks[`${type}s`]", :key="task.id", :task="task", v-if="activeFilter.filter(task)")
+    task(
+      v-for="task in tasks[`${type}s`]", 
+      :key="task.id", :task="task", 
+      v-if="filterTask(task)",
+    )
     .bottom-gradient
     .column-background(v-if="isUser === true", :class="{'initial-description': tasks[`${type}s`].length === 0}")
       .svg-icon(v-html="icons[type]", :class="`icon-${type}`", v-once)
@@ -21,7 +25,7 @@
 @import '~client/assets/scss/colors.scss';
 
 .tasks-column {
-  flex-grow: 1;
+  height: 556px;
 }
 
 .tasks-list {
@@ -136,7 +140,7 @@ export default {
   components: {
     Task,
   },
-  props: ['type', 'isUser'],
+  props: ['type', 'isUser', 'searchText', 'selectedTags'],
   data () {
     const types = Object.freeze({
       habit: {
@@ -192,5 +196,37 @@ export default {
       userPreferences: 'user.data.preferences',
     }),
   },
+  methods: {
+    filterTask (task) {
+      // View
+      if (!this.activeFilter.filter(task)) return false;
+
+      // Tags
+      const selectedTags = this.selectedTags;
+
+      if (selectedTags.length > 0) {
+        const hasSelectedTag = task.tags.find(tagId => {
+          return selectedTags.indexOf(tagId) !== -1;
+        });
+
+        if (!hasSelectedTag) return false;
+      }
+
+      // Text
+      const searchText = this.searchText;
+
+      if (!searchText) return true;
+      if (task.text.toLowerCase().indexOf(searchText) !== -1) return true;
+      if (task.notes.toLowerCase().indexOf(searchText) !== -1) return true;
+
+      if (task.checklist && task.checklist.length) {
+        const checklistItemIndex = task.checklist.findIndex(({text}) => {
+          return text.toLowerCase().indexOf(searchText) !== -1;
+        });
+
+        return checklistItemIndex !== -1;
+      }
+    },
+  },
 };
 </script>

website/client/components/tasks/task.vue

@@ -10,11 +10,15 @@
       .svg-icon.check(v-html="icons.check", v-if="task.completed")
   // Task title, description and icons
   .task-content(:class="contentClass")
-    h3.task-title(
-      :class="{ 'has-notes': task.notes }", 
-      v-html="$options.filters.markdown(task.text)"
+    h3.task-title(:class="{ 'has-notes': task.notes }", v-markdown="task.text")
+    .task-notes.small-text(v-markdown="task.notes")
+    .checklist(v-if="task.checklist && task.checklist.length > 0")
+        label.custom-control.custom-checkbox.checklist-item(
+          v-for="item in task.checklist", :class="{'checklist-item-done': item.completed}",
         )
-    .task-notes.small-text(v-html="$options.filters.markdown(task.notes)")
+          input.custom-control-input(type="checkbox", :checked="item.completed")
+          span.custom-control-indicator
+          span.custom-control-description {{ item.text }}
     .icons.small-text.d-flex.align-items-center
       .d-flex.align-items-center(v-if="task.type === 'todo' && task.date", :class="{'due-overdue': isDueOverdue}")
         .svg-icon.calendar(v-html="icons.calendar")
@@ -75,15 +79,43 @@
 .task-notes {
   color: $gray-100;
   font-style: normal;
-  margin-bottom: 4px;
 }
 
 .task-content {
   padding: 8px;
   flex-grow: 1;
+  cursor: pointer;
+}
+
+.checklist {
+  margin-bottom: 2px;
+  margin-top: 8px;
+}
+
+.checklist-item {
+  color: $gray-50;
+  font-size: 14px;
+  line-height: 1.43;
+  margin-bottom: 10px;
+  min-height: 0px;
+
+  &-done {
+    color: $gray-300;
+    text-decoration: line-through;
+  }
+
+  .custom-control-indicator {
+    margin-top: -2px;
+  }
+
+  .custom-control-description {
+    margin-left: 6px;
+    padding-top: 0px;
+  }
 }
 
 .icons {
+  margin-top: 4px;
   color: $gray-300;
   font-style: normal;
 
@@ -237,11 +269,16 @@ import challengeIcon from 'assets/svg/challenge.svg';
 import tagsIcon from 'assets/svg/tags.svg';
 import checkIcon from 'assets/svg/check.svg';
 import bPopover from 'bootstrap-vue/lib/components/popover';
+import markdownDirective from 'client/directives/markdown';
+
 
 export default {
   components: {
     bPopover,
   },
+  directives: {
+    markdown: markdownDirective,
+  },
   props: ['task'],
   data () {
     return {

website/client/components/tasks/user.vue

@@ -3,13 +3,51 @@
   .col-12
     .row.tasks-navigation
       .col-4.offset-4
-        input.form-control.input-search(type="text", :placeholder="$t('search')")
+        .input-group
+          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-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 }}
+
+            .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') }}
+          span.input-group-btn
+            button.btn.btn-secondary.filter-button(
+              type="button", 
+              @click="toggleFilterPanel()",
+              :class="{open: isFilterPanelOpen}",
+            )
+              .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') }}
     .row.tasks-columns
-      task-column.col-3(v-for="column in columns", :type="column", :key="column", :isUser="true")
+      task-column.col-3(
+        v-for="column in columns", 
+        :type="column", :key="column", 
+        :isUser="true", :searchText="searchTextThrottled",
+        :selectedTags="selectedTags",
+      )
 </template>
 
 <style lang="scss" scoped>
@@ -17,7 +55,6 @@
 
 .user-tasks-page {
   padding-top: 31px;
-  height: calc(100% - 235px); // header + padding
 }
 
 .tasks-navigation {
@@ -32,14 +69,96 @@
   padding-top: 6px;
 }
 
-.tasks-columns {
-  height: 100%;
+.filter-button {
+  box-shadow: none;
+  border-radius: 2px;
+  border: 1px solid $gray-400 !important;
+
+  &:hover, &:active, &:focus, &.open {
+    box-shadow: none; 
+    border-color: $purple-500 !important;
+  }
+
+  .filter-icon {
+    height: 10px;
+    width: 12px;
+    color: $green-500;
+    margin-left: 15px;
+  }
+}
+
+.filter-panel {
+  position: absolute;
+  padding-left: 24px;
+  padding-right: 24px;
+  max-width: 40vw;
+  z-index: 9999;
+  background: $white;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba($black, 0.16), 0 1px 4px 0 rgba($black, 0.12);
+  top: 44px;
+  left: 20vw;
+  font-size: 14px;
+  line-height: 1.43;
+  text-overflow: ellipsis;
+
+  .tags-category {
+    border-bottom: 1px solid $gray-600;
+    padding-bottom: 24px;
+    padding-top: 24px;
+  }
+
+  .tags-header {
+     flex-basis: 96px;
+     flex-shrink: 0;
+
+    a {
+      font-size: 12px;
+      line-height: 1.33;
+      color: $blue-10;
+      margin-top: 4px;
+
+      &:focus, &:hover, &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .custom-control-description {
+    margin-left: 10px;
+  }
+
+  .filter-panel-footer {
+    padding-top: 16px;
+    padding-bottom: 16px;
+
+    a {
+      &:focus, &:hover, &:active {
+        text-decoration: underline;
+      }
+    }
+
+    .reset-filters {
+      color: $red-50;
+    }
+
+    .apply-filters {
+      color: $blue-10;
+    }
+
+    .cancel-filters {
+      color: $gray-300;
+    }
+  }
 }
 </style>
 
 <script>
 import Column from './column';
 import positiveIcon from 'assets/svg/positive.svg';
+import filterIcon from 'assets/svg/filter.svg';
+import throttle from 'lodash/throttle';
+import { mapState } from 'client/libs/store';
 
 export default {
   components: {
@@ -48,10 +167,93 @@ export default {
   data () {
     return {
       columns: ['habit', 'daily', 'todo', 'reward'],
+      searchText: null,
+      searchTextThrottled: null,
+      isFilterPanelOpen: false,
       icons: Object.freeze({
         positive: positiveIcon,
+        filter: filterIcon,
       }),
+      selectedTags: [],
+      temporarilySelectedTags: [],
     };
   },
+  computed: {
+    ...mapState({user: 'user.data'}),
+    tagsByType () {
+      const userTags = this.user.tags;
+      const tagsByType = {
+        challenges: {
+          key: 'challenges',
+          tags: [],
+        },
+        groups: {
+          key: 'groups',
+          tags: [],
+        },
+        user: {
+          key: 'tags',
+          tags: [],
+        },
+      };
+
+      userTags.forEach(t => {
+        if (t.group) {
+          tagsByType.groups.tags.push(t);
+        } else if (t.challenge) {
+          tagsByType.challenges.tags.push(t);
+        } else {
+          tagsByType.user.tags.push(t);
+        }
+      });
+
+      return tagsByType;
+    },
+  },
+  watch: {
+    searchText: throttle(function throttleSearch () {
+      this.searchTextThrottled = this.searchText;
+    }, 250),
+  },
+  methods: {
+    toggleFilterPanel () {
+      if (this.isFilterPanelOpen === true) {
+        this.closeFilterPanel();
+      } else {
+        this.openFilterPanel();
+      }
+    },
+    openFilterPanel () {
+      this.isFilterPanelOpen = true;
+      this.temporarilySelectedTags = this.selectedTags.slice();
+    },
+    closeFilterPanel () {
+      this.temporarilySelectedTags = [];
+      this.isFilterPanelOpen = false;
+    },
+    resetFilters () {
+      this.selectedTags = [];
+      this.closeFilterPanel();
+    },
+    applyFilters () {
+      const temporarilySelectedTags = this.temporarilySelectedTags;
+      this.selectedTags = temporarilySelectedTags.slice();
+      this.closeFilterPanel();
+    },
+    toggleTag (tag) {
+      const temporarilySelectedTags = this.temporarilySelectedTags;
+      const tagI = temporarilySelectedTags.indexOf(tag.id);
+      if (tagI === -1) {
+        temporarilySelectedTags.push(tag.id);
+      } else {
+        temporarilySelectedTags.splice(tagI, 1);
+      }
+    },
+    isTagSelected (tag) {
+      const tagId = tag.id;
+      if (this.temporarilySelectedTags.indexOf(tagId) !== -1) return true;
+      return false;
+    },
+  },
 };
 </script>

website/client/directives/markdown.js

@@ -0,0 +1,8 @@
+import habiticaMarkdown from 'habitica-markdown';
+
+export default function markdown (el, {value, oldValue}) {
+  if (value === oldValue) return;
+
+  el.innerHTML = habiticaMarkdown.render(value);
+  el.classList.add('markdown');
+}

website/client/filters/markdown.js

@@ -1,5 +0,0 @@
-import habiticaMarkdown from 'habitica-markdown';
-
-export default function markdown (text) {
-  return habiticaMarkdown.render(text);
-}

website/client/filters/registerGlobals.js

@@ -2,9 +2,7 @@ import Vue from 'vue';
 import round from './round';
 import floor from './floor';
 import roundBigNumber from './roundBigNumber';
-import markdown from './markdown';
 
 Vue.filter('round', round);
 Vue.filter('floor', floor);
 Vue.filter('roundBigNumber', roundBigNumber);
-Vue.filter('markdown', markdown);

website/common/locales/en/newClient.json

@@ -186,6 +186,9 @@
   "messages": "Messages",
   "emptyMessagesLine1": "You don’t have any messages",
   "emptyMessagesLine2": "Send a message to start a conversation!",
+  "resetFilters": "Clear all filters",
+  "applyFilters": "Apply Filters",
+  "editTags2": "Edit Tags"
   "contributing": "Contributing",
   "askAQuestion": "Ask a Question",
   "myChallenges": "My Challenges",