From 8dd16b0211592845af25f9953d0529b796ce07c3 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Wed, 29 Nov 2023 14:17:25 -0400
Subject: [PATCH 1/3] feature/FOUR-11534

---
 .../components/ProcessInfo.vue                |  5 +-
 .../components/ProcessMap.vue                 | 56 +++++++++++++++++++
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/processes-catalogue/components/ProcessMap.vue

diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index aac435aecc..58680e0fa5 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -14,7 +14,7 @@
     <b-col cols="10">
       <div class="d-flex">
         <b-col cols="9">
-          Process Map
+          <process-map :process-id="processId" />
         </b-col>
         <b-col cols="3">
           <process-options :process-id="processId" />
@@ -28,10 +28,11 @@
 </template>
 
 <script>
+import ProcessMap from "./ProcessMap.vue";
 import ProcessOptions from "./ProcessOptions.vue";
 
 export default {
-  components: { ProcessOptions },
+  components: { ProcessOptions, ProcessMap },
   props: ["processId"],
   data() {
     return {
diff --git a/resources/js/processes-catalogue/components/ProcessMap.vue b/resources/js/processes-catalogue/components/ProcessMap.vue
new file mode 100644
index 0000000000..ef7a3b6a1f
--- /dev/null
+++ b/resources/js/processes-catalogue/components/ProcessMap.vue
@@ -0,0 +1,56 @@
+<template>
+  <div id="processMap">
+    <div id="processData">
+      <div
+        id="header"
+        class="d-flex d-flex justify-content-between"
+      >
+        <h4 class="d-flex align-items-center">
+          <i
+            class="fas fa-arrow-circle-left text-secondary mr-2"
+            style="font-size: 32px"
+          />
+          {{ processName }}
+        </h4>
+        <span class="border border-secondary rounded-circle bg-white">
+          h
+        </span>
+      </div>
+      <p> {{ processDescription }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
+import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
+
+export default {
+  components: { EllipsisMenu },
+  mixins: [ellipsisMenuMixin],
+  props: ["processId"],
+  data() {
+    return {
+      processName: "",
+      processDescription: "",
+    };
+  },
+  mounted() {
+    this.getProcess();
+  },
+  methods: {
+    /**
+     * get process data
+     */
+    getProcess() {
+      window.ProcessMaker.apiClient
+        .get(`processes/${this.processId}`)
+        .then((response) => {
+          console.log(response.data);
+          this.processName = response.data.name;
+          this.processDescription = response.data.description;
+        });
+    },
+  },
+};
+</script>

From 43418d5cb111995fc1c27c6c543ff9ac7050df37 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 30 Nov 2023 14:04:56 -0400
Subject: [PATCH 2/3] feature/FOUR-11534

---
 resources/js/processes-catalogue/components/ProcessInfo.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index 287aeb7021..e0ad61c235 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -42,7 +42,7 @@ import Breadcrumbs from "./Breadcrumbs.vue";
 
 export default {
   components: { ProcessOptions, Breadcrumbs, ProcessMap },
-  props: ["process", "permission", "isDocumenterInstalled"],
+  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
   data() {
     return {
       fields: [],

From f1d97db5029a6c07c810cdae8304dfd12871cf9d Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 30 Nov 2023 14:14:05 -0400
Subject: [PATCH 3/3] feature/FOUR-11534

---
 .../components/ProcessMap.vue                 | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessMap.vue b/resources/js/processes-catalogue/components/ProcessMap.vue
index a83e217041..8cb60f6a7f 100644
--- a/resources/js/processes-catalogue/components/ProcessMap.vue
+++ b/resources/js/processes-catalogue/components/ProcessMap.vue
@@ -6,16 +6,10 @@
         class="d-flex justify-content-between mb-3"
       >
         <h4 class="d-flex align-items-center">
-          <i
-            class="fas fa-arrow-circle-left text-secondary mr-2"
-            style="font-size: 32px"
-          />
+          <i class="fas fa-arrow-circle-left text-secondary mr-2 title-font" />
           {{ process.name }}
         </h4>
-        <span
-          class="border bg-white rounded-circle d-flex align-items-center p-0"
-          style="border-color: #CDDDEE;"
-        >
+        <span class="border bg-white rounded-circle d-flex align-items-center p-0 ellipsis-border">
           <ellipsis-menu
             :actions="processLaunchpadActions"
             :permission="permission"
@@ -60,7 +54,6 @@ import EllipsisMenu from "../../components/shared/EllipsisMenu.vue";
 import CreateTemplateModal from "../../components/templates/CreateTemplateModal.vue";
 import CreatePmBlockModal from "../../components/pm-blocks/CreatePmBlockModal.vue";
 import AddToProjectModal from "../../components/shared/AddToProjectModal.vue";
-
 import ellipsisMenuMixin from "../../components/shared/ellipsisMenuActions";
 import processNavigationMixin from "../../components/shared/processNavigation";
 
@@ -108,3 +101,12 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.title-font {
+  font-size: 32px
+}
+.ellipsis-border{
+  border-color: #CDDDEE;
+}
+</style>