-
Notifications
You must be signed in to change notification settings - Fork 0
Feat/card for pet #67
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 11 commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
ef3d703
add sample for pet form
CrabF 0425efc
add validation for some inputs
CrabF c9b0e94
add type for Select component, add interface for form, add validation…
CrabF 07a7d0b
fix icon, add select and its validation
CrabF 9c092b0
add template radioGroup and configured checkbox
CrabF e08d233
add radioGroup for chronicDisease
CrabF 747f2b3
feat: create pets
BastianHolmes 87db34c
fix: pets
BastianHolmes f50779e
fix: structure
BastianHolmes 74e6888
fix: refactoring & fix types
BastianHolmes 19ed393
fix: form types
BastianHolmes f13e33f
fix: slider and order
BastianHolmes e3905c3
feat: pet view page
BastianHolmes 457a6a1
fix: extra pets
BastianHolmes File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { memo } from "react" | ||
| import { TIconProps } from "./types" | ||
|
|
||
| const Component: React.FC<TIconProps> = props => { | ||
| const { width = 16, height = 16, ...rest } = props | ||
| return ( | ||
| <svg | ||
| width={width} | ||
| height={height} | ||
| viewBox="0 0 20 20" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| {...rest} | ||
| > | ||
| <path | ||
| d="M16.95 7.5L11.5167 12.9333C10.875 13.575 9.825 13.575 9.18333 12.9333L3.75 7.5" | ||
| stroke="#181A1A" | ||
| strokeWidth="1.5" | ||
| strokeMiterlimit="10" | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| /> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export const DownArrowIcon = memo(Component) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { TIconProps } from "@/assets/Icons/types.tsx" | ||
| import { memo } from "react" | ||
|
|
||
| const Component: React.FC<TIconProps> = props => { | ||
| const { width = 16, height = 16, ...rest } = props | ||
|
|
||
| return ( | ||
| <svg | ||
| width={width} | ||
| height={height} | ||
| {...rest} | ||
| viewBox="0 0 16 16" | ||
| fill="none" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <g clip-path="url(#clip0_6240_6968)"> | ||
| <path | ||
| d="M9.14937 2.34465L10.3227 4.69132C10.4827 5.01798 10.9094 5.33132 11.2694 5.39132L13.396 5.74465C14.756 5.97131 15.076 6.95798 14.096 7.93132L12.4427 9.58465C12.1627 9.86465 12.0094 10.4046 12.096 10.7913L12.5694 12.838C12.9427 14.458 12.0827 15.0846 10.6494 14.238L8.65603 13.058C8.29603 12.8446 7.7027 12.8446 7.33603 13.058L5.3427 14.238C3.91603 15.0846 3.04937 14.4513 3.4227 12.838L3.89603 10.7913C3.9827 10.4046 3.82937 9.86465 3.54937 9.58465L1.89603 7.93132C0.9227 6.95798 1.23603 5.97131 2.59603 5.74465L4.7227 5.39132C5.07603 5.33132 5.5027 5.01798 5.6627 4.69132L6.83603 2.34465C7.47603 1.07132 8.51603 1.07132 9.14937 2.34465Z" | ||
| fill="#FFC107" | ||
| stroke="#181A1A" | ||
| stroke-width="1.5" | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <clipPath id="clip0_6240_6968"> | ||
| <rect width="16" height="16" fill="white" /> | ||
| </clipPath> | ||
| </defs> | ||
| </svg> | ||
| ) | ||
| } | ||
|
|
||
| export const StarIcon = memo(Component) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
200 changes: 99 additions & 101 deletions
200
src/modules/Booking/components/modal/ShortClientModal/ShortClientModal.tsx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,122 +1,120 @@ | ||
| import { Box, Dialog, DialogTitle } from "@mui/material" | ||
| import { memo } from "react" | ||
| import { FieldValues, useForm } from "react-hook-form" | ||
| import { ShortClientForm } from "@/modules/Booking/consts/Placeholders" | ||
| import { TextField } from "@/shared/ui/TextField" | ||
| import { NewOwnerDto } from "@/generated/owners" | ||
| import { Button, EButtonSize, EButtonVariant } from "@/shared/ui/Button/Button" | ||
| import { NewOwnerDto } from "@/generated/owners" | ||
| import { UseFormReturn } from "react-hook-form" | ||
|
|
||
| interface IShortClientProps { | ||
| interface ShortClientModalProps { | ||
| form: UseFormReturn<NewOwnerDto> | ||
| isModalOpen: boolean | ||
| onClose: () => void | ||
| onSubmit: (data: NewOwnerDto) => void | ||
| isModalOpen: boolean | ||
| form: ReturnType<typeof useForm> | ||
| } | ||
|
|
||
| export const ShortClientModal: React.FC<IShortClientProps> = memo(props => { | ||
| const { onClose, onSubmit, isModalOpen, form } = props | ||
| const { | ||
| handleSubmit, | ||
| register, | ||
| formState: { errors }, | ||
| } = form | ||
| return ( | ||
| <Dialog | ||
| open={isModalOpen} | ||
| maxWidth="lg" | ||
| onClose={onClose} | ||
| aria-labelledby="modal-booking-title" | ||
| aria-describedby="modal-booking-description" | ||
| sx={{ | ||
| "& .MuiDialogTitle-root": { | ||
| padding: "40px 64px 0", | ||
| }, | ||
| "& .MuiPaper-root": { | ||
| borderRadius: "16px", | ||
| width: "656px ", | ||
| }, | ||
| }} | ||
| > | ||
| <DialogTitle | ||
| display="flex" | ||
| justifyContent="flex-start" | ||
| padding="0" | ||
| fontSize={24} | ||
| fontWeight={800} | ||
| > | ||
| Новый клиент | ||
| </DialogTitle> | ||
| <form | ||
| className="pb-10 px-16" | ||
| onSubmit={(data: FieldValues) => onSubmit(data as NewOwnerDto)} | ||
| export const ShortClientModal: React.FC<ShortClientModalProps> = memo( | ||
| ({ form, isModalOpen, onClose, onSubmit }) => { | ||
| const { | ||
| handleSubmit, | ||
| register, | ||
| formState: { isDirty, errors }, | ||
| } = form | ||
|
|
||
| const formFields = [ | ||
| { | ||
| id: "lastname", | ||
| label: ShortClientForm.LAST_NAME.valueOf(), | ||
| placeholder: ShortClientForm.LAST_NAME.valueOf(), | ||
| error: errors?.lastName?.message, | ||
| }, | ||
| { | ||
| id: "firstName", | ||
| label: ShortClientForm.FIRST_NAME.valueOf(), | ||
| placeholder: ShortClientForm.FIRST_NAME.valueOf(), | ||
| error: errors?.firstName?.message, | ||
| }, | ||
| { | ||
| id: "middleName", | ||
| label: ShortClientForm.MIDDLE_NAME.valueOf(), | ||
| placeholder: ShortClientForm.MIDDLE_NAME.valueOf(), | ||
| error: errors?.middleName?.message, | ||
| }, | ||
| { | ||
| id: "mainPhone", | ||
| label: ShortClientForm.MAIN_PHONE.valueOf(), | ||
| placeholder: ShortClientForm.MAIN_PHONE.valueOf(), | ||
| error: errors?.mainPhone?.message, | ||
| }, | ||
| { | ||
| id: "optionalPhone", | ||
| label: ShortClientForm.OPTIONAL_PHONE.valueOf(), | ||
| placeholder: ShortClientForm.OPTIONAL_PHONE.valueOf(), | ||
| error: errors?.optionalPhone?.message, | ||
| }, | ||
| { | ||
| id: "rating", | ||
| label: ShortClientForm.RATING.valueOf(), | ||
| placeholder: ShortClientForm.RATING.valueOf(), | ||
| error: errors?.rating?.message, | ||
| }, | ||
| ] | ||
|
|
||
| const isReadyToSubmit = isDirty && Object.keys(errors).length === 0 | ||
|
|
||
| return ( | ||
| <Dialog | ||
| open={isModalOpen} | ||
| maxWidth="lg" | ||
| onClose={onClose} | ||
| aria-labelledby="modal-booking-title" | ||
| aria-describedby="modal-booking-description" | ||
| sx={{ | ||
| "& .MuiDialogTitle-root": { | ||
| padding: "40px 64px 0", | ||
| }, | ||
| "& .MuiPaper-root": { | ||
| borderRadius: "16px", | ||
| width: "656px", | ||
| }, | ||
| }} | ||
| > | ||
| <Box | ||
| <DialogTitle | ||
| display="flex" | ||
| alignItems="center" | ||
| justifyContent="center" | ||
| marginBottom={"15px"} | ||
| justifyContent="flex-start" | ||
| padding="0" | ||
| fontSize={24} | ||
| fontWeight={800} | ||
| > | ||
| <Box | ||
| display="flex" | ||
| justifyContent="flex-start" | ||
| flexDirection="column" | ||
| width="100%" | ||
| > | ||
| <TextField | ||
| label={ShortClientForm.LAST_NAME.valueOf()} | ||
| id={ShortClientForm.LAST_NAME.valueOf()} | ||
| placeholder={ShortClientForm.LAST_NAME.valueOf()} | ||
| error={errors?.lastname?.message as string} | ||
| {...register("lastname")} | ||
| /> | ||
| <TextField | ||
| label={ShortClientForm.FIRST_NAME.valueOf()} | ||
| id={ShortClientForm.FIRST_NAME.valueOf()} | ||
| placeholder={ShortClientForm.FIRST_NAME.valueOf()} | ||
| error={errors?.firstName?.message as string} | ||
| {...register("firstName")} | ||
| /> | ||
| <TextField | ||
| label={ShortClientForm.MIDDLE_NAME.valueOf()} | ||
| id={ShortClientForm.MIDDLE_NAME.valueOf()} | ||
| placeholder={ShortClientForm.MIDDLE_NAME.valueOf()} | ||
| error={errors?.middleName?.message as string} | ||
| {...register("middleName")} | ||
| /> | ||
| <TextField | ||
| label={ShortClientForm.MAIN_PHONE.valueOf()} | ||
| id={ShortClientForm.MAIN_PHONE.valueOf()} | ||
| placeholder={ShortClientForm.MAIN_PHONE.valueOf()} | ||
| error={errors?.mainPhone?.message as string} | ||
| {...register("mainPhone")} | ||
| /> | ||
| <TextField | ||
| label={ShortClientForm.OPTIONAL_PHONE.valueOf()} | ||
| id={ShortClientForm.OPTIONAL_PHONE.valueOf()} | ||
| placeholder={ShortClientForm.OPTIONAL_PHONE.valueOf()} | ||
| error={errors?.optionalPhone?.message as string} | ||
| {...register("optionalPhone")} | ||
| /> | ||
| <TextField | ||
| className="mb-5" | ||
| label={ShortClientForm.RATING.valueOf()} | ||
| id={ShortClientForm.RATING.valueOf()} | ||
| placeholder={ShortClientForm.RATING.valueOf()} | ||
| error={errors?.rating?.message as string} | ||
| {...register("rating")} | ||
| /> | ||
| Новый клиент | ||
| </DialogTitle> | ||
| <form className="pb-10 px-16" onSubmit={handleSubmit(onSubmit)}> | ||
| <Box display="flex" flexDirection="column" gap={2}> | ||
| {formFields.map(field => ( | ||
| <TextField | ||
| key={field.id} | ||
| label={field.label} | ||
| id={field.id} | ||
| placeholder={field.placeholder} | ||
| error={field.error} | ||
| {...register(field.id as keyof NewOwnerDto)} | ||
| /> | ||
| ))} | ||
| </Box> | ||
| <Box display="flex" justifyContent="flex-end" mt={4}> | ||
| <Button | ||
| onClick={handleSubmit(onSubmit as unknown as () => void)} | ||
| type="submit" | ||
| variant={EButtonVariant.Primary} | ||
| size={EButtonSize.Large} | ||
| fontSize={16} | ||
| fontWeight={700} | ||
| disabled={!isReadyToSubmit} | ||
| > | ||
| Сохранить | ||
| Добавить | ||
| </Button> | ||
| </Box> | ||
| </Box> | ||
| </form> | ||
| </Dialog> | ||
| ) | ||
| }) | ||
| </form> | ||
| </Dialog> | ||
| ) | ||
| } | ||
| ) | ||
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.