@processmaker/screen-builder 2.24.1 → 2.26.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.24.1",
+  "version": "2.26.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1738,9 +1738,9 @@
       }
     },
     "@processmaker/vue-form-elements": {
-      "version": "0.28.6",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.28.6.tgz",
-      "integrity": "sha512-uxHsOkCNLJEF4mJu7dK4+qn2SL/mWDswdoV1kQjNjQkwBk10uGXDdAbtliHRbld3HDMAPUQAu69c+1fS8pDqjA==",
+      "version": "0.28.7",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.28.7.tgz",
+      "integrity": "sha512-CVtaOlyrrcWLoY8bqUyb0KOi9e7kKf0oDdACyrvTpy7UzsaYP05lf6KOqMKyKUXAvpHg8UVJKjxJTbJfflNDKA==",
       "dev": true,
       "requires": {
         "@tinymce/tinymce-vue": "2.0.0",
@@ -10192,6 +10192,11 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "dev": true
     },
+    "is-proxy": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-proxy/-/is-proxy-1.0.6.tgz",
+      "integrity": "sha512-RzUROKx085vc7tpo9zCinKAmsD7ihAnXJ7HvKdcsc3m0XW/vpJDFSvZgutqMam0aBxpYBmDVYv48+T/+AMYl1g=="
+    },
     "is-regex": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.24.1",
+  "version": "2.26.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -30,6 +30,7 @@
     "*.js"
   ],
   "dependencies": {
+    "is-proxy": "^1.0.6",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.27",
@@ -44,7 +45,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.28.6",
+    "@processmaker/vue-form-elements": "0.28.7",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -85,7 +86,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.28.6",
+    "@processmaker/vue-form-elements": "0.28.7",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/App.vue

@@ -74,6 +74,13 @@
         <!-- Preview -->
         <b-row class="h-100 m-0" id="preview" v-show="displayPreview" data-cy="preview">
           <b-col class="overflow-auto h-100" data-cy="preview-content">
+            <div v-if="$store.getters['globalErrorsModule/isValidScreen'] === false" class="alert alert-danger mt-3">
+              <i class="fas fa-exclamation-circle"/>
+              {{ $store.getters['globalErrorsModule/getErrorMessage'] }}
+              <button type="button" class="close" aria-label="Close" @click="$store.dispatch('globalErrorsModule/close')">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
             <vue-form-renderer ref="renderer"
               :key="rendererKey"
               v-model="previewData"
@@ -422,10 +429,13 @@ export default {
       this.previewData = this.previewInputValid ? JSON.parse(this.previewInput) : {};
       this.rendererKey++;
       if (mode == 'preview') {
+        this.$dataProvider.flushScreenCache();
         this.preview.config = cloneDeep(this.config);
         this.preview.computed = cloneDeep(this.computed);
         this.preview.customCSS = cloneDeep(this.customCSS);
         this.preview.watchers = cloneDeep(this.watchers);
+      } else {
+        this.$refs.builder.refreshContent();
       }
     },
     loadFromLocalStorage() {

package/src/DataProvider.js

@@ -109,6 +109,10 @@ export default {
     }
   },
 
+  flushScreenCache() {
+    this.cachedScreenPromises.splice(0, this.cachedScreenPromises.length);
+  },
+
   postScript(id, params, options = {}) {
     let endpoint = _.get(
       window,

package/src/ValidationsFactory.js

@@ -10,6 +10,7 @@ class Validations {
   screen = null;
   firstPage = 0;
   data = {};
+  insideLoop = false;
   constructor(element, options) {
     this.element = element;
     Object.assign(this, options);
@@ -51,7 +52,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, parentVisibilityRule: this.parentVisibilityRule }).addValidations(validations);
+      await ValidationsFactory(item, { screen: this.screen, data: this.data, parentVisibilityRule: this.parentVisibilityRule, insideLoop: this.insideLoop }).addValidations(validations);
     }
   }
 }
@@ -114,13 +115,16 @@ class FormLoopValidations extends Validations {
     const loopField = get(validations, this.element.config.name);
     loopField['$each'] = {};
     this.checkForSiblings(validations);
-    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, noData:true }, parentVisibilityRule: this.element.config.conditionalHide }).addValidations(loopField['$each']);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, noData:true }, parentVisibilityRule: this.element.config.conditionalHide, insideLoop: true }).addValidations(loopField['$each']);
   }
   checkForSiblings(validations) {
     const siblings = [];
     const siblingValidations = [];
     // Find loops that reference the same variable
     this.screen.config.forEach(page => {
+      if (!page || !page.items) {
+        return;
+      }
       page.items.filter(item => {
         if (item.component === 'FormLoop' && item.config.name === this.element.config.name) {
           siblings.push(item);
@@ -215,6 +219,7 @@ class FormElementValidations extends Validations {
     const validationConfig = this.element.config.validation;
     const conditionalHide = this.element.config.conditionalHide;
     const parentVisibilityRule = this.parentVisibilityRule;
+    const insideLoop = this.insideLoop || false;
 
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
@@ -240,16 +245,14 @@ class FormElementValidations extends Validations {
         }
         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
+          const level = fieldName.split('.').length - 1;
+          const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level);
           if (parentVisibilityRule) {
+            const nextParentLevel = insideLoop ? 1 : 0;
+            const parentDataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level + nextParentLevel);
             let isParentVisible = true;
             try {
-              isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);              
+              isParentVisible = !!Parser.evaluate(parentVisibilityRule, parentDataWithParent);              
             } catch (error) {
               isParentVisible = false;
             }
@@ -282,16 +285,15 @@ class FormElementValidations extends Validations {
       }
       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);
-        }
+        const level = fieldName.split('.').length - 1;
+        const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level);
         // Check Parent Visibility
         if (parentVisibilityRule) {
+          const nextParentLevel = insideLoop ? 1 : 0;
+          const parentDataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level + nextParentLevel);
           let isParentVisible = true;
           try {
-            isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);
+            isParentVisible = !!Parser.evaluate(parentVisibilityRule, parentDataWithParent);
           } catch (error) {
             isParentVisible = false;
           }

package/src/components/inspector/screen-selector.vue

@@ -95,7 +95,10 @@ export default {
           return false;
         }
       }
-      this.$emit('input', this.storeId ? get(value, this.trackBy) : value);
+      const id = this.storeId ? get(value, this.trackBy) : value;
+      // Make sure to load latest config from screen and nested screens
+      this.$dataProvider.flushScreenCache();
+      this.$emit('input', id);
     },
   },
   mounted() {
@@ -107,6 +110,7 @@ export default {
       pmql += ' and id != ' + this.builder.screen.id;
     }
     this.pmql = pmql;
+    this.fields = 'screens.id,title';
   },
 };
 </script>

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

@@ -16,7 +16,7 @@
           >
             <i class="fas fa-file-download"/> {{ $t('Download') }}
           </b-btn>
-          {{ file.name }}
+          {{ file.file_name }}
         </div>
       </template>
       <div v-else>
@@ -39,18 +39,12 @@ export default {
       rowId: null,
     };
   },
-  props: ['name', 'value', 'endpoint', 'requestFiles', 'label'],
+  props: ['name', 'value', 'endpoint', 'requestFiles', 'label', 'transient-data'],
   mounted() {
-    this.$root.$on('set-upload-data-name',
-      (recordList, index, id) => this.listenRecordList(recordList, index, id));
-
     if (this.donwloadingNotAvailable) {
       // Not somewhere we can download anything (like web entry start event)
       return;
     }
-
-    this.checkIfInRecordList();
-    this.setPrefix();
     this.setFilesInfo();
   },
   watch: {
@@ -103,24 +97,11 @@ export default {
       }
       return false;
     },
+    requestData() {
+      return {_parent: {...this.$parent._parent}, ...this.transientData};
+    },
   },
   methods: {
-    parentRecordList(node) {
-      if (node.$parent && node.$parent.$options) {
-        if (node.$parent.$options._componentTag ===  'form-record-list') {
-          return node.$parent;
-        }
-        return this.parentRecordList(node.$parent);
-      }
-      return null;
-    },
-    listenRecordList(recordList, index, id) {
-      const parent = this.parentRecordList(this);
-      if (parent !== recordList) {
-        return;
-      }
-      this.rowId = (parent !== null) ? id : null;
-    },
     downloadFile(file) {
       if (this.collection) {
         this.downloadCollectionFile(file);
@@ -133,15 +114,16 @@ export default {
 
       if (_.has(window, 'PM4ConfigOverrides.getFileEndpoint')) {
         endpoint = window.PM4ConfigOverrides.getFileEndpoint;
-      }
-
-      if (endpoint && file.token) {
-        return `${endpoint}/${file.id}?&token=${file.token}`;
+        return `${endpoint}/${file.id}`;
       }
 
       return `/files/${file.id}/contents`;
     },
     setPrefix() {
+      if (this.name.startsWith('_parent.')) {
+        // do not set the loop prefix
+        return;
+      }
       let parent = this.$parent;
       let i = 0;
       while (!parent.loopContext) {
@@ -177,93 +159,53 @@ export default {
       const url = window.URL.createObjectURL(new Blob([response.data]));
       const link = document.createElement('a');
       link.href = url;
-      link.setAttribute('download', file.name);
+      link.setAttribute('download', file.file_name);
       document.body.appendChild(link);
       link.click();
     },
     setFilesInfo() {
       if (this.collection) {
+        this.setPrefix();
         this.setFilesInfoFromCollectionValue();
       } else {
         this.setFilesInfoFromRequest();
       }
     },
-    setFilesInfoFromRequest() {
-      if (!this.value) {
+    setFilesInfoFromRequest() { 
+      const fileId = this.value ? this.value : _.get(this.requestData, this.fileDataName, null);
+      let endpoint = this.endpoint;
+      
+      if (!this.requestId || !fileId) {
         return;
       }
-
-      let requestFiles = _.get(
-        window,
-        `PM4ConfigOverrides.requestFiles["${this.fileDataName}"]`,
-        []
-      );
-
-      requestFiles = requestFiles.filter(file => {
-        // Filter any requestFiles that don't exist in this component's value. This can happen if
-        // a file is uploaded but the task is not saved.
-        if (Array.isArray(this.value)) {
-          return this.value.some(valueFile => valueFile.file === file.id);
-        } else {
-          return file.id === this.value;
+      
+      if (!endpoint) {
+        endpoint = 'requests/' + this.requestId + '/files?id=' + fileId;
+        if (_.has(window, 'PM4ConfigOverrides.getFileEndpoint')) {
+          endpoint = window.PM4ConfigOverrides.getFileEndpoint;
+          endpoint += '/' + fileId;
         }
-      });
-
-      // Might be accessing individual files from inside a loop
-      if (requestFiles.length === 0 && this.fileDataName.endsWith('.file')) {
-        requestFiles = this.requestFileInsideALoop();
       }
 
-      this.filesInfo = requestFiles.map(file => {
-        const info = { id: file.id, name: file.file_name };
-        if (file.token) {
-          // web entry
-          info.token = file.token;
+      this.$dataProvider.get(endpoint).then(response => {
+        const fileInfo = response.data.data ? _.get(response, 'data.data.0', null) : _.get(response, 'data', null);
+        if (fileInfo) {
+          this.filesInfo.push(fileInfo);
+        } else {
+          window.ProcessMaker.alert(
+            this.$t('File Download Missing File'),
+            'danger'
+          );
         }
-        return info;
       });
     },
-    requestFileInsideALoop() {
-      const path = this.fileDataName.slice(0, -5);
-      const loopFile = _.get(
-        window,
-        `PM4ConfigOverrides.requestFiles.${path}`,
-        null
-      );
-      if (loopFile) {
-        return [loopFile]; // Treat as single file download
-      }
-      return [];
-    },
     setFilesInfoFromCollectionValue() {
-      if (!this.value) {
+      const files = this.value ? this.value : _.get(this.requestData, this.fileDataName);
+      if (!this.value && !files) {
         this.filesInfo = [];
         return;
       }
-      if (Array.isArray(this.value)) {
-        // multi file upload
-        this.filesInfo = this.value.map(value => value.file);
-      } else {
-        this.filesInfo = [this.value];
-      }
-
-    },
-    checkIfInRecordList() {
-      const parent = this.parentRecordList(this);
-      if (parent !== null) {
-        const recordList = parent;
-        const prefix = recordList.name + '.';
-        this.setFileUploadNameForChildren(recordList.$children, prefix);
-      }
-    },
-    setFileUploadNameForChildren(children, prefix) {
-      children.forEach(child => {
-        if (_.get(child, '$options.name') === 'FileDownload') {
-          child.prefix = prefix;
-        } else if (_.get(child, '$children', []).length > 0) {
-          this.setFileUploadNameForChildren(child.$children, prefix);
-        }
-      });
+      this.filesInfo = [this.value ? this.value : files];
     },
   },
 };

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

@@ -103,8 +103,6 @@ export default {
 
     this.removeDefaultClasses();
 
-    this.checkIfInRecordList();
-
     this.setPrefix();
     if (this.$refs['uploader']) {
       this.$refs['uploader'].$forceUpdate();
@@ -438,15 +436,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;
@@ -556,14 +545,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

@@ -1,9 +1,5 @@
 <template>
   <div class="form-group"  style="overflow-x: hidden">
-    <div class="alert alert-danger" v-if="!valid">
-      <i class="fas fa-exclamation-circle"/>
-      {{ message }}
-    </div>
     <button v-b-tooltip="options" @click="click" :class="classList" :name="name" :aria-label="$attrs['aria-label']" :tabindex="$attrs['tabindex']">
       {{ label }}
     </button>
@@ -13,17 +9,39 @@
 <script>
 import Mustache from 'mustache';
 import { getValidPath } from '@/mixins';
+import { isProxy } from 'is-proxy';
 
 export default {
   mixins: [getValidPath],
   props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData'],
+  watch: {
+    '$attrs.validate': {
+      deep: true,
+      handler(validate) {
+        if (validate && !isProxy(validate.vdata.$model)) {
+          this.errors = 0;
+          let message = '';
+          if (validate.$invalid) {
+            this.countErrors(validate.vdata);
+            this.countErrors(validate.schema);
+            message = this.errors === 1
+              ? 'There is a validation error in your form.'
+              : 'There are {{items}} validation errors in your form.';
+            message = this.$t(message, {items: this.errors});
+          }
+          this.$store.commit('globalErrorsModule/basic', {key: 'valid', value: !validate.$invalid});
+          this.$store.commit('globalErrorsModule/basic', {key: 'message', value: message});
+        }
+      },
+    },
+  },
   computed: {
     classList() {
       let variant = this.variant || 'primary';
       return {
         btn: true,
         ['btn-' + variant]: true,
-        disabled: !this.valid,
+        disabled: this.errors,
       };
     },
     options() {
@@ -45,26 +63,6 @@ export default {
         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 {
@@ -124,6 +122,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-</style>