From 3724e17808178673b0bd783931e491f7663ea802 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 | 44 +++++-------------- .../prog/js/vue/stores/navigation.js | 30 +++++++++---- 7 files changed, 50 insertions(+), 45 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 9d2b74db0c..a9c5155505 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 134f3c84cd..a73e8a47ee 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 9773bf8628..5fb5e64c44 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 936231c3f6..807db61039 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 4460be9a1c..f8391a091f 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 c416ca0353..a238a3a5f9 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js +++ b/koha-tmpl/intranet-tmpl/prog/js/vue/routes/erm.js @@ -60,27 +60,7 @@ export const routes = [ path: ":agreement_id", name: "AgreementsShow", component: markRaw(AgreementsShow), - title: { dynamic: true, text: $__("Show agreement")}, - children: [ - { - path: "items", - title: { dynamic: false, text: $__("")}, - children: [ - { - path: "add", - name: "TestChildTwo", - component: markRaw(EHoldingsLocalTitlesFormAdd), - title: { dynamic: false, text: $__("Add item to train")}, - }, - { - path: "add/:item_ids", - name: "TestChildThree", - component: markRaw(EHoldingsLocalPackagesFormAdd), - title: { dynamic: false, text: $__("Add items to train")}, - }, - ] - }, - ] + title: { dynamic: true, identifier: "name", text: $__("Show agreement")}, }, { path: "add", @@ -92,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")}, }, ], }, @@ -111,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", @@ -123,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")} }, ], }, @@ -158,7 +138,7 @@ export const routes = [ component: markRaw( EHoldingsLocalPackagesShow ), - title: { dynamic: true, text: $__("Show package")} + title: { dynamic: true, identifier: 'name', text: $__("Show package")} }, { path: "add", @@ -174,7 +154,7 @@ export const routes = [ component: markRaw( EHoldingsLocalPackagesFormAdd ), - title: { dynamic: true, text: $__("Edit package")} + title: { dynamic: true, identifier: 'name', text: $__("Edit package")} }, ], }, @@ -197,7 +177,7 @@ export const routes = [ component: markRaw( EHoldingsLocalTitlesShow ), - title: { dynamic: true, text: $__("Show title")} + title: { dynamic: true, identifier: 'publication_title', text: $__("Show title")} }, { path: "add", @@ -213,7 +193,7 @@ export const routes = [ component: markRaw( EHoldingsLocalTitlesFormAdd ), - title: { dynamic: true, text: $__("Edit title")} + title: { dynamic: true, identifier: 'publication_title', text: $__("Edit title")} }, { path: "import", @@ -229,7 +209,7 @@ export const routes = [ component: markRaw( EHoldingsLocalResourcesShow ), - title: { dynamic: true, text: $__("Resource")} + title: { dynamic: false, text: $__("Resource")} }, ], }, @@ -260,7 +240,7 @@ export const routes = [ component: markRaw( EHoldingsEBSCOPackagesShow ), - title: { dynamic: true, text: $__("Show package")} + title: { dynamic: true, identifier: 'name', text: $__("Show package")} }, ], }, @@ -283,7 +263,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", @@ -291,7 +271,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 a9d286e239..f66c7fbbb8 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,13 +70,24 @@ export const useNavigationStore = defineStore("navigation", { } }, setBreadcrumbParameter(param) { - this.breadcrumbParameter = param + // console.log(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); @@ -104,14 +115,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), ]; } @@ -119,12 +130,12 @@ 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, @@ -132,8 +143,9 @@ export const useNavigationStore = defineStore("navigation", { .filter(match => match.title.text); } - function _setTitle(self, param) { - const title = self.title.dynamic ? param : self.title.text + 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 } } }, -- 2.37.1 (Apple Git-137.1)