diff options
Diffstat (limited to 'lib/rfqs/cbe-table/invite-vendors-dialog.tsx')
| -rw-r--r-- | lib/rfqs/cbe-table/invite-vendors-dialog.tsx | 423 |
1 files changed, 423 insertions, 0 deletions
diff --git a/lib/rfqs/cbe-table/invite-vendors-dialog.tsx b/lib/rfqs/cbe-table/invite-vendors-dialog.tsx new file mode 100644 index 00000000..18edbe80 --- /dev/null +++ b/lib/rfqs/cbe-table/invite-vendors-dialog.tsx @@ -0,0 +1,423 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" +import { Loader, Send, User } from "lucide-react" +import { toast } from "sonner" +import { z } from "zod" + +import { useMediaQuery } from "@/hooks/use-media-query" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog" +import { + Drawer, + DrawerClose, + DrawerContent, + DrawerDescription, + DrawerFooter, + DrawerHeader, + DrawerTitle, + DrawerTrigger, +} from "@/components/ui/drawer" +import { Input } from "@/components/ui/input" +import { Textarea } from "@/components/ui/textarea" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, + FormDescription, +} from "@/components/ui/form" +import { type Row } from "@tanstack/react-table" +import { Badge } from "@/components/ui/badge" +import { ScrollArea } from "@/components/ui/scroll-area" + +import { VendorWithCbeFields } from "@/config/vendorCbeColumnsConfig" +import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" +import { createCbeEvaluation } from "../service" + +// 컴포넌트 내부에서 사용할 폼 스키마 정의 +const formSchema = z.object({ + paymentTerms: z.string().min(1, "결제 조건을 입력하세요"), + incoterms: z.string().min(1, "Incoterms를 입력하세요"), + deliverySchedule: z.string().min(1, "배송 일정을 입력하세요"), + notes: z.string().optional(), +}) + +type FormValues = z.infer<typeof formSchema> + +interface InviteVendorsDialogProps + extends React.ComponentPropsWithoutRef<typeof Dialog> { + rfqId: number + vendors: Row<VendorWithCbeFields>["original"][] + currentUserId?: number + currentUser?: { + id: string + name?: string | null + email?: string | null + image?: string | null + companyId?: number | null + domain?: string | null + } + showTrigger?: boolean + onSuccess?: () => void +} + +export function InviteVendorsDialog({ + rfqId, + vendors, + currentUserId, + currentUser, + showTrigger = true, + onSuccess, + ...props +}: InviteVendorsDialogProps) { + const [files, setFiles] = React.useState<FileList | null>(null) + const isDesktop = useMediaQuery("(min-width: 640px)") + const [isSubmitting, setIsSubmitting] = React.useState(false) + + // 로컬 스키마와 폼 값을 사용하도록 수정 + const form = useForm<FormValues>({ + resolver: zodResolver(formSchema), + defaultValues: { + paymentTerms: "", + incoterms: "", + deliverySchedule: "", + notes: "", + }, + mode: "onChange", + }) + + // 폼 상태 감시 + const { formState } = form + const isValid = formState.isValid && + !!form.getValues("paymentTerms") && + !!form.getValues("incoterms") && + !!form.getValues("deliverySchedule") + + // 디버깅용 상태 트래킹 + React.useEffect(() => { + const subscription = form.watch((value) => { + // 폼 값이 변경될 때마다 실행되는 콜백 + console.log("Form values changed:", value); + }); + + return () => subscription.unsubscribe(); + }, [form]); + + async function onSubmit(data: FormValues) { + try { + setIsSubmitting(true) + + // 기본 FormData 생성 + const formData = new FormData() + + // rfqId 추가 + formData.append("rfqId", String(rfqId)) + + // 폼 데이터 추가 + Object.entries(data).forEach(([key, value]) => { + if (value !== undefined && value !== null) { + formData.append(key, String(value)) + } + }) + + // 현재 사용자 ID 추가 + if (currentUserId) { + formData.append("evaluatedBy", String(currentUserId)) + } + + // 협력업체 ID만 추가 (서버에서 연락처 정보를 조회) + vendors.forEach((vendor) => { + formData.append("vendorIds[]", String(vendor.vendorId)) + }) + + // 파일 추가 (있는 경우에만) + if (files && files.length > 0) { + for (let i = 0; i < files.length; i++) { + formData.append("files", files[i]) + } + } + + // 서버 액션 호출 + const response = await createCbeEvaluation(formData) + + if (response.error) { + toast.error(response.error) + return + } + + // 성공 처리 + toast.success(`${vendors.length}개 협력업체에 CBE 평가가 성공적으로 전송되었습니다!`) + form.reset() + setFiles(null) + props.onOpenChange?.(false) + onSuccess?.() + } catch (error) { + console.error(error) + toast.error("CBE 평가 생성 중 오류가 발생했습니다.") + } finally { + setIsSubmitting(false) + } + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + setFiles(null) + } + props.onOpenChange?.(nextOpen) + } + + // 필수 필드 라벨에 추가할 요소 + const RequiredLabel = ( + <span className="text-destructive ml-1 font-medium">*</span> + ) + + const formContent = ( + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4"> + {/* 선택된 협력업체 정보 표시 */} + <div className="space-y-2"> + <FormLabel>선택된 협력업체 ({vendors.length})</FormLabel> + <ScrollArea className="h-20 border rounded-md p-2"> + <div className="flex flex-wrap gap-2"> + {vendors.map((vendor, index) => ( + <Badge key={index} variant="secondary" className="py-1"> + {vendor.vendorName || `협력업체 #${vendor.vendorCode}`} + </Badge> + ))} + </div> + </ScrollArea> + <FormDescription> + 선택된 모든 협력업체의 등록된 연락처에게 CBE 평가 알림이 전송됩니다. + </FormDescription> + </div> + + {/* 작성자 정보 (읽기 전용) */} + {currentUser && ( + <div className="border rounded-md p-3 space-y-2"> + <FormLabel>작성자</FormLabel> + <div className="flex items-center gap-3"> + {currentUser.image ? ( + <Avatar className="h-8 w-8"> + <AvatarImage src={currentUser.image} alt={currentUser.name || ""} /> + <AvatarFallback> + {currentUser.name?.charAt(0) || <User className="h-4 w-4" />} + </AvatarFallback> + </Avatar> + ) : ( + <Avatar className="h-8 w-8"> + <AvatarFallback> + {currentUser.name?.charAt(0) || <User className="h-4 w-4" />} + </AvatarFallback> + </Avatar> + )} + <div> + <p className="text-sm font-medium">{currentUser.name || "Unknown User"}</p> + <p className="text-xs text-muted-foreground">{currentUser.email || ""}</p> + </div> + </div> + </div> + )} + + {/* 결제 조건 - 필수 필드 */} + <FormField + control={form.control} + name="paymentTerms" + render={({ field }) => ( + <FormItem> + <FormLabel> + 결제 조건{RequiredLabel} + </FormLabel> + <FormControl> + <Input {...field} placeholder="예: Net 30" /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* Incoterms - 필수 필드 */} + <FormField + control={form.control} + name="incoterms" + render={({ field }) => ( + <FormItem> + <FormLabel> + Incoterms{RequiredLabel} + </FormLabel> + <FormControl> + <Input {...field} placeholder="예: FOB, CIF" /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 배송 일정 - 필수 필드 */} + <FormField + control={form.control} + name="deliverySchedule" + render={({ field }) => ( + <FormItem> + <FormLabel> + 배송 일정{RequiredLabel} + </FormLabel> + <FormControl> + <Textarea + {...field} + placeholder="배송 일정 세부사항을 입력하세요" + rows={3} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 비고 - 선택적 필드 */} + <FormField + control={form.control} + name="notes" + render={({ field }) => ( + <FormItem> + <FormLabel>비고</FormLabel> + <FormControl> + <Textarea + {...field} + placeholder="추가 비고 사항을 입력하세요" + rows={3} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 파일 첨부 (옵션) */} + <div className="space-y-2"> + <FormLabel htmlFor="files">첨부 파일 (선택사항)</FormLabel> + <Input + id="files" + type="file" + multiple + onChange={(e) => setFiles(e.target.files)} + /> + {files && files.length > 0 && ( + <p className="text-sm text-muted-foreground"> + {files.length}개 파일이 첨부되었습니다 + </p> + )} + </div> + + {/* 필수 입력 항목 안내 */} + <div className="text-sm text-muted-foreground"> + <span className="text-destructive">*</span> 표시는 필수 입력 항목입니다. + </div> + + {/* 모바일에서는 Drawer 내부에서 버튼이 렌더링되므로 여기서는 숨김 */} + {isDesktop && ( + <DialogFooter className="gap-2 pt-4"> + <DialogClose asChild> + <Button + type="button" + variant="outline" + > + 취소 + </Button> + </DialogClose> + <Button + type="submit" + disabled={isSubmitting || !isValid} + > + {isSubmitting && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + {vendors.length > 1 ? `${vendors.length}개 협력업체에 전송` : "전송"} + </Button> + </DialogFooter> + )} + </form> + </Form> + ) + + // Desktop Dialog + if (isDesktop) { + return ( + <Dialog {...props} onOpenChange={handleDialogOpenChange}> + {showTrigger ? ( + <DialogTrigger asChild> + <Button variant="outline" size="sm"> + <Send className="mr-2 size-4" aria-hidden="true" /> + CBE 평가 전송 ({vendors.length}) + </Button> + </DialogTrigger> + ) : null} + <DialogContent className="sm:max-w-[600px]"> + <DialogHeader> + <DialogTitle>CBE 평가 생성 및 전송</DialogTitle> + <DialogDescription> + 선택한 {vendors.length}개 협력업체에 대한 상업 입찰 평가를 생성하고 알림을 전송합니다. + </DialogDescription> + </DialogHeader> + + {formContent} + </DialogContent> + </Dialog> + ) + } + + // Mobile Drawer + return ( + <Drawer {...props} onOpenChange={handleDialogOpenChange}> + {showTrigger ? ( + <DrawerTrigger asChild> + <Button variant="outline" size="sm"> + <Send className="mr-2 size-4" aria-hidden="true" /> + CBE 평가 전송 ({vendors.length}) + </Button> + </DrawerTrigger> + ) : null} + <DrawerContent> + <DrawerHeader> + <DrawerTitle>CBE 평가 생성 및 전송</DrawerTitle> + <DrawerDescription> + 선택한 {vendors.length}개 협력업체에 대한 상업 입찰 평가를 생성하고 알림을 전송합니다. + </DrawerDescription> + </DrawerHeader> + + <div className="px-4"> + {formContent} + </div> + + <DrawerFooter className="gap-2 sm:space-x-0"> + <DrawerClose asChild> + <Button variant="outline">취소</Button> + </DrawerClose> + <Button + onClick={form.handleSubmit(onSubmit)} + disabled={isSubmitting || !isValid} + > + {isSubmitting && ( + <Loader className="mr-2 size-4 animate-spin" aria-hidden="true" /> + )} + {vendors.length > 1 ? `${vendors.length}개 협력업체에 전송` : "전송"} + </Button> + </DrawerFooter> + </DrawerContent> + </Drawer> + ) +}
\ No newline at end of file |