@processmaker/screen-builder 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "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-data-source.vue

@@ -1,26 +1,25 @@
 <template>
+  <div>
     <div>
-      <div>
-        <label for="collectionsource">{{ $t("Source of Record List") }}</label>
-        <b-form-select
-          id="collectionsource"
-          v-model="sourceOptions"
-          :options="sourceDisplayOptions"
-          data-cy="inspector-collection-data-source"
-          @change="displayOptionChange"
-        />
-        <small class="mt-3 form-text text-muted">{{
-        $t("A record list can display the data of a defined variable or a collection")
-      }}</small>
-      </div>
-      <div class="mt-2" v-if="sourceOptions === 'Collection'">
-
-         <CollectionRecordsList 
-         v-model="collectionFields"
-         :record-pmql="pmql"
-         @change="collectionChanged"/>
-
-         <pmql-input
+      <label for="collectionsource">{{ $t("Source of Record List") }}</label>
+      <b-form-select
+        id="collectionsource"
+        v-model="sourceOptions"
+        :options="sourceDisplayOptions"
+        data-cy="inspector-collection-data-source"
+        @change="displayOptionChange"
+      />
+      <small class="mt-3 form-text text-muted">
+        {{ $t("A record list can display the data of a defined variable or a collection") }}
+      </small>
+    </div>
+    <div v-if="sourceOptions === 'Collection'" class="mt-2">
+      <CollectionRecordsList
+        v-model="collectionFields"
+        :record-pmql="pmql"
+        @change="collectionChanged"
+      />
+      <pmql-input
         v-model="pmql"
         :search-type="'collections_w_mustaches'"
         class="mt-3 mb-1"
@@ -31,172 +30,171 @@
         :placeholder="$t('PMQL')"
       >
       </pmql-input>
-      <small class="mt-3 form-text text-muted">{{
-        $t("Leave this field empty to show all the records of the collection")
-      }}</small>
-        <label class="mt-3" id="data-selection">{{ $t("Data Selection") }}</label>
-
+      <small class="mt-3 form-text text-muted">
+        {{ $t("Leave this field empty to show all the records of the collection") }}
+      </small>
+      <label for="data-selection" class="mt-3">{{ $t("Data Selection") }}</label>
+      <b-form-select
+        id="data-selection"
+        v-model="dataSelectionOptions"
+        :options="dataSelectionDisplayOptions"
+        data-cy="inspector-collection-data-selection"
+      />
+      <small class="mt-3 form-text text-muted">
+        {{ $t("The user can select specific data to be stored into a variable") }}
+      </small>
+      <div v-if="dataSelectionOptions === 'single-field'" class="mt-3">
+        <label for="single-columns">{{ $t("Column") }}</label>
         <b-form-select
-          id="data-selection"
-          v-model="dataSelectionOptions"
-          :options="dataSelectionDisplayOptions"
-          data-cy="inspector-collection-data-selection"
-        />
-        <small class="mt-3 form-text text-muted">{{
-        $t("The user can select specific data to be stored into a variable")
-      }}</small>
-
-        <div class="mt-3" v-if="dataSelectionOptions === 'single-field'">
-          <label id="single-columns">{{ $t('Column') }}</label>
-          <b-form-select
           id="single-columns"
           v-model="singleField"
           :options="singleFieldOptions"
           data-cy="inspector-collection-single-field"
         >
-        <option disabled value="">{{ $t("Select a column") }}</option>
-          </b-form-select>
-        </div>
+          <option disabled value="">{{ $t("Select a column") }}</option>
+        </b-form-select>
       </div>
     </div>
-  </template>
-  <script>
-
-  import CollectionRecordsList from "./collection-records-list.vue"
-  import { cloneDeep } from "lodash";
+  </div>
+</template>
+<script>
+import { cloneDeep } from "lodash";
+import CollectionRecordsList from "./collection-records-list.vue";
 
-  const CONFIG_FIELDS = [
-    "collectionFields",
-    "collectionFieldsColumns",
-    "pmql",
-    "sourceOptions",
-    "variableStore",
-    "dataSelectionOptions",
-    "singleField"
-  ];
-  export default {
-    components: {
-      CollectionRecordsList
-    },
-    props: ["value", "screenType"],
-    data() {
-      return {
-        fields: [],
-        sourceOptions: "Variable",
-        submitCollectionCheck: true,
-        sourceDisplayOptions: [],
-        collectionFields: [],
-        collectionFieldsColumns: [],
-        variableStore: null,
-        pmql: null,
-        sourceDisplayOptions: [
+const CONFIG_FIELDS = [
+  "collectionFields",
+  "collectionFieldsColumns",
+  "pmql",
+  "sourceOptions",
+  "variableStore",
+  "dataSelectionOptions",
+  "singleField"
+];
+export default {
+  components: {
+    CollectionRecordsList
+  },
+  props: ["value", "screenType"],
+  data() {
+    return {
+      fields: [],
+      sourceOptions: "Variable",
+      submitCollectionCheck: true,
+      collectionFields: [],
+      collectionFieldsColumns: [],
+      variableStore: null,
+      pmql: null,
+      sourceDisplayOptions: [
         {
-          text: this.$t('Variable'),
-          value: 'Variable',
+          text: this.$t("Variable"),
+          value: "Variable"
         },
         {
-          text: this.$t('Collection'),
-          value: 'Collection',
-        },
+          text: this.$t("Collection"),
+          value: "Collection"
+        }
       ],
       dataSelectionDisplayOptions: [
         {
-          text: this.$t('Do not allow selection'),
-          value: 'no-selection',
+          text: this.$t("Do not allow selection"),
+          value: "no-selection"
         },
         {
-          text: this.$t('Single field of record'),
-          value: 'single-field',
+          text: this.$t("Single field of record"),
+          value: "single-field"
         },
         {
-          text: this.$t('Single record'),
-          value: 'single-record',
+          text: this.$t("Single record"),
+          value: "single-record"
         },
         {
-          text: this.$t('Multiple records'),
-          value: 'multiple-records',
-        },
+          text: this.$t("Multiple records"),
+          value: "multiple-records"
+        }
       ],
-      dataSelectionOptions: "no-selection", 
+      dataSelectionOptions: "no-selection",
       collectionColumns: [],
       singleFieldOptions: [],
       singleField: null
-      };
-    },
-    methods: {
-      displayOptionChange() {
-        this.collectionFields = [];
-        this.collectionFieldsColumns = [];
-        this.pmql = null;
-        this.$root.$emit("collection-changed", true);
-      },
-      collectionChanged(data) {
-        if (Array.isArray(data)) {
-            const [firstItem] = data;
-            const collectionId = firstItem?.collection_id;
-            if(collectionId !== this.collectionFields.collectionId) {
-              this.$root.$emit("collection-changed", true);
-            }
-        }
-      },
-      getCollectionColumns(records) {
-        const [firstRecord] = records?.dataRecordList || [];
-
-        if (firstRecord?.data) {
-          const dataObject = firstRecord.data;
-
-          for (const [key, value] of Object.entries(dataObject)) {
-            this.singleFieldOptions.push({ text: key, value: key });
-          }
+    };
+  },
+  computed: {
+    options() {
+      return Object.fromEntries(
+        CONFIG_FIELDS.map((field) => [field, this[field]])
+      );
+    }
+  },
+  watch: {
+    value: {
+      handler(value) {
+        if (!value) {
+          return;
         }
+        CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
       },
+      immediate: true
     },
-    computed: {
-      options() {
-        return Object.fromEntries(
-          CONFIG_FIELDS.map((field) => [field, this[field]])
-        );
+    sourceOptions: {
+      handler(changeOption) {
+        this.$root.$emit("record-list-option", changeOption);
       }
     },
-    watch: {
-      value: {
-        handler(value) {
-          if (!value) {
-            return;
-          }
-          CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
-        },
-        immediate: true
-      },
-      sourceOptions: {
-        handler(changeOption) {
-           this.$root.$emit("record-list-option", changeOption);
-        }
+    collectionFields: {
+      handler(collectionFieldsData) {
+        this.getCollectionColumns(collectionFieldsData);
+        this.$root.$emit("record-list-collection", collectionFieldsData);
       },
-      collectionFields: {
-        handler(collectionFieldsData) {
-           this.getCollectionColumns(collectionFieldsData);
-           this.$root.$emit("record-list-collection", collectionFieldsData);
-        },
-        deep: true
+      deep: true
+    },
+    pmql: {
+      handler(newPmql) {
+        this.$root.$emit("change-pmql", newPmql);
+      }
+    },
+    submitCollectionCheck(newValue) {
+      this.submitCollectionCheck = newValue;
+    },
+    options: {
+      handler() {
+        this.$emit("input", this.options);
       },
-      pmql: {
-        handler(newPmql) {
-            this.$root.$emit("change-pmql", newPmql);
+      deep: true
+    },
+    dataSelectionOptions() {
+      this.singleField = null;
+    }
+  },
+  mounted() {
+    this.$root.$emit("record-list-option", this.sourceOptions);
+  },
+  methods: {
+    displayOptionChange() {
+      this.collectionFields = [];
+      this.collectionFieldsColumns = [];
+      this.pmql = null;
+      this.$root.$emit("collection-changed", true);
+    },
+    collectionChanged(data) {
+      if (Array.isArray(data)) {
+        const [firstItem] = data;
+        const collectionId = firstItem?.collection_id;
+        if (collectionId !== this.collectionFields.collectionId) {
+          this.$root.$emit("collection-changed", true);
         }
-      },
-      submitCollectionCheck(newValue) {
-        this.submitCollectionCheck = newValue;
-      },
-      options: {
-        handler() {
-          this.$emit("input", this.options);
-        },
-        deep: true
-      },
-      dataSelectionOptions() {
-        this.singleField = null;
       }
     },
-  };
-  </script>
+    getCollectionColumns(records) {
+      const [firstRecord] = records?.dataRecordList || [];
+
+      if (firstRecord?.data) {
+        const dataObject = firstRecord.data;
+
+        for (const [key] of Object.entries(dataObject)) {
+          this.singleFieldOptions.push({ text: key, value: key });
+        }
+      }
+    }
+  }
+};
+</script>

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

@@ -1,86 +1,68 @@
 <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
     };
   },
-  mounted() {
-    this.getFields();
-  },
   computed: {
-    options() {
-      return Object.fromEntries(
-        CONFIG_FIELDS.map((field) => [field, this[field]])
-      );
+    showCollectionCheck() {
+      return this.mode === "Edit";
     }
   },
-  watch: {
-    value: {
-      handler(value) {
-        if (!value) {
-          return;
-        }
-        CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
-      },
-      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
-    }
+  mounted() {
+    // Set the defaulta data
+    this.mode = this.value.modeId || "Edit";
+    this.submitCollectionCheck =
+      this.value.submitCollectionCheck !== undefined
+        ? this.value.submitCollectionCheck
+        : true;
   },
   methods: {
-    getFields() {
-      this.displayOptions = [
-        { value: "Edit", text: "Edit" },
-        { value: "View", text: "View" }
-      ];
+    saveFields() {
+      this.$emit("input", {
+        modeId: this.mode,
+        submitCollectionCheck: this.submitCollectionCheck
+      });
     }
   }
 };

package/src/components/inspector/column-setup.vue

@@ -360,10 +360,9 @@ export default {
   mounted() {
     this.initData();
     this.$root.$on("record-list-option", (val) => {
-      this.$nextTick(()=>{
-        this.isCollection = (val === "Collection") ? true : false;
+      this.$nextTick(() => {
+        this.isCollection = val === "Collection";
       });
-      
     });
     this.$root.$on("record-list-collection", (collectionData) => {
       this.getCollectionColumns(collectionData);

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};
         }
       }