import { Head, Link, useForm } from '@inertiajs/react'; import { useMemo, useState } from 'react'; import { ConflictCheckWidget } from '@/components/conflict-check-widget'; import InputError from '@/components/input-error'; import { PageHeader } from '@/components/page-header'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import { Spinner } from '@/components/ui/spinner'; import { index, show, store, update } from '@/routes/clients'; type Option = { value: number | string; label: string }; type Client = { id: string; client_number: string; status: string; relationship_partner_id: number | null; contact_name: string; }; const NONE = 'none'; export default function ClientForm({ client, contacts, partners, statuses, }: { client: Client | null; contacts: Option[]; partners: Option[]; statuses: Option[]; }) { const editing = client !== null; const [mode, setMode] = useState<'new' | 'existing'>('new'); const form = useForm({ contact_id: null as number | null, contact: { kind: 'organization', name: '', email: '', phone: '', rc_number: '', }, relationship_partner_id: client?.relationship_partner_id ?? null, status: client?.status ?? 'active', }); const checkName = useMemo(() => { if (editing) { return client!.contact_name; } if (mode === 'new') { return form.data.contact.name; } const selected = contacts.find((c) => c.value === form.data.contact_id); return selected?.label ?? ''; }, [ editing, client, mode, form.data.contact.name, form.data.contact_id, contacts, ]); const submit = (e: React.FormEvent) => { e.preventDefault(); if (editing) { form.transform((d) => ({ status: d.status, relationship_partner_id: d.relationship_partner_id, })); form.put(update(client.id).url, { preserveScroll: true }); return; } form.transform((d) => mode === 'new' ? { contact: d.contact, relationship_partner_id: d.relationship_partner_id, status: d.status, } : { contact_id: d.contact_id, relationship_partner_id: d.relationship_partner_id, status: d.status, }, ); form.post(store().url, { preserveScroll: true }); }; return ( <>
} />
{!editing && ( Contact
{mode === 'existing' ? (
) : (
form.setData( 'contact', { ...form.data .contact, name: e.target .value, }, ) } required />
form.setData( 'contact', { ...form.data .contact, email: e.target .value, }, ) } />
form.setData( 'contact', { ...form.data .contact, phone: e.target .value, }, ) } />
)} )} Client details
); }