micosil
/
desker
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web/src/lib/components/BookingModal.svelte
View File

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