Add communication confirmation checkbox for unclaiming tasks
Require users to confirm they've communicated with the team before unclaiming a task to prevent coordination issues. Changes: - Add hasConfirmedCommunication checkbox state - Show checkbox in unclaim confirmation dialog - Disable "Unclaim Task" button until checkbox is checked - Reset checkbox state when dialog is closed/cancelled - Update dialog description to prompt communication UX Flow: 1. User clicks "Unclaim" button 2. Dialog appears with message about removing claim 3. Checkbox: "I have communicated this to the team" 4. "Unclaim Task" button disabled until checkbox checked 5. Forces user acknowledgment before unclaiming This prevents situations where: - Someone unclaims without notifying others working on related tasks - Team members are left confused about task status - Work gets duplicated or blocked due to lack of communication 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
4e85488921
commit
8f05f4ec7c
1 changed files with 32 additions and 2 deletions
|
|
@ -2,6 +2,7 @@
|
|||
import { computed, ref } from 'vue'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
|
|
@ -46,6 +47,7 @@ const authService = injectService<AuthService>(SERVICE_TOKENS.AUTH_SERVICE)
|
|||
|
||||
// Confirmation dialog state
|
||||
const showConfirmDialog = ref(false)
|
||||
const hasConfirmedCommunication = ref(false)
|
||||
|
||||
// Event address for tracking completion
|
||||
const eventAddress = computed(() => `31922:${props.event.pubkey}:${props.event.dTag}`)
|
||||
|
|
@ -178,6 +180,11 @@ function handleUnclaimTask() {
|
|||
function confirmAction() {
|
||||
if (!pendingAction.value) return
|
||||
|
||||
// For unclaim action, require checkbox confirmation
|
||||
if (pendingAction.value === 'unclaim' && !hasConfirmedCommunication.value) {
|
||||
return
|
||||
}
|
||||
|
||||
switch (pendingAction.value) {
|
||||
case 'claim':
|
||||
emit('claim-task', props.event, occurrence.value)
|
||||
|
|
@ -195,12 +202,14 @@ function confirmAction() {
|
|||
|
||||
showConfirmDialog.value = false
|
||||
pendingAction.value = null
|
||||
hasConfirmedCommunication.value = false
|
||||
}
|
||||
|
||||
// Cancel action
|
||||
function cancelAction() {
|
||||
showConfirmDialog.value = false
|
||||
pendingAction.value = null
|
||||
hasConfirmedCommunication.value = false
|
||||
}
|
||||
|
||||
// Get dialog content based on pending action
|
||||
|
|
@ -227,7 +236,7 @@ const dialogContent = computed(() => {
|
|||
case 'unclaim':
|
||||
return {
|
||||
title: 'Unclaim Task?',
|
||||
description: `This will remove your claim on "${props.event.title}" and make it available for others.`,
|
||||
description: `This will remove your claim on "${props.event.title}" and make it available for others.\n\nHave you communicated to others that you are unclaiming this task?`,
|
||||
confirmText: 'Unclaim Task'
|
||||
}
|
||||
default:
|
||||
|
|
@ -466,9 +475,30 @@ const dialogContent = computed(() => {
|
|||
{{ dialogContent.description }}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<!-- Communication confirmation checkbox (only for unclaim) -->
|
||||
<div v-if="pendingAction === 'unclaim'" class="flex items-start space-x-3 py-4">
|
||||
<Checkbox
|
||||
:model-value="hasConfirmedCommunication"
|
||||
@update:model-value="(val) => hasConfirmedCommunication = !!val"
|
||||
id="confirm-communication"
|
||||
/>
|
||||
<label
|
||||
for="confirm-communication"
|
||||
class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer"
|
||||
>
|
||||
I have communicated this to the team.
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="cancelAction">Cancel</Button>
|
||||
<Button @click="confirmAction">{{ dialogContent.confirmText }}</Button>
|
||||
<Button
|
||||
@click="confirmAction"
|
||||
:disabled="pendingAction === 'unclaim' && !hasConfirmedCommunication"
|
||||
>
|
||||
{{ dialogContent.confirmText }}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue