From 58e61f0485711e1e94c7faa4572a85dabe8d7e6f Mon Sep 17 00:00:00 2001 From: sonika <> Date: Tue, 29 Aug 2023 21:56:28 +0530 Subject: [PATCH] issues table added --- package-lock.json | 13 ++ package.json | 1 + src/App.css | 12 ++ src/Components/Helper/AddNewTable.tsx | 165 ++++++++++++++++++ src/Components/PatientForm/OtherDetails8.tsx | 63 ++++--- src/Components/PatientForm/PastTreatment5.tsx | 10 +- 6 files changed, 238 insertions(+), 26 deletions(-) create mode 100644 src/Components/Helper/AddNewTable.tsx diff --git a/package-lock.json b/package-lock.json index 7626fc8..3e3f5c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -40,6 +40,7 @@ "react-leaflet": "^4.2.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", + "react-table": "^7.8.0", "recharts": "^2.7.2", "typescript": "^4.9.5", "web-vitals": "^2.1.4", @@ -15964,6 +15965,18 @@ "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-table": { + "version": "7.8.0", + "resolved": "https://registry.npmjs.org/react-table/-/react-table-7.8.0.tgz", + "integrity": "sha512-hNaz4ygkZO4bESeFfnfOft73iBUj8K5oKi1EcSHPAibEydfsX2MyU6Z8KCr3mv3C9Kqqh71U+DhZkFvibbnPbA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.3 || ^17.0.0-0 || ^18.0.0" + } + }, "node_modules/react-transition-group": { "version": "2.9.0", "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-2.9.0.tgz", diff --git a/package.json b/package.json index 10fc698..a2ec5df 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "react-leaflet": "^4.2.1", "react-router-dom": "^6.14.2", "react-scripts": "5.0.1", + "react-table": "^7.8.0", "recharts": "^2.7.2", "typescript": "^4.9.5", "web-vitals": "^2.1.4", diff --git a/src/App.css b/src/App.css index 13ae2e3..6f6487b 100644 --- a/src/App.css +++ b/src/App.css @@ -45,4 +45,16 @@ margin: 5%; padding-top: 12px; padding-left: 16px; +} + +.illness-table-style td{ + padding:10px !important; +} + +.addNew-form-table-style .MuiInputBase-root{ + height: 45px !important +} + +.addNew-form-table-style label { + padding: 0px; } \ No newline at end of file diff --git a/src/Components/Helper/AddNewTable.tsx b/src/Components/Helper/AddNewTable.tsx new file mode 100644 index 0000000..d9dc0cc --- /dev/null +++ b/src/Components/Helper/AddNewTable.tsx @@ -0,0 +1,165 @@ +import { Button, TableContainer, Table, TableHead, TableRow, TableCell, TableBody, TextField, Paper, Grid, FormLabel, FormControl } from '@mui/material'; +import * as React from 'react'; + +interface RowData { + date: string; + illness: string; + treatment: string; + results: string; +} + +interface DataTableProps { + data: RowData[]; + onAddRow: () => void; +} + +const DataTable: React.FC= () => { + + const [illnessFromData, setIllnessFromData] = React.useState({ + id:0,date:'',illness:'',treatment:'',results:'' + }) + const [illnessData, setIllnessData] = React.useState([ + {id:0,date:'ex-12-01-2020',illness:'knee pain',treatment:'surgery',results:'cured'} + ]); + + const deleteIllnessData = (idToDelete:number) => { + const updatedIllnessData = illnessData.filter(item => item.id !== idToDelete); + setIllnessData(updatedIllnessData); + }; + + + const handleAddRow = () => { + if(illnessFromData.date!='' && illnessFromData.illness!='' && illnessFromData.treatment!='' && illnessFromData.results!=''){ + + const newId = Math.max(...illnessData.map(item => item.id)) + 1; + const newIllnessData = [ + ...illnessData, + { + ...illnessFromData, + id: newId + } + ]; + setIllnessData(newIllnessData); + setIllnessFromData({ + id: 0, + date: '', + illness: '', + treatment: '', + results: '' + }); + } + }; + + console.log("sdfsdfdsf",illnessData, illnessFromData) + + + return ( + <> + Please enter the details below:

+ + + + { + setIllnessFromData((prevValues:any) => ({ + ...prevValues, + date: event.target.value, + })); + }} + /> + + + { + setIllnessFromData((prevValues:any) => ({ + ...prevValues, + illness: event.target.value, + })); + }} + /> + + + { + setIllnessFromData((prevValues:any) => ({ + ...prevValues, + treatment: event.target.value, + })); + }} + /> + + + { + setIllnessFromData((prevValues:any) => ({ + ...prevValues, + results: event.target.value, + })); + }} + /> + + + + + + + + + + + + + + Date + Injury/Fracture/Illness/Surgeries + Treatment + Results + + + + + {illnessData.map((row, index) => ( + + + {row.date} + + + {row.illness} + + + {row.treatment} + + + {row.results} + + + + + + ))} + +
+ + + ); +}; + +export default DataTable; diff --git a/src/Components/PatientForm/OtherDetails8.tsx b/src/Components/PatientForm/OtherDetails8.tsx index 72ba7c4..40787e4 100644 --- a/src/Components/PatientForm/OtherDetails8.tsx +++ b/src/Components/PatientForm/OtherDetails8.tsx @@ -11,10 +11,11 @@ interface FormValues { orthotics:string; brestExam: any; pregnancy:string; - menstralCycle: string; + menstralCycle: any; } export default function OtherDetails8(){ + const [values, setValues] = React.useState({ familyHistory: '', sleep: '', @@ -22,8 +23,19 @@ export default function OtherDetails8(){ orthotics:'', brestExam: dayjs('2022-04-17'), pregnancy:'', - menstralCycle: '', + menstralCycle: dayjs('2022-04-17'), }); + + const formatDate = (inputDate:any) => { + const date = new Date(inputDate); + const year = date.getUTCFullYear(); + const month = String(date.getUTCMonth() + 1).padStart(2, '0'); + const day = String(date.getUTCDate()+1).padStart(2, '0'); + + return `${year}-${month}-${day}`; + }; + + console.log("dsfdsfsdf",values) return( <> @@ -99,26 +111,26 @@ export default function OtherDetails8(){ - {/* + + Date of last gynecological and brest exam?

- Date of last gynecological and brest exam? - +

{ - setValues((prevValues) => ({ - ...prevValues, - brestExam: event.target.value, - })); + const formattedDate = formatDate(event) + setValues((prevValues) => ({ + ...prevValues, + brestExam: formattedDate, + })); }} renderInput={(params) => } /> - */} + - + For X-Ray purposes: @@ -141,20 +153,21 @@ export default function OtherDetails8(){ + Date of last menstrual cycle?

- Date of last menstural cycle? - { - setValues((prevValues) => ({ - ...prevValues, - orthotics: event.target.value, - })); - }} - > - } label="Yes" /> - } label="No" /> - +

+ { + const formattedDate = formatDate(event) + setValues((prevValues) => ({ + ...prevValues, + menstralCycle: formattedDate, + })); + }} + renderInput={(params) => } + /> + diff --git a/src/Components/PatientForm/PastTreatment5.tsx b/src/Components/PatientForm/PastTreatment5.tsx index 42f95e4..10f93fe 100644 --- a/src/Components/PatientForm/PastTreatment5.tsx +++ b/src/Components/PatientForm/PastTreatment5.tsx @@ -1,5 +1,6 @@ import { TextField, FormControlLabel,Grid,Checkbox, FormControl, FormLabel, Radio, RadioGroup } from '@mui/material'; import * as React from 'react'; +import Table from '../Helper/AddNewTable'; interface FormValues { generalHealth: string; @@ -16,6 +17,7 @@ interface FormValues { supplementsOrDrugs: string; } + export default function PastTreatment5(){ const [values, setValues] = React.useState({ @@ -32,7 +34,7 @@ export default function PastTreatment5(){ injuriesHospitalization: '', supplementsOrDrugs:'' }); - + console.log("dsfdsfdsfg",values) return( <> @@ -246,6 +248,12 @@ export default function PastTreatment5(){ }} /> + + + + + +