@processmaker/screen-builder 3.2.0 → 3.3.0

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: "",
@@ -72,21 +72,91 @@ 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;
+      }
+      this.loadRecordCollection(
+        this.collection.collectionId,
+        recordId,
+        this.collectionmode.modeId
+      );
+    }
   },
   methods: {
     isSubmitButton(item) {
@@ -98,17 +168,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 +186,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 +219,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 +244,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(

package/src/form-builder-controls.js

@@ -1157,6 +1157,10 @@ export default [
           field: "collectionmode",
           config: {
             label: "Mode",
+            options: [
+              { value: "Edit", text: "Edit" },
+              { value: "View", text: "View" },
+            ]
           }
         },
       ],

package/src/main.js

@@ -163,6 +163,9 @@ window.ProcessMaker = {
   app: {
     url: `${protocol}//${hostname}:${port}` // Create a URL with the current port
   },
+  setValidatorLanguage(language) {
+    window.ProcessMaker.user.lang = 'en';
+  },
   apiClient: {
     create() {
       return this;