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:
parent
5ea4fc79af
commit
4a9fc0de3c
1 changed files with 28 additions and 9 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue