WIP

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,32 @@ 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 = /\s+?- \[( |x)\] (.+)/gm;
+    let m;
+    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'] });
+    }
+    console.log(this.global.taskList);
+    this.global.taskTrigger += 1;
+  }
+
   created() {
     eventHub.$on('focusEditor', this.focus);
   }

client/src/components/TaskItem.vue

@@ -16,9 +16,9 @@ import SidebarInst from "../services/sidebar";
   props: {
     task: {
       type: Object,
-      required: true,
-    },
-  },
+      required: true
+    }
+  }
 })
 export default class TaskItem extends Vue {
   public task: any;

client/src/components/Tasks.vue

@@ -9,32 +9,26 @@
       >
         <b-icon icon="tasks"></b-icon>
       </b-tooltip>
-      <b-dropdown-item custom v-for="task of tasks" v-bind:key="task.uuid">
+      <b-dropdown-item custom v-for="task in global.taskList" :key="task.index">
         <task-item :task="task"></task-item>
       </b-dropdown-item>
-      <div class="no-tasks" v-if="!tasks.length">No tasks found</div>
+      <div class="no-tasks" v-if="!global.taskList.length">No tasks found</div>
     </b-dropdown>
   </div>
 </template>
 
 <script lang="ts">
-import Vue from "vue";
-import Component from "vue-class-component";
+import { Vue, Component, Inject, Watch } from "vue-property-decorator";
 import _ from "lodash";
 
 import TaskItem from "./TaskItem.vue";
 
 @Component({
-  components: { TaskItem },
-  props: {
-    tasks: {
-      type: Array,
-      required: true,
-    },
-  },
+  components: { TaskItem }
 })
 export default class Tasks extends Vue {
-  public tasks: Array<object> = [];
+  @Inject()
+  public global: any;
 }
 </script>
 

client/src/views/Day.vue

@@ -240,22 +240,6 @@ export default class Day extends Vue {
       this.title = this.headerOptions.title;
       this.headerOptions.saveDisabled = true;
     }
-
-    // Get task list for today
-    const regex = /\s+?- \[( |x)\] (.+)/gm;
-    let m;
-    let completed = false;
-    this.tasks = [];
-    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.tasks.push({ completed, name: m[2] });
-    }
-    console.log(this.tasks);
   }
 
   public autoSaveThrottle = _.debounce(() => this.saveDay(), 3000, {