src/components/task-editor.tsx - main - DME/Notes

src/components/task-editor.tsx
67 строк2 KB
Karasique333
Commit
19 июн 2025, 15:09
19 июн 2025, 15:09d96c829
'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { api } from '@/trpc/react'
import { Button } from './ui/button'
import { Input } from './ui/input'
import { Textarea } from './ui/textarea'

export default function TaskEditor() {
    const router = useRouter()
    const [title, setTitle] = useState('')
    const [description, setDescription] = useState('')
    const [dueDate, setDueDate] = useState('')
    const utils = api.useUtils()

    const createTask = api.task.create.useMutation({
        onSuccess: async (task) => {
            await utils.task.invalidate()
            router.push(`/tasks/${task.id}`)
        },
    })

    const handleSave = () => {
        if (!title || !dueDate) return
        createTask.mutate({
            title,
            description,
            dueDate,
        })
    }

    const handleCancel = () => {
        setTitle('')
        setDescription('')
        setDueDate('')
    }

    return (
        <div className="flex flex-col gap-4 pb-24">
            <h2 className="text-xl font-bold text-neutral-900 dark:text-white">Новая задача</h2>
            <Input
                placeholder="Заголовок задачи"
                value={title}
                onChange={(e) => setTitle(e.target.value)}
            />
            <Textarea
                placeholder="Описание задачи"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
            />
            <Input
                type="datetime-local"
                value={dueDate}
                onChange={(e) => setDueDate(e.target.value)}
            />
            <div className="flex gap-2">
                <Button onClick={handleSave} disabled={createTask.isLoading}>
                    Сохранить
                </Button>
                <Button variant="secondary" onClick={handleCancel}>
                    Отмена
                </Button>
            </div>
        </div>
    )
}