- adding Progress %

src/components/todos/SingleTodo/SingleTodo.ts

@@ -27,6 +27,9 @@ export default class SingleTodo extends Vue {
   public sel: boolean = false
   public inEdit: boolean = false
   public precDescr: string = ''
+  public menuProgress: string = 'menuprogress'
+  public percProgress: string = 'percProgress'
+  public colProgress: string = 'blue'
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
@@ -48,10 +51,15 @@ export default class SingleTodo extends Vue {
     this.watchupdate()
   }
 
+
   @Watch('itemtodo.descr') valueChanged5() {
     this.precDescr = this.itemtodo.descr
   }
 
+  @Watch('itemtodo.progress') valueChanged6() {
+    this.updateClasses()
+  }
+
   isTodo() {
     return this.isTodoByElem(this.itemtodo)
   }
@@ -82,6 +90,23 @@ export default class SingleTodo extends Vue {
       this.classExpiringEx += ' status_completed'
     }
 
+    this.menuProgress = 'menuProgress'
+    this.percProgress = 'percProgress'
+
+    let mycolcl = ''
+    if (this.itemtodo.progress < 33) {
+      mycolcl = ' lowperc'
+    } else if (this.itemtodo.progress < 66) {
+      mycolcl = ' medperc'
+    } else {
+      mycolcl = ' highperc'
+    }
+
+    this.colProgress = mycolcl
+
+    this.menuProgress += mycolcl
+    this.percProgress += mycolcl
+
     // if (this.inEdit) {
     //   this.classDescr += ' hide'
     //   this.classDescrEdit += ' show'
@@ -293,4 +318,11 @@ export default class SingleTodo extends Vue {
 
     // this.$q.notify('setPriority: ' + elem)
   }
+
+  getPercentageProgress() {
+    if (this.itemtodo.completed)
+      return 100
+    else
+      return this.itemtodo.progress
+  }
 }