diff options
Diffstat (limited to 'lib/vendors/contacts-table')
| -rw-r--r-- | lib/vendors/contacts-table/add-contact-dialog.tsx | 81 | ||||
| -rw-r--r-- | lib/vendors/contacts-table/contact-table.tsx | 25 | ||||
| -rw-r--r-- | lib/vendors/contacts-table/edit-contact-dialog.tsx | 231 |
3 files changed, 319 insertions, 18 deletions
diff --git a/lib/vendors/contacts-table/add-contact-dialog.tsx b/lib/vendors/contacts-table/add-contact-dialog.tsx index 5376583a..22c557b4 100644 --- a/lib/vendors/contacts-table/add-contact-dialog.tsx +++ b/lib/vendors/contacts-table/add-contact-dialog.tsx @@ -8,6 +8,13 @@ import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, 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, @@ -29,6 +36,20 @@ interface AddContactDialogProps { export function AddContactDialog({ vendorId }: AddContactDialogProps) { const [open, setOpen] = React.useState(false) + // 담당업무 옵션 + 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<CreateVendorContactSchema>({ resolver: zodResolver(createVendorContactSchema), @@ -37,6 +58,8 @@ export function AddContactDialog({ vendorId }: AddContactDialogProps) { vendorId, contactName: "", contactPosition: "", + contactDepartment: "", + contactTask: "", contactEmail: "", contactPhone: "", isPrimary: false, @@ -88,7 +111,7 @@ export function AddContactDialog({ vendorId }: AddContactDialogProps) { name="contactName" render={({ field }) => ( <FormItem> - <FormLabel>Contact Name</FormLabel> + <FormLabel>담당자명</FormLabel> <FormControl> <Input placeholder="예: 홍길동" {...field} /> </FormControl> @@ -102,7 +125,7 @@ export function AddContactDialog({ vendorId }: AddContactDialogProps) { name="contactPosition" render={({ field }) => ( <FormItem> - <FormLabel>Position / Title</FormLabel> + <FormLabel>직급</FormLabel> <FormControl> <Input placeholder="예: 과장" {...field} /> </FormControl> @@ -113,12 +136,12 @@ export function AddContactDialog({ vendorId }: AddContactDialogProps) { <FormField control={form.control} - name="contactEmail" + name="contactDepartment" render={({ field }) => ( <FormItem> - <FormLabel>Email</FormLabel> + <FormLabel>부서</FormLabel> <FormControl> - <Input placeholder="name@company.com" {...field} /> + <Input placeholder="예: 영업부" {...field} /> </FormControl> <FormMessage /> </FormItem> @@ -127,36 +150,58 @@ export function AddContactDialog({ vendorId }: AddContactDialogProps) { <FormField control={form.control} - name="contactPhone" + 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>Phone</FormLabel> + <FormLabel>이메일</FormLabel> <FormControl> - <Input placeholder="010-1234-5678" {...field} /> + <Input placeholder="name@company.com" {...field} /> </FormControl> <FormMessage /> </FormItem> )} /> - {/* 단순 checkbox */} <FormField control={form.control} - name="isPrimary" + name="contactPhone" render={({ field }) => ( <FormItem> - <div className="flex items-center space-x-2 mt-2"> - <input - type="checkbox" - checked={field.value} - onChange={(e) => field.onChange(e.target.checked)} - /> - <FormLabel>Is Primary?</FormLabel> - </div> + <FormLabel>전화번호</FormLabel> + <FormControl> + <Input placeholder="010-1234-5678" {...field} /> + </FormControl> <FormMessage /> </FormItem> )} /> + + </div> <DialogFooter> diff --git a/lib/vendors/contacts-table/contact-table.tsx b/lib/vendors/contacts-table/contact-table.tsx index 2991187e..65b12451 100644 --- a/lib/vendors/contacts-table/contact-table.tsx +++ b/lib/vendors/contacts-table/contact-table.tsx @@ -16,6 +16,7 @@ import { getColumns } from "./contact-table-columns" import { getVendorContacts, } from "../service" import { VendorContact, vendors } from "@/db/schema/vendors" import { VendorsTableToolbarActions } from "./contact-table-toolbar-actions" +import { EditContactDialog } from "./edit-contact-dialog" interface VendorsTableProps { promises: Promise< @@ -33,6 +34,23 @@ export function VendorContactsTable({ promises , vendorId}: VendorsTableProps) { const [{ data, pageCount }] = React.use(promises) const [rowAction, setRowAction] = React.useState<DataTableRowAction<VendorContact> | null>(null) + const [editDialogOpen, setEditDialogOpen] = React.useState(false) + const [selectedContact, setSelectedContact] = React.useState<VendorContact | null>(null) + + // Edit 액션 처리 + React.useEffect(() => { + if (rowAction?.type === "update") { + setSelectedContact(rowAction.row.original) + setEditDialogOpen(true) + setRowAction(null) + } + }, [rowAction]) + + // 데이터 새로고침 함수 + const handleEditSuccess = React.useCallback(() => { + // 페이지를 새로고침하거나 데이터를 다시 가져오기 + window.location.reload() + }, []) // getColumns() 호출 시, router를 주입 const columns = React.useMemo( @@ -82,6 +100,13 @@ export function VendorContactsTable({ promises , vendorId}: VendorsTableProps) { <VendorsTableToolbarActions table={table} vendorId={vendorId} /> </DataTableAdvancedToolbar> </DataTable> + + <EditContactDialog + contact={selectedContact} + open={editDialogOpen} + onOpenChange={setEditDialogOpen} + onSuccess={handleEditSuccess} + /> </> ) }
\ No newline at end of file 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> + ) +} |