From 206b00757ea6457f5a4b6b7079923b3e3bd3628e Mon Sep 17 00:00:00 2001 From: YanDavl Date: Wed, 2 Apr 2025 16:05:12 +0300 Subject: [PATCH] add BokkingSearchBar --- src/App.tsx | 3 + .../BookingGrid/gridHeader/GridHeader.tsx | 8 +- .../BookingSearch/BookingSearchBar.tsx | 98 +++++++++++++++++++ .../BookingSearch/BookingSearchBarItem.tsx | 14 +++ .../BookingSearch/BookingSearchBarList.tsx | 17 ++++ .../components/BookingSearch/BookingType.tsx | 23 +++++ .../pages/BookingGridPage/BookingGridPage.tsx | 30 +++++- .../Employee/components/EmployeePageBody.tsx | 2 +- 8 files changed, 185 insertions(+), 10 deletions(-) create mode 100644 src/modules/Booking/components/BookingSearch/BookingSearchBar.tsx create mode 100644 src/modules/Booking/components/BookingSearch/BookingSearchBarItem.tsx create mode 100644 src/modules/Booking/components/BookingSearch/BookingSearchBarList.tsx create mode 100644 src/modules/Booking/components/BookingSearch/BookingType.tsx diff --git a/src/App.tsx b/src/App.tsx index 992acf2..f4b66c0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -7,7 +7,10 @@ import { NotificationContainer } from "./contexts/notificationContext/Notificati + + function App() { + const router = createBrowserRouter(routes) const [queryClient] = useState( () => diff --git a/src/modules/Booking/components/BookingGrid/gridHeader/GridHeader.tsx b/src/modules/Booking/components/BookingGrid/gridHeader/GridHeader.tsx index 02c17b5..d10ed41 100644 --- a/src/modules/Booking/components/BookingGrid/gridHeader/GridHeader.tsx +++ b/src/modules/Booking/components/BookingGrid/gridHeader/GridHeader.tsx @@ -1,10 +1,9 @@ import { Stack } from "@mui/material" 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" +import { BookingSearchBar } from "../../BookingSearch/BookingSearchBar" type TProps = { onChangeTab: (tab: EBookingView) => void @@ -37,11 +36,10 @@ export const GridHeader = ({ {tabs} - - completeOptions={[]} + diff --git a/src/modules/Booking/components/BookingSearch/BookingSearchBar.tsx b/src/modules/Booking/components/BookingSearch/BookingSearchBar.tsx new file mode 100644 index 0000000..f5cc94a --- /dev/null +++ b/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) => ( + + + + + + + + + + + + + +) + +type BookingProps = { + placeholder?: string + completeOptions?: BookingDt[] + isLoading?: boolean + search: string + onSearchChange: (Booking: string) => void +} + +export const BookingSearchBar: React.FC = props => { + const { + search, + onSearchChange, + } = props + + const handleDebounceInputChange = debounce((_, value) => { + onSearchChange(value) + }, 100) + + return ( + + + + + handleDebounceInputChange('', event.target.value)} + value={search} + /> + + ) +} + diff --git a/src/modules/Booking/components/BookingSearch/BookingSearchBarItem.tsx b/src/modules/Booking/components/BookingSearch/BookingSearchBarItem.tsx new file mode 100644 index 0000000..d8ea2ac --- /dev/null +++ b/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 = ({ Booking }) => { + return ( +
+ Кличка: {Booking.PetDt.name}, Хозяин: {Booking.PetDt.ownerShortDt.firstName} {Booking.PetDt.ownerShortDt.lastName}, номер телефона: {Booking.PetDt.ownerShortDt.phoneNumber} +
+ ); +} \ No newline at end of file diff --git a/src/modules/Booking/components/BookingSearch/BookingSearchBarList.tsx b/src/modules/Booking/components/BookingSearch/BookingSearchBarList.tsx new file mode 100644 index 0000000..e6abc61 --- /dev/null +++ b/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 = ({ Bookings }) => { + return ( +
+ {Bookings.map(Booking => + + )} +
+ ); +} diff --git a/src/modules/Booking/components/BookingSearch/BookingType.tsx b/src/modules/Booking/components/BookingSearch/BookingType.tsx new file mode 100644 index 0000000..47116f5 --- /dev/null +++ b/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; +} + + + diff --git a/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx b/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx index 5494494..90822cd 100644 --- a/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx +++ b/src/modules/Booking/pages/BookingGridPage/BookingGridPage.tsx @@ -33,12 +33,33 @@ const getLastDateForBookingGridRequest = (view: EBookingView): string => { return dayjs().add(1, "day").format("YYYY-MM-DD") } } +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("") + const searchBookingsFilter = Bookings?.filter(Booking => { + return Booking.PetDt.name.toLowerCase().includes(queue.toLowerCase()) + }) + const handleSearchChange = (inputStr: string) => { + setQueue(inputStr) + } + + + + + const [activeTabHeader, setActiveTabHeader] = useState( HEADER_TABS[0] ) - const [queue, setQueue] = useState("") + const daysForBookingGrid = useBookingGridGenerator(activeTabHeader.value) @@ -84,7 +105,7 @@ export const BookingGridPage: FC = () => {
@@ -163,8 +184,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 @@ -201,6 +222,7 @@ export const BookingGridPage: FC = () => {
+ {queue && } ) } diff --git a/src/modules/Employee/components/EmployeePageBody.tsx b/src/modules/Employee/components/EmployeePageBody.tsx index 26747f6..a208dfc 100644 --- a/src/modules/Employee/components/EmployeePageBody.tsx +++ b/src/modules/Employee/components/EmployeePageBody.tsx @@ -74,7 +74,7 @@ export const EmployeePageBody: React.FC = props => { ) : ( - (employees || []).map(employee => ( + (employees || [])?.map(employee => (