Fix ownership checks and improve delete booking button UI

- Update `isOwner` logic to account for nested user objects in reservation data.
- Enhance delete button styling for better visibility and usability.
main
Pau Costa Ferrer 2026-03-28 16:29:03 +01:00
parent 453fe68e42
commit 56c52bfcc7
1 changed files with 13 additions and 11 deletions

View File

@ -41,7 +41,7 @@
let confirmDelete = false;
let error = "";
$: isOwner = status.reservation?.userId === $user?.id;
$: isOwner = status.reservation?.userId === $user?.id || status.reservation?.user?.id === $user?.id;
$: isAdmin = $user?.role === 'ADMIN';
const timeOptions = [];
@ -195,14 +195,16 @@
</div>
{#if isOwner || isAdmin}
<button
on:click={() => handleDelete(status.reservation.id)}
disabled={deleting}
class="p-2 text-red-600 hover:bg-red-100 rounded-lg transition-colors"
title="Delete Booking"
>
<Trash2 size={20} />
</button>
<div class="flex flex-col gap-2">
<button
on:click={() => handleDelete(status.reservation.id)}
disabled={deleting}
class="flex items-center gap-2 px-4 py-2 bg-red-50 text-red-600 hover:bg-red-100 rounded-xl transition-colors font-bold text-sm border border-red-100 shadow-sm"
>
<Trash2 size={18} />
Delete Booking
</button>
</div>
{/if}
</div>
@ -271,7 +273,7 @@
<button
type="button"
on:click={() => selectSlot(time)}
disabled={!!reservation && reservation.userId !== $user?.id && $user?.role !== 'ADMIN'}
disabled={!!reservation && reservation.userId !== $user?.id && reservation.user?.id !== $user?.id && $user?.role !== 'ADMIN'}
class="w-full py-2 text-[10px] font-bold rounded-md transition-all border
{reservation ? 'bg-red-100 text-red-700 border-red-200' :
startTime === time ? 'bg-indigo-600 text-white border-indigo-700 ring-2 ring-indigo-200' :
@ -281,7 +283,7 @@
{time}
</button>
{#if reservation && (reservation.userId === $user?.id || $user?.role === 'ADMIN')}
{#if reservation && (reservation.userId === $user?.id || reservation.user?.id === $user?.id || $user?.role === 'ADMIN')}
<button
on:click|stopPropagation={() => handleDelete(reservation.id)}
class="absolute -top-1 -right-1 p-0.5 bg-red-600 text-white rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity"