From 48b565d0a50b639fe2b7e36511d01a6f2e135b63 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 28 Nov 2023 09:10:39 -0400
Subject: [PATCH 1/2] feature/FOUR-12607

---
 .../components/Breadcrumbs.vue                | 62 +++++++++++++++++++
 .../components/ProcessesCatalogue.vue         | 61 ++++++++++--------
 2 files changed, 96 insertions(+), 27 deletions(-)
 create mode 100644 resources/js/processes-catalogue/components/Breadcrumbs.vue

diff --git a/resources/js/processes-catalogue/components/Breadcrumbs.vue b/resources/js/processes-catalogue/components/Breadcrumbs.vue
new file mode 100644
index 0000000000..25d689fc5b
--- /dev/null
+++ b/resources/js/processes-catalogue/components/Breadcrumbs.vue
@@ -0,0 +1,62 @@
+<template>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb bg-transparent p-0 mb-3">
+      <li class="breadcrumb-item">
+        <a href="/" :aria-label="$t('Home')">
+          <i class="fas fa-home" />
+        </a>
+      </li>
+
+      <li class="breadcrumb-item">
+        <a href="/processes-catalogue" :aria-label="$t('Home')">
+          {{ $t('Processes') }}
+        </a>
+      </li>
+
+      <li v-if="category" class="breadcrumb-item">
+        <a :href="caegoryRoute" :aria-label="category">
+          {{ category }}
+        </a>
+      </li>
+
+      <li v-if="process" class="breadcrumb-item">
+        {{ process }}
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+export default {
+  router: window.ProcessMaker.Router,
+  props: ["process", "caegoryRoute", "category"],
+  data() {
+    return {
+      list: [],
+      loading: false,
+    };
+  },
+  mounted() {
+    this.list = this.transform(this.routes);
+  },
+  methods: {
+    isActive(index) {
+      return index == (this.list.length - 1);
+    },
+    updateRoutes(routes) {
+      this.list = routes;
+    },
+    transform(routes) {
+      let list = [];
+      Object.entries(routes).forEach(([title, link]) => {
+        list.push({
+          title: title,
+          link: link,
+          router: false
+        });
+      });
+      return list;
+    }
+  },
+};
+</script>
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index b245fe3710..8926d388b9 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -1,32 +1,37 @@
 <template>
-  <div class="d-flex w-100">
-    <div class="w-25">
-      <h4> {{ $t('Processes Browser') }} </h4>
+  <div>
+    <div>
+      <breadcrumbs />
     </div>
-    <div class="w-100">
-      <div v-if="!fields.length" class="d-flex justify-content-center py-5 w-100">
-        <div>
-          <div class="d-flex justify-content-center my-5">
-            <img
-              class="image d-flex"
-              src="/img/processes-catalogue-empty.svg"
-              alt="recent projects"
-            >
+    <div class="d-flex w-100">
+      <div class="w-25">
+        <h4> {{ $t('Processes Browser') }} </h4>
+      </div>
+      <div class="w-100">
+        <div v-if="!fields.length" class="d-flex justify-content-center py-5 w-100">
+          <div>
+            <div class="d-flex justify-content-center my-5">
+              <img
+                class="image d-flex"
+                src="/img/processes-catalogue-empty.svg"
+                alt="recent projects"
+              >
+            </div>
+            <h4 class="text-center">
+              {{ $t('Currently you dont have processes created') }}
+            </h4>
+            <p class="text-center">
+              {{ $t('We encourage you to create new processes using our templates') }}
+            </p>
+            <p class="text-center my-4">
+              <button
+                type="button"
+                class="btn btn-primary text-capitalize"
+              >
+                {{ $t("Show Me The Templates") }}
+              </button>
+            </p>
           </div>
-          <h4 class="text-center">
-            {{ $t('Currently you dont have processes created') }}
-          </h4>
-          <p class="text-center">
-            {{ $t('We encourage you to create new processes using our templates') }}
-          </p>
-          <p class="text-center my-4">
-            <button
-              type="button"
-              class="btn btn-primary text-capitalize"
-            >
-              {{ $t("Show Me The Templates") }}
-            </button>
-          </p>
         </div>
       </div>
     </div>
@@ -35,7 +40,10 @@
 
 <script>
 
+import Breadcrumbs from "./Breadcrumbs.vue";
+
 export default {
+  components: { Breadcrumbs },
   data() {
     return {
       fields: [],
@@ -45,4 +53,3 @@ export default {
   },
 };
 </script>
-

From ff688a145c33e93124c0e4cc075e90e5c453abcb Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Tue, 28 Nov 2023 09:29:08 -0400
Subject: [PATCH 2/2] feature/FOUR-12607

---
 resources/js/processes-catalogue/components/Breadcrumbs.vue   | 4 ++--
 .../js/processes-catalogue/components/ProcessesCatalogue.vue  | 4 +---
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/resources/js/processes-catalogue/components/Breadcrumbs.vue b/resources/js/processes-catalogue/components/Breadcrumbs.vue
index 25d689fc5b..dc3c014684 100644
--- a/resources/js/processes-catalogue/components/Breadcrumbs.vue
+++ b/resources/js/processes-catalogue/components/Breadcrumbs.vue
@@ -14,7 +14,7 @@
       </li>
 
       <li v-if="category" class="breadcrumb-item">
-        <a :href="caegoryRoute" :aria-label="category">
+        <a :href="categoryRoute" :aria-label="category">
           {{ category }}
         </a>
       </li>
@@ -29,7 +29,7 @@
 <script>
 export default {
   router: window.ProcessMaker.Router,
-  props: ["process", "caegoryRoute", "category"],
+  props: ["process", "categoryRoute", "category"],
   data() {
     return {
       list: [],
diff --git a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
index 8926d388b9..f140734c3a 100644
--- a/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
+++ b/resources/js/processes-catalogue/components/ProcessesCatalogue.vue
@@ -1,8 +1,6 @@
 <template>
   <div>
-    <div>
-      <breadcrumbs />
-    </div>
+    <breadcrumbs />
     <div class="d-flex w-100">
       <div class="w-25">
         <h4> {{ $t('Processes Browser') }} </h4>