Skip to content

Commit

Permalink
Updated Preview UIs and Changes to Painscale (#7380)
Browse files Browse the repository at this point in the history 
* Updated Preview UIs

* fixed cancel button

* updated pain scale

* fix responsive issue

* remove empty lines

---------

Co-authored-by: Mohammed Nihal <[email protected]>
Co-authored-by: rithviknishad <[email protected]>
Co-authored-by: khavinshankar <[email protected]>
  • Loading branch information
@shivankacker @nihal467
@rithviknishad @khavinshankar
4 people authored May 9, 2024
1 parent f1ff125 commit 15f7d44
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 133 deletions.
117 changes: 69 additions & 48 deletions src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,11 +55,13 @@ let make = (
}
})

let getStatus = (min, minText, max, maxText, val) => {
switch (val >= min, val <= max) {
| (true, true) => ("Normal", "#059669")
| (true, false) => (maxText, "#DC2626")
| _ => (minText, "#DC2626")
let getLabels = val => {
if val < 4 {
("Low", "green")
} else if val < 8 {
("Mild", "orange")
} else {
("High", "red")
}
}

Expand All @@ -78,56 +80,75 @@ let make = (
~top=getModalPosition()["top"],
(),
)}
className="transform max-w-[350px] rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-fit">
className="transform max-w-[350px] rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-fit overflow-hidden">
<div className="bg-white px-4 pt-2 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
<div className="flex gap-2 justify-center">
<span> {str("Region: ")} </span>
<span className="text-black"> {str(Pain.regionToString(state.region))} </span>
</div>
<div className="flex flex-col sm:flex-row justify-center mt-2">
<div className="w-full">
<Slider
title={""}
className="px-0 py-5 m-0"
disabled={previewMode}
start={"0"}
end={"5"}
interval={"1"}
step={1.0}
value={Belt.Float.toString(painScale)}
setValue={s => {
let value = s->Belt.Int.fromString
switch value {
| Some(value) => setState(prev => {...prev, scale: value})
| None => setState(prev => {...prev, scale: 0})
}
}}
getLabel={getStatus(2.0, "Low", 4.0, "High")}
hasError={ValidationUtils.isInputInRangeInt(
0,
5,
Belt.Float.toString(painScale)->Belt.Int.fromString,
)}
/>
<div className="mt-2">
<label className="block font-medium text-black text-left mb-1">
{str("Description")}
</label>
<textarea
placeholder="Description"
value={state.description}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]
setState(prev => {...prev, description: value})
}}
className="cui-input-base px-2 py-1"
disabled={previewMode}
/>
{!previewMode
? <div className="flex flex-col sm:flex-row justify-center mt-2">
<div className="w-full">
<Slider
title={""}
className="px-0 py-5 m-0"
disabled={previewMode}
start={"0"}
end={"10"}
interval={"1"}
step={1.0}
value={Belt.Float.toString(painScale)}
setValue={s => {
let value = s->Belt.Int.fromString
switch value {
| Some(value) => setState(prev => {...prev, scale: value})
| None => setState(prev => {...prev, scale: 0})
}
}}
getLabel={_ => getLabels(Belt.Float.toInt(painScale))}
hasError={ValidationUtils.isInputInRangeInt(
0,
10,
Belt.Float.toString(painScale)->Belt.Int.fromString,
)}
/>
<div className="mt-2">
<label className="block font-medium text-black text-left mb-1">
{str("Description")}
</label>
<textarea
placeholder="Description"
value={state.description}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]
setState(prev => {...prev, description: value})
}}
className="cui-input-base px-2 py-1"
disabled={previewMode}
/>
</div>
</div>
</div>
</div>
</div>
: <div>
<div className="grid grid-cols-1 items-center gap-4 justify-around mt-4">
<div className="flex flex-col items-center text-center">
<div className="text-black font-bold text-xl">
{str(Belt.Float.toString(painScale))}
</div>
<div className="text-sm text-gray-700"> {str("Pain Scale")} </div>
</div>
</div>
{state.description !== ""
? <div className="mt-4">
<label className="block text-sm text-gray-700 text-left">
{str("Description")}
</label>
<div className="text-black"> {str(state.description)} </div>
</div>
: React.null}
</div>}
</div>
</div>
</div>
Expand All @@ -153,7 +174,7 @@ let make = (
type_="button"
onClick={hideModal}
className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
{str("Cancel")}
{str(!previewMode ? "Cancel" : "Close")}
</button>
</div>
</div>
Expand Down
217 changes: 132 additions & 85 deletions src/Components/CriticalCareRecording/PressureSore/CriticalCare__PressureSoreInputModal.res
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,11 @@ let make = (

let handleSubmit = e => {
let region = PressureSore.regionToString(state.region)
if(state.length === 0.0 && state.width === 0.0){
if (state.length === 0.0 && state.width === 0.0) {
hideModal(e)
}
else if (state.length > 0.0 && state.width == 0.0) || (state.length == 0.0 && state.width > 0.0) {
} else if (
(state.length > 0.0 && state.width == 0.0) || (state.length == 0.0 && state.width > 0.0)
) {
hideModal(e)
Notifications.error({msg: `Please fill in both width and length for ${region} part`})
setState(prev => {...prev, length: 0.0, width: 0.0})
Expand Down Expand Up @@ -92,7 +93,7 @@ let make = (
~top=getModalPosition()["top"],
(),
)}
className="transform max-w-[350px] rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-fit">
className="transform max-w-[350px] rounded-lg overflow-hidden bg-white text-left shadow-xl transition-all sm:my-8 sm:w-fit">
<div className="bg-white px-4 pt-2 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mt-3 text-center sm:mt-0 sm:text-left">
Expand All @@ -102,86 +103,132 @@ let make = (
{str(PressureSore.regionToString(state.region))}
</span>
</div>
<div className="flex flex-col sm:flex-row justify-center mt-2 grid grid-cols-2 gap-2">
<div className="w-full">
<label className="block font-medium text-black text-left"> {str("Width")} </label>
<input
type_="number"
value={state.width->Belt.Float.toString}
step={0.1}
placeholder="Width (cm)"
className="cui-input-base px-2 py-1"
disabled={previewMode}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]->Belt.Float.fromString
switch value {
| Some(value) => setState(prev => {...prev, width: value})
| None => setState(prev => {...prev, width: 0.0})
}
}}
/>
</div>
<div>
<label className="block font-medium text-black text-left">
{str("Height")}
</label>
<input
type_="number"
value={state.length->Belt.Float.toString}
step={0.1}
placeholder="Length (cm)"
className="cui-input-base px-2 py-1"
disabled={previewMode}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]->Belt.Float.fromString
switch value {
| Some(value) => setState(prev => {...prev, length: value})
| None => setState(prev => {...prev, length: 0.0})
}
}}
/>
</div>
</div>
<div className="flex flex-col sm:flex-row gap-2 mt-2">
<CriticalCare__Dropdown
id="exudate-amount"
label="Exudate amount"
value={state.exudate_amount->PressureSore.encodeExudateAmount}
updateCB={value =>
setState(prev => {
...prev,
exudate_amount: value->PressureSore.decodeExtrudateAmount,
})}
placeholder="Exudate amount"
selectables=["None", "Light", "Moderate", "Heavy"]
disabled={previewMode}
/>
<CriticalCare__Dropdown
id="tissue-type"
label="Tissue type"
value={state.tissue_type->PressureSore.encodeTissueType}
updateCB={value =>
setState(prev => {...prev, tissue_type: value->PressureSore.decodeTissueType})}
placeholder="Tissue type"
selectables=["Closed", "Epithelial", "Granulation", "Slough", "Necrotic"]
disabled={previewMode}
/>
</div>
<div className="mt-2">
<label className="block font-medium text-black text-left">
{str("Description")}
</label>
<textarea
placeholder="Description"
value={state.description}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]
setState(prev => {...prev, description: value})
}}
className="cui-input-base px-2 py-1"
disabled={previewMode}
/>
</div>
{!previewMode
? <>
<div className="mt-2 grid grid-cols-2 gap-2">
<div className="w-full">
<label className="block font-medium text-black text-left">
{str("Width")}
</label>
<input
type_="number"
value={state.width->Belt.Float.toString}
step={0.1}
placeholder="Width (cm)"
className="cui-input-base px-2 py-1"
disabled={previewMode}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]->Belt.Float.fromString
switch value {
| Some(value) => setState(prev => {...prev, width: value})
| None => setState(prev => {...prev, width: 0.0})
}
}}
/>
</div>
<div>
<label className="block font-medium text-black text-left">
{str("Height")}
</label>
<input
type_="number"
value={state.length->Belt.Float.toString}
step={0.1}
placeholder="Length (cm)"
className="cui-input-base px-2 py-1"
disabled={previewMode}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]->Belt.Float.fromString
switch value {
| Some(value) => setState(prev => {...prev, length: value})
| None => setState(prev => {...prev, length: 0.0})
}
}}
/>
</div>
</div>
<div className="flex flex-col sm:flex-row gap-2 mt-2">
<CriticalCare__Dropdown
id="exudate-amount"
label="Exudate amount"
value={state.exudate_amount->PressureSore.encodeExudateAmount}
updateCB={value =>
setState(prev => {
...prev,
exudate_amount: value->PressureSore.decodeExtrudateAmount,
})}
placeholder="Exudate amount"
selectables=["None", "Light", "Moderate", "Heavy"]
disabled={previewMode}
/>
<CriticalCare__Dropdown
id="tissue-type"
label="Tissue type"
value={state.tissue_type->PressureSore.encodeTissueType}
updateCB={value =>
setState(prev => {
...prev,
tissue_type: value->PressureSore.decodeTissueType,
})}
placeholder="Tissue type"
selectables=["Closed", "Epithelial", "Granulation", "Slough", "Necrotic"]
disabled={previewMode}
/>
</div>
<div className="mt-2">
<label className="block font-medium text-black text-left">
{str("Description")}
</label>
<textarea
placeholder="Description"
value={state.description}
onChange={e => {
let value = ReactEvent.Form.target(e)["value"]
setState(prev => {...prev, description: value})
}}
className="cui-input-base px-2 py-1"
disabled={previewMode}
/>
</div>
</>
: <>
<div>
<div className="grid grid-cols-2 items-center gap-4 justify-around mt-4">
<div className="flex flex-col items-center text-center">
<div className="text-black font-bold text-xl">
{str(state.width->Belt.Float.toString)}
</div>
<div className="text-sm text-gray-700"> {str("Width")} </div>
</div>
<div className="flex flex-col items-center text-center">
<div className="text-black font-bold text-xl">
{str(state.length->Belt.Float.toString)}
</div>
<div className="text-sm text-gray-700"> {str("Length")} </div>
</div>
<div className="flex flex-col items-center text-center">
<div className="text-black font-bold text-xl">
{str(state.exudate_amount->PressureSore.encodeExudateAmount)}
</div>
<div className="text-sm text-gray-700"> {str("Exudate Amount")} </div>
</div>
<div className="flex flex-col items-center text-center">
<div className="text-black font-bold text-xl">
{str(state.tissue_type->PressureSore.encodeTissueType)}
</div>
<div className="text-sm text-gray-700"> {str("Tissue Type")} </div>
</div>
</div>
</div>
{state.description !== ""
? <div className="mt-4">
<label className="block text-sm text-gray-700 text-left">
{str("Description")}
</label>
<div className="text-black"> {str(state.description)} </div>
</div>
: React.null}
</>}
</div>
</div>
</div>
Expand All @@ -204,7 +251,7 @@ let make = (
type_="button"
onClick={hideModal}
className="mt-3 inline-flex w-full justify-center rounded-md border border-gray-300 bg-white px-4 py-2 text-base font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
{str("Cancel")}
{str(!previewMode ? "Cancel" : "Close")}
</button>
</div>
</div>
Expand Down

0 comments on commit 15f7d44

Please sign in to comment.