@processmaker/screen-builder 2.24.1 → 2.26.0

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>
@@ -90,6 +89,7 @@
         debug-context="Record List Add"
         :key="Array.isArray(value) ? value.length : 0"
         :_parent="validationData"
+        @update="updateRowDataNamePrefix"
       />
     </b-modal>
     <b-modal
@@ -116,6 +116,7 @@
         debug-context="Record List Edit"
         :_parent="validationData"
         :key="editFormVersion"
+        @update="updateRowDataNamePrefix"
       />
     </b-modal>
     <b-modal
@@ -195,12 +196,14 @@ export default {
         },
       },
       initFormValues: {},
+      currentRowIndex: null,
     };
   },
   mounted() {
     if (this._perPage) {
       this.perPage = this._perPage;
     }
+    this.updateRowDataNamePrefix = _.debounce(this.updateRowDataNamePrefix, 100);
   },
   computed: {
     popupConfig() {
@@ -280,20 +283,8 @@ export default {
     },
   },
   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}));
+    updateRowDataNamePrefix() {
+      this.setUploadDataNamePrefix(this.currentRowIndex);
     },
     emitShownEvent() {
       window.ProcessMaker.EventBus.$emit('modal-shown');
@@ -309,6 +300,7 @@ export default {
       return field.key === '__filedownload';
     },
     setUploadDataNamePrefix(index = null) {
+      this.currentRowIndex = index;
       let  rowId = null;
       if (index !== null  && this.editItem) {
         rowId = this.editItem.row_id;
@@ -375,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++;
@@ -395,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);
@@ -428,8 +421,7 @@ 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.value ? JSON.parse(JSON.stringify(this.value)) : [];
-
-      const item = JSON.parse(JSON.stringify(this.addItem));
+      const item = JSON.parse(JSON.stringify({...this.addItem, _parent: undefined }));
       delete item._parent;
       data[data.length] = item;
 
@@ -443,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) {
@@ -482,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/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, debounce } from 'lodash';
+import { cloneDeep, isEqual } from 'lodash';
 
 export default {
   name: 'screen-renderer',
@@ -43,7 +43,6 @@ export default {
   mounted() {
     this.currentDefinition = cloneDeep(this.definition);
     this.component = this.buildComponent(this.currentDefinition);
-    this.rebuildScreen = debounce(this.rebuildScreen, 25);
   },
   watch: {
     definition: {

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"
@@ -326,8 +333,8 @@ export default {
             }
             this.taskId = task.id;
             this.nodeId = task.element_id;
-          } else {
-            this.$emit('completed', (this.parentRequest ? this.parentRequest : requestId));
+          } else if (this.parentRequest) {
+            this.$emit('completed', this.parentRequest);
           }
         });
     },

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: {
@@ -511,6 +514,9 @@ export default {
     },
   },
   methods: {
+    refreshContent() {
+      this.editorContentKey++;
+    },
     loadVariablesTree() {
       const definition = {
         config : this.$parent.config,
@@ -810,6 +816,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,7 +836,8 @@ 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();
   },

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/form-builder-controls.js

@@ -283,6 +283,7 @@ export default [
           type: 'FormInput',
           field: 'minDate',
           config: {
+            name: 'Minimum Date',
             label: 'Minimum Date',
             validation: 'date_or_mustache',
           },
@@ -291,8 +292,9 @@ export default [
           type: 'FormInput',
           field: 'maxDate',
           config: {
+            name: 'Maximum Date',
             label: 'Maximum Date',
-            validation: 'date_or_mustache',
+            validation: 'after_min_date|date_or_mustache',
           },
         },
         keyNameProperty,

package/src/mixins/Json2Vue.js

@@ -222,6 +222,9 @@ export default {
       });
     },
     registerVariable(name, element = {}) {
+      if (name && name.startsWith('_parent.') || name && name.includes('._parent.')) {
+        return;
+      }
       if (!this.validVariableName(name)) {
         return;
       }

package/src/mixins/extensions/DataManager.js

@@ -3,7 +3,7 @@ import _ from 'lodash';
 export default {
   methods: {
     dataFields(screen, definition) {
-      this.variables.filter(v => !this.isComputedVariable(v.name, definition))
+      this.variables.filter(v => (!v.name.startsWith('_parent') && !v.name.includes('._parent.') && !this.isComputedVariable(v.name, definition)))
         .forEach(v => {
           let component = _.get(v, 'element.component');
           let dataFormat = _.get(v, 'config.dataFormat', null);

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;