- Settings label priority as Title

- If drag down, the task become completed

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,24 +133,67 @@ 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)
-    if (newpriority != null && newpriority >= 0) {
-      myobj.modified = (myobj.priority !== newpriority) ? true : myobj.modified
-      myobj.priority = newpriority
-      console.log('NewPriority: ', newpriority)
+
+    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>