@processmaker/screen-builder 2.5.28 → 2.5.30-PATCH4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.5.28",
+  "version": "2.5.30-PATCH4",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -44,7 +44,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.18.4-P",
+    "@processmaker/vue-form-elements": "0.18.4-R",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
     "@vue/cli-plugin-eslint": "^3.6.0",
@@ -84,7 +84,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.18.4-P",
+    "@processmaker/vue-form-elements": "0.18.4-R",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/ValidationsFactory.js

@@ -34,7 +34,7 @@ class Validations {
   isVisible() {
     // Disable validations if field is hidden
     let visible = true;
-    if (this.element.config.conditionalHide) {
+    if (!this.data.noData && this.element.config.conditionalHide) {
       try {
         visible = !!Parser.evaluate(this.element.config.conditionalHide, this.data);
       } catch (error) {
@@ -51,7 +51,7 @@ class Validations {
 class ArrayOfFieldsValidations extends Validations {
   async addValidations(validations) {
     for (const item of this.element) {
-      await ValidationsFactory(item, { screen: this.screen, data: this.data }).addValidations(validations);
+      await ValidationsFactory(item, { screen: this.screen, data: this.data, parentVisibilityRule: this.parentVisibilityRule}).addValidations(validations);
     }
   }
 }
@@ -81,8 +81,9 @@ class FormNestedScreenValidations extends Validations {
       return;
     }
     const definition = await this.loadScreen(this.element.config.screen);
+    let parentVisibilityRule = this.parentVisibilityRule ? this.parentVisibilityRule : this.element.config.conditionalHide;
     if (definition && definition[0] && definition[0].items) {
-      await ValidationsFactory(definition[0].items, { screen: this.screen, data: this.data }).addValidations(validations);
+      await ValidationsFactory(definition[0].items, { screen: this.screen, data: this.data, parentVisibilityRule }).addValidations(validations);
     }
   }
 
@@ -112,8 +113,7 @@ class FormLoopValidations extends Validations {
     set(validations, this.element.config.name, {});
     const loopField = get(validations, this.element.config.name);
     loopField['$each'] = {};
-    const firstRow = (get(this.data, this.element.config.name) || [{}])[0];
-    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow } }).addValidations(loopField['$each']);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, noData: true}, parentVisibilityRule: this.element.config.conditionalHide}).addValidations(loopField['$each']);
   }
 }
 
@@ -126,7 +126,7 @@ class FormMultiColumnValidations extends Validations {
     if (!this.isVisible()) {
       return;
     }
-    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data, parentVisibilityRule: this.element.config.conditionalHide }).addValidations(validations);
   }
 }
 
@@ -167,20 +167,8 @@ 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;
-      }
-    }
-
+    const conditionalHide = this.element.config.conditionalHide;
+    const parentVisibilityRule = this.parentVisibilityRule;
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
     if (validationConfig instanceof Array) {
@@ -203,7 +191,40 @@ class FormElementValidations extends Validations {
           params.push(fieldName);
           validationFn = validationFn(...params);
         }
-        fieldValidation[rule] = validationFn;
+        fieldValidation[rule] = function(...props) {
+          const data = props[1];
+          let dataWithParent = this.addReferenceToParents(data);
+          const nestedDataWithParent = this.addReferenceToParents(this.findParent(data));
+          if (nestedDataWithParent) {
+            dataWithParent = Object.assign(nestedDataWithParent, dataWithParent);
+          }
+          // Check Parent Visibility
+          if (parentVisibilityRule) {
+            let isParentVisible = true;
+            try {
+              isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);              
+            } catch (error) {
+              isParentVisible = false;
+            }
+
+            if (!isParentVisible ) {
+              return true;
+            }
+          }
+          // Check Field Visibility
+          let visible = true;
+          if (conditionalHide) {
+            try {
+              visible = !!Parser.evaluate(conditionalHide, dataWithParent);
+            } catch (error) {
+              visible = false;
+            }
+          }
+          if (!visible) {
+            return true;
+          }
+          return validationFn.apply(this,props);
+        };
       });
     } else if (typeof validationConfig === 'string' && validationConfig) {
       let validationFn = validators[validationConfig];
@@ -212,7 +233,40 @@ class FormElementValidations extends Validations {
         console.error(`Undefined validation rule "${validationConfig}"`);
         return;
       }
-      fieldValidation[validationConfig] = validationFn;
+      fieldValidation[validationConfig] = function(...props) {
+        const data = props[1];
+        let dataWithParent = this.addReferenceToParents(data);
+        const nestedDataWithParent = this.addReferenceToParents(this.findParent(data));
+        if (nestedDataWithParent) {
+          dataWithParent = Object.assign(nestedDataWithParent, dataWithParent);
+        }
+        // Check Parent Visibility
+        if (parentVisibilityRule) {
+          let isParentVisible = true;
+          try {
+            isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);
+          } catch (error) {
+            isParentVisible = false;
+          }
+
+          if (!isParentVisible) {
+            return true;
+          }
+        }
+        // Check Field Visibility
+        let visible = true;
+        if (conditionalHide) {
+          try {
+            visible = !!Parser.evaluate(conditionalHide, dataWithParent);
+          } catch (error) {
+            visible = false;
+          }
+        }
+        if (!visible) {
+          return true;
+        }
+        return validationFn.apply(this,props);
+      };
     }
     if (this.element.items) {
       ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
@@ -222,7 +276,6 @@ class FormElementValidations extends Validations {
     return name.replace(/_\w/g, m => m.substr(1, 1).toUpperCase());
   }
 }
-
 function ValidationsFactory(element, options) {
   if (element instanceof Array) {
     return new ArrayOfFieldsValidations(element, options);

package/src/components/renderer/file-download.vue

@@ -110,7 +110,7 @@ export default {
     listenRecordList(recordList, index, id) {
       const parent = this.parentRecordList(this);
       if (_.has(window, 'PM4ConfigOverrides.requestFiles') && parent === recordList) {
-        const prefix = (this.parentRecordList(this) === null) ? '' : recordList.name + '.';
+        const prefix = (this.parentRecordList(this) === null) ? '' : this.prefix;
         const fileDataName = prefix + this.name + (id ? '.' + id : '');
         this.fileInfo = window.PM4ConfigOverrides.requestFiles[fileDataName];
         this.loading  = false;

package/src/components/renderer/file-upload.vue

@@ -94,8 +94,6 @@ export default {
       (loop, removed) => this.listenRemovedLoop(loop, removed));
 
     this.removeDefaultClasses();
-    
-    this.checkIfInRecordList();
 
     this.setPrefix();
     if (this.$refs['uploader']) {
@@ -288,15 +286,6 @@ export default {
         this.prefix = parent.loopContext + '.';
       }
     },
-    setFileUploadNameForChildren(children, prefix) {
-      children.forEach(child => {
-        if (_.get(child, '$options.name') === 'FileUpload') {
-          child.prefix = prefix;
-        } else if (_.get(child, '$children', []).length > 0) {
-          this.setFileUploadNameForChildren(child.$children, prefix);
-        }
-      });
-    },
     addFile(file) {
       if (this.disabled) {
         file.ignored = true;
@@ -420,14 +409,6 @@ export default {
           : null;
       }
     },
-    checkIfInRecordList() {
-      const parent = this.parentRecordList(this);
-      if (parent !== null) {
-        const recordList = parent;
-        const prefix = recordList.name + '.';
-        this.setFileUploadNameForChildren(recordList.$children, prefix);
-      }
-    },
   },
 };
 </script>

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

@@ -5,7 +5,6 @@
 </template>
 
 <script>
-import Mustache from 'mustache';
 import { getValidPath } from '@/mixins';
 
 export default {
@@ -19,45 +18,6 @@ export default {
         ['btn-' + variant]: true,
       };
     },
-    options() {
-      if (!this.tooltip || this.event === 'submit') {
-        return {};
-      }
-
-      let content = '';
-      try {
-        content = Mustache.render(this.tooltip.content || '', this.transientData);
-      } catch (error) { error; }
-
-      return {
-        title: content,
-        html: true,
-        placement: this.tooltip.position || '',
-        trigger: 'hover',
-        variant: this.tooltip.variant || '',
-        boundary: 'window',
-      };
-    },
-    valid() {
-      if (this.$attrs.validate) {
-        return !this.$attrs.validate.$invalid;
-      }
-      return true;
-    },
-    message() {
-      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
-      this.errors = 0;
-      if (!this.valid) {
-        this.countErrors(this.$attrs.validate.vdata);
-        this.countErrors(this.$attrs.validate.schema);
-        let message = 'There are {{items}} validation errors in your form.';
-        if (this.errors === 1) {
-          message = 'There is a validation error in your form.';
-        }
-        return this.$t(message, {items: this.errors});
-      }
-      return '';
-    },
   },
   data() {
     return {

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

@@ -73,6 +73,7 @@
       :title="$t('Add')"
       header-close-content="×"
       data-cy="modal-add"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -85,6 +86,7 @@
         debug-context="Record List Add"
         :key="Array.isArray(value) ? value.length : 0"
         :_parent="validationData"
+        @update="updateRowDataNamePrefix"
       />
     </b-modal>
     <b-modal
@@ -98,6 +100,7 @@
       :title="$t('Edit Record')"
       header-close-content="&times;"
       data-cy="modal-edit"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -110,6 +113,7 @@
         debug-context="Record List Edit"
         :_parent="validationData"
         :key="editFormVersion"
+        @update="updateRowDataNamePrefix"
       />
     </b-modal>
     <b-modal
@@ -162,6 +166,7 @@ export default {
   props: ['name', 'label', 'fields', 'value', 'editable', '_config', 'form', 'validationData', 'formConfig', 'formComputed', 'formWatchers'],
   data() {
     return {
+      currentRowIndex: null,
       editFormVersion: 0,
       single: '',
       plural: '',
@@ -257,6 +262,12 @@ export default {
     },
   },
   methods: {
+    updateRowDataNamePrefix() {
+      this.setUploadDataNamePrefix(this.currentRowIndex);
+    },
+    emitShownEvent() {
+      window.ProcessMaker.EventBus.$emit('modal-shown');
+    },
     isImage(field, item) {
       const content = _.get(item, field.key);
       return typeof content === 'string' && content.substr(0,11) === 'data:image/';
@@ -265,6 +276,7 @@ export default {
       return field.key === '__filedownload';
     },
     setUploadDataNamePrefix(index = null) {
+      this.currentRowIndex = index;
       let  rowId = null;
       if (index !== null  && this.editItem) {
         rowId = this.editItem.row_id;
@@ -336,7 +348,7 @@ export default {
       // Reset edit to be a copy of our data model item
       this.editItem = JSON.parse(JSON.stringify(this.value[pageIndex]));
       this.editIndex = pageIndex;
-      // rebuild the edit screen to avoid 
+      // rebuild the edit screen to avoid
       this.editFormVersion++;
       this.$nextTick(() => {
         this.setUploadDataNamePrefix(pageIndex);
@@ -446,6 +458,9 @@ export default {
       this.$root.$emit('removed-record', this, recordData);
     },
   },
+  mounted() {
+    this.updateRowDataNamePrefix = _.debounce(this.updateRowDataNamePrefix, 100);
+  },
 };
 </script>
 

package/src/form-control-common-properties.js

@@ -95,7 +95,8 @@ export const keyNameProperty = {
   config: {
     label: 'Variable Name',
     name: 'Variable Name',
-    validation: 'regex:/^(?:[A-Za-z])(?:[0-9A-Z_a-z])*(?:\\.[0-9A-Z_a-z]+)*$/|required|not_in:' + javascriptReservedKeywords,
+    // Update tests/e2e/specs/Builder.spec.js when changing this
+    validation: 'regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$/|required|not_in:' + javascriptReservedKeywords,
     helper: 'A variable name is a symbolic name to reference information.',
   },
 };

package/src/mixins/ValidationRules.js

@@ -21,6 +21,7 @@ import {
   not,
   or,
   and,
+  type,
 } from 'vuelidate/lib/validators';
 
 export const ValidationMsg = {
@@ -55,6 +56,7 @@ export const ValidationMsg = {
   invalid_default_value: 'Invalid default value',
   customDate: 'Must be a valid Date',
   regex: 'Invalid value',
+  type: 'Invalid type.',
 };
 
 export const custom_date = (date) => {
@@ -225,4 +227,5 @@ export const validators = {
   notIn,
   regex,
   afterOrEqual: after_or_equal,
+  type,
 };