@kenyaemr/esm-ward-app 7.0.3-pre.89 → 8.0.0

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

@@ -1,58 +1,59 @@
-import { SkeletonText, Tag } from '@carbon/react';
-import { type OpenmrsResource, translateFrom } from '@openmrs/esm-framework';
+import { SkeletonText } from '@carbon/react';
+import { type OpenmrsResource, type Patient, translateFrom, type Visit } from '@openmrs/esm-framework';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { type PatientObsElementConfig } from '../../config-schema';
+import { type ObsElementDefinition } 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();
+export interface WardPatientObsProps {
+  config: ObsElementDefinition;
+  patient: Patient;
+  visit: Visit;
+}
 
-    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 WardPatientObs: React.FC<WardPatientObsProps> = ({ config, patient, visit }) => {
+  const { conceptUuid, onlyWithinCurrentVisit, orderBy, limit, label, labelI18nModule: labelModule } = config;
+  const { data, isLoading } = useObs({ patient: patient.uuid, concept: conceptUuid }, obsCustomRepresentation);
+  const { t } = useTranslation();
 
-      const labelToDisplay =
-        label != null ? translateFrom(labelModule ?? moduleName, label) : obsToDisplay?.[0]?.concept?.display;
+  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 == 0 ? Number.MAX_VALUE : limit);
 
-      const obsNodes = obsToDisplay?.map((o) => {
-        const { value } = o;
-        const display: any = (value as OpenmrsResource)?.display ?? o.value;
-        return <span key={o.uuid}> {display} </span>;
-      });
+    const labelToDisplay =
+      label != null ? translateFrom(labelModule ?? moduleName, label) : obsToDisplay?.[0]?.concept?.display;
 
-      if (obsNodes?.length > 0) {
-        return (
-          <div>
-            <span className={styles.wardPatientObsLabel}>
-              {labelToDisplay ? t('labelColon', '{{label}}:', { label: labelToDisplay }) : ''}
-            </span>
-            {obsNodes}
-          </div>
-        );
-      } else {
-        return null;
-      }
-    }
-  };
+    const obsNodes = obsToDisplay?.map((o) => {
+      const { value } = o;
+      const display: any = (value as OpenmrsResource)?.display ?? o.value;
+      return <span key={o.uuid}> {display} </span>;
+    });
 
-  return WardPatientObs;
+    if (obsNodes?.length > 0) {
+      return (
+        <div>
+          <span className={styles.wardPatientObsLabel}>
+            {labelToDisplay ? t('labelColon', '{{label}}:', { label: labelToDisplay }) : ''}
+          </span>
+          {obsNodes}
+        </div>
+      );
+    } else {
+      return null;
+    }
+  }
 };
 
-export default wardPatientObs;
+export default WardPatientObs;

package/src/ward-patient-card/row-elements/ward-patient-time-on-ward.tsx

@@ -0,0 +1,22 @@
+import { age } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Encounter } from '../../types';
+
+export interface WardPatientTimeOnWardProps {
+  encounterAssigningToCurrentInpatientLocation: Encounter;
+}
+
+const WardPatientTimeOnWard: React.FC<WardPatientTimeOnWardProps> = ({
+  encounterAssigningToCurrentInpatientLocation,
+}) => {
+  const { t } = useTranslation();
+  if (encounterAssigningToCurrentInpatientLocation) {
+    const timeOnWard = age(encounterAssigningToCurrentInpatientLocation.encounterDatetime);
+    return <div>{t('timeOnWard', 'Time on this ward: {{timeOnWard}}', { timeOnWard })}</div>;
+  } else {
+    return <></>;
+  }
+};
+
+export default WardPatientTimeOnWard;

package/src/ward-patient-card/row-elements/ward-patient-time-since-admission.tsx

@@ -0,0 +1,22 @@
+import { age } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type Encounter } from '../../types';
+
+export interface WardPatientTimeSinceAdmissionProps {
+  firstAdmissionOrTransferEncounter: Encounter;
+}
+
+const WardPatientTimeSinceAdmission: React.FC<WardPatientTimeSinceAdmissionProps> = ({
+  firstAdmissionOrTransferEncounter,
+}) => {
+  const { t } = useTranslation();
+  if (firstAdmissionOrTransferEncounter) {
+    const timeSinceAdmission = age(firstAdmissionOrTransferEncounter.encounterDatetime);
+    return <div>{t('timeSinceAdmission', 'Admitted: {{timeSinceAdmission}} ago', { timeSinceAdmission })}</div>;
+  } else {
+    return <></>;
+  }
+};
+
+export default WardPatientTimeSinceAdmission;

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

@@ -0,0 +1,65 @@
+import { InlineNotification } from '@carbon/react';
+import { useConfig } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardConfigObject } from '../config-schema';
+import { type WardPatient } from '../types';
+import WardPatientAge from './row-elements/ward-patient-age';
+import WardPatientAddress from './row-elements/ward-patient-header-address';
+import WardPatientIdentifier from './row-elements/ward-patient-identifier';
+import WardPatientObs from './row-elements/ward-patient-obs';
+import WardPatientTimeOnWard from './row-elements/ward-patient-time-on-ward';
+import WardPatientTimeSinceAdmission from './row-elements/ward-patient-time-since-admission';
+
+export interface WardPatientCardElementProps extends WardPatient {
+  elementId: string;
+}
+
+export const WardPatientCardElement: React.FC<WardPatientCardElementProps> = ({
+  elementId,
+  patient,
+  visit,
+  inpatientAdmission,
+}) => {
+  const { obsElementDefinitions, identifierElementDefinitions, addressElementDefinitions } =
+    useConfig<WardConfigObject>().wardPatientCards;
+  const { t } = useTranslation();
+  const { encounterAssigningToCurrentInpatientLocation, firstAdmissionOrTransferEncounter } = inpatientAdmission ?? {};
+
+  switch (elementId) {
+    case 'patient-age':
+      return <WardPatientAge patient={patient} />;
+    case 'time-on-ward': {
+      return (
+        <WardPatientTimeOnWard
+          encounterAssigningToCurrentInpatientLocation={encounterAssigningToCurrentInpatientLocation}
+        />
+      );
+    }
+    case 'time-since-admission': {
+      return <WardPatientTimeSinceAdmission firstAdmissionOrTransferEncounter={firstAdmissionOrTransferEncounter} />;
+    }
+    default: {
+      const obsConfig = obsElementDefinitions.find((elementDef) => elementDef.id === elementId);
+      const idConfig = identifierElementDefinitions.find((elementDef) => elementDef.id === elementId);
+      const addressConfig = addressElementDefinitions.find((elementDef) => elementDef.id === elementId);
+      if (obsConfig) {
+        return <WardPatientObs patient={patient} visit={visit} config={obsConfig} />;
+      } else if (idConfig) {
+        return <WardPatientIdentifier patient={patient} config={idConfig} />;
+      } else if (addressConfig) {
+        return <WardPatientAddress patient={patient} config={addressConfig} />;
+      } else {
+        return (
+          <InlineNotification kind="error">
+            {t(
+              'invalidElementIdCopy',
+              'The configuration provided is invalid. It contains the following unknown element ID:',
+            )}{' '}
+            {elementId}
+          </InlineNotification>
+        );
+      }
+    }
+  }
+};

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

@@ -0,0 +1,64 @@
+import { ExtensionSlot, getPatientName, launchWorkspace } from '@openmrs/esm-framework';
+import classNames from 'classnames';
+import React from 'react';
+import { useCurrentWardCardConfig } from '../hooks/useCurrentWardCardConfig';
+import { type WardPatientCard, type WardPatientWorkspaceProps } from '../types';
+import WardPatientBedNumber from './row-elements/ward-patient-bed-number';
+import WardPatientName from './row-elements/ward-patient-name';
+import { WardPatientCardElement } from './ward-patient-card-element.component';
+import styles from './ward-patient-card.scss';
+
+const WardPatientCard: WardPatientCard = (wardPatient) => {
+  const { patient, bed } = wardPatient;
+  const { id, headerRowElements, footerRowElements } = useCurrentWardCardConfig();
+
+  const headerExtensionSlotName =
+    id == 'default' ? 'ward-patient-card-header-slot' : `ward-patient-card-header-${id}-slot`;
+  const rowsExtensionSlotName = id == 'default' ? 'ward-patient-card-slot' : `ward-patient-card-${id}-slot`;
+  const footerExtensionSlotName =
+    id == 'default' ? 'ward-patient-card-footer-slot' : `ward-patient-card-footer-${id}-slot`;
+
+  return (
+    <div className={styles.wardPatientCard}>
+      <div className={classNames(styles.wardPatientCardRow, styles.wardPatientCardHeader)}>
+        {bed ? <WardPatientBedNumber bed={bed} /> : null}
+        <WardPatientName patient={patient} />
+        {headerRowElements.map((elementId, i) => (
+          <WardPatientCardElement
+            key={`ward-card-${patient.uuid}-header-${i}`}
+            elementId={elementId}
+            {...wardPatient}
+          />
+        ))}
+        <ExtensionSlot name={headerExtensionSlotName} state={wardPatient} />
+      </div>
+      <ExtensionSlot
+        name={rowsExtensionSlotName}
+        state={wardPatient}
+        className={classNames(styles.wardPatientCardRow, styles.wardPatientCardExtensionSlot)}
+      />
+      <div className={styles.wardPatientCardRow}>
+        {footerRowElements.map((elementId, i) => (
+          <WardPatientCardElement
+            key={`ward-card-${patient.uuid}-footer-${i}`}
+            elementId={elementId}
+            {...wardPatient}
+          />
+        ))}
+        <ExtensionSlot name={footerExtensionSlotName} state={wardPatient} />
+      </div>
+      <button
+        className={styles.wardPatientCardButton}
+        onClick={() => {
+          launchWorkspace<WardPatientWorkspaceProps>('ward-patient-workspace', {
+            wardPatient,
+          });
+        }}>
+        {/* Name will not be displayed; just there for a11y */}
+        {getPatientName(patient.person)}
+      </button>
+    </div>
+  );
+};
+
+export default WardPatientCard;

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

@@ -1,7 +1,7 @@
-@use '@carbon/styles/scss/spacing';
-@use '@carbon/styles/scss/type';
 @use '@carbon/colors';
-@import '~@openmrs/esm-styleguide/src/vars';
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
 
 .wardPatientCard {
   @include type.type-style('body-compact-01');
@@ -10,23 +10,69 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: spacing.$spacing-02;
+  gap: layout.$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;
+  }
+}
+
+.activeWardPatientCardButton {
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    cursor: pointer;
+    border: 2px solid $interactive-01;
+    transition: border-color 200ms;
+  }
+}
+
 .wardPatientCardRow {
   width: 100%;
-  padding: spacing.$spacing-04;
+  padding: layout.$spacing-04;
 }
 
 .wardPatientCardRow:empty {
   display: none;
 }
 
+.wardPatientCardExtensionSlot {
+  display: none;
+
+  &:has(div:not(:empty)) {
+    display: block;
+  }
+}
+
 .wardPatientCardHeader {
   @extend .dotSeparatedChildren;
   display: flex;
@@ -36,6 +82,7 @@
 .wardPatientName {
   @include type.type-style('heading-compact-02');
   color: $text-02;
+
   &::before {
     content: '' !important;
   }
@@ -46,12 +93,13 @@
   border-radius: 50%;
   color: $ui-02;
   background-color: $color-blue-60-2;
-  padding: spacing.$spacing-04;
-  width: spacing.$spacing-04;
-  height: spacing.$spacing-04;
+  padding: layout.$spacing-04;
+  width: layout.$spacing-04;
+  height: layout.$spacing-04;
   display: flex;
   justify-content: center;
   align-items: center;
+
   &.empty {
     background-color: $color-blue-10;
     color: $color-blue-60-2;
@@ -69,20 +117,21 @@
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: spacing.$spacing-02;
+  gap: layout.$spacing-02;
 }
 
 .wardPatientObsLabel {
-  padding-right: spacing.$spacing-02;
+  padding-right: layout.$spacing-02;
 }
 
 .dotSeparatedChildren {
-  > div:not(div:first-of-type) {
+  > div:not(div:first-of-type):not(:empty) {
     display: flex;
     align-items: center;
+
     &::before {
       content: '·';
-      padding: 0 spacing.$spacing-02;
+      padding: 0 layout.$spacing-02;
     }
   }
 }

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/layout';
+@use '@carbon/type';
+
+.workspaceContainer {
+  min-height: var(--desktop-workspace-window-height);
+}
+
+.headerPatientDetail {
+  @include type.type-style('body-compact-02');
+  margin: 0 layout.$spacing-02;
+}

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

@@ -0,0 +1,51 @@
+import { age, attach, ExtensionSlot, type Patient } from '@openmrs/esm-framework';
+import React, { useEffect } from 'react';
+import { type WardPatientWorkspaceProps } from '../types';
+import styles from './ward-patient.style.scss';
+import { useTranslation } from 'react-i18next';
+import { getGender } from '../ward-patient-card/row-elements/ward-patient-gender.component';
+
+attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
+
+export default function WardPatientWorkspace({ setTitle, wardPatient: { patient } }: WardPatientWorkspaceProps) {
+  useEffect(() => {
+    setTitle(patient.person.display, <PatientWorkspaceTitle patient={patient} />);
+  }, []);
+
+  return (
+    <div className={styles.workspaceContainer}>
+      <WardPatientWorkspaceView patient={patient} />
+    </div>
+  );
+}
+
+interface WardPatientWorkspaceViewProps {
+  patient: Patient;
+}
+
+const WardPatientWorkspaceView: React.FC<WardPatientWorkspaceViewProps> = ({ patient }) => {
+  const extensionSlotState = { patient, patientUuid: patient.uuid };
+
+  return (
+    <>
+      <div>
+        <ExtensionSlot name="ward-patient-workspace-header-slot" state={extensionSlotState} />
+      </div>
+      <div>
+        <ExtensionSlot name="ward-patient-workspace-content-slot" state={extensionSlotState} />
+      </div>
+    </>
+  );
+};
+
+const PatientWorkspaceTitle: React.FC<WardPatientWorkspaceViewProps> = ({ patient }) => {
+  const { t } = useTranslation();
+
+  return (
+    <>
+      <div>{patient.person.display} &nbsp;</div>
+      <div className={styles.headerPatientDetail}>&middot; &nbsp; {getGender(t, patient.person?.gender)}</div>
+      <div className={styles.headerPatientDetail}>&middot; &nbsp; {age(patient.person?.birthdate)}</div>
+    </>
+  );
+};

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

@@ -1,4 +1,3 @@
-import { type Visit, type Patient } from '@openmrs/esm-framework';
 import React from 'react';
 import EmptyBed from '../beds/empty-bed.component';
 import { type WardPatient, type Bed } from '../types';