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,
}
})