https://bugs.koha-community.org/bugzilla3/show_bug.cgi?id=41129
--- Comment #45 from Paul Derscheid <[email protected]> --- Created attachment 199041 --> https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=199041&action=edit Bug 41129: Add Vue booking modal, Pinia store, and island wiring - Add BookingModal.vue (<script setup lang="ts">) orchestrating the multi-step form, plus the step components (BookingPatronStep, BookingDetailsStep, BookingPeriodStep) and BookingTooltip - Add PatronSearchSelect.vue and KohaAlert.vue shared components - Add the setup-style Pinia store under stores/bookings/, sectioned by responsibility along a one-way dep chain (status → data → draft → availability → validation) with an effects section for cross-cutting reactive bridges and an utils/withErrorHandling HOF wrapping per-action loading/error - Add modals/booking/island.inc and the two trigger snippets (button-place.inc, button-edit.inc); wire them into cat-toolbar.inc, bookings/list.tt, and the six catalogue detail views; drop the legacy modals/place_booking.inc - Pass js-date-format.inc through unchanged for the new modal - Add the booking-modal-island entry to rspack.config.js - Add ambient.d.ts for *.css / bootstrap / vue-select shims and configure tsconfig.json: @koha-vue alias, allowJs for JSDoc-typed .mjs flow into TS SFCs, narrow per-feature include scoped to the booking subtree, plus target/lib/module/noEmit/types: [] so tsc runs clean - Hydrate the island via vue/modules/islands.ts, providing the Pinia store under "bookings" for inject() consumption - Add Cypress integration coverage in bookingsModalBasic / bookingsModalDatePicker / bookingsModalTimezone, the BookingPeriodStep component spec, plus support/e2e and support/flatpickr adjustments and the insertData.js helpers 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' - yarn cypress run --component --spec 't/cypress/component/**/*_spec.ts' (covers BaseFlatpickr, useBookingCalendarMaps, BookingPeriodStep and the lib/booking pure-function specs) Test environment setup (preconditions for the manual steps below; cypress sets up its own data and does not need these): Bookable inventory: - Administration > Item types: mark at least one item type as "Bookable" (or use the per-item "Bookable" toggle on the item edit page) - Have a biblio with multiple bookable copies of that item type so the multi-item / item-selection / capacity flows are exercisable Circulation rules (Administration > Circulation and fines rules, applied to the library + item type scope you will test against or to the wildcard row): - bookings_lead_period: non-zero (e.g. 2) so steps 18 and 25 have a lead-time constraint to validate and the hover feedback emits lead-specific messages - bookings_trail_period: non-zero (e.g. 2) so step 18 has a trail buffer to validate - issuelength: a finite value (e.g. 7) so a maxPeriod is derivable and step 19 has a max-booking-period to enforce in the "issuelength" constraint mode - renewalsallowed + renewalperiod: non-zero values to exercise the "issuelength_with_renewals" constraint mode Calendar / holidays: - Tools > Calendar: add at least one closed day inside the visible calendar range for the pickup library so step 15 has a holiday to render (and the hover-feedback "library closed" path runs) Existing data on the test biblio: - Place one booking ahead of time so step 15 has a conflict to render, step 18 exercises lead/trail markers next to a real booking, and the edit flow (steps 33-38) has something to edit - Check out a bookable copy with a due date inside the visible calendar range so the picker shows a checkout interval and the checkout-vs-booking lead handling (Koha::Item->find_booking) participates 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 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/
