@processmaker/screen-builder 2.25.0 → 2.27.0

package/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.25.0",
+  "version": "2.27.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -10192,6 +10192,11 @@
       "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
       "dev": true
     },
+    "is-proxy": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/is-proxy/-/is-proxy-1.0.6.tgz",
+      "integrity": "sha512-RzUROKx085vc7tpo9zCinKAmsD7ihAnXJ7HvKdcsc3m0XW/vpJDFSvZgutqMam0aBxpYBmDVYv48+T/+AMYl1g=="
+    },
     "is-regex": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.3.tgz",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "2.25.0",
+  "version": "2.27.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -30,6 +30,7 @@
     "*.js"
   ],
   "dependencies": {
+    "is-proxy": "^1.0.6",
     "lodash": "^4.17.20",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.27",
@@ -85,7 +86,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.28.6",
+    "@processmaker/vue-form-elements": "0.28.7",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/App.vue

@@ -74,6 +74,13 @@
         <!-- Preview -->
         <b-row class="h-100 m-0" id="preview" v-show="displayPreview" data-cy="preview">
           <b-col class="overflow-auto h-100" data-cy="preview-content">
+            <div v-if="$store.getters['globalErrorsModule/isValidScreen'] === false" class="alert alert-danger mt-3">
+              <i class="fas fa-exclamation-circle"/>
+              {{ $store.getters['globalErrorsModule/getErrorMessage'] }}
+              <button type="button" class="close" aria-label="Close" @click="$store.dispatch('globalErrorsModule/close')">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </div>
             <vue-form-renderer ref="renderer"
               :key="rendererKey"
               v-model="previewData"
@@ -422,10 +429,13 @@ export default {
       this.previewData = this.previewInputValid ? JSON.parse(this.previewInput) : {};
       this.rendererKey++;
       if (mode == 'preview') {
+        this.$dataProvider.flushScreenCache();
         this.preview.config = cloneDeep(this.config);
         this.preview.computed = cloneDeep(this.computed);
         this.preview.customCSS = cloneDeep(this.customCSS);
         this.preview.watchers = cloneDeep(this.watchers);
+      } else {
+        this.$refs.builder.refreshContent();
       }
     },
     loadFromLocalStorage() {

package/src/DataProvider.js

@@ -109,6 +109,10 @@ export default {
     }
   },
 
+  flushScreenCache() {
+    this.cachedScreenPromises.splice(0, this.cachedScreenPromises.length);
+  },
+
   postScript(id, params, options = {}) {
     let endpoint = _.get(
       window,

package/src/ValidationsFactory.js

@@ -10,6 +10,7 @@ class Validations {
   screen = null;
   firstPage = 0;
   data = {};
+  insideLoop = false;
   constructor(element, options) {
     this.element = element;
     Object.assign(this, options);
@@ -51,7 +52,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, parentVisibilityRule: this.parentVisibilityRule }).addValidations(validations);
+      await ValidationsFactory(item, { screen: this.screen, data: this.data, parentVisibilityRule: this.parentVisibilityRule, insideLoop: this.insideLoop }).addValidations(validations);
     }
   }
 }
@@ -114,13 +115,16 @@ class FormLoopValidations extends Validations {
     const loopField = get(validations, this.element.config.name);
     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']);
+    await ValidationsFactory(this.element.items, { screen: this.screen, data: {_parent: this.data, noData:true }, parentVisibilityRule: this.element.config.conditionalHide, insideLoop: true }).addValidations(loopField['$each']);
   }
   checkForSiblings(validations) {
     const siblings = [];
     const siblingValidations = [];
     // Find loops that reference the same variable
     this.screen.config.forEach(page => {
+      if (!page || !page.items) {
+        return;
+      }
       page.items.filter(item => {
         if (item.component === 'FormLoop' && item.config.name === this.element.config.name) {
           siblings.push(item);
@@ -215,6 +219,7 @@ class FormElementValidations extends Validations {
     const validationConfig = this.element.config.validation;
     const conditionalHide = this.element.config.conditionalHide;
     const parentVisibilityRule = this.parentVisibilityRule;
+    const insideLoop = this.insideLoop || false;
 
     set(validations, fieldName, get(validations, fieldName, {}));
     const fieldValidation = get(validations, fieldName);
@@ -240,16 +245,14 @@ class FormElementValidations extends Validations {
         }
         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
+          const level = fieldName.split('.').length - 1;
+          const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level);
           if (parentVisibilityRule) {
+            const nextParentLevel = insideLoop ? 1 : 0;
+            const parentDataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level + nextParentLevel);
             let isParentVisible = true;
             try {
-              isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);              
+              isParentVisible = !!Parser.evaluate(parentVisibilityRule, parentDataWithParent);              
             } catch (error) {
               isParentVisible = false;
             }
@@ -282,16 +285,15 @@ class FormElementValidations extends Validations {
       }
       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);
-        }
+        const level = fieldName.split('.').length - 1;
+        const dataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level);
         // Check Parent Visibility
         if (parentVisibilityRule) {
+          const nextParentLevel = insideLoop ? 1 : 0;
+          const parentDataWithParent = this.getDataAccordingToFieldLevel(this.getRootScreen().addReferenceToParents(data), level + nextParentLevel);
           let isParentVisible = true;
           try {
-            isParentVisible = !!Parser.evaluate(parentVisibilityRule, dataWithParent);
+            isParentVisible = !!Parser.evaluate(parentVisibilityRule, parentDataWithParent);
           } catch (error) {
             isParentVisible = false;
           }

package/src/components/inspector/screen-selector.vue

@@ -95,10 +95,19 @@ export default {
           return false;
         }
       }
-      this.$emit('input', this.storeId ? get(value, this.trackBy) : value);
+      const id = this.storeId ? get(value, this.trackBy) : value;
+      // Make sure to load latest config from screen and nested screens
+      this.$dataProvider.flushScreenCache();
+      this.$emit('input', id);
     },
   },
   mounted() {
+    this.$root.$on('remove-nested', (nestedScreenId) => {
+      if (this.value === nestedScreenId) {
+        this.$emit('input', null);
+      }
+    });
+
     let pmql = '(type = "FORM" or type = "DISPLAY")';
     if (this.screenType === formTypes.display) {
       pmql = '(type = "DISPLAY")';
@@ -107,6 +116,7 @@ export default {
       pmql += ' and id != ' + this.builder.screen.id;
     }
     this.pmql = pmql;
+    this.fields = 'screens.id,title';
   },
 };
 </script>

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

@@ -1,9 +1,5 @@
 <template>
   <div class="form-group"  style="overflow-x: hidden">
-    <div class="alert alert-danger" v-if="!valid">
-      <i class="fas fa-exclamation-circle"/>
-      {{ message }}
-    </div>
     <button v-b-tooltip="options" @click="click" :class="classList" :name="name" :aria-label="$attrs['aria-label']" :tabindex="$attrs['tabindex']">
       {{ label }}
     </button>
@@ -13,17 +9,39 @@
 <script>
 import Mustache from 'mustache';
 import { getValidPath } from '@/mixins';
+import { isProxy } from 'is-proxy';
 
 export default {
   mixins: [getValidPath],
   props: ['variant', 'label', 'event', 'eventData', 'name', 'fieldValue', 'value', 'tooltip', 'transientData'],
+  watch: {
+    '$attrs.validate': {
+      deep: true,
+      handler(validate) {
+        if (validate && !isProxy(validate.vdata.$model)) {
+          this.errors = 0;
+          let message = '';
+          if (validate.$invalid) {
+            this.countErrors(validate.vdata);
+            this.countErrors(validate.schema);
+            message = this.errors === 1
+              ? 'There is a validation error in your form.'
+              : 'There are {{items}} validation errors in your form.';
+            message = this.$t(message, {items: this.errors});
+          }
+          this.$store.commit('globalErrorsModule/basic', {key: 'valid', value: !validate.$invalid});
+          this.$store.commit('globalErrorsModule/basic', {key: 'message', value: message});
+        }
+      },
+    },
+  },
   computed: {
     classList() {
       let variant = this.variant || 'primary';
       return {
         btn: true,
         ['btn-' + variant]: true,
-        disabled: !this.valid,
+        disabled: this.errors,
       };
     },
     options() {
@@ -45,26 +63,6 @@ export default {
         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 {
@@ -124,6 +122,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss">
-</style>

package/src/components/renderer/form-nested-screen.vue

@@ -116,6 +116,7 @@ export default {
                 globalObject['nestedScreens'] = {};
               }
               globalObject.nestedScreens['id_' + id] = this.config;
+              this.$root.$emit('nested-screen-updated');
             }
           });
       }

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

@@ -21,12 +21,11 @@
         :fields="tableFields"
         :items="tableData.data"
         :sort-compare-options="{ numeric: false }"
+        :sort-null-last="true"
         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}">
@@ -40,13 +39,13 @@
             {{ formatIfDate(mustache(field.key, item)) }}
           </template>
         </template>
-        <template #cell(__actions)="{index}">
+        <template #cell(__actions)="{index,item}">
           <div class="actions">
             <div class="btn-group btn-group-sm" role="group" aria-label="Actions">
-              <button @click="showEditForm(index)" class="btn btn-primary" :title="$t('Edit')" data-cy="edit-row">
+              <button @click="showEditForm(index, item.row_id)" class="btn btn-primary" :title="$t('Edit')" data-cy="edit-row">
                 <i class="fas fa-edit"/>
               </button>
-              <button @click="showDeleteConfirmation(index)" class="btn btn-danger" :title="$t('Delete')" data-cy="remove-row">
+              <button @click="showDeleteConfirmation(index, item.row_id)" class="btn btn-danger" :title="$t('Delete')" data-cy="remove-row">
                 <i class="fas fa-trash-alt"/>
               </button>
             </div>
@@ -287,21 +286,6 @@ export default {
     updateRowDataNamePrefix() {
       this.setUploadDataNamePrefix(this.currentRowIndex);
     },
-    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');
     },
@@ -383,10 +367,10 @@ export default {
         this.paginatorPage = this.lastPage;
       }
     },
-    showEditForm(index) {
+    showEditForm(index, rowId) {
       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.tableData.data[pageIndex]));
+      this.editItem = _.find(this.tableData.data, {'row_id': rowId});
       this.editIndex = pageIndex;
       // rebuild the edit screen to avoid
       this.editFormVersion++;
@@ -403,10 +387,11 @@ export default {
 
       // Edit the item in our model and emit change
       let data = this.tableData.data ? JSON.parse(JSON.stringify(this.tableData.data)) : [];
-      data[this.editIndex] = JSON.parse(JSON.stringify(this.editItem));
+      var index = _.findIndex(data, {'row_id': this.editItem.rowId});
+      data[index] = JSON.parse(JSON.stringify(this.editItem));
 
       // Remove the parent object
-      delete data[this.editIndex]._parent;
+      delete data[index]._parent;
 
       // Emit the newly updated data model
       this.$emit('input', data);
@@ -450,9 +435,8 @@ export default {
         this.$refs.addModal.hide();
       });
     },
-    showDeleteConfirmation(index) {
-      let pageIndex = ((this.currentPage-1) * this.perPage) + index;
-      this.deleteIndex = pageIndex;
+    showDeleteConfirmation(index, rowId) {
+      this.deleteIndex = _.find(this.tableData.data, {'row_id': rowId});
       this.$refs.deleteModal.show();
     },
     downloadFile(rowData, rowField, rowIndex) {
@@ -489,9 +473,11 @@ export default {
       // 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.tableData.data ? JSON.parse(JSON.stringify(this.tableData.data)) : [];
-      let recordData = data[this.deleteIndex];
+      let recordData = this.deleteIndex;
       // Remove item from data array
-      data.splice(this.deleteIndex, 1);
+      _.remove(data, {
+        'row_id': this.deleteIndex.row_id,
+      });
       // Emit the newly updated data model
       this.$emit('input', data);
       this.$root.$emit('removed-record', this, recordData);

package/src/components/task.vue

@@ -8,6 +8,13 @@
     <template v-if="screen">
       <div class="card card-body border-top-0 h-100" :class="screenTypeClass">
         <div v-if="renderComponent === 'task-screen'">
+          <div v-if="$store.getters['globalErrorsModule/isValidScreen'] === false" class="alert alert-danger mt-3">
+            <i class="fas fa-exclamation-circle"/>
+            {{ $store.getters['globalErrorsModule/getErrorMessage'] }}
+            <button type="button" class="close" aria-label="Close" @click="$store.dispatch('globalErrorsModule/close')">
+              <span aria-hidden="true">&times;</span>
+            </button>
+          </div>
           <vue-form-renderer
             ref="renderer"
             v-model="requestData"

package/src/components/vue-form-builder.vue

@@ -102,6 +102,7 @@
         class="h-100"
         ghost-class="form-control-ghost"
         :value="config[currentPage].items"
+        :key="editorContentKey"
         @input="updateConfig"
         v-bind="{
           group: {name: 'controls'},
@@ -311,6 +312,7 @@ import * as renderer from './renderer';
 import * as inspector from './inspector';
 import '@processmaker/vue-form-elements/dist/vue-form-elements.css';
 import undoRedoModule from '../undoRedoModule';
+import globalErrorsModule from '@/store/modules/global-errors';
 import accordions from './accordions';
 import { keyNameProperty } from '../form-control-common-properties';
 import VariableNameGenerator from '@/components/VariableNameGenerator';
@@ -437,6 +439,7 @@ export default {
       variablesTree: [],
       language: 'en',
       collator: null,
+      editorContentKey: 0,
     };
   },
   computed: {
@@ -471,6 +474,7 @@ export default {
   watch: {
     config: {
       handler() {
+        this.checkForCaptchaInLoops();
         this.$emit('change', this.config);
         this.loadVariablesTree();
       },
@@ -511,6 +515,39 @@ export default {
     },
   },
   methods: {
+    refreshContent() {
+      this.editorContentKey++;
+    },
+    checkForCaptchaInLoops() {
+      this.config.forEach(page => {
+        this.checkForCaptcha(page.items);
+      });
+    },
+    checkForCaptcha(items, insideLoop = false, nestedScreen = null) {
+      items.forEach(item => {
+        if (!item.items && item.component == 'Captcha' && insideLoop) {
+          if (nestedScreen && nestedScreen.config.screen) {
+            this.$root.$emit('remove-nested', nestedScreen.config.screen);
+            nestedScreen.config.screen = null;
+            globalObject.ProcessMaker.alert(this.$t('You are trying to place a nested screen within CAPTCHA elements inside a loop. CAPTCHA controls cannot be placed within a Loop control.'), 'danger');
+          } else {
+            items.splice(items.indexOf(item), 1);
+            globalObject.ProcessMaker.alert(this.$t('CAPTCHA controls cannot be placed within a Loop control.'), 'danger');
+          }
+        }
+        if (item.items) {
+          this.checkForCaptcha(item.items, true);
+        }
+        if (item.component == 'FormNestedScreen' && insideLoop && item.config.screen && window.nestedScreens) {
+          let nestedScreenItems = window.nestedScreens['id_' + item.config.screen];
+          if (nestedScreenItems) {
+            nestedScreenItems.forEach(nestedScreenPage => {
+              this.checkForCaptcha(nestedScreenPage.items, true, item);
+            });
+          }
+        }
+      });
+    },
     loadVariablesTree() {
       const definition = {
         config : this.$parent.config,
@@ -810,6 +847,13 @@ export default {
       }
       this.collator = Intl.Collator(this.language);
     },
+    registerStoreModule(moduleName, storeModule) {
+      const store = this.$store;
+
+      if (!(store && store.state && store.state[moduleName])) {
+        store.registerModule(moduleName, storeModule);
+      }
+    },
   },
   created() {
     this.loadVariablesTree = _.debounce(this.loadVariablesTree, 2000);
@@ -823,12 +867,16 @@ export default {
       },
       this.$t('Must be unique')
     );
-    this.$store.registerModule('undoRedoModule', undoRedoModule);
+    this.registerStoreModule('globalErrorsModule', globalErrorsModule);
+    this.registerStoreModule('undoRedoModule', undoRedoModule);
     this.$store.dispatch('undoRedoModule/pushState', {'config': JSON.stringify(this.config), 'currentPage': this.currentPage});
     this.initiateLanguageSupport();
   },
   mounted() {
     this.loadVariablesTree();
+    this.$root.$on('nested-screen-updated', () => {
+      this.checkForCaptchaInLoops();
+    });
   },
 };
 </script>

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

@@ -13,6 +13,7 @@ import Inputmask from 'inputmask';
 import { getItemsFromConfig } from '../itemProcessingUtils';
 import { ValidatorFactory } from '../factories/ValidatorFactory';
 import CurrentPageProperty from '../mixins/CurrentPageProperty';
+import globalErrorsModule from '@/store/modules/global-errors';
 
 const csstree = require('css-tree');
 const Scrollparent = require('scrollparent');
@@ -107,6 +108,7 @@ export default {
     },
   },
   created() {
+    this.registerStoreModule('globalErrorsModule', globalErrorsModule);
     this.parseCss = _.debounce(this.parseCss, 500, {leading: true});
   },
   mounted() {
@@ -118,6 +120,13 @@ export default {
     this.scrollable = Scrollparent(this.$el);
   },
   methods: {
+    registerStoreModule(moduleName, storeModule) {
+      const store = this.$store;
+
+      if (!(store && store.state && store.state[moduleName])) {
+        store.registerModule(moduleName, storeModule);
+      }
+    },
     countElements(config) {
       const definition = { config };
       return this.$refs.renderer.countElements(definition);

package/src/mixins/multiselectApi.js

@@ -31,6 +31,7 @@ export default {
       pmql: null,
       options: [],
       selectedOption: null,
+      fields: null,
     };
   },
   watch: {
@@ -50,8 +51,9 @@ export default {
     },
     loadOptions(filter) {
       const pmql = this.pmql;
+      const fields = this.fields || undefined;
       window.ProcessMaker.apiClient
-        .get(this.api, { params: { filter, pmql } })
+        .get(this.api, { params: { filter, pmql, fields } })
         .then(response => {
           this.options = response.data.data || [];
         });

package/src/store/modules/global-errors.js

@@ -0,0 +1,30 @@
+const namespaced = true;
+const globalErrorsModule = {
+  namespaced,
+  state: () => {
+    return {
+      valid: true,
+      message: '',
+    };
+  },
+  getters: {
+    isValidScreen(state) {
+      return state.valid;
+    },
+    getErrorMessage(state) {
+      return state.message;
+    },
+  },
+  mutations: {
+    basic(state, payload) {
+      state[payload.key] = payload.value;
+    },
+  },
+  actions: {
+    close({ commit }) {
+      commit('basic', { key: 'valid', value: true });
+    },
+  },
+};
+
+export default globalErrorsModule;

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>vue-form-builder demo</title>
-<script src="./vue-form-builder.umd.js"></script>
-
-<link rel="stylesheet" href="./vue-form-builder.css">
-
-
-<script>
-console.log(vue-form-builder)
-</script>