From bec04f5beb6538ebd93a2d4d99db353891be33d7 Mon Sep 17 00:00:00 2001 From: 10023r Date: Fri, 22 Dec 2023 16:09:16 +0300 Subject: [PATCH 1/2] added minor fixes --- frontend/src/Pages/WelcomePage/WelcomePage.tsx | 13 ++++++++++--- frontend/src/Widgets/Header/Header.tsx | 4 ++-- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/frontend/src/Pages/WelcomePage/WelcomePage.tsx b/frontend/src/Pages/WelcomePage/WelcomePage.tsx index 03d1a2e..d23f5ef 100644 --- a/frontend/src/Pages/WelcomePage/WelcomePage.tsx +++ b/frontend/src/Pages/WelcomePage/WelcomePage.tsx @@ -1,9 +1,16 @@ import Header from "../../Widgets/Header/Header.tsx"; import LoginButton from "../../Components/LoginButton/LoginButton.tsx"; import FormCard from "../../Components/FormCard/FormCard.tsx"; +import {FormEvent} from "react"; +import {useNavigate} from "react-router-dom"; function WelcomePage() { + const navigate = useNavigate() + const onClick = (e: FormEvent) => { + e.preventDefault() + navigate('/login') + } return ( <> @@ -22,10 +29,10 @@ function WelcomePage() {

Discover a brighter, healthier smile with us. Our experienced team is dedicated to providing top-quality dental care in a comfortable environment. We offer a range of services tailored to your unique needs. Schedule your appointment today and let us take care of your smile.

-
- +
+ {/**/} -
+
diff --git a/frontend/src/Widgets/Header/Header.tsx b/frontend/src/Widgets/Header/Header.tsx index 59d9e29..e62a711 100644 --- a/frontend/src/Widgets/Header/Header.tsx +++ b/frontend/src/Widgets/Header/Header.tsx @@ -1,8 +1,8 @@ import {ReactNode} from "react"; interface HeaderProps { - profileButton?: ReactNode | null; - signOutButton?: ReactNode | null; + profileButton?: ReactNode; + signOutButton?: ReactNode; } function Header({profileButton=null, signOutButton=null} : HeaderProps) { From bc7a00508dbbbfa8dfe72d8e3553b95988de5e8f Mon Sep 17 00:00:00 2001 From: 10023r Date: Fri, 22 Dec 2023 16:11:14 +0300 Subject: [PATCH 2/2] added patient page --- frontend/src/Config/routeConfig.ts | 2 + .../src/Config/timeRepresentationConfig.ts | 4 + .../src/Pages/PatientPage/PatientPage.tsx | 94 +++++++++++++++++++ frontend/src/Router/AppRouter.tsx | 5 + .../src/Widgets/FilterCard/FilterCard.tsx | 33 +++++++ .../src/Widgets/RecordsStand/RecordsStand.tsx | 27 ++++++ 6 files changed, 165 insertions(+) create mode 100644 frontend/src/Config/timeRepresentationConfig.ts create mode 100644 frontend/src/Pages/PatientPage/PatientPage.tsx create mode 100644 frontend/src/Widgets/FilterCard/FilterCard.tsx create mode 100644 frontend/src/Widgets/RecordsStand/RecordsStand.tsx diff --git a/frontend/src/Config/routeConfig.ts b/frontend/src/Config/routeConfig.ts index 87a9ba7..3eb8e27 100644 --- a/frontend/src/Config/routeConfig.ts +++ b/frontend/src/Config/routeConfig.ts @@ -3,6 +3,7 @@ export enum AppRoutes { WELCOME = "welcome", // REGISTER = "register", LOGIN = "login", + PATIENT = "patient" // FEED = "feed", // POST = "post", // NOT_FOUND = "notFound", @@ -25,6 +26,7 @@ export const RoutePaths: Record = { [AppRoutes.WELCOME]: '/' + AppRoutes.WELCOME, // [AppRoutes.REGISTER]: "/register", [AppRoutes.LOGIN]: "/login", + [AppRoutes.PATIENT]: "/patient" // [AppRoutes.FEED]: "/feed", // [AppRoutes.POST]: "/post/" + RouteParams.POST_ID, // [AppRoutes.NOT_FOUND]: "*", diff --git a/frontend/src/Config/timeRepresentationConfig.ts b/frontend/src/Config/timeRepresentationConfig.ts new file mode 100644 index 0000000..1b77781 --- /dev/null +++ b/frontend/src/Config/timeRepresentationConfig.ts @@ -0,0 +1,4 @@ + +export const timeRepresentationOptions = {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'} + + diff --git a/frontend/src/Pages/PatientPage/PatientPage.tsx b/frontend/src/Pages/PatientPage/PatientPage.tsx new file mode 100644 index 0000000..9dd4328 --- /dev/null +++ b/frontend/src/Pages/PatientPage/PatientPage.tsx @@ -0,0 +1,94 @@ +import Header from "../../Widgets/Header/Header.tsx"; +import ProfileButton from "../../Components/ProfileButton/ProfileButton.tsx"; +import SignOutButton from "../../Components/SignOutButton/SignOutButton.tsx"; +import FormInput from "../../Components/FormInput/FormInput.tsx"; +import {useState} from "react"; +import FilterCard from "../../Widgets/FilterCard/FilterCard.tsx"; +import RecordsStand from "../../Widgets/RecordsStand/RecordsStand.tsx"; +import {timeRepresentationOptions} from "../../Config/timeRepresentationConfig.ts"; + + +const person = { + name: "Patient1", + appointments: [ + { + id: 1, + date: "22.12.2023, 15:54", + doctor: "Doctor Doolittle", + procedure: "Procedure 1" + }, + { + id: 2, + date: "20.12.2012, 11:00", + doctor: "Doctor Aybolit", + procedure: "Procedure 2" + }, + { + id: 3, + date: "20.12.2022, 06:00", + doctor: "Doctor A", + procedure: "Procedure 2" + } + ] +} + +function PatientPage() { + const gridCol3 = "w-full grid grid-cols-3 justify-items-center" + + const [records, setRecords] = useState(person.appointments) + + const onChange = (event: any) => { + const target = event.target + const comparators = { + 'date': (x) => x.date.includes(new Date(target.value).toLocaleString('ru-RU', timeRepresentationOptions)), + 'procedure': (x) => x.procedure.includes(target.value), + 'doctor': (x) => x.doctor.includes(target.value) + } + setRecords(records.filter(comparators[target.name])) + } + + const dropFilter = () => { + setRecords(person.appointments) + } + + return ( + <> +
} signOutButton={} /> +
+

Hello, {person.name}!

+ +
+ + +
+
+ + +
+
+ + +
+ + +
+

Date

+

Procedure

+

Doctor

+
+
    + {records.map((currentValue, idx) => +
    +
  • {currentValue.date}
    • +
  • {currentValue.procedure}
    • +
  • {currentValue.doctor}
    • +
    )} +
+ +
+ + + ) +} + +export default PatientPage \ No newline at end of file diff --git a/frontend/src/Router/AppRouter.tsx b/frontend/src/Router/AppRouter.tsx index 5ce356a..1e9e651 100644 --- a/frontend/src/Router/AppRouter.tsx +++ b/frontend/src/Router/AppRouter.tsx @@ -2,6 +2,7 @@ import WelcomePage from "../Pages/WelcomePage/WelcomePage.tsx"; import {AppRoutes, RoutePaths} from "../Config/routeConfig.ts"; import { Route, Routes, RouteProps } from "react-router-dom"; import LoginPage from "../Pages/LoginPage/LoginPage.tsx"; +import PatientPage from "../Pages/PatientPage/PatientPage.tsx"; const routes: Record = { [AppRoutes.WELCOME]: { @@ -16,6 +17,10 @@ const routes: Record = { path: RoutePaths.login, element: , }, + [AppRoutes.PATIENT]: { + path: RoutePaths.patient, + element: , + }, // [AppRoutes.FEED]: { // path: RoutePaths.feed, // element: <>Feed, diff --git a/frontend/src/Widgets/FilterCard/FilterCard.tsx b/frontend/src/Widgets/FilterCard/FilterCard.tsx new file mode 100644 index 0000000..9b36e21 --- /dev/null +++ b/frontend/src/Widgets/FilterCard/FilterCard.tsx @@ -0,0 +1,33 @@ +import { ReactElement, FormEventHandler, MouseEventHandler } from "react"; + +interface FilterCardProps { + onChange: FormEventHandler | undefined, + dropFilter: MouseEventHandler | undefined, + children: Array, + theme: "primary" | "secondary", +} + +function FilterCard({onChange, children, dropFilter, theme}: FilterCardProps) { + const bgStyle = { + "primary": "bg-base2", + "secondary": "bg-base3" + } + return ( + <> +
+

Filter by

+
+ {children} +
+ +
+ + ) +} + + +export default FilterCard \ No newline at end of file diff --git a/frontend/src/Widgets/RecordsStand/RecordsStand.tsx b/frontend/src/Widgets/RecordsStand/RecordsStand.tsx new file mode 100644 index 0000000..644643c --- /dev/null +++ b/frontend/src/Widgets/RecordsStand/RecordsStand.tsx @@ -0,0 +1,27 @@ +import {ReactElement} from "react"; + +interface RecordsStandProps { + name: string, + theme: "primary" | "secondary", + children: Array +} + +function RecordsStand({name, theme, children}: RecordsStandProps) { + + const bgStyle = { + "primary": "bg-base2", + "secondary": "bg-base3" + } + + return ( + <> +
+

{name}

+
+ {children} +
+ + ) +} + +export default RecordsStand \ No newline at end of file