diff options
Diffstat (limited to 'lib/tech-vendors/possible-items/add-item-dialog.tsx')
| -rw-r--r-- | lib/tech-vendors/possible-items/add-item-dialog.tsx | 284 |
1 files changed, 284 insertions, 0 deletions
diff --git a/lib/tech-vendors/possible-items/add-item-dialog.tsx b/lib/tech-vendors/possible-items/add-item-dialog.tsx new file mode 100644 index 00000000..ef15a5ce --- /dev/null +++ b/lib/tech-vendors/possible-items/add-item-dialog.tsx @@ -0,0 +1,284 @@ +"use client";
+
+import * as React from "react";
+import { Search, X } from "lucide-react";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogDescription,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Badge } from "@/components/ui/badge";
+import {
+ getItemsForTechVendor,
+ addTechVendorPossibleItem
+} from "../service";
+
+interface ItemData {
+ id: number;
+ itemCode: string | null;
+ itemList: string | null;
+ workType: string | null;
+ shipTypes?: string | null;
+ subItemList?: string | null;
+ createdAt: Date;
+ updatedAt: Date;
+}
+
+interface AddItemDialogProps {
+ open: boolean;
+ onOpenChange: (open: boolean) => void;
+ vendorId: number;
+}
+
+export function AddItemDialog({ open, onOpenChange, vendorId }: AddItemDialogProps) {
+ // 아이템 관련 상태
+ const [items, setItems] = React.useState<ItemData[]>([]);
+ const [filteredItems, setFilteredItems] = React.useState<ItemData[]>([]);
+ const [itemSearch, setItemSearch] = React.useState("");
+ const [selectedItems, setSelectedItems] = React.useState<ItemData[]>([]);
+
+ const [isLoading, setIsLoading] = React.useState(false);
+
+ // 다이얼로그가 열릴 때 아이템 목록 로드
+ React.useEffect(() => {
+ if (open && vendorId) {
+ loadItems();
+ }
+ }, [open, vendorId]);
+
+ // 아이템 검색 필터링
+ React.useEffect(() => {
+ if (!itemSearch) {
+ setFilteredItems(items);
+ } else {
+ const filtered = items.filter(item =>
+ item.itemCode?.toLowerCase().includes(itemSearch.toLowerCase()) ||
+ item.itemList?.toLowerCase().includes(itemSearch.toLowerCase()) ||
+ item.workType?.toLowerCase().includes(itemSearch.toLowerCase())
+ );
+ setFilteredItems(filtered);
+ }
+ }, [items, itemSearch]);
+
+ const loadItems = async () => {
+ try {
+ setIsLoading(true);
+ console.log("Loading items for vendor:", vendorId);
+ const result = await getItemsForTechVendor(vendorId);
+
+ if (result.error) {
+ throw new Error(result.error);
+ }
+
+ console.log("Loaded items:", result.data.length, result.data);
+ // itemCode가 null이 아닌 항목만 필터링
+ const validItems = result.data.filter(item => item.itemCode != null);
+ setItems(validItems);
+ } catch (error) {
+ console.error("Failed to load items:", error);
+ toast.error("아이템 목록을 불러오는데 실패했습니다.");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleItemToggle = (item: ItemData) => {
+ if (!item.itemCode) return; // itemCode가 null인 경우 처리하지 않음
+
+ setSelectedItems(prev => {
+ // itemCode + shipTypes 조합으로 중복 체크
+ const isSelected = prev.some(i =>
+ i.itemCode === item.itemCode && i.shipTypes === item.shipTypes
+ );
+ if (isSelected) {
+ return prev.filter(i =>
+ !(i.itemCode === item.itemCode && i.shipTypes === item.shipTypes)
+ );
+ } else {
+ return [...prev, item];
+ }
+ });
+ };
+
+ const handleSubmit = async () => {
+ if (selectedItems.length === 0) return;
+
+ try {
+ setIsLoading(true);
+ let successCount = 0;
+ let errorCount = 0;
+
+ for (const item of selectedItems) {
+ if (!item.itemCode) continue; // itemCode가 null인 경우 건너뛰기
+
+ const result = await addTechVendorPossibleItem({
+ vendorId: vendorId,
+ itemCode: item.itemCode,
+ workType: item.workType || undefined,
+ shipTypes: item.shipTypes || undefined,
+ itemList: item.itemList || undefined,
+ subItemList: item.subItemList || undefined,
+ });
+
+ if (result.success) {
+ successCount++;
+ } else {
+ errorCount++;
+ console.error("Failed to add item:", item.itemCode, result.error);
+ }
+ }
+
+ if (successCount > 0) {
+ toast.success(
+ `${successCount}개의 아이템이 추가되었습니다.${
+ errorCount > 0 ? ` (${errorCount}개 실패)` : ""
+ }`
+ );
+
+ handleClose();
+ } else {
+ toast.error("아이템 추가에 실패했습니다.");
+ }
+ } catch (error) {
+ console.error("Failed to add items:", error);
+ toast.error("아이템 추가 중 오류가 발생했습니다.");
+ } finally {
+ setIsLoading(false);
+ }
+ };
+
+ const handleClose = () => {
+ onOpenChange(false);
+ setTimeout(() => {
+ setSelectedItems([]);
+ setItemSearch("");
+ setItems([]);
+ setFilteredItems([]);
+ }, 200);
+ };
+
+ return (
+ <Dialog open={open} onOpenChange={onOpenChange}>
+ <DialogContent className="max-w-4xl max-h-[90vh] flex flex-col">
+ <DialogHeader>
+ <DialogTitle>아이템 추가</DialogTitle>
+ <DialogDescription>
+ 추가할 아이템을 선택하세요. 복수 선택이 가능합니다.
+ </DialogDescription>
+ </DialogHeader>
+
+ <div className="flex-1 min-h-0 space-y-4">
+ {/* 검색 */}
+ <div className="space-y-2">
+ <Label htmlFor="item-search">아이템 검색</Label>
+ <div className="relative">
+ <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
+ <Input
+ id="item-search"
+ placeholder="아이템코드, 아이템리스트, 공종으로 검색..."
+ value={itemSearch}
+ onChange={(e) => setItemSearch(e.target.value)}
+ className="pl-10"
+ />
+ </div>
+ </div>
+
+ {/* 선택된 아이템 표시 */}
+ {selectedItems.length > 0 && (
+ <div className="space-y-2">
+ <Label>선택된 아이템 ({selectedItems.length}개)</Label>
+ <div className="flex flex-wrap gap-1 p-2 border rounded-md bg-muted/50 max-h-20 overflow-y-auto">
+ {selectedItems.map((item) => {
+ if (!item.itemCode) return null;
+ const itemKey = `${item.itemCode}${item.shipTypes ? `-${item.shipTypes}` : ''}`;
+ return (
+ <Badge key={`selected-${itemKey}`} variant="default" className="text-xs">
+ {itemKey}
+ <X
+ className="ml-1 h-3 w-3 cursor-pointer"
+ onClick={(e) => {
+ e.stopPropagation();
+ handleItemToggle(item);
+ }}
+ />
+ </Badge>
+ );
+ })}
+ </div>
+ </div>
+ )}
+
+ {/* 아이템 목록 */}
+ <div className="max-h-96 overflow-y-auto border rounded-lg bg-gray-50 p-2">
+ <div className="space-y-2">
+ {isLoading ? (
+ <div className="text-center py-4">아이템 로딩 중...</div>
+ ) : filteredItems.length === 0 && items.length === 0 ? (
+ <div className="text-center py-4 text-muted-foreground">
+ 해당 벤더 타입에 대한 추가 가능한 아이템이 없습니다.
+ </div>
+ ) : filteredItems.length === 0 ? (
+ <div className="text-center py-4 text-muted-foreground">
+ 검색 결과가 없습니다.
+ </div>
+ ) : (
+ filteredItems.map((item) => {
+ if (!item.itemCode) return null; // itemCode가 null인 경우 렌더링하지 않음
+
+ // itemCode + shipTypes 조합으로 선택 여부 체크
+ const isSelected = selectedItems.some(i =>
+ i.itemCode === item.itemCode && i.shipTypes === item.shipTypes
+ );
+ const itemKey = `${item.itemCode}${item.shipTypes ? `-${item.shipTypes}` : ''}`;
+
+ return (
+ <div
+ key={`item-${itemKey}`}
+ className={`p-3 bg-white border rounded-lg cursor-pointer transition-colors ${
+ isSelected
+ ? "bg-primary/10 border-primary hover:bg-primary/20"
+ : "hover:bg-gray-50"
+ }`}
+ onClick={() => handleItemToggle(item)}
+ >
+ <div className="font-medium">
+ {itemKey}
+ </div>
+ <div className="text-sm text-muted-foreground">
+ {item.itemList || "-"}
+ </div>
+ <div className="flex gap-2 mt-1 text-xs">
+ <span>공종: {item.workType || "-"}</span>
+ {item.shipTypes && <span>선종: {item.shipTypes}</span>}
+ {item.subItemList && <span>서브아이템: {item.subItemList}</span>}
+ </div>
+ </div>
+ );
+ })
+ )}
+ </div>
+ </div>
+ </div>
+
+ <div className="flex justify-end gap-2 pt-4 border-t">
+ <Button variant="outline" onClick={handleClose}>
+ 취소
+ </Button>
+ <Button
+ onClick={handleSubmit}
+ disabled={selectedItems.length === 0 || isLoading}
+ >
+ {isLoading ? "추가 중..." : `추가 (${selectedItems.length})`}
+ </Button>
+ </div>
+ </DialogContent>
+ </Dialog>
+ );
+}
\ No newline at end of file |