@processmaker/screen-builder 3.3.0 → 3.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.3.0",
+  "version": "3.3.2",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",

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

@@ -41,23 +41,37 @@ export default {
   data() {
     return {
       mode: "",
-      submitCollectionCheck: null
+      submitCollectionCheck: null,
+      defaultMode: 'Edit',
     };
   },
   computed: {
     showCollectionCheck() {
-      return this.mode === "Edit";
+      return this.mode === this.defaultMode;
+    }
+  },
+  watch: {
+    value: {
+      handler(newValue) {
+        this.updateModeAndCollectionCheck(newValue);
+      },
+      deep: true,
     }
   },
   mounted() {
-    // Set the defaulta data
-    this.mode = this.value.modeId || "Edit";
-    this.submitCollectionCheck =
-      this.value.submitCollectionCheck !== undefined
-        ? this.value.submitCollectionCheck
-        : true;
+    // Set the default data
+    this.updateModeAndCollectionCheck(this.value);
   },
   methods: {
+    /**
+     * 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,

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/renderer/form-collection-record-control.vue

@@ -63,7 +63,8 @@ export default {
       flagDraft: {},
       taskDraft: {},
       enableDraft: true,
-      defaultColumnsRecordId: 1
+      defaultColumnsRecordId: 1,
+      defaultCollectionMode: 'Edit',
     };
   },
   computed: {
@@ -148,13 +149,17 @@ export default {
       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,
-        this.collectionmode.modeId
+        collectionMode,
       );
     }
   },

package/src/form-builder-controls.js

@@ -1132,6 +1132,10 @@ export default [
         name: 'Collection Record Control',
         icon: 'fas fa-database',
         label: 'Collection Record Control',
+        collectionmode: {
+          modeId: 'Edit',
+          submitCollectionCheck: true
+        }
       },
       inspector: [
         {