issues table added
This commit is contained in:
sonika
parent
6cea7aea9d
commit
58e61f0485
13
package-lock.json
generated
13
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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",
|
||||
|
||||
12
src/App.css
12
src/App.css
@ -46,3 +46,15 @@
|
||||
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;
|
||||
}
|
||||
165
src/Components/Helper/AddNewTable.tsx
Normal file
165
src/Components/Helper/AddNewTable.tsx
Normal file
@ -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<any>({
|
||||
id:0,date:'',illness:'',treatment:'',results:''
|
||||
})
|
||||
const [illnessData, setIllnessData] = React.useState<any[]>([
|
||||
{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 (
|
||||
<>
|
||||
<FormLabel>Please enter the details below:</FormLabel><br></br>
|
||||
<FormControl>
|
||||
<Grid container spacing={1.5} sx={{width:750, marginTop:1}}>
|
||||
<Grid item xs={2} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Date"
|
||||
value={illnessFromData.date}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
...prevValues,
|
||||
date: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3.7} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Injury/Illness/Surgeries"
|
||||
value={illnessFromData.illness}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
...prevValues,
|
||||
illness: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={3.5} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Treatment"
|
||||
value={illnessFromData.treatment}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
...prevValues,
|
||||
treatment: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={2} className='addNew-form-table-style'>
|
||||
<TextField
|
||||
required
|
||||
variant="outlined"
|
||||
label="Results"
|
||||
value={illnessFromData.results}
|
||||
onChange={(event) => {
|
||||
setIllnessFromData((prevValues:any) => ({
|
||||
...prevValues,
|
||||
results: event.target.value,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={0.8} className='addNew-form-table-style'>
|
||||
<Button sx={{height:'40px', bgcolor:'skyblue'}} onClick={handleAddRow}>Add</Button>
|
||||
</Grid>
|
||||
|
||||
</Grid>
|
||||
</FormControl>
|
||||
|
||||
|
||||
<TableContainer sx={{width:800}} className='illness-table-style'>
|
||||
<Table aria-label="simple table">
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell align='left'>Date</TableCell>
|
||||
<TableCell align='center'>Injury/Fracture/Illness/Surgeries</TableCell>
|
||||
<TableCell align='left'>Treatment</TableCell>
|
||||
<TableCell align='left'>Results</TableCell>
|
||||
<TableCell align='left'></TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{illnessData.map((row, index) => (
|
||||
<TableRow key={index}>
|
||||
<TableCell align='left'>
|
||||
{row.date}
|
||||
</TableCell>
|
||||
<TableCell align='center'>
|
||||
{row.illness}
|
||||
</TableCell>
|
||||
<TableCell align='left'>
|
||||
{row.treatment}
|
||||
</TableCell>
|
||||
<TableCell align='left'>
|
||||
{row.results}
|
||||
</TableCell>
|
||||
<TableCell align='left'>
|
||||
<Button sx={{height:'30x',width:20, bgcolor:'skyblue'}} onClick={(e)=>{deleteIllnessData(row.id)}}>
|
||||
Delete
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataTable;
|
||||
@ -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<FormValues>({
|
||||
familyHistory: '',
|
||||
sleep: '',
|
||||
@ -22,9 +23,20 @@ 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(
|
||||
<>
|
||||
<Grid container direction="row">
|
||||
@ -99,26 +111,26 @@ export default function OtherDetails8(){
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
{/* <Grid item xs={12} className='collapsable-form-style-radioButtons'>
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
|
||||
<FormLabel>Date of last gynecological and brest exam?</FormLabel><br></br>
|
||||
<FormControl>
|
||||
<FormLabel>Date of last gynecological and brest exam?</FormLabel>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}><br></br>
|
||||
<DatePicker
|
||||
|
||||
value={values.brestExam}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
...prevValues,
|
||||
brestExam: event.target.value,
|
||||
}));
|
||||
const formattedDate = formatDate(event)
|
||||
setValues((prevValues) => ({
|
||||
...prevValues,
|
||||
brestExam: formattedDate,
|
||||
}));
|
||||
}}
|
||||
renderInput={(params) => <TextField variant="outlined" {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</Grid> */}
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style' sx={{marginTop:3, marginBottom:2}}>
|
||||
<Grid item xs={12} className='collapsable-form-style' sx={{marginTop:4, marginBottom:2}}>
|
||||
<FormLabel sx={{fontWeight:600}}>For X-Ray purposes:</FormLabel>
|
||||
</Grid>
|
||||
|
||||
@ -141,20 +153,21 @@ export default function OtherDetails8(){
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} className='collapsable-form-style-radioButtons'>
|
||||
<FormLabel>Date of last menstrual cycle?</FormLabel><br></br>
|
||||
<FormControl>
|
||||
<FormLabel>Date of last menstural cycle?</FormLabel>
|
||||
<RadioGroup
|
||||
sx={{display:'flex', flexDirection:'row'}}
|
||||
onChange={(event) => {
|
||||
setValues((prevValues) => ({
|
||||
...prevValues,
|
||||
orthotics: event.target.value,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<FormControlLabel value="Yes" control={<Radio />} label="Yes" />
|
||||
<FormControlLabel value="No" control={<Radio />} label="No" />
|
||||
</RadioGroup>
|
||||
<LocalizationProvider dateAdapter={AdapterDayjs}><br></br>
|
||||
<DatePicker
|
||||
value={values.menstralCycle}
|
||||
onChange={(event) => {
|
||||
const formattedDate = formatDate(event)
|
||||
setValues((prevValues) => ({
|
||||
...prevValues,
|
||||
menstralCycle: formattedDate,
|
||||
}));
|
||||
}}
|
||||
renderInput={(params) => <TextField variant="outlined" {...params} />}
|
||||
/>
|
||||
</LocalizationProvider>
|
||||
</FormControl>
|
||||
</Grid>
|
||||
|
||||
|
||||
@ -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<FormValues>({
|
||||
@ -246,6 +248,12 @@ export default function PastTreatment5(){
|
||||
}}
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item xs={12} >
|
||||
<Table />
|
||||
</Grid>
|
||||
|
||||
|
||||
</Grid>
|
||||
</form>
|
||||
</>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user