313 lines
11 KiB
TypeScript
313 lines
11 KiB
TypeScript
"use client";
|
|
|
|
import { useForm } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod";
|
|
import { z } from "zod";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Label } from "@/components/ui/label";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { FileUpload } from "@/components/common/file-upload";
|
|
import { useRouter } from "next/navigation";
|
|
import { Loader2 } from "lucide-react";
|
|
import { useCreateCorrespondence, useUpdateCorrespondence } from "@/hooks/use-correspondence";
|
|
import { Organization } from "@/types/organization";
|
|
import { useOrganizations, useProjects, useCorrespondenceTypes, useDisciplines } from "@/hooks/use-master-data";
|
|
import { CreateCorrespondenceDto } from "@/types/dto/correspondence/create-correspondence.dto";
|
|
|
|
// Updated Zod Schema with all required fields
|
|
const correspondenceSchema = z.object({
|
|
projectId: z.number().min(1, "Please select a Project"),
|
|
documentTypeId: z.number().min(1, "Please select a Document Type"),
|
|
disciplineId: z.number().optional(),
|
|
subject: z.string().min(5, "Subject must be at least 5 characters"),
|
|
description: z.string().optional(),
|
|
fromOrganizationId: z.number().min(1, "Please select From Organization"),
|
|
toOrganizationId: z.number().min(1, "Please select To Organization"),
|
|
importance: z.enum(["NORMAL", "HIGH", "URGENT"]),
|
|
attachments: z.array(z.instanceof(File)).optional(),
|
|
});
|
|
|
|
type FormData = z.infer<typeof correspondenceSchema>;
|
|
|
|
export function CorrespondenceForm({ initialData, id }: { initialData?: any, id?: number }) {
|
|
const router = useRouter();
|
|
const createMutation = useCreateCorrespondence();
|
|
const updateMutation = useUpdateCorrespondence();
|
|
|
|
// Fetch master data for dropdowns
|
|
const { data: projects, isLoading: isLoadingProjects } = useProjects();
|
|
const { data: organizations, isLoading: isLoadingOrgs } = useOrganizations();
|
|
const { data: correspondenceTypes, isLoading: isLoadingTypes } = useCorrespondenceTypes();
|
|
const { data: disciplines, isLoading: isLoadingDisciplines } = useDisciplines();
|
|
|
|
// Extract initial values if editing
|
|
const currentRev = initialData?.revisions?.find((r: any) => r.isCurrent) || initialData?.revisions?.[0];
|
|
const defaultValues: Partial<FormData> = {
|
|
projectId: initialData?.projectId || undefined,
|
|
documentTypeId: initialData?.correspondenceTypeId || undefined,
|
|
disciplineId: initialData?.disciplineId || undefined,
|
|
subject: currentRev?.title || "",
|
|
description: currentRev?.description || "",
|
|
fromOrganizationId: initialData?.originatorId || undefined,
|
|
toOrganizationId: currentRev?.details?.to_organization_id || undefined,
|
|
importance: currentRev?.details?.importance || "NORMAL",
|
|
};
|
|
|
|
const {
|
|
register,
|
|
handleSubmit,
|
|
setValue,
|
|
watch,
|
|
formState: { errors },
|
|
} = useForm<FormData>({
|
|
resolver: zodResolver(correspondenceSchema),
|
|
defaultValues: defaultValues as any,
|
|
});
|
|
|
|
// Watch for controlled inputs
|
|
const projectId = watch("projectId");
|
|
const documentTypeId = watch("documentTypeId");
|
|
const disciplineId = watch("disciplineId");
|
|
const fromOrgId = watch("fromOrganizationId");
|
|
const toOrgId = watch("toOrganizationId");
|
|
|
|
const onSubmit = (data: FormData) => {
|
|
const payload: CreateCorrespondenceDto = {
|
|
projectId: data.projectId,
|
|
typeId: data.documentTypeId,
|
|
disciplineId: data.disciplineId,
|
|
title: data.subject,
|
|
description: data.description,
|
|
originatorId: data.fromOrganizationId,
|
|
details: {
|
|
to_organization_id: data.toOrganizationId,
|
|
importance: data.importance
|
|
},
|
|
};
|
|
|
|
if (id && initialData) {
|
|
// UPDATE Mode
|
|
updateMutation.mutate({ id, data: payload }, {
|
|
onSuccess: () => router.push(`/correspondences/${id}`)
|
|
});
|
|
} else {
|
|
// CREATE Mode
|
|
createMutation.mutate(payload, {
|
|
onSuccess: () => router.push("/correspondences"),
|
|
});
|
|
}
|
|
};
|
|
|
|
const isPending = createMutation.isPending || updateMutation.isPending;
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit(onSubmit)} className="max-w-3xl space-y-6">
|
|
{/* Document Metadata Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
{/* Project Dropdown */}
|
|
<div className="space-y-2">
|
|
<Label>Project *</Label>
|
|
<Select
|
|
onValueChange={(v) => setValue("projectId", parseInt(v))}
|
|
value={projectId ? String(projectId) : undefined}
|
|
disabled={isLoadingProjects}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={isLoadingProjects ? "Loading..." : "Select Project"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(projects || []).map((p: any) => (
|
|
<SelectItem key={p.id} value={String(p.id)}>
|
|
{p.projectName} ({p.projectCode})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.projectId && (
|
|
<p className="text-sm text-destructive">{errors.projectId.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Document Type Dropdown */}
|
|
<div className="space-y-2">
|
|
<Label>Document Type *</Label>
|
|
<Select
|
|
onValueChange={(v) => setValue("documentTypeId", parseInt(v))}
|
|
value={documentTypeId ? String(documentTypeId) : undefined}
|
|
disabled={isLoadingTypes}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={isLoadingTypes ? "Loading..." : "Select Type"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(correspondenceTypes || []).map((t: any) => (
|
|
<SelectItem key={t.id} value={String(t.id)}>
|
|
{t.typeName} ({t.typeCode})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.documentTypeId && (
|
|
<p className="text-sm text-destructive">{errors.documentTypeId.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Discipline Dropdown (Optional) */}
|
|
<div className="space-y-2">
|
|
<Label>Discipline</Label>
|
|
<Select
|
|
onValueChange={(v) => setValue("disciplineId", v ? parseInt(v) : undefined)}
|
|
value={disciplineId ? String(disciplineId) : undefined}
|
|
disabled={isLoadingDisciplines}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={isLoadingDisciplines ? "Loading..." : "Select Discipline (Optional)"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(disciplines || []).map((d: any) => (
|
|
<SelectItem key={d.id} value={String(d.id)}>
|
|
{d.codeNameEn || d.disciplineCode}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Subject */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="subject">Subject *</Label>
|
|
<Input id="subject" {...register("subject")} placeholder="Enter subject" />
|
|
{errors.subject && (
|
|
<p className="text-sm text-destructive">{errors.subject.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Description */}
|
|
<div className="space-y-2">
|
|
<Label htmlFor="description">Description</Label>
|
|
<Textarea
|
|
id="description"
|
|
{...register("description")}
|
|
rows={4}
|
|
placeholder="Enter description details..."
|
|
/>
|
|
</div>
|
|
|
|
{/* Organizations */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div className="space-y-2">
|
|
<Label>From Organization *</Label>
|
|
<Select
|
|
onValueChange={(v) => setValue("fromOrganizationId", parseInt(v))}
|
|
value={fromOrgId ? String(fromOrgId) : undefined}
|
|
disabled={isLoadingOrgs}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={isLoadingOrgs ? "Loading..." : "Select Organization"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(organizations || []).map((org: Organization) => (
|
|
<SelectItem key={org.id} value={String(org.id)}>
|
|
{org.organizationName} ({org.organizationCode})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.fromOrganizationId && (
|
|
<p className="text-sm text-destructive">{errors.fromOrganizationId.message}</p>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-2">
|
|
<Label>To Organization *</Label>
|
|
<Select
|
|
onValueChange={(v) => setValue("toOrganizationId", parseInt(v))}
|
|
value={toOrgId ? String(toOrgId) : undefined}
|
|
disabled={isLoadingOrgs}
|
|
>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={isLoadingOrgs ? "Loading..." : "Select Organization"} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{(organizations || []).map((org: Organization) => (
|
|
<SelectItem key={org.id} value={String(org.id)}>
|
|
{org.organizationName} ({org.organizationCode})
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
{errors.toOrganizationId && (
|
|
<p className="text-sm text-destructive">{errors.toOrganizationId.message}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Importance */}
|
|
<div className="space-y-2">
|
|
<Label>Importance</Label>
|
|
<div className="flex gap-6 mt-2">
|
|
<label className="flex items-center space-x-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
value="NORMAL"
|
|
{...register("importance")}
|
|
className="accent-primary"
|
|
/>
|
|
<span>Normal</span>
|
|
</label>
|
|
<label className="flex items-center space-x-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
value="HIGH"
|
|
{...register("importance")}
|
|
className="accent-primary"
|
|
/>
|
|
<span>High</span>
|
|
</label>
|
|
<label className="flex items-center space-x-2 cursor-pointer">
|
|
<input
|
|
type="radio"
|
|
value="URGENT"
|
|
{...register("importance")}
|
|
className="accent-primary"
|
|
/>
|
|
<span>Urgent</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Attachments (only for new documents) */}
|
|
{!initialData && (
|
|
<div className="space-y-2">
|
|
<Label>Attachments</Label>
|
|
<FileUpload
|
|
onFilesSelected={(files) => setValue("attachments", files)}
|
|
maxFiles={10}
|
|
accept=".pdf,.doc,.docx,.xls,.xlsx,.jpg,.png"
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex justify-end gap-4 pt-6 border-t">
|
|
<Button type="button" variant="outline" onClick={() => router.back()}>
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={isPending}>
|
|
{isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
|
{id ? "Update Correspondence" : "Create Correspondence"}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
);
|
|
}
|