@processmaker/screen-builder 2.16.4 → 2.16.5

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.16.4",
+  "version": "2.16.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.16.4",
+  "version": "2.16.5",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/DataProvider.js

@@ -51,9 +51,9 @@ export default {
   baseURL() {
     return localStorage.getItem('baseURL');
   },
-  
+
   // Methods below are used in the components
-  
+
   getTasks(params) {
     const endpoint = _.get(window, 'PM4ConfigOverrides.getTasksEndpoint', '/tasks');
     return this.get(endpoint + params).then(response => {
@@ -83,7 +83,8 @@ export default {
       const cache = this.screensCache.find(screen => screen.id == id);
       if (cache) {
         resolve({data: cache});
-      } else {
+      }
+      if (!cache && id != undefined) {
         const request = this.get(endpoint + `/${id}${query}`);
         request.then(response => {
           if (response.data.nested) {
@@ -94,7 +95,7 @@ export default {
       }
     });
   },
-  
+
   postScript(id, params, options = {}) {
     let endpoint = _.get(
       window,

package/src/ValidationsFactory.js

@@ -1,6 +1,7 @@
 import { validators } from './mixins/ValidationRules';
 import DataProvider from './DataProvider';
 import { get, set } from 'lodash';
+import { Parser } from 'expr-eval';
 
 let globalObject = typeof window === 'undefined'
   ? global
@@ -8,6 +9,7 @@ let globalObject = typeof window === 'undefined'
 class Validations {
   screen = null;
   firstPage = 0;
+  data = {};
   constructor(element, options) {
     this.element = element;
     Object.assign(this, options);
@@ -33,7 +35,7 @@ class Validations {
 class ArrayOfFieldsValidations extends Validations {
   async addValidations(validations) {
     for (const item of this.element) {
-      await ValidationsFactory(item, { screen: this.screen }).addValidations(validations);
+      await ValidationsFactory(item, { screen: this.screen, data: this.data }).addValidations(validations);
     }
   }
 }
@@ -46,7 +48,7 @@ class ScreenValidations extends Validations {
     // add validations for page 1
     if (this.element.config[this.firstPage]) {
       this.element.pagesValidated = [this.firstPage];
-      const screenValidations = ValidationsFactory(this.element.config[this.firstPage].items, { screen: this.element });
+      const screenValidations = ValidationsFactory(this.element.config[this.firstPage].items, { screen: this.element, data: this.data });
       await screenValidations.addValidations(validations);
       delete this.element.pagesValidated;
     }
@@ -60,7 +62,7 @@ class FormNestedScreenValidations extends Validations {
   async addValidations(validations) {
     const definition = await this.loadScreen(this.element.config.screen);
     if (definition && definition[0] && definition[0].items) {
-      await ValidationsFactory(definition[0].items, { screen: this.screen }).addValidations(validations);
+      await ValidationsFactory(definition[0].items, { screen: this.screen, data: this.data }).addValidations(validations);
     }
   }
 
@@ -86,7 +88,8 @@ class FormLoopValidations extends Validations {
     set(validations, this.element.config.name, {});
     const loopField = get(validations, this.element.config.name);
     loopField['$each'] = [];
-    await ValidationsFactory(this.element.items, { screen: this.screen }).addValidations(loopField['$each']);
+    const firstRow = this.data[0] || {};
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow } }).addValidations(loopField['$each']);
   }
 }
 
@@ -95,7 +98,7 @@ class FormLoopValidations extends Validations {
  */
 class FormMultiColumnValidations extends Validations {
   async addValidations(validations) {
-    await ValidationsFactory(this.element.items, { screen: this.screen }).addValidations(validations);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
   }
 }
 
@@ -107,7 +110,7 @@ class PageNavigateValidations extends Validations {
     if (!this.screen.pagesValidated.includes(parseInt(this.element.config.eventData))) {
       this.screen.pagesValidated.push(parseInt(this.element.config.eventData));
       if (this.screen.config[this.element.config.eventData] && this.screen.config[this.element.config.eventData].items) {
-        await ValidationsFactory(this.screen.config[this.element.config.eventData].items, { screen: this.screen }).addValidations(validations);
+        await ValidationsFactory(this.screen.config[this.element.config.eventData].items, { screen: this.screen, data: this.data }).addValidations(validations);
       }
     }
   }
@@ -133,6 +136,19 @@ class FormElementValidations extends Validations {
     const fieldName = this.element.config.name;
     const validationConfig = this.element.config.validation;
 
+    // Disable validations if field is hidden
+    if (this.element.config.conditionalHide) {
+      let visible = true;
+      try {
+        visible = !!Parser.evaluate(this.element.config.conditionalHide, this.data);
+      } catch (error) {
+        visible = false;
+      }
+      if (!visible) {
+        return;
+      }
+    }
+
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
     if (validationConfig instanceof Array) {
@@ -166,7 +182,7 @@ class FormElementValidations extends Validations {
       fieldValidation[validationConfig] = validationFn;
     }
     if (this.element.items) {
-      ValidationsFactory(this.element.items, { screen: this.screen }).addValidations(validations);
+      ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
     }
   }
   camelCase(name) {

package/src/components/inspector/loop.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="form-group border-bottom pb-3">
+    <div v-if="screenType == 'form'" class="form-group border-bottom pb-3">
       <label for="type">{{ $t('Data Source') }}</label>
       <b-form-select id="type" v-model="settings.type" :options="options" data-cy="inspector-source"/>
     </div>
@@ -17,7 +17,7 @@
     </div>
 
 
-    <div v-if="settings.type === 'new'" class="form-group border-bottom">
+    <div v-if="screenType == 'form' && settings.type === 'new'" class="form-group border-bottom">
       <FormInput
         v-model="settings.times"
         :label="$t('Default Loop Count')"
@@ -28,7 +28,7 @@
       />
     </div>
 
-    <form-checkbox name="add"
+    <form-checkbox v-if="screenType == 'form'" name="add"
       :label="$t('Allow additional loops')"
       v-model="settings.add"
       :helper="$t('Check this box to allow task assignee to add additional loops')"
@@ -41,7 +41,7 @@
 import { FormInput, FormCheckbox } from '@processmaker/vue-form-elements';
 
 export default {
-  props: ['value'],
+  props: ['value', 'screenType'],
   inheritAttrs: false,
   components: { FormInput, FormCheckbox },
   data() {

package/src/mixins/Json2Vue.js

@@ -335,8 +335,11 @@ export default {
       component.methods.loadValidationRules = function() {
         // Asynchronous loading of validations
         const validations = {};
-        ValidationsFactory(definition, { screen: definition, firstPage }).addValidations(validations).then(() => {
+        ValidationsFactory(definition, { screen: definition, firstPage, data: this.vdata }).addValidations(validations).then(() => {
           this.ValidationRules__ = validations;
+          this.$nextTick(() => {
+            this.$v.$touch();
+          });
         });
       };
       component.mounted.push('this.loadValidationRules()');

package/src/mixins/ScreenBase.js

@@ -1,4 +1,4 @@
-import { get, isEqual, set, cloneDeepWith } from 'lodash';
+import { get, isEqual, set } from 'lodash';
 import Mustache from 'mustache';
 import { ValidationMsg } from './ValidationRules';
 
@@ -138,12 +138,6 @@ export default {
     },
   },
   validations() {
-    const defaultValidations = cloneDeepWith(this.ValidationRules__);
-    if (this.hiddenFields__.length) {
-      this.hiddenFields__.forEach((field) => {
-        set(defaultValidations, field, {});
-      });
-    }
-    return { vdata: defaultValidations };
+    return { vdata: this.ValidationRules__ };
   },
 };

package/src/mixins/VisibilityRule.js

@@ -1,20 +1,25 @@
 import { Parser } from 'expr-eval';
 
 export default {
+  mounted() {
+    this.$root.$on('refresh-validation-rules', () => {
+      this.loadValidationRules();
+    });
+  },
   methods: {
     visibilityRuleIsVisible(rule, fieldName) {
       try {
         const data = Object.assign({ _parent: this._parent }, this.vdata);
         const isVisible = !!Parser.evaluate(rule, Object.assign({}, this, data));
-        
-        if (fieldName) {
-          // Update the array of hidden fields
-          const fileExists = this.hiddenFields__.indexOf(fieldName) !== -1;
-          if (isVisible && fileExists) {
-            this.hiddenFields__ = this.hiddenFields__.filter((f) => f !== fieldName);
-          } else if (!isVisible && !fileExists) {
-            this.hiddenFields__.push(fieldName);
-          }
+
+        // Update the array of hidden fields
+        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');
         }
 
         return isVisible;