284 lines
10 KiB
TypeScript
284 lines
10 KiB
TypeScript
import { useEffect } from "react";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogDescription,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
} from "@/Components/ui/dialog";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Input } from "@/Components/ui/input";
|
||
import { Label } from "@/Components/ui/label";
|
||
import { Textarea } from "@/Components/ui/textarea";
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/Components/ui/select";
|
||
import { useForm } from "@inertiajs/react";
|
||
import { toast } from "sonner";
|
||
import type { Product, Category } from "@/Pages/Product/Index";
|
||
import {
|
||
DropdownMenu,
|
||
DropdownMenuContent,
|
||
DropdownMenuItem,
|
||
DropdownMenuTrigger,
|
||
} from "@/Components/ui/dropdown-menu";
|
||
import { ChevronDown } from "lucide-react";
|
||
|
||
interface ProductDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
product: Product | null;
|
||
categories: Category[];
|
||
onSave?: (product: any) => void; // Legacy prop, can be removed if fully switching to Inertia submit within dialog
|
||
}
|
||
|
||
export default function ProductDialog({
|
||
open,
|
||
onOpenChange,
|
||
product,
|
||
categories,
|
||
}: ProductDialogProps) {
|
||
const { data, setData, post, put, processing, errors, reset, clearErrors } = useForm({
|
||
name: "",
|
||
category_id: "",
|
||
brand: "",
|
||
specification: "",
|
||
base_unit: "公斤",
|
||
large_unit: "",
|
||
conversion_rate: "",
|
||
purchase_unit: "",
|
||
});
|
||
|
||
useEffect(() => {
|
||
if (open) {
|
||
clearErrors();
|
||
if (product) {
|
||
setData({
|
||
name: product.name,
|
||
category_id: product.category_id.toString(),
|
||
brand: product.brand || "",
|
||
specification: product.specification || "",
|
||
base_unit: product.base_unit,
|
||
large_unit: product.large_unit || "",
|
||
conversion_rate: product.conversion_rate ? product.conversion_rate.toString() : "",
|
||
purchase_unit: product.purchase_unit || "",
|
||
});
|
||
} else {
|
||
reset();
|
||
// Set default category if available
|
||
if (categories.length > 0) {
|
||
setData("category_id", categories[0].id.toString());
|
||
}
|
||
}
|
||
}
|
||
}, [open, product, categories]);
|
||
|
||
const handleSubmit = (e: React.FormEvent) => {
|
||
e.preventDefault();
|
||
|
||
if (product) {
|
||
put(route("products.update", product.id), {
|
||
onSuccess: () => {
|
||
toast.success("商品已更新");
|
||
onOpenChange(false);
|
||
reset();
|
||
},
|
||
onError: () => {
|
||
toast.error("更新失敗，請檢查輸入資料");
|
||
}
|
||
});
|
||
} else {
|
||
post(route("products.store"), {
|
||
onSuccess: () => {
|
||
toast.success("商品已新增");
|
||
onOpenChange(false);
|
||
reset();
|
||
},
|
||
onError: () => {
|
||
toast.error("新增失敗，請檢查輸入資料");
|
||
}
|
||
});
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>{product ? "編輯商品" : "新增商品"}</DialogTitle>
|
||
<DialogDescription>
|
||
{product ? "修改商品資料" : "建立新的商品資料"}
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
<form onSubmit={handleSubmit} className="space-y-6 py-4">
|
||
|
||
{/* 基本資訊區塊 */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-medium border-b pb-2">基本資訊</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="category_id">
|
||
分類 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Select
|
||
value={data.category_id}
|
||
onValueChange={(value) => setData("category_id", value)}
|
||
>
|
||
<SelectTrigger id="category_id" className={errors.category_id ? "border-red-500" : ""}>
|
||
<SelectValue placeholder="選擇分類" />
|
||
</SelectTrigger>
|
||
<SelectContent>
|
||
{categories.map((category) => (
|
||
<SelectItem key={category.id} value={category.id.toString()}>
|
||
{category.name}
|
||
</SelectItem>
|
||
))}
|
||
</SelectContent>
|
||
</Select>
|
||
{errors.category_id && <p className="text-sm text-red-500">{errors.category_id}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="name">
|
||
商品名稱 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<Input
|
||
id="name"
|
||
value={data.name}
|
||
onChange={(e) => setData("name", e.target.value)}
|
||
placeholder="例：法國麵粉"
|
||
className={errors.name ? "border-red-500" : ""}
|
||
/>
|
||
{errors.name && <p className="text-sm text-red-500">{errors.name}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="brand">品牌</Label>
|
||
<Input
|
||
id="brand"
|
||
value={data.brand}
|
||
onChange={(e) => setData("brand", e.target.value)}
|
||
placeholder="例：鳥越製粉"
|
||
/>
|
||
{errors.brand && <p className="text-sm text-red-500">{errors.brand}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-2 col-span-2">
|
||
<Label htmlFor="specification">規格描述</Label>
|
||
<Textarea
|
||
id="specification"
|
||
value={data.specification}
|
||
onChange={(e) => setData("specification", e.target.value)}
|
||
placeholder="例：25kg/袋，灰分0.45%"
|
||
className="resize-none"
|
||
/>
|
||
{errors.specification && <p className="text-sm text-red-500">{errors.specification}</p>}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 單位設定區塊 */}
|
||
<div className="space-y-4">
|
||
<h3 className="text-lg font-medium border-b pb-2">單位設定</h3>
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||
<div className="space-y-2">
|
||
<Label htmlFor="base_unit">
|
||
基本庫存單位 <span className="text-red-500">*</span>
|
||
</Label>
|
||
<div className="flex gap-2">
|
||
<Input
|
||
id="base_unit"
|
||
value={data.base_unit}
|
||
onChange={(e) => setData("base_unit", e.target.value)}
|
||
placeholder="可輸入或選擇..."
|
||
className={errors.base_unit ? "border-red-500 flex-1" : "flex-1"}
|
||
/>
|
||
<DropdownMenu>
|
||
<DropdownMenuTrigger asChild>
|
||
<Button variant="outline" size="icon" className="shrink-0">
|
||
<ChevronDown className="h-4 w-4" />
|
||
</Button>
|
||
</DropdownMenuTrigger>
|
||
<DropdownMenuContent align="end">
|
||
{["公斤", "公克", "公升", "毫升", "個", "支", "包", "罐", "瓶", "箱", "袋"].map((u) => (
|
||
<DropdownMenuItem key={u} onClick={() => setData("base_unit", u)}>
|
||
{u}
|
||
</DropdownMenuItem>
|
||
))}
|
||
</DropdownMenuContent>
|
||
</DropdownMenu>
|
||
</div>
|
||
{errors.base_unit && <p className="text-sm text-red-500">{errors.base_unit}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="large_unit">大單位</Label>
|
||
<Input
|
||
id="large_unit"
|
||
value={data.large_unit}
|
||
onChange={(e) => setData("large_unit", e.target.value)}
|
||
placeholder="例：箱、袋"
|
||
/>
|
||
{errors.large_unit && <p className="text-sm text-red-500">{errors.large_unit}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="conversion_rate">
|
||
換算率
|
||
{data.large_unit && <span className="text-red-500">*</span>}
|
||
</Label>
|
||
<Input
|
||
id="conversion_rate"
|
||
type="number"
|
||
step="0.0001"
|
||
value={data.conversion_rate}
|
||
onChange={(e) => setData("conversion_rate", e.target.value)}
|
||
placeholder={data.large_unit ? `1 ${data.large_unit} = ? ${data.base_unit}` : ""}
|
||
disabled={!data.large_unit}
|
||
/>
|
||
{errors.conversion_rate && <p className="text-sm text-red-500">{errors.conversion_rate}</p>}
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="purchase_unit">採購單位</Label>
|
||
<Input
|
||
id="purchase_unit"
|
||
value={data.purchase_unit}
|
||
onChange={(e) => setData("purchase_unit", e.target.value)}
|
||
placeholder="通常同大單位"
|
||
/>
|
||
{errors.purchase_unit && <p className="text-sm text-red-500">{errors.purchase_unit}</p>}
|
||
</div>
|
||
</div>
|
||
|
||
{data.large_unit && data.base_unit && data.conversion_rate && (
|
||
<div className="bg-blue-50 p-3 rounded text-sm text-blue-700">
|
||
預覽：1 {data.large_unit} = {data.conversion_rate} {data.base_unit}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<DialogFooter>
|
||
<Button
|
||
type="button"
|
||
variant="outline"
|
||
onClick={() => onOpenChange(false)}
|
||
className="button-outlined-primary"
|
||
>
|
||
取消
|
||
</Button>
|
||
<Button type="submit" className="button-filled-primary" disabled={processing}>
|
||
{processing ? "儲存... " : (product ? "儲存變更" : "新增")}
|
||
</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
</DialogContent>
|
||
</Dialog >
|
||
);
|
||
} |