From adaa996cc87faab9f4b789ac003aea67326e77c4 Mon Sep 17 00:00:00 2001 From: Maryam Qays <70143196+maryamaltuma@users.noreply.github.com> Date: Wed, 16 Nov 2022 15:58:50 +0300 Subject: [PATCH] first try --- package-lock.json | 13 ++++++++- package.json | 3 +- public/index.html | 2 +- src/App.css | 42 +++++++++++++++++++++++++++ src/App.js | 32 +++++++++++++++----- src/Components/PCard.jsx | 12 ++++++++ src/Components/PTable.jsx | 28 ++++++++++++++++++ src/Components/Patients.jsx | 58 +++++++++++++++++++++++++++++++++++++ 8 files changed, 180 insertions(+), 10 deletions(-) create mode 100644 src/Components/PCard.jsx create mode 100644 src/Components/PTable.jsx create mode 100644 src/Components/Patients.jsx diff --git a/package-lock.json b/package-lock.json index 511d160..2aef725 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,8 @@ "cra-template": "1.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1" + "react-scripts": "5.0.1", + "web-vitals": "^3.0.4" } }, "node_modules/@ampproject/remapping": { @@ -15346,6 +15347,11 @@ "minimalistic-assert": "^1.0.0" } }, + "node_modules/web-vitals": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.0.4.tgz", + "integrity": "sha512-Yau8qf1AJ/dm6MY180Bi0qpCIuWmAfKAnOqmxLecGfIHn0+ND3H4JOhXeY73Pyi9zjSF5J4SNUewHLNUzU7mmA==" + }, "node_modules/webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", @@ -27020,6 +27026,11 @@ "minimalistic-assert": "^1.0.0" } }, + "web-vitals": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-3.0.4.tgz", + "integrity": "sha512-Yau8qf1AJ/dm6MY180Bi0qpCIuWmAfKAnOqmxLecGfIHn0+ND3H4JOhXeY73Pyi9zjSF5J4SNUewHLNUzU7mmA==" + }, "webidl-conversions": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz", diff --git a/package.json b/package.json index 7ad0538..f804eaf 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,8 @@ "cra-template": "1.2.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1" + "react-scripts": "5.0.1", + "web-vitals": "^3.0.4" }, "scripts": { "start": "react-scripts start", diff --git a/public/index.html b/public/index.html index aa069f2..cc37e71 100644 --- a/public/index.html +++ b/public/index.html @@ -24,7 +24,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> - React App + Clinical diff --git a/src/App.css b/src/App.css index 74b5e05..19c4db5 100644 --- a/src/App.css +++ b/src/App.css @@ -36,3 +36,45 @@ transform: rotate(360deg); } } +.form_class { + display: white; + margin: 60px auto; + + width: 90%; +} +.table { + border: 2px solid rgb(34, 124, 177); + width: 800px; + height: 200px; + position: relative; + left: 20px; + top: 100px; +} + +input{ + margin:5px ; +} + +.delete { + border-radius: 5px; + border: 0px; + color: white; + background-color: #FF5353; + font-weight: bold; +} + +.table td { + padding: 3px 6px; + color: black; + font-weight: bold; + font-size: 1rem; +} + + +.table tr:nth-child(even) { + background-color: white; +} +.button { + color: white; + background-color: blue; +} diff --git a/src/App.js b/src/App.js index 4d333f8..7b16ff4 100644 --- a/src/App.js +++ b/src/App.js @@ -1,12 +1,30 @@ import './App.css'; +import { useState } from 'react'; +import Patients from './Components/Patients'; +import PTable from './Components/PTable'; + +function App() { + const [patients, setPatients] = useState([]) + // const [filteredList, setFilteredList] = useState(patients); + + const addPatient=(patient)=>{ + setPatients([...patients, patient]) + // setFilteredList([...patients, patient]) + console.log(patients) + } + + const onDelete =(id)=>{ + const delP = patients.filter(p=> p.id !== id) + // const delF = filteredList.filter(p=> p.id !== id) + // setFilteredList(delF) + setPatients(delP) + } + + return ( +
+ + -const App = ()=>{ - // State here - return ( -
- {/* Add new patient FORM */} - {/* Search input */} - {/* Table */}
); } diff --git a/src/Components/PCard.jsx b/src/Components/PCard.jsx new file mode 100644 index 0000000..30aa302 --- /dev/null +++ b/src/Components/PCard.jsx @@ -0,0 +1,12 @@ +function PCard(props) { + return ( + {"#"} + {props.patient.full_name} + {props.patient.phone} + {props.patient.gender} + {props.patient.birth_date} + + ); +} + +export default PCard; \ No newline at end of file diff --git a/src/Components/PTable.jsx b/src/Components/PTable.jsx new file mode 100644 index 0000000..f9da6e2 --- /dev/null +++ b/src/Components/PTable.jsx @@ -0,0 +1,28 @@ +import '../App.css' +import PCard from './PCard'; + +function PTable(props) { + return ( +
+ + + + + + + + + + + + + { + props.patients.map(p=> ) + + } +
IDFull NamePhoneGenderBirth Date
+
+ ); + } + +export default PTable; \ No newline at end of file diff --git a/src/Components/Patients.jsx b/src/Components/Patients.jsx new file mode 100644 index 0000000..32744b2 --- /dev/null +++ b/src/Components/Patients.jsx @@ -0,0 +1,58 @@ +import { useState } from "react"; +import { v4 as uuidv4 } from 'uuid'; +import '../App.css' + +function PForm(props) { + const [fullName, setFullName]=useState('') + const [phone, setPhone]= useState('') + const [gender, setGender]= useState('') + const [birthDate, setBirthDate]= useState('') + + + const addName =(e)=>{ + setFullName(e.target.value) + } + + const addBirth =(e)=>{ + setBirthDate(e.target.value) + } + + const addGender =(e)=>{ + setGender(e.target.value) + } + + const addPhone =(e)=>{ + setPhone(e.target.value) + } + + const Submit =(e)=>{ + e.preventDefault() + const patient ={ + id: uuidv4(), + full_name: fullName, + birth_date:birthDate, + gender:gender, + phone:phone + + } + props.addPatient(patient) + setBirthDate('') + setFullName('') + setPhone('') + } + + return ( +
+ + + + + +
+ ); +} + +export default PForm; \ No newline at end of file