From a3eb0e299226bd29f835a7c944b5ef454455d1c6 Mon Sep 17 00:00:00 2001 From: Matt Blenkinsop Date: Thu, 27 Jul 2023 10:40:20 +0000 Subject: [PATCH] Bug 34417: Move logic to http client This patch moves the logic for setting dynamic breadcrumb values to the http client to avoid modifying all components that need dynamic values. This patch also fixes the warning about discarding invalid params when navigating Test plan: Create some agreements/licenses/titles/packages and navigate through the ERM module especially to the "show" pages and the "edit" pages for those respective items. On these pages there should be a descriptive breadcrumb using either the name or title of the item. --- .../prog/js/vue/components/Breadcrumbs.vue | 2 +- .../js/vue/components/ERM/AgreementsShow.vue | 1 - .../js/vue/components/ERM/LicensesShow.vue | 1 - .../prog/js/vue/fetch/http-client.js | 13 +++++ .../intranet-tmpl/prog/js/vue/modules/erm.ts | 4 +- .../intranet-tmpl/prog/js/vue/routes/erm.js | 48 +++++-------------- .../prog/js/vue/stores/navigation.js | 39 ++++++++------- 7 files changed, 50 insertions(+), 58 deletions(-) diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue index 9d2b74db0c4..a9c51555059 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/Breadcrumbs.vue @@ -31,7 +31,7 @@ export default { setup: () => { const navigationStore = inject("navigationStore") const { breadcrumbs } = storeToRefs(navigationStore) - const { params } = navigationStore + const { params } = storeToRefs(navigationStore) return { breadcrumbs, params, diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue index 134f3c84cdc..a73e8a47ee5 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/AgreementsShow.vue @@ -390,7 +390,6 @@ export default { client.agreements.get(agreement_id).then( agreement => { this.agreement = agreement - this.navigationStore.setBreadcrumbParameter(agreement.name) this.initialized = true }, error => {} diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue index 9773bf8628d..5fb5e64c44b 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/components/ERM/LicensesShow.vue @@ -197,7 +197,6 @@ export default { client.licenses.get(license_id).then( license => { this.license = license - this.navigationStore.setBreadcrumbParameter(license.name) this.initialized = true }, error => {} diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js index 936231c3f60..807db61039f 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/fetch/http-client.js @@ -1,4 +1,5 @@ import { setError, submitting, submitted } from "../messages"; +import { useNavigationStore } from "../stores/navigation"; class HttpClient { constructor(options = {}) { @@ -41,6 +42,18 @@ class HttpClient { if (error) throw Error(error); + const navigationStore = useNavigationStore() + const { current } = navigationStore + current.forEach(route => { + const { title, path } = route.meta.self + if(title && title.dynamic && res[title.identifier]) { + navigationStore.setBreadcrumbParameter({ + breadcrumbText: res[title.identifier], + path: path + }) + } + }) + return res; } 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 4460be9a1c8..f8391a091f6 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/modules/erm.ts @@ -60,7 +60,9 @@ app.mount("#erm"); const { removeMessages } = mainStore; router.beforeEach((to, from) => { - navigationStore.$patch({ current: to.matched, params: to.params || {} }); + navigationStore.setCurrent(to.matched) + navigationStore.setParams(to.params || {}) + navigationStore.setBreadcrumbParameter({}) 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 2447f585fe2..47f58f787a5 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js @@ -60,7 +60,7 @@ export const routes = [ path: ":agreement_id", name: "AgreementsShow", component: markRaw(AgreementsShow), - title: { dynamic: true, text: $__("Show agreement") }, + title: { dynamic: true, identifier: "name", text: $__("Show agreement")}, }, { path: "add", @@ -72,7 +72,7 @@ export const routes = [ path: "edit/:agreement_id", name: "AgreementsFormAddEdit", component: markRaw(AgreementsFormAdd), - title: { dynamic: true, text: $__("Edit agreement") }, + title: { dynamic: true, identifier: "name", text: $__("Edit agreement")}, }, ], }, @@ -91,7 +91,7 @@ export const routes = [ path: ":license_id", name: "LicensesShow", component: markRaw(LicensesShow), - title: { dynamic: true, text: $__("Show license") }, + title: { dynamic: true, identifier: "name", text: $__("Show license")} }, { path: "add", @@ -103,7 +103,7 @@ export const routes = [ path: "edit/:license_id", name: "LicensesFormAddEdit", component: markRaw(LicensesFormAdd), - title: { dynamic: true, text: $__("Edit license") }, + title: { dynamic: true, identifier: 'name', text: $__("Edit license")} }, ], }, @@ -141,10 +141,7 @@ export const routes = [ component: markRaw( EHoldingsLocalPackagesShow ), - title: { - dynamic: true, - text: $__("Show package"), - }, + title: { dynamic: true, identifier: 'name', text: $__("Show package")} }, { path: "add", @@ -163,10 +160,7 @@ export const routes = [ component: markRaw( EHoldingsLocalPackagesFormAdd ), - title: { - dynamic: true, - text: $__("Edit package"), - }, + title: { dynamic: true, identifier: 'name', text: $__("Edit package")} }, ], }, @@ -189,10 +183,7 @@ export const routes = [ component: markRaw( EHoldingsLocalTitlesShow ), - title: { - dynamic: true, - text: $__("Show title"), - }, + title: { dynamic: true, identifier: 'publication_title', text: $__("Show title")} }, { path: "add", @@ -211,10 +202,7 @@ export const routes = [ component: markRaw( EHoldingsLocalTitlesFormAdd ), - title: { - dynamic: true, - text: $__("Edit title"), - }, + title: { dynamic: true, identifier: 'publication_title', text: $__("Edit title")} }, { path: "import", @@ -233,10 +221,7 @@ export const routes = [ component: markRaw( EHoldingsLocalResourcesShow ), - title: { - dynamic: true, - text: $__("Resource"), - }, + title: { dynamic: false, text: $__("Resource")} }, ], }, @@ -270,10 +255,7 @@ export const routes = [ component: markRaw( EHoldingsEBSCOPackagesShow ), - title: { - dynamic: true, - text: $__("Show package"), - }, + title: { dynamic: true, identifier: 'name', text: $__("Show package")} }, ], }, @@ -296,10 +278,7 @@ export const routes = [ component: markRaw( EHoldingsEBSCOTitlesShow ), - title: { - dynamic: true, - text: $__("Show title"), - }, + title: { dynamic: true, identifier: 'publication_title', text: $__("Show title")} }, { path: "/cgi-bin/koha/erm/eholdings/ebsco/resources/:resource_id", @@ -307,10 +286,7 @@ export const routes = [ component: markRaw( EHoldingsEBSCOResourcesShow ), - title: { - dynamic: true, - text: $__("Resource"), - }, + title: { dynamic: false, text: $__("Resource")}, is_navigation_item: false, }, ], diff --git a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js index 747eac5c8f6..1c5b935a1a6 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/stores/navigation.js @@ -11,7 +11,7 @@ export const useNavigationStore = defineStore("navigation", { }, current: null, params: {}, - breadcrumbParameter: null, + breadcrumbParameters: {} }), actions: { setRoutes(routesDef) { @@ -70,17 +70,23 @@ export const useNavigationStore = defineStore("navigation", { } }, setBreadcrumbParameter(param) { - this.breadcrumbParameter = param; + if(param.hasOwnProperty('path') && param.hasOwnProperty('breadcrumbText')) { + this.breadcrumbParameters[param.path] = param.breadcrumbText + } else { + this.breadcrumbParameters = {} + } + }, + setCurrent(routes) { + this.current = routes }, + setParams(params) { + this.params = params + } }, getters: { breadcrumbs() { if (this.current) - return _buildFromCurrentMatches( - this.current, - this.routeState, - this.breadcrumbParameter - ); + return _buildFromCurrentMatches(this.current, this.routeState, this.breadcrumbParameters); return _getBaseElements(this.routeState); @@ -108,18 +114,14 @@ export const useNavigationStore = defineStore("navigation", { ); } - function _buildFromCurrentMatches( - currentMatches, - routeState, - param - ) { + function _buildFromCurrentMatches(currentMatches, routeState, params) { return [ { ...routeState, icon: null, children: null, }, - ..._mapMatches(currentMatches, param), + ..._mapMatches(currentMatches, params), ]; } @@ -127,21 +129,22 @@ export const useNavigationStore = defineStore("navigation", { return child.is_base || (child.path && child.path !== ""); } - function _mapMatches(currentMatches, param) { + function _mapMatches(currentMatches, params) { return currentMatches .filter(match => _isBaseOrNotStub(match.meta.self)) .map(match => ({ ...match.meta.self, - title: _setTitle(match.meta.self, param), + title: _setTitle(match.meta.self, params), icon: null, path: match.path, children: null, })); } - function _setTitle(self, param) { - const title = self.title.dynamic ? param : self.title.text; - return { dynamic: self.title.dynamic, text: title }; + function _setTitle(self, params) { + const dynamicValue = params[self.path] ? params[self.path] : self.title.text + const title = self.title.dynamic ? dynamicValue : self.title.text + return { dynamic: self.title.dynamic, text: title } } }, leftNavigation() { -- 2.25.1