Improved Nursing Care UI; fixes #8521

src/Components/LogUpdate/Sections/NursingCare.tsx

@@ -1,69 +1,65 @@
 import { useTranslation } from "react-i18next";
 import { NURSING_CARE_PROCEDURES } from "../../../Common/constants";
-import { classNames } from "../../../Utils/utils";
-import CheckBoxFormField from "../../Form/FormFields/CheckBoxFormField";
 import TextAreaFormField from "../../Form/FormFields/TextAreaFormField";
 import { LogUpdateSectionMeta, LogUpdateSectionProps } from "../utils";
+import { MultiSelectFormField } from "../../Form/FormFields/SelectFormField";
 
 const NursingCare = ({ log, onChange }: LogUpdateSectionProps) => {
   const { t } = useTranslation();
   const nursing = log.nursing || [];
 
   return (
     <div className="flex flex-col">
-      {NURSING_CARE_PROCEDURES.map((procedure, i) => {
-        const obj = nursing.find((n) => n.procedure === procedure);
-
-        return (
-          <div
-            key={i}
-            className={classNames(
-              "overflow-hidden rounded-lg shadow-none transition-all duration-200 ease-in-out",
-              obj &&
-                "border border-secondary-400 bg-secondary-100 focus-within:shadow-md",
-            )}
-          >
-            <div className="px-4 pt-4">
-              <CheckBoxFormField
-                label={t(`NURSING_CARE_PROCEDURE__${procedure}`)}
-                name={`${procedure}__enabled`}
-                value={!!obj}
-                onChange={(e) => {
-                  if (e.value) {
-                    onChange({
-                      nursing: [...nursing, { procedure, description: "" }],
-                    });
-                  } else {
-                    onChange({
-                      nursing: nursing.filter((n) => n.procedure !== procedure),
-                    });
-                  }
-                }}
-                errorClassName="hidden"
-              />
-            </div>
-            {obj && (
-              <div className="p-4">
-                <TextAreaFormField
-                  name={`${procedure}__description`}
-                  value={obj.description}
-                  onChange={(val) =>
-                    onChange({
-                      nursing: nursing.map((n) =>
-                        n.procedure === procedure
-                          ? { ...n, description: val.value }
-                          : n,
-                      ),
-                    })
-                  }
-                  placeholder="Description"
-                  errorClassName="hidden"
-                />
-              </div>
-            )}
-          </div>
-        );
-      })}
+      <MultiSelectFormField
+        name="procedures"
+        placeholder={t("procedures_select_placeholder")}
+        value={nursing.map((p) => p.procedure)}
+        onChange={({ value }) => {
+          onChange({
+            nursing: value.map((procedure) => ({
+              procedure,
+              description:
+                nursing.find((p) => p.procedure === procedure)?.description ??
+                "",
+            })),
+          });
+        }}
+        options={NURSING_CARE_PROCEDURES}
+        optionLabel={(procedure) => t(`NURSING_CARE_PROCEDURE__${procedure}`)}
+        optionValue={(o) => o}
+        errorClassName="hidden"
+      />
+      {!!nursing.length && (
+        <table className="mb-8 w-full border-collapse">
+          <tbody>
+            {nursing.map((obj) => (
+              <tr>
+                <td className="whitespace-nowrap border border-secondary-400 p-2 pr-16 text-left text-sm font-semibold">
+                  {t(`NURSING_CARE_PROCEDURE__${obj.procedure}`)}
+                </td>
+                <td className="w-full border border-secondary-400">
+                  <TextAreaFormField
+                    name={`${obj.procedure}__description`}
+                    value={obj.description}
+                    onChange={(val) =>
+                      onChange({
+                        nursing: nursing.map((n) =>
+                          n.procedure === obj.procedure
+                            ? { ...n, description: val.value }
+                            : n,
+                        ),
+                      })
+                    }
+                    rows={2}
+                    placeholder={t("add_remarks")}
+                    errorClassName="hidden"
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
     </div>
   );
 };

src/Locale/en/Common.json

@@ -203,6 +203,6 @@
   "deleted_successfully": "{{name}} deleted successfully",
   "delete_item": "Delete {{name}}",
   "unsupported_browser": "Unsupported Browser",
-  "unsupported_browser_description": "Your browser ({{name}} version {{version}}) is not supported. Please update your browser to the latest version or switch to a supported browser for the best experience."
-
+  "unsupported_browser_description": "Your browser ({{name}} version {{version}}) is not supported. Please update your browser to the latest version or switch to a supported browser for the best experience.",
+  "add_remarks": "Add remarks"
 }

src/Locale/en/LogUpdate.json

@@ -69,5 +69,6 @@
   "pulse": "Pulse",
   "bradycardia": "Bradycardia",
   "tachycardia": "Tachycardia",
-  "spo2": "SpO₂"
+  "spo2": "SpO₂",
+  "procedures_select_placeholder": "Select procedures to add details"
 }