@processmaker/screen-builder 2.40.0 → 2.50.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.40.0",
+  "version": "2.50.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.30.0",
+    "@processmaker/vue-form-elements": "0.40.0",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -87,7 +87,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.30.0",
+    "@processmaker/vue-form-elements": "0.40.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/DataProvider.js

@@ -136,23 +136,7 @@ export default {
     }
     url += this.authQueryString();
 
-    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;
-    }
+    return this.post(url, params, { timeout: 0});
   },
 
   authQueryString() {

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

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

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

@@ -4,8 +4,7 @@
     <component
       v-if="componentType!=='input'"
       :is="componentType"
-      :value="internalValue"
-      @input="updateInternalValue"
+      v-model="localValue"
       v-bind="componentConfig"
       v-uni-id="name"
       :name="name"
@@ -14,8 +13,7 @@
       type="text"
     />
     <input v-else
-      :value="internalValue"
-      @input="updateInternalValue"
+      v-model="localValue"
       v-bind="componentConfig"
       v-uni-id="name"
       :name="name"
@@ -43,7 +41,6 @@ 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 = {
@@ -64,7 +61,7 @@ const componentTypesConfigs = {
 export default {
   inheritAttrs: false,
   components: { TheMask, Inputmasked },
-  mixins: [ uniqIdsMixin, ValidationMixin, InputDebounce ],
+  mixins: [ uniqIdsMixin, ValidationMixin ],
   props: [
     'value',
     'label',
@@ -226,7 +223,7 @@ export default {
   },
   watch: {
     value(value) {
-      if (!this.touched) {
+      if (this.localValue !== value) {
         this.localValue = value;
       }
     },
@@ -239,6 +236,7 @@ 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, debounce, get as getFromObject} from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 
 export default {
   name: 'screen-renderer',
@@ -42,28 +42,7 @@ export default {
   },
   mounted() {
     this.currentDefinition = cloneDeep(this.definition);
-
-    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});
-    }
-
+    this.component = this.buildComponent(this.currentDefinition);
   },
   watch: {
     definition: {
@@ -73,19 +52,12 @@ export default {
       },
     },
   },
-  created() {
-    this.rebuildScreen =  debounce(function(definition) {
+  methods: {
+    rebuildScreen(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/vue-form-renderer.vue

@@ -6,12 +6,12 @@
 </template>
 
 <script>
-import {size, cloneDeep, debounce, get} from 'lodash';
+import _ 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.debouncedWatch();
-			},
+        this.$emit('update', this.data);
+      },
     },
     computed: {
       deep: true,
@@ -108,13 +108,9 @@ 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();
@@ -166,7 +162,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);
@@ -175,7 +171,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,7 +93,6 @@ 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, 100);
+      updateValidationRules = debounce(updateValidationRules, 25);
       component.methods.loadValidationRules = function() {
         // Asynchronous loading of validations
         const validations = {};

package/src/mixins/ScreenBase.js

@@ -7,28 +7,12 @@ 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 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;
-          }
+          let response = window.ProcessMaker.apiClient.get(window.ProcessMaker.VocabulariesSchemaUrl);
+          return response.then(response => {
+            return response.data;
+          });
         }
         if (window.ProcessMaker.VocabulariesPreview) {
           return window.ProcessMaker.VocabulariesPreview;
@@ -194,10 +178,6 @@ export default {
             return;
           }
 
-          if (Number.isNaN(originalValue)) {
-            delete object[attr];
-          }
-
           this.$set(
             object,
             attr,