@processmaker/screen-builder 2.21.1 → 2.24.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.21.1",
+  "version": "2.24.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1738,9 +1738,9 @@
       }
     },
     "@processmaker/vue-form-elements": {
-      "version": "0.28.2",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.28.2.tgz",
-      "integrity": "sha512-oHFBh/BTfsUmE6RXpTVbi+UfzIKdRBJWwXs2xz/N3I2e8EyQZBotOoK6uq6TsavttLZ2wm4LWKJ9kHygI3FnGw==",
+      "version": "0.28.6",
+      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.28.6.tgz",
+      "integrity": "sha512-uxHsOkCNLJEF4mJu7dK4+qn2SL/mWDswdoV1kQjNjQkwBk10uGXDdAbtliHRbld3HDMAPUQAu69c+1fS8pDqjA==",
       "dev": true,
       "requires": {
         "@tinymce/tinymce-vue": "2.0.0",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.21.1",
+  "version": "2.24.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/ValidationsFactory.js

@@ -1,6 +1,6 @@
 import { validators } from './mixins/ValidationRules';
 import DataProvider from './DataProvider';
-import { get, set } from 'lodash';
+import { get, set, merge } from 'lodash';
 import { Parser } from 'expr-eval';
 
 let globalObject = typeof window === 'undefined'
@@ -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,53 @@ 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']);
+    this.checkForSiblings(validations);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, noData:true }, parentVisibilityRule: this.element.config.conditionalHide }).addValidations(loopField['$each']);
+  }
+  checkForSiblings(validations) {
+    const siblings = [];
+    const siblingValidations = [];
+    // Find loops that reference the same variable
+    this.screen.config.forEach(page => {
+      page.items.filter(item => {
+        if (item.component === 'FormLoop' && item.config.name === this.element.config.name) {
+          siblings.push(item);
+        }
+      });
+
+      // Get siblings validations
+      if (siblings) {
+        siblings.forEach(sibling => {
+          sibling.items.filter(item => {
+            if (!item.config.validation) {
+              return;
+            }
+
+            item.config.validation.forEach(validation => {
+              const rule = this.camelCase(validation.value.split(':')[0]);
+              const validationFn = validators[rule];
+              const obj = {};
+              let ruleObj = {};
+              ruleObj[rule] = validationFn;
+              obj[item.config.name] = ruleObj;
+              merge(siblingValidations, obj);
+            });
+          });
+        });
+      }
+    });
+
+    if (Object.keys(siblingValidations).length != 0) {
+      // Update the loop validations with its siblings. 
+      const loopValidations = get(validations, this.element.config.name);
+      if (loopValidations.hasOwnProperty('$each')) {
+        merge(loopValidations['$each'], siblingValidations);    
+      }
+      set(validations[this.element.config.name]['$each'], loopValidations);
+    } 
+  }
+  camelCase(name) {
+    return name.replace(/_\w/g, m => m.substr(1, 1).toUpperCase());
   }
 }
 
@@ -126,7 +172,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 +213,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 +238,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 +280,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

@@ -20,10 +20,13 @@
         :data-manager="dataManager"
         :fields="tableFields"
         :items="tableData.data"
+        :sort-compare-options="{ numeric: false }"
         sort-icon-left
         :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 +77,7 @@
       :title="$t('Add')"
       header-close-content="&times;"
       data-cy="modal-add"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -99,6 +103,7 @@
       :title="$t('Edit Record')"
       header-close-content="&times;"
       data-cy="modal-edit"
+      @shown="emitShownEvent"
     >
       <vue-form-renderer
         :page="0"
@@ -161,7 +166,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 +197,11 @@ export default {
       initFormValues: {},
     };
   },
+  mounted() {
+    if (this._perPage) {
+      this.perPage = this._perPage;
+    }
+  },
   computed: {
     popupConfig() {
       const config = [];
@@ -240,6 +250,7 @@ export default {
         from,
         to: value.length,
         data: value,
+        lastSortConfig: false,
       };
       return data;
     },
@@ -258,7 +269,35 @@ 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);
+        this.currentPage = (this.currentPage == 0 ? 1 : this.currentPage);
+      },
+    },
+  },
   methods: {
+    sortChanged(payload) {
+      this.lastSortConfig = payload;
+      this.tableData.data = this.sort(this.tableData.data, payload);
+    },
+    onInput() {
+      if (this.lastSortConfig) {
+        this.tableData.data = this.sort(this.tableData.data, this.lastSortConfig);
+      }
+    },
+    sort(data, options) {
+      if (options.sortDesc) {
+        return data.sort((b,a) => a[options.sortBy].localeCompare(b[options.sortBy], 0, {numeric: false}));
+      }
+      return data.sort((a,b) => a[options.sortBy].localeCompare(b[options.sortBy], 0, {numeric: false}));
+    },
+    emitShownEvent() {
+      window.ProcessMaker.EventBus.$emit('modal-shown');
+    },
     formatIfDate(string) {
       return dateUtils.formatIfDate(string);
     },
@@ -337,9 +376,9 @@ export default {
       }
     },
     showEditForm(index) {
-      let pageIndex = ((this.paginatorPage-1) * this.perPage) + index;
+      let pageIndex = ((this.currentPage-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 +388,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 +421,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;
       }
 
@@ -405,7 +444,7 @@ export default {
       });
     },
     showDeleteConfirmation(index) {
-      let pageIndex = ((this.paginatorPage-1) * this.perPage) + index;
+      let pageIndex = ((this.currentPage-1) * this.perPage) + index;
       this.deleteIndex = pageIndex;
       this.$refs.deleteModal.show();
     },
@@ -442,7 +481,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 +498,4 @@ export default {
     max-width: 300px;
   }
 </style>
+

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,16 @@ export default {
               }
               this.unsubscribeSocketListeners();
               this.redirecting = task.process_request_id;
-              this.$emit('redirect', task);
+              this.$emit('redirect', task.id, true);
               return;
+            } else if (this.task && requestId == this.task.process_request_id && this.parentRequest && this.task.process_request.status === 'COMPLETED') {
+              // Only emit completed after getting the subprocess tasks and there are no tasks and process is 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 +371,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 +421,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/ScreenBase.js

@@ -93,7 +93,8 @@ export default {
     },
     tryFormField(variableName, callback, defaultValue = null) {
       try {
-        return callback();
+        let result = callback();
+        return (result === undefined) ? null : result;
       } catch (e) {
         set(this.$v, `${variableName}.$invalid`, true);
         set(this.$v, `${variableName}.invalid_default_value`, false);
@@ -102,7 +103,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;
@@ -146,21 +155,17 @@ export default {
     },
     setValue(name, value, object = this, defaults = object) {
       if (object && value !== undefined) {
-        const splittedName = name.split('.');
-        splittedName.forEach((attr, index) => {
+        const parsedName = name.split('.');
 
-          let isLastElement, setValue;
-          const originalValue = get(object, attr);
+        for (const attr of parsedName) {
+          let setValue;
+          let index = parsedName.indexOf(attr);
+          let isLastElement = index === parsedName.length - 1;
 
-          if (index === splittedName.length - 1) {
-            isLastElement = true;
-          } else {
-            isLastElement = false;
-          }
+          const originalValue = get(object, attr);
 
           if (isLastElement) {
             setValue = value;
-
           } else {
             setValue = originalValue;
 
@@ -168,7 +173,7 @@ export default {
               // Check defaults
               setValue = get(defaults, attr);
             }
-            
+
             if (!setValue) {
               // Still no value? Set empty object
               setValue = {};
@@ -184,9 +189,10 @@ export default {
             attr,
             setValue
           );
+
           object = get(object, attr);
           defaults = get(defaults, attr);
-        });
+        }
       }
     },
     validationMessage(validation) {

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

@@ -1,20 +1,18 @@
-import _ from 'lodash';
 import { Parser } from 'expr-eval';
 
 export default {
   methods: {
     evaluateExpression(expression, type) {
+      const self = this;
       let value = null;
 
-      const merged = {};
-      _.merge(merged, this.vdata, this._data);
-
       try {
-        //monitor if variable belongs to data (defined variables) or vdata (external variables)
-        //in this way the event is not executed again when the variable is update
-        const data = new Proxy(merged, {
+        // Monitor if variable belongs to data (defined variables) or
+        // vdata (external variables)in this way the event is not
+        // executed again when the variable is update
+        const data = new Proxy(Object.assign({}, self, self.vdata), {
           get(data, name) {
-            return data[name];
+            return undefined === data[name] ? self.vdata[name] : data[name];
           },
           set() {
             throw 'You are not allowed to set properties from inside an expression';

package/src/mixins/extensions/ComputedFields.js

@@ -3,14 +3,28 @@ import computedFields from '../computedFields';
 export default {
   methods: {
     computedFields(screen, definition) {
+      // Add computed fields
       screen.mixins.push(computedFields);
-      definition.computed.forEach(computed => {
+
+      for (const computed of definition.computed) {
         screen.computed[computed.property] = {
-          get: new Function(`return this.evaluateExpression(${JSON.stringify(computed.formula)}, ${JSON.stringify(computed.type)});`),
-          set() {},
+          get: (() => {
+            const formula = JSON.stringify(computed.formula);
+            const type = JSON.stringify(computed.type);
+
+            return new Function(`return this.evaluateExpression(${formula}, ${type});`);
+          })(),
+          set() {
+            // Do nothing (as it's not allowed)
+          },
         };
-        this.addWatch(screen, computed.property, `this.setValue(${JSON.stringify(computed.property)}, value, this.vdata);`);
-      });
+
+        this.addWatch(
+          screen,
+          computed.property,
+          `this.setValue(${JSON.stringify(computed.property)}, value, this.vdata);`
+        );
+      }
     },
   },
   mounted() {