@processmaker/screen-builder 2.60.3 → 2.61.0

package/src/mixins/extensions/DataManager.js

@@ -1,28 +1,54 @@
-import _ from 'lodash';
-
 export default {
   methods: {
     dataFields(screen, definition) {
-      this.variables.filter(v => (!v.name.startsWith('_parent') && !v.name.includes('._parent.') && !this.isComputedVariable(v.name, definition)))
-        .forEach(v => {
-          let component = _.get(v, 'element.component');
-          let dataFormat = _.get(v, 'config.dataFormat', null);
-          this.addData(screen, v.name, `
+      const localVariables = this.variables.filter(
+        (v) => !this.isComputedVariable(v.name, definition)
+      );
+      localVariables.forEach((v) => {
+        const { component } = v.element;
+        const dataFormat = v.config.dataFormat || null;
+        const safeDotName = this.safeDotName(v.name);
+        this.addData(
+          screen,
+          safeDotName,
+          `
             this.getValue(${JSON.stringify(v.name)}, this.vdata) || 
             this.getValue(${JSON.stringify(v.name)}, data) || 
-            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);`);
-        });
-      screen.props.vdata = null;
+            this.initialValue(
+              '${component}',
+              '${dataFormat}',
+              ${JSON.stringify(v.config)})
+          `,
+          v.name
+        );
+        this.addWatch(
+          screen,
+          `vdata.${v.name}`,
+          `if (this.canUpdate("${safeDotName}")) {
+            this.${safeDotName} = value;
+          }`
+        );
+      });
+      this.addProp(screen, "vdata", null);
     },
+    /**
+     * Replace `.` by `_DOT_` in a variable name
+     * @param {string} name
+     * @returns {string}
+     */
+    safeDotName(name) {
+      // if starts with _parent returns as is
+      if (name.startsWith("_parent")) {
+        return name;
+      }
+      return name.replace(/\./g, "_DOT_");
+    }
   },
   mounted() {
     this.extensions.push({
       onbuild({ screen, definition }) {
         this.dataFields(screen, definition);
-      },
+      }
     });
-  },
+  }
 };

package/src/mixins/extensions/DefaultValues.js

@@ -25,8 +25,8 @@ export default {
       });
     },
     setupDefaultValue(screen, name, value) {
-      const splittedName = name.split('.').join('_DOT_'); 
-      const defaultComputedName = `default_${splittedName}__`;
+      const safeDotName = this.safeDotName(name);
+      const defaultComputedName = `default_${safeDotName}__`;
       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};});
@@ -35,7 +35,7 @@ export default {
         get: new Function(`return this.tryFormField(${JSON.stringify(name)}, () => ${value});`),
         set() {},
       };
-      this.addWatch(screen, defaultComputedName, `!this.${name}_was_filled__ && this.setValue(${JSON.stringify(name)}, this.${defaultComputedName}, this.vdata, this);`);
+      this.addWatch(screen, defaultComputedName, `!this.${safeDotName}_was_filled__ && this.setValue(${JSON.stringify(name)}, this.${defaultComputedName}, this.vdata, this);`);
     },
   },
   mounted() {
@@ -47,8 +47,8 @@ export default {
         const name = element.config.name;
         if (this.isComputedVariable(name, definition)) return;
         if (element.config.defaultValue || element.config.initiallyChecked) {
-          const splittedName = name.split('.').join('_DOT_'); 
-          const event = `${name}_was_filled__ |= !!$event; !${name}_was_filled__ && (vdata.${this.dot2bracket(name)} = default_${splittedName}__)`;
+          const safeDotName = this.safeDotName(name);
+          const event = `${safeDotName}_was_filled__ |= !!$event; !${safeDotName}_was_filled__ && (vdata.${this.dot2bracket(name)} = default_${safeDotName}__)`;
           this.addEvent(properties, 'input', event);
         }
       },

package/src/mixins/extensions/LoadFieldComponents.js

@@ -1,80 +1,104 @@
+/* eslint-disable no-param-reassign */
 export default {
   data() {
     return {
-      popups: [],
+      popups: []
     };
   },
   methods: {
     searchForRecordList(items) {
-      items.forEach(item => {
+      items.forEach((item) => {
         if (item instanceof Array) {
           this.searchForRecordList(item);
         }
         if (item.items) {
           this.searchForRecordList(item.items);
         }
-        if (item.component === 'FormRecordList') {
+        if (item.component === "FormRecordList") {
           this.popups.push(parseInt(item.config.form));
         }
       });
     },
     loadFormPopups({ definition }) {
       this.popups = [];
-      definition.config.forEach(page => {
+      definition.config.forEach((page) => {
         if (page && page.items) {
           this.searchForRecordList(page.items);
         }
       });
     },
-    loadFieldProperties({ properties, element, componentName, definition , formIndex, screen}) {
+    loadFieldProperties({
+      properties,
+      element,
+      componentName,
+      definition,
+      formIndex,
+      screen
+    }) {
       properties.class = this.elementCssClass(element);
-      properties[':validation-data'] = 'getValidationData()';
+      properties[":validation-data"] = "getValidationData()";
 
-      //verify if component is defined in popup
+      // verify if component is defined in popup
       if (!this.popups.includes(formIndex)) {
-        if (componentName === 'FormImage') {
+        if (componentName === "FormImage") {
           this.registerVariable(element.config.variableName, element);
           delete properties.image;
-          properties[':image'] = this.byRef(element.config.image);
+          properties[":image"] = this.byRef(element.config.image);
         } else if (this.validVariableName(element.config.name)) {
           this.registerVariable(element.config.name, element);
           // 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;
-            },
-          };
+          const safeDotName = this.safeDotName(element.config.name);
+          properties["v-model"] = safeDotName;
+          // Debounce input from FormTextArea and FormInput
+          if (
+            componentName === "FormTextArea" ||
+            componentName === "FormInput"
+          ) {
+            properties["@input"] = `updateScreenData('${safeDotName}', '${element.config.name}')`;
+            properties["@change"] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
+          } else {
+            properties["@input"] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
+            properties["@change"] = `updateScreenDataNow('${safeDotName}', '${element.config.name}')`;
+          }
+          // Process the FormSelectList@reset event
+          properties[
+            "@reset"
+          ] = `resetValue('${safeDotName}', '${element.config.name}')`;
         }
       }
       // Do not replace mustache in RichText control, it is replaced by the control
-      if (componentName === 'FormHtmlViewer' || componentName === 'FormHtmlEditorStatic') {
+      if (
+        componentName === "FormHtmlViewer" ||
+        componentName === "FormHtmlEditorStatic"
+      ) {
         delete properties.content;
-        properties[':content'] = this.byRef(element.config.content);
+        properties[":content"] = this.byRef(element.config.content);
       }
       if (componentName === "FormNestedScreen") {
         properties[":_parent"] = "_parent";
       }
       // Add cypress testing tags
       if (element.config.name) {
-        properties['data-cy'] = `screen-field-${element.config.name}`;
+        properties["data-cy"] = `screen-field-${element.config.name}`;
       }
-      properties[':ancestor-screens'] = '$parent && $parent.ancestorScreens';
-      properties.name = element.config.name !== undefined ? element.config.name : null;
-      properties.disabled = element.config.interactive || element.config.disabled;
-      properties[':form-config'] = this.byRef(this.configRef || definition.config);
-      properties[':form-computed'] = JSON.stringify(definition.computed);
-      properties[':form-watchers'] = JSON.stringify(definition.watchers);
+      properties[":ancestor-screens"] = "$parent && $parent.ancestorScreens";
+      properties.name =
+        element.config.name !== undefined ? element.config.name : null;
+      properties.disabled =
+        element.config.interactive || element.config.disabled;
+      properties[":form-config"] = this.byRef(
+        this.configRef || definition.config
+      );
+      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 = this.isComputedVariable(element.config.name, definition);
-      properties[':readonly'] = isCalcProp || element.config.readonly;
-      properties[':disabled'] = isCalcProp || element.config.disabled;
+      const isCalcProp = this.isComputedVariable(
+        element.config.name,
+        definition
+      );
+      properties[":readonly"] = isCalcProp || element.config.readonly;
+      properties[":disabled"] = isCalcProp || element.config.disabled;
       // Events
       properties['@submit'] = 'submitForm';
     },
@@ -86,9 +110,9 @@ export default {
           this.loadFormPopups(params);
           this.loadFieldProperties(params);
         }
-        params.properties[':config'] = this.byRef(params.element.config);
-        params.properties[':transientData'] = 'vdata';
-      },
+        params.properties[":config"] = this.byRef(params.element.config);
+        params.properties[":transientData"] = "vdata";
+      }
     });
-  },
+  }
 };

package/src/mixins/extensions/LoopContainer.js

@@ -1,5 +1,3 @@
-import LoopControl from '../../mixins/LoopControl';
-
 export default {
   props: {
     configRef: null,
@@ -12,7 +10,7 @@ export default {
   },
   methods: {
     loadFormLoopProperties({ properties, element }) {
-      this.registerVariable(element.config.settings.varname, {});
+      this.registerVariable(element.config.settings.varname, element);
       this.loops.push({ variable: element.config.settings.varname, element, properties });
     },
     loadFormLoopItems({ element, node, definition }) {
@@ -75,13 +73,7 @@ export default {
         if (params.element.container && params.componentName === 'FormLoop') {
           this.loadFormLoopItems(params);
         }
-      },
-      onbuild({ screen }) {
-        screen.mixins.push(LoopControl);
-        this.loops.forEach(({variable, element}) => {
-          this.addMounted(screen, `this.initLoopVariable(${JSON.stringify(variable)}, ${JSON.stringify(element.config)});`);
-        });
-      },
+      }
     });
-  },
+  }
 };

package/src/mixins/extensions/ValidationRules.js

@@ -1,5 +1,7 @@
 import { validationMixin } from 'vuelidate';
+import { mapGetters } from 'vuex';
 import VueVuelidateJsonschema from 'vue-vuelidate-jsonschema';
+import { javascriptReservedKeywords } from '../../form-control-common-properties';
 
 export default {
   mounted() {
@@ -10,8 +12,14 @@ export default {
           delete properties[':validation'];
           delete properties['validation'];
           // Add validation class and error message
-          properties[':class'] = `{ 'form-group--error': ${this.checkVariableExists('$v.vdata.' + element.config.name)} && $v.vdata.${element.config.name}.$invalid || ${this.checkVariableExists('$v.schema.' + element.config.name)} && $v.schema.${element.config.name}.$invalid }`;
-          properties[':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})`;
+          if (!this.isValidVariableName(element.config.name)) {
+            if (this.getMode() === "preview") {
+              console.error("Invalid variable name");
+            }
+          } else {
+            properties[':class'] = `{ 'form-group--error': ${this.checkVariableExists('$v.vdata.' + element.config.name)} && $v.vdata.${element.config.name}.$invalid || ${this.checkVariableExists('$v.schema.' + element.config.name)} && $v.schema.${element.config.name}.$invalid }`;
+            properties[':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})`;
+          }
         }
       },
       onbuild({ screen }) {
@@ -21,6 +29,22 @@ export default {
     });
   },
   methods: {
+    ...mapGetters("globalErrorsModule", ["getMode"]),
+    isValidVariableName(name) {
+      const validVariableNameExp = RegExp('^[A-Za-z][0-9a-zA-Z_$]*$');
+      const nameParts = name.split(".");
+      let valid = true;
+      nameParts.forEach((item) => {
+        if (!validVariableNameExp.test(item)) {
+          valid = false;
+        }
+        if (javascriptReservedKeywords.split(",").includes(item)) {
+          valid = false;
+        }
+      });
+
+      return valid;
+    },
     checkVariableExists(name) {
       const check =name.split('.').reduce((check, el) => {
         check.variable = check.variable ? `${check.variable}.${el}` : el;

package/src/mixins/extensions/Watchers.js

@@ -21,7 +21,7 @@ export default {
         screen.mixins.push(watchersMixin);
         definition.watchers.filter(this.filterWatchers).forEach((watcher) => {
           this.addMounted(screen, `
-            this.$nextTick(() => this.$watch('${watcher.watching}', (newValue) => {
+            this.$nextTick(() => this.$watch('vdata.${watcher.watching}', (newValue) => {
               if (typeof newValue !== 'undefined') {
                 this.queueWatcher(${JSON.stringify(watcher)});
               }

package/src/mixins/watchers.js

@@ -3,7 +3,7 @@ import _ from 'lodash';
 
 const broadcastEvent = '.Illuminate\\\\Notifications\\\\Events\\\\BroadcastNotificationCreated';
 
-const debounce_time = 1000;
+const debounce_time = 500;
 
 export default {
   data() {
@@ -69,7 +69,7 @@ export default {
       }).then((response) => {
         // If watcher has an output variable and is a script
         if (watcher.output_variable && (watcher.script_key || '').length === 0) {
-          this.setValue(watcher.output_variable, response);
+          this.setValue(watcher.output_variable, response, this.vdata);
         }
 
         //update mapped values
@@ -80,7 +80,7 @@ export default {
           if (typeof this.getValue(`${map.key}_was_filled__`) !== 'undefined') {
             // If the variable already exist it must be set as filled and updated
             this.setValue(`${map.key}_was_filled__`, true);
-            this.setValue(map.key, response[map.key]);
+            this.setValue(map.key, response[map.key], this.vdata);
           }
           else {
             // If it is a new variable, the value  is set directly

package/src/store/modules/globalErrorsModule.js

@@ -1,4 +1,5 @@
 import { debounce } from "lodash";
+import { findRootScreen } from "../../mixins/DataReference";
 
 const namespaced = true;
 
@@ -30,8 +31,13 @@ function countErrors(obj) {
   return errors;
 }
 
-const updateValidationRules = async (mainScreen, commit) => {
-  await mainScreen.loadValidationRules();
+const updateValidationRules = async (screen, commit) => {
+  const mainScreen = findRootScreen(screen);
+  try {
+    await mainScreen.loadValidationRules();
+  } catch (error) {
+    console.warn("There was a problem rendering the screen", error);
+  }
   const validate = mainScreen.$v;
   // update the global error state used by submit buttons
   if (validate) {
@@ -56,14 +62,17 @@ const updateValidationRules = async (mainScreen, commit) => {
     });
   }
 };
+
 const updateValidationRulesDebounced = debounce(updateValidationRules, 1000);
 
 const globalErrorsModule = {
   namespaced,
   state: () => {
     return {
+      locked: false,
       valid: true,
-      message: ""
+      message: "",
+      mode: ""
     };
   },
   getters: {
@@ -72,11 +81,17 @@ const globalErrorsModule = {
     },
     getErrorMessage(state) {
       return state.message;
+    },
+    getMode(state) {
+      return state.mode;
     }
   },
   mutations: {
     basic(state, payload) {
       state[payload.key] = payload.value;
+    },
+    setMode(state, mode) {
+      state.mode = mode;
     }
   },
   actions: {
@@ -88,7 +103,7 @@ const globalErrorsModule = {
     },
     close({ commit }) {
       commit("basic", { key: "valid", value: true });
-    }
+    },
   }
 };
 

package/src/mixins/LoopControl.js

@@ -1,23 +0,0 @@
-export default {
-  methods: {
-    initLoopVariable(variable, config) {
-      if (config.settings.type === 'existing') {
-        // Do not initialize any variables if the loop is
-        // configured to use existing data.
-        // Unless it's null, then set it to an empty array
-        if (this.getValue(variable) === null) {
-          this.setValue(variable, []);
-        }
-        return;
-      }
-
-      let array = this.getValue(variable);
-      if (!array) {
-        const times = Number(config.settings.times);
-        array = [];
-        for (let i = 0; i < times; i++) array.push({});
-      }
-      this.setValue(variable, array);
-    },
-  },
-};