[Bug 43518] New: Add a reusable PatronSelect Vue component with patron search
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Bug ID: 43518 Summary: Add a reusable PatronSelect Vue component with patron search Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Patrons Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@openfifth.co.uk QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com, kyle@bywatersolutions.com Blocks: 41129 Target Milestone: --- This patch adds a reusable PatronSelect.vue component: a searchable, debounced patron picker built on v-select, showing age and library context in results, with loading/disabled states and slots for custom option/no-options/spinner rendering. It also adds a paginated patrons.search() method to fetch/patron-api-client.js, used by the new component to query the patrons API. This is generic UI infrastructure with no feature-specific behaviour; it's split out from bug 41129 (booking workflows), where it was originally extracted from inline logic in the booking patron-selection step, because it benefits from independent review and other patron-picking UIs can reuse it. Test plan: 1. Run: yarn cypress run --component --browser electron --spec 't/cypress/component/PatronSelect_spec.ts' 2. Verify the component mounts, debounced search calls the API, and selecting an option emits the expected value. Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41129 [Bug 41129] Migrate place_booking.js to a Vue island. -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 --- Comment #1 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 205529 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=205529&action=edit Bug 43518: Add a reusable PatronSelect Vue component with patron search Add PatronSelect.vue: a searchable, debounced patron picker built on v-select. Shows age and library context alongside matching options, supports loading/disabled states, and exposes slots for custom option/no-options/spinner rendering. Not tied to any particular feature - any screen that needs to pick a patron can mount it. Add fetch/patron-api-client.js's paginated patrons.search() method for the component to query the patrons API, and vue/utils/functions.js's debounce() helper it uses to throttle search calls. Test plan: 1. Run: yarn cypress run --component --browser electron --spec 't/cypress/component/PatronSelect_spec.ts' 2. Verify all specs pass. -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #205529|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 --- Comment #2 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 205547 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=205547&action=edit Bug 43518: Add a reusable PatronSelect Vue component with patron search Add PatronSelect.vue: a searchable, debounced patron picker built on v-select. Shows age and library context alongside matching options, supports loading/disabled states, and exposes slots for custom option/no-options/spinner rendering. Not tied to any particular feature - any screen that needs to pick a patron can mount it. Add fetch/patron-api-client.js's paginated patrons.search() method for the component to query the patrons API, and vue/utils/functions.js's debounce() helper it uses to throttle search calls. Split out from bug 41129 (booking workflows), where it was originally extracted from inline logic in the booking patron-selection step, as generic UI infrastructure. Test plan: 1. Run: yarn cypress run --component --browser electron --spec 't/cypress/component/PatronSelect_spec.ts' 2. Verify all specs pass. Co-authored-by: Paul Derscheid <paul.derscheid@lmscloud.de> Co-authored-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> Sponsored-by: Büchereizentrale Schleswig-Holstein <https://www.bz-sh.de/> Assisted-by: Opus 4.8 (Anthropic) Assisted-by: GPT 5.6 (OpenAI) Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> Signed-off-by: Jacob O'Mara <jacob.omara@openfifth.co.uk> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|NEW |Needs Signoff -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Needs Signoff |Signed Off -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Assignee|koha-bugs@lists.koha-commun |jacob.omara@openfifth.co.uk |ity.org | QA Contact|testopia@bugs.koha-communit |me@paulderscheid.xyz |y.org | -- You are receiving this mail because: You are watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|me@paulderscheid.xyz |matt.blenkinsop@openfifth.c | |o.uk -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- CC| |paul.derscheid@lmscloud.de -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 --- Comment #3 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 205591 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=205591&action=edit Bug 43518: (follow-up) Close PatronAutoComplete parity gaps in PatronSelect Add vue/utils/patron-options.js: pure, framework-free helpers that give PatronSelect the same display fidelity as the legacy $patron_to_html()/patron_autocomplete() pair it's meant to eventually replace, without depending on either: - formatPatronName() replicates $patron_to_html()'s name-assembly rules (preferred_name/firstname, title-free by parity with the actual legacy behaviour, middle_name, other_name, showDiffFirstname, invertName, hidePatronName, displayCardnumber, and the no-name fallback for restricted-view patrons), returning plain text instead of an HTML string. - patronToOption() builds a full PatronSelect option from a raw patron API record: label, age, library name, expired/restricted flags, a current-library flag, and a plain city/country summary. - resolvePatronOption() resolves either a bare patron id (fetching and mapping it) or an already-embedded patron record (mapping only, no fetch) to the same option shape - closing an asymmetry found in the booking store's openForEdit(), which skips the mapper entirely when a patron object is already supplied. Extend PatronSelect.vue's option row with Expired/Restricted badges and a current-library indicator (parity with patron_autocomplete's _renderItem()) and a city/country line (deliberately simplified from the legacy address formatter, which is template-generated and locale/authorised-value-aware). Out of scope, tracked as follow-up ideas rather than done here: bridging $patron_to_html() to reuse formatPatronName() (blocked by patron-format.js being a plain, unbundled script outside the rspack pipeline), and full locale-aware address formatting. Test plan: 1. Run: yarn cypress run --component --browser electron --spec 't/cypress/component/patronOptions_spec.ts,t/cypress/component/PatronSelect_spec.ts' 2. Verify all specs pass. Assisted-by: Sonnet 5 (Anthropic) -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |43520 Blocks| |43521 Blocks| |43522 Summary|Add a reusable PatronSelect |Add a, pure Vue, reusable |Vue component with patron |PatronSelect Vue component |search |with patron search Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43520 [Bug 43520] Replace PatronAutoComplete with PatronSelect in FormElement.vue https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43521 [Bug 43521] Reuse PatronSelect's patron name formatter in patron-format.js https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43522 [Bug 43522] Add locale-aware address display to PatronSelect option rows -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Lisette Scheer <lisette@bywatersolutions.com> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|matt.blenkinsop@openfifth.c |me@paulderscheid.xyz |o.uk | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|me@paulderscheid.xyz |paul.derscheid@lmscloud.de -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Sponsorship status|--- |Sponsored Status|Signed Off |Passed QA Comma delimited| |Büchereizentrale list of Sponsors| |Schleswig-Holstein | |<https://www.bz-sh.de/> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 Paul Derscheid <paul.derscheid@lmscloud.de> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #205547|0 |1 is obsolete| | Attachment #205591|0 |1 is obsolete| | -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 --- Comment #4 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 207533 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=207533&action=edit Bug 43518: Add a reusable PatronSelect Vue component with patron search Add PatronSelect.vue: a searchable, debounced patron picker built on v-select. Shows age and library context alongside matching options, supports loading/disabled states, and exposes slots for custom option/no-options/spinner rendering. Not tied to any particular feature - any screen that needs to pick a patron can mount it. Add fetch/patron-api-client.js's paginated patrons.search() method for the component to query the patrons API, and vue/utils/functions.js's debounce() helper it uses to throttle search calls. Split out from bug 41129 (booking workflows), where it was originally extracted from inline logic in the booking patron-selection step, as generic UI infrastructure. Test plan: 1. Run: yarn cypress run --component --browser electron --spec 't/cypress/component/PatronSelect_spec.ts' 2. Verify all specs pass. Co-authored-by: Paul Derscheid <paul.derscheid@lmscloud.de> Co-authored-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> Sponsored-by: Büchereizentrale Schleswig-Holstein <https://www.bz-sh.de/> Assisted-by: Opus 4.8 (Anthropic) Assisted-by: GPT 5.6 (OpenAI) Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> Signed-off-by: Jacob O'Mara <jacob.omara@openfifth.co.uk> Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 --- Comment #5 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 207534 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=207534&action=edit Bug 43518: (follow-up) Close PatronAutoComplete parity gaps in PatronSelect Add vue/utils/patron-options.js: pure, framework-free helpers that give PatronSelect the same display fidelity as the legacy $patron_to_html()/patron_autocomplete() pair it's meant to eventually replace, without depending on either: - formatPatronName() replicates $patron_to_html()'s name-assembly rules (preferred_name/firstname, title-free by parity with the actual legacy behaviour, middle_name, other_name, showDiffFirstname, invertName, hidePatronName, displayCardnumber, and the no-name fallback for restricted-view patrons), returning plain text instead of an HTML string. - patronToOption() builds a full PatronSelect option from a raw patron API record: label, age, library name, expired/restricted flags, a current-library flag, and a plain city/country summary. - resolvePatronOption() resolves either a bare patron id (fetching and mapping it) or an already-embedded patron record (mapping only, no fetch) to the same option shape - closing an asymmetry found in the booking store's openForEdit(), which skips the mapper entirely when a patron object is already supplied. Extend PatronSelect.vue's option row with Expired/Restricted badges and a current-library indicator (parity with patron_autocomplete's _renderItem()) and a city/country line (deliberately simplified from the legacy address formatter, which is template-generated and locale/authorised-value-aware). Out of scope, tracked as follow-up ideas rather than done here: bridging $patron_to_html() to reuse formatPatronName() (blocked by patron-format.js being a plain, unbundled script outside the rspack pipeline), and full locale-aware address formatting. Test plan: 1. Run: yarn cypress run --component --browser electron --spec 't/cypress/component/patronOptions_spec.ts,t/cypress/component/PatronSelect_spec.ts' 2. Verify all specs pass. Assisted-by: Sonnet 5 (Anthropic) Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 --- Comment #6 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 207535 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=207535&action=edit Bug 43518: (QA follow-up) Drop booking comment from PatronSelect Assisted-by: Opus 5.5 (Anthropic) Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> -- You are receiving this mail because: You are watching all bug changes.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=43518 --- Comment #7 from Paul Derscheid <paul.derscheid@lmscloud.de> --- Created attachment 207536 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=207536&action=edit Bug 43518: (QA follow-up) Use @koha-vue/i18n alias in patron-options Assisted-by: Opus 5.5 (Anthropic) Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de> -- You are receiving this mail because: You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org