@kenyaemr/esm-ward-app 7.0.2-pre.66 → 7.0.2-pre.68

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,21 @@
   align-items: center;
   gap: spacing.$spacing-02;
   background-color: $ui-02;
+
+  > .wardPatientCardRow:not(:first-child) {
+    border-top: 1px colors.$gray-20 solid;
+  }
+}
+
+.wardPatientCardRow {
+  width: 100%;
   padding: spacing.$spacing-04;
 }
 
+.wardPatientCardRow:empty {
+  display: none;
+}
+
 .wardPatientCardHeader {
   @extend .dotSeparatedChildren;
   display: flex;
@@ -59,6 +72,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

@@ -10,8 +10,8 @@ const WardPatientCard: React.FC<WardPatientCardProps> = (props) => {
 
   return (
     <div className={styles.wardPatientCard}>
-      {patientCardRows.map((WardPatientCardRow) => (
-        <WardPatientCardRow {...props} />
+      {patientCardRows.map((WardPatientCardRow, i) => (
+        <WardPatientCardRow key={i} {...props} />
       ))}
     </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;

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

@@ -1,6 +1,6 @@
 import { InlineNotification } from '@carbon/react';
-import { useFeatureFlag, useLocations, useSession, type Location } from '@openmrs/esm-framework';
-import React from 'react';
+import { WorkspaceContainer, useFeatureFlag, useLocations, useSession, type Location } from '@openmrs/esm-framework';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
@@ -8,6 +8,9 @@ import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
 import WardBed from './ward-bed.component';
 import { bedLayoutToBed, filterBeds } from './ward-view.resource';
 import styles from './ward-view.scss';
+import WardViewHeader from '../ward-view-header/ward-view-header.component';
+import { type AdmittedPatient, type WardPatient } from '../types';
+import { useAdmittedPatients } from '../hooks/useAdmittedPatients';
 
 const WardView = () => {
   const { locationUuid: locationUuidFromUrl } = useParams();
@@ -23,46 +26,80 @@ const WardView = () => {
     return <></>;
   }
 
-  return (
+  return invalidLocation ? (
+    <InlineNotification
+      kind="error"
+      lowContrast={true}
+      title={t('invalidLocationSpecified', 'Invalid location specified')}
+      subtitle={t('unknownLocationUuid', 'Unknown location uuid: {{locationUuidFromUrl}}', {
+        locationUuidFromUrl,
+      })}
+    />
+  ) : (
     <div className={styles.wardView}>
-      <div className={styles.wardViewHeader}>
-        <div className={styles.wardViewHeaderLocationDisplay}>
-          <h4>{location?.display}</h4>
-        </div>
-        <div className={styles.wardViewHeaderAdmissionRequestMenuBar}>{/* TODO: Admission Request bar */}</div>
-      </div>
+      <WardViewHeader location={location} />
       <div className={styles.wardViewMain}>
-        {invalidLocation ? (
-          <InlineNotification
-            kind="error"
-            lowContrast={true}
-            title={t('invalidLocationSpecified', 'Invalid location specified')}
-            subtitle={t('unknownLocationUuid', 'Unknown location uuid: {{locationUuidFromUrl}}', {
-              locationUuidFromUrl,
-            })}
-          />
-        ) : (
-          <WardViewByLocation location={location} />
-        )}
+        <WardViewByLocation location={location} />
       </div>
+      <WorkspaceContainer contextKey="ward" />
     </div>
   );
 };
 
 const WardViewByLocation = ({ location }: { location: Location }) => {
-  const { admissionLocation, isLoading, error } = useAdmissionLocation(location.uuid);
+  const {
+    admissionLocation,
+    isLoading: isLoadingLocation,
+    error: errorLoadingLocation,
+  } = useAdmissionLocation(location.uuid);
+  const {
+    admittedPatients,
+    isLoading: isLoadingPatients,
+    error: errorLoadingPatients,
+  } = useAdmittedPatients(location.uuid);
   const { t } = useTranslation();
+  const admittedPatientsByUuid = useMemo(() => {
+    const map = new Map<string, AdmittedPatient>();
+    for (const admittedPatient of admittedPatients ?? []) {
+      map.set(admittedPatient.patient.uuid, admittedPatient);
+    }
+    return map;
+  }, [admittedPatients]);
 
-  if (admissionLocation) {
+  if (admissionLocation != null && admittedPatients != null) {
     const bedLayouts = filterBeds(admissionLocation);
 
+    const wardBeds = bedLayouts.map((bedLayout, i) => {
+      const { patients } = bedLayout;
+      const bed = bedLayoutToBed(bedLayout);
+      const wardPatients: WardPatient[] = patients.map((patient) => {
+        const admittedPatient = admittedPatientsByUuid.get(patient.uuid);
+
+        if (admittedPatient) {
+          // ideally, we can just use the patient object within admittedPatient
+          // and not need the one from bedLayouts, however, the emr api
+          // does not respect custom representation right now and does not return
+          // all required fields for the patient object
+          return { ...admittedPatient, admitted: true };
+        }
+
+        // patient assigned a bed but *not* admitted
+        // TODO: get the patient's visit and current location
+        return {
+          patient,
+          visit: null,
+          admitted: true,
+          currentLocation: null,
+          timeSinceAdmissionInMinutes: null,
+          timeAtInpatientLocationInMinutes: null,
+        };
+      });
+      return <WardBed key={bed.uuid} bed={bed} wardPatients={wardPatients} />;
+    });
+
     return (
       <>
-        {bedLayouts.map((bedLayout, i) => {
-          const { patient } = bedLayout;
-          const bed = bedLayoutToBed(bedLayout);
-          return <WardBed key={bed.uuid} bed={bed} patients={patient ? [patient] : null} />;
-        })}
+        {wardBeds}
         {bedLayouts.length == 0 && (
           <InlineNotification
             kind="warning"
@@ -72,7 +109,7 @@ const WardViewByLocation = ({ location }: { location: Location }) => {
         )}
       </>
     );
-  } else if (isLoading) {
+  } else if (isLoadingLocation || isLoadingPatients) {
     return (
       <>
         {Array(20)
@@ -82,18 +119,27 @@ const WardViewByLocation = ({ location }: { location: Location }) => {
           ))}
       </>
     );
-  } else {
+  } else if (errorLoadingLocation) {
     return (
       <InlineNotification
         kind="error"
         lowContrast={true}
         title={t('errorLoadingWardLocation', 'Error loading ward location')}
         subtitle={
-          error?.message ??
+          errorLoadingLocation?.message ??
           t('invalidWardLocation', 'Invalid ward location: {{location}}', { location: location.display })
         }
       />
     );
+  } else {
+    return (
+      <InlineNotification
+        kind="error"
+        lowContrast={true}
+        title={t('errorLoadingPatients', 'Error loading admitted patients')}
+        subtitle={errorLoadingPatients?.message}
+      />
+    );
   }
 };
 

package/src/ward-view/ward-view.scss

@@ -12,21 +12,6 @@
   padding: 0 spacing.$spacing-05;
 }
 
-.wardViewHeader {
-  display: flex;
-  margin: spacing.$spacing-05 0;
-}
-
-.wardViewHeaderLocationDisplay {
-  flex: 1;
-}
-
-.wardViewHeaderAdmissionRequestMenuBar {
-  background-color: black;
-  color: white;
-  padding: 4px 0 4px 12px;
-}
-
 .wardViewMain {
   background-color: #e4e4e4;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

package/src/ward-view/ward-view.test.tsx

@@ -16,6 +16,7 @@ import { configSchema } from '../config-schema';
 import { useAdmissionLocation } from '../hooks/useAdmissionLocation';
 import WardView from './ward-view.component';
 import { mockPatientAlice } from '../../../../__mocks__/patient.mock';
+import { useAdmittedPatients } from '../hooks/useAdmittedPatients';
 
 jest.replaceProperty(mockPatientAlice.person as Person, 'preferredName', {
   uuid: '',
@@ -52,6 +53,10 @@ const mockedUseParams = useParams as jest.Mock;
 jest.mock('../hooks/useAdmissionLocation', () => ({
   useAdmissionLocation: jest.fn(),
 }));
+jest.mock('../hooks/useAdmittedPatients', () => ({
+  useAdmittedPatients: jest.fn(),
+}));
+
 jest.mocked(useAdmissionLocation).mockReturnValue({
   error: undefined,
   mutate: jest.fn(),
@@ -59,6 +64,13 @@ jest.mocked(useAdmissionLocation).mockReturnValue({
   isLoading: false,
   admissionLocation: mockAdmissionLocation,
 });
+jest.mocked(useAdmittedPatients).mockReturnValue({
+  error: undefined,
+  mutate: jest.fn(),
+  isValidating: false,
+  isLoading: false,
+  admittedPatients: [],
+});
 
 describe('WardView:', () => {
   it('renders the session location when no location provided in URL', () => {

package/src/ward-view-header/admission-requests-bar.component.tsx

@@ -0,0 +1,46 @@
+import { SkeletonIcon } from '@carbon/react';
+import { Movement } from '@carbon/react/icons';
+import { launchWorkspace, showNotification, type Location } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import styles from './admission-requests.scss';
+
+interface AdmissionRequestsBarProps {
+  location: Location;
+}
+
+const AdmissionRequestsBar: React.FC<AdmissionRequestsBarProps> = ({ location }) => {
+  const { inpatientRequests, isLoading, error } = useInpatientRequest(location.uuid);
+  const admissionRequests = inpatientRequests?.filter((request) => request.type == 'ADMISSION');
+  const { t } = useTranslation();
+
+  if (isLoading) {
+    return <SkeletonIcon className={styles.skeleton} />;
+  }
+
+  if (error) {
+    showNotification({
+      kind: 'error',
+      title: t('errorLoadingPatientAdmissionRequests', 'Error Loading Patient Admission Requests'),
+      description: error.message,
+    });
+    return <></>;
+  }
+
+  return admissionRequests.length > 0 ? (
+    <div className={styles.admissionRequestsContainer}>
+      <Movement className={styles.movementIcon} size="24" />
+      <span className={styles.content}>{admissionRequests.length} admission requests</span>
+      <button
+        className={styles.manageButton}
+        onClick={() => launchWorkspace('admission-requests-cards', { admissionRequests })}>
+        Manage
+      </button>
+    </div>
+  ) : (
+    <></>
+  );
+};
+
+export default AdmissionRequestsBar;

package/src/ward-view-header/admission-requests-bar.test.tsx

@@ -0,0 +1,42 @@
+import userEvent from '@testing-library/user-event';
+import { renderWithSwr } from '../../../../tools/test-utils';
+import { screen } from '@testing-library/react';
+import { launchWorkspace } from '@openmrs/esm-framework';
+import React from 'react';
+import AdmissionRequestsBar from './admission-requests-bar.component';
+import { mockInpatientRequest } from '../../../../__mocks__/ward-patient';
+import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { mockLocationInpatientWard } from '../../../../__mocks__/locations.mock';
+
+jest.mock('@openmrs/esm-framework', () => {
+  return {
+    ...jest.requireActual('@openmrs/esm-framework'),
+    launchWorkspace: jest.fn(),
+  };
+});
+
+jest.mock('../hooks/useInpatientRequest', () => ({
+  useInpatientRequest: jest.fn(),
+}));
+const mockInpatientRequestResponse = {
+  error: undefined,
+  mutate: jest.fn(),
+  isValidating: false,
+  isLoading: false,
+  inpatientRequests: [mockInpatientRequest],
+};
+jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
+
+describe('Admission Requests Button', () => {
+  it('call launch workspace when clicked on manage button', async () => {
+    const user = userEvent.setup();
+    renderWithSwr(<AdmissionRequestsBar location={mockLocationInpatientWard} />);
+    await user.click(screen.getByRole('button', { name: /manage/i }));
+    expect(launchWorkspace).toHaveBeenCalled();
+  });
+
+  it('there should be one admission request', () => {
+    const { getByText } = renderWithSwr(<AdmissionRequestsBar location={mockLocationInpatientWard} />);
+    expect(getByText('1 admission requests')).toBeInTheDocument();
+  });
+});

package/src/ward-view-header/admission-requests.scss

@@ -0,0 +1,42 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.admissionRequestsContainer {
+  width: fit-content;
+  border-left: 2px solid $color-blue-60-2;
+  background-color: $color-gray-70;
+  display: flex;
+  align-items: center;
+  padding: spacing.$spacing-02;
+}
+
+.movementIcon {
+  padding: spacing.$spacing-02;
+  border-radius: 50%;
+  fill: $ui-03;
+  background-color: $color-blue-60-2;
+}
+
+.manageButton {
+  background-color: transparent;
+  border: none;
+  color: $inverse-link;
+  cursor: pointer;
+  margin-left: spacing.$spacing-04;
+  &::after {
+    content: '→';
+    padding: spacing.$spacing-02;
+  }
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $ui-02;
+  margin-left: spacing.$spacing-02;
+}
+
+.skeleton {
+  height: 20px;
+  width: 120px;
+}

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './ward-view-header.scss';
+import AdmissionRequestsBar from './admission-requests-bar.component';
+import { type Location } from '@openmrs/esm-framework';
+
+interface WardViewHeaderProps {
+  location: Location;
+}
+const WardViewHeader: React.FC<WardViewHeaderProps> = ({ location }) => {
+  return (
+    <div className={styles.wardViewHeader}>
+      <h4>{location.display}</h4>
+      <AdmissionRequestsBar location={location} />
+    </div>
+  );
+};
+
+export default WardViewHeader;

package/src/ward-view-header/ward-view-header.scss

@@ -0,0 +1,8 @@
+@use '@carbon/styles/scss/spacing';
+
+.wardViewHeader {
+  margin: spacing.$spacing-05 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}

package/src/ward-workspace/admission-request-card.component.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import styles from './admission-request-card.scss';
+import { useParams } from 'react-router-dom';
+import { type Patient } from '@openmrs/esm-framework';
+import { usePatientCardRows } from '../ward-patient-card/ward-patient-card-row.resources';
+
+interface AdmissionRequestCardProps {
+  patient: Patient;
+}
+
+const AdmissionRequestCard: React.FC<AdmissionRequestCardProps> = ({ patient }) => {
+  const { locationUuid } = useParams();
+  const admissionPatientCardSlots = usePatientCardRows(locationUuid);
+  return (
+    <div className={styles.admissionRequestCardHeader}>
+      {admissionPatientCardSlots.map((AdmissionPatientCard, i) => (
+        <AdmissionPatientCard key={i} patient={patient} bed={null} visit={null} />
+      ))}
+    </div>
+  );
+};
+
+export default AdmissionRequestCard;

package/src/ward-workspace/admission-request-card.scss

@@ -0,0 +1,34 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.admissionRequestCardHeader {
+  background-color: $ui-03;
+  padding: spacing.$spacing-03;
+  border: 1px solid $color-gray-30;
+  height: fit-content;
+  color: $color-gray-70;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  > div:not(:first-of-type)::before {
+    content: '·';
+    padding: spacing.$spacing-02;
+  }
+}
+
+.patientName,
+.patientGender,
+.patientAge {
+  @include type.type-style('heading-01');
+}
+
+.patientName {
+  color: $color-gray-100;
+}
+
+.time,
+.city,
+.ward {
+  @include type.type-style('body-compact-01');
+}

package/src/ward-workspace/admission-request-workspace.test.tsx

@@ -0,0 +1,38 @@
+import { renderWithSwr } from '../../../../tools/test-utils';
+import React from 'react';
+import AdmissionRequestsWorkspace from './admission-requests-workspace.component';
+import {
+  type ConfigSchema,
+  type Person,
+  closeWorkspace,
+  getDefaultsFromConfigSchema,
+  useConfig,
+} from '@openmrs/esm-framework';
+import { configSchema } from '../config-schema';
+import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { mockInpatientRequest } from '../../../../__mocks__/ward-patient';
+
+jest.replaceProperty(mockInpatientRequest.patient.person as Person, 'preferredName', {
+  uuid: '',
+  givenName: 'Alice',
+  familyName: 'Johnson',
+});
+
+jest.mocked(useConfig).mockReturnValue({
+  ...getDefaultsFromConfigSchema<ConfigSchema>(configSchema),
+});
+
+jest.mock('@openmrs/esm-framework', () => {
+  return {
+    ...jest.requireActual('@openmrs/esm-framework'),
+    closeWorkspace: jest.fn(),
+  };
+});
+
+describe('Admission Requests Workspace', () => {
+  it('should render a admission request card', () => {
+    const { getByText } = renderWithSwr(<AdmissionRequestsWorkspace admissionRequests={[mockInpatientRequest]} />);
+    const { givenName, familyName } = mockInpatientRequest.patient.person!.preferredName!;
+    expect(getByText(givenName + ' ' + familyName)).toBeInTheDocument();
+  });
+});

package/src/ward-workspace/admission-requests-workspace.component.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import styles from './admission-requests-workspace.scss';
+import AdmissionRequestCard from './admission-request-card.component';
+import { type InpatientRequest } from '../types';
+
+interface AdmissionRequestsWorkspaceProps {
+  admissionRequests: InpatientRequest[];
+}
+const AdmissionRequestsWorkspace: React.FC<AdmissionRequestsWorkspaceProps> = ({ admissionRequests }) => {
+  return (
+    <div className={styles.admissionRequestsWorkspaceContainer}>
+      <div className={styles.admissionRequestsWorkspace}>
+        {admissionRequests.map((admissionRequest) => (
+          <AdmissionRequestCard patient={admissionRequest.patient} />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default AdmissionRequestsWorkspace;

package/src/ward-workspace/admission-requests-workspace.scss

@@ -0,0 +1,13 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.admissionRequestsWorkspaceContainer {
+  min-height: var(--desktop-workspace-window-height);
+}
+.admissionRequestsWorkspace {
+  padding: spacing.$spacing-04;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+}

package/translations/en.json

@@ -1,6 +1,7 @@
 {
   "bedShare": "Bed share",
   "emptyBed": "Empty bed",
+  "errorLoadingPatientAdmissionRequests": "Error Loading Patient Admission Requests",
   "errorLoadingWardLocation": "Error loading ward location",
   "invalidLocationSpecified": "Invalid location specified",
   "invalidWardLocation": "Invalid ward location: {{location}}",