Updated Preview UIs

ohcnetwork · Mar 11, 2024 · 913f5df · 913f5df
1 parent 83dc92f
commit 913f5df
Show file tree

Hide file tree

Showing 2 changed files with 283 additions and 122 deletions.
diff --git a/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res b/src/Components/CriticalCareRecording/Pain/CriticalCare__PainInputModal.res
@@ -32,11 +32,17 @@ let make = (
   }, [state])
 
   let handleClickOutside = %raw(`
+
     function (event, ref, hideModal) {
+
       if (ref.current && !ref.current.contains(event.target)) {
+
         hideModal(event)
+
       }
+
     }
+
   `)
 
   let getModalPosition = React.useMemo(() => {
@@ -86,48 +92,67 @@ let make = (
                 <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={"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}
+                        />
+                      </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>