fixed filters

moevm · Dec 24, 2023 · e3c16f5 · e3c16f5
1 parent da90861
commit e3c16f5
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 51 deletions.
diff --git a/frontend/src/Pages/DoctorPage/DoctorPage.tsx b/frontend/src/Pages/DoctorPage/DoctorPage.tsx
@@ -4,7 +4,6 @@ import FilterCard from "../../Widgets/FilterCard/FilterCard.tsx";
 import FormInput from "../../Components/FormInput/FormInput.tsx";
 import RecordsStand from "../../Widgets/RecordsStand/RecordsStand.tsx";
 import {useEffect, useState} from "react";
-import {timeRepresentationOptions} from "../../Config/timeRepresentationConfig.ts";
 import {useSelector} from "react-redux";
 import {getDoctorById} from "../../api/requests.ts";
 import {useNavigate} from "react-router-dom";
@@ -29,41 +28,28 @@ function DoctorPage() {
   }, []);
 
 
-  const onChange = (event: any) => {
-    const target = event.target
-    const comparators: {[index: string]: any} = {
-      'date': (x: any) => x.date == (new Date(target.value).toLocaleString('ru-RU', timeRepresentationOptions)),
-      'procedure': (x: any) => x.procedure.includes(target.value),
-      'patient': (x: any) => x.patient.includes(target.value)
-    }
-    console.log(target.value)
-    setAppointments(appointments.filter(comparators[target.name]))
-  }
-
+  const [filter, setFilter] = useState('')
   const dropFilter = () => {
+    setFilter('')
     setAppointments(info.appointments)
   }
+  const onChange = (e: any) => {
+    const value: any = e.target.value
+    // @ts-ignore
+    setFilter(value)
+    const tmp = info.appointments.filter((x: any) => x.date.includes(value) || x.procedure.includes(value) || x.patient.includes(value))
+    setAppointments(tmp)
+  }
 
   const gridCol3 = "w-full grid grid-cols-3 justify-items-center"
 
   return (
     <>
       <Header signOutButton={<SignOutButton />} />
       <div className="px-14 font-bold min-w-fit">
-        <h3 className="text-2xl my-7">Hello, <span className="text-base1">{info.name}</span>!</h3>
-        <FilterCard theme="primary" dropFilter={dropFilter} onChange={onChange}>
-          <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">Patient</label>
-            <FormInput name={"patient"} placeholder="Name"/>
-          </div>
+        <h3 className="text-2xl my-7">Hello, <span className="text-base1">Dr. {info.name}</span>!</h3>
+        <FilterCard theme="primary" dropFilter={dropFilter} onChange={onChange} >
+          <FormInput name={"filter_input"} type="text" value={filter} />
         </FilterCard>
         <RecordsStand name={"Upcoming Appointments"} theme={"primary"}>
           <div className={`${gridCol3} text-2xl my-4`}>

diff --git a/frontend/src/Pages/PatientPage/PatientPage.tsx b/frontend/src/Pages/PatientPage/PatientPage.tsx
@@ -7,7 +7,6 @@ import RecordsStand from "../../Widgets/RecordsStand/RecordsStand.tsx";
 import {useNavigate} from "react-router-dom";
 import {useSelector} from "react-redux";
 import {getPatientById} from "../../api/requests.ts";
-import {timeRepresentationOptions} from "../../Config/timeRepresentationConfig.ts";
 
 function PatientPage() {
 
@@ -30,40 +29,29 @@ function PatientPage() {
       })
   }, []);
 
-  const onChange = (event: any) => {
-    const target = event.target
-    const comparators: {[index: string]: any} = {
-      'date': (x: any) => x.date == (new Date(target.value).toLocaleString('ru-RU', timeRepresentationOptions)),
-      'procedure': (x: any) => x.procedure.includes(target.value),
-      'doctor': (x: any) => x.doctor.includes(target.value)
-    }
-    setAppointments(appointments.filter(comparators[target.name]))
-  }
-
+  const [filter, setFilter] = useState('')
   const dropFilter = () => {
+    setFilter('')
     setAppointments(info.appointments)
   }
 
+  const onChange = (e: any) => {
+    const value: any = e.target.value
+    // @ts-ignore
+    setFilter(value)
+    const tmp = info.appointments.filter((x: any) => x.date.includes(value) || x.procedure.includes(value) || x.doctor.includes(value))
+    setAppointments(tmp)
+  }
+
   const gridCol3 = "w-full grid grid-cols-3 justify-items-center"
 
   return (
     <>
       <Header signOutButton={<SignOutButton/>} />
       <div className="px-14 font-bold min-w-fit">
         <h3 className="text-2xl my-7">Hello, <span className="text-base1">{info.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 theme="primary" dropFilter={dropFilter} onChange={onChange} >
+          <FormInput name={"filter_input"} type="text" value={filter} />
         </FilterCard>
         <RecordsStand name={"Upcoming Appointments"} theme={"primary"}>
           <div className={`${gridCol3} text-2xl my-4`}>

diff --git a/frontend/src/Widgets/FilterCard/FilterCard.tsx b/frontend/src/Widgets/FilterCard/FilterCard.tsx
@@ -15,7 +15,7 @@ function FilterCard({onChange, children, dropFilter, theme}: FilterCardProps) {
   return (
     <>
       <div className={`${bgStyle[theme]} rounded-3xl py-4 px-10 my-4`}>
-        <h2 className="text-2xl">Filter by</h2>
+        <h2 className="text-2xl">Filter</h2>
         <div className="flex justify-between mt-6 mb-3 text-xl" onChange={onChange}>
           {children}
         </div>