@live-change/vue3-components 0.2.9 → 0.2.12

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,6 +111,14 @@
     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 {
@@ -196,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) {
@@ -250,10 +274,12 @@
       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)
@@ -263,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)
@@ -274,12 +301,14 @@
       }
       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) {
@@ -298,6 +327,7 @@
         return anyError && results
       })
     }
+
     clearValidation() {
       super.clearValidation()
       for(let element of this.elements) {
@@ -306,6 +336,14 @@
       }
     }
 
+    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
@@ -405,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),
@@ -412,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)
         }
@@ -435,6 +479,7 @@
         let np = name.split('.')
         let node = this.formRoot
         for(let p of np) {
+          if(!p) continue
           if(node.properties) node = node.properties[p]
             else if(node.elements) node = node.elements[p]
           if(!node) throw new Error(`form field ${name} not found`)//return null
@@ -445,6 +490,7 @@
         let np = name.split('.')
         let node = this.formRoot
         for(let p of np) {
+          if(!p) continue
           if(node.properties) node = node.properties[p]
           else if(node.elements) node = node.elements[p]
           if(!node) return node
@@ -483,6 +529,18 @@
         this.formRoot.reset(this.initialValues)
         //console.log("Form after reset", JSON.stringify(this.formRoot.getValue(), null, '  '))
       },
+
+      getValidationContext(srcContext) {
+        const context = {
+          ...(srcContext || { parameters: this.parameters }),
+          ...this.provided,
+          source: this.definition,
+          props: this.formRoot.getValue(),
+          form: this
+        }
+        return context
+      },
+
       addValidator(name, validator) {
         this.getNode(name).validators.push(validator)
       },
@@ -492,18 +550,11 @@
         if(id == -1) throw new Error("validator not found")
         validators.splice(id)
       },
-      validateField(name) {
-        return this.getNode(name).validate(this.formRoot.properties, name, this.definition)
+      validateField(name, context) {
+        return this.getNode(name).validate(this.getValidationContext(context))
       },
       validate(context) {
-        context = {
-          ...(context || { parameters: this.parameters }),
-          ...this.provided,
-          source: this.definition,
-          props: this.formRoot.getValue(),
-          form: this
-        }
-        return this.formRoot.validate(context)
+        return this.formRoot.validate(this.getValidationContext(context))
       },
       clearFieldValidation(name) {
         this.getNode(name).clearValidation()
@@ -511,6 +562,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

@@ -59,7 +59,7 @@ function synchronized(options) {
       onChange()
       if(autoSave) throttledSave()
     })
-    console.log("WATCH SOURCE VALUE", source.value)
+    //console.log("WATCH SOURCE VALUE", source.value)
     watch(() => JSON.stringify(source.value), sourceJson => {
       const sourceData = JSON.parse(sourceJson)
       if(sourceData) {

package/logic/synchronizedList.js

@@ -63,16 +63,16 @@ function synchronizedList(options) {
   const locallyDeleted = ref([])
 
   function createSynchronizedElement(sourceData) {
-    console.log("CREATE SYNCHRONIZED", JSON.stringify(sourceData))
+    //console.log("CREATE SYNCHRONIZED", JSON.stringify(sourceData))
     const elementSource = ref(sourceData)
     const synchronizedElement = mapper(elementSource)
-    console.log("SYNC ELEMENT", synchronizedElement)
+    //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(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-change/vue3-components",
-  "version": "0.2.9",
+  "version": "0.2.12",
   "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.9",
+    "@live-change/vue3-ssr": "0.2.10",
     "debug": "^4.3.4",
     "mitt": "3.0.0",
     "vue": "^3.2.33"
   },
-  "gitHead": "efcb8e4afc03219f588d6e782f29e4f3f74af3cf"
+  "gitHead": "3120e4e5c5c96e017cf66bb8172a3f6f96baea84"
 }