@processmaker/screen-builder 2.62.1 → 2.64.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.62.1",
+  "version": "2.64.1",
   "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.42.0",
+    "@processmaker/vue-form-elements": "0.43.2",
     "@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.42.0",
+    "@processmaker/vue-form-elements": "0.43.2",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/App.vue

@@ -400,6 +400,10 @@ export default {
       return warnings;
     },
   },
+  created() {
+    this.updateDataInput = debounce(this.updateDataInput, 1000);
+    this.updateDataPreview = debounce(this.updateDataPreview, 1000);
+  },
   mounted() {
     this.countElements = debounce(this.countElements, 2000);
     if (globalObject.ProcessMaker && globalObject.ProcessMaker.user && globalObject.ProcessMaker.user.lang) {
@@ -422,10 +426,9 @@ export default {
   },
   methods: {
     ...mapMutations("globalErrorsModule", { setStoreMode: "setMode" }),
-    // eslint-disable-next-line func-names
-    updateDataInput: debounce(function () {
+    updateDataInput() {
       this.updateDataInputNow();
-    }, 1000),
+    },
     updateDataInputNow() {
       if (this.previewInputValid) {
         // Copy data over
@@ -433,10 +436,9 @@ export default {
         this.updateDataPreview();
       }
     },
-    // eslint-disable-next-line func-names
-    updateDataPreview: debounce(function () {
+    updateDataPreview() {
       this.previewDataStringify = JSON.stringify(this.previewData, null, 2);
-    }, 1000),
+    },
     monacoMounted(editor) {
       this.editor = editor;
       this.editor.updateOptions({ readOnly: true });

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

@@ -45,6 +45,11 @@ export default {
       // Not somewhere we can download anything (like web entry start event)
       return;
     }
+
+    if (this.collection && this.value) {
+      // eslint-disable-next-line vue/no-mutating-props
+      this.value.file_name = this.value.name;
+    }
     this.setFilesInfo();
   },
   watch: {
@@ -114,6 +119,9 @@ export default {
 
       if (_.has(window, 'PM4ConfigOverrides.useDefaultUrlDownload') && window.PM4ConfigOverrides.useDefaultUrlDownload) {
         // Use default endpoint when coming from a package.
+        if (this.requestId) {
+          return `requests/${this.requestId}/files/${file.id}/contents`;
+        }
         return `../files/${file.id}/contents`;
       }
 
@@ -202,10 +210,7 @@ export default {
         if (fileInfo) {
           this.filesInfo.push(fileInfo);
         } else {
-          window.ProcessMaker.alert(
-            this.$t('File ID does not exist'),
-            'danger'
-          );
+          console.log(this.$t('File ID does not exist'));
         }
       });
     },

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

@@ -111,6 +111,12 @@ export default {
     this.setPrefix();
     if (this.$refs['uploader']) {
       this.$refs['uploader'].$forceUpdate();
+      // Re-upload stored files; 
+      // Files disappear when navigating between pages with the Page Navigation component
+      if (this.files.length > 0) {
+        this.$refs.uploader.uploader.addFiles(this.files);
+        this.uploading = false;
+      }
     }
 
     this.disabled = _.get(window, 'ProcessMaker.isSelfService', false);
@@ -288,6 +294,7 @@ export default {
       files: [],
       nativeFiles: {},
       uploading: false,
+      invalidFile: false,
     };
   },
   methods: {
@@ -450,6 +457,14 @@ export default {
         file.ignored = true;
         return false;
       }
+      if (file.fileType === undefined) {
+        const existingFile = this.files.find(el => {
+          if (el.name === file.name) {
+            return el.fileType;
+          }
+        });
+        file.fileType = existingFile.fileType;
+      }
 
       if (this.filesAccept) {
         file.ignored = true;
@@ -457,6 +472,8 @@ export default {
           file.ignored = false;
         }
         if (file.ignored) {
+          this.invalidFile = true;
+          this.uploading = false;
           window.ProcessMaker.alert(this.$t('File not allowed.'), 'danger');
           return false;
         }
@@ -493,6 +510,9 @@ export default {
           id,
           file_name: name,
           mime_type: rootFile.fileType,
+          // additional properties needed when re-uploading files to the uploader component
+          name: name,
+          fileType: rootFile.fileType,
         };
 
         this.$set(this.nativeFiles, id, rootFile);
@@ -521,6 +541,11 @@ export default {
       return null;
     },
     start() {
+      // Prevent the upload from being started when the file is invalid.
+      if (this.invalidFile) {
+        return;
+      }
+
       this.uploading = true;
       if (this.parentRecordList(this) === null) {
         this.row_id = null;

package/src/components/screen-renderer.vue

@@ -62,6 +62,14 @@ export default {
   name: "ScreenRenderer",
   components: { WatchersSynchronous, ScreenRendererError },
   mixins: [Json2Vue, CurrentPageProperty],
+  props: {
+    // property used to pass the context of the screen used as prefix for the file upload component
+    // e.g. `multi_instance_var.1` or `loop_var.1`
+    loopContext: {
+      type: String,
+      default: ""
+    }
+  },
   data() {
     return {
       currentDefinition: null,

package/src/components/task.vue

@@ -16,6 +16,7 @@
             :custom-css="screen.custom_css"
             :watchers="screen.watchers"
             :key="refreshScreen"
+            :loop-context="loopContext"
             @update="onUpdate"
             @submit="submit"
           />
@@ -74,6 +75,7 @@ export default {
     csrfToken: { type: String, default: null },
     value: { type: Object, default: () => {} },
     beforeLoadTask: { type: Function, default: defaultBeforeLoadTask },
+    initialLoopContext: { type: String, default: "" }
   },
   data() {
     return {
@@ -230,7 +232,7 @@ export default {
       }
     },
     loadTask() {
-      const url = `/${this.taskId}?include=data,user,requestor,processRequest,component,screen,requestData,bpmnTagName,interstitial,definition,nested`;
+      const url = `/${this.taskId}?include=data,user,requestor,processRequest,component,screen,requestData,loopContext,bpmnTagName,interstitial,definition,nested,userRequestPermission`;
       // For Vocabularies
       if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
         window.ProcessMaker.VocabulariesSchemaUrl = `vocabularies/task_schema/${this.taskId}`;
@@ -256,6 +258,7 @@ export default {
     prepareTask() {
       this.resetScreenState();
       this.requestData = _.get(this.task, 'request_data', {});
+      this.loopContext = _.get(this.task, "loop_context", "");
       this.refreshScreen++;
 
       this.$emit('task-updated', this.task);
@@ -326,7 +329,7 @@ export default {
             this.taskId = task.id;
             this.nodeId = task.element_id;
           } else if (this.parentRequest && ['COMPLETED', 'CLOSED'].includes(this.task.process_request.status)) {
-            this.$emit('completed', this.parentRequest);
+            this.$emit('completed', this.getAllowedRequestId());
           }
         });
     },
@@ -379,10 +382,20 @@ export default {
       // This may no longer be needed
     },
     processCompleted() {
+      let requestId;
       if (this.parentRequest) {
-        this.$emit('completed', this.parentRequest);
+        requestId = this.getAllowedRequestId();
+        this.$emit('completed', requestId);
       }
-      this.$emit('completed', this.requestId);
+      if (requestId !== this.requestId) {
+        this.$emit('completed', this.requestId);
+      }
+    },
+    getAllowedRequestId() {
+      const permissions = this.task.user_request_permission || [];
+      const permission = permissions.find(item => item.process_request_id === this.parentRequest)
+      const allowed = permission && permission.allowed;
+      return allowed ? this.parentRequest : this.requestId
     },
     processUpdated: _.debounce(function(data) {
       if (
@@ -487,6 +500,7 @@ export default {
     this.processId = this.initialProcessId;
     this.nodeId = this.initialNodeId;
     this.requestData = this.value;
+    this.loopContext = this.initialLoopContext;
   },
   destroyed() {
     this.unsubscribeSocketListeners();

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

@@ -1,7 +1,19 @@
 <template>
   <div :class="containerClass">
     <custom-css-output>{{ customCssWrapped }}</custom-css-output>
-    <screen-renderer ref="renderer" :value="data" :_parent="_parent" :definition="definition" :current-page="currentPage" @submit="submit" data-cy="screen-renderer" :show-errors="showErrors" :test-screen-definition="testScreenDefinition || false" class="p-0"/>
+    <screen-renderer
+      ref="renderer"
+      :value="data"
+      :_parent="_parent"
+      :definition="definition"
+      :current-page="currentPage"
+      data-cy="screen-renderer"
+      :show-errors="showErrors"
+      :test-screen-definition="testScreenDefinition || false"
+      class="p-0"
+      :loop-context="loopContext"
+      @submit="submit"
+    />
   </div>
 </template>
 

package/src/mixins/ScreenBase.js

@@ -145,7 +145,6 @@ export default {
     },
     async submitForm() {
       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

package/src/mixins/extensions/DefaultValues.js

@@ -28,9 +28,14 @@ export default {
       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};});
-      }`);
+      this.addMounted(
+        screen, 
+        `if (!this.${safeDotName}) {
+            this.tryFormField(${JSON.stringify(name)}, () => {
+            this.${safeDotName} = ${value};
+            this.setValue(${JSON.stringify(name)}, ${value}, this.vdata, this);});
+        }`
+      );
       screen.computed[defaultComputedName] = {
         get: new Function(`return this.tryFormField(${JSON.stringify(name)}, () => ${value});`),
         set() {},

package/src/mixins/extensions/LoopContainer.js

@@ -1,51 +1,60 @@
 export default {
   props: {
     configRef: null,
-    loopContext: null,
+    loopContext: null
   },
   data() {
     return {
-      loops: [],
+      loops: []
     };
   },
   methods: {
     loadFormLoopProperties({ properties, element }) {
       this.registerVariable(element.config.settings.varname, element);
-      this.loops.push({ variable: element.config.settings.varname, element, properties });
+      this.loops.push({
+        variable: element.config.settings.varname,
+        element,
+        properties
+      });
     },
     loadFormLoopItems({ element, node, definition }) {
-      const loop = this.createComponent('div', {
-        'v-for': `(loopRow, index) in ${element.config.settings.varname}`,
+      const safeDotName = this.safeDotName(element.config.settings.varname);
+      const loop = this.createComponent("div", {
+        "v-for": `(loopRow, index) in ${safeDotName}`
       });
       const nested = {
         config: [
           {
-            items: element.items,
-          },
+            items: element.items
+          }
         ],
-        watchers: definition.watchers,
+        watchers: definition.watchers
       };
 
-      let loopContext = '';
+      let loopContext = "";
       if (this.loopContext) {
-        loopContext = this.loopContext + '.';
+        loopContext = `${this.loopContext}.`;
       }
       loopContext += element.config.settings.varname;
 
       // Add nested component inside loop
-      const child = this.createComponent('ScreenRenderer', {
-        ':definition': this.byRef(nested),
-        ':value': 'loopRow',
-        ':loop-context': `'${loopContext}.' + index`,
-        ':_parent': 'getValidationData()',
-        ':components': this.byRef(this.components),
-        ':config-ref': this.byRef(this.configRef || definition.config),
-        '@submit': 'submitForm',
+      const child = this.createComponent("ScreenRenderer", {
+        ":definition": this.byRef(nested),
+        ":value": "loopRow",
+        ":loop-context": `'${loopContext}.' + index`,
+        ":_parent": "getValidationData()",
+        ":components": this.byRef(this.components),
+        ":config-ref": this.byRef(this.configRef || definition.config),
+        "@submit": "submitForm"
       });
-      const addLoopRow = this.createComponent('AddLoopRow', {
-        ':value': element.config.settings.varname,
-        ':config': this.byRef(element.config),
-        ':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})`,
+      const addLoopRow = this.createComponent("AddLoopRow", {
+        ":value": safeDotName,
+        ":config": this.byRef(element.config),
+        ":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})`
       });
       loop.appendChild(child);
       node.appendChild(loop);
@@ -53,24 +62,24 @@ export default {
       // Register nested component as Array
       this.registerNestedVariable(
         element.config.settings.varname,
-        element.config.settings.varname + '.index.',
+        `${element.config.settings.varname}.index.`,
         nested
       );
-    },
+    }
   },
   mounted() {
-    this.alias['FormLoop'] = 'div';
+    this.alias.FormLoop = "div";
     this.extensions.push({
       beforeload() {
         this.loops.splice(0);
       },
       onloadproperties(params) {
-        if (params.element.container && params.componentName === 'FormLoop') {
+        if (params.element.container && params.componentName === "FormLoop") {
           this.loadFormLoopProperties(params);
         }
       },
       onloaditems(params) {
-        if (params.element.container && params.componentName === 'FormLoop') {
+        if (params.element.container && params.componentName === "FormLoop") {
           this.loadFormLoopItems(params);
         }
       }