From fcca1c6f481e5a2633cdc94f308beb2418d815b9 Mon Sep 17 00:00:00 2001
From: Fabio <frguachallab@gmail.com>
Date: Thu, 12 Dec 2024 16:41:06 -0400
Subject: [PATCH] FOUR-20544: Review the general status of the process

---
 resources/js/requests/show.js                 |   2 +
 .../casesDetail/components/MapLegend.vue      |  44 ++++++
 .../casesDetail/components/NewOverview.vue    | 139 ++++++++++++++++++
 3 files changed, 185 insertions(+)
 create mode 100644 resources/jscomposition/cases/casesDetail/components/MapLegend.vue
 create mode 100644 resources/jscomposition/cases/casesDetail/components/NewOverview.vue

diff --git a/resources/js/requests/show.js b/resources/js/requests/show.js
index 88b7dd082b..da273326e8 100644
--- a/resources/js/requests/show.js
+++ b/resources/js/requests/show.js
@@ -16,6 +16,7 @@ import FilesMobile from "./components/FilesMobile.vue";
 import RequestHeaderMobile from "./components/RequestHeaderMobile.vue";
 import FilterMobile from "../Mobile/FilterMobile.vue";
 import FilterMixin from "../Mobile/FilterMixin";
+import NewOverview from "../../jscomposition/cases/casesDetail/components/NewOverview.vue";
 
 Vue.component("DataSummary", DataSummary);
 Vue.component("RequestDetail", RequestDetail);
@@ -31,6 +32,7 @@ Vue.component("SummaryMobile", SummaryMobile);
 Vue.component("FilesMobile", FilesMobile);
 Vue.component("RequestHeaderMobile", RequestHeaderMobile);
 Vue.component("FilterMobile", FilterMobile);
+Vue.component("NewOverview", NewOverview);
 Vue.mixin(FilterMixin);
 
 Vue.use("vue-form-renderer", VueFormRenderer);
diff --git a/resources/jscomposition/cases/casesDetail/components/MapLegend.vue b/resources/jscomposition/cases/casesDetail/components/MapLegend.vue
new file mode 100644
index 0000000000..5414b03833
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/MapLegend.vue
@@ -0,0 +1,44 @@
+<template>
+  <div
+    id="map-legend"
+    class="tw-absolute tw-top-12 tw-right-12 tw-rounded-md tw-shadow-md tw-bg-white tw-z-10"
+  >
+    <div class="tw-p-4 tw-flex tw-flex-col">
+      <p
+        v-for="(status, index) in statusLegend"
+        :key="index"
+        class="tw-font-bold tw-mb-2 tw-flex tw-items-center tw-gap-2"
+      >
+        <span
+          :style="{ backgroundColor: status.color }"
+          class="tw-inline-block tw-w-1 tw-h-8 tw-mr-4 tw-border-r-3 tw-border-r-gray-400 tw-transform tw-rotate-45"
+        />
+        {{ status.name }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+const translate = ProcessMaker.i18n;
+
+const statusLegend = ref(
+  [
+    {
+      name: translate.t("In Progress"),
+      color: "#3FA6FF",
+    },
+    {
+      name: translate.t("Completed"),
+      color: "#00BA7C",
+    },
+    {
+      name: translate.t("Pending / Not Executed"),
+      color: "#CCCCCC",
+    },
+  ],
+);
+
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
new file mode 100644
index 0000000000..a48d6a9724
--- /dev/null
+++ b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="tw-w-full tw-h-full tw-overflow-hidden tw-relative"
+    data-test="body-container"
+  >
+    <MapLegend />
+    <ProcessMapTooltip
+      v-show="showTooltip"
+      ref="tooltipRef"
+      :enabled="enableTooltip"
+      :node-id="tooltip.nodeId"
+      :node-name="tooltip.nodeName"
+      :request-id="inflightData.requestId"
+      :style="{
+        left: `${tooltip.newX}px`,
+        top: `${tooltip.newY}px`
+      }"
+      @is-loading="isTooltipLoading"
+    />
+    <transition
+      name="fade"
+      mode="in-out"
+    >
+      <Modeler
+        ref="modelerRef"
+        :key="keyModeler"
+        :decorations="decorations"
+        :request-completed-nodes="inflightData.requestCompletedNodes"
+        :request-in-progress-nodes="inflightData.requestInProgressNodes"
+        :request-idle-nodes="inflightData.requestIdleNodes"
+        :read-only="true"
+        @set-xml-manager="xmlManager = $event"
+        @click="handleClick"
+      />
+    </transition>
+  </div>
+</template>
+
+<script setup>
+import {
+  ref, watchEffect, onMounted, computed, nextTick, onBeforeUnmount,
+} from "vue";
+import { Modeler } from "@processmaker/modeler";
+import ProcessMapTooltip from "../../../../js/processes/modeler/components/ProcessMapTooltip.vue";
+import MapLegend from "./MapLegend.vue";
+import { getInflightData } from "../variables";
+
+const keyModeler = ref(Math.random());
+const modelerRef = ref("");
+const tooltipRef = ref(null);
+const enableTooltip = ref(true);
+const decorations = ref({
+  borderOutline: {},
+});
+const xmlManager = ref();
+const tooltip = ref({
+  isActive: false,
+  isLoading: false,
+  nodeId: null,
+  nodeName: null,
+  allowedNodes: [
+    "bpmn:Task",
+    "bpmn:ManualTask",
+    "bpmn:SequenceFlow",
+    "bpmn:ScriptTask",
+    "bpmn:CallActivity",
+    "bpmn:ServiceTask",
+  ],
+  coordinates: { x: 0, y: 0 },
+  newX: 0,
+  newY: 0,
+});
+const inflightData = ref(getInflightData());
+
+const isMappingActive = computed(() => (window.ProcessMaker.modeler.enableProcessMapping !== undefined
+  ? window.ProcessMaker.modeler.enableProcessMapping
+  : true));
+
+const showTooltip = computed(() => enableTooltip.value && tooltip.value.isActive);
+
+const calculateTooltipPosition = () => {
+  const rectTooltip = tooltipRef.value.$el.getBoundingClientRect();
+  tooltip.value.newY = tooltip.value.coordinates.y - rectTooltip.height - 20;
+  if (tooltip.value.newY <= 0) {
+    tooltip.value.newY = 10;
+  }
+  tooltip.value.newX = tooltip.value.coordinates.x - (rectTooltip.width / 2);
+  if (tooltip.value.newX < 0) {
+    tooltip.value.newX = 0;
+  } else if (tooltip.value.newX + rectTooltip.width > window.innerWidth) {
+    tooltip.value.newX = window.innerWidth - rectTooltip.width;
+  }
+};
+
+const setupTooltip = ({ event, node }) => {
+  const isNodeTooltipAllowed = tooltip.value.allowedNodes.includes(node.$type);
+  if ((isNodeTooltipAllowed && !tooltip.value.isActive)
+    || (isNodeTooltipAllowed && tooltip.value.nodeId !== node.id)) {
+    tooltip.value.nodeId = node.id;
+    tooltip.value.nodeName = node.name;
+    tooltip.value.isActive = true;
+    nextTick(() => {
+      tooltip.value.coordinates = { x: event.clientX, y: event.clientY };
+      calculateTooltipPosition();
+    });
+  } else if (tooltip.value.nodeId === node.id && tooltip.value.isActive) {
+    tooltip.value.isActive = false;
+  }
+};
+
+const isTooltipLoading = (value) => {
+  tooltip.value.isLoading = value;
+};
+
+const handleClick = (payload) => {
+  if (isMappingActive.value) {
+    setupTooltip(payload);
+  }
+};
+
+watchEffect(() => {
+  if (!tooltip.value.isLoading) {
+    nextTick(() => {
+      calculateTooltipPosition();
+    });
+  }
+});
+
+onMounted(() => {
+  ProcessMaker.$modeler = modelerRef.value;
+});
+
+onBeforeUnmount(() => {
+  ProcessMaker.$modeler = null;
+  modelerRef.value?.$destroy();
+  modelerRef.value = null;
+  tooltipRef.value = null;
+});
+</script>