add BokkingSearchBar

Author: YanDavl

src/App.tsx

@@ -7,7 +7,10 @@ import { NotificationContainer } from "./contexts/notificationContext/Notificati
 
 
 
+
+
 function App() {
+
   const router = createBrowserRouter(routes)
   const [queryClient] = useState(
     () =>

src/modules/Booking/components/BookingSearch/BookingSearchBar.tsx

@@ -0,0 +1,98 @@
+import {
+    styled,
+    alpha,
+    SvgIcon,
+    debounce,
+} from "@mui/material"
+import { SvgIconProps } from "@mui/material/SvgIcon"
+import { BookingDt } from "./BookingType"
+import { CustomInputBase } from "@/shared/ui/Inputs/CustomInputBase/CustomInputBase"
+
+const Search = styled("div")(({ theme }) => ({
+    display: "flex",
+    alignItems: "center",
+    borderRadius: "24px",
+    backgroundColor: alpha(theme.palette.common.white, 1),
+    border: "2px solid #D0CFCF",
+    padding: "0 3px",
+    marginTop: "-5px",
+    width: "461px",
+}))
+
+const SearchIconWrapper = styled("div")(({ theme }) => ({
+    padding: theme.spacing(0, 1),
+    height: "100%",
+    pointerEvents: "none",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+}))
+
+
+const SearchIcon = (props: SvgIconProps) => (
+    <SvgIcon {...props}>
+        <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            style={{ width: 16, height: 16 }}
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+        >
+            <g clipPath="url(#clip0_4136_1067)">
+                <path
+                    d="M7.33333 13.6667C10.8311 13.6667 13.6667 10.8311 13.6667 7.33333C13.6667 3.83553 10.8311 1 7.33333 1C3.83553 1 1 3.83553 1 7.33333C1 10.8311 3.83553 13.6667 7.33333 13.6667Z"
+                    stroke="#181A1A"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+                <path
+                    d="M14.3333 14.3333L13 13"
+                    stroke="#181A1A"
+                    strokeWidth="1.5"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                />
+            </g>
+            <defs>
+                <clipPath id="clip0_4136_1067">
+                    <rect width="16" height="16" fill="white" />
+                </clipPath>
+            </defs>
+        </svg>
+    </SvgIcon>
+)
+
+type BookingProps = {
+    placeholder?: string
+    completeOptions?: BookingDt[]
+    isLoading?: boolean
+    search: string
+    onSearchChange: (Booking: string) => void
+}
+
+export const BookingSearchBar: React.FC<BookingProps> = props => {
+    const {
+        search,
+        onSearchChange,
+    } = props
+
+    const handleDebounceInputChange = debounce((_, value) => {
+        onSearchChange(value)
+    }, 100)
+
+    return (
+        <Search >
+            <SearchIconWrapper>
+                <SearchIcon width={"16px"} height={"16px"} />
+            </SearchIconWrapper>
+            <CustomInputBase className='border-none h-10'
+                placeholder="Введите ФИО, телефон или кличку питомца"
+                onChange={event => handleDebounceInputChange('', event.target.value)}
+                value={search}
+            />
+        </Search>
+    )
+}
+

src/modules/Booking/components/BookingSearch/BookingSearchBarItem.tsx

@@ -0,0 +1,14 @@
+import { FC } from "react";
+import { BookingDt } from "./BookingType";
+
+interface BookingSearchItemProps {
+    Booking: BookingDt;
+}
+
+export const BookingSearchItem: FC<BookingSearchItemProps> = ({ Booking }) => {
+    return (
+        <div key={Booking.id} className='p-4 border-indigo-600 mb-1'>
+            Кличка: {Booking.PetDt.name}, Хозяин: {Booking.PetDt.ownerShortDt.firstName} {Booking.PetDt.ownerShortDt.lastName}, номер телефона: {Booking.PetDt.ownerShortDt.phoneNumber}
+        </div>
+    );
+}

src/modules/Booking/components/BookingSearch/BookingSearchBarList.tsx

@@ -0,0 +1,17 @@
+import { FC } from "react";
+import { BookingDt } from "./BookingType";
+import { BookingSearchItem } from "./BookingSearchBarItem";
+
+interface BookingSearchListProps {
+    Bookings: BookingDt[];
+}
+
+export const BookingSearchList: FC<BookingSearchListProps> = ({ Bookings }) => {
+    return (
+        <div>
+            {Bookings.map(Booking =>
+                <BookingSearchItem Booking={Booking} />
+            )}
+        </div>
+    );
+}

src/modules/Booking/components/BookingSearch/BookingType.tsx

@@ -0,0 +1,23 @@
+
+export interface OwnerShortDt {
+    firstName: string;
+    lastName: string;
+    phoneNumber: string;
+}
+
+export interface PetDt {
+    name: string;
+    birthDate?: string;
+    breed?: string;
+    color?: string;
+    sex?: string;
+    ownerShortDt: OwnerShortDt;
+}
+
+export interface BookingDt {
+    id: number;
+    PetDt: PetDt;
+}
+
+
+

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

@@ -2,9 +2,8 @@ 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 { BookingSearchBar } from "../BookingSearch/BookingSearchBar"
 
 type TProps = {
   onChangeTab: (tab: EBookingView) => void
@@ -37,11 +36,10 @@ export const GridHeader = ({
         {tabs}
       </Stack>
       <Stack>
-        <SearchComponent<BookingDto>
-          completeOptions={[]}
+        <BookingSearchBar
           onSearchChange={onQueueChange}
           search={queue}
-          optionName="price"
+          placeholder="Введите ФИО, телефон или кличку питомца"
         />
       </Stack>
     </Stack>

src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx

@@ -19,12 +19,33 @@ import { useGetAllRooms } from "@/modules/Rooms/api/queries"
 import { EPageMode } from "@/modules/Rooms/pages/RoomsPage"
 import { BookingCell } from "../../components/BookingCell/BookingCell"
 import { CircularProgress } from "@mui/material"
+import { BookingDt } from "../../components/BookingSearch/BookingType"
+import { BookingSearchList } from "../../components/BookingSearch/BookingSearchBarList"
+
+
+const Bookings: BookingDt[] = [
+  { id: 1, PetDt: { name: 'Барсик', ownerShortDt: { firstName: "Иван", lastName: "Иванов", phoneNumber: "+7 (900) 123-45-67" } } },
+  { id: 2, PetDt: { name: 'Кеша', ownerShortDt: { firstName: "Петр", lastName: "Ильич", phoneNumber: "+7 (900) 123-45-67" } } },
+  { id: 3, PetDt: { name: 'Лелик', ownerShortDt: { firstName: "Федр", lastName: "Александрович", phoneNumber: "+7 (900) 123-45-67" } } },
+]
 
 export const BookingGridPage: FC = () => {
+  const [queue, setQueue] = useState<string>("")
+  const searchBookingsFilter = Bookings?.filter(Booking => {
+    return Booking.PetDt.name.toLowerCase().includes(queue.toLowerCase())
+  })
+  const handleSearchChange = (inputStr: string) => {
+    setQueue(inputStr)
+  }
+
+
+
+
+
   const [activeTabHeader, setActiveTabHeader] = useState<TTabForHeader>(
     HEADER_TABS[0]
   )
-  const [queue, setQueue] = useState<string>("")
+
 
   const handleTabChange = useCallback((tab: EBookingView) => {
     const selected = HEADER_TABS.find(el => el.value === tab)
@@ -70,7 +91,7 @@ export const BookingGridPage: FC = () => {
         <div className="py-4 px-6">
           <GridHeader
             onChangeTab={handleTabChange}
-            onQueueChange={setQueue}
+            onQueueChange={handleSearchChange}
             queue={queue}
             selectedTab={activeTabHeader.value}
           />
@@ -154,8 +175,8 @@ export const BookingGridPage: FC = () => {
                               index <= bookingInfo.endIndex
                             const color =
                               mapBookingStatusToColor[
-                                bookingInfo.booking.status ??
-                                  BookingDtoStatus.STATUS_INITIAL
+                              bookingInfo.booking.status ??
+                              BookingDtoStatus.STATUS_INITIAL
                               ]
                             const clientName = getFullName(
                               bookingInfo.booking?.pets?.[0]?.ownerShortDto
@@ -191,6 +212,7 @@ export const BookingGridPage: FC = () => {
           </table>
         </div>
       </div>
+      {queue && <BookingSearchList Bookings={searchBookingsFilter} />}
     </div>
   )
 }

src/modules/Employee/components/EmployeePageBody.tsx

@@ -74,7 +74,7 @@ export const EmployeePageBody: React.FC<TProps> = props => {
                 </TableCell>
               </TableRow>
             ) : (
-              (employees || []).map(employee => (
+              (employees || [])?.map(employee => (
                 <EmployeeRowItem
                   key={employee.id}
                   employee={employee}