feature/FOUR-18976

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: {
@@ -30,24 +31,36 @@ export default defineComponent({
     const countersData = ref([]);
     const router = useRouter();
     const route = useRoute();
+    const pages = ref([]);
 
     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) => {});
     };
 
     onMounted(async () => {
       const resCounters = await getCounters();
+      const currentCounter = countersData.value.find((counter) => counter.url === route.path);
+
       countersData.value = formatCounters(resCounters);
+      pages.value = [
+        configHomeBreadcrum(),
+        { name: "Cases", href: "/cases", current: false },
+        { name: currentCounter.header, current: true },
+      ];
     });
 
     return {
       countersData,
       route,
       onChangeCounter,
+      pages,
     };
   },
 });

resources/jscomposition/config/configBreadcrum.js

@@ -0,0 +1,9 @@
+export const configHomeBreadcrum = () => ({
+  name: "",
+  icon: "fas fa-home",
+  href: "/",
+  current: false,
+  first: true,
+});
+
+export default {};

resources/jscomposition/config/index.js

@@ -0,0 +1 @@
+export * from "./configBreadcrum";

resources/jscomposition/system/Breadcrums.vue

@@ -1,46 +1,46 @@
 <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"
-            :aria-current="page.current ? 'page' : undefined"
-            >{{ page.name }}</a
-          >
+            class="tw-text-sky-600"
+            :aria-current="page.current ? 'page' : undefined" >
+            <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>

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

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');