|
|
@ -1,4 +1,3 @@ |
|
|
import React from 'react' |
|
|
|
|
|
import { |
|
|
import { |
|
|
Button, |
|
|
Button, |
|
|
Checkbox, |
|
|
Checkbox, |
|
|
@ -14,12 +13,18 @@ import { |
|
|
ModalFooter, |
|
|
ModalFooter, |
|
|
ModalHeader, |
|
|
ModalHeader, |
|
|
ModalOverlay, |
|
|
ModalOverlay, |
|
|
} from '@chakra-ui/react' |
|
|
} from "@chakra-ui/react" |
|
|
import { SubmitHandler, useForm } from 'react-hook-form' |
|
|
import type React from "react" |
|
|
import { useMutation, useQueryClient } from 'react-query' |
|
|
import { type SubmitHandler, useForm } from "react-hook-form" |
|
|
|
|
|
import { useMutation, useQueryClient } from "react-query" |
|
|
|
|
|
|
|
|
import { ApiError, UserOut, UserUpdate, UsersService } from '../../client' |
|
|
import { |
|
|
import useCustomToast from '../../hooks/useCustomToast' |
|
|
type ApiError, |
|
|
|
|
|
type UserOut, |
|
|
|
|
|
type UserUpdate, |
|
|
|
|
|
UsersService, |
|
|
|
|
|
} from "../../client" |
|
|
|
|
|
import useCustomToast from "../../hooks/useCustomToast" |
|
|
|
|
|
|
|
|
interface EditUserProps { |
|
|
interface EditUserProps { |
|
|
user: UserOut |
|
|
user: UserOut |
|
|
@ -42,8 +47,8 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => { |
|
|
getValues, |
|
|
getValues, |
|
|
formState: { errors, isSubmitting, isDirty }, |
|
|
formState: { errors, isSubmitting, isDirty }, |
|
|
} = useForm<UserUpdateForm>({ |
|
|
} = useForm<UserUpdateForm>({ |
|
|
mode: 'onBlur', |
|
|
mode: "onBlur", |
|
|
criteriaMode: 'all', |
|
|
criteriaMode: "all", |
|
|
defaultValues: user, |
|
|
defaultValues: user, |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
@ -53,20 +58,20 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => { |
|
|
|
|
|
|
|
|
const mutation = useMutation(updateUser, { |
|
|
const mutation = useMutation(updateUser, { |
|
|
onSuccess: () => { |
|
|
onSuccess: () => { |
|
|
showToast('Success!', 'User updated successfully.', 'success') |
|
|
showToast("Success!", "User updated successfully.", "success") |
|
|
onClose() |
|
|
onClose() |
|
|
}, |
|
|
}, |
|
|
onError: (err: ApiError) => { |
|
|
onError: (err: ApiError) => { |
|
|
const errDetail = err.body?.detail |
|
|
const errDetail = err.body?.detail |
|
|
showToast('Something went wrong.', `${errDetail}`, 'error') |
|
|
showToast("Something went wrong.", `${errDetail}`, "error") |
|
|
}, |
|
|
}, |
|
|
onSettled: () => { |
|
|
onSettled: () => { |
|
|
queryClient.invalidateQueries('users') |
|
|
queryClient.invalidateQueries("users") |
|
|
}, |
|
|
}, |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => { |
|
|
const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => { |
|
|
if (data.password === '') { |
|
|
if (data.password === "") { |
|
|
data.password = undefined |
|
|
data.password = undefined |
|
|
} |
|
|
} |
|
|
mutation.mutate(data) |
|
|
mutation.mutate(data) |
|
|
@ -82,7 +87,7 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => { |
|
|
<Modal |
|
|
<Modal |
|
|
isOpen={isOpen} |
|
|
isOpen={isOpen} |
|
|
onClose={onClose} |
|
|
onClose={onClose} |
|
|
size={{ base: 'sm', md: 'md' }} |
|
|
size={{ base: "sm", md: "md" }} |
|
|
isCentered |
|
|
isCentered |
|
|
> |
|
|
> |
|
|
<ModalOverlay /> |
|
|
<ModalOverlay /> |
|
|
@ -94,11 +99,11 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => { |
|
|
<FormLabel htmlFor="email">Email</FormLabel> |
|
|
<FormLabel htmlFor="email">Email</FormLabel> |
|
|
<Input |
|
|
<Input |
|
|
id="email" |
|
|
id="email" |
|
|
{...register('email', { |
|
|
{...register("email", { |
|
|
required: 'Email is required', |
|
|
required: "Email is required", |
|
|
pattern: { |
|
|
pattern: { |
|
|
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, |
|
|
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i, |
|
|
message: 'Invalid email address', |
|
|
message: "Invalid email address", |
|
|
}, |
|
|
}, |
|
|
})} |
|
|
})} |
|
|
placeholder="Email" |
|
|
placeholder="Email" |
|
|
@ -110,16 +115,16 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => { |
|
|
</FormControl> |
|
|
</FormControl> |
|
|
<FormControl mt={4}> |
|
|
<FormControl mt={4}> |
|
|
<FormLabel htmlFor="name">Full name</FormLabel> |
|
|
<FormLabel htmlFor="name">Full name</FormLabel> |
|
|
<Input id="name" {...register('full_name')} type="text" /> |
|
|
<Input id="name" {...register("full_name")} type="text" /> |
|
|
</FormControl> |
|
|
</FormControl> |
|
|
<FormControl mt={4} isInvalid={!!errors.password}> |
|
|
<FormControl mt={4} isInvalid={!!errors.password}> |
|
|
<FormLabel htmlFor="password">Set Password</FormLabel> |
|
|
<FormLabel htmlFor="password">Set Password</FormLabel> |
|
|
<Input |
|
|
<Input |
|
|
id="password" |
|
|
id="password" |
|
|
{...register('password', { |
|
|
{...register("password", { |
|
|
minLength: { |
|
|
minLength: { |
|
|
value: 8, |
|
|
value: 8, |
|
|
message: 'Password must be at least 8 characters', |
|
|
message: "Password must be at least 8 characters", |
|
|
}, |
|
|
}, |
|
|
})} |
|
|
})} |
|
|
placeholder="Password" |
|
|
placeholder="Password" |
|
|
@ -133,10 +138,10 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => { |
|
|
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel> |
|
|
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel> |
|
|
<Input |
|
|
<Input |
|
|
id="confirm_password" |
|
|
id="confirm_password" |
|
|
{...register('confirm_password', { |
|
|
{...register("confirm_password", { |
|
|
validate: (value) => |
|
|
validate: (value) => |
|
|
value === getValues().password || |
|
|
value === getValues().password || |
|
|
'The passwords do not match', |
|
|
"The passwords do not match", |
|
|
})} |
|
|
})} |
|
|
placeholder="Password" |
|
|
placeholder="Password" |
|
|
type="password" |
|
|
type="password" |
|
|
@ -149,12 +154,12 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => { |
|
|
</FormControl> |
|
|
</FormControl> |
|
|
<Flex> |
|
|
<Flex> |
|
|
<FormControl mt={4}> |
|
|
<FormControl mt={4}> |
|
|
<Checkbox {...register('is_superuser')} colorScheme="teal"> |
|
|
<Checkbox {...register("is_superuser")} colorScheme="teal"> |
|
|
Is superuser? |
|
|
Is superuser? |
|
|
</Checkbox> |
|
|
</Checkbox> |
|
|
</FormControl> |
|
|
</FormControl> |
|
|
<FormControl mt={4}> |
|
|
<FormControl mt={4}> |
|
|
<Checkbox {...register('is_active')} colorScheme="teal"> |
|
|
<Checkbox {...register("is_active")} colorScheme="teal"> |
|
|
Is active? |
|
|
Is active? |
|
|
</Checkbox> |
|
|
</Checkbox> |
|
|
</FormControl> |
|
|
</FormControl> |
|
|
|
Alejandra
1 year ago
GitHub