From 14f61e24947fb92dd71ec0a7196a6e815f8e66da Mon Sep 17 00:00:00 2001
From: dujinkim <dujin.kim@dtsolution.co.kr>
Date: Mon, 21 Jul 2025 07:54:26 +0000
Subject: (최겸)기술영업 RFQ 담당자 초대, 요구사항 반영
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../possible-items/add-item-dialog.tsx             | 284 +++++++++++++++++++++
 1 file changed, 284 insertions(+)
 create mode 100644 lib/tech-vendors/possible-items/add-item-dialog.tsx

(limited to 'lib/tech-vendors/possible-items/add-item-dialog.tsx')

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
-- 
cgit v1.2.3