82 lines
3.2 KiB
TypeScript
82 lines
3.2 KiB
TypeScript
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
|
|
import { Head, Link, useForm } from '@inertiajs/react';
|
|
import { Button } from '@/Components/ui/button';
|
|
import { ArrowLeft, Save } from 'lucide-react';
|
|
import { PageProps } from '@/types';
|
|
import { FormEvent } from 'react';
|
|
import { ProjectForm, ProjectFormData } from '../../Components/ProjectForm';
|
|
|
|
interface Employee { id: number; ulid: string; name: string }
|
|
interface ProjectData {
|
|
id: number; ulid: string; name: string; code: string;
|
|
description?: string; client_name?: string; location?: string;
|
|
contract_value: string; contract_duration?: number;
|
|
start_date?: string; target_end_date?: string;
|
|
personnel?: { id: number; ulid: string; name: string; pivot?: { role: string } }[];
|
|
}
|
|
|
|
interface Props extends PageProps {
|
|
project: ProjectData;
|
|
employees: Employee[];
|
|
}
|
|
|
|
export default function Edit({ project, employees }: Props) {
|
|
const pm = project.personnel?.find(p => p.pivot?.role === 'pm');
|
|
|
|
const { data, setData, put, processing, errors } = useForm<ProjectFormData>({
|
|
name: project.name,
|
|
client_name: project.client_name || '',
|
|
location: project.location || '',
|
|
start_date: project.start_date || '',
|
|
target_end_date: project.target_end_date || '',
|
|
contract_duration: project.contract_duration != null ? String(project.contract_duration) : '',
|
|
description: project.description || '',
|
|
pm_id: pm?.ulid || '',
|
|
contract_value: project.contract_value || '',
|
|
});
|
|
|
|
const handleSubmit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
put(route('projects.update', project.ulid));
|
|
};
|
|
|
|
return (
|
|
<AuthenticatedLayout
|
|
header={
|
|
<div className="flex items-center gap-4">
|
|
<Link href={route('projects.show', project.ulid)}>
|
|
<Button variant="ghost" size="icon-sm"><ArrowLeft className="h-4 w-4" /></Button>
|
|
</Link>
|
|
<h2 className="text-xl font-semibold leading-tight text-gray-800">
|
|
Edit: {project.name}
|
|
</h2>
|
|
</div>
|
|
}
|
|
>
|
|
<Head title={`Edit ${project.name}`} />
|
|
|
|
<div className="py-6">
|
|
<div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
|
|
<form onSubmit={handleSubmit}>
|
|
<ProjectForm
|
|
data={data}
|
|
setData={setData}
|
|
errors={errors}
|
|
employees={employees}
|
|
/>
|
|
|
|
<div className="mt-6 flex justify-end gap-3">
|
|
<Link href={route('projects.show', project.ulid)}>
|
|
<Button variant="outline" type="button">Cancel</Button>
|
|
</Link>
|
|
<Button type="submit" disabled={processing}>
|
|
<Save className="mr-2 h-4 w-4" /> Update Project
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
);
|
|
}
|