284 lines
12 KiB
TypeScript
284 lines
12 KiB
TypeScript
/**
|
||
* 新增安全庫存對話框（兩步驟）
|
||
*/
|
||
|
||
import { useState } from "react";
|
||
import { Search, ChevronRight, ChevronLeft } from "lucide-react";
|
||
import {
|
||
Dialog,
|
||
DialogContent,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogFooter,
|
||
DialogDescription,
|
||
} from "@/Components/ui/dialog";
|
||
import { Button } from "@/Components/ui/button";
|
||
import { Input } from "@/Components/ui/input";
|
||
import { Label } from "@/Components/ui/label";
|
||
import { Checkbox } from "@/Components/ui/checkbox";
|
||
import { SafetyStockSetting, Product } from "@/types/warehouse";
|
||
import { toast } from "sonner";
|
||
import { Badge } from "@/Components/ui/badge";
|
||
|
||
interface AddSafetyStockDialogProps {
|
||
open: boolean;
|
||
onOpenChange: (open: boolean) => void;
|
||
warehouseId: string;
|
||
existingSettings: SafetyStockSetting[];
|
||
availableProducts: Product[];
|
||
onAdd: (settings: SafetyStockSetting[]) => void;
|
||
}
|
||
|
||
export default function AddSafetyStockDialog({
|
||
open,
|
||
onOpenChange,
|
||
warehouseId,
|
||
existingSettings,
|
||
availableProducts,
|
||
onAdd,
|
||
}: AddSafetyStockDialogProps) {
|
||
const [step, setStep] = useState<1 | 2>(1);
|
||
const [searchTerm, setSearchTerm] = useState("");
|
||
const [selectedProducts, setSelectedProducts] = useState<Set<string>>(new Set());
|
||
const [productQuantities, setProductQuantities] = useState<Map<string, number>>(new Map());
|
||
|
||
// 重置對話框
|
||
const resetDialog = () => {
|
||
setStep(1);
|
||
setSearchTerm("");
|
||
setSelectedProducts(new Set());
|
||
setProductQuantities(new Map());
|
||
};
|
||
|
||
// 關閉對話框
|
||
const handleClose = () => {
|
||
resetDialog();
|
||
onOpenChange(false);
|
||
};
|
||
|
||
// 已設定的商品 ID
|
||
const existingProductIds = new Set(existingSettings.map((s) => s.productId));
|
||
|
||
// 可選擇的商品（排除已設定的）
|
||
const selectableProducts = availableProducts.filter(
|
||
(p) => !existingProductIds.has(p.id)
|
||
);
|
||
|
||
// 篩選後的商品
|
||
const filteredProducts = selectableProducts.filter(
|
||
(p) =>
|
||
p.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||
p.type.includes(searchTerm)
|
||
);
|
||
|
||
// 切換商品選擇
|
||
const toggleProduct = (productId: string) => {
|
||
const newSet = new Set(selectedProducts);
|
||
if (newSet.has(productId)) {
|
||
newSet.delete(productId);
|
||
// 同時移除數量設定
|
||
const newQuantities = new Map(productQuantities);
|
||
newQuantities.delete(productId);
|
||
setProductQuantities(newQuantities);
|
||
} else {
|
||
newSet.add(productId);
|
||
// 預設數量
|
||
const newQuantities = new Map(productQuantities);
|
||
if (!newQuantities.has(productId)) {
|
||
newQuantities.set(productId, 10);
|
||
}
|
||
setProductQuantities(newQuantities);
|
||
}
|
||
setSelectedProducts(newSet);
|
||
};
|
||
|
||
// 更新商品安全庫存量
|
||
const updateQuantity = (productId: string, value: number) => {
|
||
const newQuantities = new Map(productQuantities);
|
||
newQuantities.set(productId, value); // Allow 0
|
||
setProductQuantities(newQuantities);
|
||
};
|
||
|
||
// 前往步驟 2
|
||
const goToStep2 = () => {
|
||
if (selectedProducts.size === 0) {
|
||
toast.error("請至少選擇一個商品");
|
||
return;
|
||
}
|
||
setStep(2);
|
||
};
|
||
|
||
// 提交
|
||
const handleSubmit = () => {
|
||
// 驗證所有商品都已輸入數量
|
||
const missingQuantity = Array.from(selectedProducts).some(
|
||
(productId) => !productQuantities.has(productId) || (productQuantities.get(productId) ?? -1) < 0
|
||
);
|
||
|
||
if (missingQuantity) {
|
||
toast.error("請為所有商品設定安全庫存量");
|
||
return;
|
||
}
|
||
|
||
// 創建安全庫存設定
|
||
const newSettings: SafetyStockSetting[] = Array.from(selectedProducts).map((productId) => {
|
||
const product = availableProducts.find((p) => p.id === productId)!;
|
||
return {
|
||
id: `ss-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
|
||
warehouseId,
|
||
productId,
|
||
productName: product.name,
|
||
productType: product.type,
|
||
safetyStock: productQuantities.get(productId) || 0,
|
||
createdAt: new Date().toISOString(),
|
||
updatedAt: new Date().toISOString(),
|
||
};
|
||
});
|
||
|
||
onAdd(newSettings);
|
||
// toast.success(`成功新增 ${newSettings.length} 項安全庫存設定`); // 父組件已處理
|
||
handleClose();
|
||
};
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={handleClose}>
|
||
<DialogContent className="max-w-2xl">
|
||
<DialogHeader>
|
||
<DialogTitle>
|
||
新增安全庫存 - 步驟 {step}/2
|
||
</DialogTitle>
|
||
<DialogDescription>
|
||
請選擇商品並設定安全庫存量。
|
||
</DialogDescription>
|
||
</DialogHeader>
|
||
|
||
{step === 1 ? (
|
||
// 步驟 1：選擇商品
|
||
<div className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label>選擇商品（可多選）</Label>
|
||
<div className="relative">
|
||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||
<Input
|
||
placeholder="搜尋商品名稱或類型..."
|
||
value={searchTerm}
|
||
onChange={(e) => setSearchTerm(e.target.value)}
|
||
className="pl-10 button-outlined-primary"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="border rounded-lg max-h-96 overflow-y-auto">
|
||
{filteredProducts.length === 0 ? (
|
||
<div className="p-8 text-center text-gray-400">
|
||
{selectableProducts.length === 0
|
||
? "所有商品都已設定安全庫存"
|
||
: "無符合條件的商品"}
|
||
</div>
|
||
) : (
|
||
<div className="divide-y">
|
||
{filteredProducts.map((product) => {
|
||
const isSelected = selectedProducts.has(product.id);
|
||
return (
|
||
<div
|
||
key={product.id}
|
||
className={`p-4 flex items-center gap-3 hover:bg-gray-50 cursor-pointer transition-colors ${isSelected ? "bg-blue-50" : ""
|
||
}`}
|
||
onClick={() => toggleProduct(product.id)}
|
||
>
|
||
<Checkbox
|
||
checked={isSelected}
|
||
onCheckedChange={() => toggleProduct(product.id)}
|
||
/>
|
||
<div className="flex-1">
|
||
<div className="font-medium">{product.name}</div>
|
||
</div>
|
||
<Badge variant="outline">{product.type}</Badge>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
<div className="text-sm text-gray-600">
|
||
已選擇 {selectedProducts.size} 項商品
|
||
</div>
|
||
</div>
|
||
) : (
|
||
// 步驟 2：設定安全庫存量
|
||
<div className="space-y-4">
|
||
<p className="text-sm text-gray-600">
|
||
為每個商品設定安全庫存量（共 {selectedProducts.size} 項）
|
||
</p>
|
||
|
||
<div className="border rounded-lg max-h-96 overflow-y-auto">
|
||
<div className="divide-y">
|
||
{Array.from(selectedProducts).map((productId) => {
|
||
const product = availableProducts.find((p) => p.id === productId)!;
|
||
const quantity = productQuantities.get(productId) || 0;
|
||
|
||
return (
|
||
<div key={productId} className="p-4 space-y-2">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<span className="font-medium">{product.name}</span>
|
||
<Badge variant="outline">{product.type}</Badge>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<div className="flex-1 flex items-center gap-2">
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
step="1"
|
||
value={quantity || ""}
|
||
onChange={(e) =>
|
||
updateQuantity(productId, parseFloat(e.target.value) || 0)
|
||
}
|
||
placeholder="請輸入數量"
|
||
className="flex-1 button-outlined-primary"
|
||
/>
|
||
<span className="text-sm text-gray-500 w-12">{product.unit || '個'}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
<DialogFooter>
|
||
{step === 1 ? (
|
||
<>
|
||
<Button variant="outline" onClick={handleClose} className="button-outlined-primary">
|
||
取消
|
||
</Button>
|
||
<Button
|
||
onClick={goToStep2}
|
||
disabled={selectedProducts.size === 0}
|
||
className="button-filled-primary"
|
||
>
|
||
下一步
|
||
<ChevronRight className="ml-2 h-4 w-4" />
|
||
</Button>
|
||
</>
|
||
) : (
|
||
<>
|
||
<Button variant="outline" onClick={() => setStep(1)} className="button-outlined-primary">
|
||
<ChevronLeft className="mr-2 h-4 w-4" />
|
||
上一步
|
||
</Button>
|
||
<Button onClick={handleSubmit} className="button-filled-primary">
|
||
確認新增
|
||
</Button>
|
||
</>
|
||
)}
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
}
|