Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added patient age dates #556

Merged
merged 1 commit into from
Sep 19, 2023
Merged

added patient age dates #556

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 122 additions & 13 deletions frontend/src/components/patient/CreatePatientForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { FormattedMessage, injectIntl } from "react-intl";
import "../Style.css";
import { getFromOpenElisServer, postToOpenElisServer } from "../utils/Utils";
import { nationalityList } from "../data/countries";
import format from 'date-fns/format'

import {
Heading,
Expand Down Expand Up @@ -39,13 +40,86 @@ function CreatePatientForm(props) {
const [maritalStatuses, setMaritalStatuses] = useState([]);
const [formAction, setFormAction] = useState("ADD");
const componentMounted = useRef(false);
const [dateOfBirthFormatter,setDateOfBirthFormatter] = useState({
"years": "", "months": "", "days": ""
})

const handleDatePickerChange = (values, ...e) => {
var patient = values;
patient.birthDateForDisplay = e[1];
setPatientDetails(patient);
if (patient.birthDateForDisplay !== "") {
getYearsMonthsDaysFromDOB(patient.birthDateForDisplay)
}
};

function getYearsMonthsDaysFromDOB(date) {
const selectedDate = date.split('/');
let today = new Date();

let year = today.getFullYear();
let month = today.getMonth() + 1;
let day = today.getDate();

let yy = parseInt(selectedDate[2]);
let mm = parseInt(selectedDate[1]);
let dd = parseInt(selectedDate[0]);

let years, months, days;
months = month - mm;
if (day < dd) {
months = months - 1;
}
years = year - yy;
if (month * 100 + day < mm * 100 + dd) {
years = years - 1;
months = months + 12;
}
days = Math.floor((today.getTime() - (new Date(yy + years, mm + months - 1, dd)).getTime()) / (24 * 60 * 60 * 1000));

setDateOfBirthFormatter({
...dateOfBirthFormatter,
years: years, months: months, days: days
});
}

const getDOBByYearMonthsDays = () => {
const currentDate = new Date();
const pastDate = new Date();

pastDate.setFullYear(currentDate.getFullYear() - dateOfBirthFormatter.years);
pastDate.setMonth(currentDate.getMonth() - dateOfBirthFormatter.months);
pastDate.setDate(currentDate.getDate() - dateOfBirthFormatter.days);
const dob = format(new Date(pastDate),'dd/MM/yyyy');
setPatientDetails((prevState) => ({
...prevState,
birthDateForDisplay: dob,
}));
}

function handleYearsChange(e){
let years = e.target.value;
setDateOfBirthFormatter({
...dateOfBirthFormatter,
years: years
});
}

function handleMonthsChange(e){
let months = e.target.value;
setDateOfBirthFormatter({
...dateOfBirthFormatter,
months: months
});
}

function handleDaysChange(e){
let days = e.target.value;
setDateOfBirthFormatter({
...dateOfBirthFormatter,
days: days
});
}
const handleRegionSelection = (e, values) => {
var patient = values;
patient.healthDistrict = "";
Expand All @@ -61,6 +135,10 @@ function CreatePatientForm(props) {
setHealthDistricts(res);
}

useEffect(()=>{
getDOBByYearMonthsDays();
},[dateOfBirthFormatter])

useEffect(() => {
if (props.selectedPatient.patientPK) {
if (props.selectedPatient.healthRegion != null) {
Expand All @@ -76,6 +154,7 @@ function CreatePatientForm(props) {
const patient = props.selectedPatient;
patient.patientUpdateStatus = "UPDATE";
setPatientDetails(patient);
getYearsMonthsDaysFromDOB(patient.birthDateForDisplay);
setFormAction("UPDATE");
}
}, [props.selectedPatient]);
Expand All @@ -87,6 +166,7 @@ function CreatePatientForm(props) {
props.orderFormValues.patientProperties.guid !== ""
) {
setPatientDetails(props.orderFormValues.patientProperties);
getYearsMonthsDaysFromDOB(props.orderFormValues.patientProperties.birthDateForDisplay);
}
}
};
Expand Down Expand Up @@ -393,27 +473,56 @@ function CreatePatientForm(props) {
</DatePicker>
)}
</Field>
<Field name="gender">
{({ field }) => (
<RadioButtonGroup
valueSelected={values.gender}
legendText="Gender"
name={field.name}

<TextInput
value={dateOfBirthFormatter.years}
name="years"
labelText="Age/Years"
id="years"
onChange={ handleYearsChange }
className="inputText"
id="create_patient_gender"
>
<RadioButton id="radio-1" labelText="Male" value="M" />
<RadioButton id="radio-2" labelText="Female" value="F" />
</RadioButtonGroup>
)}
</Field>
/>

<TextInput
value={dateOfBirthFormatter.months}
name="months"
labelText="Months"
onChange={ handleMonthsChange }
id="months"
className="inputText"
/>

<TextInput
value={dateOfBirthFormatter.days}
name="days"
onChange={ handleDaysChange}
labelText="Days"
id="days"
className="inputText"
/>
<div className="error">
<ErrorMessage name="birthDateForDisplay"></ErrorMessage>
</div>
<div className="error">
<ErrorMessage name="gender"></ErrorMessage>
</div>
</div>
<div className="inlineDiv">
<Field name="gender">
{({ field }) => (
<RadioButtonGroup
valueSelected={values.gender}
legendText="Gender"
name={field.name}
className="inputText"
id="create_patient_gender"
>
<RadioButton id="radio-1" labelText="Male" value="M" />
<RadioButton id="radio-2" labelText="Female" value="F" />
</RadioButtonGroup>
)}
</Field>
</div>
<Accordion>
<AccordionItem title="Additional Information">
<div className="inlineDiv">
Expand Down