diff options
| author | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-09-26 09:57:24 +0000 |
|---|---|---|
| committer | dujinkim <dujin.kim@dtsolution.co.kr> | 2025-09-26 09:57:24 +0000 |
| commit | 8b23b471638a155fd1bfa3a8c853b26d9315b272 (patch) | |
| tree | 47353e9dd342011cb2f1dcd24b09661707a8421b /lib/vendors/contacts-table/edit-contact-dialog.tsx | |
| parent | d62368d2b68d73da895977e60a18f9b1286b0545 (diff) | |
(대표님) 권한관리, 문서업로드, rfq첨부, SWP문서룰 등
(최겸) 입찰
Diffstat (limited to 'lib/vendors/contacts-table/edit-contact-dialog.tsx')
| -rw-r--r-- | lib/vendors/contacts-table/edit-contact-dialog.tsx | 231 |
1 files changed, 231 insertions, 0 deletions
diff --git a/lib/vendors/contacts-table/edit-contact-dialog.tsx b/lib/vendors/contacts-table/edit-contact-dialog.tsx new file mode 100644 index 00000000..e123568e --- /dev/null +++ b/lib/vendors/contacts-table/edit-contact-dialog.tsx @@ -0,0 +1,231 @@ +"use client" + +import * as React from "react" +import { useForm } from "react-hook-form" +import { zodResolver } from "@hookform/resolvers/zod" + +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from "@/components/ui/dialog" +import { Button } from "@/components/ui/button" +import { Input } from "@/components/ui/input" +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" + +import { + updateVendorContactSchema, + type UpdateVendorContactSchema, +} from "../validations" +import { updateVendorContact } from "../service" +import { VendorContact } from "@/db/schema/vendors" + +interface EditContactDialogProps { + contact: VendorContact | null + open: boolean + onOpenChange: (open: boolean) => void + onSuccess: () => void +} + +export function EditContactDialog({ contact, open, onOpenChange, onSuccess }: EditContactDialogProps) { + // 담당업무 옵션 + const taskOptions = [ + { value: "회사대표", label: "회사대표 President/Director" }, + { value: "영업관리", label: "영업관리 Sales Management" }, + { value: "설계/기술", label: "설계/기술 Engineering/Design" }, + { value: "구매", label: "구매 Procurement" }, + { value: "납기/출하/운송", label: "납기/출하/운송 Delivery Control" }, + { value: "PM/생산관리", label: "PM/생산관리 PM/Manufacturing" }, + { value: "품질관리", label: "품질관리 Quality Management" }, + { value: "세금계산서/납품서관리", label: "세금계산서/납품서관리 Shipping Doc. Management" }, + { value: "A/S 관리", label: "A/S 관리 A/S Management" }, + { value: "FSE", label: "FSE(야드작업자) Field Service Engineer" } + ] + + // react-hook-form 세팅 + const form = useForm<UpdateVendorContactSchema>({ + resolver: zodResolver(updateVendorContactSchema), + defaultValues: { + contactName: "", + contactPosition: "", + contactDepartment: "", + contactTask: "", + contactEmail: "", + contactPhone: "", + isPrimary: false, + }, + }) + + // contact가 변경되면 폼 초기화 + React.useEffect(() => { + if (contact) { + form.reset({ + contactName: contact.contactName || "", + contactPosition: contact.contactPosition || "", + contactDepartment: contact.contactDepartment || "", + contactTask: contact.contactTask || "", + contactEmail: contact.contactEmail || "", + contactPhone: contact.contactPhone || "", + isPrimary: contact.isPrimary || false, + }) + } + }, [contact, form]) + + async function onSubmit(data: UpdateVendorContactSchema) { + if (!contact) return + + const result = await updateVendorContact(contact.id, data) + if (result.error) { + alert(`에러: ${result.error}`) + return + } + + // 성공 시 모달 닫고 폼 리셋 + form.reset() + onOpenChange(false) + onSuccess() + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + } + onOpenChange(nextOpen) + } + + if (!contact) return null + + return ( + <Dialog open={open} onOpenChange={handleDialogOpenChange}> + <DialogContent> + <DialogHeader> + <DialogTitle>연락처 수정</DialogTitle> + <DialogDescription> + 연락처 정보를 수정하고 <b>Update</b> 버튼을 누르세요. + </DialogDescription> + </DialogHeader> + + {/* shadcn/ui Form을 이용해 react-hook-form과 연결 */} + <Form {...form}> + <form onSubmit={form.handleSubmit(onSubmit)}> + <div className="space-y-4 py-4"> + <FormField + control={form.control} + name="contactName" + render={({ field }) => ( + <FormItem> + <FormLabel>담당자명</FormLabel> + <FormControl> + <Input placeholder="예: 홍길동" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="contactPosition" + render={({ field }) => ( + <FormItem> + <FormLabel>직급</FormLabel> + <FormControl> + <Input placeholder="예: 과장" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="contactDepartment" + render={({ field }) => ( + <FormItem> + <FormLabel>부서</FormLabel> + <FormControl> + <Input placeholder="예: 영업부" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="contactTask" + render={({ field }) => ( + <FormItem> + <FormLabel>담당업무</FormLabel> + <Select onValueChange={field.onChange} value={field.value || undefined}> + <FormControl> + <SelectTrigger> + <SelectValue placeholder="담당업무를 선택하세요" /> + </SelectTrigger> + </FormControl> + <SelectContent> + {taskOptions.map((option) => ( + <SelectItem key={option.value} value={option.value}> + {option.label} + </SelectItem> + ))} + </SelectContent> + </Select> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="contactEmail" + render={({ field }) => ( + <FormItem> + <FormLabel>이메일</FormLabel> + <FormControl> + <Input placeholder="name@company.com" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + <FormField + control={form.control} + name="contactPhone" + render={({ field }) => ( + <FormItem> + <FormLabel>전화번호</FormLabel> + <FormControl> + <Input placeholder="010-1234-5678" {...field} /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + </div> + + <DialogFooter> + <Button type="button" variant="outline" onClick={() => onOpenChange(false)}> + 취소 + </Button> + <Button type="submit" disabled={form.formState.isSubmitting}> + 수정 + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +} |
