From f46c7e4da3ad385d92a01ac12a95b5b5e3ff13ec Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 1 Dec 2023 14:36:04 -0400
Subject: [PATCH 1/4] feature/FOUR-12645

---
 .../ProcessesCatalogueController.php          |  5 ++-
 .../components/Breadcrumbs.vue                | 19 ++++++--
 .../components/ProcessInfo.vue                | 45 ++++++++++++++++---
 .../components/ProcessesCatalogue.vue         |  6 ++-
 .../views/processes-catalogue/open.blade.php  |  1 +
 5 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
index e237d349c7..b5a6f7ea11 100644
--- a/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
+++ b/ProcessMaker/Http/Controllers/ProcessesCatalogueController.php
@@ -20,8 +20,9 @@ public function index(Request $request)
      *
      * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
      */
-    public function open(Process $process)
+    public function open(Process $process, Request $request)
     {
-        return view('processes-catalogue.open', compact('process'));
+        $category = $request->input('category') ?? 0;
+        return view('processes-catalogue.open', compact('process', 'category'));
     }
 }
diff --git a/resources/js/processes-catalogue/components/Breadcrumbs.vue b/resources/js/processes-catalogue/components/Breadcrumbs.vue
index 6b6a93ab38..a4c8013bbd 100644
--- a/resources/js/processes-catalogue/components/Breadcrumbs.vue
+++ b/resources/js/processes-catalogue/components/Breadcrumbs.vue
@@ -14,8 +14,8 @@
       </li>
 
       <li v-if="category" class="breadcrumb-item">
-        <a :href="categoryRoute" :aria-label="category">
-          {{ category }}
+        <a :aria-label="categoryName">
+          {{ categoryName }}
         </a>
       </li>
 
@@ -29,14 +29,27 @@
 <script>
 export default {
   router: window.ProcessMaker.Router,
-  props: ["process", "categoryRoute", "category"],
+  props: ["process", "category"],
   data() {
     return {
+      categoryName: "",
     };
   },
   mounted() {
+    this.getCategory();
   },
   methods: {
+    getCategory(value = "") {
+      if (value) {
+        this.categoryName = value;
+      } else if (this.category) {
+        ProcessMaker.apiClient
+          .get(`process_categories/${this.category}`)
+          .then((response) => {
+            this.categoryName = response.data.name;
+          });
+      }
+    },
   },
 };
 </script>
diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index e0ad61c235..5fe9030866 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -1,17 +1,18 @@
 <template>
   <div>
-    <breadcrumbs />
+    <breadcrumbs
+      ref="breadcrumb"
+      :category="selectCategory"
+      :process="process.id"
+    />
     <b-row>
       <b-col cols="2">
         <h4> {{ $t('Processes Browser') }} </h4>
-        <!--
-        Menu Catalogue FOUR-12111
         <MenuCatologue
           :data="listCategories"
           :select="selectCategorie"
           class="mt-3"
         />
-        -->
       </b-col>
       <b-col cols="10">
         <div class="d-flex">
@@ -36,19 +37,49 @@
 </template>
 
 <script>
+import MenuCatologue from "./menuCatologue.vue";
 import ProcessMap from "./ProcessMap.vue";
 import ProcessOptions from "./ProcessOptions.vue";
 import Breadcrumbs from "./Breadcrumbs.vue";
 
 export default {
-  components: { ProcessOptions, Breadcrumbs, ProcessMap },
-  props: ["process", "permission", "isDocumenterInstalled", "currentUserId"],
+  components: {
+    ProcessOptions,
+    Breadcrumbs,
+    ProcessMap,
+    MenuCatologue,
+  },
+  props: ["process", "permission", "isDocumenterInstalled", "currentUserId", "category"],
   data() {
     return {
-      fields: [],
+      listCategories: [],
+      selectCategory: 0,
     };
   },
+  created() {
+    this.selectCategory = this.selectedCategory();
+    this.getCategories();
+  },
   methods: {
+    selectedCategory() {
+      if (this.category) {
+        return this.category;
+      }
+      const categories = this.process.process_category_id;
+      return typeof categories === "string" ? categories.split(",")[0] : categories;
+    },
+    getCategories() {
+      ProcessMaker.apiClient
+        .get("process_categories")
+        .then((response) => {
+          this.listCategories = response.data.data;
+        });
+    },
+    selectCategorie(value) {
+      this.category = value;
+      this.showCardProcesses = true;
+      this.showWizardTemplates = false;
+    },
   },
 };
 </script>
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 3a5f0b06a4..8c4cdd418b 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -1,6 +1,9 @@
 <template>
   <div>
-    <breadcrumbs />
+    <breadcrumbs
+      ref="breadcrumb"
+      :category="category ? category.id : ''"
+    />
     <b-row>
       <b-col cols="2">
         <h4> {{ $t('Processes Browser') }} </h4>
@@ -74,6 +77,7 @@ export default {
     },
     selectCategorie(value) {
       this.category = value;
+      this.$refs.breadcrumb.getCategory(value.name);
       this.showCardProcesses = true;
       this.showWizardTemplates = false;
     },
diff --git a/resources/views/processes-catalogue/open.blade.php b/resources/views/processes-catalogue/open.blade.php
index 9c9f5795fa..60a9719888 100644
--- a/resources/views/processes-catalogue/open.blade.php
+++ b/resources/views/processes-catalogue/open.blade.php
@@ -12,6 +12,7 @@
   <div id="open-process" class="px-3 page-content mb-0">
     <process-info
       :process="{{$process}}"
+      :category="{{$category}}"
       :current-user-id="{{ \Auth::user()->id }}"
       :permission="{{ \Auth::user()->hasPermissionsFor('processes', 'process-templates', 'pm-blocks') }}"
       is-documenter-installed="{{\ProcessMaker\PackageHelper::isPmPackageProcessDocumenterInstalled()}}"

From c5278a0e77c78cb92fff5498ff4a54e49a149b98 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 1 Dec 2023 14:42:48 -0400
Subject: [PATCH 2/4] feature/FOUR-12645

---
 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 5fe9030866..ec3ae2ce7a 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -3,7 +3,7 @@
     <breadcrumbs
       ref="breadcrumb"
       :category="selectCategory"
-      :process="process.id"
+      :process="process.name"
     />
     <b-row>
       <b-col cols="2">

From a94e4204b1f1711ead24eed802418f60e095c18f Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Fri, 1 Dec 2023 16:28:32 -0400
Subject: [PATCH 3/4] feature/FOUR-12645

---
 resources/js/processes-catalogue/components/ProcessInfo.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/resources/js/processes-catalogue/components/ProcessInfo.vue b/resources/js/processes-catalogue/components/ProcessInfo.vue
index ec3ae2ce7a..fa5c9b0055 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -76,9 +76,7 @@ export default {
         });
     },
     selectCategorie(value) {
-      this.category = value;
-      this.showCardProcesses = true;
-      this.showWizardTemplates = false;
+      // TODO Flow from processInfo to ProcessesCtalogue
     },
   },
 };

From 9789557bd876cf5b66854a4efc449aa4de8913aa Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Mon, 4 Dec 2023 09:17:12 -0400
Subject: [PATCH 4/4] feature/FOUR-12645

---
 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 47e27a37e1..ff6abe9ee6 100644
--- a/resources/js/processes-catalogue/components/ProcessInfo.vue
+++ b/resources/js/processes-catalogue/components/ProcessInfo.vue
@@ -7,7 +7,7 @@
     />
     <b-row>
       <b-col cols="2">
-        <h4> {{ $t('Processes Browser') }} </h4>
+        <h4>{{ $t("Processes Browser") }}</h4>
         <MenuCatologue
           :data="listCategories"
           :select="selectCategorie"