diff options
Diffstat (limited to 'lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx')
| -rw-r--r-- | lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx | 241 |
1 files changed, 73 insertions, 168 deletions
diff --git a/lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx b/lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx index d401f1cd..5bb8a16a 100644 --- a/lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx +++ b/lib/vendor-rfq-response/vendor-rfq-table/comments-sheet.tsx @@ -4,7 +4,7 @@ import * as React from "react" import { useForm, useFieldArray } from "react-hook-form" import { z } from "zod" import { zodResolver } from "@hookform/resolvers/zod" -import { Loader, Download, X } from "lucide-react" +import { Download, X, Loader2 } from "lucide-react" import prettyBytes from "pretty-bytes" import { toast } from "sonner" @@ -26,150 +26,107 @@ import { FormLabel, FormMessage, } from "@/components/ui/form" -import { - Textarea, -} from "@/components/ui/textarea" - +import { Textarea } from "@/components/ui/textarea" import { Dropzone, DropzoneZone, DropzoneUploadIcon, DropzoneTitle, DropzoneDescription, - DropzoneInput + DropzoneInput, } from "@/components/ui/dropzone" - import { Table, TableHeader, TableRow, TableHead, TableBody, - TableCell + TableCell, } from "@/components/ui/table" -// DB 스키마에서 필요한 타입들을 가져온다고 가정 -import { RfqWithAll } from "../types" - -import { createRfqCommentWithAttachments, updateRfqComment } from "../../rfqs/service" import { formatDate } from "@/lib/utils" +import { createRfqCommentWithAttachments } from "@/lib/rfqs/service" -// 코멘트 + 첨부파일 구조 (단순 예시) -// 실제 DB 스키마에 맞춰 조정 -export interface RfqComment { + +export interface MatchedVendorComment { id: number commentText: string commentedBy?: number - createdAt?: Date + commentedByEmail?: string + createdAt?: Date attachments?: { id: number fileName: string - filePath?: string + filePath: string }[] } +// 1) props 정의 interface CommentSheetProps extends React.ComponentPropsWithRef<typeof Sheet> { - /** 코멘트를 작성할 RFQ 정보 */ - /** 이미 존재하는 모든 코멘트 목록 (서버에서 불러와 주입) */ - initialComments?: RfqComment[] - - /** 사용자(작성자) ID (로그인 세션 등에서 가져옴) */ + initialComments?: MatchedVendorComment[] currentUserId: number - rfq:RfqWithAll - /** 댓글 저장 후 갱신용 콜백 (옵션) */ - onCommentsUpdated?: (comments: RfqComment[]) => void + rfqId: number + vendorId: number + onCommentsUpdated?: (comments: MatchedVendorComment[]) => void + isLoading?: boolean // New prop } -// 새 코멘트 작성 폼 스키마 +// 2) 폼 스키마 const commentFormSchema = z.object({ commentText: z.string().min(1, "댓글을 입력하세요."), - newFiles: z.array(z.any()).optional() // File[] + newFiles: z.array(z.any()).optional(), // File[] }) type CommentFormValues = z.infer<typeof commentFormSchema> const MAX_FILE_SIZE = 30e6 // 30MB export function CommentSheet({ - rfq, + rfqId, + vendorId, initialComments = [], currentUserId, onCommentsUpdated, + isLoading = false, // Default to false ...props }: CommentSheetProps) { - const [comments, setComments] = React.useState<RfqComment[]>(initialComments) + + console.log(initialComments) + + const [comments, setComments] = React.useState<MatchedVendorComment[]>(initialComments) const [isPending, startTransition] = React.useTransition() React.useEffect(() => { setComments(initialComments) }, [initialComments]) - - // RHF 세팅 + const form = useForm<CommentFormValues>({ resolver: zodResolver(commentFormSchema), defaultValues: { commentText: "", - newFiles: [] - } + newFiles: [], + }, }) - // formFieldArray 예시 (파일 목록) const { fields: newFileFields, append, remove } = useFieldArray({ control: form.control, - name: "newFiles" + name: "newFiles", }) - // 1) 기존 코멘트 + 첨부 보여주기 - // 간단히 테이블 하나로 표현 - // 실제로는 Bubble 형태의 UI, Accordion, Timeline 등 다양하게 구성할 수 있음 + // (A) 기존 코멘트 렌더링 function renderExistingComments() { - // 1) 편집 상태 관리 - const [editingId, setEditingId] = React.useState<number | null>(null) - const [editText, setEditText] = React.useState("") - - // 2) Edit 시작 핸들러 - function handleEditClick(c: RfqComment) { - setEditingId(c.id) - setEditText(c.commentText) - } - - // 3) Save 핸들러 - async function handleSave(commentId: number) { - try { - // (예시) 서버 액션 or API 요청 - await updateRfqComment({ commentId, commentText: editText }) - - // 만약 단순 로컬 수정만 할 거라면, - // parent state의 comments를 갱신하는 로직 필요 - setComments((prev) => - prev.map((comment) => - comment.id === commentId - ? { ...comment, commentText: editText } - : comment - ) - ) - - toast.success("Comment updated.") - } catch (err) { - toast.error("Error updating comment.") - } finally { - // 편집 모드 종료 - setEditingId(null) - setEditText("") - } - } - - // 4) Cancel 핸들러 - function handleCancel() { - setEditingId(null) - setEditText("") + + if (isLoading) { + return ( + <div className="flex justify-center items-center h-32"> + <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" /> + <span className="ml-2 text-sm text-muted-foreground">Loading comments...</span> + </div> + ) } - - // 만약 comments가 비어 있다면 + if (comments.length === 0) { return <p className="text-sm text-muted-foreground">No comments yet</p> } - - // 5) 테이블 렌더링 return ( <Table> <TableHeader> @@ -178,42 +135,22 @@ export function CommentSheet({ <TableHead>Attachments</TableHead> <TableHead>Created At</TableHead> <TableHead>Created By</TableHead> - - {/* 추가된 Actions 컬럼 */} - <TableHead>Actions</TableHead> </TableRow> </TableHeader> <TableBody> - {comments.map((c) => ( + {comments.map((c) => ( <TableRow key={c.id}> - {/* 1) Comment 셀 */} + <TableCell>{c.commentText}</TableCell> <TableCell> - {/* 현재 행이 editing 모드인지 체크 */} - {editingId === c.id ? ( - // 편집 모드 - <textarea - value={editText} - onChange={(e) => setEditText(e.target.value)} - className="w-full border p-1 rounded" - rows={3} - /> - ) : ( - // 일반 모드 - c.commentText - )} - </TableCell> - - {/* 2) Attachments 셀 (기존과 동일) */} - <TableCell> - {(!c.attachments || c.attachments.length === 0) && ( + {!c.attachments?.length && ( <span className="text-sm text-muted-foreground">No files</span> )} - {c.attachments && c.attachments.length > 0 && ( + {c.attachments?.length && ( <div className="flex flex-col gap-1"> {c.attachments.map((att) => ( <div key={att.id} className="flex items-center gap-2"> <a - href={att.filePath} + href={`/api/rfq-download?path=${encodeURIComponent(att.filePath)}`} download target="_blank" rel="noreferrer" @@ -227,32 +164,8 @@ export function CommentSheet({ </div> )} </TableCell> - - {/* 3) Created At */} <TableCell> { c.createdAt ? formatDate(c.createdAt): "-"}</TableCell> - - {/* 4) Created By */} - <TableCell>{c.commentedBy ?? "-"}</TableCell> - - {/* 5) 새로 추가된 Actions */} - <TableCell> - {editingId === c.id ? ( - // 편집 중일 때 - <div className="flex gap-2"> - <Button variant="outline" size="sm" onClick={() => handleSave(c.id)}> - Save - </Button> - <Button variant="ghost" size="sm" onClick={handleCancel}> - Cancel - </Button> - </div> - ) : ( - // 일반 상태 - <Button variant="outline" size="sm" onClick={() => handleEditClick(c)}> - Edit - </Button> - )} - </TableCell> + <TableCell>{c.commentedByEmail ?? "-"}</TableCell> </TableRow> ))} </TableBody> @@ -260,28 +173,24 @@ export function CommentSheet({ ) } - // 2) 새 파일 Drop + // (B) 파일 드롭 function handleDropAccepted(files: File[]) { - // 드롭된 File[]을 RHF field array에 추가 - const toAppend = files.map((f) => f) - append(toAppend) + append(files) } - - // 3) 저장(Submit) + // (C) Submit async function onSubmit(data: CommentFormValues) { - - if (!rfq) return + if (!rfqId) return startTransition(async () => { try { - // 서버 액션 호출 const res = await createRfqCommentWithAttachments({ - rfqId: rfq.id, - vendorId: rfq.vendorId, // 필요시 세팅 + rfqId, + vendorId, commentText: data.commentText, commentedBy: currentUserId, - evaluationId: null, // 필요시 세팅 - files: data.newFiles + evaluationId: null, + cbeId: null, + files: data.newFiles, }) if (!res.ok) { @@ -290,22 +199,22 @@ export function CommentSheet({ toast.success("Comment created") - // 새 코멘트를 다시 불러오거나, - // 여기서는 임시로 "새로운 코멘트가 추가됐다" 라고 가정하여 클라이언트에서 상태 업데이트 - const newComment: RfqComment = { - id: res.commentId, // 서버에서 반환된 commentId + // 임시로 새 코멘트 추가 + const newComment: MatchedVendorComment = { + id: res.commentId, // 서버 응답 commentText: data.commentText, commentedBy: currentUserId, createdAt: res.createdAt, - attachments: (data.newFiles?.map((f, idx) => ({ - id: Math.random() * 100000, - fileName: f.name, - })) || []) + attachments: + data.newFiles?.map((f) => ({ + id: Math.floor(Math.random() * 1e6), + fileName: f.name, + filePath: "/uploads/" + f.name, + })) || [], } setComments((prev) => [...prev, newComment]) onCommentsUpdated?.([...comments, newComment]) - // 폼 리셋 form.reset() } catch (err: any) { console.error(err) @@ -324,12 +233,8 @@ export function CommentSheet({ </SheetDescription> </SheetHeader> - {/* 기존 코멘트 목록 */} - <div className="max-h-[300px] overflow-y-auto"> - {renderExistingComments()} - </div> + <div className="max-h-[300px] overflow-y-auto">{renderExistingComments()}</div> - {/* 새 코멘트 작성 Form */} <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-4"> <FormField @@ -339,17 +244,13 @@ export function CommentSheet({ <FormItem> <FormLabel>New Comment</FormLabel> <FormControl> - <Textarea - placeholder="Enter your comment..." - {...field} - /> + <Textarea placeholder="Enter your comment..." {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> - {/* Dropzone (파일 첨부) */} <Dropzone maxSize={MAX_FILE_SIZE} onDropAccepted={handleDropAccepted} @@ -373,15 +274,19 @@ export function CommentSheet({ )} </Dropzone> - {/* 선택된 파일 목록 */} {newFileFields.length > 0 && ( <div className="flex flex-col gap-2"> {newFileFields.map((field, idx) => { const file = form.getValues(`newFiles.${idx}`) if (!file) return null return ( - <div key={field.id} className="flex items-center justify-between border rounded p-2"> - <span className="text-sm">{file.name} ({prettyBytes(file.size)})</span> + <div + key={field.id} + className="flex items-center justify-between border rounded p-2" + > + <span className="text-sm"> + {file.name} ({prettyBytes(file.size)}) + </span> <Button variant="ghost" size="icon" @@ -403,7 +308,7 @@ export function CommentSheet({ </Button> </SheetClose> <Button disabled={isPending}> - {isPending && <Loader className="mr-2 h-4 w-4 animate-spin" />} + {isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />} Save </Button> </SheetFooter> |