@processmaker/screen-builder 2.22.0 → 2.23.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1738,9 +1738,9 @@
       }
     },
     "@processmaker/vue-form-elements": {
-      "version": "0.28.5",
-      "resolved": "https://registry.npmjs.org/@processmaker/vue-form-elements/-/vue-form-elements-0.28.5.tgz",
-      "integrity": "sha512-vnThQAH0TI/ZSMl4GPQA8H+AooPyv65RZnQzaBEWKUeFSpdwFFUJUIc1lMH4ji4L3qKPBEy/qQFhB541QFeh2w==",
+      "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.22.0",
+  "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.5",
+    "@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.5",
+    "@processmaker/vue-form-elements": "0.28.6",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

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);
   }
 }
 
@@ -168,7 +168,7 @@ class FormElementValidations extends Validations {
     const fieldName = this.element.config.name;
     const validationConfig = this.element.config.validation;
     const conditionalHide = this.element.config.conditionalHide;
-
+    const parentVisibilityRule = this.parentVisibilityRule;
 
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
@@ -194,7 +194,25 @@ class FormElementValidations extends Validations {
         }
         fieldValidation[rule] = function(...props) {
           const data = props[1];
-          const dataWithParent = this.addReferenceToParents(data);
+          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 {
@@ -218,7 +236,25 @@ class FormElementValidations extends Validations {
       }
       fieldValidation[validationConfig] = function(...props) {
         const data = props[1];
-        const dataWithParent = this.addReferenceToParents(data);
+        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 {

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}">
@@ -163,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,
@@ -194,6 +196,11 @@ export default {
       initFormValues: {},
     };
   },
+  mounted() {
+    if (this._perPage) {
+      this.perPage = this._perPage;
+    }
+  },
   computed: {
     popupConfig() {
       const config = [];
@@ -242,6 +249,7 @@ export default {
         from,
         to: value.length,
         data: value,
+        lastSortConfig: false,
       };
       return data;
     },
@@ -260,7 +268,25 @@ 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');
     },
@@ -344,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++;
@@ -354,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
@@ -387,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;
       }
 
@@ -447,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);
@@ -464,3 +490,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,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/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) {