fix: DRAG Only possible with Button component or in edit description component.

src/components/todos/SingleTodo/SingleTodo.ts

@@ -94,7 +94,7 @@ export default class SingleTodo extends Vue {
   updateClasses() {
     // this.classCompleted = 'completed-item'
     this.classCompleted = 'completed-item-popover'
-    this.classDescr = 'flex-item div_descr show'
+    this.classDescr = 'flex-item div_descr show donotdrag'
     this.classDescrEdit = 'flex-item div_descr_edit'
     if (!this.isTodo()) {
       this.classDescr += ' titleLista-item'

src/components/todos/SingleTodo/SingleTodo.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="getClassRow()" @click="clickRow">
-        <div v-if="isTodo()" class="flex-item counter-item">{{itemtodo.pos}}</div>
+        <div v-if="isTodo()" class="flex-item counter-item dragula-container">{{itemtodo.pos}}</div>
         <!--<div v-if="isFirst">-->
             <!--<q-context-menu ref="contextMenu">-->
                 <!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->

src/components/todos/todo/todo.ts

@@ -32,7 +32,8 @@ export default class Todo extends Vue {
 
   filter: boolean = false
   title: string = ''
-  todo: string = ''
+  todotop: string = ''
+  todobottom: string = ''
   todos_arr: ITodo[] = []
   prevRecords: ITodo[] = []
   drag: boolean = true
@@ -50,6 +51,7 @@ export default class Todo extends Vue {
   public dragging: number
   public itemdrag: any = {}
   public service: any
+  public actualMaxPosition: number = 15
 
   fieldtochange: String [] = ['descr', 'completed', 'category', 'expiring_at', 'priority', 'id_prev', 'id_next', 'pos', 'enableExpiring', 'progress']
 
@@ -84,10 +86,12 @@ export default class Todo extends Vue {
     })
   }
 
+  // Computed:
   get todos_changed() {
     return Todos.state.todos_changed
   }
 
+  // Computed:
   get reload_fromServer() {
     return Todos.state.reload_fromServer
   }
@@ -96,6 +100,11 @@ export default class Todo extends Vue {
     Todos.state.reload_fromServer = value
   }
 
+  // Computed:
+  get showingDataTodo() {
+    return this.todos_arr.slice(0, this.actualMaxPosition)
+  }
+
 
   @Watch('todos_changed', { immediate: true, deep: true })
   changetodos_changed(value: number, oldValue: number) {
@@ -195,9 +204,6 @@ export default class Todo extends Vue {
       return null
   }
 
-  getFirstelem() {
-    return this.todos_arr[this.todos_arr.length - 1]
-  }
 
   onStart() {
 
@@ -306,12 +312,12 @@ export default class Todo extends Vue {
   async onEnd(itemdragend) {
     console.log('3) newindex=', itemdragend.newIndex, 'oldindex=', itemdragend.oldIndex)
 
-    // MOVE
-    this.todos_arr.splice(itemdragend.newIndex, 0, this.todos_arr.splice(itemdragend.oldIndex, 1)[0])
-
     if (itemdragend.newIndex === itemdragend.oldIndex)
       return // If nothing change, exit
 
+    // MOVE
+    this.todos_arr.splice(itemdragend.newIndex, 0, this.todos_arr.splice(itemdragend.oldIndex, 1)[0])
+
     let myobj = this.getelem(itemdragend.newIndex)
 
     const indini = itemdragend.newIndex - 1
@@ -385,17 +391,38 @@ export default class Todo extends Vue {
 
   created() {
     const $service = this.$dragula.$service
-    $service.options('todos_arr', { direction: 'vertical' })
+    $service.options('first',
+      {
+        isContainer: function (el) {
+          return el.classList.contains('dragula-container')
+        },
+        moves: function (el, source, handle, sibling) {
+          console.log('moves')
+          return !el.classList.contains('donotdrag') // elements are always draggable by default
+        },
+        accepts: function (el, target, source, sibling) {
+          // console.log('accepts dragging '+ el.id + ' from ' + source.id + ' to ' + target.id)
+          return true // elements can be dropped in any of the `containers` by default
+        },
+        invalid: function (el, handle) {
+          console.log('invalid')
+          return el.classList.contains('donotdrag') // don't prevent any drags from initiating by default
+        },
+        direction: 'vertical'
+      })
     $service.eventBus.$on('dragend', (args) => {
 
+      // this.dragula = Dragula(containers, {
+      //   moves: function (el, container, handle) {
+      //     return handle.classList.contains('handle')
+      //   }
+      // })
+
+
       let itemdragend = {
         newIndex: this.getElementIndex(args.el),
         oldIndex: this.getElementOldIndex(args.el)
       }
-      // console.log('args', args)
-
-      // console.log('newIndex', itemdragend.newIndex)
-      // console.log('oldIndex', itemdragend.oldIndex)
 
       this.onEnd(itemdragend)
     })
@@ -495,8 +522,12 @@ export default class Todo extends Vue {
     return localStorage.getItem(rescodes.localStorage.userId) !== ''
   }
 
-  async insertTodo() {
+  async insertTodo(atfirst: boolean = false) {
-    if (this.todo.trim() === '')
+    let descr = this.todobottom.trim()
+    if (atfirst)
+      descr = this.todotop.trim()
+
+    if (descr === '')
       return
 
     if (!this.isRegistered()) {
@@ -507,37 +538,55 @@ export default class Todo extends Vue {
 
     const objtodo = this.initcat()
 
-    objtodo.descr = this.todo
+    objtodo.descr = descr
     objtodo.category = this.getCategory()
 
-    const lastelem: ITodo = this.getLastList()
+    let elemtochange: ITodo
-    objtodo.id_prev = (lastelem !== null) ? lastelem._id : rescodes.LIST_START
+
+    if (atfirst) {
+      elemtochange = this.getFirstList()
+      objtodo.id_prev = rescodes.LIST_START
+      objtodo.id_next = (elemtochange !== null) ? elemtochange._id : rescodes.LIST_END
+      objtodo.pos = (elemtochange !== null) ? elemtochange.pos - 1 : 1
+    } else {
+      elemtochange = this.getLastList()
+      objtodo.id_prev = (elemtochange !== null) ? elemtochange._id : rescodes.LIST_START
       objtodo.id_next = rescodes.LIST_END
-    objtodo.pos = (lastelem !== null) ? lastelem.pos + 1 : 1
+      objtodo.pos = (elemtochange !== null) ? elemtochange.pos + 1 : 1
+    }
     objtodo.modified = false
 
+    console.log('objtodo', objtodo)
+
     if (objtodo.userId === undefined) {
       this.$q.notify(this.$t('todo.usernotdefined'))
       return
     }
 
+    // Create record in Memory
+    Todos.mutations.createNewItem({ objtodo, atfirst })
+
     // 1) Insert into the IndexedDb
     const id = await globalroutines(this, 'write', 'todos', objtodo)
+
     // update also the last elem
-    if (lastelem !== null) {
+    if (atfirst) {
-      lastelem.id_next = id
+      if (elemtochange !== null) {
-      // lastelem.modified = true
+        elemtochange.id_prev = id
-      // console.log('calling MODIFY 4', lastelem)
       }
-
+    } else {
-    // Create record in Memory
+      if (elemtochange !== null) {
-    Todos.mutations.createNewItem(objtodo)
+        elemtochange.id_next = id
-
+      }
-    // Modify the record above to the new last
+    }
-    await this.modify(lastelem, false)
+    // Modify the other record
+    await this.modify(elemtochange, false)
 
     // empty the field
-    this.todo = ''
+    if (atfirst)
+      this.todotop = ''
+    else
+      this.todobottom = ''
 
     this.updatetable(false, 'insertTodo')
 
@@ -760,7 +809,7 @@ export default class Todo extends Vue {
     return x = (typeof x !== 'undefined' && x instanceof Array) ? x : []
   }
 
-  getFirstList(arrlist) {
+  getFirstList(arrlist = this.todos_arr) {
     let elem: ITodo
     for (elem of arrlist) {
       if (elem.id_prev === rescodes.LIST_START) {
@@ -913,7 +962,7 @@ export default class Todo extends Vue {
 
 
         if (miorec.modified) {
-          // console.log('Todo MODIFICATO! ', miorec.descr, 'SALVALO SULLA IndexedDB todos')
+          console.log('Todo MODIFICATO! ', miorec.descr, miorec.pos, 'SALVALO SULLA IndexedDB todos')
           miorec.modify_at = new Date().getDate()
           miorec.modified = false
 
@@ -1004,5 +1053,13 @@ export default class Todo extends Vue {
     }
   */
 
+  loadMoreTodo(index, done) {
+    setTimeout(() => {
+      this.actualMaxPosition += 15
+      done()
+    }, 100)
+
+  }
+
 
 }

src/components/todos/todo/todo.vue

@@ -7,20 +7,26 @@
                 <div class="categorytitle">{{ getCategory() }}</div>
             </div>
 
+            <q-input ref="insertTask" v-model="todotop" inverted :float-label="$t('todo.inserttop')"
+                     :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
+                     v-on:keyup.enter="insertTodo(true)"/>
 
             <div style="display: none">{{ prior = 0, priorcomplet = false }}</div>
-            <div class="drag">
+            <div>
                 <!--<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"-->
                 <!--@start="onStart" @end="onEnd" class="dragArea">-->
                 <!--<transition-group :name="mytypetransgroup">-->
                 <!--<div :id="getmyid(mytodo._id)" v-for="(mytodo, index) in todos_arr" :key="mytodo._id"  class="myitemdrag"-->
                 <!--draggable="true" @dragstart="dragStart(index, $event)" @dragover.prevent @dragenter="dragEnter(index)"-->
                 <!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >-->
+                <q-infinite-scroll :handler="loadMoreTodo" :offset="7">
                     <div class="container" v-dragula="todos_arr" drake="first">
-                        <div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in todos_arr" :key="mytodo._id"  class="myitemdrag">
+                        <div :id="getmyid(mytodo._id)" :index="index" v-for="(mytodo, index) in showingDataTodo"
+                             :key="mytodo._id" class="myitemdrag">
 
 
-                            <div v-if="(prior !== mytodo.priority) && !mytodo.completed" :class="getTitlePriority(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">
@@ -33,18 +39,19 @@
 
                             <!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>-->
 
-                            <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}</div>
+                            <div style="display: none">{{ prior = mytodo.priority, priorcomplet = mytodo.completed }}
                             </div>
                         </div>
+                    </div>
+                </q-infinite-scroll>
                 <!--</transition-group>-->
                 <!--</draggable>-->
             </div>
 
 
-
+            <q-input v-if="todos_arr.length > 0" ref="insertTaskBottom" v-model="todobottom" inverted :float-label="$t('todo.insertbottom')"
-            <q-input ref="insertTask" v-model="todo" inverted :float-label="$t('todo.insert')"
                      :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
-                     v-on:keyup.enter="insertTodo"/>
+                     v-on:keyup.enter="insertTodo(false)"/>
 
             <!--{{ tmpstrTodos }}-->
 

src/statics/i18n.js

@@ -108,7 +108,8 @@ const messages = {
     },
     todo: {
       titleprioritymenu: 'Priorità:',
-      insert: 'Inserisci il Task',
+      inserttop: 'Inserisci il Task in alto',
+      insertbottom: 'Inserisci il Task in basso',
       edit: 'Descrizione Task:',
       completed: 'Completati',
       usernotdefined: 'Attenzione, occorre essere Loggati per poter aggiungere un Todo'
@@ -234,7 +235,8 @@ const messages = {
     },
     todo: {
       titleprioritymenu: 'Prioridad:',
-      insert: 'Ingrese una nueva Tarea',
+      inserttop: 'Ingrese una nueva Tarea arriba',
+      insertbottom: 'Ingrese una nueva Tarea abajo',
       edit: 'Descripción Tarea:',
       completed: 'Completados',
       usernotdefined: 'Atención, debes iniciar sesión para agregar una Tarea'
@@ -360,7 +362,8 @@ const messages = {
     },
     todo: {
       titleprioritymenu: 'Priority:',
-      insert: 'Insert Task',
+      inserttop: 'Insert Task at the top',
+      insertbottom: 'Insert Task at the bottom',
       edit: 'Task Description:',
       completed: 'Completed',
       usernotdefined: 'Attention, you need to be Signed In to add a new Task'

src/store/Modules/Todos.ts

@@ -54,8 +54,13 @@ namespace Mutations {
     return -1
   }
 
-  function createNewItem(state: ITodosState, myitem: ITodo) {
+  function createNewItem(state: ITodosState, { objtodo, atfirst }) {
-    state.todos.push(myitem)
+    console.log('atfirst', atfirst)
+    if (atfirst)
+      state.todos.unshift(objtodo)
+    else
+      state.todos.push(objtodo)
+
     Todos.mutations.setTodos_changed()
   }