@processmaker/screen-builder 2.26.0 → 2.28.0

package/package.json

@@ -1,26 +1,17 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.26.0",
+  "version": "2.28.0",
   "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/inspector/screen-selector.vue

@@ -102,6 +102,12 @@ export default {
     },
   },
   mounted() {
+    this.$root.$on('remove-nested', (nestedScreenId) => {
+      if (this.value === nestedScreenId) {
+        this.$emit('input', null);
+      }
+    });
+
     let pmql = '(type = "FORM" or type = "DISPLAY")';
     if (this.screenType === formTypes.display) {
       pmql = '(type = "DISPLAY")';

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;
       }

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

@@ -18,7 +18,7 @@
     >
       <uploader-unsupport/>
 
-      <uploader-drop class="form-control-file">
+      <uploader-drop v-if="this.$refs['uploader']" class="form-control-file">
         <p>{{ $t('Drop a file here to upload or') }}</p>
         <uploader-btn
           :attrs="nativeButtonAttrs"
@@ -33,12 +33,17 @@
         <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">
@@ -282,6 +287,7 @@ export default {
       disabled: false,
       files: [],
       nativeFiles: {},
+      uploading: false, 
     };
   },
   methods: {
@@ -378,7 +384,7 @@ export default {
         }
       }
     },
-    async removeFile(file) { 
+    async removeFile(file) {
       const id = file.id;
       const token = file.token ? file.token : null;
 
@@ -386,13 +392,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 +476,7 @@ export default {
       }
     },
     fileUploaded(rootFile, file, message) {
+      this.uploading = false;
       let name = file.name;
       if (message) {
         const msg = JSON.parse(message);
@@ -478,13 +485,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 +518,7 @@ export default {
       return null;
     },
     start() {
+      this.uploading = true;
       if (this.parentRecordList(this) === null) {
         this.row_id = null;
       }

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 {
@@ -116,6 +141,7 @@ export default {
                 globalObject['nestedScreens'] = {};
               }
               globalObject.nestedScreens['id_' + id] = this.config;
+              this.$root.$emit('nested-screen-updated');
             }
           });
       }

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/vue-form-builder.vue

@@ -474,6 +474,7 @@ export default {
   watch: {
     config: {
       handler() {
+        this.checkForCaptchaInLoops();
         this.$emit('change', this.config);
         this.loadVariablesTree();
       },
@@ -517,6 +518,36 @@ export default {
     refreshContent() {
       this.editorContentKey++;
     },
+    checkForCaptchaInLoops() {
+      this.config.forEach(page => {
+        this.checkForCaptcha(page.items);
+      });
+    },
+    checkForCaptcha(items, insideLoop = false, nestedScreen = null) {
+      items.forEach(item => {
+        if (!item.items && item.component == 'Captcha' && insideLoop) {
+          if (nestedScreen && nestedScreen.config.screen) {
+            this.$root.$emit('remove-nested', nestedScreen.config.screen);
+            nestedScreen.config.screen = null;
+            globalObject.ProcessMaker.alert(this.$t('You are trying to place a nested screen within CAPTCHA elements inside a loop. CAPTCHA controls cannot be placed within a Loop control.'), 'danger');
+          } else {
+            items.splice(items.indexOf(item), 1);
+            globalObject.ProcessMaker.alert(this.$t('CAPTCHA controls cannot be placed within a Loop control.'), 'danger');
+          }
+        }
+        if (item.items) {
+          this.checkForCaptcha(item.items, true, nestedScreen);
+        }
+        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, insideLoop, item);
+            });
+          }
+        }
+      });
+    },
     loadVariablesTree() {
       const definition = {
         config : this.$parent.config,
@@ -819,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);
       }
     },
@@ -843,6 +874,10 @@ export default {
   },
   mounted() {
     this.loadVariablesTree();
+    this.checkForCaptchaInLoops();
+    this.$root.$on('nested-screen-updated', () => {
+      this.checkForCaptchaInLoops();
+    });
   },
 };
 </script>

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);
       }
     },