@live-change/vue3-components 0.2.5 → 0.2.8

package/logic/synchronizedList.js

@@ -40,7 +40,7 @@ function synchronizedList(options) {
     source,
     update: updateAction,
     insert: insertAction,
-    remove: removeAction,
+    delete: deleteAction,
     move: moveAction,
     identifiers = {},
     objectIdentifiers = object => ({ id: object.id }),
@@ -59,7 +59,7 @@ function synchronizedList(options) {
   if(!source) throw new Error('source must be defined')
   const synchronizedList = ref([])
   const locallyAdded = ref([])
-  const locallyRemoved = ref([])
+  const locallyDeleted = ref([])
 
   function createSynchronizedElement(sourceData) {
     const elementSource = ref(sourceData)
@@ -69,55 +69,65 @@ function synchronizedList(options) {
     return synchronizedElement
   }
   function synchronizeFromSource() {
+    //console.log("SYNCHRONIZE FROM SOURCE!")
     let obsoleteLocallyAdded = new Set()
-    let obsoleteLocallyRemoved = new Set()
+    let obsoleteLocallyDeleted = new Set()
     let newSynchronized = sortedArraysMerge(
-      (synchronizedElement, sourceElement, locallyAddedElement, locallyRemovedElement) => {
+      (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(locallyRemovedElement && !sourceElement) {
-          obsoleteLocallyRemoved.add(locallyAddedElement.id)
+        if(locallyDeletedElement && !sourceElement) {
+          obsoleteLocallyDeleted.add(locallyDeletedElement.id)
         }
 
         if(synchronizedElement) {
-          if(locallyRemovedElement) {
+          if(locallyDeletedElement) {
             return null // synchronized element locally
           }
           if(sourceElement) {
             synchronizedElement.source.value = sourceElement
+            return synchronizedElement
           } else if(locallyAddedElement) {
             synchronizedElement.source.value = 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)
         }
-      }, synchronizedList.value, source.value || [], locallyAdded.value, locallyRemoved.value)
+      }, synchronizedList.value, source.value || [], locallyAdded.value, locallyDeleted.value)
     if(obsoleteLocallyAdded.length > 0) {
       locallyAdded.value = locallyAdded.value.filter(
         locallyAddedElement => obsoleteLocallyAdded.has(locallyAddedElement.id)
       )
     }
-    if(obsoleteLocallyRemoved.length > 0) {
-      locallyRemoved.value = locallyRemoved.value.filter(
-        locallyRemovedElement => obsoleteLocallyRemoved.has(locallyRemovedElement.id)
+    if(obsoleteLocallyDeleted.length > 0) {
+      locallyDeleted.value = locallyDeleted.value.filter(
+        locallyDeletedElement => obsoleteLocallyDeleted.has(locallyDeletedElement.id)
       )
     }
     synchronizedList.value = newSynchronized
   }
 
-  const sourceIds = computed(() => (source.value ?? []).map(({ id }) => id))
-  watch(() => 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))
-                              || locallyAdded.length || locallyRemoved.length)
+                              || locallyAdded.length || locallyDeleted.length)
 
   async function save() {
     const results = await Promise.app(synchronizedList.value.map(synchronizedElement => synchronizedElement.save()))
@@ -125,13 +135,14 @@ function synchronizedList(options) {
   }
 
   async function insert(element) {
-    locallyAdded.push(element)
+    locallyAdded.value.push(element)
     await insertAction({ ...element, [timeField]: timeSource(), ...identifiers })
   }
 
-  async function remove(element) {
-    locallyRemoved.push(element)
-    await removeAction({ ...element, ...identifiers })
+  async function deleteElement(element) {
+    const deleted = JSON.parse(JSON.stringify(element))
+    locallyDeleted.value.push(element)
+    await deleteAction({ ...element, ...identifiers, ...objectIdentifiers(element) })
   }
 
   async function move(element, toId) {
@@ -139,7 +150,7 @@ function synchronizedList(options) {
   }
 
   const synchronizedValue = computed(() => synchronizedList.value.map(synchronizedElement => synchronizedElement.value))
-  return { value: synchronizedValue, save, changed, insert, remove, move }
+  return { value: synchronizedValue, save, changed, insert, delete: deleteElement, move }
 }
 
 export default synchronizedList

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.2.5",
+  "version": "0.2.8",
   "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.5",
+    "@live-change/vue3-ssr": "^0.2.7",
     "debug": "^4.3.2",
     "mitt": "3.0.0",
     "vue": "^3.2.31"
   },
-  "gitHead": "923504c224dd1e3cc5b6bb8296f0963965cd4d10"
+  "gitHead": "3d267cf03e99822c79c8954b12c1bdb5f388e269"
 }