@processmaker/screen-builder 2.18.1 → 2.21.0

package/src/mixins/Json2Vue.js

@@ -2,7 +2,7 @@ import extensions from './extensions';
 import ScreenBase from './ScreenBase';
 import CountElements from '../CountElements';
 import ValidationsFactory from '../ValidationsFactory';
-import _ from 'lodash';
+import _, { debounce, isEqual } from 'lodash';
 
 let screenRenderer;
 
@@ -214,7 +214,12 @@ export default {
       return name && typeof name === 'string' && name.match(/^[a-zA-Z_][0-9a-zA-Z_.]*$/);
     },
     isComputedVariable(name, definition) {
-      return definition.computed && definition.computed.find(c => c.property === name);
+      return definition.computed && definition.computed.some(computed => {
+        // Check if the first part of an element's name (up to the first `.`)
+        // matches the name of a computed property.
+        const regex = new RegExp(`^${computed.property}(\\.|$)`, 'i');
+        return regex.test(name);
+      });
     },
     registerVariable(name, element = {}) {
       if (!this.validVariableName(name)) {
@@ -298,7 +303,7 @@ export default {
         Object.keys(component.watch).forEach((key) => {
           const watch = { deep: true };
           component.watch[key].forEach(w => Object.assign(watch, w.options));
-          watch.handler = new Function('value', component.watch[key].map(w => w.code).join('\n'));
+          watch.handler = new Function('value', component.watch[key].map(w => `try{${w.code}}catch(e){console.warn(e)}`).join('\n'));
           component.watch[key] = watch;
         });
         // Add validation rules
@@ -336,19 +341,43 @@ export default {
     },
     addValidationRulesLoader(component, definition) {
       const firstPage = parseInt(this.currentPage) || 0;
+      function getKeys(input) {
+        if (input instanceof Array) {
+          const response = [];
+          input.forEach((item) => {
+            response.push(getKeys(item));
+          });
+          return response;
+        }
+        if (!(input instanceof Object)) {
+          return typeof input;
+        }
+        const keys = Object.keys(input);
+        const response = {};
+        keys.forEach((key) => {
+          response[key] = getKeys(input[key]);
+        });
+        return response;
+      }
+      let updateValidationRules = function(screenComponent, validations) {
+        const a = getKeys(screenComponent.ValidationRules__);
+        const b = getKeys(validations);
+        if (isEqual(a, b)) {
+          return;
+        }
+        screenComponent.ValidationRules__ = validations;
+        screenComponent.$nextTick(() => {
+          if (screenComponent.$v) {
+            screenComponent.$v.$touch();
+          }
+        });
+      };
+      updateValidationRules = debounce(updateValidationRules, 25);
       component.methods.loadValidationRules = function() {
         // Asynchronous loading of validations
         const validations = {};
         ValidationsFactory(definition, { screen: definition, firstPage, data: {_parent: this._parent, ...this.vdata} }).addValidations(validations).then(() => {
-          if (_.isEqual(this.ValidationRules__, validations)) {
-            return;
-          }
-          this.ValidationRules__ = validations;
-          this.$nextTick(() => {
-            if (this.$v) {
-              this.$v.$touch();
-            }
-          });
+          updateValidationRules(this, validations);
         });
       };
       component.mounted.push('this.loadValidationRules()');

package/src/mixins/ScreenBase.js

@@ -7,7 +7,7 @@ const stringFormats = ['string', 'datetime', 'date', 'password'];
 export default {
   schema: [
     function() {
-      if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.indexOf('package-vocabularies')) {
+      if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
         if (window.ProcessMaker.VocabulariesSchemaUrl) {
           let response = window.ProcessMaker.apiClient.get(window.ProcessMaker.VocabulariesSchemaUrl);
           return response.then(response => {
@@ -60,10 +60,14 @@ export default {
       };
     },
     findParent(child, data = this.vdata, parent = this._parent) {
+
       if (child === data) {
         return parent;
       }
       for (const key in data) {
+        if (key === '_parent') {
+          continue;
+        }
         if (data[key] instanceof Array) {
           for (const item of data[key]) {
             const result = this.findParent(child, item, data);
@@ -120,7 +124,7 @@ export default {
         },
       });
     },
-    initialValue(component, dataFormat) {
+    initialValue(component, dataFormat, config) {
       let value = null;
       if (component === 'FormInput') {
         if (stringFormats.includes(dataFormat)) {
@@ -130,6 +134,10 @@ export default {
         }
       } else if (component === 'FormTextArea') {
         value = '';
+      } else if (component === 'FormSelectList' && config.options.allowMultiSelect) {
+        value = [];
+      } else if (component === 'FormSelectList' && !config.options.allowMultiSelect) {
+        value = null;
       }
       return value;
     },

package/src/mixins/ValidationRules.js

@@ -21,6 +21,8 @@ import {
   not,
   or,
   and,
+  maxItems,
+  minItems,
 } from 'vuelidate/lib/validators';
 
 export const ValidationMsg = {
@@ -55,6 +57,8 @@ export const ValidationMsg = {
   invalid_default_value: 'Invalid default value',
   customDate: 'Must be a valid Date',
   regex: 'Invalid value',
+  maxItems: 'Should NOT have more than {max} items',
+  minItems: 'Must have at least {min}',
 };
 
 export const custom_date = (date) => {
@@ -225,4 +229,6 @@ export const validators = {
   notIn,
   regex,
   afterOrEqual: after_or_equal,
+  maxItems,
+  minItems,
 };

package/src/mixins/VisibilityRule.js

@@ -3,7 +3,7 @@ import { debounce } from 'lodash';
 
 export default {
   mounted() {
-    this.refreshValidationRulesByName = debounce(this.refreshValidationRulesByName, 300);
+    this.refreshValidationRulesByName = debounce(this.refreshValidationRulesByName, 1000);
 
     this.$root.$on('refresh-validation-rules', () => {
       this.loadValidationRules();
@@ -28,20 +28,9 @@ export default {
         const data = Object.assign({ _parent: this._parent }, this.vdata);
         const isVisible = !!Parser.evaluate(rule, Object.assign({}, data));
 
-        // Update the array of hidden fields
-        if (fieldName) {
-          const fieldExists = this.hiddenFields__.indexOf(fieldName) !== -1;
-          if (isVisible && fieldExists) {
-            this.hiddenFields__ = this.hiddenFields__.filter((f) => f !== fieldName);
-            this.$root.$emit('refresh-validation-rules');
-          } else if (!isVisible && !fieldExists) {
-            this.hiddenFields__.push(fieldName);
-            this.$root.$emit('refresh-validation-rules');
-          }
-        }
-        
-
-        this.refreshValidationRulesByName(fieldName, isVisible);
+        window.setTimeout(() => {
+          this.refreshValidationRulesByName(fieldName, isVisible);
+        }, 1000);
         return isVisible;
       } catch (e) {
         return false;

package/src/mixins/computedFields.js

@@ -1,21 +1,20 @@
+import _ from 'lodash';
 import { Parser } from 'expr-eval';
 
 export default {
   methods: {
     evaluateExpression(expression, type) {
       let value = null;
-      try {
-        const self = this;
 
+      const merged = {};
+      _.merge(merged, this.vdata, this._data);
+
+      try {
         //monitor if variable belongs to data (defined variables) or vdata (external variables)
         //in this way the event is not executed again when the variable is update
-        const data = new Proxy(Object.assign({}, this), {
+        const data = new Proxy(merged, {
           get(data, name) {
-            if (data[name] === undefined) {
-              return self.vdata[name];
-            } else {
-              return data[name];
-            }
+            return data[name];
           },
           set() {
             throw 'You are not allowed to set properties from inside an expression';

package/src/mixins/extensions/DataManager.js

@@ -10,7 +10,7 @@ export default {
           this.addData(screen, v.name, `
             this.getValue(${JSON.stringify(v.name)}, this.vdata) || 
             this.getValue(${JSON.stringify(v.name)}, data) || 
-            this.initialValue('${component}', '${dataFormat}')
+            this.initialValue('${component}', '${dataFormat}', ${JSON.stringify(v.config)})
           `);
           this.addWatch(screen, v.name, `this.setValue(${JSON.stringify(v.name)}, value, this.vdata);this.setValue(${JSON.stringify(v.name)}, value, this.schema);`);
           this.addWatch(screen, `vdata.${v.name}`, `this.setValue(${JSON.stringify(v.name)}, value, this);`);

package/src/mixins/extensions/DefaultValues.js

@@ -25,7 +25,8 @@ export default {
       });
     },
     setupDefaultValue(screen, name, value) {
-      const defaultComputedName = `default_${name}__`;
+      const splittedName = name.split('.').join('_DOT_'); 
+      const defaultComputedName = `default_${splittedName}__`;
       this.addData(screen, `${name}_was_filled__`, `!!this.getValue(${JSON.stringify(name)}, this.vdata) || !!this.getValue(${JSON.stringify(name)}, data)`);
       this.addMounted(screen, `if (!this.${name}) {
         this.tryFormField(${JSON.stringify(name)}, () => {this.${this.dot2bracket(name)} = ${value};});
@@ -46,7 +47,8 @@ export default {
         const name = element.config.name;
         if (this.isComputedVariable(name, definition)) return;
         if (element.config.defaultValue || element.config.initiallyChecked) {
-          const event = `${name}_was_filled__ |= !!$event; !${name}_was_filled__ && (vdata.${this.dot2bracket(name)} = default_${name}__)`;
+          const splittedName = name.split('.').join('_DOT_'); 
+          const event = `${name}_was_filled__ |= !!$event; !${name}_was_filled__ && (vdata.${this.dot2bracket(name)} = default_${splittedName}__)`;
           this.addEvent(properties, 'input', event);
         }
       },

package/src/mixins/extensions/LoadFieldComponents.js

@@ -26,7 +26,7 @@ export default {
         }
       });
     },
-    loadFieldProperties({ properties, element, componentName, definition , formIndex}) {
+    loadFieldProperties({ properties, element, componentName, definition , formIndex, screen}) {
       properties.class = this.elementCssClass(element);
       properties[':validation-data'] = 'getValidationData()';
 
@@ -38,7 +38,19 @@ export default {
           properties[':image'] = this.byRef(element.config.image);
         } else if (this.validVariableName(element.config.name)) {
           this.registerVariable(element.config.name, element);
-          properties['v-model'] = `${element.config.name}`;
+          // v-model are not assigned directly to the field name, to prevent invalid references like:
+          // `person.content` when `person`=null
+          const computed_property = `computedProxy__${element.config.name.split('.').join('_DOT_')}`;
+          properties['v-model'] = computed_property;
+          screen.computed[computed_property] = {
+            get() {
+              return this.getValue(element.config.name);
+            },
+            set(value) {
+              this.setValue(element.config.name, value);
+              return true;
+            },
+          };
         }
       }
       // Do not replace mustache in RichText control, it is replaced by the control
@@ -57,7 +69,7 @@ export default {
       properties[':form-computed'] = JSON.stringify(definition.computed);
       properties[':form-watchers'] = JSON.stringify(definition.watchers);
       // Check if control is assigned to a calculated property
-      const isCalcProp = definition.computed && !!definition.computed.find(computed => computed.property == element.config.name);
+      const isCalcProp = this.isComputedVariable(element.config.name, definition);
       properties[':readonly'] = isCalcProp || element.config.readonly;
       properties[':disabled'] = isCalcProp || element.config.disabled;
       // Events

package/src/mixins/extensions/LoopContainer.js

@@ -47,6 +47,7 @@ export default {
       const addLoopRow = this.createComponent('AddLoopRow', {
         ':value': element.config.settings.varname,
         ':config': this.byValue(element.config),
+        ':error': `${this.checkVariableExists('$v.vdata.' + element.config.name)} && validationMessage($v.vdata.${element.config.name}) || ${this.checkVariableExists('$v.schema.' + element.config.name)} && validationMessage($v.schema.${element.config.name})`,
       });
       loop.appendChild(child);
       node.appendChild(loop);