[Bug 44112] New: Add a clear control to the Vue date picker and move its icon inside right
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=44112 Bug ID: 44112 Summary: Add a clear control to the Vue date picker and move its icon inside right Initiative type: --- Sponsorship --- status: Product: Koha Version: Main Hardware: All OS: All Status: NEW Severity: enhancement Priority: P5 - low Component: Staff interface Assignee: koha-bugs@lists.koha-community.org Reporter: martin.renvoize@openfifth.co.uk QA Contact: testopia@bugs.koha-community.org CC: gmcharlt@gmail.com Target Milestone: --- The Vue FlatPickrWrapper (used for every date field of the Vue modules: ERM, Preservation, ILL, Item lists...) has no way to clear a date in one click. Koha's flatpickr defaults add a "clear date" link, but only to inputs carrying the "flatpickr" class used by the legacy pages, so the Vue inputs never got it. The Vue selects (vue-select) already put their controls inside the field, on the right: a grey clear cross, then the dropdown toggle. The date inputs do not: the calendar icon is inside on the left, and the clear link of the legacy pages is outside on the right, in red. This bug makes the Vue date picker consistent with the selects: a grey clear cross inside the field on the right, shown only when the field has a value, followed by the calendar icon moved from the left. Legacy flatpickr inputs are not part of this bug, they will be handled separately. Bug 42383 (new check-in page) depends on this: its return date field needs the clear control. -- 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=44112 --- Comment #1 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 211621 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=211621&action=edit Bug 44112: Add a clear control to the Vue date picker and move its icon inside right The Vue FlatPickrWrapper, used for every "date" field of the Vue modules (ERM, Preservation, ILL, Item lists...), has no way to clear a date in one click. Koha's flatpickr defaults add a "clear date" link, but only to inputs carrying the "flatpickr" class used by the legacy pages, so the Vue inputs never got it. Clearing a date meant selecting the text and deleting it. The Vue selects (vue-select) already put their controls inside the field on the right: a grey clear cross, then the dropdown toggle. The date inputs did not: the calendar icon was inside on the left, and the clear link of the legacy pages sits outside on the right, in red. Make the date picker consistent with the selects: - a grey clear cross inside the field on the right, shown only when the field has a value, followed by the calendar icon (moved from the left) - "clearable" prop of FlatPickrWrapper (default true) to opt out - the cross is a button with a "Clear date" label The size and the position of the input in the forms do not change. Legacy pages are not affected. Test plan: 1. Apply the patch and rebuild the JS (yarn js:build) 2. Enable the ERMModule preference 3. Go to E-resource management > Agreements > New agreement, and click "Add new period" => The calendar icon is inside the date fields, on the right. No cross is shown. 4. Pick a date in "End date" => A grey cross is shown inside the field, left of the calendar icon, and only for that field 5. Click the cross => The date is cleared and the cross disappears 6. Compare with the selects of the form (for example Status): the cross and the toggle are in the same place 7. Run: $ yarn cypress run --spec t/cypress/integration/ERM/Agreements_spec.ts => SUCCESS: Tests pass! Assisted-by: Sonnet 5.5 (Anthropic) -- 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=44112 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Blocks| |42383 Referenced Bugs: https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=42383 [Bug 42383] Migrate check-in page to Vue -- 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=44112 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #211621|0 |1 is obsolete| | -- 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=44112 --- Comment #2 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- Created attachment 211704 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=211704&action=edit Bug 44112: Add a clear control to the Vue date picker and move its icon inside right The Vue FlatPickrWrapper, used for every "date" field of the Vue modules (ERM, Preservation, ILL, Item lists...), has no way to clear a date in one click. Koha's flatpickr defaults add a "clear date" link, but only to inputs carrying the "flatpickr" class used by the legacy pages, so the Vue inputs never got it. Clearing a date meant selecting the text and deleting it. The Vue selects (vue-select) already put their controls inside the field on the right: a grey clear cross, then the dropdown toggle. The date inputs did not: the calendar icon was inside on the left, and the clear link of the legacy pages sits outside on the right, in red. Make the date picker consistent with the selects: - a grey clear cross inside the field on the right, shown only when the field has a value, followed by the calendar icon (moved from the left) - "clearable" prop of FlatPickrWrapper (default true) to opt out - the cross is a button with a "Clear date" label The size and the position of the input in the forms do not change. Legacy pages are not affected. Test plan: 1. Apply the patch and rebuild the JS (yarn js:build) 2. Enable the ERMModule preference 3. Go to E-resource management > Agreements > New agreement, and click "Add new period" => The calendar icon is inside the date fields, on the right. No cross is shown. 4. Pick a date in "End date" => A grey cross is shown inside the field, left of the calendar icon, and only for that field 5. Click the cross => The date is cleared and the cross disappears 6. Compare with the selects of the form (for example Status): the cross and the toggle are in the same place 7. Run: $ yarn cypress run --spec t/cypress/integration/ERM/Agreements_spec.ts => SUCCESS: Tests pass! Assisted-by: Sonnet 5.5 (Anthropic) Signed-off-by: Brendan Lawlor <blawlor@clamsnet.org> Signed-off-by: Anna Stalter <staltera@hamiltoneastpl.org> Signed-off-by: Martin Renvoize <martin.renvoize@openfifth.co.uk> -- 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=44112 --- Comment #3 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- This bug was split out of Bug 42383 (the new Vue check-in page, which needs a clear control and a consistent picker icon on the Vue date picker), so that the change to the shared FlatPickrWrapper component is listed on its own in the release notes. -- 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=44112 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- QA Contact|testopia@bugs.koha-communit |martin.renvoize@openfifth.c |y.org |o.uk Status|NEW |Needs Signoff -- 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=44112 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 watching all bug changes. You are the assignee for the bug.
https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=44112 Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Signed Off |Passed QA --- Comment #4 from Martin Renvoize (ashimema) <martin.renvoize@openfifth.co.uk> --- I have done a final QA run of the whole tree of bugs together (24401, 43077, 43486, 44112 and 42383, applied in order on current main) as a final overall QA review. Setting to Passed QA. -- 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=44112 Pedro Amorim (ammopt) <pedro.amorim@openfifth.co.uk> changed: What |Removed |Added ---------------------------------------------------------------------------- Status|Passed QA |Pushed to main Version(s)| |26.11.00 released in| | -- 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=44112 --- Comment #5 from Pedro Amorim (ammopt) <pedro.amorim@openfifth.co.uk> --- Thanks everyone! Pushed to main for 26.11! -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes.
participants (1)
-
bugzilla-daemon＠bugs.koha-community.org