@processmaker/screen-builder 3.2.1 → 3.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.2.1",
+  "version": "3.3.1",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.63.0",
+    "@processmaker/vue-form-elements": "0.64.0",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.63.0",
+    "@processmaker/vue-form-elements": "0.64.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

package/src/App.vue

@@ -340,6 +340,10 @@ import "./assets/css/tabs.css";
 // To include another language in the Validator with variable processmaker
 const globalObject = typeof window === "undefined" ? global : window;
 
+if (typeof globalObject.ProcessMaker?.setValidatorLanguage === 'function') {
+  globalObject.ProcessMaker.setValidatorLanguage(Validator, globalObject.ProcessMaker.user.lang);
+}
+
 /* istanbul ignore next */
 Validator.register(
   "attr-value",
@@ -540,9 +544,11 @@ export default {
     if (
       globalObject.ProcessMaker &&
       globalObject.ProcessMaker.user &&
-      globalObject.ProcessMaker.user.lang
+      globalObject.ProcessMaker.user.lang &&
+      typeof globalObject.ProcessMaker.setValidatorLanguage === 'function'
     ) {
-      Validator.useLang(globalObject.ProcessMaker.user.lang);
+      //Validator.useLang(globalObject.ProcessMaker.user.lang);
+      globalObject.ProcessMaker.setValidatorLanguage(Validator, globalObject.ProcessMaker.user.lang);
     }
     // Iterate through our initial config set, calling this.addControl
     controlConfig.forEach((config) => {
@@ -672,9 +678,11 @@ export default {
         if (
           globalObject.ProcessMaker &&
           globalObject.ProcessMaker.user &&
-          globalObject.ProcessMaker.user.lang
+          globalObject.ProcessMaker.user.lang &&
+          typeof globalObject.ProcessMaker.setValidatorLanguage === 'function'
         ) {
-          Validator.useLang(globalObject.ProcessMaker.user.lang);
+          globalObject.ProcessMaker.setValidatorLanguage(Validator, globalObject.ProcessMaker.user.lang);
+          //Validator.useLang(globalObject.ProcessMaker.user.lang);
         }
 
         // Validation will not run until you call passes/fails on it

package/src/components/inspector/collection-display-mode.vue

@@ -1,86 +1,82 @@
 <template>
   <div>
     <div>
-      <label for="collectionmode">{{ $t("Mode") }}</label>
+      <label for="collection-mode">{{ $t(label) }}</label>
       <b-form-select
-        id="collectionmode"
-        v-model="modeId"
-        :options="displayOptions"
+        id="collection-mode"
+        v-model="mode"
+        :options="options"
         data-cy="inspector-collection"
+        @change="saveFields"
       />
     </div>
-    <div class="mt-2" v-if="modeId !== 'View'">
-      <b-form-checkbox v-model="submitCollectionCheck">
-      {{  $t("Update collection on submit") }}
+    <div v-show="showCollectionCheck" class="mt-2">
+      <b-form-checkbox v-model="submitCollectionCheck" @change="saveFields">
+        {{ $t("Update collection on submit") }}
       </b-form-checkbox>
     </div>
   </div>
 </template>
 
 <script>
-import ScreenVariableSelector from "../screen-variable-selector.vue";
-
-const CONFIG_FIELDS = ["modeId", "submitCollectionCheck"];
 export default {
-  components: {
-    ScreenVariableSelector
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    screenType: {
+      type: String,
+      default: ""
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    label: {
+      type: String,
+      default: ""
+    }
   },
-  props: ["value", "screenType"],
   data() {
     return {
-      fields: [],
-      modeId: null,
-      submitCollectionCheck: true,
-      displayOptions: []
+      mode: "",
+      submitCollectionCheck: null,
+      defaultMode: 'Edit',
     };
   },
-  mounted() {
-    this.getFields();
-  },
   computed: {
-    options() {
-      return Object.fromEntries(
-        CONFIG_FIELDS.map((field) => [field, this[field]])
-      );
+    showCollectionCheck() {
+      return this.mode === this.defaultMode;
     }
   },
   watch: {
     value: {
-      handler(value) {
-        if (!value) {
-          return;
-        }
-        CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+      handler(newValue) {
+        this.updateModeAndCollectionCheck(newValue);
       },
-      immediate: true
-    },
-    modeId: {
-      handler() {
-        this.getFields();
-      }
-    },
-    submitCollectionCheck(newValue) {
-      this.submitCollectionCheck = newValue;
-    },
-    screenType: {
-      handler() {
-        this.getFields();
-      },
-      immediate: true
-    },
-    options: {
-      handler() {
-        this.$emit("input", this.options);
-      },
-      deep: true
+      deep: true,
     }
   },
+  mounted() {
+    // Set the default data
+    this.updateModeAndCollectionCheck(this.value);
+  },
   methods: {
-    getFields() {
-      this.displayOptions = [
-        { value: "Edit", text: "Edit" },
-        { value: "View", text: "View" }
-      ];
+    /**
+     * Update the mode and collection check value
+     *
+     * @param {Object} value
+     */
+    updateModeAndCollectionCheck(value) {
+      this.mode = value.modeId || this.defaultMode;
+      this.submitCollectionCheck = value.submitCollectionCheck ?? true;
+    },
+    saveFields() {
+      this.$emit("input", {
+        modeId: this.mode,
+        submitCollectionCheck: this.submitCollectionCheck
+      });
     }
   }
 };

package/src/components/inspector/collection-records-list.vue

@@ -10,15 +10,15 @@
           data-cy="inspector-collection"
         />
         <b-form-text class="mt-2">
-        {{ $t("Collection Record Control is not available for Anonymous Web Entry") }} 
+        {{ $t("Collection Record Control is not available for Anonymous Web Entry") }}
         </b-form-text>
     </b-form-group>
     </div>
     <div v-if="collectionId > 0" class="screen-link mt-2">
-      <a 
+      <a
         :href="`/designer/screen-builder/${
           screenMode === 'display' ? idCollectionScreenView : idCollectionScreenEdit
-          }/edit`" 
+          }/edit`"
           target="_blank">
         {{ $t(screenMode === 'display' ? "Open View Screen" : "Open Edit Screen") }}
         <i class="ml-1 fas fa-external-link-alt" />
@@ -67,11 +67,15 @@ export default {
   },
   watch: {
     value: {
-      handler(value) {
-        if (!value) {
+      handler(newValue) {
+        if (!newValue) {
+          // Clear collection id
+          this.collectionId = null;
+
           return;
         }
-        CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+
+        CONFIG_FIELDS.forEach((field) => (this[field] = newValue[field]));
       },
       immediate: true
     },

package/src/components/inspector/options-list.vue

@@ -28,7 +28,7 @@
           </div>
           <label class="mt-3" for="option-content">{{ $t('Content') }}</label>
           <b-form-input id="option-content" v-model="optionContent" data-cy="inspector-option-content" />
-          
+
           <label v-if="renderAs === 'checkbox'" class="mt-3" for="option-aria-label">{{ $t('Aria Label') }}</label>
           <b-form-input v-if="renderAs === 'checkbox'" id="option-aria-label" v-model="optionAriaLabel" data-cy="inspector-option-aria-label" />
         </div>
@@ -294,6 +294,7 @@ export default {
       endpoints: {},
       pmqlQuery: '',
       optionsList: [],
+      optionsListExtra: [],
       showOptionCard: false,
       showRemoveWarning: false,
       showJsonEditor: false,
@@ -401,6 +402,14 @@ export default {
         this.selectedEndPoint = this.endPointList[0].value;
       }
     },
+    renderAs(val) {
+      if (this.dataSource === 'provideData') {
+        if (val !== 'dropdown') {
+          // add aria label field when renderAs is not dropdown
+          this.optionsListExtra = this.optionsList.map(option => ({...option, [this.ariaLabelField]: ''}));
+        }
+       }
+    }
   },
   computed: {
     showTypeOfValueReturned() {
@@ -460,6 +469,7 @@ export default {
         defaultOptionKey: this.defaultOptionKey,
         selectedOptions: this.selectedOptions,
         optionsList: this.optionsList,
+        optionsListExtra: this.optionsListExtra,
         showRenderAs: this.showRenderAs,
         renderAs: this.renderAs,
         allowMultiSelect: this.allowMultiSelect,
@@ -492,6 +502,7 @@ export default {
     this.defaultOptionKey= this.options.defaultOptionKey;
     this.selectedOptions = this.options.selectedOptions;
     this.optionsList = this.options.optionsList ? this.options.optionsList : [];
+    this.optionsListExtra = this.options.optionsListExtra ? this.options.optionsListExtra : [];
     this.jsonData = JSON.stringify(this.optionsList);
     this.showRenderAs = this.options.showRenderAs;
     this.renderAs = this.options.renderAs;
@@ -590,7 +601,7 @@ export default {
       this.optionContent = this.optionsList[index][this.valueField];
       this.optionValue = this.optionsList[index][this.keyField];
       if (this.renderAs === "checkbox") {
-        this.optionAriaLabel = this.optionsList[index][this.ariaLabelField];
+        this.optionAriaLabel = this.optionsListExtra[index][this.ariaLabelField];
       }
       this.optionError = '';
     },
@@ -611,17 +622,16 @@ export default {
           this.optionError = 'An item with the same key already exists';
           return;
         }
-        if (this.renderAs === "checkbox") {
-          this.optionsList.push({
+        const newOption = {
             [this.valueField]: this.optionContent,
             [this.keyField]: this.optionValue,
-            [this.ariaLabelField]: this.optionAriaLabel
-          });
+          };
+        if (this.renderAs === "checkbox") {
+          this.optionsList.push(newOption);
+          this.optionsListExtra.push({...newOption, [this.ariaLabelField]: this.optionAriaLabel});
+
         } else {
-          this.optionsList.push({
-            [this.valueField]: this.optionContent,
-            [this.keyField]: this.optionValue
-          });
+          this.optionsList.push(newOption);
         }
       } else {
         if (this.optionsList.find((item, index) => { return item[that.keyField] === this.optionValue && index !== this.editIndex ; })) {
@@ -631,7 +641,7 @@ export default {
         this.optionsList[this.editIndex][this.keyField] = this.optionValue;
         this.optionsList[this.editIndex][this.valueField] = this.optionContent;
         if (this.renderAs === "checkbox") {
-          this.optionsList[this.editIndex][this.ariaLabelField] = this.optionAriaLabel;
+          this.optionsListExtra[this.editIndex] = {...this.optionsList[this.editIndex], [this.ariaLabelField]: this.optionAriaLabel};
         }
       }
 

package/src/components/renderer/form-collection-record-control.vue

@@ -1,9 +1,9 @@
 <template>
   <vue-form-renderer
     ref="collectionRecordControl"
+    v-model="data"
     class="form-collection-record-control"
     :placeholder="placeholder"
-    v-model="data"
     mode="preview"
     :config="validatedConfig"
     :computed="computed"
@@ -14,9 +14,9 @@
 </template>
 
 <script>
+import _ from "lodash";
 import VueFormRenderer from "../vue-form-renderer.vue";
 import CollectionRecordsList from "../inspector/collection-records-list.vue";
-import _ from 'lodash';
 
 const globalObject = typeof window === "undefined" ? global : window;
 
@@ -43,7 +43,7 @@ export default {
     collectionmode: {
       type: Object
     },
-    taskdraft: Object,
+    taskdraft: Object
   },
   data() {
     return {
@@ -55,7 +55,7 @@ export default {
       screenTitle: null,
       selCollectionId: Number,
       selRecordId: Number,
-      selDisplayMode: String,
+      selDisplayMode: "Edit",
       screenCollectionId: null,
       placeholder: "Select a collection",
       screenType: "",
@@ -63,7 +63,8 @@ export default {
       flagDraft: {},
       taskDraft: {},
       enableDraft: true,
-      defaultColumnsRecordId: 1
+      defaultColumnsRecordId: 1,
+      defaultCollectionMode: 'Edit',
     };
   },
   computed: {
@@ -72,21 +73,95 @@ export default {
     },
     data: {
       get() {
-        if(this.hasMustache) {
+        if (this.hasMustache) {
           this.clearDataObject();
         }
         return this.localData;
       },
       set(data) {
         Object.keys(data).forEach((variable) => {
-          this.validationData && this.$set(this.validationData, variable, data[variable]);
+          this.validationData &&
+            this.$set(this.validationData, variable, data[variable]);
         });
         if (this.collection) {
-          this.$set(this.collection, 'data', Array.isArray(data) ? data : [data]);
-          this.$set(this.collection, 'screen', this.screenCollectionId);
+          this.$set(
+            this.collection,
+            "data",
+            Array.isArray(data) ? data : [data]
+          );
+          this.$set(this.collection, "screen", this.screenCollectionId);
         }
-      },
+      }
+    }
+  },
+  watch: {
+    collection(collection) {
+      if (collection) {
+        this.selCollectionId = collection.collectionId;
+        const currentData = this.localData;
+        this.$set(
+          collection,
+          "data",
+          Array.isArray(currentData) ? currentData : [currentData]
+        );
+        this.$set(collection, "screen", this.screenCollectionId);
+      }
+    },
+    record(record) {
+      this.hasMustache = false;
+      this.enableDraft = false;
+      if (
+        record &&
+        !isNaN(record) &&
+        record > 0 &&
+        this.collection.collectionId
+      ) {
+        this.selRecordId = record;
+        this.loadRecordCollection(
+          this.collection.collectionId,
+          record,
+          this.selDisplayMode
+        );
+      } else {
+        if (this.isMustache(record)) {
+          this.callbackRecord();
+        }
+        this.localData = {};
+      }
     },
+    collectionmode(collectionmode) {
+      if (collectionmode) {
+        this.selDisplayMode = collectionmode.modeId;
+      }
+      this.loadRecordCollection(
+        this.selCollectionId,
+        this.selRecordId,
+        this.selDisplayMode
+      );
+    }
+  },
+  mounted() {
+    this.$root.$on("taskdraft-input", (val) => {
+      this.taskDraft = val;
+    });
+
+    if (this.collection && this.record) {
+      const recordId = this.isMustache(this.record)
+        ? this.defaultColumnsRecordId
+        : this.record;
+
+      if (this.isMustache(this.record)) {
+        this.hasMustache = true;
+      }
+
+      const collectionMode = this.collectionmode?.modeId ?? this.defaultCollectionMode;
+
+      this.loadRecordCollection(
+        this.collection.collectionId,
+        recordId,
+        collectionMode,
+      );
+    }
   },
   methods: {
     isSubmitButton(item) {
@@ -98,17 +173,17 @@ export default {
     },
     hideSubmitButtons(config) {
       config.forEach((item) => {
-        //If the element has containers
+        // If the element has containers
         if (Array.isArray(item)) {
           this.hideSubmitButtons(item);
         }
 
-        //If the element has items
+        // If the element has items
         if (item.items) {
           this.hideSubmitButtons(item.items);
         }
 
-        //hidden buttons
+        // hidden buttons
         if (this.isSubmitButton(item)) {
           item.config.hidden = true;
         }
@@ -116,17 +191,17 @@ export default {
     },
     disableForm(config) {
       config.forEach((item) => {
-        //If the element has containers
+        // If the element has containers
         if (Array.isArray(item)) {
           this.disableForm(item);
         }
 
-        //If the element has items
+        // If the element has items
         if (item.items) {
           this.disableForm(item.items);
         }
 
-        //Disable element
+        // Disable element
         if (item && item.config) {
           item.config.disabled = true;
           item.config.readonly = true;
@@ -149,7 +224,7 @@ export default {
           this.watchers = response.data.watchers;
           this.screenTitle = response.data.title;
 
-          if (this.$attrs["disabled"]) {
+          if (this.$attrs.disabled) {
             this.disableForm(this.config);
           }
         });
@@ -174,81 +249,50 @@ export default {
           const respData = response.data;
           const viewScreen = response.collection.read_screen_id;
           const editScreen = response.collection.update_screen_id;
-            //Choose screen id regarding of the display Mode
-            this.screenCollectionId = 
-              typeof this.selDisplayMode === 'function' ? 
-                (this.collectionmode.modeId === "View" ? viewScreen : editScreen) :
-                (this.selDisplayMode === "View" ? viewScreen : editScreen);
+          // Choose screen id regarding of the display Mode
+          this.screenCollectionId =
+            typeof this.selDisplayMode === "function"
+              ? this.collectionmode.modeId === "View"
+                ? viewScreen
+                : editScreen
+              : this.selDisplayMode === "View"
+              ? viewScreen
+              : editScreen;
           this.loadScreen(this.screenCollectionId);
-         
-          //This section validates if Collection has draft data
-          if (this.taskDraft?.draft?.data == null || this.taskDraft.draft.data === '' || !this.enableDraft) 
-          {
+
+          // This section validates if Collection has draft data
+          if (
+            this.taskDraft?.draft?.data == null ||
+            this.taskDraft.draft.data === "" ||
+            !this.enableDraft
+          ) {
             this.localData = respData;
-          }else{
+          } else {
             this.localData = _.merge({}, respData, this.taskDraft.draft.data);
           }
-
         })
         .catch(() => {
           this.localData = {};
-          globalObject.ProcessMaker.alert(this.$t('This content does not exist. We could not locate indicated data'), "danger");
+          globalObject.ProcessMaker.alert(
+            this.$t(
+              "This content does not exist. We could not locate indicated data"
+            ),
+            "danger"
+          );
           this.placeholder = "Select a collection";
-        });;
+        });
     },
     isMustache(record) {
       return /\{\{.*\}\}/.test(record);
     },
     clearDataObject() {
-      Object.keys(this.localData).forEach(key => {
+      Object.keys(this.localData).forEach((key) => {
         if (key !== "id") {
           this.localData[key] = "";
         }
       });
-    },
-  },
-  watch: {
-    collection(collection) {
-      if(collection) {
-        this.selCollectionId = collection.collectionId;
-        const currentData = this.localData;
-        this.$set(collection, 'data', Array.isArray(currentData) ? currentData : [currentData]);
-        this.$set(collection, 'screen', this.screenCollectionId);
-      }
-    },
-    record(record) {
-      this.hasMustache = false;
-      this.enableDraft = false;
-      if (record && !isNaN(record) && record > 0 && this.collection.collectionId) {
-        this.selRecordId = record;
-        this.loadRecordCollection(this.collection.collectionId, record, this.selDisplayMode);
-      } else {
-        if (this.isMustache(record)) {
-          this.callbackRecord();
-        }
-        this.localData = {};
-      }
-    },
-    collectionmode(collectionmode) {
-      if(collectionmode) {
-        this.selDisplayMode = collectionmode.modeId;
-      }
-      this.loadRecordCollection(this.selCollectionId, this.selRecordId, this.selDisplayMode);
-    },
-  },
-  mounted() {
-    this.$root.$on("taskdraft-input", (val)=>{
-      this.taskDraft = val;
-    });
-
-    if (this.collection && this.record) {
-      const recordId = this.isMustache(this.record) ? this.defaultColumnsRecordId : this.record;
-      if(this.isMustache(this.record)) {
-        this.hasMustache = true;
-      }
-      this.loadRecordCollection(this.collection.collectionId, recordId, this.collectionmode.modeId);
     }
-  },
+  }
 };
 </script>
 

package/src/components/task.vue

@@ -250,6 +250,7 @@ export default {
       this.renderComponent = 'simpleErrorMessage';
     },
     loadScreen(id) {
+      this.disabled = true;
       let query = '?include=nested';
       if (this.requestId) {
         query += '&request_id=' + this.requestId;
@@ -257,6 +258,7 @@ export default {
 
       this.$dataProvider.getScreen(id, query).then((response) => {
         this.screen = response.data;
+        this.disabled = false;
       });
     },
     reload() {

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

@@ -329,7 +329,7 @@
                       : null
                   "
                   @focusout.native="updateState"
-                  
+
                 />
               </div>
             </div>
@@ -568,9 +568,10 @@ const globalObject = typeof window === "undefined" ? global : window;
 if (
   globalObject.ProcessMaker &&
   globalObject.ProcessMaker.user &&
-  globalObject.ProcessMaker.user.lang
+  globalObject.ProcessMaker.user.lang &&
+  typeof globalObject.ProcessMaker.setValidatorLanguage === 'function'
 ) {
-  Validator.useLang(globalObject.ProcessMaker.user.lang);
+  globalObject.ProcessMaker.setValidatorLanguage(Validator, globalObject.ProcessMaker.user.lang);
 }
 
 // Todo: Validation messages are not translated. These will need to be converted
@@ -1476,8 +1477,12 @@ export default {
       }
 
       // Generate Variable Name
+      const keyNamePropertyToFind = _.cloneDeep(keyNameProperty);
+      delete keyNamePropertyToFind.config.helper;
+      delete keyNamePropertyToFind.config.label;
+
       if (
-        _.findIndex(control.inspector, keyNameProperty) !== -1 ||
+        _.findIndex(control.inspector, keyNamePropertyToFind) !== -1 ||
         control.component === "FormLoop"
       ) {
         [this.variables, copy.config.name] = this.generator.generate(