Modgy · YanDavl · Apr 3, 2025
diff --git 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
@@ -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
@@ -6,12 +6,15 @@ interface ShortClientModalProps {
   isOpen: boolean
   onClose: () => void
   children: React.ReactNode
+  withFooter?: boolean
+
 }
 
 export const PetSelectionModal: React.FC<ShortClientModalProps> = ({
   children,
   isOpen: isModalOpen,
   onClose,
+  withFooter = true,
 }) => {
   const renderFooter = () => {
     return (
@@ -61,7 +64,7 @@ export const PetSelectionModal: React.FC<ShortClientModalProps> = ({
       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
@@ -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 && (
+          <div className="grid grid-cols-2 gap-4 overflow-y-auto overflow-x-hidden h-64 py-3">
+            {petsToShow.map(pet => (
+              <CardWithPet
+                readOnly
+                onClick={() => 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"
+              />
+            ))}
+          </div>
+        )}
+
+      </>
+    )
+  }
+  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 (
-                                <BookingCell
-                                  key={`${room.roomId}-${bookingIndex}`}
-                                  bookingInfo={bookingInfo}
-                                  index={bookingIndex}
-                                  color={color}
-                                  clientName={clientName}
-                                  activeTabHeader={activeTabHeader}
-                                />
+                                <>
+                                  <PetSelectionModal
+                                    withFooter={false}
+                                    isOpen={isSelectPetOpen}
+                                    onClose={() => setIsSelectPetOpen(false)}
+                                  >
+                                    {renderCardWithPet(bookingInfo.booking.pets as PetDto[])}
+                                  </PetSelectionModal>
+                                  <div className="cursor-pointer" onClick={() => handleBookingClick(bookingInfo.booking.pets as PetDto[])}>
+                                    <BookingCell
+                                      key={`${room.roomId}-${bookingIndex}`}
+                                      bookingInfo={bookingInfo}
+                                      index={bookingIndex}
+                                      color={color}
+                                      clientName={clientName}
+                                      activeTabHeader={activeTabHeader}
+                                    />
+                                  </div>
+                                </>
                               )
                             }
                             return null
@@ -201,6 +255,7 @@ export const BookingGridPage: FC = () => {
           </table>
         </div>
       </div>
+
     </div>
   )
 }
diff --git 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
@@ -62,7 +62,7 @@ export const PetPage = () => {
         <FormBuilder
           ref={formRef}
           config={petConfig[petData?.type as keyof typeof petConfig]}
-          defaultValues={petData as PetFormData}
+          defaultValues={petData as unknown as PetFormData}
           viewMode
           formId="pet-form"
         />
@@ -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
@@ -29,6 +29,7 @@ interface CardWithPetProps {
   breed: string
   width?: string
   height?: string
+  readOnly?: boolean
 }
 
 export const CardWithPet: React.FC<CardWithPetProps> = ({
@@ -38,9 +39,10 @@ export const CardWithPet: React.FC<CardWithPetProps> = ({
   width,
   height,
   onClick,
+  readOnly = false,
 }) => {
   return (
-    <CardWrapper width={width} height={height}>
+    <CardWrapper onClick={onClick} width={width} height={height}>
       <StyledBox>
         <InfoTitle>Кличка</InfoTitle>
         <InfoValue>{petName}</InfoValue>
@@ -52,7 +54,7 @@ export const CardWithPet: React.FC<CardWithPetProps> = ({
       <StyledBox>
         <InfoTitle>Порода/вид</InfoTitle>
         <InfoValue>{breed}</InfoValue>
-        {onClick && (
+        {!readOnly && (
           <IconButton className="self-end" onClick={onClick}>
             <Icon type="RoundedPlusIcon" width="30" height="30" />
           </IconButton>