@openmrs/esm-ward-app 7.0.1-pre.59 → 7.1.0

package/src/routes.json

@@ -1,14 +1,54 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
-    "webservices.rest": "^2.2.0"
+    "webservices.rest": "^2.2.0",
+    "emrapi": "^2.0.0 || 2.0.0-SNAPSHOT"
+  },
+  "optionalBackendDependencies":{
+     "bedmanagement":{
+      "version": "^6.0.0 || 6.0.0-SNAPSHOT",
+      "feature": {
+        "flagName": "bedmanagement-module",
+        "label":"Ward App Patient Service",
+        "description": "This module, if installed, provides services for managing patients admitted to the ward."
+      }
+     }
   },
   "extensions": [
-  ],
-  "pages": [
+    {
+      "name": "ward-dashboard-link",
+      "component": "wardDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "ward",
+        "slot": "ward-dashboard-slot",
+        "title": "Wards"
+      }
+    },
     {
       "component": "root",
-      "route": "ward"
-    }
-  ]
+      "name": "ward-dashboard",
+      "slot": "ward-dashboard-slot"
+    },
+    {
+    "component": "wardPatientActionButtonExtension",
+    "name": "ward-patient-action-button",
+    "slot": "action-menu-ward-patient-items-slot"
+  }],
+  "workspaces": [
+    {
+      "name":"admission-requests-workspace",
+      "component": "admissionRequestWorkspace",
+      "title":"admissionRequests",
+       "type":"admission-requests"
+    },
+    {
+    "name": "ward-patient-workspace",
+    "component": "wardPatientWorkspace",
+    "type": "ward",
+    "title": "Ward Patient",
+    "width": "extra-wide",
+    "hasOwnSidebar": true,
+    "sidebarFamily": "ward-patient"
+  }]
 }

package/src/types/index.ts

@@ -1,4 +1,36 @@
-import { type Location, type Patient } from '@openmrs/esm-framework';
+import {
+  type OpenmrsResource,
+  type OpenmrsResourceStrict,
+  type Person,
+  type Visit,
+  type Location,
+  type Patient,
+} from '@openmrs/esm-framework';
+import type React from 'react';
+
+export interface WardPatientCardProps {
+  patient: Patient;
+  visit: Visit;
+  bed: Bed;
+}
+
+export type WardPatientCardRow = React.FC<WardPatientCardProps>;
+export type WardPatientCardElement = React.FC<WardPatientCardProps>;
+
+export const patientCardElementTypes = [
+  'bed-number',
+  'patient-name',
+  'patient-age',
+  'patient-address',
+  'patient-obs',
+  'patient-coded-obs-tags',
+  'admission-time',
+] as const;
+export type PatientCardElementType = (typeof patientCardElementTypes)[number];
+
+// a Ward Patient can either be a patient that is already admitted or a
+// patient that is awaiting admission
+export type WardPatient = (AdmittedPatient & { admitted: true }) | (InpatientRequest & { admitted: false });
 
 // server-side types defined in openmrs-module-bedmanagement:
 
@@ -27,7 +59,7 @@ export interface BedLayout {
   status: BedStatus;
   bedType: BedType;
   location: string;
-  patient: Patient;
+  patients: Patient[];
   bedTagMaps: BedTagMap[];
 }
 
@@ -50,3 +82,82 @@ interface BedTagMap {
 }
 
 export type BedStatus = 'AVAILABLE' | 'OCCUPIED';
+
+// server-side types defined in openmrs-module-emrapi:
+
+export type DispositionType = 'ADMISSION' | 'TRANSFER' | 'DISCHARGE';
+
+// InpatientRequest[] returned by:
+// GET /rest/emrapi/inpatient/admissionRequests
+// GET /rest/emrapi/inpatient/transferRequests
+// GET /rest/emrapi/inpatient/admissionAndTransferRequests
+export interface InpatientRequest {
+  patient: Patient;
+  visit: Visit;
+  type: DispositionType;
+
+  // as of now, these fields are not included in the backend
+  encounter?: Encounter;
+  dispositionObs?: Observation;
+  dispositionLocation?: Location;
+  dispositionDate?: Date;
+}
+
+// AdmittedPatient[] returned by:
+// GET /rest/emrapi/inpatient/visits
+export interface AdmittedPatient {
+  patient: Patient;
+  visit: Visit;
+  currentLocation: Location;
+  timeSinceAdmissionInMinutes: number;
+  timeAtInpatientLocationInMinutes: number;
+}
+
+// TODO: Move these types to esm-core
+export interface Observation extends OpenmrsResourceStrict {
+  concept: OpenmrsResource;
+  person: Person;
+  obsDatetime: string;
+  accessionNumber: string;
+  obsGroup: Observation;
+  value: number | string | boolean | OpenmrsResource;
+  valueCodedName: OpenmrsResource; // ConceptName
+  groupMembers: Array<Observation>;
+  comment: string;
+  location: Location;
+  order: OpenmrsResource; // Order
+  encounter: Encounter;
+  voided: boolean;
+}
+
+export interface Encounter extends OpenmrsResourceStrict {
+  encounterDatetime?: string;
+  patient?: Patient;
+  location?: Location;
+  form?: OpenmrsResource;
+  encounterType?: EncounterType;
+  obs?: Array<Observation>;
+  orders?: any;
+  voided?: boolean;
+  visit?: Visit;
+  encounterProviders?: Array<EncounterProvider>;
+  diagnoses?: any;
+}
+
+export interface EncounterProvider extends OpenmrsResourceStrict {
+  provider?: OpenmrsResource;
+  encounterRole?: EncounterRole;
+  voided?: boolean;
+}
+
+export interface EncounterType extends OpenmrsResourceStrict {
+  name?: string;
+  description?: string;
+  retired?: boolean;
+}
+
+export interface EncounterRole extends OpenmrsResourceStrict {
+  name?: string;
+  description?: string;
+  retired?: boolean;
+}

package/src/ward-patient-card/row-elements/ward-patient-age.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardPatientCardElement } from '../../types';
+
+const WardPatientAge: WardPatientCardElement = ({ patient }) => {
+  const { t } = useTranslation();
+  // TODO: BED-10
+  // make the backend return patient.person.birthdate so we can use the age() function to calculate age
+  return patient?.person?.age ? (
+    <div>
+      {t('yearsOld', '{{age}} yrs', {
+        age: patient?.person?.age,
+      })}
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default WardPatientAge;

package/src/ward-patient-card/row-elements/ward-patient-bed-number.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import styles from '../ward-patient-card.scss';
+import { type WardPatientCardElement } from '../../types';
+
+const WardPatientBedNumber: WardPatientCardElement = ({ bed }) => {
+  if (!bed) {
+    return <></>;
+  }
+  return (
+    <div className={styles.bedNumberBox}>
+      <span className={styles.wardPatientBedNumber}>{bed.bedNumber}</span>
+    </div>
+  );
+};
+
+export default WardPatientBedNumber;

package/src/ward-patient-card/row-elements/ward-patient-coded-obs-tags.tsx

@@ -0,0 +1,80 @@
+import { SkeletonText, Tag } from '@carbon/react';
+import { translateFrom, type OpenmrsResource } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type PatientCodedObsTagsElementConfig } from '../../config-schema';
+import { moduleName } from '../../constant';
+import { useObs } from '../../hooks/useObs';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+import { obsCustomRepresentation, useConceptToTagColorMap } from './ward-patient-obs.resource';
+
+/**
+ * The WardPatientCodedObsTags displays observations of coded values of a particular concept in the active visit as tags.
+ * Typically, these are taken from checkbox fields from a form. Each answer value can either be configured
+ * to show as its own tag, or collapsed into a summary tag show the number of these values present.
+ *
+ * This is a rather specialized element;
+ * for a more general display of obs value, use WardPatientObs instead.
+ * @param config
+ * @returns
+ */
+const wardPatientCodedObsTags = (config: PatientCodedObsTagsElementConfig) => {
+  const WardPatientCodedObsTags: WardPatientCardElement = ({ patient, visit }) => {
+    const { conceptUuid, summaryLabel, summaryLabelColor, summaryLabelI18nModule } = config;
+    const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+    const { t } = useTranslation();
+    const { data: conceptToTagColorMap } = useConceptToTagColorMap(config);
+
+    if (isLoading) {
+      return <SkeletonText />;
+    } else {
+      const obsToDisplay = data?.data?.results?.filter((o) => {
+        const matchVisit = o.encounter.visit?.uuid == visit?.uuid;
+        return matchVisit || visit == null; // TODO: remove visit == null hack when server API supports returning visit
+      });
+
+      const summaryLabelToDisplay =
+        summaryLabel != null
+          ? translateFrom(summaryLabelI18nModule ?? moduleName, summaryLabel)
+          : obsToDisplay?.[0]?.concept?.display;
+
+      const obsNodes = obsToDisplay?.map((o) => {
+        const { display, uuid } = o.value as OpenmrsResource;
+
+        const color = conceptToTagColorMap?.get(uuid);
+        if (color) {
+          return (
+            <Tag type={color} key={`ward-coded-obs-tag-${o.uuid}`}>
+              {display}
+            </Tag>
+          );
+        } else {
+          return null;
+        }
+      });
+
+      const obsWithNoTagCount = obsNodes.filter((o) => o == null).length;
+      if (obsNodes?.length > 0 || obsWithNoTagCount > 0) {
+        return (
+          <div>
+            <span className={styles.wardPatientObsLabel}>
+              {obsNodes}
+              {obsWithNoTagCount > 0 ? (
+                <Tag type={summaryLabelColor}>
+                  {t('countItems', '{{count}} {{item}}', { count: obsWithNoTagCount, item: summaryLabelToDisplay })}
+                </Tag>
+              ) : null}
+            </span>
+          </div>
+        );
+      } else {
+        return null;
+      }
+    }
+  };
+
+  return WardPatientCodedObsTags;
+};
+
+export default wardPatientCodedObsTags;

package/src/ward-patient-card/row-elements/ward-patient-header-address.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+import { type PatientAddressElementConfig } from '../../config-schema';
+
+const wardPatientAddress = (config: PatientAddressElementConfig) => {
+  const wardPatientAddress: WardPatientCardElement = ({ patient }) => {
+    const { addressFields } = config;
+
+    const preferredAddress = patient?.person?.preferredAddress;
+
+    return (
+      <div className={styles.wardPatientAddress}>
+        {addressFields?.map((field, i) =>
+          preferredAddress?.[field] ? <div key={i}>{preferredAddress?.[field] as string}</div> : <></>,
+        )}
+      </div>
+    );
+  };
+
+  return wardPatientAddress;
+};
+
+export default wardPatientAddress;

package/src/ward-patient-card/row-elements/ward-patient-name.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+
+const WardPatientName: WardPatientCardElement = ({ patient }) => {
+  // TODO: BED-10
+  // make server return patient.display and use that instead
+  const { givenName, familyName } = patient?.person?.preferredName;
+  const name = `${givenName} ${familyName}`;
+  return <div className={styles.wardPatientName}>{name}</div>;
+};
+
+export default WardPatientName;

package/src/ward-patient-card/row-elements/ward-patient-obs.resource.ts

@@ -0,0 +1,52 @@
+import { openmrsFetch, restBaseUrl, type Concept } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+import { type PatientCodedObsTagsElementConfig } from '../../config-schema';
+
+// prettier-ignore
+export const obsCustomRepresentation = 
+  'custom:(uuid,display,obsDatetime,value,' + 
+    'concept:(uuid,display),' + 
+    'encounter:(uuid,display,' + 
+      'visit:(uuid,display)))';
+
+//  get the setMembers of a concept set
+const conceptSetCustomRepresentation = 'custom:(uuid,setMembers:(uuid))';
+
+export function useConceptToTagColorMap(codedObsTagsConfig: PatientCodedObsTagsElementConfig) {
+  // fetch the members of the concept sets and process the data
+  // to return conceptToTagColorMap (wrapped in a promise).
+  // Let swr cache the result of this function.
+  const fetchAndMap = (url: string) => {
+    const conceptSetToTagColorMap = new Map<string, string>();
+    for (const tag of codedObsTagsConfig.tags) {
+      const { color, appliedToConceptSets } = tag;
+      for (const answer of appliedToConceptSets ?? []) {
+        if (!conceptSetToTagColorMap.has(answer)) {
+          conceptSetToTagColorMap.set(answer, color);
+        }
+      }
+    }
+
+    return openmrsFetch<{ results: Array<Concept> }>(url).then((data) => {
+      const conceptSets = data.data.results;
+      const conceptToTagColorMap = new Map<string, string>();
+      if (conceptSets) {
+        for (const conceptSet of conceptSets) {
+          for (const concept of conceptSet.setMembers) {
+            if (!conceptToTagColorMap.has(concept.uuid)) {
+              conceptToTagColorMap.set(concept.uuid, conceptSetToTagColorMap.get(conceptSet.uuid));
+            }
+          }
+        }
+      }
+
+      return conceptToTagColorMap;
+    });
+  };
+
+  const conceptSetUuids = codedObsTagsConfig.tags.flatMap((tag) => tag.appliedToConceptSets);
+  const apiUrl = `${restBaseUrl}/concept?references=${conceptSetUuids.join()}&v=${conceptSetCustomRepresentation}`;
+  const conceptToTagColorMap = useSWRImmutable(apiUrl, fetchAndMap);
+
+  return conceptToTagColorMap;
+}

package/src/ward-patient-card/row-elements/ward-patient-obs.tsx

@@ -0,0 +1,58 @@
+import { SkeletonText, Tag } from '@carbon/react';
+import { type OpenmrsResource, translateFrom } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type PatientObsElementConfig } from '../../config-schema';
+import { useObs } from '../../hooks/useObs';
+import { type WardPatientCardElement } from '../../types';
+import styles from '../ward-patient-card.scss';
+import { moduleName } from '../../constant';
+import { obsCustomRepresentation } from './ward-patient-obs.resource';
+
+const wardPatientObs = (config: PatientObsElementConfig) => {
+  const WardPatientObs: WardPatientCardElement = ({ patient, visit }) => {
+    const { conceptUuid, onlyWithinCurrentVisit, orderBy, limit, label, labelI18nModule: labelModule } = config;
+    const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+    const { t } = useTranslation();
+
+    if (isLoading) {
+      return <SkeletonText />;
+    } else {
+      const obsToDisplay = data?.data?.results
+        ?.filter((o) => {
+          const matchVisit = !onlyWithinCurrentVisit || o.encounter.visit?.uuid == visit?.uuid;
+          return matchVisit;
+        })
+        ?.sort((obsA, obsB) => {
+          return (orderBy == 'descending' ? -1 : 1) * obsA.obsDatetime.localeCompare(obsB.obsDatetime);
+        })
+        ?.slice(0, limit ?? Number.MAX_VALUE);
+
+      const labelToDisplay =
+        label != null ? translateFrom(labelModule ?? moduleName, label) : obsToDisplay?.[0]?.concept?.display;
+
+      const obsNodes = obsToDisplay?.map((o) => {
+        const { value } = o;
+        const display: any = (value as OpenmrsResource)?.display ?? o.value;
+        return <span key={o.uuid}> {display} </span>;
+      });
+
+      if (obsNodes?.length > 0) {
+        return (
+          <div>
+            <span className={styles.wardPatientObsLabel}>
+              {labelToDisplay ? t('labelColon', '{{label}}:', { label: labelToDisplay }) : ''}
+            </span>
+            {obsNodes}
+          </div>
+        );
+      } else {
+        return null;
+      }
+    }
+  };
+
+  return WardPatientObs;
+};
+
+export default wardPatientObs;

package/src/ward-patient-card/ward-patient-card-row.resources.tsx

@@ -0,0 +1,92 @@
+import { useConfig } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import {
+  builtInPatientCardElements,
+  defaultPatientCardElementConfig,
+  type PatientCardElementDefinition,
+  type WardConfigObject,
+} from '../config-schema';
+import type { WardPatientCardElement, WardPatientCardProps } from '../types';
+import WardPatientAge from './row-elements/ward-patient-age';
+import WardPatientBedNumber from './row-elements/ward-patient-bed-number';
+import wardPatientAddress from './row-elements/ward-patient-header-address';
+import WardPatientName from './row-elements/ward-patient-name';
+import React from 'react';
+import styles from './ward-patient-card.scss';
+import wardPatientObs from './row-elements/ward-patient-obs';
+import wardPatientCodedObsTags from './row-elements/ward-patient-coded-obs-tags';
+
+export function usePatientCardRows(location: string) {
+  const { wardPatientCards } = useConfig<WardConfigObject>();
+  const patientCardRows = useMemo(() => {
+    const { cardDefinitions, patientCardElementDefinitions } = wardPatientCards;
+
+    // map of patientCardElementId to its corresponding React component
+    const patientCardElementsMap = new Map<string, WardPatientCardElement>();
+    for (const elementType of builtInPatientCardElements) {
+      patientCardElementsMap.set(
+        elementType,
+        getPatientCardElementFromDefinition({
+          id: elementType,
+          elementType,
+          config: defaultPatientCardElementConfig,
+        }),
+      );
+    }
+    for (const patientCardElementDef of patientCardElementDefinitions) {
+      patientCardElementsMap.set(patientCardElementDef.id, getPatientCardElementFromDefinition(patientCardElementDef));
+    }
+
+    const cardDefinition = cardDefinitions.find((cardDef) => {
+      const appliedTo = cardDef.appliedTo;
+
+      return appliedTo == null || appliedTo.some((criteria) => criteria.location == location);
+    });
+
+    const ret = cardDefinition.rows.map((row) => {
+      const { rowType, elements } = row;
+      const patientCardElements = elements.map((patientCardElementId) => {
+        const slot = patientCardElementsMap.get(patientCardElementId);
+        return slot;
+      });
+
+      const WardPatientCardRow: React.FC<WardPatientCardProps> = (props) => {
+        return (
+          <div className={styles.wardPatientCardRow + ' ' + (rowType == 'header' ? styles.wardPatientCardHeader : '')}>
+            {patientCardElements.map((PatientCardElement, i) => (
+              <PatientCardElement {...props} key={i} />
+            ))}
+          </div>
+        );
+      };
+
+      return WardPatientCardRow;
+    });
+    return ret;
+  }, [location, wardPatientCards]);
+
+  return patientCardRows;
+}
+
+function getPatientCardElementFromDefinition(
+  patientCardElementDef: PatientCardElementDefinition,
+): WardPatientCardElement {
+  const { elementType, config } = patientCardElementDef;
+  switch (elementType) {
+    case 'bed-number':
+      return WardPatientBedNumber;
+    case 'patient-name':
+      return WardPatientName;
+    case 'patient-age':
+      return WardPatientAge;
+    case 'patient-address': {
+      return wardPatientAddress(config.address);
+    }
+    case 'patient-obs': {
+      return wardPatientObs(config.obs);
+    }
+    case 'patient-coded-obs-tags': {
+      return wardPatientCodedObsTags(config.codedObsTags);
+    }
+  }
+}

package/src/ward-patient-card/ward-patient-card.scss

@@ -0,0 +1,114 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/colors';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.wardPatientCard {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: spacing.$spacing-02;
+  background-color: $ui-02;
+
+  position: relative; // this allows positioning the button correctly
+
+  > .wardPatientCardRow:not(:first-child) {
+    border-top: 1px colors.$gray-20 solid;
+  }
+}
+
+.wardPatientCardButton {
+  border: none;
+  padding: 0;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    cursor: pointer;
+    border: 2px solid transparent;
+    transition: border-color 200ms;
+  }
+
+  &:hover::before,
+  &:focus::before {
+    border-color: $interactive-01;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.wardPatientCardRow {
+  width: 100%;
+  padding: spacing.$spacing-04;
+}
+
+.wardPatientCardRow:empty {
+  display: none;
+}
+
+.wardPatientCardHeader {
+  @extend .dotSeparatedChildren;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.wardPatientName {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  &::before {
+    content: '' !important;
+  }
+}
+
+.wardPatientBedNumber {
+  @include type.type-style('heading-compact-01');
+  border-radius: 50%;
+  color: $ui-02;
+  background-color: $color-blue-60-2;
+  padding: spacing.$spacing-04;
+  width: spacing.$spacing-04;
+  height: spacing.$spacing-04;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  &.empty {
+    background-color: $color-blue-10;
+    color: $color-blue-60-2;
+  }
+}
+
+.bedNumberBox {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.wardPatientAddress {
+  @extend .dotSeparatedChildren;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: spacing.$spacing-02;
+}
+
+.wardPatientObsLabel {
+  padding-right: spacing.$spacing-02;
+}
+
+.dotSeparatedChildren {
+  > div:not(div:first-of-type) {
+    display: flex;
+    align-items: center;
+    &::before {
+      content: '·';
+      padding: 0 spacing.$spacing-02;
+    }
+  }
+}