FOUR-20534:Implement the improvements in Request and Cases

ryancooley · Jan 23, 2025 · Dec 10, 2024 · Dec 11, 2024 · Dec 12, 2024 · Dec 12, 2024
commit f131993947b2cfb9c20abc4e2668ea09e21b0f23
diff --git a/ProcessMaker/Http/Controllers/CasesController.php b/ProcessMaker/Http/Controllers/CasesController.php
@@ -10,9 +10,11 @@
 use ProcessMaker\Models\Screen;
 use ProcessMaker\Package\PackageComments\PackageServiceProvider;
 use ProcessMaker\ProcessTranslations\ScreenTranslation;
+use ProcessMaker\Traits\ProcessMapTrait;
 
 class CasesController extends Controller
 {
+    use ProcessMapTrait;
     /**
      * Get the list of requests.
      *
@@ -76,6 +78,45 @@ public function show($case_number)
         // Get the summary screen tranlations
         $this->summaryScreenTranslation($request);
 
+        // Load the process map
+        $processRequest = ProcessRequest::find($request->id);
+
+        $bpmn = $request->process->bpmn;
+        $filteredCompletedNodes = [];
+        $requestInProgressNodes = [];
+        $requestIdleNodes = [];
+
+        if ($processRequest) {
+            $requestCompletedNodes = $processRequest->tokens()
+                ->whereIn('status', ['CLOSED', 'COMPLETED', 'TRIGGERED'])
+                ->pluck('element_id');
+            $requestInProgressNodes = $processRequest->tokens()
+                ->whereIn('status', ['ACTIVE', 'INCOMING'])
+                ->pluck('element_id');
+            // Remove any node that is 'ACTIVE' from the completed list.
+            $filteredCompletedNodes = $requestCompletedNodes->diff($requestInProgressNodes)->values();
+
+            // Obtain In-Progress nodes that were completed before
+            $matchingNodes = $requestInProgressNodes->intersect($requestCompletedNodes);
+
+            // Get idle nodes.
+            $xml = $this->loadAndPrepareXML($bpmn);
+            $nodeIds = $this->getNodeIds($xml);
+            $requestIdleNodes = $nodeIds->diff($filteredCompletedNodes)->diff($requestInProgressNodes)->values();
+
+            // Add completed sequence flow to the list of completed nodes.
+            $sequenceFlowNodes = $this->getCompletedSequenceFlow($xml, $filteredCompletedNodes->implode(' '), $requestInProgressNodes->implode(' '), $matchingNodes->implode(' '));
+            $filteredCompletedNodes = $filteredCompletedNodes->merge($sequenceFlowNodes);
+        }
+
+
+        $inflightData = [
+            'bpmn' => $bpmn,
+            'requestCompletedNodes' => $filteredCompletedNodes,
+            'requestInProgressNodes' => $requestInProgressNodes,
+            'requestIdleNodes' => $requestIdleNodes,
+            'requestId' => $request->process->id,
+        ];
         // Return the view
         return view('cases.edit', compact(
             'request',
@@ -85,7 +126,9 @@ public function show($case_number)
             'canViewComments',
             'canPrintScreens',
             'isProcessManager',
-            'manager'
+            'manager',
+            'bpmn',
+            'inflightData',
         ));
     }
 

diff --git a/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue b/resources/jscomposition/cases/casesDetail/components/CaseDetail.vue
@@ -13,7 +13,7 @@ import RequestTable from "./RequestTable.vue";
 import TabHistory from "./TabHistory.vue";
 import CompletedForms from "./CompletedForms.vue";
 import TabFiles from "./TabFiles.vue";
-import Overview from "./Overview.vue";
+import Overview from "./NewOverview.vue";
 import TabSummary from "./TabSummary.vue";
 import ErrorsTab from "./ErrorsTab.vue";
 import { getRequestCount, getRequestStatus, isErrors } from "../variables/index";
@@ -67,7 +67,7 @@ const tabs = [
     name: translate.t("Summary"),
     href: "#summary",
     current: "summary",
-    show: getRequestStatus() !== 'ERROR',
+    show: getRequestStatus() !== "ERROR",
     content: TabSummary,
   },
   {

diff --git a/resources/jscomposition/cases/casesDetail/components/NewOverview.vue b/resources/jscomposition/cases/casesDetail/components/NewOverview.vue
@@ -0,0 +1,138 @@
+<template>
+  <div
+    class="tw-w-full tw-h-full tw-overflow-hidden tw-relative"
+    data-test="body-container"
+  >
+    <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 { 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(() => {
+  console.log("unmounted");
+  ProcessMaker.$modeler = null;
+  modelerRef.value?.$destroy();
+  modelerRef.value = null;
+  tooltipRef.value = null;
+});
+</script>
diff --git a/resources/jscomposition/cases/casesDetail/variables/index.js b/resources/jscomposition/cases/casesDetail/variables/index.js
@@ -21,3 +21,7 @@ export const getRequestCount = () => requestCount;
 export const getErrors = () => errorLogs;
 
 export const isErrors = () => request.status === "ERROR";
+
+export const getInflightData = () => inflightData;
+
+export const getXML = () => inflightData.bpmn;
diff --git a/resources/views/cases/edit.blade.php b/resources/views/cases/edit.blade.php
@@ -118,6 +118,16 @@ class="tw-grow tw-overflow-hidden"
 @endsection
 
 @section('js')
+<script src="{{ mix('js/processes/modeler/initialLoad.js') }}"></script>
+<script>
+  window.ProcessMaker.packages = @json(\App::make(ProcessMaker\Managers\PackageManager::class)->listPackages());
+  window.Processmaker = {
+        csrfToken: "{{csrf_token()}}",
+        userId: "{{\Auth::user()->id}}",
+        messages: [],
+        apiTimeout: {{config('app.api_timeout')}}
+      };
+</script>
   <script>
     const data = @json($request->getRequestData());
     const requestId = @json($request->getKey());
@@ -129,6 +139,26 @@ class="tw-grow tw-overflow-hidden"
     const canViewComments = @json($canViewComments);
     const comentable_type = @json(get_class($request));
     const requestCount = @json($requestCount);
+    const inflightData = @json($inflightData);
+
+    window.ProcessMaker.modeler = {
+      xml: @json($bpmn),
+      configurables: [],
+      requestCompletedNodes: inflightData.requestCompletedNodes,
+      requestInProgressNodes: inflightData.requestInProgressNodes,
+      requestIdleNodes: inflightData.requestIdleNodes,
+      requestId: inflightData.requestId,
+    }
+
+    window.ProcessMaker.EventBus.$on('modeler-start', ({
+      loadXML
+    }) => {
+      loadXML(window.ProcessMaker.modeler.xml);
+    });
+
+    window.PM4ConfigOverrides = {
+      requestFiles: @json($request->requestFiles())
+    };
   </script>
 
   @if (hasPackage('package-files'))