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

- fix: updated from Store to Component: using Watch with 'immediate' parameters! @Watch('todos_changed', { immediate: true, deep: true })

Browse Source 
- fix immediate only if you need to change something very quickly... otherwise it not need.
- fix: modified become FALSE when is sent, otherwise infinite loop...
This commit is contained in:
Paolo Arena
2019-02-03 19:28:06 +01:00
parent 602eb6bc20
commit 13a4a0ba90
8 changed files with 107 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src-pwa/custom-service-worker.js
View File

@@ -255,11 +255,11 @@ self.addEventListener('sync', function (event) {
event.waitUntil(
readAllData(table)
.then(function (alldata) {
console.log('data: ', alldata)
if (alldata) {
for (var rec of alldata) {
//console.log('syncing', table, '', rec.descr)
let link = cfgenv.serverweb + '/todos/' + rec._id
console.log('FETCH: ', method, link, 'data:', JSON.stringify(rec))
console.log('syncing', table, 'FETCH: ', method, link, 'data:', rec.descr)
// Insert/Delete/Update table to the server
fetch(link, {
@@ -269,13 +269,13 @@ self.addEventListener('sync', function (event) {
body: JSON.stringify(rec)
})
.then(function (resData) {
console.log('Result data Todo:', resData);
console.log('Result CALL ', method, ' OK? =', resData.ok);
if (resData.ok) {
deleteItemFromData(table, rec._id);
}
})
.catch(function (err) {
console.log('Error while sending data', err);
console.log('!!!!!!!!!!!!!!! Error while sending data', err);
});
}
}

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

@@ -61,7 +61,7 @@ export default class SingleTodo extends Vue {
}
@Watch('itemtodo.descr') valueChanged5() {
@Watch('itemtodo.descr',) valueChanged5() {
this.precDescr = this.itemtodo.descr
}

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

@@ -11,7 +11,6 @@ import { UserStore } from '@store'
import objectId from '../../../js/objectId.js'
import _ from 'lodash'
import draggable from 'vuedraggable'
@@ -33,6 +32,7 @@ export default class Todo extends Vue {
title: string = ''
todo: string = ''
todos_arr: ITodo[] = []
prevRecords: ITodo[] = []
drag: boolean = true
startpos: number = 0
listPriorityLabel: number[] = []
@@ -41,7 +41,9 @@ export default class Todo extends Vue {
itemDragStart: any = null
itemDragEnd: any = null
selrowid: number = 0
todos_global: any
fieldtochange: String [] = ['descr', 'completed', 'category', 'expiring_at', 'priority', 'id_prev', 'id_next', 'pos', 'enableExpiring', 'progress']
// @Prop({ required: false }) category: string
@@ -68,7 +70,7 @@ export default class Todo extends Vue {
return Todos.state.todos_changed
}
@Watch('todos_changed', { immediate: true, deep: true })
@Watch('todos_changed', { immediate: true })
changetodos_changed(value: string, oldValue: string) {
console.log('Todos.state.todos_changed CHANGED!', value, oldValue)
this.updatetable(true)
@@ -148,10 +150,17 @@ export default class Todo extends Vue {
idnext = elemnext._id
}
elem.modified = ((elem.id_prev !== idprev) || (elem.id_next !== idnext) || (elem.pos !== pos)) ? true : elem.modified
// elem.modified = ((elem.id_prev !== idprev) || (elem.id_next !== idnext) || (elem.pos !== pos)) ? true : elem.modified
// elem.modified = elem.pos !== pos ? true : elem.modified
// if (elem.modified)
// console.log('MODIFICATO QUIIIIIIIIIIIIIIIIIIII', elem.id_prev, idprev, elem.id_next, idnext, elem.pos, pos)
elem.id_prev = idprev
elem.id_next = idnext
if (elem.pos !== pos) {
elem.modified = true
elem.pos = pos
}
if (init) {
elem.modified = false
}
@@ -231,7 +240,7 @@ export default class Todo extends Vue {
myobj.modified = (myobj.completed !== completed) ? true : myobj.modified
myobj.completed = completed
changecompleted = true
console.log('Newcompleted: ', completed)
console.log('Newcompleted: ', completed, 'modif', myobj.modified)
}
if (!changecompleted) {
@@ -249,6 +258,8 @@ export default class Todo extends Vue {
// Updated only elements modified
await this.updateModifyRecords(true)
this.updatetable()
}
async updateModifyRecords(refresh: boolean = false) {
@@ -258,6 +269,7 @@ export default class Todo extends Vue {
console.log('calling MODIFY 3')
this.modify(elem, false)
update = true
elem.modified = false
}
})
@@ -281,7 +293,6 @@ export default class Todo extends Vue {
async load() {
this.todos_global = Todos.state.todos_changed
this.todos_arr = [...Todos.state.todos]
// Set last category selected
@@ -339,7 +350,7 @@ export default class Todo extends Vue {
id_prev: '',
id_next: '',
pos: 0,
modified: true,
modified: false,
progress: 0
}
return this.copy(objtodo)
@@ -369,7 +380,7 @@ export default class Todo extends Vue {
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
objtodo.modified = false
if (objtodo.userId === undefined) {
this.$q.notify(this.$t('todo.usernotdefined'))
@@ -383,7 +394,7 @@ export default class Todo extends Vue {
// update also the last elem
if (lastelem !== null) {
lastelem.id_next = id
lastelem.modified = true
// lastelem.modified = true
console.log('calling MODIFY 4', lastelem)
}
@@ -391,7 +402,7 @@ export default class Todo extends Vue {
.then(ris => {
console.log('END calling MODIFY 4')
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo)
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'POST', objtodo, true)
this.updatetable(false)
})
@@ -401,16 +412,17 @@ export default class Todo extends Vue {
console.log('Errore: ' + err.message)
})
console.log('ESCO.........')
// console.log('ESCO.........')
// empty the field
this.todo = ''
}
async cmdToSyncAndDb(cmd, table, method, item: ITodo, id, msg: String) {
async cmdToSyncAndDb(cmd, table, method, item: ITodo, id, msg: String, update: boolean) {
// Send to Server to Sync
console.log('cmdToSyncAndDb', cmd, table, method, item, id, msg)
console.log('cmdToSyncAndDb', cmd, table, method, item.descr, id, msg)
const mythis = this
if (('serviceWorker' in navigator && 'SyncManager' in window)) {
@@ -423,13 +435,15 @@ export default class Todo extends Vue {
globalroutines(mythis, 'write', table, item, id)
.then(function (id) {
console.log('id', id)
// console.log('id', id)
const sep = '|'
let multiparams = cmd + sep + table + sep + method + sep + UserStore.state.idToken + sep + UserStore.state.lang
return sw.sync.register(multiparams)
})
.then(function () {
console.log('USCITO dalla sw.sync.register(multiparams) ')
let snackbarContainer = document.querySelector('#confirmation-toast')
let data = { message: msg }
// snackbarContainer.MaterialSnackbar.showSnackbar(data)
@@ -438,6 +452,15 @@ export default class Todo extends Vue {
console.error('Errore in globalroutines', table, err)
})
})
if (update) {
// // Update the array in memory, from todos table from IndexedDb
Todos.actions.updateArrayInMemory()
.then((ris) => {
return ris
})
}
} else {
if (cmd === rescodes.DB.CMD_SYNC_TODOS) {
if (method === 'POST')
@@ -449,13 +472,13 @@ export default class Todo extends Vue {
}
}
saveItemToSyncAndDb(table: String, method, item: ITodo) {
return this.cmdToSyncAndDb(rescodes.DB.CMD_SYNC_TODOS, table, method, item, 0, 'Your Post was saved for syncing!')
async saveItemToSyncAndDb(table: String, method, item: ITodo, update: boolean) {
return await this.cmdToSyncAndDb(rescodes.DB.CMD_SYNC_TODOS, table, method, item, 0, 'Your Post was saved for syncing!', update)
}
deleteItemToSyncAndDb(table: String, item: ITodo, id) {
return this.cmdToSyncAndDb(rescodes.DB.CMD_DELETE_TODOS, table, 'DELETE', item, id, 'Your Post was canceled for syncing!')
deleteItemToSyncAndDb(table: String, item: ITodo, id, update: boolean) {
return this.cmdToSyncAndDb(rescodes.DB.CMD_DELETE_TODOS, table, 'DELETE', item, id, 'Your Post was canceled for syncing!', update)
}
/*
@@ -507,7 +530,7 @@ export default class Todo extends Vue {
this.modify(myobjnext, false)
}
this.deleteItemToSyncAndDb(rescodes.DB.TABLE_DELETE_TODOS, myobjtrov, id)
this.deleteItemToSyncAndDb(rescodes.DB.TABLE_DELETE_TODOS, myobjtrov, id, true)
const mythis = this
// Delete item
@@ -522,9 +545,23 @@ export default class Todo extends Vue {
console.log('FINE deleteitem')
}
getElem(myarray: ITodo[], id) {
for (let i = 0; i < myarray.length - 1; i++) {
if (myarray[i]._id === id)
return myarray[i]
}
return null
}
isRecordModifPos(itemnew: ITodo, itemold: ITodo) {
return itemnew.pos !== itemold.pos
}
async updatetable(refresh: boolean = false) {
console.log('updatetable')
this.prevRecords = [...this.todos_arr]
return await Todos.actions.getTodosByCategory(this.getCategory())
.then(arrtemp => {
@@ -532,7 +569,15 @@ export default class Todo extends Vue {
this.updateLinkedList(true, arrtemp)
// If changed the position, then set modified
arrtemp.forEach(itemNew => {
const itemOld = this.getElem(this.prevRecords, itemNew._id)
if (itemOld)
itemNew.modified = this.isRecordModifPos(itemNew, itemOld) ? true : false
})
this.todos_arr = [...arrtemp] // make copy
})
}
@@ -665,9 +710,10 @@ export default class Todo extends Vue {
modifyField(recOut, recIn, field) {
if (recOut[field] !== recIn[field]) {
console.log('*************** CAMPO ', field, 'MODIFICATO!', recOut[field], recIn[field])
recOut.modified = true
recOut[field] = recIn[field]
return recOut[field]
return true
}
return false
}
@@ -680,39 +726,37 @@ export default class Todo extends Vue {
})
await globalroutines(this, 'read', 'todos', null, myobj._id)
.then(miorec => {
console.log('ArrTodos: ', myobj.descr, '[', myobj._id, ']')
if (miorec === undefined) {
console.log('Record not Found !!!!!! id=', myobj._id)
console.log('~~~~~~~~~~~~~~~~~~~~ !!!!!!!!!!!!!!!!!! Record not Found !!!!!! id=', myobj._id)
return
}
this.modifyField(miorec, myobj, 'descr')
if (this.modifyField(miorec, myobj, 'completed'))
miorec.completed_at = new Date().getDate()
this.modifyField(miorec, myobj, 'category')
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')
this.modifyField(miorec, myobj, 'enableExpiring')
this.modifyField(miorec, myobj, 'progress')
this.fieldtochange.forEach(field => {
this.modifyField(miorec, myobj, field)
})
if (miorec.modified) {
console.log('Todo MODIFICATO! ', miorec.descr, 'SALVALO SULLA IndexedDB todos')
miorec.modify_at = new Date().getDate()
miorec.modified = false
// this.logelem('modify', miorec)
globalroutines(this, 'write', 'todos', miorec)
.then(ris => {
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'PATCH', miorec)
this.saveItemToSyncAndDb(rescodes.DB.TABLE_SYNC_TODOS, 'PATCH', miorec, update)
.then(() => {
// console.log('SET MODIFIED FALSE')
if (update)
this.updatetable(false)
})
})
}
})

5
src/globalroutines/index.js
View File

@@ -1,6 +1,7 @@
import indexdb from './indexdb'
export default async (context, cmd, table, data, id = '') => {
console.log('globalroutines', cmd, table, data, id)
export default async (context, cmd, table, data = null, id = '') => {
const descr = data !== null ? data.descr : ''
console.log('globalroutines', cmd, table, descr, id)
return await indexdb(context, cmd, table, data, id)
}

8
src/globalroutines/indexdb.js
View File

@@ -31,18 +31,12 @@ async function readfromIndexDbToStateTodos(context, table) {
return await storage.getalldata(table)
.then(records => {
console.log('PRIMA:', Todos.state.todos)
console.log('&&&&&&& readfromIndexDbToStateTodos OK: Num RECORD: ', records.length)
console.log(' records:', records)
if (table === 'todos') {
Todos.state.todos = [...records]
console.log('DOPO:', Todos.state.todos)
Todos.state.todos_changed++
console.log('Todos.state.todos_changed:', Todos.state.todos_changed)
setTimeout(testfunc2, 3000)
// setTimeout(testfunc2, 3000)
}
}).catch((error) => {
console.log('err: ', error)

4
src/js/storage.js
View File

@@ -50,7 +50,7 @@ export let idbKeyval = (() => {
let req;
await withStore('readonly', table, store => {
console.log('store', store, 'key', key)
// console.log('store', store, 'key', key)
req = store.get(key);
});
// console.log('RISFINALE!', req.result)
@@ -72,7 +72,7 @@ export let idbKeyval = (() => {
},
async setdata(table, value) {
let req;
console.log('setdata', table, value)
// console.log('setdata', table, value)
await withStore('readwrite', table, store => {
req = store.put(value);

2
src/statics/js/storage.js
View File

@@ -71,7 +71,7 @@ let idbKeyval = (() => {
},
async setdata(table, value) {
let req;
console.log('setdata', table, value)
console.log('setdata', table, value.descr)
await withStore('readwrite', table, store => {
req = store.put(value);

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

@@ -42,7 +42,7 @@ namespace Mutations {
export const mutations = {
setTestpao: b.commit(setTestpao),
setTodos_changed: b.commit(setTodos_changed),
setTodos_changed: b.commit(setTodos_changed)
}
}
@@ -100,13 +100,18 @@ namespace Actions {
console.log('NETWORK UNREACHABLE ! (Error in fetch)')
consolelogpao('NETWORK UNREACHABLE ! (Error in fetch)')
// Read all data from IndexedDB Store into Memory
await updateArrayInMemory(context)
}
}
async function updateArrayInMemory(context) {
console.log('Update the array in memory, from todos table from IndexedDb')
await globalroutines(null, 'updateinMemory', 'todos', null)
.then(() => {
testfunc()
console.log('updateArrayInMemory! ')
return true
})
}
}
function aspettansec(numsec) {
return new Promise(function (resolve, reject) {
@@ -119,9 +124,8 @@ namespace Actions {
async function testfunc() {
while (true) {
consolelogpao('testfunc')
// Todos.mutations.setTodos_changed()
Todos.state.todos_changed++
console.log('Todos.state.todos_changed:', Todos.state.todos_changed)
// console.log('Todos.state.todos_changed:', Todos.state.todos_changed)
await aspettansec(5000)
}
}
@@ -224,6 +228,7 @@ namespace Actions {
dbSaveTodo: b.dispatch(dbSaveTodo),
dbLoadTodo: b.dispatch(dbLoadTodo),
dbDeleteTodo: b.dispatch(dbDeleteTodo),
updateArrayInMemory: b.dispatch(updateArrayInMemory),
getTodosByCategory: b.dispatch(getTodosByCategory)
}