Feat/updates

src/modules/Booking/api/queries.ts

@@ -3,6 +3,7 @@ import { EQueryKeys } from "./keys"
 import {
   checkRoomAvailableInDates,
   findAllBookingsInDates,
+  findBlockingBookingsForRoomInDates,
   getBookingById,
 } from "@/generated/bookings"
 import {
@@ -64,3 +65,24 @@ export const useGetBookings = ({
         checkOutDate: convertServerDateToAnFormView(checkOutDate),
       })),
   })
+
+export const useBlockingBookingsForRoomInDates = (
+  roomId: number,
+  checkInDate: string,
+  checkOutDate: string
+) =>
+  useQuery({
+    queryKey: [EQueryKeys.GET_BOOKING_BY_ID + roomId],
+    queryFn: () =>
+      findBlockingBookingsForRoomInDates(
+        roomId,
+        {
+          checkInDate,
+          checkOutDate,
+        },
+        {
+          headers: { "X-PetHotel-User-Id": 1 },
+        }
+      ),
+    enabled: !!roomId && !!checkInDate && !!checkOutDate,
+  })

src/modules/Booking/components/BookingCell/BookingCell.tsx

@@ -1,14 +1,8 @@
 import { BookingDto } from "@/generated/bookings"
 import { useEffect, useRef, useState } from "react"
+import { TTabForHeader } from "../../model/types/BookingGridTypes"
 
-/**
- * Пропсы для клетки с бронью
- * @param bookingInfo информация о брони
- * @param color цвет клетки
- * @param index индекс клетки
- * @param clientName имя клиента
- */
-type TProps = {
+type BookingCellProps = {
   bookingInfo: {
     startIndex: number
     endIndex: number
@@ -17,58 +11,71 @@ type TProps = {
   color: "#A2E9FF" | "#FEE97E" | "#6EE38F" | "#EBAAFB" | undefined
   index: number
   clientName: string
+  activeTabHeader: TTabForHeader
 }
 
 export const BookingCell = ({
   bookingInfo,
-  index,
   color,
   clientName,
-}: TProps) => {
+  activeTabHeader,
+}: BookingCellProps) => {
   const [displayName, setDisplayName] = useState(clientName)
   const textRef = useRef<HTMLSpanElement>(null)
   const containerRef = useRef<HTMLDivElement>(null)
 
+  const isWeekTab = activeTabHeader.value === "week"
+  // Рассчитываем ширину и позиционирование ячейки
+  const isSingleDay = bookingInfo.startIndex === bookingInfo.endIndex
+  const width = isSingleDay
+    ? "calc(100% - 4px)"
+    : `calc(${(bookingInfo.endIndex - bookingInfo.startIndex) * 100}% + 2px)`
+  const left = isSingleDay ? "2px" : "calc(50%)"
+  const right = isSingleDay ? "-2px" : "calc(-50%)"
+
+  // Обрезаем имя, если оно не помещается
   useEffect(() => {
-    if (textRef.current && containerRef.current) {
-      const isOverflowing =
-        textRef.current.scrollWidth > containerRef.current.clientWidth
-      if (isOverflowing) {
-        let truncatedName = clientName
+    const updateDisplayName = () => {
+      if (!textRef.current || !containerRef.current) return
+
+      const containerWidth = containerRef.current.clientWidth
+      let truncatedName = clientName
+      textRef.current.textContent = clientName
+
+      if (textRef.current.scrollWidth > containerWidth) {
         while (
-          textRef.current.scrollWidth > containerRef.current.clientWidth &&
+          textRef.current.scrollWidth > containerWidth &&
           truncatedName.length > 0
         ) {
           truncatedName = truncatedName.slice(0, -1)
-          textRef.current.textContent = truncatedName + "..."
+          textRef.current.textContent = `${truncatedName}...`
         }
-        setDisplayName(truncatedName + "...")
+        setDisplayName(`${truncatedName}...`)
+      } else {
+        setDisplayName(clientName)
       }
     }
-  }, [clientName])
+
+    updateDisplayName()
+
+    // Добавляем обработчик ресайза для адаптивности
+    const handleResize = () => updateDisplayName()
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [clientName, isWeekTab]) // Добавляем isWeekView в зависимости
 
   return (
     <div
       ref={containerRef}
-      key={index}
-      className={`absolute flex items-center justify-center rounded-[12px] overflow-hidden px-2`}
+      className="absolute flex items-center justify-center rounded-[12px] overflow-hidden px-2"
       style={{
-        width:
-          bookingInfo.startIndex === bookingInfo.endIndex
-            ? "calc(100% - 4px)"
-            : `calc(${
-                (bookingInfo.endIndex - bookingInfo.startIndex) * 100
-              }% + 2px)`,
-        left:
-          bookingInfo.startIndex === bookingInfo.endIndex ? "2px" : "calc(50%)",
+        width,
+        left,
+        right,
         top: "5px",
         bottom: "5px",
-        zIndex: "2",
+        zIndex: 2,
         backgroundColor: color,
-        right:
-          bookingInfo.startIndex === bookingInfo.endIndex
-            ? "-2px"
-            : "calc(-50%)",
       }}
     >
       <span ref={textRef} className="whitespace-nowrap">

src/modules/Booking/components/form/blocks/CategoryForm/CategoryRoomsForm.tsx

@@ -1,12 +1,20 @@
-import { Controller, DeepPartial, UseFormReturn } from "react-hook-form"
+import {
+  Controller,
+  DeepPartial,
+  UseFormReturn,
+  useWatch,
+} from "react-hook-form"
 import { CategorySelect } from "../../fields/CategorySelect/CategorySelect"
 import { RoomSelect } from "../../fields/RoomSelect/RoomSelect"
 import {
   IBookingForm,
   ICategoryAndRoom,
 } from "@/modules/Booking/model/types/BookingValidationSchema"
-
-
+import { useGetAllRooms } from "@/modules/Rooms/api/queries"
+import { useGetCategories } from "@/modules/Categories/api/queries"
+import { useEffect, useMemo } from "react"
+import useBookingStore from "@/modules/Booking/store/BookingStore"
+import { RoomDto } from "@/generated/bookings"
 
 interface CategoryRoomsProps {
   form: UseFormReturn<ICategoryAndRoom>
@@ -18,8 +26,29 @@ export const CategoryRoomsForm = (props: CategoryRoomsProps) => {
   const {
     formState: { errors, dirtyFields },
     control,
+    resetField,
   } = form
 
+  const setBookingData = useBookingStore(state => state.setBookingData)
+  const setRoom = useBookingStore(state => state.setRoom)
+
+  const { data: rooms, isError: isErrorRooms } = useGetAllRooms("booking")
+  const { data: categories, isError: isErrorCategories } = useGetCategories()
+  const { categories: categoryValue, rooms: roomValue } = useWatch({ control })
+
+  const filteredRooms = useMemo(() => {
+    const filtered = rooms?.filter(
+      room => room.categoryDto?.name === categoryValue
+    )
+
+    return filtered
+  }, [rooms, categoryValue])
+
+  useEffect(() => {
+    const curRoom = rooms?.find(room => room.number === roomValue) as RoomDto
+    if (curRoom) setRoom(curRoom)
+  }, [roomValue, rooms, setRoom])
+
   return (
     <section className="flex justify-between">
       <Controller
@@ -29,9 +58,15 @@ export const CategoryRoomsForm = (props: CategoryRoomsProps) => {
           return (
             <CategorySelect
               className="w-64"
-              onChange={field.onChange}
-              value={bookingData.categories || field.value || ""}
+              onChange={args => {
+                resetField("rooms")
+                setBookingData({ ...bookingData, rooms: "" })
+                return field.onChange(args)
+              }}
+              value={field.value || bookingData.categories || ""}
               error={errors?.categories?.message}
+              categories={categories || []}
+              isErrorRequest={isErrorCategories}
             />
           )
         }}
@@ -40,14 +75,25 @@ export const CategoryRoomsForm = (props: CategoryRoomsProps) => {
       <Controller
         control={control}
         name="rooms"
+        disabled={!filteredRooms?.length}
         render={({ field }) => {
           if (dirtyFields.categories || bookingData.categories?.length) {
             return (
               <RoomSelect
                 className="w-64"
-                onChange={field.onChange}
-                value={bookingData.rooms || field.value || ""}
+                onChange={args => {
+                  const curRoom = rooms?.find(
+                    room => room.number === field.value
+                  ) as RoomDto
+                  if (curRoom) setRoom(curRoom)
+                  console.log(curRoom, rooms, field.value)
+                  return field.onChange(args)
+                }}
+                value={field.value || bookingData.rooms || ""}
                 error={errors?.rooms?.message}
+                rooms={filteredRooms || []}
+                isErrorRequest={isErrorRooms}
+                disabled={!filteredRooms?.length}
               />
             )
           }

src/modules/Booking/components/form/blocks/PetOwnerForm/PetOwnerForm.tsx

@@ -10,7 +10,7 @@ import { OwnerDto, PetDtoForOwner } from "@/generated/owners"
 import { Icon } from "@/shared/ui/Icon/Icon"
 import { IconButton } from "@mui/material"
 import { IPet } from "@/modules/Booking/model/types/BookingValidationSchema"
-import { DeepPartial, UseFormReturn } from "react-hook-form"
+import { DeepPartial, UseFormReturn, useWatch } from "react-hook-form"
 import { useState } from "react"
 import { PetSelectionModal } from "../../../modal/PetSelectionModal/PetSelectionModal"
 import { CreateShortPet } from "../../../modal/ShortPetModal/ShortPetModal"
@@ -28,17 +28,20 @@ export const PetOwnerForm = (props: IPetOwnerFormProps) => {
   const [isSelectPetOpen, setIsSelectPetOpen] = useState(false)
   const { setValue, watch } = form
 
+  const values = useWatch({ control: form.control })
   const setOwner = useBookingStore(state => state.setOwner)
   const storeOwner = useBookingStore(state => state.owner)
   const setIsOpenShortPetModal = useBookingStore(
     state => state.setIsCreateShortPet
   )
+  const setBookingData = useBookingStore(state => state.setBookingData)
 
   const { data: client } = useGetClientById(Number(storeOwner?.id))
 
-  const owner = storeOwner || client
+  const owner = storeOwner || client || null
   const petIds = watch("petIds") ?? []
 
+  console.log(values, "values")
   const availablePets =
     owner?.petsDto?.filter(pet => !petIds.includes(pet.id ?? 0)) ?? []
 
@@ -47,11 +50,13 @@ export const PetOwnerForm = (props: IPetOwnerFormProps) => {
 
   const handleSelectPet = (petId: number) => {
     const updatedPetIds = [...petIds, petId]
+    setBookingData({ ...bookingData, ...values, petIds: updatedPetIds })
     setValue("petIds", updatedPetIds)
   }
 
   const handleRemovePet = (petId: number) => {
     const updatedPetIds = petIds.filter(id => id !== petId)
+    setBookingData({ ...bookingData, ...values, petIds: updatedPetIds })
     setValue("petIds", updatedPetIds)
   }
 
@@ -112,24 +117,26 @@ export const PetOwnerForm = (props: IPetOwnerFormProps) => {
     selectPet: (id: number) => void
   ) => {
     return (
-      <div className="grid grid-cols-2 gap-4 overflow-y-auto overflow-x-hidden h-64">
-        {owner &&
-          petsToShow.map(pet => (
-            <CardWithPet
-              key={pet.id}
-              onClick={() => selectPet(pet.id ?? 0)}
-              breed={pet.breed ?? "Нет породы"}
-              petName={pet.name ?? "Нет клички"}
-              petType={pet.type ?? "Собака или кошка?"}
-              width="234px"
-              height="244px"
-            />
-          ))}
-
+      <>
+        {owner && 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
+                key={pet.id}
+                onClick={() => selectPet(pet.id ?? 0)}
+                breed={pet.breed ?? "Нет породы"}
+                petName={pet.name ?? "Нет клички"}
+                petType={pet.type ?? "Собака или кошка?"}
+                width="234px"
+                height="244px"
+              />
+            ))}
+          </div>
+        )}
         {!petsToShow.length && (
           <p className="my-3 mx-auto">Нет доступных питомцев</p>
         )}
-      </div>
+      </>
     )
   }
 

src/modules/Booking/components/form/fields/BookingSelect/BookingSelect.tsx

@@ -47,6 +47,7 @@ export const BookingSelect = forwardRef<HTMLSelectElement, TProps>(
       placeholder,
       register,
       onChange,
+      disabled,
     } = props
 
     const handleSelectChange = (e: SelectChangeEvent) => {
@@ -59,6 +60,7 @@ export const BookingSelect = forwardRef<HTMLSelectElement, TProps>(
 
         <div style={{ marginBottom }} className="flex flex-col">
           <MUISelect
+            disabled={disabled}
             displayEmpty
             ref={ref}
             labelId={label}

src/modules/Booking/components/form/fields/CategorySelect/CategorySelect.tsx

@@ -1,29 +1,31 @@
-import { useGetCategories } from "@/modules/Categories/api/queries"
 import { SelectData } from "@/shared/ui/Select"
 import { Typography } from "@mui/material"
 import { BookingSelect } from "../BookingSelect/BookingSelect"
 import { Placeholder } from "@/modules/Booking/consts/Placeholders"
+import { CategoryDto } from "@/generated/bookings"
 
 type TProps = {
   onChange: (value: string) => void
+  onChangeCategory?: () => void
   value: string
   error?: string
   className: string
+  isErrorRequest: boolean
+  categories: CategoryDto[]
 }
 
 export const CategorySelect: React.FC<TProps> = props => {
-  const { onChange, value, error, className } = props
-  const { data: categories, isError } = useGetCategories()
-
+  const { onChange, value, error, className, categories, isErrorRequest } =
+    props
   const mappedDataFromCategories = (): SelectData[] | undefined =>
     categories?.map(element => ({
       label: element.name,
       value: String(element.name),
     }))
   const renderNoData = (): React.ReactNode => {
-    if (!isError && categories?.length === 0) {
+    if (!isErrorRequest && categories?.length === 0) {
       return <Typography>Категории не найдены</Typography>
-    } else if (isError) {
+    } else if (isErrorRequest) {
       return <Typography>Ошибка загрузки категорий</Typography>
     }
   }