diff --git a/packages/app/src/pages/admin/bookings.vue b/packages/app/src/pages/admin/bookings.vue index eba0f06..f2afcea 100644 --- a/packages/app/src/pages/admin/bookings.vue +++ b/packages/app/src/pages/admin/bookings.vue @@ -146,6 +146,7 @@ diff --git a/packages/app/src/pages/profile/bookings.vue b/packages/app/src/pages/profile/bookings.vue index 41ad7df..40e6469 100644 --- a/packages/app/src/pages/profile/bookings.vue +++ b/packages/app/src/pages/profile/bookings.vue @@ -163,6 +163,7 @@ diff --git a/packages/app/src/stores/booking.ts b/packages/app/src/stores/booking.ts index c017684..dccf79e 100644 --- a/packages/app/src/stores/booking.ts +++ b/packages/app/src/stores/booking.ts @@ -44,13 +44,27 @@ export const useBookingStore = defineStore('booking', () => { return result } + /** + * Replace a booking in `myBookings` by id. Preserves immutability: always + * returns a new array reference so Vue's computed/watchers pick up the change. + * If the booking isn't in the list (e.g. paginated out), leaves state untouched. + */ + function replaceBooking(updated: BookingWithDetails) { + const idx = myBookings.value.findIndex((b) => b.id === updated.id) + if (idx === -1) return + const next = myBookings.value.slice() + next[idx] = updated + myBookings.value = next + } + async function cancelBooking(bookingId: string) { const result = await put(`/booking/${bookingId}/cancel`) + replaceBooking(result) return result } - async function fetchMyBookings(status?: string) { - loadingBookings.value = true + async function fetchMyBookings(status?: string, opts: { silent?: boolean } = {}) { + if (!opts.silent) loadingBookings.value = true try { const params: Record = status ? { status } : {} const paginated = await get>('/booking/my', params) @@ -59,7 +73,7 @@ export const useBookingStore = defineStore('booking', () => { console.error('Fetch bookings failed:', err) myBookings.value = [] } finally { - loadingBookings.value = false + if (!opts.silent) loadingBookings.value = false } } @@ -106,6 +120,7 @@ export const useBookingStore = defineStore('booking', () => { const result = await put(`/booking/${bookingId}/confirm`, { remark, }) + replaceBooking(result) return result } @@ -113,6 +128,7 @@ export const useBookingStore = defineStore('booking', () => { const result = await put(`/booking/${bookingId}/complete`, { remark, }) + replaceBooking(result) return result } @@ -120,6 +136,7 @@ export const useBookingStore = defineStore('booking', () => { const result = await put(`/booking/${bookingId}/noshow`, { remark, }) + replaceBooking(result) return result } @@ -159,5 +176,6 @@ export const useBookingStore = defineStore('booking', () => { fetchBookingHistory, fetchSlotById, fetchBookingById, + replaceBooking, } })