- Settings label priority as Title

- If drag down, the task become completed

src/components/todos/SingleTodo/SingleTodo.scss

@@ -14,13 +14,22 @@
   justify-content: space-between;
 }
 
-.flex-container2:hover {
+// Set visibility: visible to the icon menu of pos-item-popover
-  background-color: rgba(240, 240, 240, 0.7);
+.flex-container2:hover .pos-item-popover, .flex-container2:hover .priority-item-popover{
+//.flex-container2:hover .pos-item-popover {
+  background-color: rgba(230, 230, 230, 0.8);
+  display: inline-block;
+}
+
+.flex-container2:hover{
+  background-color: rgba(230, 230, 230, 0.8);
 }
 
 .rowselected {
-  border: 1px solid rgba(255, 0, 0, 0.5);
+  border-width: 1px 0px 1px 0px;
-  background-color: rgba(49, 68, 240, 0.7) !important;
+  border-style: solid;
+  border-color: rgba(49, 68, 240, 0.6);
+  //background-color: rgba(166, 153, 240, 0.7) !important;
 }
 
 
@@ -44,15 +53,17 @@
 
 }
 
-.pos-item-popover {
+
+.pos-item-popover{
   max-width: 24px;
   min-width: 24px;
   padding: 0px;
   text-align: center;
   vertical-align: middle;
-  display: inline-block;
+  display: none;
+  color: #777;
   height: 100%;
-  color: #555;
+  //visibility: hidden;
 }
 
 
@@ -61,13 +72,25 @@
 }
 
 .priority-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: none;
+  height: 100%;
+  color: #777;
+}
+
+.completed-item-popover {
   max-width: 24px;
   min-width: 24px;
   padding: 0px;
   text-align: center;
   vertical-align: middle;
   display: inline-block;
-  height: 100%
+  height: 100%;
+  color: #777;
 }
 
 .priority-item {
@@ -75,10 +98,8 @@
   min-width: 24px;
 }
 
-.completed-item {
+
-  max-width: 24px;
+
-  min-width: 24px;
-}
 
 .myexpired {
   padding-top: 0px;
@@ -111,7 +132,8 @@
 }
 
 .div_descr:hover {
-  border: 1px solid rgba(125, 255, 125, 0.5);
+  border-width: 1px 0px 1px 0px;
+  border-color: rgba(125, 255, 125, 0.5);
   padding: 1px;
 }
 

src/components/todos/SingleTodo/SingleTodo.ts

@@ -22,6 +22,8 @@ export default class SingleTodo extends Vue {
   public popover_menu: boolean = false
   public classRow: string = ''
   public sel: boolean = false
+  public isover: boolean = false
+  public classPosItemPopup = 'pos-item-popover'
   $q: any
 
   @Prop({ required: true }) itemtodo: ITodo
@@ -42,7 +44,9 @@ export default class SingleTodo extends Vue {
   }
 
   updateClasses() {
-    this.classCompleted = 'priority-item-popover'
+    // this.classCompleted = 'completed-item'
+    this.classCompleted = 'completed-item-popover'
+
     this.classDescr = 'flex-item div_descr'
     this.classExpiring = 'flex-item data-item'
     this.classExpiringEx = ''
@@ -66,6 +70,14 @@ export default class SingleTodo extends Vue {
 
   }
 
+  setclassPosItemPopup() {
+
+    if (this.isover)
+      this.classPosItemPopup = 'pos-item-popover'
+    else
+      this.classPosItemPopup = 'pos-item-popover'
+  }
+
   getClassRow() {
     return 'row flex-container2 ' + this.classRow
   }

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,13 +1,5 @@
 <template>
-    <div :class="getClassRow()" @mousedown="clickRiga" @mouseup="mouseUp">
+    <div :class="getClassRow()" @mousedown="clickRiga" @mouseup.left="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"
@@ -20,12 +12,30 @@
                 </q-item>
             </q-list>
         </q-context-menu>
+        <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-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-popover>
             </q-btn>
         </div>
         <!--<div class="flex-item pos-item">[{{ itemtodo.pos }}]</div>-->
         <div class="flex-item priority-item">
-            <q-btn push
+            <q-btn push flat
                    class="priority-item-popover"
                    :icon="iconPriority">
                 <q-popover
@@ -46,7 +56,7 @@
             </q-btn>
         </div>
         <div class="flex-item completed-item">
-            <q-btn push
+            <q-btn push flat
                    :class="classCompleted"
                    :icon="iconCompleted"
                    @click.native="setCompleted">
@@ -64,6 +74,9 @@
                     v-model="itemtodo.expiring_at"
                     class="myexpired"/>
         </div>
+        <!--<div class="flex-item btn-item">-->
+            <!--{{classPosItemPopup}}-->
+        <!--</div>-->
         <!--<div class="flex-item btn-item">-->
         <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->
         <!--</div>-->

src/components/todos/todo/todo.scss

@@ -15,10 +15,38 @@
 .myitemdrag {
   padding: 2px;
   margin-top: 4px;
-  border: solid 1px #ccc;
+  border-width: 1px 0px 0px 0px;
+  //border: solid 1px #ccc;
+  border-style: solid;
+  border-color: #ccc;
   transition: all .4s;
 }
 
+.titlePriority, .titleCompleted{
+  border-width: 0px 0px 1px 0px;
+  border-style: solid;
+  border-color: #ccc;
+  color:white;
+}
+
+.titleCompleted {
+  background-color: #ccc;
+}
+
+.high_priority {
+  background-color: #4caf50;
+}
+
+.medium_priority {
+  background-color: #3846af;
+}
+
+.low_priority {
+  background-color: #af2218;
+}
+
+
+
 .myitemdrag-enter, .myitemdrag-leave-active {
   opacity: 0;
 }

src/components/todos/todo/todo.ts

@@ -119,7 +119,7 @@ export default class Todo extends Vue {
     console.log(mystr, 'elem [', elem.id, '] ', elem.descr, ' Pr(', this.getPriorityByInd(elem.priority), ') [', elem.id_prev, '-', elem.id_next, '] modif=', elem.modified)
   }
 
-  haveSamePriority(ind1, ind2) {
+  getPriorityToSet(ind1, ind2) {
     let elem1 = this.getelem(ind1)
     let elem2 = this.getelem(ind2)
 
@@ -133,25 +133,68 @@ export default class Todo extends Vue {
     } else {
       return (elem1 != null) ? elem1.priority : ((elem2 != null) ? elem2.priority : null)
     }
+  }
 
-    return -1
+  getCompleted(ind1, ind2) {
+    let elem1 = this.getelem(ind1)
+    let elem2 = this.getelem(ind2)
+
+    if ((elem1 !== null) && (elem2 !== null)) {
+      if (elem1.completed === elem2.completed) {
+        return true
+      } else {
+        return elem1.completed
+      }
+    } else {
+      return (elem1 != null) ? elem1.completed : ((elem2 != null) ? elem2.completed : null)
+    }
+
+  }
+
+  getTitlePriority (priority) {
+    let cl = ''
+
+    if (priority === rescodes.Todos.PRIORITY_HIGH)
+      cl = 'high_priority'
+    else if (priority === rescodes.Todos.PRIORITY_NORMAL)
+      cl = 'medium_priority'
+    else if (priority === rescodes.Todos.PRIORITY_LOW)
+      cl = 'low_priority'
+
+    return cl + ' titlePriority'
   }
 
   async onEnd(itemdragend) {
     console.log('newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
 
+    if (itemdragend.newIndex === itemdragend.oldIndex)
+      return // If nothing change, exit
+
     let myobj = this.getelem(itemdragend.newIndex)
 
     const indini = itemdragend.newIndex - 1
     const indfine = itemdragend.newIndex + 1
     console.log('indini', indini, 'indfine', indfine)
     // If the newIndex is between another priority, then change priority
-    let newpriority = this.haveSamePriority(indini, indfine)
+
+    let completed = this.getCompleted(indini, indfine)
+    let changecompleted = false
+    if (completed) {
+      myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
+      myobj.completed = completed
+      changecompleted = true
+      console.log('Newcompleted: ', completed)
+    }
+
+    if (!changecompleted) {
+      // if I changed the completed, I don't have to put in other list priority
+      let newpriority = this.getPriorityToSet(indini, indfine)
       if (newpriority != null && newpriority >= 0) {
         myobj.modified = (myobj.priority !== newpriority) ? true : myobj.modified
         myobj.priority = newpriority
         console.log('NewPriority: ', newpriority)
       }
+    }
 
     await this.updateLinkedList(false)
 

src/components/todos/todo/todo.vue

@@ -8,7 +8,7 @@
                      v-on:keyup.enter="insertTodo"/>
 
 
-            <div style="display: none">{{ prior = 0 }}</div>
+            <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
             <div class="drag">
                 <div class="flex-container">
                     <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
@@ -16,14 +16,18 @@
                         <transition-group>
                             <div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">
 
-                                <div v-if="prior !== mytodo.priority">
+                                <div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(mytodo.priority)">
                                     <label>{{getPriorityByInd(mytodo.priority)}}</label>
                                 </div>
+                                <div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
+                                    <label>{{$t('todo.completed')}}</label>
+                                    <div style="display: none">{{ priorcomplet = true }}</div>
+                                </div>
                                 <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
                                             @click="clickRiga"
                                             :itemtodo='mytodo' />
 
-                                <div style="display: none">{{ prior = mytodo.priority }}</div>
+                                <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
                             </div>
                         </transition-group>
                     </draggable>

src/i18n.js

@@ -84,6 +84,9 @@ const messages = {
         undefined: 'non definito'
       }
     },
+    todo: {
+      completed: 'Completati'
+    }
   },
   enUk: {
     comp:{
@@ -170,6 +173,9 @@ const messages = {
         undefined: 'undefined'
       }
     },
+    todo: {
+      completed: 'Completed'
+    }
   },
 };