import AppLayout from '@/layouts/app-layout'; import { type BreadcrumbItem } from '@/types'; import { Head, Link, useForm } 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 } from 'react'; import { toast } from 'sonner'; type SubTopicInput = { name: string; }; type EditTopicForm = { topic: string; sub_topics: SubTopicInput[]; }; interface TopicData { id: number; name: string; sub_topics: { id: number; name: string }[]; } const breadcrumbs: BreadcrumbItem[] = [ { title: 'Topics', href: '/topic' }, { title: 'Edit', href: '#' }, ]; export default function Edit({ topic }: { topic: TopicData }) { const topicInput = useRef(null); const initialSubTopics = topic.sub_topics && topic.sub_topics.length > 0 ? topic.sub_topics.map(s => ({ name: s.name })) : [{ name: '' }]; const { data, setData, errors, put, processing } = useForm({ topic: topic.name ?? '', sub_topics: initialSubTopics, }); const addSubTopic = () => { setData('sub_topics', [...data.sub_topics, { name: '' }]); }; const removeSubTopic = (index: number) => { const newSubTopics = [...data.sub_topics]; newSubTopics.splice(index, 1); setData('sub_topics', newSubTopics); }; const handleSubTopicChange = (index: number, val: string) => { const newSubTopics = [...data.sub_topics]; newSubTopics[index].name = val; setData('sub_topics', newSubTopics); }; const editTopic: FormEventHandler = (e) => { e.preventDefault(); put(route('topic.update', topic.id), { preserveScroll: true, onSuccess: () => { toast.success('Topic updated successfully.'); }, onError: (errs) => { if (errs.topic) { topicInput.current?.focus(); } } }); }; return (

Topic List

Edit Topic

{/* Topic Name Field */}

Topic Name setData('topic', e.target.value)} placeholder="Enter the topic name" disabled={processing} />

{/* Dynamic Sub Topics */}

Sub Topics

{/* General sub_topics error */}

{data.sub_topics.map((sub, index) => (

handleSubTopicChange(index, e.target.value)} placeholder={`Sub Topic ${index + 1}`} disabled={processing} className="flex-1" />

{/* Error for specific sub topic field */}

))}

); }