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/BookingGrid/BookingCell/BookingCell.tsx

@@ -0,0 +1,86 @@
+import { BookingDto } from "@/generated/bookings"
+import { useEffect, useRef, useState } from "react"
+import { TTabForHeader } from "../../../model/types/BookingGridTypes"
+
+type BookingCellProps = {
+  bookingInfo: {
+    startIndex: number
+    endIndex: number
+    booking: BookingDto
+  }
+  color: "#A2E9FF" | "#FEE97E" | "#6EE38F" | "#EBAAFB" | undefined
+  index: number
+  clientName: string
+  activeTabHeader: TTabForHeader
+}
+
+export const BookingCell = ({
+  bookingInfo,
+  color,
+  clientName,
+  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(() => {
+    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 > containerWidth &&
+          truncatedName.length > 0
+        ) {
+          truncatedName = truncatedName.slice(0, -1)
+          textRef.current.textContent = `${truncatedName}...`
+        }
+        setDisplayName(`${truncatedName}...`)
+      } else {
+        setDisplayName(clientName)
+      }
+    }
+
+    updateDisplayName()
+
+    // Добавляем обработчик ресайза для адаптивности
+    const handleResize = () => updateDisplayName()
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [clientName, isWeekTab]) // Добавляем isWeekView в зависимости
+
+  return (
+    <div
+      ref={containerRef}
+      className="absolute flex items-center justify-center rounded-[12px] overflow-hidden px-2"
+      style={{
+        width,
+        left,
+        right,
+        top: "5px",
+        bottom: "5px",
+        zIndex: 2,
+        backgroundColor: color,
+      }}
+    >
+      <span ref={textRef} className="whitespace-nowrap">
+        {displayName}
+      </span>
+    </div>
+  )
+}

src/modules/Booking/components/gridHeader/GridHeader.tsx → src/modules/Booking/components/BookingGrid/gridHeader/GridHeader.tsx

@@ -1,10 +1,10 @@
 import { Stack } from "@mui/material"
-import { EBookingView } from "../../model/types/BookingGridTypes"
-import { HEADER_TABS } from "../../model/utils"
 import { Tab } from "@/shared/ui/Tab"
 import { SearchComponent } from "@/shared/ui/SearchComponent"
 import { useMemo } from "react"
 import { BookingDto } from "@/generated/bookings"
+import { HEADER_TABS } from "@/modules/Booking/model/utils"
+import { EBookingView } from "@/modules/Booking/model/types/BookingGridTypes"
 
 type TProps = {
   onChangeTab: (tab: EBookingView) => void

src/modules/Booking/components/bookingFactory/bookingFactory.tsx → src/modules/Booking/components/CreateBooking/bookingFactory/bookingFactory.tsx

@@ -1,4 +1,4 @@
-import useBookingStore from "../../store/BookingStore"
+import useBookingStore from "../../../store/BookingStore"
 import BookingScreen1 from "../steps/BookingScreen1"
 import BookingScreen2 from "../steps/BookingScreen2"
 import BookingScreen3 from "../steps/BookingScreen3"

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

@@ -0,0 +1,104 @@
+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>
+  bookingData: DeepPartial<IBookingForm>
+}
+
+export const CategoryRoomsForm = (props: CategoryRoomsProps) => {
+  const { form, bookingData } = props
+  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
+        control={control}
+        name="categories"
+        render={({ field }) => {
+          return (
+            <CategorySelect
+              className="w-64"
+              onChange={args => {
+                resetField("rooms")
+                setBookingData({ ...bookingData, rooms: "" })
+                return field.onChange(args)
+              }}
+              value={field.value || bookingData.categories || ""}
+              error={errors?.categories?.message}
+              categories={categories || []}
+              isErrorRequest={isErrorCategories}
+            />
+          )
+        }}
+      />
+
+      <Controller
+        control={control}
+        name="rooms"
+        disabled={!filteredRooms?.length}
+        render={({ field }) => {
+          if (dirtyFields.categories || bookingData.categories?.length) {
+            return (
+              <RoomSelect
+                className="w-64"
+                onChange={args => {
+                  const curRoom = rooms?.find(
+                    room => room.number === field.value
+                  ) as RoomDto
+                  if (curRoom) setRoom(curRoom)
+                  return field.onChange(args)
+                }}
+                value={field.value || bookingData.rooms || ""}
+                error={errors?.rooms?.message}
+                rooms={filteredRooms || []}
+                isErrorRequest={isErrorRooms}
+                disabled={!filteredRooms?.length}
+              />
+            )
+          }
+          return <></>
+        }}
+      />
+    </section>
+  )
+}