FOUR-20487: Display "Screen Interstitial" Option

resources/js/processes/modeler/components/inspector/TaskInterstitial.vue

@@ -0,0 +1,105 @@
+<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 }) {
+      if (nodeId !== this.node.id) {
+        return;
+      }
+      if (show) {
+        this.$set(this.node, "allowInterstitial", true);
+      } else {
+        this.$set(this.node, "allowInterstitial", false);
+      }
+    },
+  },
+};
+</script>

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",
       },
     });