Bugzilla – Attachment 147962 Details for
Bug 33169
Improve vue breadcrumbs and left-hand menu
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 33169: Build breadcrumbs and left-hand side menu from routes definition
Bug-33169-Build-breadcrumbs-and-left-hand-side-men.patch (text/plain), 46.04 KB, created by
Agustín Moyano
on 2023-03-08 15:06:22 UTC
(
hide
)
Description:
Bug 33169: Build breadcrumbs and left-hand side menu from routes definition
Filename:
MIME Type:
Creator:
Agustín Moyano
Created:
2023-03-08 15:06:22 UTC
Size:
46.04 KB
patch
obsolete
>From 6c1404f2abb6927daaefdac925aff6c77544a7de Mon Sep 17 00:00:00 2001 >From: Agustin Moyano <agustinmoyano@theke.io> >Date: Mon, 6 Mar 2023 16:44:44 -0300 >Subject: [PATCH] Bug 33169: Build breadcrumbs and left-hand side menu from > routes definition > >--- > .../prog/js/vue/components/Breadcrumbs.vue | 43 ++ > .../prog/js/vue/components/ERM/Main.vue | 121 +--- > .../prog/js/vue/components/LeftMenu.vue | 67 +++ > .../prog/js/vue/components/NavigationItem.vue | 55 ++ > .../intranet-tmpl/prog/js/vue/modules/erm.ts | 24 +- > .../intranet-tmpl/prog/js/vue/routes/erm.js | 564 +++++------------- > .../prog/js/vue/stores/navigation.js | 106 ++++ > 7 files changed, 463 insertions(+), 517 deletions(-) > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/LeftMenu.vue > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue > create mode 100644 koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js > >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue >new file mode 100644 >index 0000000000..f8d87cbce6 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue >@@ -0,0 +1,43 @@ >+<template> >+ <nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb"> >+ <ol> >+ <template v-for="(item, idx) in breadcrumbs" v-bind:key="idx"> >+ <NavigationItem >+ v-if="idx < breadcrumbs.length - 1" >+ :item="item" >+ ></NavigationItem> >+ <NavigationItem >+ v-else >+ :item="{ ...item, path: undefined, href: undefined }" >+ ></NavigationItem> >+ </template> >+ </ol> >+ </nav> >+</template> >+ >+<script> >+import { inject } from "vue" >+import { storeToRefs } from "pinia" >+import NavigationItem from "./NavigationItem.vue" >+export default { >+ name: "Breadcrumbs", >+ setup: () => { >+ const navigationStore = inject("navigationStore") >+ const { breadcrumbs } = storeToRefs(navigationStore) >+ return { >+ breadcrumbs, >+ } >+ }, >+ components: { >+ NavigationItem, >+ }, >+} >+</script> >+ >+<style> >+#breadcrumbs ol li a.disabled { >+ color: #666; >+ pointer-events: none; >+ font-weight: 700; >+} >+</style> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue >index 0da4384934..e2e7d55788 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/Main.vue >@@ -1,6 +1,6 @@ > <template> > <div v-if="ERMModule"> >- <Breadcrumb /> >+ <Breadcrumbs /> > <div class="main container-fluid"> > <div class="row"> > <div class="col-sm-10 col-sm-push-2"> >@@ -11,100 +11,10 @@ > </div> > > <div class="col-sm-2 col-sm-pull-10"> >- <aside> >- <div id="navmenu"> >- <div id="navmenulist"> >- <h5>{{ $__("E-resource management") }}</h5> >- <ul> >- <li> >- <router-link >- to="/cgi-bin/koha/erm/agreements" >- > >- <i class="fa fa-check-circle-o"></i> >- {{ $__("Agreements") }}</router-link >- > >- </li> >- <li> >- <router-link >- to="/cgi-bin/koha/erm/licenses" >- > >- <i class="fa fa-gavel"></i> >- {{ $__("Licenses") }}</router-link >- > >- </li> >- <li> >- <router-link >- to="/cgi-bin/koha/erm/eholdings" >- class="disabled" >- > >- <i class="fa fa-crosshairs"></i> >- {{ $__("eHoldings") }} >- </router-link> >- </li> >- >- <li> >- <ul> >- <li >- v-for="provider in erm_providers" >- :key="provider" >- > >- <router-link >- v-if="provider == 'local'" >- :to="`/cgi-bin/koha/erm/eholdings/local`" >- class="disabled" >- > >- <i >- class="fa fa-map-marker" >- ></i> >- {{ >- $__("Local") >- }}</router-link >- > >- <router-link >- v-else-if=" >- provider == 'ebsco' >- " >- :to="`/cgi-bin/koha/erm/eholdings/ebsco`" >- class="disabled" >- > >- <i class="fa fa-globe"></i> >- {{ >- $__("EBSCO") >- }}</router-link >- > >- <ul> >- <li> >- <router-link >- :to="`/cgi-bin/koha/erm/eholdings/${provider}/packages`" >- > >- <i >- class="fa fa-archive" >- ></i> >- {{ >- $__("Packages") >- }}</router-link >- > >- </li> >- <li> >- <router-link >- :to="`/cgi-bin/koha/erm/eholdings/${provider}/titles`" >- > >- <i >- class="fa fa-sort-alpha-asc" >- ></i> >- {{ >- $__("Titles") >- }}</router-link >- > >- </li> >- </ul> >- </li> >- </ul> >- </li> >- </ul> >- </div> >- </div> >- </aside> >+ <LeftMenu >+ :title="$__('E-resource management')" >+ :condition="filterProviders" >+ ></LeftMenu> > </div> > </div> > </div> >@@ -116,8 +26,9 @@ > > <script> > import { inject } from "vue" >-import Breadcrumb from "../../components/Breadcrumb.vue" >-import Dialog from "../../components/Dialog.vue" >+import Breadcrumbs from "../Breadcrumbs.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" > import { storeToRefs } from "pinia" >@@ -202,9 +113,23 @@ export default { > }) > .then(() => this.loaded()) > }, >+ methods: { >+ filterProviders(navigationTree) { >+ const eHoldings = navigationTree.find( >+ element => element.path === "/cgi-bin/koha/erm/eholdings" >+ ) >+ eHoldings.children = eHoldings.children.filter(element => >+ this.erm_providers >+ .map(provider => `${eHoldings.path}/${provider}`) >+ .includes(element.path) >+ ) >+ return navigationTree >+ }, >+ }, > components: { >- Breadcrumb, >+ Breadcrumbs, > Dialog, >+ LeftMenu, > }, > } > </script> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/LeftMenu.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/LeftMenu.vue >new file mode 100644 >index 0000000000..6a4e44956f >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/LeftMenu.vue >@@ -0,0 +1,67 @@ >+<template> >+ <aside> >+ <div id="navmenu"> >+ <div id="navmenulist"> >+ <h5>{{ $__(title) }}</h5> >+ <ul> >+ <NavigationItem >+ v-for="(item, key) in navigationTree" >+ v-bind:key="key" >+ :item="item" >+ ></NavigationItem> >+ </ul> >+ </div> >+ </div> >+ </aside> >+</template> >+ >+<script> >+import { inject } from "vue" >+import NavigationItem from "./NavigationItem.vue" >+export default { >+ name: "LeftMenu", >+ data() { >+ return { >+ navigationTree: this.leftNavigation, >+ } >+ }, >+ setup: () => { >+ const navigationStore = inject("navigationStore") >+ const { leftNavigation } = navigationStore >+ return { >+ leftNavigation, >+ } >+ }, >+ async beforeMount() { >+ if (this.condition) >+ this.navigationTree = this.condition(this.navigationTree) >+ }, >+ props: { >+ title: String, >+ condition: Function, >+ }, >+ components: { >+ NavigationItem, >+ }, >+} >+</script> >+ >+<style scoped> >+#navmenulist a.router-link-active { >+ font-weight: 700; >+} >+#menu ul ul, >+#navmenulist ul ul { >+ padding-left: 2em; >+ font-size: 100%; >+} >+ >+#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/components/NavigationItem.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue >new file mode 100644 >index 0000000000..eedbff9636 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/NavigationItem.vue >@@ -0,0 +1,55 @@ >+<template> >+ <li> >+ <span> >+ <router-link >+ v-if="item.path" >+ :to="item.path" >+ :class="{ disabled: item.disabled }" >+ > >+ <template v-if="item.icon"> >+ <i :class="`fa ${item.icon}`"></i> >+ </template> >+ <span v-if="item.title">{{ $__(item.title) }}</span> >+ </router-link> >+ <a >+ v-else-if="item.href" >+ :href="item.href" >+ :class="{ disabled: item.disabled }" >+ > >+ <template v-if="item.icon"> >+ <i :class="`fa ${item.icon}`"></i> >+ </template> >+ <span v-if="item.title">{{ $__(item.title) }}</span> >+ </a> >+ <span v-else> >+ <template v-if="item.icon"> >+ <i :class="`fa ${item.icon}`"></i> >+ </template> >+ <span class="item-last" v-if="item.title">{{ >+ $__(item.title) >+ }}</span> >+ </span> >+ </span> >+ <ul v-if="item.children && item.children.length"> >+ <NavigationItem >+ v-for="(item, key) in item.children" >+ :item="item" >+ ></NavigationItem> >+ </ul> >+ </li> >+</template> >+ >+<script> >+export default { >+ name: "NavigationItem", >+ props: { >+ item: Object, >+ }, >+} >+</script> >+ >+<style> >+span.item-last { >+ padding: 7px 3px; >+} >+</style> >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts >index e4290931df..2d508d4aed 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts >@@ -17,17 +17,12 @@ library.add(faPlus, faMinus, faPencil, faTrash, faSpinner); > > import App from "../components/ERM/Main.vue"; > >-import { routes } from "../routes/erm"; >- >-const router = createRouter({ >- history: createWebHistory(), >- linkExactActiveClass: "current", >- routes, >-}); >+import { routes as routesDef } from "../routes/erm"; > > import { useMainStore } from "../stores/main"; > import { useVendorStore } from "../stores/vendors"; > import { useAVStore } from "../stores/authorised-values"; >+import { useNavigationStore } from "../stores/navigation"; > > const pinia = createPinia(); > >@@ -39,6 +34,17 @@ const i18n = { > }, > }; > >+const mainStore = useMainStore(pinia); >+const AVStore = useAVStore(pinia); >+const navigationStore = useNavigationStore(pinia); >+const routes = navigationStore.setRoutes(routesDef); >+ >+const router = createRouter({ >+ history: createWebHistory(), >+ linkExactActiveClass: "current", >+ routes, >+}); >+ > const app = createApp(App); > > const rootComponent = app >@@ -50,15 +56,15 @@ const rootComponent = app > > app.config.unwrapInjectedRef = true; > app.provide("vendorStore", useVendorStore(pinia)); >-const mainStore = useMainStore(pinia); > app.provide("mainStore", mainStore); >-const AVStore = useAVStore(pinia); > app.provide("AVStore", AVStore); >+app.provide("navigationStore", navigationStore); > > app.mount("#erm"); > > const { removeMessages } = mainStore; > router.beforeEach((to, from) => { >+ navigationStore.$patch({current: to.meta.self}); > removeMessages(); // This will actually flag the messages as displayed already > }); > router.afterEach((to, from) => { >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js >index fb85986919..21d777ac3a 100644 >--- a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js >@@ -19,100 +19,10 @@ import LicensesList from "../components/ERM/LicensesList.vue"; > import LicensesShow from "../components/ERM/LicensesShow.vue"; > import LicensesFormAdd from "../components/ERM/LicensesFormAdd.vue"; > >-const breadcrumbs = { >- home: { >- text: "Home", // $t("Home") >- path: "/cgi-bin/koha/mainpage.pl", >- }, >- erm_home: { >- text: "E-resource management", // $t("E-resource management") >- path: "/cgi-bin/koha/erm/erm.pl", >- }, >- agreements: { >- text: "Agreements", // $t("Agreements") >- path: "/cgi-bin/koha/erm/agreements", >- }, >- eholdings: { >- home: { >- text: "eHoldings", // $t("eHoldings") >- }, >- local: { >- home: { >- text: "Local", // $t("Local") >- }, >- titles: { >- text: "Titles", // $t("Titles") >- path: "/cgi-bin/koha/erm/eholdings/local/titles", >- }, >- packages: { >- text: "Packages", // $t("Packages") >- path: "/cgi-bin/koha/erm/eholdings/local/packages", >- }, >- }, >- ebsco: { >- home: { >- text: "EBSCO", // $t("EBSCO") >- }, >- titles: { >- text: "Titles", // $t("Titles") >- path: "/cgi-bin/koha/erm/eholdings/ebsco/titles", >- }, >- packages: { >- text: "Packages", // $t("Packages") >- path: "/cgi-bin/koha/erm/eholdings/ebsco/packages", >- }, >- }, >- }, >- licenses: { >- text: "Licenses", // $t("Licenses") >- path: "/cgi-bin/koha/erm/licenses", >- }, >-}; >-const breadcrumb_paths = { >- agreements: [ >- breadcrumbs.home, >- breadcrumbs.erm_home, >- breadcrumbs.agreements, >- ], >- eholdings: [ >- breadcrumbs.home, >- breadcrumbs.erm_home, >- breadcrumbs.eholdings.home, >- ], >- eholdings_local: [ >- breadcrumbs.home, >- breadcrumbs.erm_home, >- breadcrumbs.eholdings.home, >- breadcrumbs.eholdings.local.home, >- ], >- eholdings_ebsco: [ >- breadcrumbs.home, >- breadcrumbs.erm_home, >- breadcrumbs.eholdings.home, >- breadcrumbs.eholdings.ebsco.home, >- ], >- licenses: [breadcrumbs.home, breadcrumbs.erm_home, breadcrumbs.licenses], >-}; >- >-function build_breadcrumb(parent_breadcrumb, current) { >- let breadcrumb = parent_breadcrumb.flat(Infinity); >- if (current) { >- breadcrumb.push({ >- text: current, >- }); >- } >- return breadcrumb; >-} >- > export const routes = [ >- { >- path: "/cgi-bin/koha/mainpage.pl", >- beforeEnter(to, from, next) { >- window.location.href = "/cgi-bin/koha/mainpage.pl"; >- }, >- }, > { > path: "/cgi-bin/koha/admin/background_jobs/:id", >+ is_base: true, > beforeEnter(to, from, next) { > window.location.href = > "/cgi-bin/koha/admin/background_jobs.pl?op=view&id=" + >@@ -121,364 +31,198 @@ export const routes = [ > }, > { > path: "/cgi-bin/koha/erm/erm.pl", >- component: Home, >- meta: { >- breadcrumb: () => [breadcrumbs.home, breadcrumbs.erm_home], >- }, >- }, >- { >- path: "/cgi-bin/koha/erm/agreements", >+ component: {template: '<router-view />'}, >+ is_default: true, >+ is_base: true, >+ title: 'E-resource management', > children: [ > { > path: "", >- component: AgreementsList, >- meta: { >- breadcrumb: () => breadcrumb_paths.agreements, >- }, >+ component: Home, >+ is_navigation_item: false, > }, > { >- path: ":agreement_id", >- component: AgreementsShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- breadcrumb_paths.agreements, >- "Show agreement" // $t("Show agreement") >- ), >- }, >- }, >- { >- path: "add", >- component: AgreementsFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- breadcrumb_paths.agreements, >- "Add agreement" // $t("Add agreement") >- ), >- }, >- }, >- { >- path: "edit/:agreement_id", >- component: AgreementsFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- breadcrumb_paths.agreements, >- "Edit agreement" // $t("Edit agreement") >- ), >- }, >- }, >- ], >- }, >- { >- path: "/cgi-bin/koha/erm/eholdings", >- meta: { >- breadcrumb: () => breadcrumb_paths.eholdings, >- }, >- children: [ >- { >- path: "", >- meta: { >- breadcrumb: () => breadcrumb_paths.eholdings, >- }, >- }, >- { >- path: "local", >+ path: "/cgi-bin/koha/erm/agreements", >+ title: 'Agreements', >+ icon: 'fa-check-circle-o', >+ is_end_node: true, > children: [ > { > path: "", >- meta: { >- breadcrumb: () => breadcrumb_paths.eholdings_local, >- }, >+ component: AgreementsList, > }, > { >- path: "packages", >- children: [ >- { >- path: "", >- component: EHoldingsLocalPackagesList, >- meta: { >- breadcrumb: () => >- build_breadcrumb([ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .packages, >- ]), >- }, >- }, >- { >- path: ":package_id", >- component: EHoldingsLocalPackagesShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .packages, >- ], >- "Show package" // $t("Show package") >- ), >- }, >- }, >- { >- path: "add", >- component: EHoldingsLocalPackagesFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .packages, >- ], >- "Add package" // $t("Add package") >- ), >- }, >- }, >- { >- path: "edit/:package_id", >- component: EHoldingsLocalPackagesFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .packages, >- ], >- "Edit package" // $t("Edit package") >- ), >- }, >- }, >- ], >+ path: ":agreement_id", >+ component: AgreementsShow, >+ title: "Show agreement", > }, > { >- path: "titles", >- children: [ >- { >- path: "", >- component: EHoldingsLocalTitlesList, >- meta: { >- breadcrumb: () => >- build_breadcrumb([ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local.titles, >- ]), >- }, >- }, >- { >- path: ":title_id", >- component: EHoldingsLocalTitlesShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .titles, >- ], >- "Show title" // $t("Show title") >- ), >- }, >- }, >- { >- path: "add", >- component: EHoldingsLocalTitlesFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .titles, >- ], >- "Add title" // $t("Add title") >- ), >- }, >- }, >- { >- path: "edit/:title_id", >- component: EHoldingsLocalTitlesFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .titles, >- ], >- "Edit title" // $t("Edit title") >- ), >- }, >- }, >- { >- path: "import", >- component: EHoldingsLocalTitlesFormImport, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local >- .titles, >- ], >- "Import from a list" // $t("Import from a list") >- ), >- }, >- }, >- ], >+ path: "add", >+ component: AgreementsFormAdd, >+ title: "Add agreement", > }, > { >- path: "resources/:resource_id", >- component: EHoldingsLocalResourcesShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_local, >- breadcrumbs.eholdings.local.titles, >- ], >- "Resource" // $t("Resource") >- ), >- }, >+ path: "edit/:agreement_id", >+ component: AgreementsFormAdd, >+ title: "Edit agreement", > }, > ], > }, > { >- path: "ebsco", >+ path: "/cgi-bin/koha/erm/licenses", >+ title: "Licenses", >+ icon: "fa-gavel", >+ is_end_node: true, > children: [ > { > path: "", >- meta: { >- breadcrumb: () => breadcrumb_paths.eholdings_ebsco, >- }, >+ component: LicensesList, >+ }, >+ { >+ path: ":license_id", >+ component: LicensesShow, >+ title: "Show license", >+ }, >+ { >+ path: "add", >+ component: LicensesFormAdd, >+ title: "Add license", > }, > { >- path: "packages", >+ path: "edit/:license_id", >+ component: LicensesFormAdd, >+ title: "Edit license", >+ }, >+ ], >+ }, >+ { >+ path: "/cgi-bin/koha/erm/eholdings", >+ title: "eHoldings", >+ icon: 'fa-crosshairs', >+ disabled: true, >+ children: [ >+ { >+ path: "local", >+ title: "Local", >+ icon: "fa-map-marker", >+ disabled: true, > children: [ > { >- path: "", >- component: EHoldingsEBSCOPackagesList, >- meta: { >- breadcrumb: () => >- build_breadcrumb([ >- breadcrumb_paths.eholdings_ebsco, >- breadcrumbs.eholdings.ebsco >- .packages, >- ]), >- }, >+ path: "packages", >+ title: "Packages", >+ icon: "fa-archive", >+ is_end_node: true, >+ children: [ >+ { >+ path: "", >+ component: EHoldingsLocalPackagesList, >+ }, >+ { >+ path: ":package_id", >+ component: EHoldingsLocalPackagesShow, >+ title: "Show package", >+ }, >+ { >+ path: "add", >+ component: EHoldingsLocalPackagesFormAdd, >+ title: "Add package", >+ }, >+ { >+ path: "edit/:package_id", >+ component: EHoldingsLocalPackagesFormAdd, >+ title: "Edit package", >+ }, >+ ], > }, > { >- path: ":package_id", >- component: EHoldingsEBSCOPackagesShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_ebsco, >- breadcrumbs.eholdings.ebsco >- .packages, >- ], >- "Show package" // $t("Show package") >- ), >- }, >+ path: "titles", >+ title: "Titles", >+ icon: "fa-sort-alpha-asc", >+ is_end_node: true, >+ children: [ >+ { >+ path: "", >+ component: EHoldingsLocalTitlesList, >+ }, >+ { >+ path: ":title_id", >+ component: EHoldingsLocalTitlesShow, >+ title: "Show title", >+ }, >+ { >+ path: "add", >+ component: EHoldingsLocalTitlesFormAdd, >+ title: "Add title", >+ }, >+ { >+ path: "edit/:title_id", >+ component: EHoldingsLocalTitlesFormAdd, >+ title: "Edit title", >+ }, >+ { >+ path: "import", >+ component: EHoldingsLocalTitlesFormImport, >+ title: "Import from a list", >+ }, >+ { >+ path: "/cgi-bin/koha/erm/eholdings/local/resources/:resource_id", >+ component: EHoldingsLocalResourcesShow, >+ title: "Resource", >+ }, >+ ], > }, > ], > }, > { >- path: "titles", >+ path: "ebsco", >+ title: "EBSCO", >+ icon: 'fa-globe', >+ disabled: true, > children: [ > { >- path: "", >- component: EHoldingsEBSCOTitlesList, >- meta: { >- breadcrumb: () => >- build_breadcrumb([ >- breadcrumb_paths.eholdings_ebsco, >- breadcrumbs.eholdings.ebsco.titles, >- ]), >- }, >+ path: "packages", >+ title: "Packages", >+ icon: "fa-archive", >+ is_end_node: true, >+ children: [ >+ { >+ path: "", >+ component: EHoldingsEBSCOPackagesList, >+ }, >+ { >+ path: ":package_id", >+ component: EHoldingsEBSCOPackagesShow, >+ title: "Show package", >+ }, >+ ], > }, > { >- path: ":title_id", >- component: EHoldingsEBSCOTitlesShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_ebsco, >- breadcrumbs.eholdings.ebsco >- .titles, >- ], >- "Show title" // $t("Show title") >- ), >- }, >+ path: "titles", >+ title: "Titles", >+ icon: "fa-sort-alpha-asc", >+ is_end_node: true, >+ children: [ >+ { >+ path: "", >+ component: EHoldingsEBSCOTitlesList, >+ }, >+ { >+ path: ":title_id", >+ component: EHoldingsEBSCOTitlesShow, >+ title: "Show title", >+ }, >+ { >+ path: "/cgi-bin/koha/erm/eholdings/ebsco/resources/:resource_id", >+ component: EHoldingsEBSCOResourcesShow, >+ title: "Resource", >+ is_navigation_item: false, >+ }, >+ ], > }, > ], > }, >- { >- path: "resources/:resource_id", >- component: EHoldingsEBSCOResourcesShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- [ >- breadcrumb_paths.eholdings_ebsco, >- breadcrumbs.eholdings.ebsco.titles, >- ], >- "Resource" // $t("Resource") >- ), >- }, >- }, > ], > }, >- ], >- }, >- { >- path: "/cgi-bin/koha/erm/licenses", >- children: [ >- { >- path: "", >- component: LicensesList, >- meta: { >- breadcrumb: () => breadcrumb_paths.licenses, >- }, >- }, >- { >- path: ":license_id", >- component: LicensesShow, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- breadcrumb_paths.licenses, >- "Show license" // $t("Show license") >- ), >- }, >- }, >- { >- path: "add", >- component: LicensesFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- breadcrumb_paths.licenses, >- "Add license" // $t("Add license") >- ), >- }, >- }, >- { >- path: "edit/:license_id", >- component: LicensesFormAdd, >- meta: { >- breadcrumb: () => >- build_breadcrumb( >- breadcrumb_paths.licenses, >- "Edit license" // $t("Edit license") >- ), >- }, >- }, >- ], >+ ] > }, > ]; >diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js >new file mode 100644 >index 0000000000..9d8a9a5650 >--- /dev/null >+++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js >@@ -0,0 +1,106 @@ >+import { defineStore } from "pinia"; >+ >+export const useNavigationStore = defineStore("navigation", { >+ state: () => ({ >+ routeState: { >+ alt: "Home", >+ href: "/cgi-bin/koha/mainpage.pl", >+ is_navigation_item: false, >+ is_base: true, >+ children: [] >+ }, >+ current: null, >+ }), >+ actions: { >+ setRoutes(routesDef) { >+ const _traverse_children = (parent) => { >+ if(parent.children && parent.children.length) { >+ parent.children.forEach(child => { >+ child.parent = parent; >+ if(child.path !== undefined) { >+ if(!child.meta) child.meta = {}; >+ child.meta.self = child; >+ } >+ if(parent.children.length === 1 && parent.is_base) { >+ child.is_base = child.is_base !== undefined ? child.is_base : true; >+ child.is_navigation_item = child.is_navigation_item !== undefined ? child.is_navigation_item : false; >+ } else if (parent.children.length > 1 || !parent.is_base) { >+ child.is_base = child.is_base !== undefined ? child.is_base : false; >+ child.is_navigation_item = child.is_navigation_item !== undefined ? child.is_navigation_item : true; >+ } >+ _traverse_children(child) >+ }) >+ } >+ } >+ if(!Array.isArray(routesDef)) { >+ routesDef = [routesDef] >+ } >+ this.routeState.children = routesDef >+ _traverse_children(this.routeState) >+ return this.navigationRoutes >+ } >+ }, >+ getters: { >+ breadcrumbs() { >+ const _traverse_parent = (child) => { >+ let breadcrumbs = [] >+ let builtPath = child.path >+ if(child.parent) { >+ breadcrumbs = _traverse_parent(child.parent) >+ if(builtPath !== undefined && !/^\//.test(builtPath)) { >+ const {path:parentPath} = breadcrumbs[breadcrumbs.length - 1] >+ if(parentPath !== undefined) { >+ builtPath = `${parentPath}${/\/$/.test(parentPath)?'':'/'}${builtPath}` >+ } >+ } >+ } >+ if (child.is_base || (child.path && child.path !== '')) breadcrumbs.push({...child, icon: null, path: builtPath, children: null}) >+ return breadcrumbs >+ } >+ if(this.current) >+ return _traverse_parent(this.current) >+ >+ const _get_base_elements = (parent) => { >+ if(!parent.is_base) return [] >+ let next = {} >+ if(parent.children && parent.children.length) { >+ next = parent.children.find(child => child.is_default) || parent.children[0] >+ } >+ return [{...parent, children: null}, ..._get_base_elements(next)] >+ } >+ >+ return _get_base_elements(this.routeState) >+ }, >+ leftNavigation() { >+ const _get_navigation_elements = (parent, builtPath = '') => { >+ if (parent.is_base && (!parent.children || !parent.children.length)) return []; >+ if (parent.is_base) return parent.children.filter(child => child.is_base || child.is_navigation_item).map(_get_navigation_elements).flat(Infinity) >+ let items = [] >+ if(builtPath) builtPath = `${builtPath}${/\/$/.test(builtPath)?'':'/'}` >+ if(parent.path !== undefined && /^\//.test(parent.path)) { >+ builtPath = parent.path >+ } else if (parent.path !== undefined) { >+ builtPath = `${builtPath}${parent.path}` >+ } else { >+ builtPath = '' >+ } >+ if (!parent.is_end_node && parent.children && parent.children.length) { >+ items = parent.children >+ .filter(child => child.is_navigation_item) >+ .map(child => _get_navigation_elements(child, builtPath)) >+ } >+ return {...parent, path: builtPath ? builtPath : parent.path, children: items} >+ } >+ const leftNav = _get_navigation_elements(this.routeState) >+ return leftNav >+ }, >+ navigationRoutes() { >+ const _to_route = (parent) => { >+ if(parent.path === undefined) return parent.children.map(child => _to_route(child)).flat(Infinity) >+ return parent >+ } >+ let routes = _to_route(this.routeState) >+ return Array.isArray(routes) ? routes : [routes] >+ } >+ } >+}) >-- >2.25.1
<b>You cannot view the attachment while viewing its details because your browser does not support IFRAMEs. <a href="attachment.cgi?id=147962">View the attachment on a separate page</a>.</b>
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 33169
:
147962
|
148044
|
148081
|
148097
|
149710
|
149744
|
151530
|
151797
|
152068
|
152539
|
152540
|
152541
|
153889
|
153890
|
157785
|
157806
|
157807