- fix it: Order List Todo

- Split Todo List by Priority and by Completed
- Animation drag

src/components/todos/SingleTodo/SingleTodo.ts

@@ -11,24 +11,90 @@ import { ITodo } from '../../../model/index'
 })
 export default class SingleTodo extends Vue {
   public selectPriority: [] = []
+  public menuPopupTodo: [] = []
   public iconCompleted: string = ''
+  public classCompleted: string = ''
+  public classDescr: string = ''
+  public classExpiring: string = ''
+  public classExpiringEx: string = ''
   public iconPriority: string = ''
   public popover: boolean = false
+  public popover_menu: boolean = false
+  public classRow: string = ''
+  public sel: boolean = false
   $q: any
 
-  @Prop({required: true}) itemtodo: ITodo
+  @Prop({ required: true }) itemtodo: ITodo
+
 
   @Watch('itemtodo.completed') valueChanged() {
     this.$emit('eventupdate', this.itemtodo)
+    this.updateicon()
   }
+
   @Watch('itemtodo.expiring_at') valueChanged2() {
     this.$emit('eventupdate', this.itemtodo)
   }
+
   @Watch('itemtodo.priority') valueChanged3() {
     this.$emit('eventupdate', this.itemtodo)
+    this.updateicon()
   }
 
-  setCompleted () {
+  updateClasses() {
+    this.classCompleted = 'priority-item-popover'
+    this.classDescr = 'flex-item div_descr'
+    this.classExpiring = 'flex-item data-item'
+    this.classExpiringEx = ''
+    if (this.itemtodo.completed) {
+      this.classCompleted += ' icon_completed'
+      this.classDescr += ' status_completed'
+      this.classExpiring += ' status_completed'
+      this.classExpiringEx += ' status_completed'
+    }
+
+  }
+
+  created() {
+    this.updateicon()
+
+    this.updateClasses()
+
+    this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
+    this.menuPopupTodo = rescodes.menuPopupTodo[UserStore.state.lang]
+
+
+  }
+
+  getClassRow() {
+    return 'row flex-container2 ' + this.classRow
+  }
+
+  clickRiga () {
+    this.sel = false
+    if (this.classRow !== 'rowselected') {
+      this.sel = true
+    } else {
+      this.sel = false
+    }
+    this.$emit('click', this.itemtodo)
+
+    this.classRow = 'rowselected'
+
+    this.updateClasses()
+  }
+
+  mouseUp() {
+
+    if (this.sel) {
+      this.classRow = 'rowselected'
+    } else {
+      this.classRow = ''
+    }
+
+  }
+
+  setCompleted() {
     // console.log('setCompleted')
     this.itemtodo.completed = !this.itemtodo.completed
 
@@ -38,10 +104,12 @@ export default class SingleTodo extends Vue {
   }
 
   updatedata() {
+    console.log('calling this.$emit(eventupdate)')
     this.$emit('eventupdate', this.itemtodo)
   }
 
-  updateicon () {
+  updateicon() {
+    console.log('updateicon')
     if (this.itemtodo.completed)
       this.iconCompleted = 'check_circle'
     else
@@ -57,23 +125,25 @@ export default class SingleTodo extends Vue {
 
   }
 
-  created() {
-    this.updateicon()
-
-    this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
 
+  removeitem(id) {
+    this.$emit('deleteitem', id)
   }
 
-  remove(id) {
-    this.$emit('event', id)
+  clickMenu(action) {
+    console.log('click menu: ', action)
+    if (action === rescodes.MenuAction.DELETE)
+      this.removeitem(this.itemtodo.id)
   }
 
-  setPriority (newpriority) {
+  setPriority(newpriority) {
 
     this.itemtodo.priority = newpriority
 
     this.updatedata()
 
+    this.updateicon()
+
     // this.$q.notify('setPriority: ' + elem)
   }
 }