surya/freeplanet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Paolo Arena
2019-02-20 17:54:48 +01:00
parent 6a99f22bf3
commit 77568f02f5
6 changed files with 132 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/todos/SingleTodo/SingleTodo.ts
View File

@@ -94,7 +94,7 @@ export default class SingleTodo extends Vue {
updateClasses() { updateClasses() {
// this.classCompleted = 'completed-item' // this.classCompleted = 'completed-item'
this.classCompleted = 'completed-item-popover' 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' this.classDescrEdit = 'flex-item div_descr_edit'
if (!this.isTodo()) { if (!this.isTodo()) {
this.classDescr += ' titleLista-item' this.classDescr += ' titleLista-item'

4
src/components/todos/SingleTodo/SingleTodo.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<div :class="getClassRow()" @click="clickRow"> <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">--> <!--<div v-if="isFirst">-->
<!--<q-context-menu ref="contextMenu">--> <!--<q-context-menu ref="contextMenu">-->
<!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>--> <!--<SubMenus :menuPopupTodo="menuPopupTodo" :itemtodo="itemtodo" @clickMenu="clickMenu" @setPriority="setPriority"></SubMenus>-->
@@ -59,7 +59,7 @@
</q-datetime> </q-datetime>
</div> </div>
<div v-if="isTodo()" class="flex-item pos-item item-drag" @mouseup.left="mouseUp" @mousedown="clickRiga"> <div v-if="isTodo()" class="flex-item pos-item item-drag " @mouseup.left="mouseUp" @mousedown="clickRiga">
<q-btn push <q-btn push
:class="clButtPopover" :class="clButtPopover"
icon="menu" > icon="menu" >

121
src/components/todos/todo/todo.ts
View File

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

47
src/components/todos/todo/todo.vue
View File

@@ -7,20 +7,26 @@
<div class="categorytitle">{{ getCategory() }}</div> <div class="categorytitle">{{ getCategory() }}</div>
</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 style="display: none">{{ prior = 0, priorcomplet = false }}</div>
<div class="drag"> <div>
<!--<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"--> <!--<draggable v-model="todos_arr" :options="{draggable:'.myitemdrag'}"-->
<!--@start="onStart" @end="onEnd" class="dragArea">--> <!--@start="onStart" @end="onEnd" class="dragArea">-->
<!--<transition-group :name="mytypetransgroup">--> <!--<transition-group :name="mytypetransgroup">-->
<!--<div :id="getmyid(mytodo._id)" v-for="(mytodo, index) in todos_arr" :key="mytodo._id" class="myitemdrag"--> <!--<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)"--> <!--draggable="true" @dragstart="dragStart(index, $event)" @dragover.prevent @dragenter="dragEnter(index)"-->
<!--@dragleave="dragLeave(index)" @dragend="dragEnd" @drop="dragFinish(index, $event)" >--> <!--@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 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> <label>{{getPriorityByInd(mytodo.priority)}}</label>
</div> </div>
<div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted"> <div v-if="(!priorcomplet && mytodo.completed)" class="titleCompleted">
@@ -29,29 +35,30 @@
</div> </div>
<SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem" <SingleTodo ref="single" @deleteitem="deleteitem" @eventupdate="updateitem"
@deselectAllRows="deselectAllRows" @onEnd="onEnd" @deselectAllRows="deselectAllRows" @onEnd="onEnd"
:itemtodo='mytodo' /> :itemtodo='mytodo'/>
<!--<div :name="`REF${index}`" class="divdrag non-draggato"></div>--> <!--<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>
</div> </div>
<!--</transition-group>--> </q-infinite-scroll>
<!--</transition-group>-->
<!--</draggable>--> <!--</draggable>-->
</div> </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 () {}}]" :after="[{icon: 'arrow_forward', content: true, handler () {}}]"
v-on:keyup.enter="insertTodo"/> v-on:keyup.enter="insertTodo(false)"/>
<!--{{ tmpstrTodos }}--> <!--{{ tmpstrTodos }}-->
<!--<div class="flex-item btn-item">--> <!--<div class="flex-item btn-item">-->
<!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>--> <!--<q-btn class="mybtn" round color="" icon="lock" @click="getArrTodos">Get Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>--> <!--<q-btn class="mybtn" round color="" icon="person" @click="setArrTodos">Set Todo</q-btn>-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>--> <!--<q-btn class="mybtn" round color="" icon="list" @click="reload_fromServer++">Reload</q-btn>-->
<!--</div>--> <!--</div>-->
<!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;--> <!--&lt;!&ndash;<q-input v-model="testPao" float-label="testPao"/>&ndash;&gt;-->
@@ -60,9 +67,9 @@
<!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>--> <!--<q-input v-model="reload_fromServer" float-label="reload_fromServer"/>-->
<!--<div class="flex-item btn-item">--> <!--<div class="flex-item btn-item">-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>&ndash;&gt;--> <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="lock" @click="clicktest()"></q-btn>&ndash;&gt;-->
<!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>&ndash;&gt;--> <!--&lt;!&ndash;<q-btn class="mybtn" round color="" icon="person" @click="clicktest2()"></q-btn>&ndash;&gt;-->
<!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>--> <!--<q-btn class="mybtn" round color="" icon="list" @click="checkUpdate()"></q-btn>-->
<!--</div>--> <!--</div>-->
</div> </div>

9
src/statics/i18n.js
View File

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

9
src/store/Modules/Todos.ts
View File

@@ -54,8 +54,13 @@ namespace Mutations {
return -1 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() Todos.mutations.setTodos_changed()
} }