yousif ahmed

src/App.js

@@ -1,12 +1,11 @@
-import './App.css';
-
-const App = ()=>{
-  // State here
+// import logo from "./logo.svg";
+import "./App.css";
+import PatientForm from "./component/Patient/Patient Form";
+import Users from "./component/testing/users";
+function App() {
   return (
     <div className="App">
-      {/* Add new patient FORM */}
-      {/* Search input */}
-      {/* Table */}
+      <PatientForm />
     </div>
   );
 }

src/component/Patient/Patient Form.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import "./Patient.css";
+import p from "./Patient info";
+import PatientMapping from "./Patient Mapping";
+import Search from "./search";
+
+const PatientForm = () => {
+  const [patients, setPatients] = useState(p);
+  const [fullName, setFullName] = useState("");
+  const [birthDate, setBD] = useState("");
+  const [pNumber, setPNumber] = useState("");
+  const [gender, setGender] = useState("male");
+
+  const addNew = (e) => {
+    e.preventDefault();
+    const temp = patients;
+    temp.push({
+      id: patients.length + 1,
+      full_name: fullName,
+      birth_date: birthDate,
+      gender: gender,
+      phone: pNumber,
+    });
+    setPatients([...temp]);
+    console.log(temp);
+  };
+
+  const changeFN = (e) => {
+    let val = e.target.value;
+    setFullName(val);
+  };
+  const changeBD = (e) => {
+    let val = e.target.value;
+    setBD(val);
+  };
+  const changePN = (e) => {
+    let val = e.target.value;
+    setPNumber(val);
+  };
+
+  const Gender = (e) => {
+    let val = e.target.value;
+    setGender(val);
+  };
+
+  return (
+    <form className="input-section">
+      <div className="inputs">
+        <input
+          type="text"
+          placeholder="Full Name"
+          value={fullName}
+          onChange={changeFN}
+        />
+        <input
+          type="text"
+          placeholder="Birth date"
+          value={birthDate}
+          onChange={changeBD}
+        />
+        <input
+          type="text"
+          placeholder="Number"
+          value={pNumber}
+          onChange={changePN}
+        />
+        <select onChange={Gender}>
+          <option value="male" defaultValue>
+            Male
+          </option>
+          <option value="female">Female</option>
+        </select>
+        <div className="submit">
+          <button onClick={addNew} onChange={null}>
+            Add new
+          </button>
+        </div>
+      </div>
+      <Search list={patients} setList={setPatients} />
+      <div className="table-container">
+        <table className="patient-table">
+          <thead>
+            <tr>
+              <td>ID</td>
+              <td>Full Name</td>
+              <td>Birth Date</td>
+              <td>Gender</td>
+              <td>Number</td>
+              <td></td>
+            </tr>
+          </thead>
+          <tbody>
+            <PatientMapping a={patients} del={setPatients} />
+          </tbody>
+        </table>
+      </div>
+    </form>
+  );
+};
+
+export default PatientForm;

src/component/Patient/Patient Mapping.jsx

@@ -0,0 +1,25 @@
+import React from "react";
+import PatientsCard from "./Patients Card";
+const PatientMapping = (prop) => {
+  const deleteP = (e) => {
+    e.preventDefault();
+    prop.a.splice(e.target.value, 1);
+    prop.del([...prop.a]);
+  };
+  return prop.a.map((item, index) => {
+    return (
+      <PatientsCard
+        key={index}
+        class={index % 2 === 0 ? "WHITE" : "GRAY"}
+        id={item.id}
+        full_name={item.full_name}
+        birth_date={item.birth_date}
+        gender={item.gender}
+        phone={item.phone}
+        click={deleteP}
+      />
+    );
+  });
+};
+
+export default PatientMapping;

src/component/Patient/Patient info.jsx

@@ -0,0 +1,27 @@
+import "./Patient.css";
+
+const p = [
+  {
+    id: 1,
+    full_name: "Ali Ahmed",
+    birth_date: "10/10/1999",
+    gender: "male",
+    phone: "+9647788965423",
+  },
+  {
+    id: 2,
+    full_name: "Ameer Saad",
+    birth_date: "10/10/2000",
+    gender: "male",
+    phone: "+96477809654",
+  },
+  {
+    id: 3,
+    full_name: "Muna Ali",
+    birth_date: "10/10/1998",
+    gender: "female",
+    phone: "+964777809654",
+  },
+];
+
+export default p;

src/component/Patient/Patient.css

@@ -0,0 +1,96 @@
+.input-section {
+    position: relative;
+    margin: auto;
+    width: 60%;
+    padding: 20px;
+    border-radius: 20px;
+}
+
+.input-section>input,
+input,
+select {
+    margin: 10px 15px;
+    font-size: 1.3rem;
+    border-radius: 10px;
+    width: 270px;
+    border: none;
+    outline: none;
+    padding: 10px;
+    box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.222);
+
+}
+
+
+.submit {
+    text-align: right;
+    width: 96%;
+    margin: 0px;
+}
+
+.submit button {
+    margin: 20px;
+    padding: 14px 40px;
+    border-radius: 10px;
+    border: none;
+    font-size: 1.2rem;
+    background-color: rgba(102, 102, 102, 0.2);
+    transition: all ease 0.2s;
+}
+
+.submit>button:hover {
+    background-color: rgba(102, 102, 102, 0.3);
+}
+
+.input-section>button:active {
+    background-color: rgba(102, 102, 102, 0.5);
+}
+
+.table-container {
+    position: relative;
+    height: 500px;
+    border: 2px solid rgba(0, 0, 0, 0.332);
+    padding: 0px;
+    overflow: scroll;
+}
+
+.patient-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+td {
+    font-size: 1rem;
+    padding: 7px;
+}
+
+.patient-table>thead {
+    background-color: rgb(39, 141, 255);
+    font-weight: bold;
+    color: rgb(23, 23, 23);
+    width: 100%;
+}
+
+.patient-table tr {
+    margin-top: 10px;
+}
+
+.patient-table .GRAY {
+    background-color: #dadadaf3;
+    border-bottom: 1px solid gray;
+    border-top: 1px solid gray;
+}
+
+.patient-table .WHITE {
+    background-color: white;
+}
+
+td>div {
+    text-align: center;
+    align-items: center;
+}
+
+.Delete-Patient {
+    background-color: red;
+    border: none;
+    padding: 3px 15px;
+}

src/component/Patient/Patients Card.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+import "./Patient.css";
+
+const PatientsCard = (props) => {
+  return (
+    <tr className={props.class}>
+      <td>{props.id}</td>
+      <td>{props.full_name}</td>
+      <td>{props.birth_date}</td>
+      <td>{props.gender}</td>
+      <td>{props.phone}</td>
+      <td>
+        <div className="delete">
+          <button className="Delete-Patient" onClick={props.click}>
+            Delete
+          </button>
+        </div>
+      </td>
+    </tr>
+  );
+};
+
+export default PatientsCard;

src/component/Patient/search.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+const Search = (props) => {
+  const searchForItem = (e) => {
+    let val = e.target.value
+      ? props.list.filter((item) => {
+          return item.full_name.toLowerCase().includes(e.target.value);
+        })
+      : props.list;
+    props.setList([...val]);
+    console.log(val);
+  };
+  return (
+    <div>
+      <input type="search" placeholder="Search" onChange={searchForItem} />
+    </div>
+  );
+};
+
+export default Search;