Taskslist (#2)

Show current notes tasks only

client/src/App.vue

@@ -13,8 +13,22 @@ export default {
   mounted: function() {
     SharedBuefy.notifications = this.$buefy.toast;
     SharedBuefy.dialog = this.$buefy.dialog;
+  },
+  provide() {
+    const global = {};
+    Object.defineProperty(global, "taskList", {
+      enumerable: true,
+      get: () => this.taskList
+    });
+    return { global };
+  },
+  data() {
+    return {
+      global: {},
+      taskList: []
+    };
   }
-}
+};
 </script>
 
 <style lang="sass">

client/src/components/Editor.vue

@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts">
-import { Vue, Component, Watch } from 'vue-property-decorator';
+import { Vue, Component, Watch, Inject } from 'vue-property-decorator';
 import * as CodeMirror from 'codemirror';
 import _ from 'lodash';
 
@@ -53,6 +53,8 @@ import eventHub from '../services/eventHub';
   }
 })
 export default class Editor extends Vue {
+  @Inject()
+  private global: any;
   public editor!: CodeMirror.Editor;
   public value!: string;
 
@@ -83,12 +85,30 @@ export default class Editor extends Vue {
     this.editor = CodeMirror.fromTextArea(tagElement, this.config);
 
     this.editor.on('changes', _.throttle(() => {
+      this.generateTaskList();
       this.$emit('valChanged', this.editor.getValue());
     }, 500, {trailing: true, leading: false}));
 
     this.handleValueUpdate(true);
   }
 
+  generateTaskList() {
+    // Get task list for today
+    const data = this.editor.getValue();
+    const regex = /- \[( |x)\] (.+)/gm;
+    let m: any;
+    let completed = false;
+    this.global.taskList.splice(0)
+    while ((m = regex.exec(data)) !== null) {
+      // This is necessary to avoid infinite loops with zero-width matches
+      if (m.index === regex.lastIndex) {
+        regex.lastIndex++;
+      }
+      completed = m[1] === "x";
+      this.global.taskList.push({ completed, name: m[2], index: m['index'] });
+    }
+  }
+
   created() {
     eventHub.$on('focusEditor', this.focus);
   }
@@ -143,6 +163,19 @@ export default class Editor extends Vue {
       this.editor.setCursor(cursor);
     });
   }
+
+  @Watch('global.taskList')
+  onTaskListChanged() {
+    const data = this.editor.getValue();
+    let newData = data
+    this.global.taskList.forEach((task: any) => {
+      let c = task.completed ? 'x' : ' ';
+      newData = newData.substr(0, task.index + 3) + c + newData.substr(task.index + 4);
+    })
+    if (newData !== data) {
+      this.editor.setValue(newData);
+    }
+  }
 }
 </script>
 

client/src/components/Header.vue

@@ -23,16 +23,7 @@
             </b-tooltip>
           </div>
         </div>
-        <div class="level-item alt-button" v-if="sidebar.tasks.length">
-          <b-dropdown aria-role="list">
-            <b-tooltip label="Tasks" position="is-bottom" slot="trigger" role="button">
-              <b-icon icon="tasks"></b-icon>
-            </b-tooltip>
-            <b-dropdown-item custom v-for="task of sidebar.tasks" v-bind:key="task.uuid">
-              <SimpleTask :task="task"></SimpleTask>
-            </b-dropdown-item>
-          </b-dropdown>
-        </div>
+        <Tasks></Tasks>
         <div class="level-item alt-button">
           <div @click="goToSearch()">
             <b-tooltip label="Search notes" position="is-bottom">
@@ -109,11 +100,11 @@ import {NoteService} from '../services/notes';
 
 import {IHeaderOptions} from '../interfaces';
 
-import SimpleTask from './SimpleTask.vue';
+import Tasks from './Tasks.vue';
 
 @Component({
   components: {
-    SimpleTask,
+    Tasks
   },
   props: {
     options: {
@@ -229,4 +220,4 @@ export default class Header extends Vue {
   color: #888;
   cursor: unset;
 }
-</style>
+</style>

client/src/components/TaskItem.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="field">
+    <b-checkbox v-model="task.completed" @input="updateTask">
+      {{ this.task.name }}
+    </b-checkbox>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+import { Inject } from "vue-property-decorator";
+
+import SidebarInst from "../services/sidebar";
+
+@Component({
+  props: {
+    task: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  }
+})
+export default class TaskItem extends Vue {
+  public task: any;
+  public index: any;
+  public sidebar = SidebarInst;
+  public completed: Boolean = false;
+
+  @Inject()
+  public global: any;
+
+  public async updateTask() {
+    this.global.taskList.splice(this.index, 1, this.task);
+  }
+}
+</script>
+
+<style>
+.level-item > .dropdown > .dropdown-menu {
+  width: 300px;
+}
+
+.level-item > .dropdown > .dropdown-menu > .dropdown-content {
+  max-height: 400px;
+  overflow-y: auto;
+}
+</style>

client/src/components/Tasks.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="level-item alt-button">
+    <b-dropdown aria-role="list">
+      <b-tooltip
+        label="Tasks"
+        position="is-bottom"
+        slot="trigger"
+        role="button"
+      >
+        <b-icon icon="tasks"></b-icon>
+      </b-tooltip>
+      <b-dropdown-item
+        custom
+        v-for="(task, idx) in global.taskList"
+        :key="task.index"
+      >
+        <task-item :task="task" :index="idx"></task-item>
+      </b-dropdown-item>
+      <div class="no-tasks" v-if="!global.taskList.length">No tasks found</div>
+    </b-dropdown>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Inject, Watch } from "vue-property-decorator";
+import _ from "lodash";
+
+import TaskItem from "./TaskItem.vue";
+
+@Component({
+  components: { TaskItem }
+})
+export default class Tasks extends Vue {
+  @Inject()
+  public global: any;
+}
+</script>
+
+<style scoped>
+.no-tasks {
+  margin-left: 1em;
+  color: black;
+}
+</style>