- fix it: Order List Todo

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

quasar.conf.js

@@ -149,6 +149,7 @@ module.exports = function (ctx) {
         'QDatetime',
         'QSlideTransition',
         'QTable',
+        'QContextMenu',
       ],
       directives: [
         'Ripple',

src/components/todos/SingleTodo/SingleTodo.scss

@@ -1,17 +1,29 @@
+
 .flex-item{
-   background-color: #d5e2eb;
+   // background-color: #d5e2eb;
-  padding: 1px;
+  padding: 0px;
-  margin: 1px;
+  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;
+  padding: 1px;
-  border: 1px;
+  border: 0px;
   background-color: #e1ebed;
 }
 
@@ -110,6 +156,11 @@
 }
 
 
-.icon_completed:hover {
+.icon_completed {
-  color: darkgreen;
+  color: rgb(178, 235, 225);
 }
+
+.status_completed {
+  color:rgba(49, 68, 240, 0.7);;
+}
+

src/components/todos/SingleTodo/SingleTodo.ts

@@ -11,21 +11,87 @@ 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
 
+
   @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()
+  }
+
+  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() {
@@ -38,10 +104,12 @@ export default class SingleTodo extends Vue {
   }
 
   updatedata() {
+    console.log('calling this.$emit(eventupdate)')
     this.$emit('eventupdate', this.itemtodo)
   }
 
   updateicon() {
+    console.log('updateicon')
     if (this.itemtodo.completed)
       this.iconCompleted = 'check_circle'
     else
@@ -57,15 +125,15 @@ export default class SingleTodo extends Vue {
 
   }
 
-  created() {
-    this.updateicon()
-
-    this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
 
+  removeitem(id) {
+    this.$emit('deleteitem', id)
   }
 
-  remove(id) {
+  clickMenu(action) {
-    this.$emit('event', id)
+    console.log('click menu: ', action)
+    if (action === rescodes.MenuAction.DELETE)
+      this.removeitem(this.itemtodo.id)
   }
 
   setPriority(newpriority) {
@@ -74,6 +142,8 @@ export default class SingleTodo extends Vue {
 
     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="getClassRow()" @mousedown="clickRiga" @mouseup="mouseUp">
-        <div class="flex-item pos-item">{{ itemtodo.pos }}ª</div>
+        <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">
+        <!--<div class="flex-item btn-item">-->
-            <q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
+        <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->
-        </div>
+        <!--</div>-->
+        <!--<div class="flex-item">-->
+        <!--[{{ itemtodo.id_prev}} - {{ itemtodo.id_next}}]-->
+        <!--</div>-->
     </div>
 
 </template>

src/components/todos/todo/todo.scss

@@ -1,8 +1,8 @@
 .flex-container{
-  background-color: #ccc;
+  background-color: rgb(250, 250, 250);
   padding: 5px;
   display: flex;
-  flex-flow: row nowrap;
+  flex-flow: row;
   justify-content: space-between;
 }
 
@@ -11,3 +11,22 @@
 .mycard {
   visibility: hidden;
 }
+
+.myitemdrag {
+  padding: 2px;
+  margin-top: 4px;
+  border: solid 1px #ccc;
+  transition: all .4s;
+}
+
+.myitemdrag-enter, .myitemdrag-leave-active {
+  opacity: 0;
+}
+
+.drag {
+  background-color: green;
+}
+
+.dragArea {
+  min-height: 10px;
+}

src/components/todos/todo/todo.ts

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Component, Watch } from 'vue-property-decorator'
+import { Component, Prop, Watch } from 'vue-property-decorator'
 
 import { SingleTodo } from '@components'
 import { ITodo } from '@src/model'
@@ -12,6 +12,8 @@ import _ from 'lodash'
 
 import draggable from 'vuedraggable'
 
+import $ from 'jquery'
+
 @Component({
   components: { SingleTodo, draggable }
 })
@@ -21,10 +23,19 @@ export default class Todo extends Vue {
   filter: boolean = false
   title: string = ''
   todo: string = ''
-  todos_arr: any[] = [{}]
+  todos_arr: ITodo[] = []
   drag: boolean = true
   startpos: number = 0
-  endpos: number = 0
+  listPriorityLabel: number[] = []
+  arrPrior: number[] = []
+  prioritySel: number = 0
+  itemDragStart: any = null
+  itemDragEnd: any = null
+  selrowid: number = 0
+
+  $refs: {
+    single: SingleTodo[]
+  }
 
   @Watch('drag') changedrag() {
     console.log('drag = ' + this.drag)
@@ -34,54 +45,163 @@ export default class Todo extends Vue {
     console.log('Change... ' + param)
   }
 
+  getmyid(id) {
+    return 'row' + id
+  }
+
+  getrefbyid(id) {
+    return 'single' + id
+  }
+
+
+  getelem(indelem, arr: ITodo[] = this.todos_arr) {
+    return (indelem >= 0) && (indelem < arr.length) ? arr[indelem] : null
+  }
+
+  getLastElem() {
+    if (this.todos_arr.length > 0)
+      return this.todos_arr[this.todos_arr.length - 1]
+    else
+      return null
+  }
+
+  getFirstelem() {
+    return this.todos_arr[this.todos_arr.length - 1]
+  }
+
   onStart() {
+
     this.startpos = 0
+    this.itemDragStart = null
   }
 
-  getpos(indelem) {
+  async updateLinkedList(init: boolean, arr: ITodo[] = this.todos_arr) {
-    return this.todos_arr[indelem].pos
+
+    console.log('updateLinkedList', this.todos_arr)
+
+    let idprev = -1
+    let idnext = -1
+    let pos = 1
+    if (arr.length > 0) {
+      idprev = arr[0].id_prev
+      idnext = arr[0].id_next
     }
-
+    await arr.forEach((elem, index) => {
-  onEnd(myvar) {
+      if (index === 0) {
-    let oldpos = this.getpos(myvar.oldIndex)
+        idprev = rescodes.LIST_START
-    let newpos = this.getpos(myvar.newIndex)
-
-    console.log('onEnd old = ' + oldpos + ' new = ' + newpos)
-    if (myvar.oldIndex < myvar.newIndex) {
-      // c'è spazio
-      newpos = oldpos - 1
-      if (newpos <= 0)
-        newpos = 1
       } else {
-      newpos = newpos + 1
+        const elemprev = this.getelem(index - 1, arr)
+        idprev = elemprev.id
+      }
+      if (index === arr.length - 1) {
+        idnext = rescodes.LIST_END
+      } else {
+        const elemnext = this.getelem(index + 1, arr)
+        idnext = elemnext.id
       }
 
-    console.log('newpos = ' + newpos)
+      elem.modified = ((elem.id_prev !== idprev) || (elem.id_next !== idnext) || (elem.pos !== pos)) ? true : elem.modified
+      elem.id_prev = idprev
+      elem.id_next = idnext
+      elem.pos = pos
+      if (init) {
+        elem.modified = false
+      }
 
-    if (newpos >= 0) {
+      pos++
-      let myobj = this.todos_arr[myvar.oldIndex]
+
-      console.log('posprec = ' + myobj.pos)
+      this.logelem('updateLinked', elem)
-      myobj.pos = newpos
+
-      this.modify(myobj)
+    })
+  }
+
+  logelem(mystr, elem) {
+    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) {
+    let elem1 = this.getelem(ind1)
+    let elem2 = this.getelem(ind2)
+
+    if ((elem1 !== null) && (elem2 !== null)) {
+      if (elem1.priority === elem2.priority) {
+        return elem1.priority
+      } else {
+        // if different priority then take the first
+        return elem1.priority
+      }
+    } else {
+      return (elem1 != null) ? elem1.priority : ((elem2 != null) ? elem2.priority : null)
+    }
+
+    return -1
+  }
+
+  async onEnd(itemdragend) {
+    console.log('newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
+
+    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)
+    }
+
+    await this.updateLinkedList(false)
+
+    // Updated only elements modified
+    await this.updateModifyRecords(true)
 
   }
+
+  async updateModifyRecords(refresh: boolean = false) {
+    let update = false
+    await this.todos_arr.forEach((elem: ITodo) => {
+      if (elem.modified) {
+        this.modify(elem, false)
+        update = true
+      }
+    })
+
+    if (update)
+      await this.updatetable(refresh)
   }
 
 
   created() {
-    this.loadCat()
+    this.load()
   }
 
-  showlistaTodos(nomelista = '') {
+  setarrPriority() {
-
+    this.arrPrior = []
-    // console.log('todos_arr: ')
+    const arr = rescodes.selectPriority[UserStore.state.lang]
-    this.todos_arr.forEach((todo, key) => {
+    arr.forEach(rec => {
-      console.log('Todo n"' + key + ': ' + todo)
+      this.arrPrior.push(rec.value)
     })
+    console.log('Array PRIOR:', this.arrPrior)
   }
 
-  loadCat() {
+
-    this.updatetable()
+  async load() {
+    for (let todosKey in rescodes.Todos) {
+      this.listPriorityLabel.push(rescodes.Todos[todosKey])
+    }
+    console.log('Priority:' + this.listPriorityLabel)
+    this.setarrPriority()
+    this.clearArr()
+
+    await this.updatetable()
+
+    this.todos_arr.forEach((elem, index) => {
+      this.logelem('LOAD ' + index, elem)
+    })
+
   }
 
   initcat() {
@@ -91,40 +211,50 @@ export default class Todo extends Vue {
     const objtodo: ITodo = {
       userId: UserStore.state.userId,
       descr: '',
-      pos: -1,
       priority: rescodes.Todos.PRIORITY_NORMAL,
       completed: false,
       created_at: new Date(),
       modify_at: new Date(),
-      expiring_at: mydateexp
+      expiring_at: mydateexp,
+      id_prev: 0,
+      id_next: 0,
+      pos: 0,
+      modified: true
     }
     return objtodo
 
   }
 
-  getLastPos() {
+  getPriorityByInd(index) {
-    let max = 0
+    const arr = rescodes.selectPriority[UserStore.state.lang]
-    this.todos_arr.forEach(myobj => {
+    for (let rec of arr) {
-      if (myobj.pos > max)
+      if (rec.value === index)
-        max = myobj.pos
+        return rec.label
-    })
+    }
-
+    return ''
-    return max + 1
-
   }
 
   async insertTodo() {
 
     const objtodo = this.initcat()
 
-    let myid = 0
     objtodo.descr = this.todo
-    objtodo.pos = this.getLastPos()
+    const lastelem = this.getLastList()
+    objtodo.id_prev = (lastelem !== null) ? lastelem.id : rescodes.LIST_START
+    objtodo.id_next = rescodes.LIST_END
+    objtodo.pos = (lastelem !== null) ? lastelem.pos + 1 : 1
+    objtodo.modified = true
 
     // Add to Indexdb
     await this.$db.todos.add(objtodo
-    ).then(() => {
+    ).then((id) => {
-      this.updatetable()
+      console.log('*** IDNEW = ', id)
+      if (lastelem !== null) {
+        lastelem.id_next = id
+        lastelem.modified = true
+        this.modify(lastelem, false)
+      }
+      this.modify(objtodo, true)
     }).catch(err => {
       console.log('Errore: ' + err.message)
     })
@@ -133,37 +263,123 @@ export default class Todo extends Vue {
     this.todo = ''
   }
 
-  getobjbyid(id) {
+  getElemById(id, lista = this.todos_arr) {
-    let myobjtrov = null
+    let myobj: ITodo
-    this.todos_arr.forEach(myobj => {
+    for (myobj of lista) {
-      if (myobj.id === id)
+      if (myobj.id === id) {
-        myobjtrov = myobj
+        return myobj
-    })
+      }
-
-    return myobjtrov
     }
 
-  deleteitem(id) {
+    return null
-    // console.log('deleteitem: KEY = ', id)
+  }
 
-    let myobjtrov = this.getobjbyid(id)
+  async deleteitem(id) {
+    console.log('deleteitem: KEY = ', id)
+
+    let myobjtrov = this.getElemById(id)
 
     if (myobjtrov !== null) {
+      let myobjprev = this.getElemById(myobjtrov.id_prev)
+      let myobjnext = this.getElemById(myobjtrov.id_next)
+
+      if (myobjprev !== null) {
+        myobjprev.id_next = myobjtrov.id_next
+        myobjprev.modified = true
+        this.modify(myobjprev, false)
+      }
+
+      if (myobjnext !== null) {
+        myobjnext.id_prev = myobjtrov.id_prev
+        myobjnext.modified = true
+        this.modify(myobjnext, false)
+      }
+
+      console.log('ENTRATO')
+      const mythis = this
       // Delete item
-      this.$db.todos
+      await this.$db.todos
         .where('id').equals(id)
         .delete()
         .then(() => {
-          this.updatetable()
+          console.log('UpdateTable')
+          mythis.updatetable()
+        }).catch((error) => {
+          console.log('err: ', error)
         })
     }
+
+    console.log('FINE deleteitem')
   }
 
-  async updatetable() {
+  async updatetable(refresh: boolean = false) {
-    await this.filtertodos()
+    await this.filtertodos(refresh)
   }
 
-  async filtertodos() {
+  clearArr() {
+    this.todos_arr = []
+  }
+
+  existArr(x) {
+    return x = (typeof x !== 'undefined' && x instanceof Array) ? x : []
+  }
+
+  getFirstList(arrlist) {
+    let elem: ITodo
+    for (elem of arrlist) {
+      if (elem.id_prev === rescodes.LIST_START) {
+        return elem
+      }
+    }
+    return null
+  }
+
+  getLastList(arrlist = this.todos_arr) {
+    let elem: ITodo
+    for (elem of arrlist) {
+      if (elem.id_next === rescodes.LIST_END) {
+        return elem
+      }
+    }
+    return null
+  }
+
+  setArrayFinale(arrris) {
+
+    // Sort List:
+    let myarr = []
+
+    let current = this.getFirstList(arrris)
+    let currentprec = current
+
+    if (current !== null)
+      myarr.push(current)
+
+    let index = -1
+    while (current !== null && current.id_next !== rescodes.LIST_END && index < arrris.length) {
+      this.logelem('current : ', current)
+      console.log('id_next', current.id_next)
+      // let changed = (prior !== elem.priority) ? true : false
+      current = this.getElemById(current.id_next, arrris)
+      if (current === null)
+        break
+      if (current.id === currentprec.id)
+        break
+      myarr.push(current)
+      currentprec = current
+      this.logelem('current AFTER : ', current)
+      index++
+    }
+
+    return myarr
+
+
+  }
+
+  async filtertodos(refresh: boolean = false) {
+    console.log('filtertodos')
+
+    let arrtemp = []
 
     if (this.filter) {
       // #Todo If need to filter the output database ...
@@ -173,46 +389,124 @@ export default class Todo extends Vue {
         .then((response) => {
           Promise.all(response.map(key => key))
             .then((ristodos) => {
-              this.todos_arr = ristodos
+              arrtemp = ristodos
             })
         })
     } else {
-
       await this.$db.todos
         .where('userId').equals(UserStore.state.userId)
-
         .toArray().then(ristodos => {
-          this.todos_arr = ristodos
+          arrtemp = ristodos
         })
 
-      this.todos_arr = _.orderBy(this.todos_arr, ['completed', 'priority', 'pos'], ['asc', 'desc', 'asc'])
+      arrtemp = _.orderBy(arrtemp, ['completed', 'priority', 'pos'], ['asc', 'desc', 'asc'])
     }
 
-    this.todos_arr.map((item, index) => {
+    this.updateLinkedList(true, arrtemp)
-      item.pos = (index * 2) + 1
+
-    })
+    // set array
+    // arrtemp = this.setArrayFinale(arrtemp)
+
+    this.todos_arr = [...arrtemp]  // make copy
+
+
     return []
   }
 
+  sortarr(arr, field) {
+
+    return arr.slice().sort(function(a, b) {
+      return a[field] - b[field]
+    })
+
+    // let ind1 = -1
+    // let val1 = -1
+    // for (let x = 0; x <= arr.length; x++) {
+    //   if (x[field] < ind1) {
+    //     val11 = x[field]
+    //     ind1 = x
+    //   }
+    //   for (let y: ITodo = null of arr) {
+    //
+    //   }
+    // }
+  }
+
   updateitem(myobj) {
     console.log('updateitem')
-    this.modify(myobj)
+    this.modify(myobj, true)
+  }
+
+  // inactiveAllButtons() {
+  //   let divs = this.$children.filter(function (child) {
+  //     return child.$attrs['component-type'] === 'my-custom-button'
+  //   })
+  //   divs.forEach(i => {
+  //     divs[i].isActive = false
+  //   })
+  // }
+  //
+
+  clickRiga(item) {
+    console.log('ClickRiga : ', item)
+
+    for (let i = 0; i < this.$refs.single.length; i++) {
+      // @ts-ignore
+      this.$refs.single[i].classRow = ''
+    }
+
+    // // Disattiva quella precedente
+    // if (this.selrowid > 0) {
+    //   $('#' + this.getrefbyid(this.selrowid) + ' div').removeClass('rowselected')
+    // }
+    //
+    if (this.selrowid !== item.id) {
+      this.selrowid = item.id
+    } else {
+      // was already selected, so deselected
+      this.selrowid = -1
+    }
+  }
+
+  // updateRow(rec: ITodo) {
+  //   let index = -1
+  //   // get index
+  //   this.$refs.single.forEach( (singletodo: SingleTodo) => {
+  //     if (singletodo.itemtodo.id === rec.id)
+  //       index = -1
+  //   })
+  //
+  // }
+
+  modifyField(recOut, recIn, field) {
+    if (recOut[field] !== recIn[field]) {
+      recOut.modified = true
+      recOut[field] = recIn[field]
+    }
   }
 
 
-  async modify(myobj) {
+  async modify(myobj: ITodo, update: boolean) {
     await this.$db.transaction('rw', [this.$db.todos], async () => {
       const miorec = await this.$db.todos.get(myobj.id)
 
+      this.modifyField(miorec, myobj, 'completed')
+      this.modifyField(miorec, myobj, 'expiring_at')
+      this.modifyField(miorec, myobj, 'priority')
+      this.modifyField(miorec, myobj, 'id_prev')
+      this.modifyField(miorec, myobj, 'id_next')
+      this.modifyField(miorec, myobj, 'pos')
+
+      if (miorec.modified) {
         miorec.modify_at = new Date()
-      miorec.completed = myobj.completed
+
-      miorec.expiring_at = myobj.expiring_at
+        this.logelem('modify', miorec)
-      miorec.priority = myobj.priority
-      miorec.pos = myobj.pos
 
         await this.$db.todos.put(miorec)
 
-      this.updatetable()
+        if (update)
+          await this.updatetable(false)
+      }
     })
 
   }

src/components/todos/todo/todo.vue

@@ -8,17 +8,27 @@
                      v-on:keyup.enter="insertTodo"/>
 
 
+            <div style="display: none">{{ prior = 0 }}</div>
+            <div class="drag">
                 <div class="flex-container">
-                <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}" @start="onStart" @end="onEnd">
+                    <draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"
+                               @start="onStart" @end="onEnd" class="dragArea">
                         <transition-group>
-                        <SingleTodo @event="deleteitem" @eventupdate="updateitem" :itemtodo='mytodo'
+                            <div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">
-                                    v-for="mytodo of todos_arr" :key="mytodo.id" class="myitemdrag">
+
-                        </SingleTodo>
+                                <div v-if="prior !== mytodo.priority">
+                                    <label>{{getPriorityByInd(mytodo.priority)}}</label>
+                                </div>
+                                <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
+                                            @click="clickRiga"
+                                            :itemtodo='mytodo' />
+
+                                <div style="display: none">{{ prior = mytodo.priority }}</div>
+                            </div>
                         </transition-group>
                     </draggable>
                 </div>
-
+            </div>
-            <!--<div v-for="element in todos_arr" :key="element.id">{{element.descr}}</div>-->
 
         </div>
     </q-page>

src/model/Todos.ts

@@ -1,13 +1,16 @@
 export interface ITodo {
   id?: number,
   userId: string
-  pos: number,
   descr?: string,
   priority: number,
   completed: boolean,
   created_at: any,
   modify_at: any,
-  expiring_at: any
+  expiring_at: any,
+  id_prev?: number,
+  id_next?: number,
+  modified?: boolean,
+  pos?: number
 }
 
 export interface ITodosState {

src/statics/freeplanet-logo-full.svg

@@ -452,31 +452,31 @@
        style="fill:none;stroke:#ffffff;stroke-miterlimit:1;stroke-opacity:0" />
   </g>
     <!-- SUN -->
-    <animate xlink:href="#sun" attributeName="r" from="3.6" to="4.1" dur="5s" begin="2s" fill="freeze" />
+    <animate xlink:href="#sun" attributeName="r" from="3.6" to="4.1" dur="3s" begin="2s" fill="freeze" />
-    <animate xlink:href="#sun"  attributeName="r"  from="4.1" to="3.6" dur="5s" begin="7s" fill="freeze" />
+    <animate xlink:href="#sun"  attributeName="r"  from="4.1" to="3.6" dur="3s" begin="3s" fill="freeze" />
-    <animate xlink:href="#sun"  attributeName="r"  from="3.6" to="3.1" dur="5s" begin="12s" fill="freeze" />
+    <animate xlink:href="#sun"  attributeName="r"  from="3.6" to="3.1" dur="3s" begin="10s" fill="freeze" />
-    <animate xlink:href="#sun"  attributeName="r"  from="3.1" to="3.6" dur="5s" begin="17s" fill="freeze" />
+    <animate xlink:href="#sun"  attributeName="r"  from="3.1" to="3.6" dur="3s" begin="15s" fill="freeze" />
 
     <!-- MOON -->
-    <animate xlink:href="#moon" attributeName="r" from="3.6" to="3.1" dur="5s" begin="2s" fill="freeze" />
+    <animate xlink:href="#moon" attributeName="r" from="3.6" to="3.1" dur="3s" begin="2s" fill="freeze" />
-    <animate xlink:href="#moon"  attributeName="r"  from="3.1" to="3.6" dur="5s" begin="7s" fill="freeze" />
+    <animate xlink:href="#moon"  attributeName="r"  from="3.1" to="3.6" dur="3s" begin="3s" fill="freeze" />
-    <animate xlink:href="#moon"  attributeName="r"  from="3.6" to="4.1" dur="5s" begin="12s" fill="freeze" />
+    <animate xlink:href="#moon"  attributeName="r"  from="3.6" to="4.1" dur="3s" begin="10s" fill="freeze" />
-    <animate xlink:href="#moon"  attributeName="r"  from="4.1" to="3.6" dur="5s" begin="17s" fill="freeze" />
+    <animate xlink:href="#moon"  attributeName="r"  from="4.1" to="3.6" dur="3s" begin="15s" fill="freeze" />
 
 
-    <animateMotion id="anim1" xlink:href="#sun" dur="20s" begin="2s" fill="freeze">
+    <animateMotion id="anim1" xlink:href="#sun" dur="15s" begin="2s" fill="freeze">
         <mpath xlink:href="#motionPathSun"/>
     </animateMotion>
 
-    <animateMotion id="anim2" xlink:href="#moon" dur="20s" begin="2s" fill="freeze">
+    <animateMotion id="anim2" xlink:href="#moon" dur="15s" begin="2s" fill="freeze">
         <mpath xlink:href="#motionPathMoon"/>
     </animateMotion>
 
-    <animateMotion id="anim3" xlink:href="#sunrays" dur="20s" begin="2s" fill="freeze">
+    <animateMotion id="anim3" xlink:href="#sunrays" dur="15s" begin="2s" fill="freeze">
         <mpath xlink:href="#motionPathSun"/>
     </animateMotion>
 
-    <animateMotion id="anim4" xlink:href="#moonlight" dur="20s" begin="2s" fill="freeze">
+    <animateMotion id="anim4" xlink:href="#moonlight" dur="15s" begin="2s" fill="freeze">
         <mpath xlink:href="#motionPathMoon"/>
     </animateMotion>
 </svg>

src/store/Modules/rescodes.ts

@@ -5,6 +5,9 @@ export const rescodes = {
   DUPLICATE_EMAIL_ID: 11000,
   DUPLICATE_USERNAME_ID: 11100,
 
+  LIST_END: 10000000,
+  LIST_START: 0,
+
   localStorage: {
     verifiedEmail: 'vf',
     isLogged: 'ilog',
@@ -16,9 +19,13 @@ export const rescodes = {
   },
 
   Todos: {
-    PRIORITY_NORMAL: 0,
+    PRIORITY_HIGH: 2,
-    PRIORITY_HIGH: 1,
+    PRIORITY_NORMAL: 1,
-    PRIORITY_LOW: -1
+    PRIORITY_LOW: 0
+  },
+
+  MenuAction: {
+    DELETE: 100
   },
 
 
@@ -27,41 +34,72 @@ export const rescodes = {
       {
         id: 1,
         label: 'Alta',
-        value: 1,
+        value: 2,
         icon: 'expand_less'
       },
       {
         id: 2,
         label: 'Normale',
-        value: 0,
+        value: 1,
         icon: 'remove'
       },
       {
         id: 3,
         label: 'Bassa',
-        value: -1,
+        value: 0,
         icon: 'expand_more'
       }],
     'enUk': [
       {
         id: 1,
         label: 'High',
-        value: 1,
+        value: 2,
         icon: 'expand_less'
       },
       {
         id: 2,
         label: 'Normal',
-        value: 0,
+        value: 1,
         icon: 'remove'
       },
       {
         id: 3,
         label: 'Low',
-        value: -1,
+        value: 0,
         icon: 'expand_more'
       }]
 
+  },
+
+  menuPopupTodo: {
+    'it': [
+      {
+        id: 1,
+        label: 'Cancella',
+        value: 100, // DELETE
+        icon: 'delete'
+      },
+      {
+        id: 2,
+        label: 'Attiva...',
+        value: 101, // ATTIVA
+        icon: 'expand_more'
+      }
+      ],
+    'enUk': [
+      {
+        id: 1,
+        label: 'Delete',
+        value: 100, // DELETE
+        icon: 'trash'
+      },
+      {
+        id: 2,
+        label: 'Attiva...',
+        value: 101, // ATTIVA
+        icon: 'sun'
+      }
+      ]
   }