@processmaker/screen-builder 2.5.27 → 2.5.28

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.5.27",
+  "version": "2.5.28",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -77,6 +77,7 @@
     "vue-template-compiler": "^2.6.12",
     "vue-uniq-ids": "^1.0.0",
     "vue-upload-component": "^2.8.14",
+    "vue-vuelidate-jsonschema": "^0.13.4",
     "vuedraggable": "^2.16.0",
     "vuetable-2": "^1.7.5",
     "vuex": "^3.1.1"

package/src/DataProvider.js

@@ -4,6 +4,7 @@ import _ from 'lodash';
 
 export default {
   screensCache: [],
+  cachedScreenPromises: [],
 
   install(Vue) {
     Vue.prototype.$dataProvider = this;
@@ -77,23 +78,32 @@ export default {
       }
     });
   },
-  getScreen(id, query = '') {
-    const endpoint = _.get(window, 'PM4ConfigOverrides.getScreenEndpoint', '/screens');
-    return new Promise((resolve, reject) => {
-      const cache = this.screensCache.find(screen => screen.id == id);
-      if (cache) {
-        resolve({data: cache});
-      }
-      if (!cache && id != undefined) {
-        const request = this.get(endpoint + `/${id}${query}`);
-        request.then(response => {
-          if (response.data.nested) {
-            this.addNestedScreenCache(response.data.nested);
-          }
-          resolve(response);
-        }).catch(response => reject(response));
+  getScreen(id, query='') {
+    let cachedPromise = this.cachedScreenPromises.find(item => item.id === id && item.query === query);
+    if (cachedPromise) {
+      return cachedPromise.screenPromise;
+    }
+    else {
+      const endpoint = _.get(window, 'PM4ConfigOverrides.getScreenEndpoint', '/screens');
+      
+      const screensCacheHit = this.screensCache.find(screen => screen.id == id);
+      if (screensCacheHit) {
+        return Promise.resolve({data: screensCacheHit});
       }
-    });
+
+      let screenPromise = new Promise((resolve, reject) => {
+        this.get(endpoint + `/${id}${query}`)
+          .then(response => {
+            if (response.data.nested) {
+              this.addNestedScreenCache(response.data.nested);
+            }
+            resolve(response);
+          })
+          .catch(response => reject(response));
+      });
+      this.cachedScreenPromises.push({id, query, screenPromise});
+      return screenPromise;
+    }
   },
 
   postScript(id, params) {

package/src/components/inspector/validation-select.vue

@@ -57,8 +57,8 @@
             </div>
           </b-card-header>
           <b-collapse :id="formatRuleContentAsId(rule.content)" :accordion="formatRuleContentAsId(rule.content)" :visible="rule.visible" role="tabpanel">
-            <b-card-body> 
-              <div class="p-2"> 
+            <b-card-body>
+              <div class="p-2">
                 <div v-for="config in rule.configs" :key="config.label" class="mb-2">
                   <div v-if="config.type === 'FormInput'">
                     <form-input :label="config.label" :name="config.name || config.label" v-model="config.value" :validation="config.validation" :helper="config.helper"/>
@@ -294,7 +294,7 @@ export default {
       if (this.rules && this.rules.length) {
         return true;
       }
-      
+
       return false;
     },
   },
@@ -314,9 +314,8 @@ export default {
       },
     },
     value() {
-      this.rules = this.value;
+      this.rules = this.value || [];
       this.cloneSetRules();
-      
     },
     selectedOption: {
       deep: true,
@@ -380,13 +379,13 @@ export default {
             }
           });
 
-          if (ruleConfigs.length > 1) {  
+          if (ruleConfigs.length > 1) {
             ruleConfigs = ruleConfigs.join(',');
           }
           if (ruleConfigs.length) {
             rule.value = rule.field + ruleConfigs;
           }
-          
+
         }
       });
     },

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

@@ -5,6 +5,7 @@
 </template>
 
 <script>
+import Mustache from 'mustache';
 import { getValidPath } from '@/mixins';
 
 export default {
@@ -18,6 +19,45 @@ export default {
         ['btn-' + variant]: true,
       };
     },
+    options() {
+      if (!this.tooltip || this.event === 'submit') {
+        return {};
+      }
+
+      let content = '';
+      try {
+        content = Mustache.render(this.tooltip.content || '', this.transientData);
+      } catch (error) { error; }
+
+      return {
+        title: content,
+        html: true,
+        placement: this.tooltip.position || '',
+        trigger: 'hover',
+        variant: this.tooltip.variant || '',
+        boundary: 'window',
+      };
+    },
+    valid() {
+      if (this.$attrs.validate) {
+        return !this.$attrs.validate.$invalid;
+      }
+      return true;
+    },
+    message() {
+      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
+      this.errors = 0;
+      if (!this.valid) {
+        this.countErrors(this.$attrs.validate.vdata);
+        this.countErrors(this.$attrs.validate.schema);
+        let message = 'There are {{items}} validation errors in your form.';
+        if (this.errors === 1) {
+          message = 'There is a validation error in your form.';
+        }
+        return this.$t(message, {items: this.errors});
+      }
+      return '';
+    },
   },
   data() {
     return {

package/src/components/screen-renderer.vue

@@ -11,7 +11,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',
@@ -27,19 +27,29 @@ 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';
+    },
+    onAsyncWatcherOff() {
+      this.displayAsyncLoading = false;
+    },
     getCurrentPage() {
       return this.$refs.component.getCurrentPage();
     },

package/src/components/task.vue

@@ -55,10 +55,10 @@
 </template>
 
 <script>
-import _ from 'lodash';
+import { get } from 'lodash';
 
 const defaultBeforeLoadTask = () => {
-  new Promise((resolve) => {
+  return new Promise((resolve) => {
     resolve();
   });
 };
@@ -177,8 +177,8 @@ export default {
         if (this.screen.type === 'CONVERSATIONAL') {
           this.renderComponent = 'ConversationalForm';
         } else {
-          const isInterstitial = _.get(this.screen, '_interstitial', false);
-          let component = _.get(this, 'task.component', 'task-screen');
+          const isInterstitial = get(this.screen, '_interstitial', false);
+          let component = get(this, 'task.component', 'task-screen');
           if (component === null || isInterstitial) {
             component = 'task-screen';
           }
@@ -235,24 +235,28 @@ export default {
         });
       }
     },
-    async loadTask() {
-      await this.beforeLoadTask(this.taskId, this.nodeId);
+    loadTask() {
+      const url = `/${this.taskId}?include=data,user,requestor,processRequest,component,screen,requestData,bpmnTagName,interstitial,definition,nested`;
+      // For Vocabularies
+      if (window.ProcessMaker && window.ProcessMaker.packages && window.ProcessMaker.packages.includes('package-vocabularies')) {
+        window.ProcessMaker.VocabulariesSchemaUrl = `vocabularies/task_schema/${this.taskId}`;
+      }
 
-      return this.$dataProvider
-        .getTasks(
-          `/${this.taskId}?include=data,user,requestor,processRequest,component,screen,requestData,bpmnTagName,interstitial,definition,nested`
-        )
-        .then((response) => {
-          this.task = response.data;
-          this.checkTaskStatus();
-        })
-        .catch(() => {
-          this.hasErrors = true;
-        });
+      return this.beforeLoadTask(this.taskId, this.nodeId).then(() => {
+        this.$dataProvider
+          .getTasks(url)
+          .then((response) => {
+            this.task = response.data;
+            this.checkTaskStatus();
+          })
+          .catch(() => {
+            this.hasErrors = true;
+          });
+      });
     },
     prepareTask() {
       this.resetScreenState();
-      this.requestData = _.get(this.task, 'request_data', {});
+      this.requestData = get(this.task, 'request_data', {});
       this.refreshScreen++;
 
       this.$emit('task-updated', this.task);

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;
 
@@ -322,19 +322,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/ScreenBase.js

@@ -5,6 +5,22 @@ import { ValidationMsg } from './ValidationRules';
 const stringFormats = ['string', 'datetime', 'date', 'password'];
 
 export default {
+  schema: [
+    function() {
+      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;
+          });
+        }
+        if (window.ProcessMaker.VocabulariesPreview) {
+          return window.ProcessMaker.VocabulariesPreview;
+        }
+      }
+      return {};
+    },
+  ],
   data() {
     return {
       ValidationRules__: {},
@@ -178,6 +194,11 @@ export default {
         if (validation[key]!==undefined && !validation[key]) {
           message.push(this.$t(ValidationMsg[key]).replace(/\{(.+?)\}/g,(match,p1)=>{return validation.$params[key][p1];}));
         }
+        // JSON Schema use to start with 'schema'
+        const keyForSchema = 'schema' + key.charAt(0).toUpperCase() + key.slice(1);
+        if (validation[keyForSchema]!==undefined && !validation[keyForSchema]) {
+          message.push(this.$t(ValidationMsg[key]).replace(/\{(.+?)\}/g,(match,p1)=>{return validation.$params[keyForSchema][p1];}));
+        }
       });
       return message.join('.\n');
     },

package/src/mixins/ValidationRules.js

@@ -161,17 +161,29 @@ export const required = (value) => {
 export const requiredIf = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value, data) {
   const level = fieldName.split('.').length - 1;
   const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level);
-  if (get(dataWithParent, variable) != expected) return true;
+  const variableValue = get(dataWithParent, variable);
+  const isBoolean = (variableValue === true || variableValue === false);
+  let expectedValue = expected;
+  if (isBoolean) {
+    expectedValue = expected === 'true' || expected === '1';
+  }
+  if (variableValue != expectedValue) return true;
   return value instanceof Array ? value.length > 0 : !!value;
 });
 
 export const requiredUnless = (variable, expected, fieldName) => helpers.withParams({variable, expected}, function(value, data) {
   const level = fieldName.split('.').length - 1;
   const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level);
-  if (get(dataWithParent, variable) == expected) return true;
+  const variableValue = get(dataWithParent, variable);
+  const isBoolean = (variableValue === true || variableValue === false);
+  let expectedValue = expected;
+  if (isBoolean) {
+    expectedValue = expected === 'true' || expected === '1';
+  }
+  if (variableValue == expectedValue) return true;
   return value instanceof Array ? value.length > 0 : !!value;
 });
-  
+
 export const sameAs = (field, fieldName) => helpers.withParams({field}, function(value, data) {
   const level = fieldName.split('.').length - 1;
   const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level);

package/src/mixins/extensions/DataManager.js

@@ -12,8 +12,8 @@ export default {
             this.getValue(${JSON.stringify(v.name)}, data) || 
             this.initialValue('${component}', '${dataFormat}', ${JSON.stringify(v.config)})
           `);
-          this.addWatch(screen, v.name, `this.setValue(${JSON.stringify(v.name)}, value, this.vdata);`);
-          this.addWatch(screen, `vdata.${v.name}`, `this.${v.name} = this.vdata.${v.name};`);
+          this.addWatch(screen, v.name, `this.setValue(${JSON.stringify(v.name)}, value, this.vdata);this.setValue(${JSON.stringify(v.name)}, value, this.schema);`);
+          this.addWatch(screen, `vdata.${v.name}`, `this.setValue(${JSON.stringify(v.name)}, value, this);`);
         });
       screen.props.vdata = null;
     },

package/src/mixins/extensions/Submit.js

@@ -0,0 +1,11 @@
+export default {
+  mounted() {
+    this.extensions.push({
+      onloadproperties({ element, properties }) {
+        if (element.component === 'FormButton' && element.config.event === 'submit') {
+          properties[':validate'] = '$v';
+        }
+      },
+    });
+  },
+};

package/src/mixins/extensions/ValidationRules.js

@@ -1,4 +1,5 @@
 import { validationMixin } from 'vuelidate';
+import VueVuelidateJsonschema from 'vue-vuelidate-jsonschema';
 
 export default {
   mounted() {
@@ -9,12 +10,13 @@ export default {
           delete properties[':validation'];
           delete properties['validation'];
           // Add validation class and error message
-          properties[':class'] = `{ 'form-group--error': ${this.checkVariableExists('$v.vdata.' + element.config.name)} && $v.vdata.${element.config.name}.$invalid }`;
-          properties[':error'] = `${this.checkVariableExists('$v.vdata.' + element.config.name)} && validationMessage($v.vdata.${element.config.name})`;
+          properties[':class'] = `{ 'form-group--error': ${this.checkVariableExists('$v.vdata.' + element.config.name)} && $v.vdata.${element.config.name}.$invalid || ${this.checkVariableExists('$v.schema.' + element.config.name)} && $v.schema.${element.config.name}.$invalid }`;
+          properties[':error'] = `${this.checkVariableExists('$v.vdata.' + element.config.name)} && validationMessage($v.vdata.${element.config.name}) || ${this.checkVariableExists('$v.schema.' + element.config.name)} && validationMessage($v.schema.${element.config.name})`;
         }
       },
       onbuild({ screen }) {
         screen.mixins.push(validationMixin);
+        screen.mixins.push(VueVuelidateJsonschema.mixin);
       },
     });
   },