@processmaker/screen-builder 2.20.1 → 2.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.20.1",
+  "version": "2.23.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -44,7 +44,7 @@
     "@cypress/code-coverage": "^3.8.1",
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.28.2",
+    "@processmaker/vue-form-elements": "0.28.6",
     "@processmaker/vue-multiselect": "^2.2.0",
     "@vue/cli-plugin-babel": "^3.6.0",
     "@vue/cli-plugin-e2e-cypress": "^4.0.3",
@@ -85,7 +85,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.28.1",
+    "@processmaker/vue-form-elements": "0.28.6",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

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/ValidationsFactory.js

@@ -34,7 +34,7 @@ class Validations {
   isVisible() {
     // Disable validations if field is hidden
     let visible = true;
-    if (this.element.config.conditionalHide) {
+    if (!this.data.noData && this.element.config.conditionalHide) {
       try {
         visible = !!Parser.evaluate(this.element.config.conditionalHide, this.data);
       } catch (error) {
@@ -51,7 +51,7 @@ class Validations {
 class ArrayOfFieldsValidations extends Validations {
   async addValidations(validations) {
     for (const item of this.element) {
-      await ValidationsFactory(item, { screen: this.screen, data: this.data }).addValidations(validations);
+      await ValidationsFactory(item, { screen: this.screen, data: this.data, parentVisibilityRule: this.parentVisibilityRule }).addValidations(validations);
     }
   }
 }
@@ -81,8 +81,9 @@ class FormNestedScreenValidations extends Validations {
       return;
     }
     const definition = await this.loadScreen(this.element.config.screen);
+    let parentVisibilityRule = this.parentVisibilityRule ? this.parentVisibilityRule : this.element.config.conditionalHide;
     if (definition && definition[0] && definition[0].items) {
-      await ValidationsFactory(definition[0].items, { screen: this.screen, data: this.data }).addValidations(validations);
+      await ValidationsFactory(definition[0].items, { screen: this.screen, data: this.data, parentVisibilityRule }).addValidations(validations);
     }
   }
 
@@ -112,8 +113,7 @@ class FormLoopValidations extends Validations {
     set(validations, this.element.config.name, {});
     const loopField = get(validations, this.element.config.name);
     loopField['$each'] = {};
-    const firstRow = (get(this.data, this.element.config.name) || [{}])[0];
-    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, ...firstRow } }).addValidations(loopField['$each']);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, noData:true }, parentVisibilityRule: this.element.config.conditionalHide }).addValidations(loopField['$each']);
   }
 }
 
@@ -126,7 +126,7 @@ class FormMultiColumnValidations extends Validations {
     if (!this.isVisible()) {
       return;
     }
-    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: this.data, parentVisibilityRule: this.element.config.conditionalHide }).addValidations(validations);
   }
 }
 
@@ -167,19 +167,8 @@ class FormElementValidations extends Validations {
     }
     const fieldName = this.element.config.name;
     const validationConfig = this.element.config.validation;
-
-    // Disable validations if field is hidden
-    if (this.element.config.conditionalHide) {
-      let visible = true;
-      try {
-        visible = !!Parser.evaluate(this.element.config.conditionalHide, this.data);
-      } catch (error) {
-        visible = false;
-      }
-      if (!visible) {
-        return;
-      }
-    }
+    const conditionalHide = this.element.config.conditionalHide;
+    const parentVisibilityRule = this.parentVisibilityRule;
 
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
@@ -203,7 +192,40 @@ class FormElementValidations extends Validations {
           params.push(fieldName);
           validationFn = validationFn(...params);
         }
-        fieldValidation[rule] = validationFn;
+        fieldValidation[rule] = function(...props) {
+          const data = props[1];
+          let dataWithParent = this.addReferenceToParents(data);
+          const nestedDataWithParent = this.addReferenceToParents(this.findParent(data));
+          if (nestedDataWithParent) {
+            dataWithParent = Object.assign(nestedDataWithParent, dataWithParent);
+          }
+          // Check Parent Visibility
+          if (parentVisibilityRule) {
+            let isParentVisible = true;
+            try {
+              isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);              
+            } catch (error) {
+              isParentVisible = false;
+            }
+
+            if (!isParentVisible ) {
+              return true;
+            }
+          }
+          // Check Field Visibility
+          let visible = true;
+          if (conditionalHide) {
+            try {
+              visible = !!Parser.evaluate(conditionalHide, dataWithParent);
+            } catch (error) {
+              visible = false;
+            }
+          }
+          if (!visible) {
+            return true;
+          }
+          return validationFn.apply(this,props);
+        };
       });
     } else if (typeof validationConfig === 'string' && validationConfig) {
       let validationFn = validators[validationConfig];
@@ -212,7 +234,40 @@ class FormElementValidations extends Validations {
         console.error(`Undefined validation rule "${validationConfig}"`);
         return;
       }
-      fieldValidation[validationConfig] = validationFn;
+      fieldValidation[validationConfig] = function(...props) {
+        const data = props[1];
+        let dataWithParent = this.addReferenceToParents(data);
+        const nestedDataWithParent = this.addReferenceToParents(this.findParent(data));
+        if (nestedDataWithParent) {
+          dataWithParent = Object.assign(nestedDataWithParent, dataWithParent);
+        }
+        // Check Parent Visibility
+        if (parentVisibilityRule) {
+          let isParentVisible = true;
+          try {
+            isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);
+          } catch (error) {
+            isParentVisible = false;
+          }
+
+          if (!isParentVisible) {
+            return true;
+          }
+        }
+        // Check Field Visibility
+        let visible = true;
+        if (conditionalHide) {
+          try {
+            visible = !!Parser.evaluate(conditionalHide, dataWithParent);
+          } catch (error) {
+            visible = false;
+          }
+        }
+        if (!visible) {
+          return true;
+        }
+        return validationFn.apply(this,props);
+      };
     }
     if (this.element.items) {
       ValidationsFactory(this.element.items, { screen: this.screen, data: this.data }).addValidations(validations);

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

@@ -24,6 +24,8 @@
         :css="css"
         :empty-text="$t('No Data Available')"
         :current-page="currentPage"
+        @sort-changed="sortChanged"
+        @input="onInput"
         data-cy="table"
       >
         <template #cell()="{index,field,item}">
@@ -74,6 +76,7 @@
       :title="$t('Add')"
       header-close-content="&times;"
       data-cy="modal-add"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -99,6 +102,7 @@
       :title="$t('Edit Record')"
       header-close-content="&times;"
       data-cy="modal-edit"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -161,7 +165,7 @@ const jsonOptionsActionsColumn = {
 
 export default {
   mixins: [mustacheEvaluation],
-  props: ['name', 'label', 'fields', 'value', 'editable', '_config', 'form', 'validationData', 'formConfig', 'formComputed', 'formWatchers'],
+  props: ['name', 'label', 'fields', 'value', 'editable', '_config', 'form', 'validationData', 'formConfig', 'formComputed', 'formWatchers', '_perPage'],
   data() {
     return {
       editFormVersion: 0,
@@ -192,6 +196,11 @@ export default {
       initFormValues: {},
     };
   },
+  mounted() {
+    if (this._perPage) {
+      this.perPage = this._perPage;
+    }
+  },
   computed: {
     popupConfig() {
       const config = [];
@@ -240,6 +249,7 @@ export default {
         from,
         to: value.length,
         data: value,
+        lastSortConfig: false,
       };
       return data;
     },
@@ -258,7 +268,28 @@ export default {
       return this.form && this.form === this.$parent.currentPage;
     },
   },
+  watch: {
+    'tableData.total': {
+      deep: true,
+      handler(total) {
+        let totalPages = Math.ceil(total / this.perPage);
+        this.currentPage = (this.currentPage > totalPages ? totalPages : this.currentPage);
+      },
+    },
+  },
   methods: {
+    sortChanged(payload) {
+      this.lastSortConfig = payload;
+      this.tableData.data = _.orderBy(this.tableData.data, [payload.sortBy], [(payload.sortDesc ? 'desc' : 'asc')]);
+    },
+    onInput() {
+      if (this.lastSortConfig) {
+        this.tableData.data = _.orderBy(this.tableData.data, [this.lastSortConfig.sortBy], [(this.lastSortConfig.sortDesc ? 'desc' : 'asc')]);
+      }
+    },
+    emitShownEvent() {
+      window.ProcessMaker.EventBus.$emit('modal-shown');
+    },
     formatIfDate(string) {
       return dateUtils.formatIfDate(string);
     },
@@ -339,7 +370,7 @@ export default {
     showEditForm(index) {
       let pageIndex = ((this.paginatorPage-1) * this.perPage) + index;
       // Reset edit to be a copy of our data model item
-      this.editItem = JSON.parse(JSON.stringify(this.value[pageIndex]));
+      this.editItem = JSON.parse(JSON.stringify(this.tableData.data[pageIndex]));
       this.editIndex = pageIndex;
       // rebuild the edit screen to avoid
       this.editFormVersion++;
@@ -349,13 +380,13 @@ export default {
       });
     },
     edit(event) {
-      if (this.$refs.editRenderer.$refs.renderer.$refs.component.$v.$invalid) {
+      if (this.$refs.editRenderer.$refs.renderer.$refs.component.$v.vdata.$invalid) {
         event.preventDefault();
         return;
       }
 
       // Edit the item in our model and emit change
-      let data = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
+      let data = this.tableData.data ? JSON.parse(JSON.stringify(this.tableData.data)) : [];
       data[this.editIndex] = JSON.parse(JSON.stringify(this.editItem));
 
       // Remove the parent object
@@ -382,7 +413,7 @@ export default {
     handleOk(bvModalEvt) {
       bvModalEvt.preventDefault();
 
-      if (this.$refs.addRenderer.$refs.renderer.$refs.component.$v.$invalid) {
+      if (this.$refs.addRenderer.$refs.renderer.$refs.component.$v.vdata.$invalid) {
         return;
       }
 
@@ -442,7 +473,7 @@ export default {
     remove() {
       // Add the item to our model and emit change
       // @todo Also check that value is an array type, if not, reset it to an array
-      let data = this.value ? JSON.parse(JSON.stringify(this.value)) : [];
+      let data = this.tableData.data ? JSON.parse(JSON.stringify(this.tableData.data)) : [];
       let recordData = data[this.deleteIndex];
       // Remove item from data array
       data.splice(this.deleteIndex, 1);
@@ -459,3 +490,4 @@ export default {
     max-width: 300px;
   }
 </style>
+

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/components/task.vue

@@ -242,6 +242,11 @@ export default {
           .then((response) => {
             this.task = response.data;
             this.checkTaskStatus();
+            if (window.PM4ConfigOverrides.getScreenEndpoint && window.PM4ConfigOverrides.getScreenEndpoint.includes('tasks/')) {
+              const screenPath = window.PM4ConfigOverrides.getScreenEndpoint.split('/');              
+              screenPath[1] = this.task.id;
+              window.PM4ConfigOverrides.getScreenEndpoint = screenPath.join('/');
+            }
           })
           .catch(() => {
             this.hasErrors = true;
@@ -279,19 +284,19 @@ export default {
       }
       this.prepareTask();
     },
-    closeTask() {
+    closeTask(parentRequestId = null) {
       if (this.hasErrors) {
         this.$emit('error', this.requestId);
         return;
       }
 
       if (this.task.process_request.status === 'COMPLETED') {
-        this.processCompleted();
+        this.loadNextAssignedTask(parentRequestId);
 
       } else if (this.task.allow_interstitial) {
         this.task.interstitial_screen['_interstitial'] = true;
         this.screen = this.task.interstitial_screen;
-        this.loadNextAssignedTask();
+        this.loadNextAssignedTask(parentRequestId);
 
       } else {
         this.$emit('closed', this.task.id);
@@ -313,11 +318,18 @@ export default {
               }
               this.unsubscribeSocketListeners();
               this.redirecting = task.process_request_id;
-              this.$emit('redirect', task);
+              this.$emit('redirect', task.id, true);
               return;
+            } else {
+              // Only emit completed after getting the subprocess tasks and there are no tasks and process is completed
+              if (requestId == this.task.process_request_id && this.parentRequest && this.task.process_request.status === 'COMPLETED') {
+                this.$emit('completed', this.parentRequest);
+              }
             }
             this.taskId = task.id;
             this.nodeId = task.element_id;
+          } else {
+            this.$emit('completed', (this.parentRequest ? this.parentRequest : requestId));
           }
         });
     },
@@ -361,9 +373,8 @@ export default {
       // This may no longer be needed
     },
     processCompleted() {
-      if (this.parentRequest && this.task.allow_interstitial) {
-        // There could be another task in the parent, so don't emit completed
-        return;
+      if (this.parentRequest) {
+        this.$emit('completed', this.parentRequest);
       }
       this.$emit('completed', this.requestId);
     },
@@ -412,8 +423,13 @@ export default {
         `ProcessMaker.Models.ProcessRequest.${this.parentRequest}`,
         '.ProcessUpdated',
         (data) => {
-          if (['ACTIVITY_COMPLETED', 'ACTIVITY_ACTIVATED'].includes(data.event)) {
-            this.loadNextAssignedTask(this.parentRequest);
+          if (['ACTIVITY_ACTIVATED'].includes(data.event)) {
+            this.closeTask(this.parentRequest);
+          }
+          if (['ACTIVITY_COMPLETED'].includes(data.event)) {
+            if (this.task.process_request.status === 'COMPLETED') {
+              this.processCompleted();
+            }
           }
           if (data.event === 'ACTIVITY_EXCEPTION') {
             this.$emit('error', this.requestId);

package/src/form-control-common-properties.js

@@ -96,7 +96,8 @@ export const keyNameProperty = {
   config: {
     label: 'Variable Name',
     name: 'Variable Name',
-    validation: 'regex:/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*[^.]$/|required|not_in:' + javascriptReservedKeywords,
+    // Update tests/e2e/specs/Builder.spec.js when changing this
+    validation: 'regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$/|required|not_in:' + javascriptReservedKeywords,
     helper: 'A variable name is a symbolic name to reference information.',
   },
 };

package/src/main.js

@@ -152,7 +152,7 @@ window.ProcessMaker = {
                 {value: 2, content: 'John'},
                 {value: 3, content: 'Mary'},
                 {value: 4, content: 'Patricia'},
-              ], 
+              ],
             }});
             break;
           default:
@@ -201,6 +201,16 @@ window.Echo = {
       }, 1000);
     });
   },
+  eventMocks(event, response) {
+    this.listeners.forEach((listener) => {
+      setTimeout(() => {
+        listener.callback({
+          type: event,
+          response,
+        });
+      }, 1000);
+    });
+  },
   private() {
     return {
       notification(callback) {

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/ScreenBase.js

@@ -102,7 +102,15 @@ export default {
     },
     mustache(text) {
       try {
-        const data = Object.assign({_parent: this._parent}, this.vdata);
+        const data = new Proxy(this, {
+          get(target, name) {
+            if (name === '_parent') {
+              return target._parent;
+            } else {
+              return target.vdata[name];
+            }
+          },
+        });
         return text && Mustache.render(text, data);
       } catch (e) {
         return 'MUSTACHE: ' + e.message;

package/src/mixins/ValidationRules.js

@@ -23,6 +23,7 @@ import {
   and,
   maxItems,
   minItems,
+  type,
 } from 'vuelidate/lib/validators';
 
 export const ValidationMsg = {
@@ -59,6 +60,7 @@ export const ValidationMsg = {
   regex: 'Invalid value',
   maxItems: 'Should NOT have more than {max} items',
   minItems: 'Must have at least {min}',
+  type: 'Invalid type',
 };
 
 export const custom_date = (date) => {
@@ -231,4 +233,5 @@ export const validators = {
   afterOrEqual: after_or_equal,
   maxItems,
   minItems,
+  type,
 };

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