summaryrefslogtreecommitdiff
path: root/lib/tech-vendors/items-table/add-item-dialog.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/tech-vendors/items-table/add-item-dialog.tsx')
-rw-r--r--lib/tech-vendors/items-table/add-item-dialog.tsx317
1 files changed, 317 insertions, 0 deletions
diff --git a/lib/tech-vendors/items-table/add-item-dialog.tsx b/lib/tech-vendors/items-table/add-item-dialog.tsx
new file mode 100644
index 00000000..bd1c32f5
--- /dev/null
+++ b/lib/tech-vendors/items-table/add-item-dialog.tsx
@@ -0,0 +1,317 @@
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Check, ChevronsUpDown } from "lucide-react"
+import { useRouter } from "next/navigation"
+
+import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+ Form,
+ FormControl,
+ FormField,
+ FormItem,
+ FormLabel,
+} from "@/components/ui/form"
+import {
+ Popover,
+ PopoverContent,
+ PopoverTrigger,
+} from "@/components/ui/popover"
+import {
+ Command,
+ CommandEmpty,
+ CommandGroup,
+ CommandInput,
+ CommandItem,
+ CommandList,
+} from "@/components/ui/command"
+import { cn } from "@/lib/utils"
+import { toast } from "sonner"
+
+import {
+ createTechVendorItemSchema,
+ type CreateTechVendorItemSchema,
+} from "@/lib/tech-vendors/validations"
+
+import { createTechVendorItem, getItemsByVendorType, ItemDropdownOption } from "../service"
+
+interface AddItemDialogProps {
+ vendorId: number
+ vendorType: string
+}
+
+export function AddItemDialog({ vendorId, vendorType }: AddItemDialogProps) {
+ const router = useRouter()
+ const [open, setOpen] = React.useState(false)
+ const [commandOpen, setCommandOpen] = React.useState(false)
+ const [items, setItems] = React.useState<ItemDropdownOption[]>([])
+ const [filteredItems, setFilteredItems] = React.useState<ItemDropdownOption[]>([])
+ const [isLoading, setIsLoading] = React.useState(false)
+ const [searchTerm, setSearchTerm] = React.useState("")
+
+ const [selectedItem, setSelectedItem] = React.useState<{
+ itemName: string;
+ description: string;
+ } | null>(null)
+
+ const form = useForm<CreateTechVendorItemSchema>({
+ resolver: zodResolver(createTechVendorItemSchema),
+ defaultValues: {
+ vendorId,
+ itemCode: "",
+ },
+ })
+
+ const fetchItems = React.useCallback(async () => {
+ if (items.length > 0) return
+
+ console.log(`[AddItemDialog] fetchItems - 벤더 타입: ${vendorType || '알 수 없음'}, 벤더 ID: ${vendorId} 시작`)
+
+ if (!vendorType) {
+ console.error("[AddItemDialog] 벤더 타입이 지정되지 않았습니다. 아이템을 불러올 수 없습니다.")
+ toast.error("벤더 타입이 지정되지 않아 아이템을 불러올 수 없습니다.")
+ setIsLoading(false)
+ return
+ }
+
+ setIsLoading(true)
+ try {
+ console.log(`[AddItemDialog] getItemsByVendorType 호출 - 타입: ${vendorType}`)
+ const result = await getItemsByVendorType(vendorType, "")
+ console.log(`[AddItemDialog] getItemsByVendorType 결과:`, result)
+
+ if (result.data) {
+ const formattedItems = result.data.map(item => ({
+ itemCode: item.itemCode,
+ itemName: "기술영업",
+ description: ""
+ }))
+ console.log(`[AddItemDialog] 포맷된 아이템 목록:`, formattedItems)
+ setItems(formattedItems)
+ setFilteredItems(formattedItems)
+ }
+ } catch (err) {
+ console.error("[AddItemDialog] 아이템 조회 실패:", err)
+ toast.error("아이템 목록을 불러오는데 실패했습니다.")
+ } finally {
+ setIsLoading(false)
+ console.log(`[AddItemDialog] fetchItems 완료`)
+ }
+ }, [items.length, vendorType, vendorId])
+
+ React.useEffect(() => {
+ if (commandOpen) {
+ console.log(`[AddItemDialog] Popover 열림 - fetchItems 호출`)
+ fetchItems()
+ }
+ }, [commandOpen, fetchItems])
+
+ React.useEffect(() => {
+ if (!items.length) return
+
+ if (!searchTerm.trim()) {
+ setFilteredItems(items)
+ return
+ }
+
+ console.log(`[AddItemDialog] 검색어로 필터링: "${searchTerm}"`)
+ const lowerSearch = searchTerm.toLowerCase()
+ const filtered = items.filter(item =>
+ item.itemCode.toLowerCase().includes(lowerSearch) ||
+ item.itemName.toLowerCase().includes(lowerSearch) ||
+ (item.description && item.description.toLowerCase().includes(lowerSearch))
+ )
+
+ console.log(`[AddItemDialog] 필터링 결과: ${filtered.length}개 아이템`)
+ setFilteredItems(filtered)
+ }, [searchTerm, items])
+
+ const handleSelectItem = (item: ItemDropdownOption) => {
+ console.log(`[AddItemDialog] 아이템 선택: ${item.itemCode}`)
+ form.setValue("itemCode", item.itemCode, { shouldValidate: true })
+ setSelectedItem({
+ itemName: item.itemName,
+ description: item.description || "",
+ })
+ console.log(`[AddItemDialog] 선택된 아이템 정보:`, {
+ itemCode: item.itemCode,
+ itemName: item.itemName,
+ description: item.description || ""
+ })
+ setCommandOpen(false)
+ }
+
+ async function onSubmit(data: CreateTechVendorItemSchema) {
+ console.log(`[AddItemDialog] 폼 제출 시작 - 데이터:`, data)
+ try {
+ if (!data.itemCode) {
+ console.error(`[AddItemDialog] itemCode가 없습니다.`)
+ toast.error("아이템을 선택해주세요.")
+ return
+ }
+
+ console.log(`[AddItemDialog] createTechVendorItem 호출 - vendorId: ${data.vendorId}, itemCode: ${data.itemCode}`)
+ const submitData = {
+ ...data,
+ itemName: "기술영업"
+ }
+ console.log(`[AddItemDialog] 최종 제출 데이터:`, submitData)
+
+ const result = await createTechVendorItem(submitData)
+ console.log(`[AddItemDialog] createTechVendorItem 결과:`, result)
+
+ if (result.error) {
+ console.error(`[AddItemDialog] 추가 실패:`, result.error)
+ toast.error(result.error)
+ return
+ }
+
+ console.log(`[AddItemDialog] 아이템 추가 성공`)
+ toast.success("아이템이 추가되었습니다.")
+ form.reset()
+ setSelectedItem(null)
+ setOpen(false)
+ console.log(`[AddItemDialog] 화면 새로고침 시작`)
+ router.refresh()
+ console.log(`[AddItemDialog] 화면 새로고침 완료`)
+ } catch (err) {
+ console.error("[AddItemDialog] 아이템 추가 오류:", err)
+ toast.error("아이템 추가 중 오류가 발생했습니다.")
+ }
+ }
+
+ function handleDialogOpenChange(nextOpen: boolean) {
+ console.log(`[AddItemDialog] 다이얼로그 상태 변경: ${nextOpen ? '열림' : '닫힘'}`)
+ if (!nextOpen) {
+ form.reset()
+ setSelectedItem(null)
+ }
+ setOpen(nextOpen)
+ }
+
+ const selectedItemCode = form.watch("itemCode")
+ console.log(`[AddItemDialog] 현재 선택된 itemCode:`, selectedItemCode)
+ const displayItemName = selectedItem?.itemName || ""
+
+ return (
+ <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+ <DialogTrigger asChild>
+ <Button variant="default" size="sm">
+ Add Item
+ </Button>
+ </DialogTrigger>
+
+ <DialogContent className="max-h-[90vh] overflow-hidden flex flex-col">
+ <DialogHeader>
+ <DialogTitle>Create New Item</DialogTitle>
+ <DialogDescription>
+ 아이템을 선택한 후 <b>Create</b> 버튼을 누르세요.
+ </DialogDescription>
+ </DialogHeader>
+
+ <Form {...form}>
+ <form onSubmit={(e) => {
+ console.log(`[AddItemDialog] 폼 제출 이벤트 발생`)
+ form.handleSubmit(onSubmit)(e)
+ }} className="flex flex-col flex-1 overflow-hidden">
+ <div className="space-y-4 py-4 flex-1 overflow-y-auto">
+ <div>
+ <FormLabel className="text-sm font-medium">아이템 선택</FormLabel>
+ <Popover open={commandOpen} onOpenChange={setCommandOpen}>
+ <PopoverTrigger asChild>
+ <Button
+ variant="outline"
+ role="combobox"
+ aria-expanded={commandOpen}
+ className="w-full justify-between mt-1"
+ >
+ {selectedItemCode
+ ? `${selectedItemCode} - ${displayItemName}`
+ : "아이템 선택..."}
+ <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+ </Button>
+ </PopoverTrigger>
+ <PopoverContent className="w-[400px] p-0">
+ <Command>
+ <CommandInput
+ placeholder="아이템 코드/이름 검색..."
+ onValueChange={setSearchTerm}
+ />
+ <CommandList className="max-h-[200px]">
+ <CommandEmpty>검색 결과가 없습니다</CommandEmpty>
+ {isLoading ? (
+ <div className="py-6 text-center text-sm">로딩 중...</div>
+ ) : (
+ <CommandGroup>
+ {filteredItems.map((item) => (
+ <CommandItem
+ key={item.itemCode}
+ value={`${item.itemCode} ${item.itemName}`}
+ onSelect={() => handleSelectItem(item)}
+ >
+ <Check
+ className={cn(
+ "mr-2 h-4 w-4",
+ selectedItemCode === item.itemCode
+ ? "opacity-100"
+ : "opacity-0"
+ )}
+ />
+ <span className="font-medium">{item.itemCode}</span>
+ <span className="ml-2 text-gray-500 truncate">- {item.itemName}</span>
+ </CommandItem>
+ ))}
+ </CommandGroup>
+ )}
+ </CommandList>
+ </Command>
+ </PopoverContent>
+ </Popover>
+ </div>
+
+ {selectedItem && (
+ <div className="rounded-md border p-3 mt-4 overflow-hidden">
+ <h3 className="font-medium text-sm mb-2">선택된 아이템 정보</h3>
+
+ <FormField
+ control={form.control}
+ name="itemCode"
+ render={({ field }) => (
+ <FormItem className="hidden">
+ <FormControl>
+ <Input {...field} />
+ </FormControl>
+ </FormItem>
+ )}
+ />
+
+ <div className="mb-2">
+ <div className="text-sm font-medium text-gray-500">Item Name</div>
+ <div className="text-sm">{selectedItem.itemName}</div>
+ </div>
+
+ {selectedItem.description && (
+ <div>
+ <div className="text-sm font-medium text-gray-500">Description</div>
+ <div className="text-sm">{selectedItem.description}</div>
+ </div>
+ )}
+ </div>
+ )}
+ </div>
+
+ <DialogFooter className="pt-4 border-t">
+ <Button type="submit" disabled={!selectedItemCode}>
+ Create
+ </Button>
+ </DialogFooter>
+ </form>
+ </Form>
+ </DialogContent>
+ </Dialog>
+ )
+} \ No newline at end of file
generated by cgit v1.2.3 (git 2.39.1) at 2025-12-07 21:54:50 +0000