@processmaker/screen-builder 2.30.1 → 2.40.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.30.1",
+  "version": "2.40.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -38,7 +38,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.29.1",
+    "@processmaker/vue-form-elements": "0.30.0",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -54,9 +54,13 @@
     "css-tree": "^1.0.0-alpha.29",
     "cypress": "^3.8.0",
     "cypress-wait-until": "^1.7.1",
-    "eslint": "^7.32.0",
+    "eslint": "^8.21.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^22.4.1",
-    "eslint-plugin-vue": "^8.0.3",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.3.0",
     "expr-eval": "^2.0.2",
     "i18next": "^15.0.8",
     "identity-obj-proxy": "^3.0.0",
@@ -64,6 +68,7 @@
     "monaco-editor-webpack-plugin": "~1.7.0",
     "mustache": "^3.0.1",
     "nyc": "^15.1.0",
+    "prettier": "2.7.1",
     "sass": "^1.53.0",
     "sass-loader": "^10.3.1",
     "v-calendar": "^0.9.7",
@@ -82,7 +87,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.29.1",
+    "@processmaker/vue-form-elements": "0.30.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/App.vue

@@ -74,13 +74,6 @@
         <!-- 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"
@@ -458,7 +451,7 @@ export default {
       if (customCSS) {
         this.customCSS = customCSS;
       }
-      
+
       if (computed) {
         this.computed = JSON.parse(computed);
       }
@@ -611,7 +604,7 @@ export default {
     .modal-backdrop {
       opacity: 0.5;
     }
-    
+
     .form-group--error {
       animation: none;
     }

package/src/DataProvider.js

@@ -136,7 +136,23 @@ export default {
     }
     url += this.authQueryString();
 
-    return this.post(url, params, { timeout: 0});
+    if (window.ProcessMaker && window.ProcessMaker.debounce !== undefined && window.ProcessMaker.debounce === false) {
+      return this.post(url, params, { timeout: 0});
+    }
+
+    if (window.ProcessMaker.cachedDataSources === undefined) {
+      window.ProcessMaker.cachedDataSources = [];
+    }
+    let cachedDataSources = window.ProcessMaker.cachedDataSources;
+    let cached = cachedDataSources.find(item => item.url === url);
+    if (cached) {
+      return cached.value;
+    }
+    else {
+      let post = this.post(url, params, { timeout: 0});
+      cachedDataSources.push({url, value: post});
+      return post;
+    }
   },
 
   authQueryString() {

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

@@ -112,6 +112,11 @@ export default {
     requestEndpoint(file) {
       let endpoint = this.endpoint;
 
+      if (_.has(window, 'PM4ConfigOverrides.useDefaultUrlDownload') && window.PM4ConfigOverrides.useDefaultUrlDownload) {
+        // Use default endpoint when coming from a package.
+        return `../files/${file.id}/contents`;
+      }
+
       if (_.has(window, 'PM4ConfigOverrides.getFileEndpoint')) {
         endpoint = window.PM4ConfigOverrides.getFileEndpoint;
         return `${endpoint}/${file.id}`;

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

@@ -109,10 +109,12 @@ export default {
         this.setValue(this.$parent, this.name, this.fieldValue);
       }
       if (this.event === 'submit') {
-        this.$emit('input', this.fieldValue);
-        this.$nextTick(()=>{
-          this.$emit('submit', this.eventData);
-        });
+        window.setTimeout(() => {
+          this.$emit('input', this.fieldValue);
+          this.$nextTick(()=>{
+            this.$emit('submit', this.eventData);
+          });
+        }, 600);
         return;
       }
       this.$emit(this.event, this.eventData);

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

@@ -4,7 +4,8 @@
     <component
       v-if="componentType!=='input'"
       :is="componentType"
-      v-model="localValue"
+      :value="internalValue"
+      @input="updateInternalValue"
       v-bind="componentConfig"
       v-uni-id="name"
       :name="name"
@@ -13,7 +14,8 @@
       type="text"
     />
     <input v-else
-      v-model="localValue"
+      :value="internalValue"
+      @input="updateInternalValue"
       v-bind="componentConfig"
       v-uni-id="name"
       :name="name"
@@ -41,6 +43,7 @@ import { TheMask } from 'vue-the-mask';
 import { getUserDateFormat, getUserDateTimeFormat } from '@processmaker/vue-form-elements/src/dateUtils';
 import ValidationMixin from '@processmaker/vue-form-elements/src/components/mixins/validation';
 import moment from 'moment';
+import InputDebounce from '@processmaker/vue-form-elements/src/components/mixins/InputDebounce';
 
 const uniqIdsMixin = createUniqIdsMixin();
 const componentTypes = {
@@ -61,7 +64,7 @@ const componentTypesConfigs = {
 export default {
   inheritAttrs: false,
   components: { TheMask, Inputmasked },
-  mixins: [ uniqIdsMixin, ValidationMixin ],
+  mixins: [ uniqIdsMixin, ValidationMixin, InputDebounce ],
   props: [
     'value',
     'label',
@@ -223,12 +226,12 @@ export default {
   },
   watch: {
     value(value) {
-      if (this.localValue !== value) {
+      if (!this.touched) {
         this.localValue = value;
       }
     },
     localValue(value) {
-      if (value != this.value) {
+      if (value !== this.value) {
         this.$emit('input', this.convertToData(value));
       }
     },
@@ -236,7 +239,6 @@ export default {
   data() {
     return {
       validator: null,
-      localValue: null,
       validationRules: {
         'percentage': 'regex:/^[+-]?\\d+(\\.\\d+)?$/',
       },

package/src/components/screen-renderer.vue

@@ -26,7 +26,7 @@ import Json2Vue from '../mixins/Json2Vue';
 import CurrentPageProperty from '../mixins/CurrentPageProperty';
 import WatchersSynchronous from '@/components/watchers-synchronous';
 import ScreenRendererError from '../components/renderer/screen-renderer-error';
-import { cloneDeep, isEqual } from 'lodash';
+import { cloneDeep, isEqual, debounce, get as getFromObject} from 'lodash';
 
 export default {
   name: 'screen-renderer',
@@ -42,7 +42,28 @@ export default {
   },
   mounted() {
     this.currentDefinition = cloneDeep(this.definition);
-    this.component = this.buildComponent(this.currentDefinition);
+
+    let screenName =  getFromObject(this.currentDefinition, 'config.0.name');
+    const itemName = `hash${this.hash(JSON.stringify(this.currentDefinition))}`;
+
+    if (['empty', undefined, null].includes(screenName)) {
+      this.component = this.buildComponent(this.currentDefinition);
+      return;
+    }
+
+    if (window.ProcessMaker.cachedScreens === undefined) {
+      window.ProcessMaker.cachedScreens = [];
+    }
+    let cachedScreen = window.ProcessMaker.cachedScreens.find(x => x.name === itemName);
+    if (cachedScreen) {
+      this.component = cachedScreen.component;
+    }
+    else {
+      let component = this.buildComponent(this.currentDefinition);
+      this.component = component;
+      window.ProcessMaker.cachedScreens.push({name: itemName, component: cloneDeep(component), definition: this.definition});
+    }
+
   },
   watch: {
     definition: {
@@ -52,12 +73,19 @@ export default {
       },
     },
   },
-  methods: {
-    rebuildScreen(definition) {
+  created() {
+    this.rebuildScreen =  debounce(function(definition) {
       if (!isEqual(definition, this.currentDefinition)) {
         this.currentDefinition = cloneDeep(definition);
         this.component = this.buildComponent(this.currentDefinition);
       }
+    }, 500);
+  },
+  methods: {
+    hash(s) {
+      for (var i=0,h=9;i<s.length;)
+        h=Math.imul(h^s.charCodeAt(i++),9**9);
+      return h^h>>>9;
     },
     onAsyncWatcherOn() {
       this.displayAsyncLoading = typeof this._parent === 'undefined';

package/src/components/task.vue

@@ -8,13 +8,6 @@
     <template v-if="screen">
       <div class="card card-body border-top-0 h-100" :class="screenTypeClass">
         <div v-if="renderComponent === 'task-screen'">
-          <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"
             v-model="requestData"
@@ -250,7 +243,7 @@ export default {
             this.task = response.data;
             this.checkTaskStatus();
             if (window.PM4ConfigOverrides.getScreenEndpoint && window.PM4ConfigOverrides.getScreenEndpoint.includes('tasks/')) {
-              const screenPath = window.PM4ConfigOverrides.getScreenEndpoint.split('/');              
+              const screenPath = window.PM4ConfigOverrides.getScreenEndpoint.split('/');
               screenPath[1] = this.task.id;
               window.PM4ConfigOverrides.getScreenEndpoint = screenPath.join('/');
             }

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

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import _ from 'lodash';
+import {size, cloneDeep, debounce, get} from 'lodash';
 import CustomCssOutput from './custom-css-output';
 import currencies from '../currency.json';
 import Inputmask from 'inputmask';
-import { getItemsFromConfig } from '../itemProcessingUtils';
-import { ValidatorFactory } from '../factories/ValidatorFactory';
+import {getItemsFromConfig} from '@/itemProcessingUtils';
+import {ValidatorFactory} from '@/factories/ValidatorFactory';
 import CurrentPageProperty from '../mixins/CurrentPageProperty';
 import globalErrorsModule from '@/store/modules/global-errors';
 
@@ -19,9 +19,9 @@ const csstree = require('css-tree');
 const Scrollparent = require('scrollparent');
 
 export default {
-  name: 'VueFormRenderer',
-  components: { CustomCssOutput },
-  mixins: [CurrentPageProperty],
+	name: 'VueFormRenderer',
+	components: {CustomCssOutput},
+	mixins: [CurrentPageProperty],
   props: ['config', 'data', '_parent', 'page', 'computed', 'customCss', 'mode', 'watchers', 'isLoop', 'ancestorScreens', 'loopContext', 'showErrors', 'testScreenDefinition'],
   model: {
     prop: 'data',
@@ -69,7 +69,7 @@ export default {
           };
           return function(text) {
             const params = JSON.parse(`[${text}]`);
-            return format(_.get(this, params[0]), params[1]);
+            return format(get(this, params[0]), params[1]);
           };
         },
       },
@@ -91,8 +91,8 @@ export default {
     data: {
       deep: true,
       handler() {
-        this.$emit('update', this.data);
-      },
+				this.debouncedWatch();
+			},
     },
     computed: {
       deep: true,
@@ -108,9 +108,13 @@ export default {
     },
   },
   created() {
+		this.debouncedWatch = debounce(() => this.$emit('update', this.data), 500);
     this.registerStoreModule('globalErrorsModule', globalErrorsModule);
-    this.parseCss = _.debounce(this.parseCss, 500, {leading: true});
+    this.parseCss = debounce(this.parseCss, 500, {leading: true});
   },
+	beforeUnmount() {
+		this.debouncedWatch.cancel();
+	},
   mounted() {
     this.parseCss();
     this.registerCustomFunctions();
@@ -162,7 +166,7 @@ export default {
      */
     isValid() {
       const items = getItemsFromConfig(this.definition.config);
-      let config = _.cloneDeep(this.definition.config);
+      let config = cloneDeep(this.definition.config);
 
       this.checkForRecordList(items, config);
       this.dataTypeValidator = ValidatorFactory(config, this.data);
@@ -171,7 +175,7 @@ export default {
       if (this.errors) {
         this.formSubmitErrorClass = 'invalid-form-submission';
       }
-      return _.size(this.errors) === 0;
+      return size(this.errors) === 0;
     },
     registerCustomFunctions(node=this) {
       if (node.registerCustomFunction instanceof Function) {

package/src/main.js

@@ -93,6 +93,7 @@ window.exampleScreens = [
   },
 ];
 window.ProcessMaker = {
+  debounce: false,
   isStub: true,
   user: {
     id: 1,

package/src/mixins/Json2Vue.js

@@ -375,7 +375,7 @@ export default {
           }
         });
       };
-      updateValidationRules = debounce(updateValidationRules, 25);
+      updateValidationRules = debounce(updateValidationRules, 100);
       component.methods.loadValidationRules = function() {
         // Asynchronous loading of validations
         const validations = {};

package/src/mixins/ScreenBase.js

@@ -7,12 +7,28 @@ const stringFormats = ['string', 'datetime', 'date', 'password'];
 export default {
   schema: [
     function() {
+      if (window.ProcessMaker.cachedSchemas === undefined) {
+        window.ProcessMaker.cachedSchemas = [];
+      }
+
+
       if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
         if (window.ProcessMaker.VocabulariesSchemaUrl) {
-          let response = window.ProcessMaker.apiClient.get(window.ProcessMaker.VocabulariesSchemaUrl);
-          return response.then(response => {
-            return response.data;
-          });
+          let cachedSchemas = window.ProcessMaker.cachedSchemas;
+          let schemaUrl = window.ProcessMaker.VocabulariesSchemaUrl;
+          let cached = cachedSchemas.find(item => item.url === schemaUrl);
+          if (cached) {
+            return cached.value;
+          }
+          else {
+            let response = window.ProcessMaker.apiClient.get(window.ProcessMaker.VocabulariesSchemaUrl);
+            let result = response.then(response => {
+              window.ProcessMaker.cachedSchema = response.data;
+              return response.data;
+            });
+            cachedSchemas.push({url: schemaUrl, value: result});
+            return result;
+          }
         }
         if (window.ProcessMaker.VocabulariesPreview) {
           return window.ProcessMaker.VocabulariesPreview;
@@ -111,6 +127,8 @@ export default {
     },
     submitForm() {
       if (this.$v.$invalid) {
+        let msgError = this.$store.getters['globalErrorsModule/getErrorMessage'];
+        window.ProcessMaker.alert(msgError, 'danger');
         //if the form is not valid the data is not emitted
         return;
       }
@@ -176,6 +194,10 @@ export default {
             return;
           }
 
+          if (Number.isNaN(originalValue)) {
+            delete object[attr];
+          }
+
           this.$set(
             object,
             attr,

package/src/mixins/computedFields.js

@@ -14,7 +14,7 @@ export default {
 
         const data = new Proxy(Object.assign({}, this), {
           get(data, name) {
-            if (data[name] === undefined || !isEqual(data[name]), self.vdata[name]) {
+            if (data[name] === undefined || !isEqual(data[name], self.vdata[name])) {
               return self.vdata[name];
             } else {
               return data[name];