From 96921815e3e6c46d68d2552dedc35b083a97e0b2 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 17 Dec 2024 11:08:05 -0400
Subject: [PATCH 1/2] FOUR-20487: Display "Screen Interstitial" Option

---
 .../components/inspector/TaskInterstitial.vue | 106 ++++++++++++++++++
 resources/js/processes/modeler/initialLoad.js |  10 +-
 2 files changed, 112 insertions(+), 4 deletions(-)
 create mode 100644 resources/js/processes/modeler/components/inspector/TaskInterstitial.vue

diff --git a/resources/js/processes/modeler/components/inspector/TaskInterstitial.vue b/resources/js/processes/modeler/components/inspector/TaskInterstitial.vue
new file mode 100644
index 0000000000..49f428af32
--- /dev/null
+++ b/resources/js/processes/modeler/components/inspector/TaskInterstitial.vue
@@ -0,0 +1,106 @@
+<template>
+  <div>
+    <screen-select
+      v-if="allowInterstitial"
+      v-model="screen"
+      :label="$t('Screen Interstitial')"
+      :required="true"
+      :helper="$t('What Screen Should Be Used For Rendering This Interstitial')"
+      :params="parameters"
+      default-key="interstitial"
+    />
+  </div>
+</template>
+
+<script>
+import { get } from "lodash";
+import ScreenSelect from "./ScreenSelect.vue";
+
+export default {
+  components: { ScreenSelect },
+  props: {
+    label: {
+      type: String,
+      default: "",
+    },
+    helper: {
+      type: String,
+      default: "",
+    },
+    enabledByDefault: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      screen: null,
+      loading: false,
+      error: "",
+      parameters: {
+        type: "DISPLAY",
+      },
+      isDisabled: false,
+    };
+  },
+  computed: {
+    /**
+     * Get the value of the edited property
+     */
+    allowInterstitial: {
+      get() {
+        const { node } = this;
+        // Get the value of allowInterstitial or set it to true if it hasn't been defined yet.
+        const value = get(node, "allowInterstitial", this.enabledByDefault);
+
+        this.screen = get(node, "interstitialScreenRef");
+        return value;
+      },
+      /**
+       * Update allowInterstitial property
+       */
+      set(value) {
+        this.$set(this.node, "allowInterstitial", value);
+      },
+    },
+
+    node() {
+      return this.$root.$children[0].$refs.modeler.highlightedNode.definition;
+    },
+  },
+  watch: {
+    screen: {
+      handler(value) {
+        this.$set(this.node, "interstitialScreenRef", value);
+      },
+    },
+  },
+  created() {
+    // Listen for elementDestination interstitial event
+    this.$root.$on("handle-task-interstitial", this.handleInterstitial);
+  },
+  mounted() {
+    if (!("allowInterstitial" in this.node)) {
+      this.$set(this.node, "allowInterstitial", this.enabledByDefault);
+    }
+  },
+  methods: {
+    /**
+     * Handle interstitial event
+     *
+     * @param {Object} { nodeId, isDisabled }
+     */
+    handleInterstitial({ nodeId, show }) {
+      console.log("handleInterstitial", nodeId, show);
+      if (nodeId !== this.node.id) {
+        return;
+      }
+      if (show) {
+        this.$set(this.node, "allowInterstitial", true);
+      } else {
+        this.$set(this.node, "allowInterstitial", false);
+      }
+    },
+  },
+};
+</script>
diff --git a/resources/js/processes/modeler/initialLoad.js b/resources/js/processes/modeler/initialLoad.js
index 9c764229b8..afd8607ae3 100644
--- a/resources/js/processes/modeler/initialLoad.js
+++ b/resources/js/processes/modeler/initialLoad.js
@@ -43,6 +43,7 @@ import SignalPayload from "./components/inspector/SignalPayload";
 import ScriptSelect from "./components/inspector/ScriptSelect";
 import StartPermission from "./components/inspector/StartPermission";
 import Interstitial from "./components/inspector/Interstitial";
+import TaskInterstitial from "./components/inspector/TaskInterstitial";
 import SelectUserGroup from "../../components/SelectUserGroup";
 import validateScreenRef from "./validateScreenRef";
 import validateFlowGenieRef from "./validateFlowGenieRef";
@@ -65,6 +66,7 @@ Vue.component("SignalPayload", SignalPayload);
 Vue.component("ScriptSelect", ScriptSelect);
 Vue.component("StartPermission", StartPermission);
 Vue.component("Interstitial", Interstitial);
+Vue.component("TaskInterstitial", TaskInterstitial);
 Vue.component("SelectUserGroup", SelectUserGroup);
 Vue.component("NodeIdentifierInput", NodeIdentifierInput);
 Vue.component("ErrorHandlingTimeout", ErrorHandlingTimeout);
@@ -205,11 +207,11 @@ ProcessMaker.EventBus.$on(
     });
 
     registerInspectorExtension(task, {
-      component: "Interstitial",
+      component: "TaskInterstitial",
       config: {
         label: "Display Next Assigned Task to Task Assignee",
         helper: "Directs Task assignee to the next assigned Task",
-        name: "interstitial",
+        name: "taskInterstitial",
       },
     });
 
@@ -357,11 +359,11 @@ ProcessMaker.EventBus.$on(
       ],
     });
     registerInspectorExtension(manualTask, {
-      component: "Interstitial",
+      component: "TaskInterstitial",
       config: {
         label: "Enable Interstitial",
         helper: "redirected to my next assigned task",
-        name: "interstitial",
+        name: "TaskInterstitial",
       },
     });
 

From fe660a322821f81ae52878b4f4980480e40d4d50 Mon Sep 17 00:00:00 2001
From: Rodrigo Quelca <rodrigo@processmaker.com>
Date: Tue, 17 Dec 2024 16:35:47 -0400
Subject: [PATCH 2/2] gix CR notes

---
 .../processes/modeler/components/inspector/TaskInterstitial.vue  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/resources/js/processes/modeler/components/inspector/TaskInterstitial.vue b/resources/js/processes/modeler/components/inspector/TaskInterstitial.vue
index 49f428af32..894e373db9 100644
--- a/resources/js/processes/modeler/components/inspector/TaskInterstitial.vue
+++ b/resources/js/processes/modeler/components/inspector/TaskInterstitial.vue
@@ -91,7 +91,6 @@ export default {
      * @param {Object} { nodeId, isDisabled }
      */
     handleInterstitial({ nodeId, show }) {
-      console.log("handleInterstitial", nodeId, show);
       if (nodeId !== this.node.id) {
         return;
       }