|
1 | 1 | import { Box, Dialog, DialogTitle } from "@mui/material" |
2 | 2 | import { memo } from "react" |
3 | | -import { FieldValues, useForm } from "react-hook-form" |
4 | 3 | import { ShortClientForm } from "@/modules/Booking/consts/Placeholders" |
5 | 4 | import { TextField } from "@/shared/ui/TextField" |
6 | | -import { NewOwnerDto } from "@/generated/owners" |
7 | 5 | import { Button, EButtonSize, EButtonVariant } from "@/shared/ui/Button/Button" |
| 6 | +import { NewOwnerDto } from "@/generated/owners" |
| 7 | +import { UseFormReturn } from "react-hook-form" |
8 | 8 |
|
9 | | -interface IShortClientProps { |
| 9 | +interface ShortClientModalProps { |
| 10 | + form: UseFormReturn<NewOwnerDto> |
| 11 | + isModalOpen: boolean |
10 | 12 | onClose: () => void |
11 | 13 | onSubmit: (data: NewOwnerDto) => void |
12 | | - isModalOpen: boolean |
13 | | - form: ReturnType<typeof useForm> |
14 | 14 | } |
15 | 15 |
|
16 | | -export const ShortClientModal: React.FC<IShortClientProps> = memo(props => { |
17 | | - const { onClose, onSubmit, isModalOpen, form } = props |
18 | | - const { |
19 | | - handleSubmit, |
20 | | - register, |
21 | | - formState: { errors }, |
22 | | - } = form |
23 | | - return ( |
24 | | - <Dialog |
25 | | - open={isModalOpen} |
26 | | - maxWidth="lg" |
27 | | - onClose={onClose} |
28 | | - aria-labelledby="modal-booking-title" |
29 | | - aria-describedby="modal-booking-description" |
30 | | - sx={{ |
31 | | - "& .MuiDialogTitle-root": { |
32 | | - padding: "40px 64px 0", |
33 | | - }, |
34 | | - "& .MuiPaper-root": { |
35 | | - borderRadius: "16px", |
36 | | - width: "656px ", |
37 | | - }, |
38 | | - }} |
39 | | - > |
40 | | - <DialogTitle |
41 | | - display="flex" |
42 | | - justifyContent="flex-start" |
43 | | - padding="0" |
44 | | - fontSize={24} |
45 | | - fontWeight={800} |
46 | | - > |
47 | | - Новый клиент |
48 | | - </DialogTitle> |
49 | | - <form |
50 | | - className="pb-10 px-16" |
51 | | - onSubmit={(data: FieldValues) => onSubmit(data as NewOwnerDto)} |
| 16 | +export const ShortClientModal: React.FC<ShortClientModalProps> = memo( |
| 17 | + ({ form, isModalOpen, onClose, onSubmit }) => { |
| 18 | + const { |
| 19 | + handleSubmit, |
| 20 | + register, |
| 21 | + formState: { isDirty, errors }, |
| 22 | + } = form |
| 23 | + |
| 24 | + const formFields = [ |
| 25 | + { |
| 26 | + id: "lastname", |
| 27 | + label: ShortClientForm.LAST_NAME.valueOf(), |
| 28 | + placeholder: ShortClientForm.LAST_NAME.valueOf(), |
| 29 | + error: errors?.lastName?.message, |
| 30 | + }, |
| 31 | + { |
| 32 | + id: "firstName", |
| 33 | + label: ShortClientForm.FIRST_NAME.valueOf(), |
| 34 | + placeholder: ShortClientForm.FIRST_NAME.valueOf(), |
| 35 | + error: errors?.firstName?.message, |
| 36 | + }, |
| 37 | + { |
| 38 | + id: "middleName", |
| 39 | + label: ShortClientForm.MIDDLE_NAME.valueOf(), |
| 40 | + placeholder: ShortClientForm.MIDDLE_NAME.valueOf(), |
| 41 | + error: errors?.middleName?.message, |
| 42 | + }, |
| 43 | + { |
| 44 | + id: "mainPhone", |
| 45 | + label: ShortClientForm.MAIN_PHONE.valueOf(), |
| 46 | + placeholder: ShortClientForm.MAIN_PHONE.valueOf(), |
| 47 | + error: errors?.mainPhone?.message, |
| 48 | + }, |
| 49 | + { |
| 50 | + id: "optionalPhone", |
| 51 | + label: ShortClientForm.OPTIONAL_PHONE.valueOf(), |
| 52 | + placeholder: ShortClientForm.OPTIONAL_PHONE.valueOf(), |
| 53 | + error: errors?.optionalPhone?.message, |
| 54 | + }, |
| 55 | + { |
| 56 | + id: "rating", |
| 57 | + label: ShortClientForm.RATING.valueOf(), |
| 58 | + placeholder: ShortClientForm.RATING.valueOf(), |
| 59 | + error: errors?.rating?.message, |
| 60 | + }, |
| 61 | + ] |
| 62 | + |
| 63 | + const isReadyToSubmit = isDirty && Object.keys(errors).length === 0 |
| 64 | + |
| 65 | + return ( |
| 66 | + <Dialog |
| 67 | + open={isModalOpen} |
| 68 | + maxWidth="lg" |
| 69 | + onClose={onClose} |
| 70 | + aria-labelledby="modal-booking-title" |
| 71 | + aria-describedby="modal-booking-description" |
| 72 | + sx={{ |
| 73 | + "& .MuiDialogTitle-root": { |
| 74 | + padding: "40px 64px 0", |
| 75 | + }, |
| 76 | + "& .MuiPaper-root": { |
| 77 | + borderRadius: "16px", |
| 78 | + width: "656px", |
| 79 | + }, |
| 80 | + }} |
52 | 81 | > |
53 | | - <Box |
| 82 | + <DialogTitle |
54 | 83 | display="flex" |
55 | | - alignItems="center" |
56 | | - justifyContent="center" |
57 | | - marginBottom={"15px"} |
| 84 | + justifyContent="flex-start" |
| 85 | + padding="0" |
| 86 | + fontSize={24} |
| 87 | + fontWeight={800} |
58 | 88 | > |
59 | | - <Box |
60 | | - display="flex" |
61 | | - justifyContent="flex-start" |
62 | | - flexDirection="column" |
63 | | - width="100%" |
64 | | - > |
65 | | - <TextField |
66 | | - label={ShortClientForm.LAST_NAME.valueOf()} |
67 | | - id={ShortClientForm.LAST_NAME.valueOf()} |
68 | | - placeholder={ShortClientForm.LAST_NAME.valueOf()} |
69 | | - error={errors?.lastname?.message as string} |
70 | | - {...register("lastname")} |
71 | | - /> |
72 | | - <TextField |
73 | | - label={ShortClientForm.FIRST_NAME.valueOf()} |
74 | | - id={ShortClientForm.FIRST_NAME.valueOf()} |
75 | | - placeholder={ShortClientForm.FIRST_NAME.valueOf()} |
76 | | - error={errors?.firstName?.message as string} |
77 | | - {...register("firstName")} |
78 | | - /> |
79 | | - <TextField |
80 | | - label={ShortClientForm.MIDDLE_NAME.valueOf()} |
81 | | - id={ShortClientForm.MIDDLE_NAME.valueOf()} |
82 | | - placeholder={ShortClientForm.MIDDLE_NAME.valueOf()} |
83 | | - error={errors?.middleName?.message as string} |
84 | | - {...register("middleName")} |
85 | | - /> |
86 | | - <TextField |
87 | | - label={ShortClientForm.MAIN_PHONE.valueOf()} |
88 | | - id={ShortClientForm.MAIN_PHONE.valueOf()} |
89 | | - placeholder={ShortClientForm.MAIN_PHONE.valueOf()} |
90 | | - error={errors?.mainPhone?.message as string} |
91 | | - {...register("mainPhone")} |
92 | | - /> |
93 | | - <TextField |
94 | | - label={ShortClientForm.OPTIONAL_PHONE.valueOf()} |
95 | | - id={ShortClientForm.OPTIONAL_PHONE.valueOf()} |
96 | | - placeholder={ShortClientForm.OPTIONAL_PHONE.valueOf()} |
97 | | - error={errors?.optionalPhone?.message as string} |
98 | | - {...register("optionalPhone")} |
99 | | - /> |
100 | | - <TextField |
101 | | - className="mb-5" |
102 | | - label={ShortClientForm.RATING.valueOf()} |
103 | | - id={ShortClientForm.RATING.valueOf()} |
104 | | - placeholder={ShortClientForm.RATING.valueOf()} |
105 | | - error={errors?.rating?.message as string} |
106 | | - {...register("rating")} |
107 | | - /> |
| 89 | + Новый клиент |
| 90 | + </DialogTitle> |
| 91 | + <form className="pb-10 px-16" onSubmit={handleSubmit(onSubmit)}> |
| 92 | + <Box display="flex" flexDirection="column" gap={2}> |
| 93 | + {formFields.map(field => ( |
| 94 | + <TextField |
| 95 | + key={field.id} |
| 96 | + label={field.label} |
| 97 | + id={field.id} |
| 98 | + placeholder={field.placeholder} |
| 99 | + error={field.error} |
| 100 | + {...register(field.id as keyof NewOwnerDto)} |
| 101 | + /> |
| 102 | + ))} |
| 103 | + </Box> |
| 104 | + <Box display="flex" justifyContent="flex-end" mt={4}> |
108 | 105 | <Button |
109 | | - onClick={handleSubmit(onSubmit as unknown as () => void)} |
| 106 | + type="submit" |
110 | 107 | variant={EButtonVariant.Primary} |
111 | 108 | size={EButtonSize.Large} |
112 | 109 | fontSize={16} |
113 | 110 | fontWeight={700} |
| 111 | + disabled={!isReadyToSubmit} |
114 | 112 | > |
115 | | - Сохранить |
| 113 | + Добавить |
116 | 114 | </Button> |
117 | 115 | </Box> |
118 | | - </Box> |
119 | | - </form> |
120 | | - </Dialog> |
121 | | - ) |
122 | | -}) |
| 116 | + </form> |
| 117 | + </Dialog> |
| 118 | + ) |
| 119 | + } |
| 120 | +) |
0 commit comments