@live-change/vue3-components 0.2.6 → 0.2.9

package/form/DefinedForm.vue

@@ -115,6 +115,7 @@
     constructor(definition, component, data, property) {
       super(definition, component, data, property)
 
+      if(!this.data[this.property]) this.data[this.property] = {}
       this.object = this.data[this.property]
       this.properties = {}
 
@@ -246,6 +247,7 @@
       super(definition, component, data, property)
       this.elementDefinition = definition.of
       this.elements = []
+      if(!this.data[this.property]) this.data[this.property] = []
       this.object = this.data[this.property]
     }
     setProperty(name) {
@@ -268,7 +270,7 @@
       for(let i = 0; i < initialValue.length; i++) {
         let n = this.newElement(this.elements.length)
         n.reset(initialValue[i])
-        this.elements.push(n)
+        this.elements[i] = n
       }
       super.setValue(initialValue)
     }
@@ -299,6 +301,7 @@
     clearValidation() {
       super.clearValidation()
       for(let element of this.elements) {
+        console.log("CLEAR ELEMENT", element, 'OF', this.elements, "IN", this.property)
         element.clearValidation()
       }
     }
@@ -326,7 +329,7 @@
       this.data[this.property] = value
       if(!value) return;
       for(let i = 0; i < value.length; i++) {
-        if (this.elements[i]) {
+        if(this.elements[i]) {
           this.elements[i].setValue(value[i])
         } else {
           let n = this.newElement()

package/logic/synchronized.js

@@ -1,6 +1,16 @@
 import { computed, ref, watch } from "vue"
 import { useThrottleFn } from "@vueuse/core"
 
+function copy(value) {
+  let res = JSON.parse(JSON.stringify(value || {}))
+  if(value) for(const key in value) {
+    if(typeof value[key] == 'function') {
+      res[key] = value[key]
+    }
+  }
+  return res
+}
+
 function synchronized(options) {
   const {
     source,
@@ -17,7 +27,7 @@ function synchronized(options) {
   if(!source) throw new Error('source must be defined')
   if(!update) throw new Error('update function must be defined')
   if(recursive) {
-    const synchronizedValue = ref(JSON.parse(JSON.stringify(source.value || {})))
+    const synchronizedValue = ref(copy(source.value))
     const synchronizedJSON = computed(() => JSON.stringify(synchronizedValue.value))
     const lastLocalUpdate = ref(synchronized.value ? synchronizedValue.value[timeField] : '')
 
@@ -49,10 +59,17 @@ function synchronized(options) {
       onChange()
       if(autoSave) throttledSave()
     })
-    watch(() => source.value, sourceData => {
+    console.log("WATCH SOURCE VALUE", source.value)
+    watch(() => JSON.stringify(source.value), sourceJson => {
+      const sourceData = JSON.parse(sourceJson)
       if(sourceData) {
-        console.log("SRC DATA", sourceData)
-        lastLocalUpdate.value = sourceData[timeField]
+        //console.log("SRC DATA", JSON.stringify(sourceData))
+        //console.log("TIME", sourceData[timeField], '>', lastLocalUpdate.value)
+        if(sourceData[timeField] > lastLocalUpdate.value) {
+          lastLocalUpdate.value = sourceData[timeField]
+          synchronizedValue.value = copy(sourceData)
+        }
+
       }
     })
     return { value: synchronizedValue, save, changed }

package/logic/synchronizedList.js

@@ -23,6 +23,7 @@ function sortedArraysMerge(merge, ...arrays) {
       if(position < array.length && array[position].id == lowestId) {
         objects[arrayIndex] = array[position]
         positions[arrayIndex]++
+        incremented = true
       } else {
         objects[arrayIndex] = null
       }
@@ -62,8 +63,10 @@ function synchronizedList(options) {
   const locallyDeleted = ref([])
 
   function createSynchronizedElement(sourceData) {
+    console.log("CREATE SYNCHRONIZED", JSON.stringify(sourceData))
     const elementSource = ref(sourceData)
     const synchronizedElement = mapper(elementSource)
+    console.log("SYNC ELEMENT", synchronizedElement)
     synchronizedElement.source = elementSource
     synchronizedElement.id = sourceData.id
     return synchronizedElement
@@ -75,11 +78,16 @@ function synchronizedList(options) {
     let newSynchronized = sortedArraysMerge(
       (synchronizedElement, sourceElement, locallyAddedElement, locallyDeletedElement) => {
 
+/*        console.log("MERGE ELEMENT", synchronizedElement)
+        console.log("SOURCE ELEMENT", sourceElement)
+        console.log("LOCALLY ADDED", locallyAddedElement)
+        console.log("LOCALLY DELETED", locallyDeletedElement)*/
+
         if(locallyAddedElement && sourceElement) {
           obsoleteLocallyAdded.add(locallyAddedElement.id)
         }
         if(locallyDeletedElement && !sourceElement) {
-          obsoleteLocallyDeleted.add(locallyAddedElement.id)
+          obsoleteLocallyDeleted.add(locallyDeletedElement.id)
         }
 
         if(synchronizedElement) {
@@ -87,14 +95,17 @@ function synchronizedList(options) {
             return null // synchronized element locally
           }
           if(sourceElement) {
-            synchronizedElement.source.value = sourceElement
+            synchronizedElement.source = sourceElement
+            watch(() => synchronizedElement.source.value, v => console.log("DD",v))
+            return synchronizedElement
           } else if(locallyAddedElement) {
-            synchronizedElement.source.value = locallyAddedElement
+            synchronizedElement.source = locallyAddedElement
+            return synchronizedElement
           } else {
             return null // synchronized element deleted
           }
         } else if(sourceElement) {
-          console.log("CREATE SYNCHRONIZED FROM SOURCE!")
+          //console.log("CREATE SYNCHRONIZED FROM SOURCE!")
           return createSynchronizedElement(sourceElement)
         } else if(locallyAddedElement) {
           return createSynchronizedElement(locallyAddedElement)
@@ -113,7 +124,10 @@ function synchronizedList(options) {
     synchronizedList.value = newSynchronized
   }
 
-  watch(() => (source.value ?? []).map(({ id }) => id), sourceIds => synchronizeFromSource())
+  watch(() => (source.value ?? []).map(({ id }) => id), (sourceIds, oldSourceIds) => {
+    console.log("SOURCE IDs changed", oldSourceIds, '=>', sourceIds)
+    synchronizeFromSource()
+  })
   synchronizeFromSource()
 
   const changed = computed(() => (synchronizedList.value.some(({ changed }) => changed.value))
@@ -130,8 +144,9 @@ function synchronizedList(options) {
   }
 
   async function deleteElement(element) {
+    const deleted = JSON.parse(JSON.stringify(element))
     locallyDeleted.value.push(element)
-    await deleteAction({ ...element, ...identifiers })
+    await deleteAction({ ...element, ...identifiers, ...objectIdentifiers(element) })
   }
 
   async function move(element, toId) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.2.6",
+  "version": "0.2.9",
   "description": "Live Change Framework - vue components",
   "main": "index.js",
   "scripts": {
@@ -21,10 +21,10 @@
   },
   "homepage": "https://github.com/live-change/live-change-framework-vue3",
   "dependencies": {
-    "@live-change/vue3-ssr": "^0.2.6",
-    "debug": "^4.3.2",
+    "@live-change/vue3-ssr": "^0.2.9",
+    "debug": "^4.3.4",
     "mitt": "3.0.0",
-    "vue": "^3.2.31"
+    "vue": "^3.2.33"
   },
-  "gitHead": "88f2d2f0dca78f3147db250a62999f1f90d20b85"
+  "gitHead": "efcb8e4afc03219f588d6e782f29e4f3f74af3cf"
 }