@processmaker/screen-builder 2.60.3 → 2.61.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.60.3",
+  "version": "2.61.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -39,7 +39,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.41.4",
+    "@processmaker/vue-form-elements": "0.42.0",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -88,7 +88,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.41.4",
+    "@processmaker/vue-form-elements": "0.42.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/App.vue

@@ -218,6 +218,7 @@ import VueFormRenderer from './components/vue-form-renderer.vue';
 import MonacoEditor from 'vue-monaco';
 import canOpenJsonFile from './mixins/canOpenJsonFile';
 import { cloneDeep, debounce } from 'lodash';
+import { mapMutations } from 'vuex';
 
 // Bring in our initial set of controls
 import controlConfig from './form-builder-controls';
@@ -420,6 +421,7 @@ export default {
     this.loadFromLocalStorage();
   },
   methods: {
+    ...mapMutations("globalErrorsModule", { setStoreMode: "setMode" }),
     // eslint-disable-next-line func-names
     updateDataInput: debounce(function () {
       this.updateDataInputNow();
@@ -456,6 +458,7 @@ export default {
       } else {
         this.$refs.builder.refreshContent();
       }
+      this.setStoreMode(this.mode);
       this.mode = mode;
     },
     loadFromLocalStorage() {

package/src/components/index.js

@@ -43,6 +43,22 @@ export {
   Task,
 };
 
+/**
+ * Gets the screen parent or null if don't have
+ * @returns {object|null}
+ */
+ function findScreenOwner(control) {
+  let owner = control.$parent;
+  while (owner) {
+    const isScreen = owner.$options.name === "ScreenContent";
+    if (isScreen) {
+      return owner;
+    }
+    owner = owner.$parent;
+  }
+  return null;
+}
+
 // Export our Vue plugin as our default
 export default {
   install(Vue) {
@@ -87,6 +103,13 @@ export default {
       }
     });
     Vue.mixin({ store });
+
+    //Helper to access data reference.
+    Vue.mixin({ methods:{ getScreenDataReference(customProperties = null, setter = null) {
+      const control = this;
+      const screen = findScreenOwner(control);
+      return screen.getDataReference(customProperties, setter);
+    }}});
   }
 };
 

package/src/components/renderer/add-loop-row.vue

@@ -20,6 +20,8 @@
 </template>
 
 <script>
+import { mapActions } from "vuex";
+
 export default {
   props: {
     value: Array,
@@ -27,7 +29,7 @@ export default {
     error: String,
   },
   methods: {
-    add() {
+    async add() {
       this.value.push({});
     },
     remove() {

package/src/components/renderer/form-button.vue

@@ -8,17 +8,13 @@
 
 <script>
 import Mustache from 'mustache';
+import { mapActions, mapState } from "vuex";
 import { getValidPath } from '@/mixins';
-import { mapState } from 'vuex';
+
 
 export default {
   mixins: [getValidPath],
   props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData'],
-  watch: {
-    valid(valid) {
-      this.isInvalid = !valid;
-    }
-  },
   computed: {
     ...mapState('globalErrorsModule', ['valid']),
     classList() {
@@ -26,7 +22,7 @@ export default {
       return {
         btn: true,
         ['btn-' + variant]: true,
-        disabled: this.event === 'submit' && this.isInvalid,
+        disabled: this.event === 'submit' && !this.valid
       };
     },
     options() {
@@ -49,11 +45,6 @@ export default {
       };
     },
   },
-  data() {
-    return {
-      isInvalid: false,
-    };
-  },
   methods: {
     setValue(parent, name, value) {
       if (parent) {
@@ -64,7 +55,7 @@ export default {
         }
       }
     },
-    click() {
+    async click() {
       if (this.event === 'script') {
         const trueValue = this.fieldValue || '1';
         const value = (this.value == trueValue) ? null : trueValue;

package/src/components/renderer/form-image.vue

@@ -18,7 +18,9 @@ export default {
   },
   computed: {
     imageUrl() {
-      return get(this.validationData, this.variableName || this.imageName);
+      if (this.mode !== 'editor') {
+        return get(this.getScreenDataReference(), this.variableName || this.imageName);
+      }
     },
   },
 };

package/src/components/renderer/form-masked-input.vue

@@ -11,6 +11,7 @@
       class="form-control"
       :class="classList"
       type="text"
+      @change="onChange"
     />
     <input v-else
       v-model="localValue"
@@ -21,6 +22,7 @@
       :class="classList"
       :type="dataType"
       :maxlength="maxlength"
+      @change="onChange"
     >
     <template v-if="validator && validator.errorCount">
       <div class="invalid-feedback" v-for="(errors, index) in validator.errors.all()" :key="index">
@@ -41,6 +43,7 @@ import { TheMask } from 'vue-the-mask';
 import { getUserDateFormat, getUserDateTimeFormat } from '@processmaker/vue-form-elements/src/dateUtils';
 import ValidationMixin from '@processmaker/vue-form-elements/src/components/mixins/validation';
 import moment from 'moment';
+import debounce from "lodash/debounce";
 
 const uniqIdsMixin = createUniqIdsMixin();
 const componentTypes = {
@@ -210,6 +213,9 @@ export default {
     }
   },
   methods: {
+    onChange() {
+      this.$emit("change", this.convertToData(this.localValue));
+    },
     getUserConfig() {
       return (window.ProcessMaker && window.ProcessMaker.user) || {};
     },

package/src/components/renderer/form-record-list.vue

@@ -156,7 +156,7 @@
 import mustacheEvaluation from '../../mixins/mustacheEvaluation';
 import _ from 'lodash';
 import { dateUtils } from '@processmaker/vue-form-elements';
-//import ScreenRenderer from '../screen-renderer.vue';
+import { mapActions, mapState } from "vuex";
 
 const jsonOptionsActionsColumn = {
   key: '__actions',
@@ -411,7 +411,7 @@ export default {
       let {_parent, ...result} = this.addItem;
       this.initFormValues = _.cloneDeep(result);
     },
-    handleOk(bvModalEvt) {
+    async handleOk(bvModalEvt) {
       bvModalEvt.preventDefault();
 
       if (this.$refs.addRenderer.$refs.renderer.$refs.component.$v.vdata.$invalid) {

package/src/mixins/DataReference.js

@@ -2,13 +2,15 @@
  * Gets the screen parent or null if don't have
  * @returns {object|null}
  */
-function findScreenOwner(control) {
+function findScreenOwner(control, lastScreenContentIfNull = false) {
   let owner = control;
   let level = 1;
+  let lastScreenContent = null;
   while (owner) {
     const isScreen = owner.$options.name === "ScreenContent";
     const isNested = owner.$options.name === "FormNestedScreen";
     if (isScreen) {
+      lastScreenContent = owner;
       level--;
     }
     if (isNested) {
@@ -19,7 +21,7 @@ function findScreenOwner(control) {
     }
     owner = owner.$parent;
   }
-  return null;
+  return lastScreenContentIfNull ? lastScreenContent : null;
 }
 /**
  * Wrap the data of a control using a Proxy
@@ -83,3 +85,11 @@ export default {
     }
   }
 };
+
+/**
+ * Gets the root screen or same element if couldn't find
+ * @returns {object|null}
+ */
+export function findRootScreen(element) {
+  return findScreenOwner(element, true) || element;
+}

package/src/mixins/Json2Vue.js

@@ -1,8 +1,8 @@
+import _ from "lodash";
 import extensions from './extensions';
 import ScreenBase from './ScreenBase';
 import CountElements from '../CountElements';
 import ValidationsFactory from '../ValidationsFactory';
-import _, { isEqual } from 'lodash';
 
 let screenRenderer;
 
@@ -184,12 +184,26 @@ export default {
       return reference;
     },
     loadItems(items, component, screen, definition, formIndex) {
-      items.forEach(element => {
+      items.forEach((element) => {
         const componentName = element[this.nodeNameProperty];
         const nodeName = this.alias[componentName] || componentName;
         const properties = { ...element.config };
         // Extensions.onloadproperties
-        this.extensions.forEach((ext) => ext.onloadproperties instanceof Function && ext.onloadproperties.bind(this)({ properties, element, component, items, nodeName, componentName, screen, definition , formIndex}));
+        this.extensions.forEach(
+          (ext) =>
+            ext.onloadproperties instanceof Function &&
+            ext.onloadproperties.bind(this)({
+              properties,
+              element,
+              component,
+              items,
+              nodeName,
+              componentName,
+              screen,
+              definition,
+              formIndex
+            })
+        );
         // Create component
         const node = this.createComponent(nodeName, properties);
         // Create wrapper
@@ -291,6 +305,7 @@ export default {
           props: {},
           computed: {},
           methods: {},
+          created: [],
           data: {},
           watch: {},
           mounted: [],
@@ -306,7 +321,27 @@ export default {
           ext.onbuild instanceof Function ? ext.onbuild.bind(this)({ screen: component, definition }) : null;
         });
         // Build data
-        component.data = new Function('const data = {};' + Object.keys(component.data).map(key => `this.setValue(${JSON.stringify(key)}, ${component.data[key]}, data);`).join('\n') + 'return data;');
+        const hiddenVars = ["currentPage__"];
+        const dataCode = `let value;const data = {};
+          ${Object.keys(component.data)
+            .map((key) => {
+              const { code, variable } = component.data[key];
+              return `value = ${code};
+                data.${this.safeDotName(key)} = value;
+                ${
+                  !variable ||
+                  hiddenVars.includes(variable) ||
+                  variable.endsWith("__")
+                    ? ""
+                    : `this.setValue(${JSON.stringify(
+                        variable
+                      )}, value, this.vdata);`
+                }`;
+            })
+            .join("\n")};
+            return data;`;
+        // eslint-disable-next-line no-new-func
+        component.data = new Function(dataCode);
         // Build watchers
         Object.keys(component.watch).forEach((key) => {
           const watch = { deep: true };
@@ -317,6 +352,8 @@ export default {
         // Add validation rules
         this.addValidationRulesLoader(component, definition);
         // Build mounted
+        component.created = new Function(component.created.join('\n'));
+        // Build mounted
         component.mounted = new Function(component.mounted.join('\n'));
         return component;
       } catch (error) {
@@ -331,8 +368,19 @@ export default {
         };
       }
     },
-    addData(screen, name, code) {
-      screen.data[name] = code;
+    addProp(screen, name, value) {
+      screen.props[name] = value;
+    },
+    addData(screen, name, code, variable = null) {
+      screen.data[name] = { code, variable };
+    },
+    addComputed(screen, name, getterCode, setterCode) {
+      screen.computed[name] = {
+        // eslint-disable-next-line no-new-func
+        get: new Function(getterCode),
+        // eslint-disable-next-line no-new-func
+        set: new Function("value", setterCode)
+      };
     },
     addWatch(screen, name, code, options = {}) {
       if (screen.watch[name]) {
@@ -344,6 +392,9 @@ export default {
     addMounted(screen, code) {
       screen.mounted.push(code);
     },
+    addCreated(screen, code) {
+      screen.created.push(code);
+    },
     addEvent(properties, event, code) {
       properties[`@${event}`] = code;
     },
@@ -367,13 +418,19 @@ export default {
         });
         return response;
       }
-      const updateValidationRules = function (screenComponent, validations) {
+      const updateValidationRules = (screenComponent, validations) => {
         return new Promise((resolve) => {
           screenComponent.ValidationRules__ = validations;
           screenComponent.$nextTick(() => {
-            if (screenComponent.$v) {
-              screenComponent.$v.$touch();
-              resolve();
+            try {
+              if (screenComponent.$v) {
+                screenComponent.$v.$touch();
+                resolve();
+              }
+            } catch (error) {
+              if (this.getMode() === "preview") {
+                console.warn("There was a problem rendering the screen", error);
+              }
             }
           });
         });

package/src/mixins/ScreenBase.js

@@ -1,15 +1,17 @@
-import { get, isEqual, set } from 'lodash';
+import { get, isEqual, set, debounce } from 'lodash';
 import Mustache from 'mustache';
 import { mapActions, mapState } from 'vuex';
 import { ValidationMsg } from './ValidationRules';
 import DataReference from "./DataReference";
+import computedFields from "./computedFields";
+import { findRootScreen } from "./DataReference";
 
 const stringFormats = ['string', 'datetime', 'date', 'password'];
 const parentReference = [];
 
 export default {
   name: "ScreenContent",
-  mixins: [DataReference],
+  mixins: [DataReference, computedFields],
   schema: [
     function() {
       if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
@@ -45,7 +47,8 @@ export default {
   computed: {
     ...mapState("globalErrorsModule", {
       valid__: "valid",
-      message__: "message"
+      message__: "message",
+      locked__: "locked",
     }),
     references__() {
       return this.$parent && this.$parent.references__;
@@ -134,14 +137,15 @@ export default {
     },
     mustache(text) {
       try {
-        const data = Object.assign({_parent: this._parent}, this.vdata);
+        const data = this.getDataReference();
         return text && Mustache.render(text, data);
       } catch (e) {
         return 'MUSTACHE: ' + e.message;
       }
     },
     async submitForm() {
-      await this.validateNow(this);
+      await this.validateNow(findRootScreen(this));
+      console.log(this.valid__, this.message__);
       if (!this.valid__) {
         window.ProcessMaker.alert(this.message__, "danger");
         // if the form is not valid the data is not emitted
@@ -149,6 +153,10 @@ export default {
       }
       this.$emit('submit', this.vdata);
     },
+    resetValue(safeDotName, variableName) {
+      this.setValue(safeDotName, null);
+      this.updateScreenDataNow(safeDotName, variableName);
+    },
     getValidationData() {
       return this.vdata;
     },
@@ -166,9 +174,44 @@ export default {
         value = [];
       } else if (component === 'FormSelectList' && !config.options.allowMultiSelect) {
         value = null;
+      } else if (component === "FormLoop") {
+        value = this.emptyLoopValue(config);
       }
       return value;
     },
+    emptyLoopValue(config) {
+      if (config.settings.type === "existing") {
+        return [];
+      }
+      const times = Number(config.settings.times);
+      const loopVariable = [];
+      for (let i = 0; i < times; i++) {
+        loopVariable.push({});
+      }
+      return loopVariable;
+    },
+    updateScreenData(safeDotName, variable) {
+      this[`${safeDotName}_was_filled__`] = true;
+      this.blockUpdate(safeDotName, 210);
+      this.setValueDebounced(variable, this[safeDotName], this.vdata);
+    },
+    updateScreenDataNow(safeDotName, variable) {
+      this[`${safeDotName}_was_filled__`] = true;
+      this.setValue(variable, this[safeDotName], this.vdata);
+      this.unblockUpdate(safeDotName);
+    },
+    blockUpdate(safeDotName, time) {
+      this.blockedUpdates[safeDotName] = new Date().getTime() + time;
+    },
+    unblockUpdate(safeDotName) {
+      this.blockUpdate(safeDotName, 0);
+    },
+    canUpdate(safeDotName) {
+      return (
+        !this.blockedUpdates[safeDotName] ||
+        this.blockedUpdates[safeDotName] < new Date().getTime()
+      );
+    },
     getValue(name, object = this) {
       return object ? get(object, name) : undefined;
     },
@@ -214,6 +257,32 @@ export default {
         }
       }
     },
+    addNonDefinedComputedAttributes(value, key, owner = null) {
+      if (value instanceof Array) {
+        value.forEach((item, index) => {
+          this.addNonDefinedComputedAttributes(item, index, value);
+        });
+      } else if (value instanceof Object) {
+        Object.keys(value).forEach((k) => {
+          this.addNonDefinedComputedAttributes(value[k], k, value);
+        });
+      } else if (
+        owner &&
+        owner instanceof Object &&
+        !(value instanceof Array)
+      ) {
+        // check if value is reactive using getOwnPropertyDescriptor
+        const descriptor = Object.getOwnPropertyDescriptor(owner, key);
+        const isReactive = descriptor && descriptor.get;
+        if (!isReactive) {
+          // remove static value
+          delete owner[key];
+          // add reactive value
+          this.$set(owner, key, value);
+        }
+      }
+      return value;
+    },
     validationMessage(validation) {
       const message = [];
       Object.keys(ValidationMsg).forEach(key => {
@@ -234,8 +303,26 @@ export default {
     setCurrentPage(page) {
       this.currentPage__ = page;
     },
+    setValueAsync(name, value, object = this, defaults = object) {}
   },
   validations() {
     return { vdata: this.ValidationRules__ };
   },
+  created() {
+    this.blockedUpdates = {};
+    const debouncedValuesQueue = [];
+    const setDebouncedValues = debounce(() => {
+      debouncedValuesQueue.forEach((args) => {
+        this.setValue(...args);
+      });
+    }, 210);
+    this.setValueDebounced = (...args) => {
+      debouncedValuesQueue.push(args);
+      setDebouncedValues();
+    };
+    this.setValueAsync = (name, value, object = this, defaults = object) =>
+      Promise.resolve().then(() => {
+        this.setValue(name, value, object, defaults);
+      });
+  }
 };

package/src/mixins/VisibilityRule.js

@@ -1,32 +1,15 @@
-import { Parser } from 'expr-eval';
+import { Parser } from "expr-eval";
 
 export default {
   methods: {
     visibilityRuleIsVisible(rule) {
       try {
-        const that = this;
-        const dataWithParent = new Proxy(
-          {},
-          {
-            get: (target, name) => {
-              if (name === "_parent") {
-                return that._parent;
-              }
-              return that.vdata[name];
-            },
-            has: (target, name) => {
-              if (name === "_parent") {
-                return that._parent !== undefined;
-              }
-              return that.vdata[name] !== undefined;
-            }
-          }
-        );
+        const dataWithParent = this.getDataReference();
         const isVisible = Boolean(Parser.evaluate(rule, dataWithParent));
         return isVisible;
       } catch (e) {
         return false;
       }
-    },
-  },
+    }
+  }
 };

package/src/mixins/extensions/ComputedFields.js

@@ -1,35 +1,31 @@
-import computedFields from '../computedFields';
-
 export default {
   methods: {
+    /**
+     * Implements computed fields like this:
+     *
+     * calcProperty() {
+     *   let value = this.evaluateExpression('return formula();', 'javascript');
+     *   value = this.addNonDefinedComputedAttributes(value);
+     *   this.setValueAsync("calcProperty", value, this.vdata);
+     * }
+     */
     computedFields(screen, definition) {
-      // Add computed fields
-      screen.mixins.push(computedFields);
-
-      for (const computed of definition.computed) {
-        screen.computed[computed.property] = {
-          get: (() => {
-            const formula = JSON.stringify(computed.formula);
-            const type = JSON.stringify(computed.type);
-
-            return new Function(`return this.evaluateExpression(${formula}, ${type});`);
-          })(),
-          set() {
-            // Do nothing (as it's not allowed)
-          },
-        };
-
-        this.addWatch(
-          screen,
-          computed.property,
-          `this.setValue(${JSON.stringify(computed.property)}, value, this.vdata);`
-        );
-
-        this.addMounted(screen, `
-          this.setValue(${JSON.stringify(computed.property)}, this.getValue(${JSON.stringify(computed.property)}), this.vdata, this);
-        `);
-      }
-    },
+      // For each computed field defined
+      definition.computed.forEach((computed) => {
+        const formula = JSON.stringify(computed.formula);
+        const type = JSON.stringify(computed.type);
+        const name = JSON.stringify(computed.property);
+        const safeDotName = this.safeDotName(computed.property);
+        const code = `
+        let value = this.evaluateExpression(${formula}, ${type});
+        value = this.addNonDefinedComputedAttributes(value);
+        this.setValue(${name}, value, this.vdata);
+        return value;`;
+        this.addComputed(screen, safeDotName, code, "");
+        // required to enable reactivity of computed field
+        this.addWatch(screen, safeDotName, "");
+      });
+    }
   },
   mounted() {
     this.extensions.push({
@@ -37,7 +33,7 @@ export default {
         if (definition.computed) {
           this.computedFields(screen, definition);
         }
-      },
+      }
     });
-  },
+  }
 };