feat: add booking edit modal for /today page with service management

Replace placeholder BookingModal on the Next Appointment edit button with a
dedicated EditBookingModal that allows admins to add, remove, and override
services on an active booking. Includes backend PUT endpoint with overlap
detection and full test suite (20 tests).
This commit is contained in:
2026-05-16 17:23:00 +01:00
parent 44259a32ab
commit 80621e0d77
6 changed files with 2305 additions and 3 deletions
+22 -1
View File
@@ -12,6 +12,7 @@
import CallInBooking from '$lib/components/admin/CallInBooking.svelte';
import WalkInBooking from '$lib/components/admin/WalkInBooking.svelte';
import BookingModal from '$lib/components/admin/BookingModal.svelte';
import EditBookingModal from '$lib/components/admin/EditBookingModal.svelte';
import UserModal from '$lib/components/admin/UserModal.svelte';
// =============== Auth & Permissions ===============
@@ -42,15 +43,23 @@
// =============== Modal State ===============
let showBookingModal = $state(false);
let showEditBookingModal = $state(false);
let showUserModal = $state(false);
let selectedBookingId = $state<string | null>(null);
let selectedUserId = $state<string | null>(null);
let editBookingNextStart = $state<string | null>(null);
function openBookingModal(bookingId: string) {
selectedBookingId = bookingId;
showBookingModal = true;
}
function openEditBookingModal(bookingId: string, nextAppointmentStart: string | null = null) {
selectedBookingId = bookingId;
editBookingNextStart = nextAppointmentStart;
showEditBookingModal = true;
}
function openUserModal(userId: string) {
selectedUserId = userId;
showUserModal = true;
@@ -104,7 +113,7 @@
</div>
<!-- Current/Next Appointment Card (Full Width) -->
<CurrentAppointment {openBookingModal} {openUserModal} />
<CurrentAppointment {openBookingModal} {openEditBookingModal} {openUserModal} />
<!-- quick booking Grid -->
<div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
@@ -148,6 +157,18 @@
<BookingModal bind:open={showBookingModal} bookingId={selectedBookingId} />
{/if}
{#if showEditBookingModal && selectedBookingId}
<EditBookingModal
bind:open={showEditBookingModal}
bookingId={selectedBookingId}
nextAppointmentStart={editBookingNextStart}
onSaved={() => {
// Refresh the page data after save
showBookingModal = false;
}}
/>
{/if}
{#if showUserModal && selectedUserId}
<UserModal bind:open={showUserModal} userId={selectedUserId} {openBookingModal} />
{/if}