fix phantom claim button showing for all users

canClaim was true when both claimedBy and currentUserId were
undefined (undefined === undefined). now requires both to be set.

also changed Claim to Accept/Decline buttons.
This commit is contained in:
Justin Edmund 2025-12-17 18:28:49 -08:00
parent 5ea4fc79af
commit 4a9fc0de3c

View file

@ -13,10 +13,12 @@
onEdit?: () => void onEdit?: () => void
onDelete?: () => void onDelete?: () => void
onAssign?: () => void onAssign?: () => void
onConfirmClaim?: () => void onAccept?: () => void
onDecline?: () => void
} }
const { phantom, currentUserId, onEdit, onDelete, onAssign, onConfirmClaim }: Props = $props() const { phantom, currentUserId, onEdit, onDelete, onAssign, onAccept, onDecline }: Props =
$props()
function formatDate(dateString: string): string { function formatDate(dateString: string): string {
return new Date(dateString).toLocaleDateString(undefined, { return new Date(dateString).toLocaleDateString(undefined, {
@ -35,9 +37,12 @@
return 'unclaimed' return 'unclaimed'
}) })
// Check if current user is the one assigned to this phantom (can claim) // Check if current user is the one assigned to this phantom (can accept/decline)
const canClaim = $derived( const canClaim = $derived(
phantom.claimedBy?.id === currentUserId && !phantom.claimConfirmed !!phantom.claimedBy &&
!!currentUserId &&
phantom.claimedBy.id === currentUserId &&
!phantom.claimConfirmed
) )
</script> </script>
@ -88,11 +93,20 @@
{/if} {/if}
{/snippet} {/snippet}
</DropdownMenu> </DropdownMenu>
{:else if canClaim && onConfirmClaim} {:else if canClaim}
<!-- Non-officers who can claim get a simple button --> <!-- Non-officers who can accept/decline get two buttons -->
<Button variant="secondary" size="small" onclick={onConfirmClaim}> <div class="claim-buttons">
Claim {#if onDecline}
</Button> <Button variant="secondary" size="small" onclick={onDecline}>
Decline
</Button>
{/if}
{#if onAccept}
<Button variant="primary" size="small" onclick={onAccept}>
Accept
</Button>
{/if}
</div>
{/if} {/if}
</div> </div>
</li> </li>
@ -153,6 +167,11 @@
gap: spacing.$unit; gap: spacing.$unit;
} }
.claim-buttons {
display: flex;
gap: spacing.$unit-half;
}
.status-badge { .status-badge {
display: inline-block; display: inline-block;
padding: 2px 8px; padding: 2px 8px;