@processmaker/screen-builder 2.27.0 → 2.28.1-RC4.patch.FOUR.6050

package/package.json

@@ -1,26 +1,17 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.27.0",
+  "version": "2.28.1-RC4.patch.FOUR.6050",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "test:unit": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint --no-fix",
+    "lint": "vue-cli-service lint",
     "build-bundle": "vue-cli-service build --target lib --name vue-form-builder ./src/components/index.js",
     "lint-fix": "vue-cli-service lint",
     "open-cypress": "TZ=UTC nyc cypress open",
     "run-cypress": "TZ=UTC nyc cypress run",
     "test": "vue-cli-service test:unit"
   },
-  "nyc": {
-    "include": [
-      "src/**"
-    ],
-    "extension": [
-      ".js",
-      ".vue"
-    ]
-  },
   "main": "./dist/vue-form-builder.common.js",
   "files": [
     "dist/*",
@@ -42,14 +33,16 @@
   },
   "devDependencies": {
     "@4tw/cypress-drag-drop": "~1.3.1",
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.28.7",
+    "@processmaker/vue-form-elements": "0.29.0",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
-    "@vue/cli-plugin-eslint": "^3.6.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-unit-jest": "^4.3.0",
     "@vue/cli-service": "^3.6.0",
     "@vue/test-utils": "^1.1.1",
@@ -57,18 +50,21 @@
     "babel-core": "7.0.0-bridge.0",
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.19.0",
+    "css-loader": "^5.2.7",
     "css-tree": "^1.0.0-alpha.29",
     "cypress": "^3.8.0",
     "cypress-wait-until": "^1.7.1",
+    "eslint": "^7.32.0",
     "eslint-plugin-jest": "^22.4.1",
+    "eslint-plugin-vue": "^8.0.3",
     "expr-eval": "^2.0.2",
     "i18next": "^15.0.8",
     "identity-obj-proxy": "^3.0.0",
-    "inputmask": "^5.0.6",
+    "inputmask": "^5.0.7",
     "monaco-editor-webpack-plugin": "~1.7.0",
     "mustache": "^3.0.1",
-    "node-sass": "^6.0.1",
     "nyc": "^15.1.0",
+    "sass": "^1.51.0",
     "sass-loader": "^10.2.0",
     "v-calendar": "^0.9.7",
     "validatorjs": "^3.14.2",
@@ -86,7 +82,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.28.7",
+    "@processmaker/vue-form-elements": "0.29.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"
@@ -100,5 +96,18 @@
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
-  ]
+  ],
+  "engines": {
+    "npm": ">=8",
+    "node": ">=16 <18"
+  },
+  "nyc": {
+    "include": [
+      "src/**"
+    ],
+    "extension": [
+      ".js",
+      ".vue"
+    ]
+  }
 }

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

@@ -175,6 +175,11 @@ export default {
       const fileId = this.value ? this.value : _.get(this.requestData, this.fileDataName, null);
       let endpoint = this.endpoint;
       
+      if (this.requestFiles) {
+        this.filesInfo.push(_.get(this.requestFiles, this.fileDataName, null));
+        return;
+      }
+      
       if (!this.requestId || !fileId) {
         return;
       }
@@ -193,7 +198,7 @@ export default {
           this.filesInfo.push(fileInfo);
         } else {
           window.ProcessMaker.alert(
-            this.$t('File Download Missing File'),
+            this.$t('File ID does not exist'),
             'danger'
           );
         }

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

@@ -18,7 +18,7 @@
     >
       <uploader-unsupport/>
 
-      <uploader-drop class="form-control-file">
+      <uploader-drop v-if="uploaderLoaded" class="form-control-file">
         <p>{{ $t('Drop a file here to upload or') }}</p>
         <uploader-btn
           :attrs="nativeButtonAttrs"
@@ -33,15 +33,20 @@
         <span v-if="validation === 'required' && !value" class="required">{{ $t('Required') }}</span>
       </uploader-drop>
       <uploader-list>
-        <template>
-          <ul>
+        <template slot-scope = "{ fileList }">
+          <ul v-if="uploading">
+            <li v-for="file in fileList" :key="file.id">
+              <uploader-file :file="file" :list="true"/>
+            </li>
+          </ul>
+          <ul v-else>
             <li v-for="(file, i) in files " :key="i" :data-cy="file.id">
               <div class="">
                 <div class="" style="display:flex; background:rgb(226 238 255)">
-                  <div v-if="nativeFiles[file.id]" style="flex: 1" :data-cy="file.file_name.replace(/[^0-9a-zA-Z\-]/g, '-')">
+                  <div v-if="nativeFiles[file.id]" style="flex: 1" class="overflow-hidden" :data-cy="file.file_name.replace(/[^0-9a-zA-Z\-]/g, '-')">
                     <uploader-file :file="nativeFiles[file.id]" :list="true" />
                   </div>
-                  <div v-else style="flex: 1">
+                  <div v-else class="text-truncate" :title="file.file_name" style="flex: 1">
                     <i class="fas fa-paperclip"/> {{ file.file_name }}
                   </div>
                   <div class="pt-1">
@@ -282,9 +287,13 @@ export default {
       disabled: false,
       files: [],
       nativeFiles: {},
+      uploading: false,
     };
   },
   methods: {
+    uploaderLoaded() {
+      return this.$refs['uploader'];
+    },
     setFiles() {
       if (_.isEqual(this.filesData, this.files)) {
         return;
@@ -378,7 +387,7 @@ export default {
         }
       }
     },
-    async removeFile(file) { 
+    async removeFile(file) {
       const id = file.id;
       const token = file.token ? file.token : null;
 
@@ -386,13 +395,13 @@ export default {
       if (!isNaN(id)) {
         await this.$dataProvider.deleteFile(id, token);
       }
-      
+
       this.removeFromFiles(id);
     },
     removeFromFiles(id) {
       const idx = this.files.findIndex(f => f.id === id);
       this.$delete(this.files, idx);
-      
+
       if (this.nativeFiles[id]) {
         if (this.$refs.uploader) {
           this.$refs.uploader.uploader.removeFile(this.nativeFiles[id]);
@@ -470,6 +479,7 @@ export default {
       }
     },
     fileUploaded(rootFile, file, message) {
+      this.uploading = false;
       let name = file.name;
       if (message) {
         const msg = JSON.parse(message);
@@ -478,13 +488,13 @@ export default {
         if (this.collection) {
           id = msg.id;
         }
-        
+
         const fileInfo = {
           id,
           file_name: name,
           mime_type: rootFile.fileType,
         };
-       
+
         this.$set(this.nativeFiles, id, rootFile);
         this.addToFiles(fileInfo);
       } else {
@@ -511,6 +521,7 @@ export default {
       return null;
     },
     start() {
+      this.uploading = true;
       if (this.parentRecordList(this) === null) {
         this.row_id = null;
       }

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

@@ -38,10 +38,11 @@ export default {
   computed: {
     classList() {
       let variant = this.variant || 'primary';
+      let isInvalid = this.$store.getters['globalErrorsModule/isValidScreen'] === false;
       return {
         btn: true,
         ['btn-' + variant]: true,
-        disabled: this.errors,
+        disabled: this.event === 'submit' && isInvalid,
       };
     },
     options() {

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

@@ -92,6 +92,27 @@ export default {
 
       });
     },
+    disableForm(config) {
+      config.forEach(item => {
+
+        //If the element has containers
+        if (Array.isArray(item)) {
+          this.disableForm(item);
+        }
+
+        //If the element has items
+        if (item.items) {
+          this.disableForm(item.items);
+        }
+
+        //Disable element
+        if (item && item.config) {
+          item.config.disabled = true;
+          item.config.readonly = true;
+          item.config.editable = false;
+        }
+      });
+    },
     loadScreen(id) {
       this.config = defaultConfig;
       this.computed = [];
@@ -109,6 +130,10 @@ export default {
             this.watchers = response.data.watchers;
             this.screenTitle = response.data.title;
 
+            if (this.$attrs['disabled']) {
+              this.disableForm(this.config);
+            }
+
             if (this.ancestorScreens.includes(this.screenTitle)) {
               globalObject.ProcessMaker.alert(`Rendering of nested "${this.screenTitle}" screen was disallowed to prevent loop.`, 'warning');
             } else {

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

@@ -370,7 +370,7 @@ export default {
     showEditForm(index, rowId) {
       let pageIndex = ((this.currentPage-1) * this.perPage) + index;
       // Reset edit to be a copy of our data model item
-      this.editItem = _.find(this.tableData.data, {'row_id': rowId});
+      this.editItem = JSON.parse(JSON.stringify(_.find(this.tableData.data, {'row_id': rowId})));
       this.editIndex = pageIndex;
       // rebuild the edit screen to avoid
       this.editFormVersion++;
@@ -387,7 +387,7 @@ export default {
 
       // Edit the item in our model and emit change
       let data = this.tableData.data ? JSON.parse(JSON.stringify(this.tableData.data)) : [];
-      var index = _.findIndex(data, {'row_id': this.editItem.rowId});
+      var index = _.findIndex(data, {'row_id': this.editItem.row_id});
       data[index] = JSON.parse(JSON.stringify(this.editItem));
 
       // Remove the parent object

package/src/components/task.vue

@@ -327,17 +327,25 @@ export default {
               this.redirecting = task.process_request_id;
               this.$emit('redirect', task.id, true);
               return;
-            } else if (this.task && requestId == this.task.process_request_id && this.parentRequest && this.task.process_request.status === 'COMPLETED') {
-              // Only emit completed after getting the subprocess tasks and there are no tasks and process is completed
-              this.$emit('completed', this.parentRequest);
+            } else {
+              this.emitIfTaskCompleted(requestId);
             }
             this.taskId = task.id;
             this.nodeId = task.element_id;
-          } else if (this.parentRequest) {
+          } else if (this.parentRequest && ['COMPLETED', 'CLOSED'].includes(this.task.process_request.status)) {
             this.$emit('completed', this.parentRequest);
           }
         });
     },
+    emitIfTaskCompleted(requestId) {
+      // Only emit completed after getting the subprocess tasks and there are no tasks and process is completed
+      if (this.task
+          && this.parentRequest
+          && requestId == this.task.process_request_id
+          && this.task.process_request.status === 'COMPLETED') {
+        this.$emit('completed',  this.parentRequest);
+      }
+    },
     classHeaderCard(status) {
       let header = 'bg-success';
       switch (status) {

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

@@ -536,13 +536,13 @@ export default {
           }
         }
         if (item.items) {
-          this.checkForCaptcha(item.items, true);
+          this.checkForCaptcha(item.items, true, nestedScreen);
         }
-        if (item.component == 'FormNestedScreen' && insideLoop && item.config.screen && window.nestedScreens) {
+        if (item.component == 'FormNestedScreen' && item.config.screen && window.nestedScreens) {
           let nestedScreenItems = window.nestedScreens['id_' + item.config.screen];
           if (nestedScreenItems) {
             nestedScreenItems.forEach(nestedScreenPage => {
-              this.checkForCaptcha(nestedScreenPage.items, true, item);
+              this.checkForCaptcha(nestedScreenPage.items, insideLoop, item);
             });
           }
         }
@@ -850,7 +850,7 @@ export default {
     registerStoreModule(moduleName, storeModule) {
       const store = this.$store;
 
-      if (!(store && store.state && store.state[moduleName])) {
+      if (store && store.state && !store.state[moduleName]) {
         store.registerModule(moduleName, storeModule);
       }
     },
@@ -874,6 +874,7 @@ export default {
   },
   mounted() {
     this.loadVariablesTree();
+    this.checkForCaptchaInLoops();
     this.$root.$on('nested-screen-updated', () => {
       this.checkForCaptchaInLoops();
     });

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

@@ -17,7 +17,7 @@ import globalErrorsModule from '@/store/modules/global-errors';
 
 const csstree = require('css-tree');
 const Scrollparent = require('scrollparent');
- 
+
 export default {
   name: 'VueFormRenderer',
   components: { CustomCssOutput },
@@ -123,7 +123,7 @@ export default {
     registerStoreModule(moduleName, storeModule) {
       const store = this.$store;
 
-      if (!(store && store.state && store.state[moduleName])) {
+      if (store && store.state && !store.state[moduleName]) {
         store.registerModule(moduleName, storeModule);
       }
     },

package/src/mixins/extensions/PageNavigate.js

@@ -4,6 +4,7 @@ export default {
     pageNavigate() {},
     pageNavigationProperties({ properties }) {
       properties['@page-navigate'] = 'pageNavigate';
+      properties[':validate'] = '$v';
     },
     pageNavigationBuild(screen) {
       this.addData(screen, 'currentPage__', 'this._initialPage');
@@ -19,7 +20,7 @@ export default {
   mounted() {
     this.extensions.push({
       onloadproperties(params) {
-        if (params.componentName === 'FormButton') {
+        if (params.element.component === 'FormButton' && params.element.config.event === 'pageNavigate') {
           this.pageNavigationProperties(params);
         }
       },