@live-change/vue3-components 0.2.7 → 0.2.10

package/form/CommandForm.vue

@@ -164,6 +164,7 @@
         const node = this.getNodeIfExists(name)
         if(node) node.unobserveError(observer)
       },
+
       addValidator(name, validator) {
         this.getNode(name).validators.push(validator)
       },
@@ -185,6 +186,20 @@
       clearValidation() {
         this.$refs.defined.clearValidation()
       },
+
+      waitForFieldBarriers(name, context) {
+        return this.$refs.defined.waitForFieldBarriers(name, context)
+      },
+      waitForBarriers(context) {
+        return this.$refs.defined.waitForBarriers(context)
+      },
+      addBarrier(name, validator) {
+        this.$refs.defined.addBarrier(name, validator)
+      },
+      removeBarrier(name, validator) {
+        this.$refs.defined.removeBarrier(name, validator)
+      },
+
       addElementToArray(propName, initialValue) {
         this.getNode(propName).addElement(initialValue)
       },
@@ -209,88 +224,94 @@
 
         analytics.emit('form', { service: this.service, action: this.action, parameters: analyticsParameters })
 
-        return this.validate({ parameters: {...this.parameters, ...additionalParameters} }).then(validationError => {
-          debug("VALIDATION ERROR?", validationError)
-          if(validationError) {
-            analytics.emit('formError', {
-              service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
-            })
-            this.workingZone.finished(this.workingTask)
-            this.state = 'ready'
-            this.scrollToError()
-            return;
-          }
+        const barrierResult = await this.waitForBarriers({
+          parameters: { ...this.parameters, ...additionalParameters }
+        })
 
-          let parameters = this.$refs.defined.formRoot.getValue()
-          parameters = { ...parameters, ...this.parameters, ...(additionalParameters || {}), _commandId }
-          //console.trace("SUBMIT!")
-          debug("SUBMIT DATA:\n"+JSON.stringify(parameters, null, "  "))
+        const validationError = await this.validate({
+          parameters: { ...this.parameters, ...additionalParameters }
+        })
 
-          this.$emit("submit", { parameters })
+        debug("VALIDATION ERROR?", validationError)
+        if(validationError) {
+          analytics.emit('formError', {
+            service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
+          })
+          this.workingZone.finished(this.workingTask)
+          this.state = 'ready'
+          this.scrollToError()
+          return;
+        }
 
-          return this.$api.request([this.service, this.action], parameters).then((result) => {
-            debug("DATA SUBMITED")
-            analytics.emit('formDone', {
-              service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
-            })
-            if(this.resetOnDone) {
-              this.state = 'ready'
-              this.reset()
-            } else if(this.keepOnDone) {
+        let parameters = this.$refs.defined.formRoot.getValue()
+        parameters = { ...parameters, ...this.parameters, ...(additionalParameters || {}), _commandId }
+        //console.trace("SUBMIT!")
+        debug("SUBMIT DATA:\n"+JSON.stringify(parameters, null, "  "))
+
+        this.$emit("submit", { parameters })
+
+        return this.$api.request([this.service, this.action], parameters).then((result) => {
+          debug("DATA SUBMITED")
+          analytics.emit('formDone', {
+            service: this.service, action: this.action, parameters: analyticsParameters, error: validationError
+          })
+          if(this.resetOnDone) {
+            this.state = 'ready'
+            this.reset()
+          } else if(this.keepOnDone) {
+            this.state = 'ready'
+          } else {
+            this.state = 'done'
+          }
+          this.$emit('done', { result , parameters })
+          this.workingZone.finished(this.workingTask)
+        }).catch((error) => {
+          console.error("FORM ERROR", error)
+          analytics.emit('formError', {
+            service: this.service, action: this.action, parameters: analyticsParameters, error
+          })
+          this.$refs.defined.formRoot.afterError(this.initialValues)
+          if(error.properties) {
+            for(let propName in error.properties) {
+              let node = this.getNode(propName)
+              if(!node) {
+                this.state = 'error'
+                this.error = `protocol mismatch, field ${propName} not found`
+                return
+              }
+              node.setError(error.properties[propName])
               this.state = 'ready'
-            } else {
-              this.state = 'done'
             }
-            this.$emit('done', { result , parameters })
+            this.scrollToError()
             this.workingZone.finished(this.workingTask)
-          }).catch((error) => {
-            console.error("FORM ERROR", error)
-            analytics.emit('formError', {
-              service: this.service, action: this.action, parameters: analyticsParameters, error
-            })
-            this.$refs.defined.formRoot.afterError(this.initialValues)
-            if(error.properties) {
-              for(let propName in error.properties) {
-                let node = this.getNode(propName)
-                if(!node) {
-                  this.state = 'error'
-                  this.error = `protocol mismatch, field ${propName} not found`
-                  return
-                }
-                node.setError(error.properties[propName])
-                this.state = 'ready'
-              }
-              this.scrollToError()
-              this.workingZone.finished(this.workingTask)
-            } else if(this.ignoreError) {
-              if((typeof this.ignoreError) == 'function') {
-                if(this.ignoreError(error)) {
-                  this.workingZone.finished(this.workingTask)
-                } else {
-                  this.state = 'error'
-                  this.error = error
-                  this.workingZone.failed(this.workingTask, error)
-                }
-              } else if(Array.isArray(this.ignoreError)) {
-                if(this.ignoreError.indexOf(error) != -1) {
-                  this.workingZone.finished(this.workingTask)
-                } else {
-                  this.state = 'error'
-                  this.error = error
-                  this.workingZone.failed(this.workingTask, error)
-                }
+          } else if(this.ignoreError) {
+            if((typeof this.ignoreError) == 'function') {
+              if(this.ignoreError(error)) {
+                this.workingZone.finished(this.workingTask)
               } else {
+                this.state = 'error'
+                this.error = error
+                this.workingZone.failed(this.workingTask, error)
+              }
+            } else if(Array.isArray(this.ignoreError)) {
+              if(this.ignoreError.indexOf(error) != -1) {
                 this.workingZone.finished(this.workingTask)
+              } else {
+                this.state = 'error'
+                this.error = error
+                this.workingZone.failed(this.workingTask, error)
               }
-            } else if(this.externalErrorsProcessing) {
-              // ...
             } else {
-              this.state = 'error'
-              this.error = error
-              this.workingZone.failed(this.workingTask, error)
+              this.workingZone.finished(this.workingTask)
             }
-            this.$emit('error', { error, parameters, task: this.workingTask })
-          })
+          } else if(this.externalErrorsProcessing) {
+            // ...
+          } else {
+            this.state = 'error'
+            this.error = error
+            this.workingZone.failed(this.workingTask, error)
+          }
+          this.$emit('error', { error, parameters, task: this.workingTask })
         })
       },
       handleSubmitEvent(ev) {

package/form/DefinedForm.vue

@@ -20,6 +20,8 @@
       if(!this.component) throw new Error("no component parameter")
 
       this.validators = []
+      this.barriers = []
+
       if(definition.validation) {
         let validations = Array.isArray(definition.validation) ? definition.validation : [definition.validation]
         const context = {
@@ -109,12 +111,21 @@
     clearValidation() {
       this.setError(null)
     }
+
+    async waitForBarriers(context) {
+      let promises = []
+      for(let barrier of this.barriers) {
+        promises.push(barrier(this.value, context))
+      }
+      await Promise.all(promises)
+    }
   }
 
   class FormObject extends FormValue {
     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 = {}
 
@@ -195,6 +206,20 @@
       }
     }
 
+    async waitForBarriers(context) {
+      let promises = [ super.waitForBarriers(context).then(error => ['root', error]) ]
+      for(let propName in this.properties) {
+        if(context.parameters && context.parameters[propName]) continue;
+        promises.push(
+            this.properties[propName].waitForBarriers({
+              ...context,
+              propName: context.propName ? context.propName+'.'+propName : propName
+            })
+        )
+      }
+      await Promise.all(promises)
+    }
+
     getValue() {
       let obj = { ...this.value }
       for(let propName in this.properties) {
@@ -246,12 +271,15 @@
       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) {
       this.property = name
       this.object = this.data[this.property]
     }
+
     newElement(index) {
       if(this.elementDefinition.type == "Object") {
         return new FormObject(this.elementDefinition, this.component, this.object, index)
@@ -261,6 +289,7 @@
         return new FormValue(this.elementDefinition, this.component, this.object, index)
       }
     }
+
     reset(initialValue) {
       initialValue = initialValue || this.definition.defaultValue || []
       this.data[this.property] = new Array(initialValue.length)
@@ -268,16 +297,18 @@
       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)
     }
+
     afterError(initialValue) {
       if(this.definition.singleUse) return this.reset()
       for(let i = 0; i < this.elements.length; i++) {
         this.elements[i].afterError(initialValue && initialValue[i])
       }
     }
+
     validate(context) {
       let promises = [super.validate(context)]
       for(let propName in this.elements) {
@@ -296,13 +327,23 @@
         return anyError && results
       })
     }
+
     clearValidation() {
       super.clearValidation()
       for(let element of this.elements) {
+        console.log("CLEAR ELEMENT", element, 'OF', this.elements, "IN", this.property)
         element.clearValidation()
       }
     }
 
+    async waitForBarriers(context) {
+      let promises = [super.waitForBarriers(context)]
+      for(let propName in this.elements) {
+        promises.push(this.elements[propName].waitForBarriers({ ...context, propName: context.propName+'.'+propName }))
+      }
+      await Promise.all(promises)
+    }
+
     getValue() {
       let arr = new Array(this.elements.length)
       arr.length = this.elements.length
@@ -326,7 +367,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()
@@ -402,6 +443,7 @@
           setFieldError: (name, value) => this.setFieldError(name, value),
           getValue: () => this.formRoot.getValue(),
           reset: () => this.reset(),
+
           addValidator: (propName, validator) => this.addValidator(propName, validator),
           removeValidator: (propName, validator) => this.addValidator(propName, validator),
           validateField: (propName) => this.validateField(propName),
@@ -409,6 +451,11 @@
           clearFieldValidation: (propName) => this.clearFieldValidation(propName),
           clearValidation: () => this.clearValidation(),
 
+          addBarrier: (propName, validator) => this.addBarrier(propName, validator),
+          removeBarrier: (propName, validator) => this.removeBarrier(propName, validator),
+          waitForFieldBarriers: (propName) => this.waitForFieldBarriers(propName),
+          waitForBarriers: (propName) => this.waitForBarriers(),
+
           addElementToArray: (propName, initialValue) => this.addElementToArray(propName, initialValue),
           removeElementFromArray: (propName, index) => this.removeElementFromArray(propName, index)
         }
@@ -480,6 +527,7 @@
         this.formRoot.reset(this.initialValues)
         //console.log("Form after reset", JSON.stringify(this.formRoot.getValue(), null, '  '))
       },
+
       addValidator(name, validator) {
         this.getNode(name).validators.push(validator)
       },
@@ -508,6 +556,24 @@
       clearValidation() {
         this.formRoot.clearValidation()
       },
+
+      waitForFieldBarriers(name, context) {
+        return this.getNode(name).waitForBarriers(this.getValidationContext(context))
+      },
+      waitForBarriers(context) {
+        return this.formRoot.waitForBarriers(this.getValidationContext(context))
+      },
+      addBarrier(name, barrier) {
+        this.getNode(name).barriers.push(barrier)
+      },
+      removeBarrier(name, barrier) {
+        let barriers = this.getNode(name).barriers
+        let id = barriers.indexOf(barrier)
+        if(id == -1) throw new Error("barrier not found")
+        barriers.splice(id)
+      },
+
+
       addElementToArray(propName, initialValue) {
         this.getNode(propName).addElement(initialValue)
       },

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,19 +63,26 @@ 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
   }
   function synchronizeFromSource() {
-    console.log("SYNCHRONIZE FROM SOURCE!")
+    //console.log("SYNCHRONIZE FROM SOURCE!", source.value, "!!!")
     let obsoleteLocallyAdded = new Set()
     let obsoleteLocallyDeleted = new Set()
     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)
         }
@@ -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))

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.2.7",
+  "version": "0.2.10",
   "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.7",
-    "debug": "^4.3.2",
+    "@live-change/vue3-ssr": "^0.2.10",
+    "debug": "^4.3.4",
     "mitt": "3.0.0",
-    "vue": "^3.2.31"
+    "vue": "^3.2.33"
   },
-  "gitHead": "dc64c11dd7c599eeb073771e6ee815b8d2fdfbe1"
+  "gitHead": "589481d53e4599a6682db2fc4c787cc9dfd13974"
 }