(feat) Add Encounter navigation that displays all encounters

package.json

@@ -3,11 +3,11 @@
   "version": "3.0.0",
   "license": "MPL-2.0",
   "description": "An OpenMRS seed application for building microfrontends",
-  "browser": "dist/openmrs-esm-rwanda.js",
+  "browser": "dist/openmrs-esm-rwanda-app.js",
   "main": "src/index.ts",
   "source": true,
   "scripts": {
-    "start": "openmrs develop --backend http://197.243.94.19:8080",
+    "start": "openmrs develop --backend https://rwandaemr.globalhealthapp.net",
     "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env analyze=true",
@@ -34,14 +34,14 @@
   ],
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/UCSF-IGHS/openmrs-esm-rwanda.git"
+    "url": "git+https://github.com/UCSF-IGHS/openmrs-esm-rwanda-app.git"
   },
-  "homepage": "https://github.com/UCSF-IGHS/openmrs-esm-rwanda#readme",
+  "homepage": "https://github.com/UCSF-IGHS/openmrs-esm-rwanda-app#readme",
   "publishConfig": {
     "access": "public"
   },
   "bugs": {
-    "url": "https://github.com/UCSF-IGHS/openmrs-esm-rwanda/issues"
+    "url": "https://github.com/UCSF-IGHS/openmrs-esm-rwanda-app/issues"
   },
   "dependencies": {
     "@carbon/react": "^1.33.1",

src/config-schema.ts

@@ -1,25 +1,5 @@
 import { Type, validator } from "@openmrs/esm-framework";
 
-/**
- * This is the config schema. It expects a configuration object which
- * looks like this:
- *
- * ```json
- * { "casualGreeting": true, "whoToGreet": ["Mom"] }
- * ```
- *
- * In OpenMRS Microfrontends, all config parameters are optional. Thus,
- * all elements must have a reasonable default. A good default is one
- * that works well with the reference application.
- *
- * To understand the schema below, please read the configuration system
- * documentation:
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config
- * Note especially the section "How do I make my module configurable?"
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=im-developing-an-esm-module-how-do-i-make-it-configurable
- * and the Schema Reference
- *   https://openmrs.github.io/openmrs-esm-core/#/main/config?id=schema-reference
- */
 export const configSchema = {
   casualGreeting: {
     _type: Type.Boolean,

src/dashboard.meta.ts

@@ -0,0 +1,6 @@
+export const dashboardMeta = {
+  slot: "patient-chart-all-encounters-dashboard-slot",
+  columns: 1,
+  path: "Encounters",
+  title: "Encounters",
+};

src/encounters/encounterObservations.scss

@@ -0,0 +1,22 @@
+@use '@carbon/styles/scss/spacing';
+
+.observation {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: spacing.$spacing-03;
+  margin-block: spacing.$spacing-05;
+  margin-inline: 0 spacing.$spacing-05;
+}
+
+.observation > span {
+  align-self: center;
+  justify-self: start;
+}
+
+.parentConcept {
+  font-weight: bold;
+}
+
+.childConcept {
+  padding-inline-start: 0.8rem;
+}

src/encounters/encounterObservations.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SkeletonText } from "@carbon/react";
+import { useConfig } from "@openmrs/esm-framework";
+import { type Observation } from "./encounters.resource";
+import styles from "./encounterObservations.scss";
+
+interface EncounterObservationsProps {
+  observations: Array<Observation>;
+}
+
+const EncounterObservations: React.FC<EncounterObservationsProps> = ({
+  observations,
+}) => {
+  const { t } = useTranslation();
+  const { obsConceptUuidsToHide = [] } = useConfig();
+
+  function getAnswerFromDisplay(display: string): string {
+    const colonIndex = display.indexOf(":");
+    if (colonIndex === -1) {
+      return "";
+    } else {
+      return display.substring(colonIndex + 1).trim();
+    }
+  }
+
+  if (!observations) {
+    return <SkeletonText />;
+  }
+
+  if (observations) {
+    const filteredObservations = obsConceptUuidsToHide.length
+      ? observations?.filter((obs) => {
+          return !obsConceptUuidsToHide.includes(obs?.concept?.uuid);
+        })
+      : observations;
+
+    return (
+      <div className={styles.observation}>
+        {filteredObservations?.map((obs, index) => {
+          if (obs?.groupMembers) {
+            return (
+              <React.Fragment key={index}>
+                <span className={styles.parentConcept}>
+                  {obs?.concept?.display}
+                </span>
+                <span />
+                {obs.groupMembers.map((member) => (
+                  <React.Fragment key={index}>
+                    <span className={styles.childConcept}>
+                      {member?.concept?.display}
+                    </span>
+                    <span>{getAnswerFromDisplay(member.display)}</span>
+                  </React.Fragment>
+                ))}
+              </React.Fragment>
+            );
+          } else {
+            return (
+              <React.Fragment key={index}>
+                <span>{obs?.concept?.display || obs.display}</span>
+                <span>{getAnswerFromDisplay(obs.display)}</span>
+              </React.Fragment>
+            );
+          }
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.observation}>
+      <p>{t("noObservationsFound", "No observations found")}</p>
+    </div>
+  );
+};
+
+export default EncounterObservations;

src/encounters/encounters-table.scss

@@ -0,0 +1,127 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '@openmrs/esm-styleguide/src/vars';
+
+.tableContainer {
+  padding: 0;
+
+  :global(.cds--data-table-content) {
+    border: 1px solid $ui-03;
+    border-bottom: none;
+    overflow: visible;
+  }
+
+  :global(.cds--data-table-header) {
+    padding: 0;
+  }
+
+  :global(.cds--table-toolbar) {
+    position: relative;
+    height: 2rem;
+    overflow: visible;
+    top: 0;
+  }
+
+  &:global(.cds--data-table-container) {
+    background: none !important;
+  }
+
+  :global(.cds--toolbar-content),
+  :global(.cds--toolbar-search-container-expandable) {
+    height: 2rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .fixedColumn {
+    width: 12rem;
+    min-width: 12rem;
+    max-width: 12rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
+.filterContainer {
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}
+
+.search {
+  max-width: 16rem;
+}
+
+.tableHeader > :global(.cds--table-header-label) {
+  @include type.type-style('productive-heading-01');
+  color: $text-02;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.expandedRow {
+  padding-inline-start: 3.5rem;
+  > td {
+    padding: inherit !important;
+
+    > div {
+      max-height: max-content !important;
+    }
+  }
+
+  > div {
+    background-color: $ui-02;
+  }
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  :global(.cds--table-toolbar) {
+    min-height: 2rem;
+  }
+}
+
+/* Mobile */
+:global(.omrs-breakpoint-lt-desktop) {
+  :global(.cds--table-toolbar) {
+    min-height: 2.5rem;
+  }
+}