From 8927c386c9b0f6ce0d4ff9c1479e99acdaea54e5 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 19 Sep 2024 10:43:29 -0400
Subject: [PATCH 1/3] feature/FOUR-18976

---
 .../cases/casesMain/CasesMain.vue             | 15 ++++-
 .../jscomposition/config/configBreadcrum.js   |  9 +++
 resources/jscomposition/config/index.js       |  1 +
 resources/jscomposition/system/Breadcrums.vue | 61 ++++++++++---------
 resources/views/cases/casesMain.blade.php     |  3 -
 5 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 resources/jscomposition/config/configBreadcrum.js
 create mode 100644 resources/jscomposition/config/index.js

diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index 086cc57bce..672eb4db91 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="tw-w-full tw-space-y-4 tw-flex-col tw-flex tw-grow">
-    <Breadcrums class="tw-bg-white tw-py-3 tw-border-gray-200 tw-border-b tw-shadow-md" />
+    <Breadcrums :pages="pages"/>
 
     <div class="tw-mx-4 tw-p-4 tw-bg-white tw-rounded-2xl 
       tw-border-gray-200 tw-border tw-space-y-4 tw-flex tw-flex-col tw-overflow-hidden tw-grow tw-shadow-md">
@@ -15,11 +15,12 @@
 </template>
 <script>
 import { defineComponent, ref, onMounted } from "vue";
+import { useRouter, useRoute } from "vue-router/composables";
 import AppCounters from "./components/AppCounters.vue";
 import { formatCounters } from "./utils/counters";
 import { getCounters } from "./api";
 import { Breadcrums } from "../../system";
-import { useRouter, useRoute } from "vue-router/composables";
+import { configHomeBreadcrum } from "../../config/index";
 
 export default defineComponent({
   components: {
@@ -31,11 +32,20 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
 
+    const pages = ref([
+      configHomeBreadcrum(),
+      { name: "Cases", href: "/cases", current: false },
+      { name: "My Cases", current: true },
+    ]);
+
     const onChangeCounter = (counter) => {
       if (typeof counter.url == "function") {
         return counter.url();
       }
 
+      pages.value.pop();
+      pages.value.push({ name: counter.header, current: true });
+
       router.push({ path: counter.url }).catch((e) => {});
     };
 
@@ -48,6 +58,7 @@ export default defineComponent({
       countersData,
       route,
       onChangeCounter,
+      pages,
     };
   },
 });
diff --git a/resources/jscomposition/config/configBreadcrum.js b/resources/jscomposition/config/configBreadcrum.js
new file mode 100644
index 0000000000..7cce51641b
--- /dev/null
+++ b/resources/jscomposition/config/configBreadcrum.js
@@ -0,0 +1,9 @@
+export const configHomeBreadcrum = () => ({
+  name: "",
+  icon: "fas fa-home",
+  href: "/",
+  current: false,
+  first: true,
+});
+
+export default {};
diff --git a/resources/jscomposition/config/index.js b/resources/jscomposition/config/index.js
new file mode 100644
index 0000000000..e173e903ac
--- /dev/null
+++ b/resources/jscomposition/config/index.js
@@ -0,0 +1 @@
+export * from "./configBreadcrum";
diff --git a/resources/jscomposition/system/Breadcrums.vue b/resources/jscomposition/system/Breadcrums.vue
index a302a27c55..3530b6f060 100644
--- a/resources/jscomposition/system/Breadcrums.vue
+++ b/resources/jscomposition/system/Breadcrums.vue
@@ -1,46 +1,51 @@
 <template>
-  <nav class="tw-flex tw-text-xs tw-text-gray-400 hover:tw-text-gray-500">
+  <nav class="tw-py-3 tw-px-4 tw-flex tw-text-sm tw-bg-white tw-w-full tw-border-gray-200 tw-border-y">
     <ol class="tw-flex tw-items-center tw-space-x-1">
-      <li>
-        <div>
-          <a href="#" class="">
-            <i class="fa-solid fa-house"></i>
-            <span class="sr-only">Home</span>
-          </a>
-        </div>
-      </li>
-      <li v-for="page in pages" :key="page.name">
+      <li
+        v-for="page in model"
+        :key="page.name"
+      >
         <div class="tw-flex tw-items-center">
-          <svg
-            class="tw-h-5 tw-w-5 tw-flex-shrink-0"
-            fill="currentColor"
-            viewBox="0 0 20 20"
-            aria-hidden="true">
-            <path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
-          </svg>
+          <i
+            v-if="!page.first"
+            class="fas fa-slash fa-xs tw-rotate-90 tw-mr-1"
+          />
           <a
+            v-if="!page.current"
             :href="page.href"
-            class="tw-text-gray-500 hover:tw-text-gray-700"
+            class="tw-text-sky-600"
             :aria-current="page.current ? 'page' : undefined"
-            >{{ page.name }}</a
           >
+            <i
+              :class="page.icon"
+              class="tw-mr-1"
+            />
+            {{ page.name }}
+          </a>
+          <span
+            v-else
+            class="tw-text-black"
+          >
+            {{ page.name }}
+          </span>
         </div>
       </li>
     </ol>
   </nav>
 </template>
 <script>
-import { defineComponent } from "vue";
+import { computed, defineComponent } from "vue";
 
 export default defineComponent({
-  setup() {
-    const pages = [
-      { name: "Projects", href: "#", current: false },
-      { name: "Project Nero", href: "#", current: true },
-    ];
-    return {
-      pages,
-    };
+  props: {
+    pages: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  setup(props, { emit }) {
+    const model = computed(() => props.pages);
+    return { model };
   },
 });
 </script>
diff --git a/resources/views/cases/casesMain.blade.php b/resources/views/cases/casesMain.blade.php
index cab8d50617..a311f336db 100644
--- a/resources/views/cases/casesMain.blade.php
+++ b/resources/views/cases/casesMain.blade.php
@@ -7,9 +7,6 @@
 @include('layouts.sidebar', ['sidebar'=> Menu::get('sidebar_request')])
 @endsection
 
-@section('breadcrumbs')
-@endsection
-
 @section('content')
 <div id="cases-main"></div>
 @endsection

From d5936694258b5ec941d32d44de92a61dbc528797 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker <luciana.nunez@processmaker.com>
Date: Thu, 19 Sep 2024 12:54:47 -0400
Subject: [PATCH 2/3] feature/FOUR-18976

---
 .../jscomposition/cases/casesMain/CasesMain.vue   | 13 +++++++------
 resources/jscomposition/system/Breadcrums.vue     | 15 +++++----------
 routes/web.php                                    |  4 +++-
 3 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index 672eb4db91..fd4ac300da 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -31,12 +31,7 @@ export default defineComponent({
     const countersData = ref([]);
     const router = useRouter();
     const route = useRoute();
-
-    const pages = ref([
-      configHomeBreadcrum(),
-      { name: "Cases", href: "/cases", current: false },
-      { name: "My Cases", current: true },
-    ]);
+    const pages = ref([]);
 
     const onChangeCounter = (counter) => {
       if (typeof counter.url == "function") {
@@ -52,6 +47,12 @@ export default defineComponent({
     onMounted(async () => {
       const resCounters = await getCounters();
       countersData.value = formatCounters(resCounters);
+      const currentCounter = countersData.value.find((counter) => counter.url === route.path);
+      pages.value = [
+        configHomeBreadcrum(),
+        { name: "Cases", href: "/cases", current: false },
+        { name: currentCounter.header, current: true },
+      ];
     });
 
     return {
diff --git a/resources/jscomposition/system/Breadcrums.vue b/resources/jscomposition/system/Breadcrums.vue
index 3530b6f060..9ee3d8277e 100644
--- a/resources/jscomposition/system/Breadcrums.vue
+++ b/resources/jscomposition/system/Breadcrums.vue
@@ -3,29 +3,24 @@
     <ol class="tw-flex tw-items-center tw-space-x-1">
       <li
         v-for="page in model"
-        :key="page.name"
-      >
+        :key="page.name" >
         <div class="tw-flex tw-items-center">
           <i
             v-if="!page.first"
-            class="fas fa-slash fa-xs tw-rotate-90 tw-mr-1"
-          />
+            class="fas fa-slash fa-xs tw-rotate-90 tw-mr-1" />
           <a
             v-if="!page.current"
             :href="page.href"
             class="tw-text-sky-600"
-            :aria-current="page.current ? 'page' : undefined"
-          >
+            :aria-current="page.current ? 'page' : undefined" >
             <i
               :class="page.icon"
-              class="tw-mr-1"
-            />
+              class="tw-mr-1" />
             {{ page.name }}
           </a>
           <span
             v-else
-            class="tw-text-black"
-          >
+            class="tw-text-black" >
             {{ page.name }}
           </span>
         </div>
diff --git a/routes/web.php b/routes/web.php
index 79f9f40450..c7f470a47d 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -138,7 +138,9 @@
     // Cases
     Route::get('cases', [RequestController::class, 'index'])->name('cases.index')->middleware('no-cache');
     // This is a temporary API the engine team will create the API
-    Route::get('cases-main', [CasesController::class, 'index'])->name('cases-main.index')->middleware('no-cache');
+    Route::get('cases-main/{type?}', [CasesController::class, 'index'])->name('cases-main.index')
+    ->where('type', 'my-cases|in-progress|completed|all-cases')
+    ->middleware('no-cache'); 
     Route::get('cases/{type?}', [RequestController::class, 'index'])->name('cases_by_type')
         ->where('type', 'all|in_progress|completed')
         ->middleware('no-cache');

From 6eb206596f158c1c93b39438c85f36eda699f351 Mon Sep 17 00:00:00 2001
From: luNunezProcessmaker
 <123644082+luNunezProcessmaker@users.noreply.github.com>
Date: Thu, 19 Sep 2024 15:18:30 -0400
Subject: [PATCH 3/3] Update CasesMain.vue

---
 resources/jscomposition/cases/casesMain/CasesMain.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/resources/jscomposition/cases/casesMain/CasesMain.vue b/resources/jscomposition/cases/casesMain/CasesMain.vue
index fd4ac300da..1535407048 100644
--- a/resources/jscomposition/cases/casesMain/CasesMain.vue
+++ b/resources/jscomposition/cases/casesMain/CasesMain.vue
@@ -46,8 +46,9 @@ export default defineComponent({
 
     onMounted(async () => {
       const resCounters = await getCounters();
-      countersData.value = formatCounters(resCounters);
       const currentCounter = countersData.value.find((counter) => counter.url === route.path);
+      
+      countersData.value = formatCounters(resCounters);
       pages.value = [
         configHomeBreadcrum(),
         { name: "Cases", href: "/cases", current: false },