feature/FOUR-18976

pmPaulis · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
commit 8927c386c9b0f6ce0d4ff9c1479e99acdaea54e5
diff --git 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
@@ -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
@@ -0,0 +1 @@
+export * from "./configBreadcrum";
diff --git 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
@@ -7,9 +7,6 @@
 @include('layouts.sidebar', ['sidebar'=> Menu::get('sidebar_request')])
 @endsection
 
-@section('breadcrumbs')
-@endsection
-
 @section('content')
 <div id="cases-main"></div>
 @endsection