Bugzilla – Attachment 153960 Details for
Bug 34417
ERM's breadcrumb (Vue) does not display the entity's name
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Help
|
New Account
|
Log In
[x]
|
Forgot Password
Login:
[x]
[patch]
Bug 34417: Move logic to http client
Bug-34417-Move-logic-to-http-client.patch (text/plain), 15.86 KB, created by
Jonathan Druart
on 2023-07-27 11:24:12 UTC
(
hide
)
Description:
Bug 34417: Move logic to http client
Filename:
MIME Type:
Creator:
Jonathan Druart
Created:
2023-07-27 11:24:12 UTC
Size:
15.86 KB
patch
obsolete
>From a3eb0e299226bd29f835a7c944b5ef454455d1c6 Mon Sep 17 00:00:00 2001 >From: Matt Blenkinsop <matt.blenkinsop@ptfs-europe.com> >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
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Diff
|
Splinter Review
Attachments on
bug 34417
:
153914
|
153958
|
153959
| 153960 |
154258
|
154263