summaryrefslogtreecommitdiff
path: root/lib/tech-vendors/contacts-table/add-contact-dialog.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'lib/tech-vendors/contacts-table/add-contact-dialog.tsx')
-rw-r--r--lib/tech-vendors/contacts-table/add-contact-dialog.tsx390
1 files changed, 195 insertions, 195 deletions
diff --git a/lib/tech-vendors/contacts-table/add-contact-dialog.tsx b/lib/tech-vendors/contacts-table/add-contact-dialog.tsx
index ff845e20..93ea6761 100644
--- a/lib/tech-vendors/contacts-table/add-contact-dialog.tsx
+++ b/lib/tech-vendors/contacts-table/add-contact-dialog.tsx
@@ -1,196 +1,196 @@
-"use client"
-
-import * as React from "react"
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-
-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,
- FormMessage,
-} from "@/components/ui/form"
-
-import {
- createTechVendorContactSchema,
- type CreateTechVendorContactSchema,
-} from "@/lib/tech-vendors/validations"
-import { createTechVendorContact } from "@/lib/tech-vendors/service"
-
-interface AddContactDialogProps {
- vendorId: number
-}
-
-export function AddContactDialog({ vendorId }: AddContactDialogProps) {
- const [open, setOpen] = React.useState(false)
-
- // react-hook-form 세팅
- const form = useForm<CreateTechVendorContactSchema>({
- resolver: zodResolver(createTechVendorContactSchema),
- defaultValues: {
- // vendorId는 form에 표시할 필요가 없다면 hidden으로 관리하거나, submit 시 추가
- vendorId,
- contactName: "",
- contactPosition: "",
- contactEmail: "",
- contactPhone: "",
- country: "",
- isPrimary: false,
- },
- })
-
- async function onSubmit(data: CreateTechVendorContactSchema) {
- // 혹은 여기서 data.vendorId = vendorId; 해줘도 됨
- const result = await createTechVendorContact(data)
- if (result.error) {
- alert(`에러: ${result.error}`)
- return
- }
-
- // 성공 시 메시지 표시
- if (result.data?.message) {
- alert(result.data.message)
- }
-
- // 성공 시 모달 닫고 폼 리셋
- form.reset()
- setOpen(false)
- }
-
- function handleDialogOpenChange(nextOpen: boolean) {
- if (!nextOpen) {
- form.reset()
- }
- setOpen(nextOpen)
- }
-
- return (
- <Dialog open={open} onOpenChange={handleDialogOpenChange}>
- {/* 모달을 열기 위한 버튼 */}
- <DialogTrigger asChild>
- <Button variant="default" size="sm">
- Add Contact
- </Button>
- </DialogTrigger>
-
- <DialogContent>
- <DialogHeader>
- <DialogTitle>Create New Contact</DialogTitle>
- <DialogDescription>
- 새 Contact 정보를 입력하고 <b>Create</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>Contact Name</FormLabel>
- <FormControl>
- <Input placeholder="예: 홍길동" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- <FormField
- control={form.control}
- name="contactPosition"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Position / Title</FormLabel>
- <FormControl>
- <Input placeholder="예: 과장" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- <FormField
- control={form.control}
- name="contactEmail"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Email</FormLabel>
- <FormControl>
- <Input placeholder="name@company.com" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- <FormField
- control={form.control}
- name="contactPhone"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Phone</FormLabel>
- <FormControl>
- <Input placeholder="010-1234-5678" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- <FormField
- control={form.control}
- name="country"
- render={({ field }) => (
- <FormItem>
- <FormLabel>Country</FormLabel>
- <FormControl>
- <Input placeholder="예: Korea" {...field} />
- </FormControl>
- <FormMessage />
- </FormItem>
- )}
- />
-
- {/* 단순 checkbox */}
- <FormField
- control={form.control}
- name="isPrimary"
- 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>
- <FormMessage />
- </FormItem>
- )}
- />
- </div>
-
- <DialogFooter>
- <Button type="button" variant="outline" onClick={() => setOpen(false)}>
- Cancel
- </Button>
- <Button type="submit" disabled={form.formState.isSubmitting}>
- Create
- </Button>
- </DialogFooter>
- </form>
- </Form>
- </DialogContent>
- </Dialog>
- )
+"use client"
+
+import * as React from "react"
+import { useForm } from "react-hook-form"
+import { zodResolver } from "@hookform/resolvers/zod"
+
+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,
+ FormMessage,
+} from "@/components/ui/form"
+
+import {
+ createTechVendorContactSchema,
+ type CreateTechVendorContactSchema,
+} from "@/lib/tech-vendors/validations"
+import { createTechVendorContact } from "@/lib/tech-vendors/service"
+
+interface AddContactDialogProps {
+ vendorId: number
+}
+
+export function AddContactDialog({ vendorId }: AddContactDialogProps) {
+ const [open, setOpen] = React.useState(false)
+
+ // react-hook-form 세팅
+ const form = useForm<CreateTechVendorContactSchema>({
+ resolver: zodResolver(createTechVendorContactSchema),
+ defaultValues: {
+ // vendorId는 form에 표시할 필요가 없다면 hidden으로 관리하거나, submit 시 추가
+ vendorId,
+ contactName: "",
+ contactPosition: "",
+ contactEmail: "",
+ contactPhone: "",
+ contactCountry: "",
+ isPrimary: false,
+ },
+ })
+
+ async function onSubmit(data: CreateTechVendorContactSchema) {
+ // 혹은 여기서 data.vendorId = vendorId; 해줘도 됨
+ const result = await createTechVendorContact(data)
+ if (result.error) {
+ alert(`에러: ${result.error}`)
+ return
+ }
+
+ // 성공 시 메시지 표시
+ if (result.data?.message) {
+ alert(result.data.message)
+ }
+
+ // 성공 시 모달 닫고 폼 리셋
+ form.reset()
+ setOpen(false)
+ }
+
+ function handleDialogOpenChange(nextOpen: boolean) {
+ if (!nextOpen) {
+ form.reset()
+ }
+ setOpen(nextOpen)
+ }
+
+ return (
+ <Dialog open={open} onOpenChange={handleDialogOpenChange}>
+ {/* 모달을 열기 위한 버튼 */}
+ <DialogTrigger asChild>
+ <Button variant="default" size="sm">
+ Add Contact
+ </Button>
+ </DialogTrigger>
+
+ <DialogContent>
+ <DialogHeader>
+ <DialogTitle>Create New Contact</DialogTitle>
+ <DialogDescription>
+ 새 Contact 정보를 입력하고 <b>Create</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>Contact Name</FormLabel>
+ <FormControl>
+ <Input placeholder="예: 홍길동" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="contactPosition"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Position / Title</FormLabel>
+ <FormControl>
+ <Input placeholder="예: 과장" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="contactEmail"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Email</FormLabel>
+ <FormControl>
+ <Input placeholder="name@company.com" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="contactPhone"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Phone</FormLabel>
+ <FormControl>
+ <Input placeholder="010-1234-5678" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="contactCountry"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel>Contact Country</FormLabel>
+ <FormControl>
+ <Input placeholder="예: Korea" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ {/* 단순 checkbox */}
+ <FormField
+ control={form.control}
+ name="isPrimary"
+ 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>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+
+ <DialogFooter>
+ <Button type="button" variant="outline" onClick={() => setOpen(false)}>
+ Cancel
+ </Button>
+ <Button type="submit" disabled={form.formState.isSubmitting}>
+ Create
+ </Button>
+ </DialogFooter>
+ </form>
+ </Form>
+ </DialogContent>
+ </Dialog>
+ )
} \ No newline at end of file