Merge branch 'main' of https://github.com/mohammedalakhras/5th-Year-P…

…roject

frontOf5thYearProject/src/components/Patinet Screens/FindADoctor/CardSection.jsx

@@ -0,0 +1,26 @@
+/* eslint-disable react/prop-types */
+//import components
+import DoctorCard from "./DoctorCard";
+//import mui component
+import { Box, Grid, Typography } from "@mui/material";
+export default function CardSection({doctors}) {
+  if(doctors == "" ){
+    return <Typography variant="subtitle1" fontSize="20px" fontWeight="bold">there are no doctors</Typography>
+  }
+  return (
+    <Box sx={{width:'90%' , margin:'50px auto'}}>
+      <Grid container spacing={3}>
+      {
+      doctors.data.length >= 0 && doctors.data.map((element)=>{
+        return (<Grid key={element.id} item xs={6}>
+          <DoctorCard name={element.full_name} id={element.id} profile={element.profile} />
+        </Grid>)
+      })
+      }
+      </Grid>
+      {
+        doctors.data.length === 0 && <Typography variant="subtitle1" fontSize="20px" fontWeight="bold">there are no doctors</Typography>
+      }
+    </Box>
+  );
+}

frontOf5thYearProject/src/components/Patinet Screens/FindADoctor/DoctorCard.jsx

@@ -1,6 +1,22 @@
+/* eslint-disable react/prop-types */
+import { useContext } from 'react';
+import {MainContext} from '../../../pages/App'
+//import mui component
+import {Stack , Button , Avatar , Typography, Box} from '@mui/material';
 
-export default function DoctorCard() {
+export default function DoctorCard({name , profile}) {
+  const {IsMobileValue } = useContext(MainContext)
+  const [isMobile ]= IsMobileValue
   return (
-    <div>DoctorCard</div>
+    <Box sx={{bgcolor:'#ddd' , borderRadius:'10px' , p:'10px' , width:'100%'}}>
+      <Stack direction='row' justifyContent='center'textAlign='center' gap={2}>
+        <Avatar src={profile} sx={{width:'30px' , height:'30px' , display:'inline-block'}} />
+        <Typography variant='subtitle1' sx={{color: '#787878'}}>
+          {name}
+        </Typography>
+        {!isMobile && <Button sx={{bgcolor:'var(--secondary)' , color:'white' , height:'30px'}}> عرض </Button>}
+      </Stack>
+      {isMobile && <Button sx={{bgcolor:'var(--secondary)' , color:'white' , height:'30px'}}> عرض </Button>}   
+    </Box>
   )
 }

frontOf5thYearProject/src/components/Patinet Screens/FindADoctor/FilterList.jsx

@@ -1,7 +1,97 @@
+import { useEffect, useState } from "react";
+import { useLoaderData } from "react-router-dom";
+//import mui components
+import {
+  Box,
+  Select,
+  MenuItem,
+  InputLabel,
+  FormControl,
+  Grid,
+  Typography,
+} from "@mui/material";
+//import functions
+import filteringDoctor from "../../../functions/filteringDoctor";
 
-
-export default function FilterList() {
+// eslint-disable-next-line react/prop-types
+export default function FilterList({setDoctors}) {
+  const {countryData , specializationData} = useLoaderData();
+  const [specialization, setSpecialization] = useState("");
+  const [country, setCountry] = useState("");
+  useEffect(() => {
+    async function fetchdatafromServer(){
+      const data = await filteringDoctor(specialization , country);
+      setDoctors(data);
+    }
+    fetchdatafromServer();
+  } , [country, specialization])
+  function handleSpecializationChange(e) {
+    setSpecialization(e.target.value);
+  }
+  function handleCountryChange(e) {
+    setCountry(e.target.value);
+  }
   return (
-    <div>FilterList</div>
-  )
+    <Box sx={{ width: "90%", margin: "auto" }}>
+      <Grid container spacing={4}>
+        <Grid item xs={6}>
+          <FormControl fullWidth variant="filled" sx={{ direction: "rtl" }}>
+            <InputLabel id="demo-simple-select-label" 
+            sx={{
+              position: "absolute",
+              right: "45px",
+              textAlign: "right",
+            }}
+            >الأختاص</InputLabel>
+            <Select
+              label="الأختاص"
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              value={specialization}
+              onChange={handleSpecializationChange}
+            >
+              {
+               specializationData.data.length > 0 &&  specializationData.data.map((i)=>{return (<MenuItem key={i.id} value={i.id}>{i.name}</MenuItem>)})
+              }
+            </Select>
+               {
+                specializationData.data.length === 0 && (
+                  <Typography variant="subtitle1" color="red">لا يوجد أختاصاصات</Typography>
+                )
+              } 
+          </FormControl>
+        </Grid>
+        <Grid item xs={6}>
+          <FormControl fullWidth variant="filled">
+            <InputLabel
+              id="demo-simple-select-label"
+              sx={{
+                position: "absolute",
+                right: "45px",
+                textAlign: "right",
+              }}
+            >
+              المحافظة
+            </InputLabel>
+            <Select
+              label="المحافظة"
+              labelId="demo-simple-select-label"
+              id="demo-simple-select"
+              value={country}
+              onChange={handleCountryChange}
+            >
+              {
+              countryData.data.length > 0 &&   countryData.data.map((i)=>{return (<MenuItem key={i.id} value={i.id}>{i.name}</MenuItem>)})
+              }
+            </Select>
+            {
+                countryData.data.length === 0 && (
+                  <Typography variant="subtitle1" color="red">لا يوجد محافظات</Typography>
+                )
+              } 
+          </FormControl>
+        </Grid>
+      </Grid>
+    </Box>
+  );
 }

frontOf5thYearProject/src/functions/filteringDoctor.js

@@ -0,0 +1,10 @@
+export default async function filteringDoctor( specialization,country ){
+    const data = await fetch(`http://127.0.0.1:8000/api/pation/search/doctor?${specialization !== "" ? ("spec_id="+specialization) : ""}${specialization!== "" ? (country !=="" ? ("&city_id="+country) : "") :   (country !=="" ? ("city_id="+country) : "") }`, {
+    method: "POST",    
+    headers:{
+            Authorization : `Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOi8vMTI3LjAuMC4xOjgwMDAvYXBpL2xvZ2luIiwiaWF0IjoxNzE1Njc0OTA5LCJleHAiOjE3Mjg2MzQ5MDksIm5iZiI6MTcxNTY3NDkwOSwianRpIjoiYmFpVU5pRm9vRk1DdlBnTCIsInN1YiI6IjIiLCJwcnYiOiI3Mjg5Mjk4OGE5MWNjNGM3NmEzNDE1YzA4MjUzN2U5NWJhOTkzMGVhIn0.pZ5ckl0SHLD9zG6zDTpSMbNauMGB5xcCR11y1SL6cAU`
+        }
+    }).then((data)=>{return data.json()});
+    // console.log(data)
+    return data
+}

frontOf5thYearProject/src/functions/getSpecializationAndCountry.js

@@ -0,0 +1,8 @@
+export async function getSpecializationAndCounters(){
+    const specializationData =await fetch('http://127.0.0.1:8000/api/specilazations').then((data) => { return data.json()});
+
+    const countryData =await fetch('http://127.0.0.1:8000/api/cites').then((data) => { return data.json()});
+
+
+    return { specializationData: specializationData , countryData: countryData}
+}

frontOf5thYearProject/src/index.css

@@ -15,6 +15,10 @@
   line-height: 1.15; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
 }
+.css-mteo7j-MuiFormLabel-root-MuiInputLabel-root.Mui-focused{
+  position:absolute !important;
+  right:-10px !important;
+}
 
 /* Sections
    ========================================================================== */

frontOf5thYearProject/src/main.jsx

@@ -7,6 +7,8 @@ import store from "./stor/index.js";
 import { Provider } from "react-redux";
 
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
+
+//import router components 
 import Logging from "./pages/Logging.jsx";
 import SignUpInputs from "./components/Signup And Login/SignUpInputs.jsx";
 import LoginInputs from "./components/Signup And Login/LoginInputs.jsx";
@@ -15,6 +17,11 @@ import EditProfile from "./pages/Patient Screens/EditProfile.jsx";
 import Home from "./pages/Patient Screens/Home.jsx";
 import getTokenFromLocalStorage from "./functions/getTokenFromLocalStorage.js";
 import FindADoctor from "./pages/Patient Screens/FindADoctor.jsx";
+import InfoOfDoctor from "./pages/Patient Screens/InfoOfDoctor.jsx";
+
+
+//import data function 
+import { getSpecializationAndCounters } from "./functions/getSpecializationAndCountry.js";
 const router = createBrowserRouter([
   {
     path: "/",
@@ -36,7 +43,8 @@ const router = createBrowserRouter([
         loader: getTokenFromLocalStorage,
       },
       { path: "/editProfile", element: <EditProfile /> },
-      { path: '/find_doctor', element: <FindADoctor />}
+      { path: '/find_doctor', element: <FindADoctor /> , loader:getSpecializationAndCounters},
+      { path: '/doctoer_details', element: <InfoOfDoctor />}
     ],
   },
   {

frontOf5thYearProject/src/pages/Patient Screens/FindADoctor.jsx

@@ -1,7 +1,17 @@
-import DoctorCard from "../../components/Patinet Screens/FindADoctor/DoctorCard"
+import { useState } from 'react'
+//import mui components
+import {Box} from '@mui/material'
+//import components 
 import FilterList from "../../components/Patinet Screens/FindADoctor/FilterList"
+import CardSection from '../../components/Patinet Screens/FindADoctor/CardSection'
+//import css file 
+import classes from './Profile.module.css'
 export default function FindADoctor() {
+  const [doctors , setDoctors ] = useState([]) ;
   return (
-    <div>FindADoctor</div>
+    <Box className={classes.container} textAlign='center'>
+        <FilterList setDoctors={setDoctors}/>
+        <CardSection doctors={doctors}/>
+    </Box>
   )
 }

frontOf5thYearProject/src/pages/Patient Screens/InfoOfDoctor.jsx

@@ -0,0 +1,33 @@
+//import mui component 
+import { Typography , Box ,  Avatar , Stack, Button} from "@mui/material"
+//import css file 
+import classes from './Profile.module.css'
+
+import image from '../../assets/image/aghiad.jpg'
+export default function InfoOfDoctor() {
+  return (
+    <Box className={classes.container}>
+        <Typography variant="h5" sx={{marginRight:"30px"}}>معلومات الطبيب :</Typography>
+        <Box textAlign="center" bgcolor='white' borderRadius='20px' p={4} mt={2}>
+            <Avatar  src={image} sx={{width:'150px' , height:'150px' , margin:'auto'}} />
+            <Stack direction='row' >
+                <Typography variant="subtitle1" color="#787878">اسم الطبيب :</Typography>
+                <Typography variant="subtitle1" mr={3}>أحمدج</Typography>
+            </Stack>
+            <br />
+            <Stack direction='row'>
+                <Typography variant="subtitle1" color="#787878"> معلومات  :</Typography>
+                <Typography variant="subtitle1" mr={6}>أحمدج</Typography>
+            </Stack>
+            <br />
+            <Stack direction='row'>
+                <Typography variant="subtitle1" color="#787878">السيرة الذاتية  :</Typography>
+                <Typography variant="subtitle1" mr={2}>أحمدج</Typography>
+            </Stack>
+            <br />
+            <Button sx={{width : '200px' , backgroundColor:'var(--secondary)' , color :"white"}}>طلب موعد</Button>
+            <br />
+        </Box>
+    </Box>
+  )
+}