@processmaker/screen-builder 2.20.1 → 2.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.20.1",
+  "version": "2.21.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/DataProvider.js

@@ -88,10 +88,14 @@ export default {
     }
     else {
       const endpoint = _.get(window, 'PM4ConfigOverrides.getScreenEndpoint', '/screens');
-      const request = this.get(endpoint + `/${id}${query}`);
+      
+      const screensCacheHit = this.screensCache.find(screen => screen.id == id);
+      if (screensCacheHit) {
+        return Promise.resolve({data: screensCacheHit});
+      }
 
       let screenPromise = new Promise((resolve, reject) => {
-        request
+        this.get(endpoint + `/${id}${query}`)
           .then(response => {
             if (response.data.nested) {
               this.addNestedScreenCache(response.data.nested);

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 } from 'lodash';
 
 export default {
   name: 'screen-renderer',
@@ -43,19 +43,23 @@ export default {
   mounted() {
     this.currentDefinition = cloneDeep(this.definition);
     this.component = this.buildComponent(this.currentDefinition);
+    this.rebuildScreen = debounce(this.rebuildScreen, 25);
   },
   watch: {
     definition: {
       deep: true,
       handler(definition) {
-        if (!isEqual(definition, this.currentDefinition)) {
-          this.currentDefinition = cloneDeep(definition);
-          this.component = this.buildComponent(this.currentDefinition);
-        }
+        this.rebuildScreen(definition);
       },
     },
   },
   methods: {
+    rebuildScreen(definition) {
+      if (!isEqual(definition, this.currentDefinition)) {
+        this.currentDefinition = cloneDeep(definition);
+        this.component = this.buildComponent(this.currentDefinition);
+      }
+    },
     onAsyncWatcherOn() {
       this.displayAsyncLoading = typeof this._parent === 'undefined';
     },

package/src/mixins/Json2Vue.js

@@ -2,7 +2,7 @@ import extensions from './extensions';
 import ScreenBase from './ScreenBase';
 import CountElements from '../CountElements';
 import ValidationsFactory from '../ValidationsFactory';
-import _ from 'lodash';
+import _, { debounce, isEqual } from 'lodash';
 
 let screenRenderer;
 
@@ -214,7 +214,12 @@ export default {
       return name && typeof name === 'string' && name.match(/^[a-zA-Z_][0-9a-zA-Z_.]*$/);
     },
     isComputedVariable(name, definition) {
-      return definition.computed && definition.computed.find(c => c.property === name);
+      return definition.computed && definition.computed.some(computed => {
+        // Check if the first part of an element's name (up to the first `.`)
+        // matches the name of a computed property.
+        const regex = new RegExp(`^${computed.property}(\\.|$)`, 'i');
+        return regex.test(name);
+      });
     },
     registerVariable(name, element = {}) {
       if (!this.validVariableName(name)) {
@@ -336,19 +341,43 @@ export default {
     },
     addValidationRulesLoader(component, definition) {
       const firstPage = parseInt(this.currentPage) || 0;
+      function getKeys(input) {
+        if (input instanceof Array) {
+          const response = [];
+          input.forEach((item) => {
+            response.push(getKeys(item));
+          });
+          return response;
+        }
+        if (!(input instanceof Object)) {
+          return typeof input;
+        }
+        const keys = Object.keys(input);
+        const response = {};
+        keys.forEach((key) => {
+          response[key] = getKeys(input[key]);
+        });
+        return response;
+      }
+      let updateValidationRules = function(screenComponent, validations) {
+        const a = getKeys(screenComponent.ValidationRules__);
+        const b = getKeys(validations);
+        if (isEqual(a, b)) {
+          return;
+        }
+        screenComponent.ValidationRules__ = validations;
+        screenComponent.$nextTick(() => {
+          if (screenComponent.$v) {
+            screenComponent.$v.$touch();
+          }
+        });
+      };
+      updateValidationRules = debounce(updateValidationRules, 25);
       component.methods.loadValidationRules = function() {
         // Asynchronous loading of validations
         const validations = {};
         ValidationsFactory(definition, { screen: definition, firstPage, data: {_parent: this._parent, ...this.vdata} }).addValidations(validations).then(() => {
-          if (_.isEqual(this.ValidationRules__, validations)) {
-            return;
-          }
-          this.ValidationRules__ = validations;
-          this.$nextTick(() => {
-            if (this.$v) {
-              this.$v.$touch();
-            }
-          });
+          updateValidationRules(this, validations);
         });
       };
       component.mounted.push('this.loadValidationRules()');

package/src/mixins/extensions/LoadFieldComponents.js

@@ -69,7 +69,7 @@ export default {
       properties[':form-computed'] = JSON.stringify(definition.computed);
       properties[':form-watchers'] = JSON.stringify(definition.watchers);
       // Check if control is assigned to a calculated property
-      const isCalcProp = definition.computed && !!definition.computed.find(computed => computed.property == element.config.name);
+      const isCalcProp = this.isComputedVariable(element.config.name, definition);
       properties[':readonly'] = isCalcProp || element.config.readonly;
       properties[':disabled'] = isCalcProp || element.config.disabled;
       // Events