import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, router } from '@inertiajs/react'; import { Card, CardContent, CardFooter, CardHeader, CardTitle, } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import InputError from '@/components/input-error'; import { Button, buttonVariants } from '@/components/ui/button'; import { Label } from '@/components/ui/label'; import { FormEventHandler, useRef, useState } from 'react'; import { type Task } from '@/types'; import { toast } from 'sonner'; import ImageUpload from '@/components/ImageUpload'; type EditTaskForm = { name: string; image: File | string | null; images: File[] | string[] | null; }; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Task Edit', href: '/task/edit' }, ]; export default function Edit({ task }: { task: Task }) { const taskName = useRef(null); const [data, setData] = useState({ name: task.name ?? '', image: task.image ?? null, images: null, // Note: You'll likely need to parse existing multiple images from `task` similar to `image` depending on your backend }); const [errors, setErrors] = useState<{ name?: string; image?: string; images?: string }>({}); const [processing, setProcessing] = useState(false); const editTask: FormEventHandler = (e) => { e.preventDefault(); setProcessing(true); setErrors({}); const formData = new FormData(); formData.append('name', data.name); if (data.image instanceof File) { formData.append('image', data.image); } if (Array.isArray(data.images)) { data.images.forEach((file) => { if (file instanceof File) { formData.append('images[]', file); } }); } formData.append('_method', 'PUT'); router.post(route('task.update', task.id), formData, { preserveScroll: true, onSuccess: () => { setData({ ...data, image: null }); toast.success('Task updated successfully.'); }, onError: (err) => { setErrors(err); if (err.name) taskName.current?.focus(); }, onFinish: () => setProcessing(false), }); }; return (
Task List
Edit Task
setData({ ...data, name: e.target.value })} placeholder="Name of your task" disabled={processing} />
setData({ ...data, image: file as File | null }) } className="" />
setData({ ...data, images: files as File[] | null }) } className="" />
Cancel
); }