- fix it: Order List Todo

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

src/components/todos/SingleTodo/SingleTodo.scss

@@ -1,17 +1,29 @@
+
 .flex-item{
-   background-color: #d5e2eb;
-  padding: 1px;
-  margin: 1px;
+   // background-color: #d5e2eb;
+  padding: 0px;
+  margin: 0px;
   color: #000;
   font-size: 0.85rem;
   flex: 1 1 auto;
 }
 
+
 .flex-container2 {
-  flex-flow: row nowrap;
+  flex-flow: row;
   justify-content: space-between;
 }
 
+.flex-container2:hover {
+  background-color: rgba(240, 240, 240, 0.7);
+}
+
+.rowselected {
+  border: 1px solid rgba(255, 0, 0, 0.5);
+  background-color: rgba(49, 68, 240, 0.7) !important;
+}
+
+
 .btn-item {
   max-width: 24px;
 }
@@ -24,12 +36,38 @@
   height: 36px;
   line-height: 36px;
   text-align: center;
+  // background-color: #ff4081;
+  font-size: 0.75rem;
+}
+
+.todo-menu {
+
+}
+
+.pos-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  height: 100%;
+  color: #555;
+}
+
+
+.pos-item:hover {
+  cursor: pointer;
 }
 
 .priority-item-popover {
   max-width: 24px;
   min-width: 24px;
   padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  height: 100%
 }
 
 .priority-item {
@@ -55,6 +93,7 @@
   visibility: initial;
 }
 
+/*
 @media screen and (max-width: 600px) {
   .data-item {
     display: none;
@@ -62,21 +101,28 @@
     content: "";
   }
 }
-
+*/
 
 .div_descr {
   // background-color: green;
+  margin: 2px;
+  padding: 2px;
   flex: 2 1 auto;
 }
 
+.div_descr:hover {
+  border: 1px solid rgba(125, 255, 125, 0.5);
+  padding: 1px;
+}
+
 
 .appsingletodo {
   color: black;
   font-size: 1.0rem;
   // display: flex;
   margin: 1px;
-  padding: 2px;
-  border: 1px;
+  padding: 1px;
+  border: 0px;
   background-color: #e1ebed;
 }
 
@@ -110,6 +156,11 @@
 }
 
 
-.icon_completed:hover {
-  color: darkgreen;
+.icon_completed {
+  color: rgb(178, 235, 225);
 }
+
+.status_completed {
+  color:rgba(49, 68, 240, 0.7);;
+}
+

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)
   }
 }

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,6 +1,29 @@
 <template>
-    <div class="row flex-container2">
-        <div class="flex-item pos-item">{{ itemtodo.pos }}ª</div>
+    <div :class="getClassRow()" @mousedown="clickRiga" @mouseup="mouseUp">
+        <div class="flex-item pos-item">
+            <q-btn flat
+                   class="pos-item-popover"
+                   icon="menu"
+            >
+                <q-popover
+                        v-model="popover_menu"
+                        self="top left">
+                    <q-context-menu>
+                        <q-list link separator no-border class="todo-menu">
+                            <q-item v-for="field in menuPopupTodo" :key="field.value"
+                                    v-close-overlay
+                                    @click.native="clickMenu(field.value), popover_menu = false">
+                                <q-item-side :icon="field.icon"/>
+                                <q-item-main>
+                                    <q-item-tile label>{{field.label}}</q-item-tile>
+                                </q-item-main>
+                            </q-item>
+                        </q-list>
+                    </q-context-menu>
+                </q-popover>
+            </q-btn>
+        </div>
+        <!--<div class="flex-item pos-item">[{{ itemtodo.pos }}]</div>-->
         <div class="flex-item priority-item">
             <q-btn push
                    class="priority-item-popover"
@@ -24,25 +47,29 @@
         </div>
         <div class="flex-item completed-item">
             <q-btn push
-                   class="priority-item-popover"
+                   :class="classCompleted"
                    :icon="iconCompleted"
                    @click.native="setCompleted">
             </q-btn>
             <!--<q-icon class=" mycols allleft icon_completed ScheduleStatus" :name="iconCompleted"
                     @click.native="setCompleted"/>-->
         </div>
-        <div class="flex-item div_descr">
+        <div :class="classDescr">
             {{ itemtodo.descr }}
         </div>
 
-        <div class="flex-item data-item">
+        <div :class="classExpiring">
             <q-datetime
+                    :class="classExpiringEx"
                     v-model="itemtodo.expiring_at"
                     class="myexpired"/>
         </div>
-        <div class="flex-item btn-item">
-            <q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
-        </div>
+        <!--<div class="flex-item btn-item">-->
+        <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->
+        <!--</div>-->
+        <!--<div class="flex-item">-->
+        <!--[{{ itemtodo.id_prev}} - {{ itemtodo.id_next}}]-->
+        <!--</div>-->
     </div>
 
 </template>