diff options
Diffstat (limited to 'lib/admin-users/table/update-auser-sheet.tsx')
| -rw-r--r-- | lib/admin-users/table/update-auser-sheet.tsx | 56 |
1 files changed, 52 insertions, 4 deletions
diff --git a/lib/admin-users/table/update-auser-sheet.tsx b/lib/admin-users/table/update-auser-sheet.tsx index ddf1f932..fbd3a42f 100644 --- a/lib/admin-users/table/update-auser-sheet.tsx +++ b/lib/admin-users/table/update-auser-sheet.tsx @@ -23,6 +23,7 @@ import { FormItem, FormLabel, FormMessage, + FormDescription, } from "@/components/ui/form" import { Input } from "@/components/ui/input" import { @@ -31,12 +32,12 @@ import { SelectContent, SelectItem, SelectValue, - SelectGroup, } from "@/components/ui/select" // import your MultiSelect or other role selection import { MultiSelect } from "@/components/ui/multi-select" +import { cn } from "@/lib/utils" -import { userRoles, type UserView } from "@/db/schema/users" +import { type UserView } from "@/db/schema/users" import { updateUserSchema, type UpdateUserSchema } from "@/lib/admin-users/validations" import { modifiUser } from "@/lib/admin-users/service" @@ -50,16 +51,35 @@ const languageOptions = [ { value: "en", label: "English" }, ] +// Phone validation helper +const validatePhoneNumber = (phone: string): boolean => { + if (!phone) return true; // Optional field + // Basic international phone number validation + const cleanPhone = phone.replace(/[\s\-\(\)]/g, ''); + return /^\+\d{3,20}$/.test(cleanPhone); +}; + +// Get phone placeholder +const getPhonePlaceholder = (): string => { + return "+82-10-1234-5678"; +}; + +// Get phone description +const getPhoneDescription = (): string => { + return "국제 전화번호를 입력하세요. (예: +82-10-1234-5678)"; +}; + export function UpdateAuserSheet({ user, ...props }: UpdateAuserSheetProps) { const [isUpdatePending, startUpdateTransition] = React.useTransition() // 1) RHF 설정 - const form = useForm<UpdateUserSchema & { language?: string }>({ + const form = useForm<UpdateUserSchema & { language?: string; phone?: string }>({ resolver: zodResolver(updateUserSchema), defaultValues: { name: user?.user_name ?? "", email: user?.user_email ?? "", + phone: user?.user_phone ?? "", // Add phone field companyId: user?.company_id ?? null, roles: user?.roles ?? [], language:'en', @@ -72,15 +92,19 @@ export function UpdateAuserSheet({ user, ...props }: UpdateAuserSheetProps) { form.reset({ name: user.user_name, email: user.user_email, + phone: user.user_phone || "", // Add phone field companyId: user.company_id, roles: user.roles, + language: 'en', // You might want to get this from user object }) } }, [user, form]) // 3) onSubmit - async function onSubmit(input: UpdateUserSchema & { language?: string }) { + async function onSubmit(input: UpdateUserSchema & { language?: string; phone?: string }) { + // Phone validation is now handled by zod schema + startUpdateTransition(async () => { if (!user) return @@ -147,6 +171,30 @@ export function UpdateAuserSheet({ user, ...props }: UpdateAuserSheetProps) { )} /> + {/* 전화번호 - 새로 추가 */} + <FormField + control={form.control} + name="phone" + render={({ field }) => ( + <FormItem> + <FormLabel>Phone Number</FormLabel> + <FormControl> + <Input + placeholder={getPhonePlaceholder()} + {...field} + className={cn( + field.value && !validatePhoneNumber(field.value) && "border-red-500" + )} + /> + </FormControl> + <FormDescription className="text-xs text-muted-foreground"> + {getPhoneDescription()} + </FormDescription> + <FormMessage /> + </FormItem> + )} + /> + {/* roles */} <FormField control={form.control} |
