From 9de59655bf14cf70f5abf9b20bbfed9953293b16 Mon Sep 17 00:00:00 2001
From: Jonathan Druart <jonathan.druart@bugs.koha-community.org>
Date: Thu, 6 Jul 2023 12:54:52 +0200
Subject: [PATCH] Bug 30708: Rebase - Adjust breadcrumbs

To match what has been done on bug 33169 and bug 34418.

Signed-off-by: Laurence Rault <laurence.rault@biblibre.com>

Signed-off-by: Marcel de Rooy <m.de.rooy@rijksmuseum.nl>
Signed-off-by: Tomas Cohen Arazi <tomascohen@theke.io>
---
 .../prog/js/vue/components/Breadcrumb.vue     |  42 ---
 .../js/vue/components/Preservation/Main.vue   |  62 +---
 .../prog/js/vue/modules/preservation.ts       |  29 +-
 .../prog/js/vue/routes/preservation.js        | 288 ++++++------------
 4 files changed, 126 insertions(+), 295 deletions(-)
 delete mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumb.vue

diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumb.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumb.vue
deleted file mode 100644
index 5ab4af80b7..0000000000
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumb.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-    <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
-        <ol>
-            <li v-for="(item, counter) in breadCrumbs" v-bind:key="counter">
-                <router-link
-                    v-if="!item.path && counter == breadCrumbs.length - 1"
-                    :to="`${currentRoute}`"
-                >
-                    {{ $__(item.text) }}</router-link
-                >
-                <router-link v-else-if="item.path" :to="item.path">
-                    {{ $__(item.text) }}</router-link
-                >
-                <a v-else class="disabled"> {{ $__(item.text) }}</a>
-            </li>
-        </ol>
-    </nav>
-</template>
-
-<script>
-import { useRouter } from "vue-router"
-export default {
-    computed: {
-        breadCrumbs() {
-            if (this.$route.meta.breadcrumb) {
-                return this.$route.meta.breadcrumb()
-            }
-        },
-        currentRoute() {
-            return this.$route.path
-        },
-    },
-}
-</script>
-
-<style scoped>
-a.disabled {
-    padding: 0.6em 0.3em;
-    text-decoration: none;
-    color: #000;
-}
-</style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/Main.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/Main.vue
index 214fc20a7b..b5bcc9a7e8 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/Main.vue
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Preservation/Main.vue
@@ -1,6 +1,9 @@
 <template>
     <div v-if="initialized && PreservationModule == 1">
-        <Breadcrumb />
+        <div id="sub-header">
+            <Breadcrumbs />
+            <Help />
+        </div>
         <div class="main container-fluid">
             <div class="row">
                 <div class="col-sm-10 col-sm-push-2">
@@ -11,43 +14,7 @@
                 </div>
 
                 <div class="col-sm-2 col-sm-pull-10">
-                    <aside>
-                        <div id="navmenu">
-                            <div id="navmenulist">
-                                <h5>{{ $__("Preservation") }}</h5>
-                                <ul>
-                                    <li>
-                                        <router-link :to="{ name: 'Home' }">
-                                            <i class="fa fa-home"></i>
-                                            {{ $__("Home") }}</router-link
-                                        >
-                                    </li>
-                                    <li>
-                                        <router-link
-                                            :to="{ name: 'TrainsList' }"
-                                        >
-                                            <i class="fa fa-train"></i>
-                                            {{ $__("Trains") }}</router-link
-                                        >
-                                    </li>
-                                    <li>
-                                        <router-link
-                                            :to="{ name: 'WaitingList' }"
-                                        >
-                                            <i class="fa fa-recycle"></i>
-                                            {{ $__("Waiting list") }}
-                                        </router-link>
-                                    </li>
-                                    <li>
-                                        <router-link :to="{ name: 'Settings' }">
-                                            <i class="fa fa-cog"></i>
-                                            {{ $__("Settings") }}
-                                        </router-link>
-                                    </li>
-                                </ul>
-                            </div>
-                        </div>
-                    </aside>
+                    <LeftMenu :title="$__('Preservation')"></LeftMenu>
                 </div>
             </div>
         </div>
@@ -59,7 +26,9 @@
 
 <script>
 import { inject } from "vue"
-import Breadcrumb from "../Breadcrumb.vue"
+import Breadcrumbs from "../Breadcrumbs.vue"
+import Help from "../Help.vue"
+import LeftMenu from "../LeftMenu.vue"
 import Dialog from "../Dialog.vue"
 import { APIClient } from "../../fetch/api-client.js"
 import "vue-select/dist/vue-select.css"
@@ -145,16 +114,15 @@ export default {
     },
 
     components: {
-        Breadcrumb,
+        Breadcrumbs,
         Dialog,
+        Help,
+        LeftMenu,
     },
 }
 </script>
 
 <style>
-#navmenulist a.router-link-active {
-    font-weight: 700;
-}
 #menu ul ul,
 #navmenulist ul ul {
     padding-left: 2em;
@@ -179,12 +147,14 @@ textarea {
     width: 30%;
 }
 
+#navmenulist ul li a.current.disabled {
+    background-color: inherit;
+    border-left: 5px solid #e6e6e6;
+    color: #000;
+}
 #navmenulist ul li a.disabled {
     color: #666;
     pointer-events: none;
     font-weight: 700;
 }
-#navmenulist ul li a.disabled.router-link-active {
-    color: #000;
-}
 </style>
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts
index 379e7f3d55..eb8e2edbe6 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/preservation.ts
@@ -29,27 +29,25 @@ library.add(
 
 import App from "../components/Preservation/Main.vue";
 
-import { routes } from "../routes/preservation";
-
-const router = createRouter({
-    history: createWebHistory(),
-    linkActiveClass: "current",
-    routes,
-});
+import { routes as routesDef } from "../routes/preservation";
 
 import { useMainStore } from "../stores/main";
 import { useAVStore } from "../stores/authorised-values";
 import { usePreservationStore } from "../stores/preservation";
+import { useNavigationStore } from "../stores/navigation";
+import i18n from "../i18n";
 
 const pinia = createPinia();
 
-const i18n = {
-    install: (app, options) => {
-        app.config.globalProperties.$__ = key => {
-            return window["__"](key);
-        };
-    },
-};
+const mainStore = useMainStore(pinia);
+const navigationStore = useNavigationStore(pinia);
+const routes = navigationStore.setRoutes(routesDef);
+
+const router = createRouter({
+    history: createWebHistory(),
+    linkExactActiveClass: "current",
+    routes,
+});
 
 const app = createApp(App);
 
@@ -61,8 +59,8 @@ const rootComponent = app
     .component("v-select", vSelect);
 
 app.config.unwrapInjectedRef = true;
-const mainStore = useMainStore(pinia);
 app.provide("mainStore", mainStore);
+app.provide("navigationStore", navigationStore);
 app.provide("AVStore", useAVStore(pinia));
 app.provide("PreservationStore", usePreservationStore(pinia));
 
@@ -70,5 +68,6 @@ app.mount("#preservation");
 
 const { removeMessages } = mainStore;
 router.beforeEach((to, from) => {
+    navigationStore.$patch({ current: to.matched, params: to.params || {} });
     removeMessages(); // This will actually flag the messages as displayed already
 });
diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/preservation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/preservation.js
index 8c220a4b10..cb75d07ce1 100644
--- a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/preservation.js
+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/preservation.js
@@ -1,3 +1,5 @@
+import { markRaw } from "vue";
+
 import Home from "../components/Preservation/Home.vue";
 import TrainsList from "../components/Preservation/TrainsList.vue";
 import TrainsShow from "../components/Preservation/TrainsShow.vue";
@@ -9,234 +11,136 @@ import Settings from "../components/Preservation/Settings.vue";
 import SettingsProcessingsShow from "../components/Preservation/SettingsProcessingsShow.vue";
 import SettingsProcessingsFormAdd from "../components/Preservation/SettingsProcessingsFormAdd.vue";
 
-const breadcrumbs = {
-    home: {
-        text: "Home", // $t("Home")
-        path: "/cgi-bin/koha/mainpage.pl",
-    },
-    preservation_home: {
-        text: "Preservation", //$t("Preservation")
-        path: "/cgi-bin/koha/preservation/home.pl",
-    },
-    trains: {
-        text: "Trains", // $t("Trains")
-        path: "/cgi-bin/koha/preservation/trains",
-    },
-    waiting_list: {
-        text: "Waiting list", // $t("Waiting list")
-        path: "/cgi-bin/koha/preservation/waiting-list",
-    },
-    settings: {
-        home: {
-            text: "Settings", // $t("Settings")
-            path: "/cgi-bin/koha/preservation/settings",
-        },
-        processings: {
-            home: {
-                text: "Processings", //$t("Processings")
-            },
-        },
-    },
-};
-const breadcrumb_paths = {
-    trains: [
-        breadcrumbs.home,
-        breadcrumbs.preservation_home,
-        breadcrumbs.trains,
-    ],
-    settings: [
-        breadcrumbs.home,
-        breadcrumbs.preservation_home,
-        breadcrumbs.settings.home,
-    ],
-    settings_processings: [
-        breadcrumbs.home,
-        breadcrumbs.preservation_home,
-        breadcrumbs.settings.home,
-    ],
-};
-
-function build_breadcrumb(parent_breadcrumb, current) {
-    let breadcrumb = parent_breadcrumb.flat(Infinity);
-    if (current) {
-        breadcrumb.push({
-            text: current,
-        });
-    }
-    return breadcrumb;
-}
+import { $__ } from "../i18n";
 
 export const routes = [
     {
         path: "/cgi-bin/koha/mainpage.pl",
+        is_base: true,
         beforeEnter(to, from, next) {
             window.location.href = "/cgi-bin/koha/mainpage.pl";
         },
     },
     {
         path: "/cgi-bin/koha/preservation/home.pl",
-        name: "Home",
-        component: Home,
-        meta: {
-            breadcrumb: () => [breadcrumbs.home, breadcrumbs.preservation_home],
-        },
-    },
-    {
-        path: "/cgi-bin/koha/preservation/trains",
+        is_default: true,
+        is_base: true,
+        title: $__("Preservation"),
         children: [
             {
                 path: "",
-                name: "TrainsList",
-                component: TrainsList,
-                meta: {
-                    breadcrumb: () => breadcrumb_paths.trains,
-                },
+                name: "Home",
+                component: markRaw(Home),
+                title: $__("Home"),
+                icon: "fa fa-home",
             },
             {
-                path: ":train_id",
+                path: "/cgi-bin/koha/preservation/trains",
+                title: $__("Trains"),
+                icon: "fa fa-train",
+                is_end_node: true,
                 children: [
                     {
                         path: "",
-                        name: "TrainsShow",
-                        component: TrainsShow,
-                        meta: {
-                            breadcrumb: () =>
-                                build_breadcrumb(
-                                    breadcrumb_paths.trains,
-                                    "Show train" // $t("Show train")
-                                ),
-                        },
+                        name: "TrainsList",
+                        component: markRaw(TrainsList),
                     },
                     {
-                        path: "items",
+                        path: ":train_id",
+                        title: $__("Show train"),
+                        is_end_node: true,
                         children: [
                             {
-                                path: "add",
-                                name: "TrainsFormAddItem",
-                                component: TrainsFormAddItem,
-                                meta: {
-                                    breadcrumb: () =>
-                                        build_breadcrumb(
-                                            breadcrumb_paths.trains,
-                                            "Add item to train" // $t("Add item to train")
-                                        ),
-                                },
-                            },
-                            {
-                                path: "add/:item_ids",
-                                name: "TrainsFormAddItems",
-                                component: TrainsFormAddItems,
-                                meta: {
-                                    breadcrumb: () =>
-                                        build_breadcrumb(
-                                            breadcrumb_paths.trains,
-                                            "Add items to train" // $t("Add items to train")
-                                        ),
-                                },
+                                path: "",
+                                name: "TrainsShow",
+                                component: markRaw(TrainsShow),
                             },
                             {
-                                path: "edit/:train_item_id",
-                                name: "TrainsFormEditItem",
-                                component: TrainsFormAddItem,
-                                meta: {
-                                    breadcrumb: () =>
-                                        build_breadcrumb(
-                                            breadcrumb_paths.trains,
-                                            "Edit item in train" // $t("Edit item in train")
-                                        ),
-                                },
+                                path: "items",
+                                is_empty: true,
+                                children: [
+                                    {
+                                        path: "add",
+                                        name: "TrainsFormAddItem",
+                                        component: markRaw(TrainsFormAddItem),
+                                        title: $__("Add item to train"),
+                                    },
+                                    {
+                                        path: "add/:item_ids",
+                                        name: "TrainsFormAddItems",
+                                        component: markRaw(TrainsFormAddItems),
+                                        title: $__("Add items to train"),
+                                    },
+                                    {
+                                        path: "edit/:train_item_id",
+                                        name: "TrainsFormEditItem",
+                                        component: markRaw(TrainsFormAddItem),
+                                        title: $__("Edit item in train"),
+                                    },
+                                ],
                             },
                         ],
                     },
+                    {
+                        path: "add",
+                        name: "TrainsFormAdd",
+                        component: markRaw(TrainsFormAdd),
+                        title: $__("Add train"),
+                    },
+                    {
+                        path: "edit/:train_id",
+                        name: "TrainsFormEdit",
+                        component: markRaw(TrainsFormAdd),
+                        title: $__("Edit train"),
+                    },
                 ],
             },
             {
-                path: "add",
-                name: "TrainsFormAdd",
-                component: TrainsFormAdd,
-                meta: {
-                    breadcrumb: () =>
-                        build_breadcrumb(
-                            breadcrumb_paths.trains,
-                            "Add train" // $t("Add train")
-                        ),
-                },
-            },
-            {
-                path: "edit/:train_id",
-                name: "TrainsFormEdit",
-                component: TrainsFormAdd,
-                meta: {
-                    breadcrumb: () =>
-                        build_breadcrumb(
-                            breadcrumb_paths.trains,
-                            "Edit train" // $t("Edit train")
-                        ),
-                },
-            },
-        ],
-    },
-    {
-        path: "/cgi-bin/koha/preservation/waiting-list",
-        name: "WaitingList",
-        component: WaitingList,
-        meta: {
-            breadcrumb: () => [
-                breadcrumbs.home,
-                breadcrumbs.preservation_home,
-                breadcrumbs.waiting_list,
-            ],
-        },
-    },
-    {
-        path: "/cgi-bin/koha/preservation/settings",
-        children: [
-            {
-                path: "",
-                name: "Settings",
-                component: Settings,
-                meta: {
-                    breadcrumb: () => breadcrumb_paths.settings,
-                },
-            },
-            {
-                path: "processings",
+                path: "/cgi-bin/koha/preservation/waiting-list",
+                title: $__("Waiting List"),
+                icon: "fa fa-recycle",
+                is_end_node: true,
                 children: [
                     {
-                        path: ":processing_id",
-                        name: "SettingsProcessingsShow",
-                        component: SettingsProcessingsShow,
-                        meta: {
-                            breadcrumb: () =>
-                                build_breadcrumb(
-                                    breadcrumb_paths.settings_processings,
-                                    "Show processing" // $t("Show processing")
-                                ),
-                        },
+                        path: "",
+                        name: "WaitingList",
+                        component: markRaw(WaitingList),
                     },
+                ],
+            },
+            {
+                path: "/cgi-bin/koha/preservation/settings",
+                title: $__("Settings"),
+                icon: "fa fa-cog",
+                is_end_node: true,
+                children: [
                     {
-                        path: "add",
-                        name: "SettingsProcessingsFormAdd",
-                        component: SettingsProcessingsFormAdd,
-                        meta: {
-                            breadcrumb: () =>
-                                build_breadcrumb(
-                                    breadcrumb_paths.settings_processings,
-                                    "Add processing" // $t("Add processing")
-                                ),
-                        },
+                        path: "",
+                        name: "Settings",
+                        component: markRaw(Settings),
                     },
                     {
-                        path: "edit/:processing_id",
-                        name: "SettingsProcessingsFormEdit",
-                        component: SettingsProcessingsFormAdd,
-                        meta: {
-                            breadcrumb: () =>
-                                build_breadcrumb(
-                                    breadcrumb_paths.settings_processings,
-                                    "Edit processing" // $t("Edit processing")
-                                ),
-                        },
+                        path: "processings",
+                        children: [
+                            {
+                                path: ":processing_id",
+                                name: "SettingsProcessingsShow",
+                                component: markRaw(SettingsProcessingsShow),
+                                title: $__("Show processing"),
+                            },
+                            {
+                                path: "add",
+                                name: "SettingsProcessingsFormAdd",
+                                component: markRaw(SettingsProcessingsFormAdd),
+                                title: $__("Add processing"),
+                            },
+                            {
+                                path: "edit/:processing_id",
+                                name: "SettingsProcessingsFormEdit",
+                                component: markRaw(SettingsProcessingsFormAdd),
+                                title: $__("Edit processing"),
+                            },
+                        ],
                     },
                 ],
             },
-- 
2.20.1