https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41129
Paul Derscheid <[email protected]> changed: What |Removed |Added ---------------------------------------------------------------------------- Attachment #193909|0 |1 is obsolete| | Attachment #193910|0 |1 is obsolete| | Attachment #193911|0 |1 is obsolete| | Attachment #193912|0 |1 is obsolete| | Attachment #193913|0 |1 is obsolete| | --- Comment #14 from Paul Derscheid <[email protected]> --- Created attachment 193925 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=193925&action=edit Bug 41129: Introduce Vue booking modal and Bootstrap 5 modal wiring Replace the jQuery/TT-based place_booking modal with a Vue 3 SFC component mounted via the island architecture pattern. Core components: - Add BookingModal.vue (<script setup lang="ts">) with multi-step form (patron, details, period) - Add Pinia store (stores/bookings.js) for shared booking state - Add flatpickr calendar with constraint highlighting, marker dots, hover feedback bar, and availability computation - Use Bootstrap 5 Modal API (show/hide/dispose) for modal lifecycle - Add island.inc, button-place.inc, button-edit.inc entry points - Wire into cat-toolbar.inc, detail.tt, bookings/list.tt, and all catalogue detail views - Add KohaAlert.vue, dayjs.mjs, and apiErrors.js shared utilities - Add rspack.config.js entry for booking-modal-island bundle Module architecture: - Add API adapter layer (lib/adapters/api/) using fetch(), structured for future APIClient migration - Split calendar adapter into focused modules under lib/adapters/calendar/ (events, highlighting, locale, markers, prevention, visibility) - Add BookingDate class (immutable, timezone-aware date wrapper) - Add availability/ sub-modules (date-change, disabled-dates, period-validators, rules, unavailable-map) - Add interval tree and sweep-line processor for efficient overlap detection and unavailability computation - Add composables for availability, validation, capacity guard, constraint highlighting, rules fetching, flatpickr lifecycle, and form defaults - Add conflict-resolution, constraints, highlighting, markers modules - Add hover-feedback module for calendar feedback bar - Manage error state in Pinia store Behavior: - Add 3-way payload construction for "any item" bookings - Add editable property to timeline booking items - Show transient success message after booking save - Apply server timezone conversion for timeline dates API/embed compatibility: - Add GET /libraries/{id}/holidays endpoint (Libraries.pm, swagger) - Allow "library" embed on GET /patrons/{id} (patrons.yaml) Cypress coverage: - Test modal open/close lifecycle from biblio detail page - Test patron search typeahead and selection - Test item type and pickup location dropdowns - Test flatpickr date range selection and validation - Test booking creation via API with success/error paths - Test edit booking flow with pre-filled form state - Add Vue Select test helpers (vue-select.js) - Validate flatpickr state via instance API instead of DOM classes Technical notes: The booking adapters use fetch() directly but are structured to facilitate migration to the APIClient pattern. Full migration requires BiblioAPIClient, CheckoutAPIClient, CirculationRulesAPI- Client, and PatronAPIClient.search() enhancements — best done as a coordinated effort across the codebase. Test plan: STAFF INTERFACE - Creating Bookings Preparation: - Run yarn js:build to emit the bundles Automated tests: - yarn cypress run --spec 't/cypress/integration/Circulation/bookingsModal*.ts' 1. Navigate to a biblio detail page with bookable items 2. Click "Place booking" button 3. Observe the Vue booking modal opens Step 1 - Patron Selection: 4. Type patron name/cardnumber in search field 5. Verify typeahead search returns results 6. Select a patron 7. Verify patron is selected and displays correctly Step 2 - Booking Details: 8. Verify item type dropdown is populated 9. Select an item type 10. Verify pickup location dropdown is populated 11. Select a pickup location 12. If multiple bookable items exist, verify item dropdown appears 13. Select specific item (if applicable) Step 3 - Booking Period: 14. Verify flatpickr calendar opens 15. Verify calendar shows existing bookings, checkouts, and available dates 16. Select a date range 17. Verify date range validation works 18. Verify lead period/trail period restrictions are enforced 19. Verify maximum booking period is enforced 20. Verify constraint highlighting updates correctly when changing item type, specific item, or pickup location Validation Testing: 21. Try to submit without patron - verify error message 22. Try to submit without item type - verify error message 23. Try to submit without pickup location - verify error message 24. Try to submit without date range - verify error message 25. Try to select dates outside allowed range - verify validation Capacity Testing: 26. For item type with limited bookable items, verify capacity warnings 27. Verify zero-capacity items show appropriate message Submitting Bookings: 28. Complete all required fields 29. Click "Place booking" 30. Verify booking is created successfully 31. Verify modal closes 32. Verify booking appears in bookings list STAFF INTERFACE - Editing Bookings 33. Click "Edit" on an existing booking 34. Verify modal opens with pre-filled data (patron, item type, pickup location, date range) 35. Modify the date range 36. Click "Update booking" 37. Verify changes are saved 38. Verify updated booking reflects changes Calendar Navigation: 39. In date picker, navigate between months 40. Verify highlighting persists across navigation 41. Verify availability data loads correctly for new months Error Handling: 42. Disconnect network 43. Try to create a booking 44. Verify appropriate error message displays 45. Restore network and verify subsequent booking attempts work Store State Management: 46. Open booking modal and fill in some fields but don't submit 47. Close modal and re-open it 48. Verify modal state is reset (no data persists inappropriately) Build Process: 49. Run yarn js:build and yarn js:build:prod 50. Verify build completes without errors 51. Verify dist files are generated correctly Sponsored-by: Büchereizentrale Schleswig-Holstein <https://www.bz-sh.de/> -- You are receiving this mail because: You are the assignee for the bug. You are watching all bug changes. _______________________________________________ Koha-bugs mailing list [email protected] https://lists.koha-community.org/cgi-bin/mailman/listinfo/koha-bugs website : http://www.koha-community.org/ git : http://git.koha-community.org/ bugs : http://bugs.koha-community.org/
