diff options
Diffstat (limited to 'lib/admin-users/table/add-ausers-dialog.tsx')
| -rw-r--r-- | lib/admin-users/table/add-ausers-dialog.tsx | 348 |
1 files changed, 348 insertions, 0 deletions
diff --git a/lib/admin-users/table/add-ausers-dialog.tsx b/lib/admin-users/table/add-ausers-dialog.tsx new file mode 100644 index 00000000..dd29c190 --- /dev/null +++ b/lib/admin-users/table/add-ausers-dialog.tsx @@ -0,0 +1,348 @@ +"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" +import { + Select, + SelectContent, + SelectGroup, + SelectItem, + SelectLabel, + SelectTrigger, + SelectValue, +} from "@/components/ui/select" +import { Role, userRoles } from "@/db/schema/users" +import { createUserSchema, type CreateUserSchema } from "@/lib/admin-users/validations" +import { createAdminUser, getAllCompanies, getAllRoles } from "@/lib/admin-users/service" +import { type Company } from "@/db/schema/companies" +import { MultiSelect } from "@/components/ui/multi-select" +import { + Popover, + PopoverTrigger, + PopoverContent, +} from "@/components/ui/popover" +import { + Command, + CommandInput, + CommandList, + CommandGroup, + CommandItem, + CommandEmpty, +} from "@/components/ui/command" +import { Check, ChevronsUpDown, Loader } from "lucide-react" +import { cn } from "@/lib/utils" +import { toast } from "sonner" +import { Vendor } from "@/db/schema/vendors" + +const languageOptions = [ + { value: "ko", label: "한국어" }, + { value: "en", label: "English" }, +] + + +export function AddUserDialog() { + const [open, setOpen] = React.useState(false) + const [companies, setCompanies] = React.useState<Vendor[]>([]) // 회사 목록 + const [roles, setRoles] = React.useState<Role[]>([]) + const [isAddPending, startAddTransition] = React.useTransition() + + + + React.useEffect(() => { + // 회사 목록 불러오기 (예시) + getAllCompanies().then((res) => { + setCompanies(res) + }) + + getAllRoles().then((res) => { + setRoles(res) + }) + }, []) + + // react-hook-form 세팅 + const form = useForm<CreateUserSchema & { language?: string }>({ + resolver: zodResolver(createUserSchema), + defaultValues: { + name: "", + email: "", + companyId: null, + language:'en', + // roles는 array<string>, 여기서는 단일 선택 시 [role]로 담음 + roles: [], + domain:'partners' + // domain, etc. 필요하다면 추가 + }, + }) + + + async function onSubmit(data: CreateUserSchema & { language?: string }) { + data.domain = "partners" + + // 만약 단일 Select로 role을 정했다면, data.roles = ["manager"] 이런 식 + startAddTransition(async ()=> { + const result = await createAdminUser(data) + if (result.error) { + toast.error(`에러: ${result.error}`) + return + } + form.reset() + setOpen(false) + toast.success("User added") + }) + + } + + function handleDialogOpenChange(nextOpen: boolean) { + if (!nextOpen) { + form.reset() + } + setOpen(nextOpen) + } + + return ( + <Dialog open={open} onOpenChange={handleDialogOpenChange}> + {/* 모달을 열기 위한 버튼 */} + <DialogTrigger asChild> + <Button variant="default" size="sm"> + Add User + </Button> + </DialogTrigger> + + <DialogContent> + <DialogHeader> + <DialogTitle>Create New User</DialogTitle> + <DialogDescription> + 새 User 정보를 입력하고 <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="name" + render={({ field }) => ( + <FormItem> + <FormLabel>User Name</FormLabel> + <FormControl> + <Input + placeholder="e.g. dujin" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 이메일 */} + <FormField + control={form.control} + name="email" + render={({ field }) => ( + <FormItem> + <FormLabel>Email</FormLabel> + <FormControl> + <Input + placeholder="e.g. user@example.com" + type="email" + {...field} + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* 회사 선택 (companyId) */} + <FormField + control={form.control} + name="companyId" + render={({ field }) => { + // 현재 선택된 회사 ID (number) → 문자열 + const valueString = field.value ? String(field.value) : "" + + + // 현재 선택된 회사 + const selectedCompany = companies.find( + (c) => String(c.id) === valueString + ) + + const selectedCompanyLabel = selectedCompany && `${selectedCompany.vendorName} ${selectedCompany.taxId}` + + const [popoverOpen, setPopoverOpen] = React.useState(false) + + + return ( + <FormItem> + <FormLabel>Company</FormLabel> + <FormControl> + <Popover + open={popoverOpen} + onOpenChange={setPopoverOpen} + modal={true} + > + <PopoverTrigger asChild> + <Button + variant="outline" + role="combobox" + aria-expanded={popoverOpen} + className="w-full justify-between" + > + {selectedCompany + ? `${selectedCompany.vendorName} ${selectedCompany.taxId}` + : "Select company..."} + <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" /> + </Button> + </PopoverTrigger> + + <PopoverContent className="w-full p-0"> + <Command> + <CommandInput + placeholder="Search company..." + className="h-9" + + /> + <CommandList> + <CommandEmpty>No company found.</CommandEmpty> + <CommandGroup> + {companies.map((comp) => { + // string(comp.id) + const compIdStr = String(comp.id) + const label = `${comp.vendorName}${comp.taxId}` + const label2 = `${comp.vendorName} ${comp.taxId}` + return ( + <CommandItem + key={comp.id} + value={label2} + onSelect={() => { + // 회사 ID를 number로 + field.onChange(Number(comp.id)) + setPopoverOpen(false) + + }} + > + {label2} + <Check + className={cn( + "ml-auto h-4 w-4", + selectedCompanyLabel === label2 + ? "opacity-100" + : "opacity-0" + )} + /> + </CommandItem> + ) + })} + </CommandGroup> + </CommandList> + </Command> + </PopoverContent> + </Popover> + </FormControl> + <FormMessage /> + </FormItem> + ) + }} + /> + {/* Role (Vendor Admin) - 읽기 전용 */} + <FormField + control={form.control} + name="roles" // 실제 필드: z.array(z.string()) + render={({ field }) => ( + <FormItem> + <FormLabel>Role</FormLabel> + {/* UI에선 그냥 Vendor Admin이라고 표시만 (disabled) */} + <FormControl> + <Input + readOnly + disabled + value="Vendor Admin" + className="bg-gray-50 text-gray-500" + /> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + {/* language Select */} + <FormField + control={form.control} + name="language" + render={({ field }) => ( + <FormItem> + <FormLabel>Language</FormLabel> + <FormControl> + <Select + onValueChange={field.onChange} + // 'value'로 현재 값 연결. defaultValue 대신 Controlled 컴포넌트로 + value={field.value} + > + <SelectTrigger> + <SelectValue placeholder="Select language" /> + </SelectTrigger> + <SelectContent> + {languageOptions.map((v, index) => ( + <SelectItem key={index} value={v.value}> + {v.label} + </SelectItem> + ))} + </SelectContent> + </Select> + </FormControl> + <FormMessage /> + </FormItem> + )} + /> + + </div> + + <DialogFooter> + <Button + type="button" + variant="outline" + onClick={() => setOpen(false)} + disabled={isAddPending} + > + {isAddPending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + Cancel + </Button> + <Button type="submit" disabled={form.formState.isSubmitting || isAddPending}> + {isAddPending && ( + <Loader + className="mr-2 size-4 animate-spin" + aria-hidden="true" + /> + )} + Create + </Button> + </DialogFooter> + </form> + </Form> + </DialogContent> + </Dialog> + ) +}
\ No newline at end of file |