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

package/src/types/index.ts

@@ -10,6 +10,7 @@ import type React from 'react';
 
 export interface WardPatientCardProps {
   patient: Patient;
+  visit: Visit;
   bed: Bed;
 }
 
@@ -21,10 +22,16 @@ export const patientCardElementTypes = [
   '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:
 
 export interface AdmissionLocation {
@@ -52,7 +59,7 @@ export interface BedLayout {
   status: BedStatus;
   bedType: BedType;
   location: string;
-  patient: Patient;
+  patients: Patient[];
   bedTagMaps: BedTagMap[];
 }
 
@@ -76,6 +83,36 @@ 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;
@@ -83,6 +120,7 @@ export interface Observation extends OpenmrsResourceStrict {
   obsDatetime: string;
   accessionNumber: string;
   obsGroup: Observation;
+  value: number | string | boolean | OpenmrsResource;
   valueCodedName: OpenmrsResource; // ConceptName
   groupMembers: Array<Observation>;
   comment: string;
@@ -98,7 +136,7 @@ export interface Encounter extends OpenmrsResourceStrict {
   location?: Location;
   form?: OpenmrsResource;
   encounterType?: EncounterType;
-  obs?: Observation;
+  obs?: Array<Observation>;
   orders?: any;
   voided?: boolean;
   visit?: Visit;

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

@@ -6,12 +6,14 @@ 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 (
+  return patient?.person?.age ? (
     <div>
       {t('yearsOld', '{{age}} yrs', {
         age: patient?.person?.age,
       })}
     </div>
+  ) : (
+    <></>
   );
 };
 

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

@@ -3,6 +3,9 @@ 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>

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

@@ -11,7 +11,9 @@ const wardPatientAddress = (config: PatientAddressElementConfig) => {
 
     return (
       <div className={styles.wardPatientAddress}>
-        {addressFields?.map((field, i) => <div key={i}>{preferredAddress?.[field] as string}</div>)}
+        {addressFields?.map((field, i) =>
+          preferredAddress?.[field] ? <div key={i}>{preferredAddress?.[field] as string}</div> : <></>,
+        )}
       </div>
     );
   };

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

@@ -13,6 +13,8 @@ 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>();
@@ -48,11 +50,11 @@ export function usePatientCardRows(location: string) {
         return slot;
       });
 
-      const WardPatientCardRow: React.FC<WardPatientCardProps> = ({ patient, bed }) => {
+      const WardPatientCardRow: React.FC<WardPatientCardProps> = (props) => {
         return (
-          <div className={rowType == 'header' ? styles.wardPatientCardHeader : ''}>
+          <div className={styles.wardPatientCardRow + ' ' + (rowType == 'header' ? styles.wardPatientCardHeader : '')}>
             {patientCardElements.map((PatientCardElement, i) => (
-              <PatientCardElement patient={patient} bed={bed} key={i} />
+              <PatientCardElement {...props} key={i} />
             ))}
           </div>
         );
@@ -78,8 +80,13 @@ function getPatientCardElementFromDefinition(
     case 'patient-age':
       return WardPatientAge;
     case 'patient-address': {
-      // TODO: configure address fields to pass in
-      return wardPatientAddress(config);
+      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

@@ -1,5 +1,6 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
+@use '@carbon/colors';
 @import '~@openmrs/esm-styleguide/src/vars';
 
 .wardPatientCard {
@@ -11,9 +12,47 @@
   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;
@@ -59,6 +98,10 @@
   gap: spacing.$spacing-02;
 }
 
+.wardPatientObsLabel {
+  padding-right: spacing.$spacing-02;
+}
+
 .dotSeparatedChildren {
   > div:not(div:first-of-type) {
     display: flex;

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

@@ -3,6 +3,8 @@ import { useParams } from 'react-router-dom';
 import { type WardPatientCardProps } from '../types';
 import { usePatientCardRows } from './ward-patient-card-row.resources';
 import styles from './ward-patient-card.scss';
+import { getPatientName, launchWorkspace } from '@openmrs/esm-framework';
+import { type WardPatientWorkspaceProps } from '../ward-patient-workspace/ward-patient.workspace';
 
 const WardPatientCard: React.FC<WardPatientCardProps> = (props) => {
   const { locationUuid } = useParams();
@@ -10,9 +12,17 @@ const WardPatientCard: React.FC<WardPatientCardProps> = (props) => {
 
   return (
     <div className={styles.wardPatientCard}>
-      {patientCardRows.map((WardPatientCardRow) => (
-        <WardPatientCardRow {...props} />
+      {patientCardRows.map((WardPatientCardRow, i) => (
+        <WardPatientCardRow key={i} {...props} />
       ))}
+      <button
+        className={styles.wardPatientCardButton}
+        onClick={() =>
+          launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace', { patientUuid: props.patient.uuid })
+        }>
+        {/* Name will not be displayed; just there for a11y */}
+        {getPatientName(props.patient.person)}
+      </button>
     </div>
   );
 };

package/src/ward-patient-workspace/ward-patient-action-button.extension.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { UserAvatarIcon } from '@openmrs/esm-framework';
+import { ActionMenuButton, launchWorkspace } from '@openmrs/esm-framework';
+
+export default function WardPatientActionButton() {
+  const { t } = useTranslation();
+
+  return (
+    <ActionMenuButton
+      getIcon={(props) => <UserAvatarIcon {...props} />}
+      label={t('Patient', 'patient')}
+      iconDescription={t('Patient', 'patient')}
+      handler={() => launchWorkspace('ward-patient-workspace')}
+      type={'ward'}
+    />
+  );
+}

package/src/ward-patient-workspace/ward-patient.style.scss

@@ -0,0 +1,11 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.workspaceContainer {
+  min-height: var(--desktop-workspace-window-height);
+}
+
+.headerPatientDetail {
+  @include type.type-style('body-compact-02');
+  margin: 0 spacing.$spacing-02;
+}

package/src/ward-patient-workspace/ward-patient.workspace.tsx

@@ -0,0 +1,79 @@
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification } from '@carbon/react';
+import { InlineLoading } from '@carbon/react';
+import {
+  type DefaultWorkspaceProps,
+  ExtensionSlot,
+  attach,
+  getPatientName,
+  usePatient,
+  age,
+} from '@openmrs/esm-framework';
+import styles from './ward-patient.style.scss';
+
+attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
+
+export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
+  patientUuid: string;
+}
+
+export default function WardPatientWorkspace({ patientUuid, setTitle }: WardPatientWorkspaceProps) {
+  const { t } = useTranslation();
+  const { patient, isLoading, error } = usePatient(patientUuid);
+
+  useEffect(() => {
+    if (isLoading) {
+      setTitle(t('wardPatientWorkspaceTitle', 'Ward Patient'), <InlineLoading />);
+    } else if (patient) {
+      setTitle(getPatientName(patient), <PatientWorkspaceTitle patient={patient} />);
+    } else if (error) {
+      setTitle(t('wardPatientWorkspaceTitle', 'Ward Patient'));
+    }
+  }, [patient]);
+
+  return (
+    <div className={styles.workspaceContainer}>
+      {isLoading ? (
+        <InlineLoading />
+      ) : patient ? (
+        <WardPatientWorkspaceView patient={patient} />
+      ) : error ? (
+        <InlineNotification>{error.message}</InlineNotification>
+      ) : (
+        <InlineNotification>
+          {t('failedToLoadPatientWorkspace', 'Ward patient workspace has failed to load.')}
+        </InlineNotification>
+      )}
+    </div>
+  );
+}
+
+interface WardPatientWorkspaceViewProps {
+  patient: fhir.Patient;
+}
+
+function WardPatientWorkspaceView({ patient }: WardPatientWorkspaceViewProps) {
+  const extensionSlotState = useMemo(() => ({ patient, patientUuid: patient.id }), [patient]);
+
+  return (
+    <>
+      <div>
+        <ExtensionSlot name="ward-patient-workspace-header-slot" state={extensionSlotState} />
+      </div>
+      <div>
+        <ExtensionSlot name="ward-patient-workspace-content-slot" state={extensionSlotState} />
+      </div>
+    </>
+  );
+}
+
+function PatientWorkspaceTitle({ patient }: { patient: fhir.Patient }) {
+  return (
+    <>
+      <div>{getPatientName(patient)} &nbsp;</div>
+      <div className={styles.headerPatientDetail}>&middot; &nbsp; {patient.gender}</div>
+      <div className={styles.headerPatientDetail}>&middot; &nbsp; {age(patient.birthDate)}</div>
+    </>
+  );
+}

package/src/ward-view/ward-bed.component.tsx

@@ -1,18 +1,15 @@
-import { type Patient } from '@openmrs/esm-framework';
+import { type Visit, type Patient } from '@openmrs/esm-framework';
 import React from 'react';
 import EmptyBed from '../beds/empty-bed.component';
-import { type Bed } from '../types';
+import { type WardPatient, type Bed } from '../types';
 import OccupiedBed from '../beds/occupied-bed.component';
-
-interface WardBedProps {
+export interface WardBedProps {
+  wardPatients: Array<WardPatient>;
   bed: Bed;
-  patients: Patient[];
 }
 
-const WardBed: React.FC<WardBedProps> = ({ bed, patients }) => {
-  return patients?.length > 0 ? 
-    <OccupiedBed bed={bed} patients={patients} />
-    : <EmptyBed bed={bed} />;
+const WardBed: React.FC<WardBedProps> = ({ bed, wardPatients }) => {
+  return wardPatients?.length > 0 ? <OccupiedBed bed={bed} wardPatients={wardPatients} /> : <EmptyBed bed={bed} />;
 };
 
 export default WardBed;