Skip to content

Commit 262d7b1

Browse files
CliffJrCliffJr
committed
Impoved UI
1 parent 8adfbcc commit 262d7b1

18 files changed

Lines changed: 1160 additions & 301 deletions

‎package-lock.json‎

Lines changed: 747 additions & 44 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"dependencies": {
66
"@material-ui/core": "^4.8.3",
77
"@material-ui/icons": "^4.5.1",
8+
"@reach/tabs": "^0.10.5",
89
"DatePicker": "^2.0.0",
910
"axios": "^0.19.2",
1011
"body-parser": "^1.19.0",
@@ -30,9 +31,13 @@
3031
"react-bnb-gallery": "^1.1.9",
3132
"react-bootstrap": "0.32.4",
3233
"react-bootstrap-carousel": "^4.0.6",
34+
"react-bootstrap-date-picker": "^5.1.0",
3335
"react-chartist": "0.13.3",
36+
"react-data-table-component": "^6.9.7",
3437
"react-datepicker": "^3.1.3",
38+
"react-datepicker2": "^3.3.1",
3539
"react-datetime": "^2.16.3",
40+
"react-datetime-picker": "^3.0.2",
3641
"react-dom": "16.8.6",
3742
"react-google-maps": "9.4.5",
3843
"react-hooks-helper": "^1.6.0",
@@ -47,11 +52,15 @@
4752
"react-router": "5.0.0",
4853
"react-router-dom": "^5.0.0",
4954
"react-scripts": "3.0.0",
55+
"react-select": "^3.1.0",
5056
"react-split-pane": "^2.0.3",
5157
"react-step-wizard": "^5.3.2",
5258
"react-table": "^7.0.4",
59+
"react-tagsinput": "^3.19.0",
5360
"react-toggle": "4.0.2",
5461
"reactstrap": "^8.4.1",
62+
"select2": "^4.0.13",
63+
"styled-components": "^5.1.1",
5564
"yup": "^0.29.0"
5665
},
5766
"scripts": {

‎src/routes.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const dashboardRoutes = [
3838
},
3939
{
4040
path: "/diagnostics",
41-
name: "Doctor's Diagnostics",
41+
name: "Doctor's Review",
4242
icon: "pe-7s-note2",
4343
component: DiagnosticReports,
4444
layout: "/admin"

‎src/views/DiagnosticReports.jsx‎

Lines changed: 33 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,46 @@
11

2-
import React, { Component } from 'react';
2+
import React, { useState } from 'react';
33
import { TabContainer, Tabs, Tab } from 'react-bootstrap';
44

55
import ImageDisplay from './ImageDisplay';
66
//import NurseInterpretationItem from './NurseInterpretationItem';
77
import DoctorDiagnosisItem from './DoctorDiagnosisItem';
8-
import NewPatientsContainer from './NewPatientsContainer';
8+
//import NewPatientsContainer from './NewPatientsContainer';
99
import PatientReferalDisplay from './PatientDetailsDisplay';
10+
import NewPatientsList from './NewPatientsList';
1011

11-
class DiagnosticReports extends Component {
12-
constructor(props){
13-
super(props);
14-
this.state = {
15-
key: 1
16-
};
17-
this.handleSelect = this.handleSelect.bind(this)
18-
}
19-
20-
handleSelect (key){
21-
//alert('selected ' + key);
22-
this.setState({key});
23-
}
24-
25-
render() {
26-
27-
return (
28-
<TabContainer>
29-
<Tabs
30-
activeKey={this.state.key} onSelect={this.handleSelect} transition={false} id="noanim-tab"
31-
>
32-
<Tab eventKey={1} title="New Patients">
33-
<NewPatientsContainer />
34-
</Tab>
35-
<Tab eventKey={2} title="Patient Details">
36-
<PatientReferalDisplay />
37-
</Tab>
38-
<Tab eventKey={3} title="Eye Images">
39-
<ImageDisplay />
40-
</Tab>
41-
{/* <Tab eventKey={4} title="Nurse Interpretation" >
12+
const DiagnosticReports = () => {
13+
14+
const [key, setKey] = useState(0);
15+
16+
return (
17+
18+
<TabContainer>
19+
<Tabs
20+
id="controlled-tab"
21+
activeKey={key}
22+
onSelect={(k) => setKey(k)}
23+
>
24+
<Tab eventKey={1} title="New Patients">
25+
<NewPatientsList />
26+
</Tab>
27+
<Tab eventKey={2} title="Patient Details">
28+
<PatientReferalDisplay />
29+
</Tab>
30+
<Tab eventKey={3} title="Eye Images">
31+
<ImageDisplay />
32+
</Tab>
33+
{/* <Tab eventKey={4} title="Nurse Interpretation" >
4234
<NurseInterpretationItem />
4335
</Tab> */}
44-
<Tab eventKey={5} title="Recommendation">
45-
<DoctorDiagnosisItem />
46-
</Tab>
47-
</Tabs>
48-
</TabContainer>
49-
);
50-
}
36+
<Tab eventKey={5} title="Recommendation">
37+
<DoctorDiagnosisItem />
38+
</Tab>
39+
</Tabs>
40+
</TabContainer>
41+
42+
);
5143
}
5244

45+
5346
export default DiagnosticReports;

‎src/views/DoctorDiagnosisItem.jsx‎

Lines changed: 87 additions & 69 deletions
Large diffs are not rendered by default.

‎src/views/MultiStepForm.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React, {useState} from "react";
22
import StepWizard from 'react-step-wizard';
33
import {useForm } from "react-hooks-helper";
4+
45
import StepOne from "./stepOne";
56
import StepTwo from "./stepTwo";
67
import StepThree from "./stepThree";
@@ -14,6 +15,7 @@ const defaultData = {
1415
dfidStudyNumberPatient: "",
1516
optionsGender: "",
1617
optionTypeDiabetes: "",
18+
yearDMPatient: "",
1719

1820
additionalCommentsPatient: "",
1921
optionsSignsDR: "",
@@ -30,33 +32,34 @@ const defaultData = {
3032
const MultiStepForm = () => {
3133
//StepOne
3234
const [formData, setForm] = useForm(defaultData);
33-
const [dobPatient, setDobPatient] = useState(new Date());
34-
const [yearDMPatient, setYearDMPatient] = useState(new Date());
35+
const [dobPatient, setDobPatient] = useState();
3536

3637
//StepTwo
3738
const [pictureR1, setPictureR1] = useState(null);
3839
const [pictureR2, setPictureR2] = useState(null);
3940
const [pictureL1, setPictureL1] = useState(null);
4041
const [pictureL2, setPictureL2] = useState(null);
4142

42-
const [dateElectronicReferal, setDateElectronicReferal] = useState(new Date());
43+
const [dateElectronicReferal, setDateElectronicReferal] = useState();
4344

4445
//StepThree
45-
const [dateImagesTaken, setDateImagesTaken] = useState(new Date());
46-
const [dateHbA1ctaken, setDateHbA1ctaken] = useState(new Date());
47-
const [dateReviewNurse, setDateReviewNurse] = useState(new Date());
46+
const [dateImagesTaken, setDateImagesTaken] = useState();
47+
const [dateHbA1ctaken, setDateHbA1ctaken] = useState();
48+
const [dateReviewNurse, setDateReviewNurse] = useState();
4849

49-
const props = {formData, setForm, dobPatient, setDobPatient, yearDMPatient, setYearDMPatient, pictureR1, setPictureR1, pictureR2, setPictureR2, pictureL1, setPictureL1, pictureL2, setPictureL2, dateImagesTaken, setDateImagesTaken, dateElectronicReferal, setDateElectronicReferal, dateHbA1ctaken, setDateHbA1ctaken, dateReviewNurse, setDateReviewNurse};
50+
const props = {formData, setForm, dobPatient, setDobPatient, pictureR1, setPictureR1, pictureR2, setPictureR2, pictureL1, setPictureL1, pictureL2, setPictureL2, dateImagesTaken, setDateImagesTaken, dateElectronicReferal, setDateElectronicReferal, dateHbA1ctaken, setDateHbA1ctaken, dateReviewNurse, setDateReviewNurse};
5051

5152
return(
5253
<StepWizard {...props}>
5354
<StepOne {...props}/>
54-
<StepTwo {...props}/>
5555
<StepThree {...props}/>
56+
<StepTwo {...props}/>
5657
<ReviewNewPatientDetails {...props}/>
5758
<SubmitPatientForm {...props}/>
5859
</StepWizard>
5960
);
6061
}
6162

62-
export default MultiStepForm;
63+
export default MultiStepForm;
64+
65+

‎src/views/MultiStepFormDoctor.js‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
import React from "react";
3+
import { useForm, useStep } from "react-hooks-helper";
4+
5+
import NewPatientsList from "./NewPatientsList";
6+
import PatientReferalDisplay from "./PatientDetailsDisplay";
7+
import DoctorDiagnosisItem from "./DoctorDiagnosisItem";
8+
import ImageDisplay from "./ImageDisplay";
9+
10+
const steps = [
11+
{ id: "newPatientsList" },
12+
{ id: "patientReferalDisplay" },
13+
{ id: "imageDisplay"},
14+
{ id: "doctorDiagnosisItem" },
15+
];
16+
17+
18+
const MultiStepFormDoctor = () => {
19+
20+
const [formData, setForm] = useForm(defaultData);
21+
const { step, navigation } = useStep({ initialStep: 0, steps });
22+
const { id } = step;
23+
24+
const props = { formData, setForm, navigation };
25+
26+
switch (id) {
27+
case "NewPatientsList":
28+
return <NewPatientsList {...props} />;
29+
case "PatientReferalDisplay":
30+
return <PatientReferalDisplay {...props} />;
31+
case "ImageDisplay":
32+
return <ImageDisplay {...props}/>;
33+
case "DoctorDiagnosisItem":
34+
return <DoctorDiagnosisItem {...props} />;
35+
default:
36+
return null;
37+
}
38+
};
39+
40+
export default MultiStepFormDoctor;

‎src/views/NewPatientsContainer.jsx‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,21 @@ import axios from 'axios'
33
import NewPatientsList from './NewPatientsList';
44

55
class NewPatientsContainer extends Component {
6-
constructor(props) {
7-
super(props);
8-
this.state = {dfidDb: []};
9-
}
6+
// constructor(props) {
7+
// super(props);
8+
// this.state = {dfidDb: []};
9+
// }
1010

11-
//store data on res.data
12-
componentDidMount(){
13-
axios.get('http://localhost:4000/dfidDb/')
14-
.then(res => {
15-
this.setState({ dfidDb: res.data })
16-
})
17-
.catch(function (error) {
18-
console.log(error);
19-
})
20-
}
11+
// //store data on res.data
12+
// componentDidMount(){
13+
// axios.get('http://localhost:4000/dfidDb/')
14+
// .then(res => {
15+
// this.setState({ dfidDb: res.data })
16+
// })
17+
// .catch(function (error) {
18+
// console.log(error);
19+
// })
20+
// }
2121

2222
render() {
2323
return (

‎src/views/NewPatientsList.jsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,9 @@ import Card from "components/Card/Card.jsx";
44
import Button from "components/CustomButton/CustomButton.jsx";
55

66
const NewPatientsList = (props) => {
7+
78
const patientslist = props.newPatientDetails;
9+
810
return (
911
<div className="content">
1012
<Grid fluid>
@@ -16,6 +18,7 @@ const NewPatientsList = (props) => {
1618
ctTableFullWidth
1719
ctTableResponsive
1820
content={
21+
<>
1922
<Table hover>
2023
<thead>
2124
<tr>
@@ -26,7 +29,7 @@ const NewPatientsList = (props) => {
2629
<th>Message Date Received</th>
2730
</tr>
2831
</thead>
29-
<tbody>
32+
{/* <tbody>
3033
{
3134
patientslist.map((currentPatient) => (
3235
<tr key={currentPatient._id}>
@@ -41,8 +44,10 @@ const NewPatientsList = (props) => {
4144
</tr>
4245
))
4346
}
44-
</tbody>
47+
</tbody> */}
4548
</Table>
49+
50+
</>
4651
}
4752
/>
4853
</Col>

0 commit comments

Comments
 (0)