- fix it: Order List Todo
- Split Todo List by Priority and by Completed - Animation drag
This commit is contained in:
Paolo Arena
@@ -149,6 +149,7 @@ module.exports = function (ctx) {
|
||||
'QDatetime',
|
||||
'QSlideTransition',
|
||||
'QTable',
|
||||
'QContextMenu',
|
||||
],
|
||||
directives: [
|
||||
'Ripple',
|
||||
|
||||
@@ -1,17 +1,29 @@
|
||||
|
||||
.flex-item{
|
||||
background-color: #d5e2eb;
|
||||
padding: 1px;
|
||||
margin: 1px;
|
||||
// background-color: #d5e2eb;
|
||||
padding: 0px;
|
||||
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;
|
||||
border: 1px;
|
||||
padding: 1px;
|
||||
border: 0px;
|
||||
background-color: #e1ebed;
|
||||
}
|
||||
|
||||
@@ -110,6 +156,11 @@
|
||||
}
|
||||
|
||||
|
||||
.icon_completed:hover {
|
||||
color: darkgreen;
|
||||
.icon_completed {
|
||||
color: rgb(178, 235, 225);
|
||||
}
|
||||
|
||||
.status_completed {
|
||||
color:rgba(49, 68, 240, 0.7);;
|
||||
}
|
||||
|
||||
|
||||
@@ -11,24 +11,90 @@ 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
|
||||
@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()
|
||||
}
|
||||
|
||||
setCompleted () {
|
||||
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() {
|
||||
// console.log('setCompleted')
|
||||
this.itemtodo.completed = !this.itemtodo.completed
|
||||
|
||||
@@ -38,10 +104,12 @@ export default class SingleTodo extends Vue {
|
||||
}
|
||||
|
||||
updatedata() {
|
||||
console.log('calling this.$emit(eventupdate)')
|
||||
this.$emit('eventupdate', this.itemtodo)
|
||||
}
|
||||
|
||||
updateicon () {
|
||||
updateicon() {
|
||||
console.log('updateicon')
|
||||
if (this.itemtodo.completed)
|
||||
this.iconCompleted = 'check_circle'
|
||||
else
|
||||
@@ -57,23 +125,25 @@ export default class SingleTodo extends Vue {
|
||||
|
||||
}
|
||||
|
||||
created() {
|
||||
this.updateicon()
|
||||
|
||||
this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
|
||||
|
||||
removeitem(id) {
|
||||
this.$emit('deleteitem', id)
|
||||
}
|
||||
|
||||
remove(id) {
|
||||
this.$emit('event', id)
|
||||
clickMenu(action) {
|
||||
console.log('click menu: ', action)
|
||||
if (action === rescodes.MenuAction.DELETE)
|
||||
this.removeitem(this.itemtodo.id)
|
||||
}
|
||||
|
||||
setPriority (newpriority) {
|
||||
setPriority(newpriority) {
|
||||
|
||||
this.itemtodo.priority = newpriority
|
||||
|
||||
this.updatedata()
|
||||
|
||||
this.updateicon()
|
||||
|
||||
// this.$q.notify('setPriority: ' + elem)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,29 @@
|
||||
<template>
|
||||
<div class="row flex-container2">
|
||||
<div class="flex-item pos-item">{{ itemtodo.pos }}ª</div>
|
||||
<div :class="getClassRow()" @mousedown="clickRiga" @mouseup="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"
|
||||
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">
|
||||
<q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
|
||||
</div>
|
||||
<!--<div class="flex-item btn-item">-->
|
||||
<!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemtodo.id)"></q-btn>-->
|
||||
<!--</div>-->
|
||||
<!--<div class="flex-item">-->
|
||||
<!--[{{ itemtodo.id_prev}} - {{ itemtodo.id_next}}]-->
|
||||
<!--</div>-->
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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) {
|
||||
return this.todos_arr[indelem].pos
|
||||
async updateLinkedList(init: boolean, arr: ITodo[] = this.todos_arr) {
|
||||
|
||||
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
|
||||
}
|
||||
|
||||
onEnd(myvar) {
|
||||
let oldpos = this.getpos(myvar.oldIndex)
|
||||
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
|
||||
await arr.forEach((elem, index) => {
|
||||
if (index === 0) {
|
||||
idprev = rescodes.LIST_START
|
||||
} 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) {
|
||||
let myobj = this.todos_arr[myvar.oldIndex]
|
||||
console.log('posprec = ' + myobj.pos)
|
||||
myobj.pos = newpos
|
||||
this.modify(myobj)
|
||||
pos++
|
||||
|
||||
this.logelem('updateLinked', elem)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
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 = '') {
|
||||
|
||||
// console.log('todos_arr: ')
|
||||
this.todos_arr.forEach((todo, key) => {
|
||||
console.log('Todo n"' + key + ': ' + todo)
|
||||
setarrPriority() {
|
||||
this.arrPrior = []
|
||||
const arr = rescodes.selectPriority[UserStore.state.lang]
|
||||
arr.forEach(rec => {
|
||||
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() {
|
||||
let max = 0
|
||||
this.todos_arr.forEach(myobj => {
|
||||
if (myobj.pos > max)
|
||||
max = myobj.pos
|
||||
})
|
||||
|
||||
return max + 1
|
||||
|
||||
getPriorityByInd(index) {
|
||||
const arr = rescodes.selectPriority[UserStore.state.lang]
|
||||
for (let rec of arr) {
|
||||
if (rec.value === index)
|
||||
return rec.label
|
||||
}
|
||||
return ''
|
||||
}
|
||||
|
||||
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(() => {
|
||||
this.updatetable()
|
||||
).then((id) => {
|
||||
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) {
|
||||
let myobjtrov = null
|
||||
this.todos_arr.forEach(myobj => {
|
||||
if (myobj.id === id)
|
||||
myobjtrov = myobj
|
||||
})
|
||||
|
||||
return myobjtrov
|
||||
getElemById(id, lista = this.todos_arr) {
|
||||
let myobj: ITodo
|
||||
for (myobj of lista) {
|
||||
if (myobj.id === id) {
|
||||
return myobj
|
||||
}
|
||||
}
|
||||
|
||||
deleteitem(id) {
|
||||
// console.log('deleteitem: KEY = ', id)
|
||||
return null
|
||||
}
|
||||
|
||||
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() {
|
||||
await this.filtertodos()
|
||||
async updatetable(refresh: boolean = false) {
|
||||
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) => {
|
||||
item.pos = (index * 2) + 1
|
||||
})
|
||||
this.updateLinkedList(true, arrtemp)
|
||||
|
||||
// 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
|
||||
miorec.priority = myobj.priority
|
||||
miorec.pos = myobj.pos
|
||||
|
||||
this.logelem('modify', miorec)
|
||||
|
||||
await this.$db.todos.put(miorec)
|
||||
|
||||
this.updatetable()
|
||||
if (update)
|
||||
await this.updatetable(false)
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
@@ -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'
|
||||
v-for="mytodo of todos_arr" :key="mytodo.id" class="myitemdrag">
|
||||
</SingleTodo>
|
||||
<div :id="getmyid(mytodo.id)" :key="mytodo.id" v-for="mytodo in todos_arr" class="myitemdrag">
|
||||
|
||||
<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 v-for="element in todos_arr" :key="element.id">{{element.descr}}</div>-->
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</q-page>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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="4.1" to="3.6" dur="5s" begin="7s" 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.1" to="3.6" dur="5s" begin="17s" 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="3s" begin="3s" 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="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.1" to="3.6" dur="5s" begin="7s" 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="4.1" to="3.6" dur="5s" begin="17s" 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="3s" begin="3s" 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="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>
|
||||
|
||||
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 190 KiB |
@@ -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: 1,
|
||||
PRIORITY_LOW: -1
|
||||
PRIORITY_HIGH: 2,
|
||||
PRIORITY_NORMAL: 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'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user