feat(frontend): add task inactivate and delete actions
Extend the local task store with active state, inactivation, and hard delete support. Update the edit task page and tests so inactive tasks are hidden from normal lists and task lifecycle actions are available from the details view.
This commit is contained in:
@@ -3,8 +3,10 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { getEntity } from '../api/entitiesApi'
|
||||
import {
|
||||
deleteTask,
|
||||
generateTaskPreview,
|
||||
getTask,
|
||||
inactivateTask,
|
||||
updateTask,
|
||||
type EmailLookback,
|
||||
} from '../api/tasksApi'
|
||||
@@ -93,6 +95,18 @@ const DEFAULT_TASK_FORM: TaskFormState = {
|
||||
emailLookback: 'last_week',
|
||||
}
|
||||
|
||||
async function invalidateTaskQueries(
|
||||
queryClient: ReturnType<typeof useQueryClient>,
|
||||
entityId: string,
|
||||
taskId: string
|
||||
) {
|
||||
await Promise.all([
|
||||
queryClient.invalidateQueries({ queryKey: ['entity-tasks', entityId] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['entity-task', taskId] }),
|
||||
queryClient.invalidateQueries({ queryKey: ['entity-tasks'] }),
|
||||
])
|
||||
}
|
||||
|
||||
export default function EditTaskPage() {
|
||||
const { entityId = '', taskId = '' } = useParams()
|
||||
const navigate = useNavigate()
|
||||
@@ -138,8 +152,23 @@ export default function EditTaskPage() {
|
||||
emailLookback: data.emailLookback,
|
||||
}),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ['entity-tasks', entityId] })
|
||||
await queryClient.invalidateQueries({ queryKey: ['entity-task', taskId] })
|
||||
await invalidateTaskQueries(queryClient, entityId, taskId)
|
||||
navigate(`/entities/${entityId}`)
|
||||
},
|
||||
})
|
||||
|
||||
const inactivateTaskMutation = useMutation({
|
||||
mutationFn: () => inactivateTask(taskId),
|
||||
onSuccess: async () => {
|
||||
await invalidateTaskQueries(queryClient, entityId, taskId)
|
||||
navigate(`/entities/${entityId}`)
|
||||
},
|
||||
})
|
||||
|
||||
const deleteTaskMutation = useMutation({
|
||||
mutationFn: () => deleteTask(taskId),
|
||||
onSuccess: async () => {
|
||||
await invalidateTaskQueries(queryClient, entityId, taskId)
|
||||
navigate(`/entities/${entityId}`)
|
||||
},
|
||||
})
|
||||
@@ -386,6 +415,22 @@ export default function EditTaskPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-3 pb-8">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => inactivateTaskMutation.mutate()}
|
||||
disabled={!task.active || inactivateTaskMutation.isPending || deleteTaskMutation.isPending}
|
||||
className="mr-auto rounded-md border border-amber-700 px-4 py-2 text-sm text-amber-200 hover:border-amber-500 disabled:opacity-50"
|
||||
>
|
||||
{inactivateTaskMutation.isPending ? 'Inactivating…' : 'Inactivate'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteTaskMutation.mutate()}
|
||||
disabled={deleteTaskMutation.isPending || inactivateTaskMutation.isPending}
|
||||
className="rounded-md border border-red-800 px-4 py-2 text-sm text-red-200 hover:border-red-600 disabled:opacity-50"
|
||||
>
|
||||
{deleteTaskMutation.isPending ? 'Deleting…' : 'Delete'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => navigate(`/entities/${entityId}`)}
|
||||
|
||||
Reference in New Issue
Block a user