bugfix/FOUR-26343: Completed tasks can be modified in the task preview pane

src/components/renderer/add-loop-row.vue

@@ -7,7 +7,7 @@
     </b-row>
 
     <b-row
-      v-if="value && config.settings.add"
+      v-if="canAddOrRemove"
       class="justify-content-md-center"
     >
       <b-col md="auto">
@@ -44,15 +44,41 @@ export default {
     config: Object,
     error: String
   },
+  computed: {
+    isDisabled() {
+      return Boolean(
+        this.config
+        && (this.config.disabled || this.config.readonly || this.config.editable === false)
+      );
+    },
+    canAddOrRemove() {
+      return Boolean(
+        this.value
+        && this.config
+        && this.config.settings
+        && this.config.settings.add
+        && !this.isDisabled
+      );
+    }
+  },
   methods: {
     async add() {
+      if (this.isDisabled) {
+        return;
+      }
       this.value.push({});
     },
     remove() {
+      if (this.isDisabled) {
+        return;
+      }
       const removed = this.value.pop();
       this.$root.$emit("removed-loop", this, removed);
     },
     removeConfirm() {
+      if (this.isDisabled) {
+        return;
+      }
       const message = this.$t("Are you sure you want to delete this?");
       window.ProcessMaker.confirmModal(this.$t("Caution!"), message, "", () => {
         this.remove();

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

@@ -10,6 +10,7 @@
     :custom-css="customCss"
     :watchers="watchers"
     :_parent="_parent"
+    :read-only="isDisabled"
   />
 </template>
 
@@ -43,7 +44,15 @@ export default {
     collectionmode: {
       type: Object
     },
-    taskdraft: Object
+    taskdraft: Object,
+    disabled: {
+      type: [Boolean, String],
+      default: false
+    },
+    readonly: {
+      type: [Boolean, String],
+      default: false
+    }
   },
   data() {
     return {
@@ -68,6 +77,16 @@ export default {
     };
   },
   computed: {
+    isDisabled() {
+      return Boolean(
+        this.disabled === true
+        || this.disabled === "true"
+        || this.disabled === ""
+        || this.readonly === true
+        || this.readonly === "true"
+        || this.readonly === ""
+      );
+    },
     validatedConfig() {
       return this.config && this.config[0] ? this.config : defaultConfig;
     },
@@ -79,6 +98,9 @@ export default {
         return this.localData;
       },
       set(data) {
+        if (this.isDisabled) {
+          return;
+        }
         Object.keys(data).forEach((variable) => {
           this.validationData &&
             this.$set(this.validationData, variable, data[variable]);
@@ -138,6 +160,15 @@ export default {
         this.selRecordId,
         this.selDisplayMode
       );
+    },
+    isDisabled() {
+      if (this.selCollectionId && this.selRecordId) {
+        this.loadRecordCollection(
+          this.selCollectionId,
+          this.selRecordId,
+          this.selDisplayMode
+        );
+      }
     }
   },
   mounted() {
@@ -224,7 +255,7 @@ export default {
           this.watchers = response.data.watchers;
           this.screenTitle = response.data.title;
 
-          if (this.$attrs.disabled) {
+          if (this.isDisabled) {
             this.disableForm(this.config);
           }
         });
@@ -242,6 +273,8 @@ export default {
       this.selCollectionId = collectionId;
       this.selRecordId = recordId;
       this.selDisplayMode = modeId;
+      // Completed/closed task previews must not load the editable collection screen.
+      const effectiveMode = this.isDisabled ? "View" : modeId;
       this.$dataProvider
         .getCollectionRecordsView(collectionId, recordId)
         .then((response) => {
@@ -250,21 +283,20 @@ export default {
           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;
+          let useViewScreen = effectiveMode === "View";
+          if (typeof this.selDisplayMode === "function") {
+            useViewScreen =
+              this.collectionmode.modeId === "View" || this.isDisabled;
+          }
+          this.screenCollectionId = useViewScreen ? 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.isDisabled
           ) {
             this.localData = respData;
           } else {

src/components/renderer/form-loop.vue

@@ -17,7 +17,7 @@
         @update="setMatrixValue(loopIndex, $event)"
       />
     </form>
-    <b-row v-if="config.settings.add" class="justify-content-md-center">
+    <b-row v-if="canAddOrRemove" class="justify-content-md-center">
       <b-col md="auto">
         <b-button
           size="sm"
@@ -54,7 +54,7 @@ export default {
     VueFormRenderer
   },
   mixins: [],
-  props: ["value", "config", "transientData", "name", "mode", "formConfig"],
+  props: ["value", "config", "transientData", "name", "mode", "formConfig", "disabled", "readonly"],
   data() {
     return {
       matrix: [],
@@ -65,6 +65,21 @@ export default {
     };
   },
   computed: {
+    isDisabled() {
+      return Boolean(
+        this.disabled
+        || this.readonly
+        || (this.config && (this.config.disabled || this.config.readonly || this.config.editable === false))
+      );
+    },
+    canAddOrRemove() {
+      return Boolean(
+        this.config
+        && this.config.settings
+        && this.config.settings.add
+        && !this.isDisabled
+      );
+    },
     parentLoopContext() {
       let parent = this.$parent;
       let i = 0;
@@ -191,20 +206,29 @@ export default {
       return context;
     },
     add() {
+      if (this.isDisabled) {
+        return;
+      }
       if (this.config.settings.type === "existing") {
         this.setMatrixValue(this.matrix.length, {});
       } else {
         this.additionalItems++;
       }
     },
     remove() {
+      if (this.isDisabled) {
+        return;
+      }
       if (this.config.settings.type === "existing") {
         this.$delete(this.matrix, this.matrix.length - 1);
       } else {
         this.additionalItems--;
       }
     },
     removeConfirm() {
+      if (this.isDisabled) {
+        return;
+      }
       const message = this.$t("Are you sure you want to delete this?");
       window.ProcessMaker.confirmModal(this.$t("Caution!"), message, "", () => {
         this.remove();

src/components/renderer/form-nested-screen.vue

@@ -14,6 +14,7 @@
     debug-context="Nested Screen"
     @css-errors="cssErrors = $event"
     :_parent="_parent"
+    :read-only="isDisabled"
   />
 </template>
 
@@ -42,6 +43,8 @@ export default {
     validationData: null,
     _parent: null,
     ancestorScreens: {type: Array, default: () => []},
+    disabled: { type: [Boolean, String], default: false },
+    readonly: { type: [Boolean, String], default: false },
   },
   data() {
     return {
@@ -54,6 +57,17 @@ export default {
     };
   },
   computed: {
+    isDisabled() {
+      return Boolean(
+        this.disabled === true
+        || this.disabled === "true"
+        || this.disabled === ""
+        || this.readonly === true
+        || this.readonly === "true"
+        || this.readonly === ""
+        || this.$attrs.disabled
+      );
+    },
     validatedConfig() {
       return this.config && this.config[0] ? this.config : defaultConfig;
     },
@@ -133,7 +147,7 @@ export default {
             this.watchers = response.data.watchers;
             this.screenTitle = response.data.title;
 
-            if (this.$attrs['disabled']) {
+            if (this.isDisabled) {
               this.disableForm(this.config);
             }