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.

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

Fixing: Switch Blood Pressure and temperature dropdown to use TextFormField with type="number" instead of a dropdown #8644 #8728

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
31 commits
Select commit Hold shift + click to select a range
fe92b7a
Fix: Updating temp dropdown to textfield
AdityaJ2305 Oct 6, 2024
6fef6eb
removed unnecessary
AdityaJ2305 Oct 6, 2024
908fb11
moved to temperatureformfield
AdityaJ2305 Oct 6, 2024
e5e9bcd
eslint fix
AdityaJ2305 Oct 6, 2024
871b00b
eslint fix
AdityaJ2305 Oct 6, 2024
9bf4f95
Merge branch 'ohcnetwork:develop' into issues/8644/switch-bp-temp-fie…
AdityaJ2305 Oct 8, 2024
381d15a
Implementend required bp changes
AdityaJ2305 Oct 8, 2024
ca28b3f
merged
AdityaJ2305 Oct 8, 2024
ca79b54
i18n
AdityaJ2305 Oct 8, 2024
3ce4ea2
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
nihal467 Oct 8, 2024
780b5cc
cypress failed fix
AdityaJ2305 Oct 8, 2024
cdd7c1b
Merge branch 'issues/8644/switch-bp-temp-fields-to-textformfield-with…
AdityaJ2305 Oct 8, 2024
8a2a013
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
AdityaJ2305 Oct 9, 2024
61145f2
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
AdityaJ2305 Oct 11, 2024
cef6e91
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
AdityaJ2305 Oct 12, 2024
55a949e
fix: Limit temp input to one decimal place and C to F conversion
AdityaJ2305 Oct 13, 2024
4286825
Merge branch 'issues/8644/switch-bp-temp-fields-to-textformfield-with…
AdityaJ2305 Oct 13, 2024
4c97796
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
AdityaJ2305 Oct 13, 2024
047cba6
Moved temperature state to TemperatureFormField
AdityaJ2305 Oct 15, 2024
7defe14
fix lint err
AdityaJ2305 Oct 15, 2024
a966a61
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
AdityaJ2305 Oct 15, 2024
ca9a5bb
interpolation_updated
AdityaJ2305 Oct 15, 2024
95107c4
Merge branch 'issues/8644/switch-bp-temp-fields-to-textformfield-with…
AdityaJ2305 Oct 15, 2024
710754e
updated type of event
AdityaJ2305 Oct 15, 2024
a7c8619
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
AdityaJ2305 Oct 16, 2024
02f9e46
lint fix
AdityaJ2305 Oct 16, 2024
0800299
Merge branch 'issues/8644/switch-bp-temp-fields-to-textformfield-with…
AdityaJ2305 Oct 16, 2024
4549ad6
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
nihal467 Oct 16, 2024
2b7f472
lint fix
AdityaJ2305 Oct 16, 2024
64830c3
Merge branch 'issues/8644/switch-bp-temp-fields-to-textformfield-with…
AdityaJ2305 Oct 16, 2024
72b0573
Merge branch 'develop' into issues/8644/switch-bp-temp-fields-to-text…
nihal467 Oct 16, 2024
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
4 changes: 2 additions & 2 deletions cypress/e2e/patient_spec/PatientLogUpdate.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -302,9 +302,9 @@ describe("Patient Log Update in Normal, Critical and TeleIcu", () => {
patientRhythm,
]);
patientLogupdate.clickUpdateDetail();
patientLogupdate.clickClearButtonInElement("#systolic");
patientLogupdate.clearIntoElementById("#systolic");
patientLogupdate.typeSystolic(patientModifiedSystolic);
patientLogupdate.clickClearButtonInElement("#diastolic");
patientLogupdate.clearIntoElementById("#diastolic");
patientLogupdate.typeDiastolic(patientModifiedDiastolic);
cy.submitButton("Continue");
cy.verifyNotification("Brief Update updated successfully");
Expand Down
10 changes: 5 additions & 5 deletions cypress/pageobject/Patient/PatientLogupdate.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,19 +43,19 @@ class PatientLogupdate {
}

typeSystolic(systolic: string) {
cy.typeAndSelectOption("#systolic", systolic);
cy.get("#systolic").click().type(systolic);
}

typeDiastolic(diastolic: string) {
cy.typeAndSelectOption("#diastolic", diastolic);
cy.get("#diastolic").click().type(diastolic);
}

typePulse(pulse: string) {
cy.typeAndSelectOption("#pulse", pulse);
}

typeTemperature(temperature: string) {
cy.typeAndSelectOption("#temperature", temperature);
cy.get("#temperature").click().type(temperature);
}

typeRespiratory(respiratory: string) {
Expand Down Expand Up @@ -93,8 +93,8 @@ class PatientLogupdate {
cy.wait(3000);
}

clickClearButtonInElement(elementId: string) {
cy.get(elementId).find("#clear-button").click();
clearIntoElementById(elementId) {
cy.get(elementId).click().clear();
}

clickVitals() {
Expand Down
87 changes: 33 additions & 54 deletions src/Components/Common/BloodPressureFormField.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { useTranslation } from "react-i18next";
import { FieldValidator } from "../Form/FieldValidators";
import FormField from "../Form/FormFields/FormField";
import RangeAutocompleteFormField from "../Form/FormFields/RangeAutocompleteFormField";
import {
FieldChangeEvent,
FormFieldBaseProps,
useFormFieldPropsResolver,
} from "../Form/FormFields/Utils";
import { BloodPressure } from "../Patient/models";
import TextFormField from "../Form/FormFields/TextFormField";

type Props = FormFieldBaseProps<BloodPressure | null>;

Expand All @@ -16,12 +16,13 @@ export default function BloodPressureFormField(props: Props) {
const field = useFormFieldPropsResolver(props);
const map = meanArterialPressure(props.value)?.toFixed();

const handleChange = (event: FieldChangeEvent<number>) => {
const handleChange = (event: FieldChangeEvent<string>) => {
const value = event.value ? parseInt(event.value, 10) : "";
const bp = {
systolic: field.value?.systolic,
diastolic: field.value?.diastolic,
};
bp[event.name as keyof BloodPressure] = event.value;
bp[event.name as keyof BloodPressure] = value || undefined;
field.handleChange(Object.values(bp).filter(Boolean).length ? bp : null);
};

Expand All @@ -32,63 +33,35 @@ export default function BloodPressureFormField(props: Props) {
labelSuffix: map && <span className="font-medium">MAP: {map}</span>,
}}
>
<div className="flex flex-row items-center">
<RangeAutocompleteFormField
<div className="flex flex-row items-center" id="bloodPressure">
<TextFormField
className="w-full"
type="number"
name="systolic"
placeholder={t("systolic")}
start={0}
end={250}
step={1}
value={field.value?.systolic ?? undefined}
value={field.value?.systolic?.toString() ?? ""}
autoComplete="off"
onChange={handleChange}
min={0}
max={250}
step={1}
labelClassName="hidden"
errorClassName="hidden"
thresholds={[
{
value: 0,
label: "Low",
className: "hidden md:block text-danger-500",
},
{
value: 100,
label: "Normal",
className: "hidden md:block text-primary-500",
},
{
value: 140,
label: "High",
className: "hidden md:block text-warning-500",
},
]}
/>
<span className="px-2 text-lg font-medium text-secondary-400">/</span>
<RangeAutocompleteFormField
<span className="px-2 text-2xl font-medium text-secondary-400">/</span>
<TextFormField
className="w-full"
type="number"
name="diastolic"
placeholder={t("diastolic")}
start={0}
end={250}
step={1}
value={field.value?.diastolic ?? undefined}
value={field.value?.diastolic?.toString() ?? ""}
autoComplete="off"
onChange={handleChange}
min={0}
max={250}
step={1}
labelClassName="hidden"
errorClassName="hidden"
thresholds={[
{
value: 0,
label: "Low",
className: "hidden md:block text-danger-500",
},
{
value: 50,
label: "Normal",
className: "hidden md:block text-primary-500",
},
{
value: 90,
label: "High",
className: "hidden md:block text-warning-500",
},
]}
/>
</div>
</FormField>
Expand All @@ -102,14 +75,20 @@ export const meanArterialPressure = (bp?: BloodPressure | null) => {
return (2 * bp.diastolic + bp.systolic) / 3;
};

export const BloodPressureValidator: FieldValidator<BloodPressure> = (bp) => {
export const BloodPressureValidator: FieldValidator<BloodPressure> = (
bp,
t,
) => {
if (Object.values(bp).every((v) => v == null)) {
return;
}
if (bp.diastolic == null) {
return "Diastolic is missing. Either specify both or clear both.";
if (bp.systolic == null || bp.diastolic == null) {
return t("blood_pressure_error.missing");
}
if (bp.systolic > 250 || bp.diastolic > 250) {
return t("blood_pressure_error.exceed");
}
if (bp.systolic == null) {
return "Systolic is missing. Either specify both or clear both.";
if (bp.systolic < bp.diastolic) {
return t("blood_pressure_error.systolic_less_than_diastolic");
}
};
155 changes: 89 additions & 66 deletions src/Components/Common/TemperatureFormField.tsx
Original file line number Diff line number Diff line change
@@ -1,77 +1,100 @@
import { useState } from "react";
import { FormFieldBaseProps } from "../Form/FormFields/Utils";
import RangeAutocompleteFormField from "../Form/FormFields/RangeAutocompleteFormField";
import { useState, useEffect } from "react";
import { FieldChangeEvent, FormFieldBaseProps } from "../Form/FormFields/Utils";
import { fahrenheitToCelsius, celsiusToFahrenheit } from "@/Utils/utils";
import CareIcon from "../../CAREUI/icons/CareIcon";
import ButtonV2 from "./components/ButtonV2";
import { fahrenheitToCelsius } from "../../Utils/utils";
import TextFormField from "../Form/FormFields/TextFormField";

type TemperatureUnit = "celsius" | "fahrenheit";

type Props = FormFieldBaseProps<number> & {
placeholder?: string;
};
type TemperatureFormFieldProps = FormFieldBaseProps<string>;

export default function TemperatureFormField(props: Props) {
export default function TemperatureFormField({
onChange,
id,
label,
error,
value,
name,
}: TemperatureFormFieldProps) {
const [unit, setUnit] = useState<TemperatureUnit>("fahrenheit");
const [inputValue, setInputValue] = useState(value || "");

useEffect(() => {
if (value) {
const initialTemperature =
unit === "celsius"
? fahrenheitToCelsius(parseFloat(value)).toFixed(1)
: value;
setInputValue(initialTemperature);
}
}, [value, unit]);

const handleUnitChange = () => {
setUnit(unit === "celsius" ? "fahrenheit" : "celsius");
if (inputValue) {
const convertedValue =
unit === "celsius"
? celsiusToFahrenheit(parseFloat(inputValue)).toFixed(1)
: fahrenheitToCelsius(parseFloat(inputValue)).toFixed(1);
setInputValue(convertedValue);
}
};

const handleInputChange = (e: FieldChangeEvent<string>) => {
const newValue = e.value;

const regex = /^-?\d*\.?\d{0,1}$/;
if (regex.test(newValue)) {
setInputValue(newValue);
}
};

const handleBlur = () => {
if (!inputValue) return;
const parsedValue = parseFloat(inputValue);
if (isNaN(parsedValue)) return;

const finalValue =
unit === "celsius"
? celsiusToFahrenheit(parsedValue).toString()
: parsedValue.toString();

setInputValue(finalValue);
onChange({ name, value: finalValue });
};

return (
<RangeAutocompleteFormField
{...props}
start={95}
end={106}
step={0.1}
thresholds={[
{
value: 95,
label: "Low",
icon: <CareIcon icon="l-temperature-empty" />,
className: "text-danger-500",
},
{
value: 96.6,
label: "Low",
icon: <CareIcon icon="l-temperature-quarter" />,
className: "text-warning-500",
},
{
value: 97.6,
label: "Normal",
icon: <CareIcon icon="l-temperature-half" />,
className: "text-primary-500",
},
{
value: 99.6,
label: "High",
icon: <CareIcon icon="l-temperature-three-quarter" />,
className: "text-warning-500",
},
{
value: 101.6,
label: "High",
icon: <CareIcon icon="l-temperature" />,
className: "text-danger-500",
},
]}
optionLabel={(value) => {
const val = unit === "celsius" ? fahrenheitToCelsius(value) : value;
return val.toFixed(1);
}}
labelSuffix={
<ButtonV2
type="button"
variant="primary"
className="text-xs"
size="small"
ghost
border
onClick={() => setUnit(unit === "celsius" ? "fahrenheit" : "celsius")}
>
<CareIcon
icon={unit === "celsius" ? "l-celsius" : "l-fahrenheit"}
className="text-sm"
/>
</ButtonV2>
}
/>
<div className="relative">
<TextFormField
id={id}
label={label}
type="number"
value={inputValue}
name={name}
min={`${unit === "celsius" ? 35 : 95}`}
max={`${unit === "celsius" ? 41.1 : 106}`}
step={0.1}
onChange={handleInputChange}
onBlur={handleBlur}
autoComplete="off"
error={error}
/>

<ButtonV2
type="button"
variant="primary"
className="absolute right-0 top-0 flex h-full items-center justify-center text-xs"
size="small"
ghost
border
onClick={handleUnitChange}
>
<CareIcon
icon={unit === "celsius" ? "l-celsius" : "l-fahrenheit"}
className="text-sm"
/>
</ButtonV2>
</div>
);
}
Loading
Loading