star-erp/resources/js/Components/Vendor/VendorFormDialog.tsx

/**
 * 廠商新增/編輯表單對話框
 */

import { useEffect, useState } from "react";
import { Button } from "@/Components/ui/button";
import { Input } from "@/Components/ui/input";
import { Label } from "@/Components/ui/label";
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogDescription,
    DialogFooter,
} from "@/Components/ui/dialog";
import type { Supplier, SupplierFormData } from "@/types/vendor";

interface VendorFormDialogProps {
    open: boolean;
    supplier: Supplier | null;
    onClose: () => void;
    onSave: (data: SupplierFormData) => void;
}

const initialFormData: SupplierFormData = {
    name: "",
    contact: "",
    phone: "",
    email: "",
};

export default function VendorFormDialog({
    open,
    supplier,
    onClose,
    onSave,
}: VendorFormDialogProps) {
    const [formData, setFormData] = useState<SupplierFormData>(initialFormData);
    const isEditing = !!supplier;

    useEffect(() => {
        if (supplier) {
            setFormData({
                name: supplier.name,
                contact: supplier.contact || "",
                phone: supplier.phone || "",
                email: supplier.email || "",
            });
        } else {
            setFormData(initialFormData);
        }
    }, [supplier, open]);

    const handleSave = () => {
        onSave(formData);
        setFormData(initialFormData);
    };

    const handleCancel = () => {
        onClose();
        setFormData(initialFormData);
    };

    return (
        <Dialog open={open} onOpenChange={onClose}>
            <DialogContent className="max-w-2xl">
                <DialogHeader>
                    <DialogTitle>{isEditing ? "編輯廠商" : "新增廠商"}</DialogTitle>
                    <DialogDescription>
                        {isEditing ? "編輯供應商的詳細資料。" : "新增供應商的詳細資料。"}
                    </DialogDescription>
                </DialogHeader>

                <div className="space-y-6">
                    <div>
                        <h3 className="mb-4">基本資料</h3>
                        <div className="space-y-4">
                            <div>
                                <Label className="text-muted-foreground text-xs">廠商名稱</Label>
                                <Input
                                    placeholder="輸入廠商名稱"
                                    value={formData.name}
                                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                                    className="mt-1"
                                />
                            </div>
                            <div>
                                <Label className="text-muted-foreground text-xs">聯絡人</Label>
                                <Input
                                    placeholder="輸入聯絡人姓名"
                                    value={formData.contact}
                                    onChange={(e) => setFormData({ ...formData, contact: e.target.value })}
                                    className="mt-1"
                                />
                            </div>
                            <div>
                                <Label className="text-muted-foreground text-xs">聯絡電話</Label>
                                <Input
                                    placeholder="例：02-1234-5678"
                                    value={formData.phone}
                                    onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                                    className="mt-1"
                                />
                            </div>
                            <div>
                                <Label className="text-muted-foreground text-xs">Email</Label>
                                <Input
                                    type="email"
                                    placeholder="例：vendor@example.com"
                                    value={formData.email}
                                    onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                                    className="mt-1"
                                />
                            </div>
                        </div>
                    </div>
                </div>

                <DialogFooter>
                    <Button
                        variant="outline"
                        size="sm"
                        onClick={handleCancel}
                        className="gap-2 button-outlined-primary"
                    >
                        取消
                    </Button>
                    <Button
                        size="sm"
                        onClick={handleSave}
                        className="gap-2 button-filled-primary"
                    >
                        儲存
                    </Button>
                </DialogFooter>
            </DialogContent>
        </Dialog>
    );
}