Merge pull request #4 from moevm/PatientPage

Added patient page

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, string> = {
   [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]: "*",

frontend/src/Config/timeRepresentationConfig.ts

@@ -0,0 +1,4 @@
+
+export const timeRepresentationOptions = {year: 'numeric', month: 'numeric', day: 'numeric', hour: '2-digit', minute: '2-digit'}
+
+

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 (
+    <>
+      <Header profileButton={<ProfileButton/>} signOutButton={<SignOutButton/>} />
+      <div className="px-14 font-bold min-w-fit">
+        <h3 className="text-2xl my-7">Hello, <span className="text-base1">{person.name}</span>!</h3>
+        <FilterCard theme="primary" onChange={onChange} dropFilter={dropFilter}>
+          <div>
+            <label htmlFor="" className="block ml-3">Date</label>
+            <FormInput name={"date"} type="datetime-local"/>
+          </div>
+          <div>
+            <label htmlFor="" className="block ml-3">Procedure</label>
+            <FormInput name={"procedure"} placeholder="Name"/>
+          </div>
+          <div>
+            <label htmlFor="" className="block ml-3">Doctor</label>
+            <FormInput name={"doctor"} placeholder="Name"/>
+          </div>
+        </FilterCard>
+        <RecordsStand name={"Upcoming Appointments"} theme={"primary"}>
+          <div className={`${gridCol3} text-2xl my-4`}>
+            <h4 >Date</h4>
+            <h4>Procedure</h4>
+            <h4>Doctor</h4>
+          </div>
+          <ul className="w-full">
+            {records.map((currentValue, idx) =>
+              <div key={idx}  className={`${gridCol3} text-lg font-medium mb-7`}>
+                <li>{currentValue.date}</li>
+                <li>{currentValue.procedure}</li>
+                <li>{currentValue.doctor}</li>
+              </div>)}
+          </ul>
+        </RecordsStand>
+      </div>
+
+    </>
+  )
+}
+
+export default PatientPage

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() {
           <p className="my-10 text-white text-2xl">
             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.
           </p>
-          <div className="flex flex-col justify-evenly h-32 items-center">
-            <LoginButton theme="primary" children="Log in"></LoginButton>
+          <form className="flex flex-col justify-evenly h-32 items-center">
+            <LoginButton theme="primary" children="Log in" onClick={onClick}/>
             {/*<LoginButton theme="secondary" children="Sign Up"></LoginButton>*/}
-          </div>
+          </form>
         </FormCard>
         <div className="">
           <img className="bg-base1 rounded-full " src="src/assets/doctor-img1.png" alt=""/>

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, RouteProps> = {
   [AppRoutes.WELCOME]: {
@@ -16,6 +17,10 @@ const routes: Record<AppRoutes, RouteProps> = {
     path: RoutePaths.login,
     element: <LoginPage />,
   },
+  [AppRoutes.PATIENT]: {
+    path: RoutePaths.patient,
+    element: <PatientPage />,
+  },
   // [AppRoutes.FEED]: {
   //   path: RoutePaths.feed,
   //   element: <>Feed</>,

frontend/src/Widgets/FilterCard/FilterCard.tsx

@@ -0,0 +1,33 @@
+import { ReactElement, FormEventHandler, MouseEventHandler } from "react";
+
+interface FilterCardProps {
+  onChange: FormEventHandler<HTMLDivElement> | undefined,
+  dropFilter: MouseEventHandler<HTMLButtonElement> | undefined,
+  children: Array<ReactElement>,
+  theme: "primary" | "secondary",
+}
+
+function FilterCard({onChange, children, dropFilter, theme}: FilterCardProps) {
+  const bgStyle = {
+    "primary": "bg-base2",
+    "secondary": "bg-base3"
+  }
+  return (
+    <>
+      <div className={`${bgStyle[theme]} rounded-3xl py-4 px-10 my-4`}>
+        <h2 className="text-2xl">Filter by</h2>
+        <div className="flex justify-between mt-6 mb-3 text-xl" onChange={onChange}>
+          {children}
+        </div>
+        <button onClick={dropFilter}
+                className="bg-black bg-opacity-30 p-3 rounded-3xl
+                  text-darkPurple text-opacity-80 mt-3">
+          Drop filter
+        </button>
+      </div>
+    </>
+  )
+}
+
+
+export default FilterCard

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) {

frontend/src/Widgets/RecordsStand/RecordsStand.tsx

@@ -0,0 +1,27 @@
+import {ReactElement} from "react";
+
+interface RecordsStandProps {
+  name: string,
+  theme: "primary" | "secondary",
+  children: Array<ReactElement>
+}
+
+function RecordsStand({name, theme, children}: RecordsStandProps) {
+
+  const bgStyle = {
+    "primary": "bg-base2",
+    "secondary": "bg-base3"
+  }
+
+  return (
+    <>
+      <div className={`${bgStyle[theme]} rounded-3xl flex flex-col items-center pt-4`}>
+        <h2 className="text-2xl mb-4">{name}</h2>
+        <hr className="w-11/12 opacity-50"/>
+        {children}
+      </div>
+    </>
+  )
+}
+
+export default RecordsStand