feat: View Observation Form in React [Ayush | Soorya] (#705)

Bahmni · Sep 19, 2023 · 7b3aa4a · 7b3aa4a
1 parent 02ff93c
commit 7b3aa4a
Show file tree

Hide file tree

Showing 15 changed files with 1,392 additions and 94 deletions.
diff --git a/micro-frontends/src/next-ui/Components/ViewObservationForm/TileItem/TileItem.jsx b/micro-frontends/src/next-ui/Components/ViewObservationForm/TileItem/TileItem.jsx
@@ -0,0 +1,89 @@
+import React from "react";
+import propTypes from "prop-types";
+import { Document } from "@carbon/icons-react/next";
+import {
+  subLabels,
+  isAbnormal,
+  getValue,
+} from "../../../utils/FormDisplayControl/FormView";
+import "../viewObservationForm.scss";
+
+export const TileItem = (props) => {
+  const { items } = props;
+
+  return (
+    <>
+      <div className="row-body">
+        {items.map((item, index) => {
+          const hasSubItems = item?.groupMembers?.length > 0;
+          return hasSubItems ? (
+            <div key={index} className="sub-items-body">
+              <span className="sub-items-title">{item.concept.shortName}</span>
+              <div className="row-body">
+                {item.groupMembers.map((subItem, index) => {
+                  return (
+                    <div
+                      key={index}
+                      className={`row-element ${
+                        isAbnormal(subItem.interpretation) ? "is-abnormal" : ""
+                      }`}
+                      data-testid={`subItem-${index}`}
+                    >
+                      <div className="row-content">
+                        <div className="row-label">
+                          {subItem.concept.shortName}&nbsp;
+                          <span className="sub-label">
+                            {subLabels(subItem.concept)}
+                          </span>
+                        </div>
+                        <div className="row-value">
+                          {getValue(subItem)}
+                          &nbsp;{subItem.concept.units || ""}
+                        </div>
+                      </div>
+                      {subItem.notes && (
+                        <span className="notes-section">
+                          <Document className="document-icon" />
+                          {subItem.notes}
+                        </span>
+                      )}
+                    </div>
+                  );
+                })}
+              </div>
+            </div>
+          ) : (
+            <div
+              className={`row-element ${
+                isAbnormal(item.interpretation) ? "is-abnormal" : ""
+              }`}
+              key={index}
+            >
+              <div className="row-content">
+                <div className="row-label">
+                  {item.concept.shortName}&nbsp;
+                  <span className="sub-label">{subLabels(item.concept)}</span>
+                </div>
+                <div className="row-value">
+                  {getValue(item)}
+                  &nbsp;{item.concept.units || ""}
+                </div>
+              </div>
+              {item.notes && (
+                <span className="notes-section">
+                  <Document className="document-icon" />
+                  {item.notes}
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+TileItem.propTypes = {
+  items: propTypes.array,
+};
+export default TileItem;
diff --git a/micro-frontends/src/next-ui/Components/ViewObservationForm/TileItem/TileItem.spec.jsx b/micro-frontends/src/next-ui/Components/ViewObservationForm/TileItem/TileItem.spec.jsx
@@ -0,0 +1,71 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import TileItem from "./TileItem.jsx";
+
+const initialProps = {
+  items: [
+    {
+      concept: { shortName: "Comments" },
+      value: "test comment text",
+      groupMembers: [],
+      notes: "notes example",
+    },
+    {
+      concept: { shortName: "Vitals" },
+      groupMembers: [
+        {
+          concept: {
+            shortName: "Temperature (F)",
+            hiNormal: 99.86,
+            lowNormal: 95,
+            units: null,
+          },
+          value: "100",
+          interpretation: "Abnormal",
+        },
+        {
+          concept: {
+            shortName: "Pulse",
+            hiNormal: 100,
+            lowNormal: 60,
+            units: "beats/min",
+          },
+          value: "12",
+        },
+        {
+          concept: {
+            shortName: "Respiratory rate",
+            hiNormal: 18,
+            lowNormal: 12,
+            units: null,
+          },
+          value: "12",
+          notes: "notes example",
+        },
+      ],
+    },
+  ],
+};
+
+describe("TileItem", () => {
+  it("should match the screenshot", () => {
+    const { container } = render(<TileItem {...initialProps} />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it("should render the correct items", () => {
+    render(<TileItem {...initialProps} />);
+    // label
+    expect(screen.getByText("Comments")).toBeTruthy();
+    // sub label
+    expect(screen.getByText("(60 - 100)")).toBeTruthy();
+    // value
+    expect(screen.getByText("test comment text")).toBeTruthy();
+  });
+
+  it("should highlight member in red if it is abnormal", () => {
+    render(<TileItem {...initialProps} />);
+    const element = screen.getByTestId("subItem-0");
+    expect(element.classList.contains("is-abnormal")).toBeTruthy();
+  });
+});
diff --git a/.../src/next-ui/Components/ViewObservationForm/TileItem/__snapshots__/TileItem.spec.jsx.snap b/.../src/next-ui/Components/ViewObservationForm/TileItem/__snapshots__/TileItem.spec.jsx.snap
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TileItem should match the screenshot 1`] = `
+<div>
+  <div
+    class="row-body"
+  >
+    <div
+      class="row-element "
+    >
+      <div
+        class="row-content"
+      >
+        <div
+          class="row-label"
+        >
+          Comments
+           
+          <span
+            class="sub-label"
+          />
+        </div>
+        <div
+          class="row-value"
+        >
+          test comment text
+           
+          
+        </div>
+      </div>
+      <span
+        class="notes-section"
+      >
+        <svg
+          aria-hidden="true"
+          class="document-icon"
+          fill="currentColor"
+          focusable="false"
+          height="16"
+          preserveAspectRatio="xMidYMid meet"
+          viewBox="0 0 32 32"
+          width="16"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M25.7,9.3l-7-7C18.5,2.1,18.3,2,18,2H8C6.9,2,6,2.9,6,4v24c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V10C26,9.7,25.9,9.5,25.7,9.3 z M18,4.4l5.6,5.6H18V4.4z M24,28H8V4h8v6c0,1.1,0.9,2,2,2h6V28z"
+          />
+          <path
+            d="M10 22H22V24H10zM10 16H22V18H10z"
+          />
+        </svg>
+        notes example
+      </span>
+    </div>
+    <div
+      class="sub-items-body"
+    >
+      <span
+        class="sub-items-title"
+      >
+        Vitals
+      </span>
+      <div
+        class="row-body"
+      >
+        <div
+          class="row-element is-abnormal"
+          data-testid="subItem-0"
+        >
+          <div
+            class="row-content"
+          >
+            <div
+              class="row-label"
+            >
+              Temperature (F)
+               
+              <span
+                class="sub-label"
+              >
+                (95 - 99.86)
+              </span>
+            </div>
+            <div
+              class="row-value"
+            >
+              100
+               
+              
+            </div>
+          </div>
+        </div>
+        <div
+          class="row-element "
+          data-testid="subItem-1"
+        >
+          <div
+            class="row-content"
+          >
+            <div
+              class="row-label"
+            >
+              Pulse
+               
+              <span
+                class="sub-label"
+              >
+                (60 - 100)
+              </span>
+            </div>
+            <div
+              class="row-value"
+            >
+              12
+               
+              beats/min
+            </div>
+          </div>
+        </div>
+        <div
+          class="row-element "
+          data-testid="subItem-2"
+        >
+          <div
+            class="row-content"
+          >
+            <div
+              class="row-label"
+            >
+              Respiratory rate
+               
+              <span
+                class="sub-label"
+              >
+                (12 - 18)
+              </span>
+            </div>
+            <div
+              class="row-value"
+            >
+              12
+               
+              
+            </div>
+          </div>
+          <span
+            class="notes-section"
+          >
+            <svg
+              aria-hidden="true"
+              class="document-icon"
+              fill="currentColor"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M25.7,9.3l-7-7C18.5,2.1,18.3,2,18,2H8C6.9,2,6,2.9,6,4v24c0,1.1,0.9,2,2,2h16c1.1,0,2-0.9,2-2V10C26,9.7,25.9,9.5,25.7,9.3 z M18,4.4l5.6,5.6H18V4.4z M24,28H8V4h8v6c0,1.1,0.9,2,2,2h6V28z"
+              />
+              <path
+                d="M10 22H22V24H10zM10 16H22V18H10z"
+              />
+            </svg>
+            notes example
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;