From 2cc887634c96c26310cc57d7b7cdec279b624135 Mon Sep 17 00:00:00 2001 From: YanDavl Date: Thu, 3 Apr 2025 18:17:41 +0300 Subject: [PATCH] feat: booking navigation --- src/generated/owners.ts | 3 + src/generated/pets.ts | 3 + .../PetSelectionModal/PetSelectionModal.tsx | 5 +- .../pages/BookingGridPage/BookingGridPage.tsx | 75 ++++++++++++++++--- .../Pets/pages/UpdatePage/UpdatePetPage.tsx | 2 +- src/modules/Pets/pages/ViewPage/PetPage.tsx | 4 +- src/shared/ui/CardWithPet.tsx | 6 +- 7 files changed, 82 insertions(+), 16 deletions(-) diff --git a/src/generated/owners.ts b/src/generated/owners.ts index 6e7758e..7e04fa6 100644 --- a/src/generated/owners.ts +++ b/src/generated/owners.ts @@ -151,6 +151,9 @@ export const PetDtoForOwnerSex = { } as const export interface PetDtoForOwner { + ownerShortDto?: { + id: string + } /** * Дополнительные комментарии, особенности поведения * @maxLength 1000 diff --git a/src/generated/pets.ts b/src/generated/pets.ts index 4ffc1c1..e972c0d 100644 --- a/src/generated/pets.ts +++ b/src/generated/pets.ts @@ -357,6 +357,9 @@ export const PetDtoSex = { } as const export interface PetDto { + ownerShortDto: { + id: string + } /** * Дополнительные комментарии, особенности поведения * @maxLength 1000 diff --git a/src/modules/Booking/components/CreateBooking/modal/PetSelectionModal/PetSelectionModal.tsx b/src/modules/Booking/components/CreateBooking/modal/PetSelectionModal/PetSelectionModal.tsx index 40b3700..b260ed4 100644 --- a/src/modules/Booking/components/CreateBooking/modal/PetSelectionModal/PetSelectionModal.tsx +++ b/src/modules/Booking/components/CreateBooking/modal/PetSelectionModal/PetSelectionModal.tsx @@ -6,12 +6,15 @@ interface ShortClientModalProps { isOpen: boolean onClose: () => void children: React.ReactNode + withFooter?: boolean + } export const PetSelectionModal: React.FC = ({ children, isOpen: isModalOpen, onClose, + withFooter = true, }) => { const renderFooter = () => { return ( @@ -61,7 +64,7 @@ export const PetSelectionModal: React.FC = ({ ariaLabelledby="pet-create" isOpen={isModalOpen} onClose={onClose} - renderFooter={renderFooter} + renderFooter={withFooter ? renderFooter : () => <>} renderMainContent={renderBody} renderHeader={renderHeader} /> diff --git a/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx b/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx index 5494494..7feca46 100644 --- a/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx +++ b/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx @@ -18,6 +18,12 @@ import { BookingCell } from "../../components/BookingGrid/BookingCell/BookingCel import { CircularProgress } from "@mui/material" import { GridHeader } from "../../components/BookingGrid/gridHeader/GridHeader" import { useBookingGridGenerator } from "../../model/useBookingGridGenerator" +import { useNavigate } from "react-router-dom" +import { PetDtoForOwner } from "@/generated/owners" +import { CardWithPet } from "@/shared/ui/CardWithPet" +import { PetSelectionModal } from "../../components/CreateBooking/modal/PetSelectionModal/PetSelectionModal" +import { APP_ROUTES } from "@/routes/types" +import { PetDto } from "@/generated/pets" const getLastDateForBookingGridRequest = (view: EBookingView): string => { switch (view) { @@ -58,6 +64,42 @@ export const BookingGridPage: FC = () => { const { data: rooms } = useGetAllRooms(EPageMode.ACTIVE) + + const [isSelectPetOpen, setIsSelectPetOpen] = useState(false) + const navigate = useNavigate() + const renderCardWithPet = ( + petsToShow: PetDtoForOwner[], + ) => { + return ( + <> + {petsToShow.length !== 0 && ( +
+ {petsToShow.map(pet => ( + navigate(APP_ROUTES.pet(pet?.ownerShortDto?.id!, pet.id!))} + key={pet.id} + breed={pet.breed ?? "Нет породы"} + petName={pet.name ?? "Нет клички"} + petType={pet.type ?? "Собака или кошка?"} + width="234px" + height="244px" + /> + ))} +
+ )} + + + ) + } + const handleBookingClick = (pets: PetDto[]) => { + if (pets.length < 2) { + return navigate(APP_ROUTES.pet(pets[0]?.ownerShortDto?.id, pets[0].id!)) + } + setIsSelectPetOpen(true) + } + + const todayIndex = daysForBookingGrid.findIndex(day => day.day.isSame(dayjs(), "day") ) @@ -163,9 +205,10 @@ export const BookingGridPage: FC = () => { index <= bookingInfo.endIndex const color = mapBookingStatusToColor[ - bookingInfo.booking.status ?? - BookingDtoStatus.STATUS_INITIAL + bookingInfo.booking.status ?? + BookingDtoStatus.STATUS_INITIAL ] + console.log(bookingInfo) const clientName = getFullName( bookingInfo.booking?.pets?.[0]?.ownerShortDto ?.firstName || "", @@ -179,14 +222,25 @@ export const BookingGridPage: FC = () => { index === bookingInfo.startIndex ) { return ( - + <> + setIsSelectPetOpen(false)} + > + {renderCardWithPet(bookingInfo.booking.pets as PetDto[])} + +
handleBookingClick(bookingInfo.booking.pets as PetDto[])}> + +
+ ) } return null @@ -201,6 +255,7 @@ export const BookingGridPage: FC = () => { + ) } diff --git a/src/modules/Pets/pages/UpdatePage/UpdatePetPage.tsx b/src/modules/Pets/pages/UpdatePage/UpdatePetPage.tsx index 6e963f6..f312fe0 100644 --- a/src/modules/Pets/pages/UpdatePage/UpdatePetPage.tsx +++ b/src/modules/Pets/pages/UpdatePage/UpdatePetPage.tsx @@ -122,7 +122,7 @@ export const UpdatePetPage = () => { ?.config } onSubmit={handleUpdatePet as never} - defaultValues={petData as FormData} + defaultValues={petData as unknown as FormData} formId="update-pet" /> diff --git a/src/modules/Pets/pages/ViewPage/PetPage.tsx b/src/modules/Pets/pages/ViewPage/PetPage.tsx index 13e7d84..e8ff32c 100644 --- a/src/modules/Pets/pages/ViewPage/PetPage.tsx +++ b/src/modules/Pets/pages/ViewPage/PetPage.tsx @@ -62,7 +62,7 @@ export const PetPage = () => { @@ -75,7 +75,7 @@ export const PetPage = () => { rating={String(rating || 0)} petType={ PetTranslatedTypes[ - petData?.type as keyof typeof PetTranslatedTypes + petData?.type as keyof typeof PetTranslatedTypes ] } onClick={handleNavigate} diff --git a/src/shared/ui/CardWithPet.tsx b/src/shared/ui/CardWithPet.tsx index d8fc4c8..2d334d6 100644 --- a/src/shared/ui/CardWithPet.tsx +++ b/src/shared/ui/CardWithPet.tsx @@ -29,6 +29,7 @@ interface CardWithPetProps { breed: string width?: string height?: string + readOnly?: boolean } export const CardWithPet: React.FC = ({ @@ -38,9 +39,10 @@ export const CardWithPet: React.FC = ({ width, height, onClick, + readOnly = false, }) => { return ( - + Кличка {petName} @@ -52,7 +54,7 @@ export const CardWithPet: React.FC = ({ Порода/вид {breed} - {onClick && ( + {!readOnly && (