feat(frontend): toggle task activation state
Add task reactivation support to the local task API and update the edit task page to switch between Activate and Inactivate based on the current task state. Keep the separate entity-page inactive-visibility changes out of this commit so they can be reviewed independently.
This commit is contained in:
@@ -3,6 +3,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { getEntity } from '../api/entitiesApi'
|
||||
import {
|
||||
activateTask,
|
||||
deleteTask,
|
||||
generateTaskPreview,
|
||||
getTask,
|
||||
@@ -165,6 +166,14 @@ export default function EditTaskPage() {
|
||||
},
|
||||
})
|
||||
|
||||
const activateTaskMutation = useMutation({
|
||||
mutationFn: () => activateTask(taskId),
|
||||
onSuccess: async () => {
|
||||
await invalidateTaskQueries(queryClient, entityId, taskId)
|
||||
navigate(`/entities/${entityId}`)
|
||||
},
|
||||
})
|
||||
|
||||
const deleteTaskMutation = useMutation({
|
||||
mutationFn: () => deleteTask(taskId),
|
||||
onSuccess: async () => {
|
||||
@@ -417,16 +426,41 @@ export default function EditTaskPage() {
|
||||
<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"
|
||||
onClick={() => {
|
||||
if (task.active) {
|
||||
inactivateTaskMutation.mutate()
|
||||
return
|
||||
}
|
||||
|
||||
activateTaskMutation.mutate()
|
||||
}}
|
||||
disabled={
|
||||
inactivateTaskMutation.isPending ||
|
||||
activateTaskMutation.isPending ||
|
||||
deleteTaskMutation.isPending
|
||||
}
|
||||
className={`mr-auto rounded-md border px-4 py-2 text-sm disabled:opacity-50 ${
|
||||
task.active
|
||||
? 'border-amber-700 text-amber-200 hover:border-amber-500'
|
||||
: 'border-emerald-700 text-emerald-200 hover:border-emerald-500'
|
||||
}`}
|
||||
>
|
||||
{inactivateTaskMutation.isPending ? 'Inactivating…' : 'Inactivate'}
|
||||
{task.active
|
||||
? inactivateTaskMutation.isPending
|
||||
? 'Inactivating…'
|
||||
: 'Inactivate'
|
||||
: activateTaskMutation.isPending
|
||||
? 'Activating…'
|
||||
: 'Activate'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => deleteTaskMutation.mutate()}
|
||||
disabled={deleteTaskMutation.isPending || inactivateTaskMutation.isPending}
|
||||
disabled={
|
||||
deleteTaskMutation.isPending ||
|
||||
inactivateTaskMutation.isPending ||
|
||||
activateTaskMutation.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'}
|
||||
|
||||
Reference in New Issue
Block a user