diff options
Diffstat (limited to 'lib/tasks/table/add-tasks-dialog.tsx')
| -rw-r--r-- | lib/tasks/table/add-tasks-dialog.tsx | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/lib/tasks/table/add-tasks-dialog.tsx b/lib/tasks/table/add-tasks-dialog.tsx new file mode 100644 index 00000000..18a9a4b2 --- /dev/null +++ b/lib/tasks/table/add-tasks-dialog.tsx @@ -0,0 +1,227 @@ +"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" +// react-hook-form + shadcn/ui Form +import { + Form, + FormControl, + FormField, + FormItem, + FormLabel, + FormMessage, +} from "@/components/ui/form" +// shadcn/ui Select +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" + +import { tasks } from "@/db/schema/tasks" // enumValues 가져올 DB 스키마 +import { createTaskSchema, type CreateTaskSchema } from "@/lib/tasks/validations" +import { createTask } from "@/lib/tasks/service" // 서버 액션 혹은 API + +export function AddTaskDialog() { + const [open, setOpen] = React.useState(false) + + // react-hook-form 세팅 + const form = useForm<CreateTaskSchema>({ + resolver: zodResolver(createTaskSchema), + defaultValues: { + title: "", + label: tasks.label.enumValues[0] ?? "", // enumValues 중 첫 번째를 기본값으로 + status: tasks.status.enumValues[0] ?? "", + priority: tasks.priority.enumValues[0] ?? "", + }, + }) + + async function onSubmit(data: CreateTaskSchema) { + const result = await createTask(data) + if (result.error) { + alert(`에러: ${result.error}`) + return + } + // 성공 시 모달 닫고 폼 리셋 + 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 Task + </Button> + </DialogTrigger> + + <DialogContent> + <DialogHeader> + <DialogTitle>Create New Task</DialogTitle> + <DialogDescription> + 새 Task 정보를 입력하고 <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"> + {/* Title 필드 */} + <FormField + control={form.control} + name="title" + render={({ field }) => ( + <FormItem> + <FormLabel>Title</FormLabel> + <FormControl> + <Input + placeholder="e.g. Fix the layout bug" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* Label (Select) */} + <FormField + control={form.control} + name="label" + render={({ field }) => ( + <FormItem> + <FormLabel>Label</FormLabel> + <FormControl> + <Select + onValueChange={field.onChange} + value={field.value} + > + <SelectTrigger className="capitalize"> + <SelectValue placeholder="Select a label" /> + </SelectTrigger> + <SelectContent> + <SelectGroup> + {tasks.label.enumValues.map((item) => ( + <SelectItem + key={item} + value={item} + className="capitalize" + > + {item} + </SelectItem> + ))} + </SelectGroup> + </SelectContent> + </Select> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* Status (Select) */} + <FormField + control={form.control} + name="status" + render={({ field }) => ( + <FormItem> + <FormLabel>Status</FormLabel> + <FormControl> + <Select + onValueChange={field.onChange} + value={field.value} + > + <SelectTrigger className="capitalize"> + <SelectValue placeholder="Select a status" /> + </SelectTrigger> + <SelectContent> + <SelectGroup> + {tasks.status.enumValues.map((item) => ( + <SelectItem + key={item} + value={item} + className="capitalize" + > + {item} + </SelectItem> + ))} + </SelectGroup> + </SelectContent> + </Select> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* Priority (Select) */} + <FormField + control={form.control} + name="priority" + render={({ field }) => ( + <FormItem> + <FormLabel>Priority</FormLabel> + <FormControl> + <Select + onValueChange={field.onChange} + value={field.value} + > + <SelectTrigger className="capitalize"> + <SelectValue placeholder="Select a priority" /> + </SelectTrigger> + <SelectContent> + <SelectGroup> + {tasks.priority.enumValues.map((item) => ( + <SelectItem + key={item} + value={item} + className="capitalize" + > + {item} + </SelectItem> + ))} + </SelectGroup> + </SelectContent> + </Select> + </FormControl> + <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 |