From 82926b10e9155971fdc782ae69d72e7b363261fd Mon Sep 17 00:00:00 2001 From: Yousif Date: Fri, 11 Nov 2022 20:48:29 +0300 Subject: [PATCH 1/2] not yet --- src/App.js | 13 ++- src/component/Patient/Patient Form.jsx | 103 ++++++++++++++++++++++ src/component/Patient/Patient Mapping.jsx | 25 ++++++ src/component/Patient/Patient info.jsx | 27 ++++++ src/component/Patient/Patient.css | 96 ++++++++++++++++++++ src/component/Patient/Patients Card.jsx | 23 +++++ 6 files changed, 280 insertions(+), 7 deletions(-) create mode 100644 src/component/Patient/Patient Form.jsx create mode 100644 src/component/Patient/Patient Mapping.jsx create mode 100644 src/component/Patient/Patient info.jsx create mode 100644 src/component/Patient/Patient.css create mode 100644 src/component/Patient/Patients Card.jsx diff --git a/src/App.js b/src/App.js index 4d333f8..a9efff7 100644 --- a/src/App.js +++ b/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 (
- {/* Add new patient FORM */} - {/* Search input */} - {/* Table */} +
); } diff --git a/src/component/Patient/Patient Form.jsx b/src/component/Patient/Patient Form.jsx new file mode 100644 index 0000000..91fbb06 --- /dev/null +++ b/src/component/Patient/Patient Form.jsx @@ -0,0 +1,103 @@ +import React, { useState } from "react"; +import "./Patient.css"; +import p from "./Patient info"; +import PatientMapping from "./Patient Mapping"; + +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) => { + console.log(gender); + let val = e.target.value; + setGender(val); + console.log(val); + console.log(gender); + }; + + return ( +
+
+ + + + +
+ +
+
+ +
+ + + + + + + + + + + + + + +
IDFull NameBirth DateGenderNumber
+
+
+ ); +}; + +export default PatientForm; diff --git a/src/component/Patient/Patient Mapping.jsx b/src/component/Patient/Patient Mapping.jsx new file mode 100644 index 0000000..751eb96 --- /dev/null +++ b/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 ( + + ); + }); +}; + +export default PatientMapping; diff --git a/src/component/Patient/Patient info.jsx b/src/component/Patient/Patient info.jsx new file mode 100644 index 0000000..ebef05c --- /dev/null +++ b/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; diff --git a/src/component/Patient/Patient.css b/src/component/Patient/Patient.css new file mode 100644 index 0000000..3c67dc5 --- /dev/null +++ b/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, +.inputs>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; +} \ No newline at end of file diff --git a/src/component/Patient/Patients Card.jsx b/src/component/Patient/Patients Card.jsx new file mode 100644 index 0000000..3ebb2a2 --- /dev/null +++ b/src/component/Patient/Patients Card.jsx @@ -0,0 +1,23 @@ +import React from "react"; +import "./Patient.css"; + +const PatientsCard = (props) => { + return ( + + {props.id} + {props.full_name} + {props.birth_date} + {props.gender} + {props.phone} + +
+ +
+ + + ); +}; + +export default PatientsCard; From 684e9ea7df76395531dec0f597dc69f25509f2a8 Mon Sep 17 00:00:00 2001 From: Yousif Date: Sat, 12 Nov 2022 13:40:58 +0300 Subject: [PATCH 2/2] done --- src/component/Patient/Patient Form.jsx | 6 ++---- src/component/Patient/Patient.css | 2 +- src/component/Patient/search.jsx | 20 ++++++++++++++++++++ 3 files changed, 23 insertions(+), 5 deletions(-) create mode 100644 src/component/Patient/search.jsx diff --git a/src/component/Patient/Patient Form.jsx b/src/component/Patient/Patient Form.jsx index 91fbb06..89bf579 100644 --- a/src/component/Patient/Patient Form.jsx +++ b/src/component/Patient/Patient Form.jsx @@ -2,6 +2,7 @@ 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); @@ -38,11 +39,8 @@ const PatientForm = () => { }; const Gender = (e) => { - console.log(gender); let val = e.target.value; setGender(val); - console.log(val); - console.log(gender); }; return ( @@ -78,7 +76,7 @@ const PatientForm = () => { - +
diff --git a/src/component/Patient/Patient.css b/src/component/Patient/Patient.css index 3c67dc5..f6bfed8 100644 --- a/src/component/Patient/Patient.css +++ b/src/component/Patient/Patient.css @@ -7,7 +7,7 @@ } .input-section>input, -.inputs>input, +input, select { margin: 10px 15px; font-size: 1.3rem; diff --git a/src/component/Patient/search.jsx b/src/component/Patient/search.jsx new file mode 100644 index 0000000..1a8695f --- /dev/null +++ b/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 ( +
+ +
+ ); +}; + +export default Search;