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

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

@@ -1,68 +1,100 @@
+import React, { useMemo } from 'react';
 import { InlineNotification } from '@carbon/react';
-import { useFeatureFlag, useLocations, useSession, type Location } from '@openmrs/esm-framework';
-import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { useParams } from 'react-router-dom';
+import { WorkspaceContainer, useFeatureFlag } from '@openmrs/esm-framework';
 import EmptyBedSkeleton from '../beds/empty-bed-skeleton';
 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';
+import useWardLocation from '../hooks/useWardLocation';
 
 const WardView = () => {
-  const { locationUuid: locationUuidFromUrl } = useParams();
-  const { sessionLocation } = useSession();
-  const allLocations = useLocations();
+  const response = useWardLocation();
+  const { isLoadingLocation, errorFetchingLocation, invalidLocation } = response;
+
   const { t } = useTranslation();
   const isBedManagementModuleInstalled = useFeatureFlag('bedmanagement-module');
-  const locationFromUrl = allLocations.find((l) => l.uuid === locationUuidFromUrl);
-  const invalidLocation = Boolean(locationUuidFromUrl && !locationFromUrl);
-  const location = (locationFromUrl ?? sessionLocation) as any as Location;
+
   //TODO:Display patients with admitted status (based on their observations) that have no beds assigned
-  if (!isBedManagementModuleInstalled) {
+  if (!isBedManagementModuleInstalled || isLoadingLocation) {
     return <></>;
   }
 
+  if (invalidLocation) {
+    return <InlineNotification kind="error" title={t('invalidLocationSpecified', 'Invalid location specified')} />;
+  }
+
   return (
     <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 />
       <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 />
       </div>
+      <WorkspaceContainer overlay contextKey="ward" />
     </div>
   );
 };
 
-const WardViewByLocation = ({ location }: { location: Location }) => {
-  const { admissionLocation, isLoading, error } = useAdmissionLocation(location.uuid);
+const WardViewByLocation = () => {
+  const { location } = useWardLocation();
+  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
+          // TODO: change after this is done. https://openmrs.atlassian.net/browse/EA-192
+          return { ...admittedPatient, patient, 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 +104,7 @@ const WardViewByLocation = ({ location }: { location: Location }) => {
         )}
       </>
     );
-  } else if (isLoading) {
+  } else if (isLoadingLocation || isLoadingPatients) {
     return (
       <>
         {Array(20)
@@ -82,18 +114,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

@@ -1,21 +1,21 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
 import {
   type Person,
   type ConfigSchema,
   getDefaultsFromConfigSchema,
   useConfig,
-  useSession,
   useFeatureFlag,
 } from '@openmrs/esm-framework';
-import { screen } from '@testing-library/react';
-import React from 'react';
 import { useParams } from 'react-router-dom';
-import { mockLocations } from '../../../../__mocks__/locations.mock';
 import { mockAdmissionLocation } from '../../../../__mocks__/wards.mock';
 import { renderWithSwr } from '../../../../tools/test-utils';
 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';
+import useWardLocation from '../hooks/useWardLocation';
+import WardView from './ward-view.component';
 
 jest.replaceProperty(mockPatientAlice.person as Person, 'preferredName', {
   uuid: '',
@@ -27,21 +27,18 @@ jest.mocked(useConfig).mockReturnValue({
   ...getDefaultsFromConfigSchema<ConfigSchema>(configSchema),
 });
 
-const mockedSessionLocation = { uuid: 'abcd', display: 'mock location', links: [] };
-jest.mocked(useSession).mockReturnValue({
-  sessionLocation: mockedSessionLocation,
-  authenticated: true,
-  sessionId: 'sessionId',
-});
-
 const mockedUseFeatureFlag = useFeatureFlag as jest.Mock;
 
-jest.mock('@openmrs/esm-framework', () => {
-  return {
-    ...jest.requireActual('@openmrs/esm-framework'),
-    useLocations: jest.fn().mockImplementation(() => mockLocations.data.results),
-  };
-});
+jest.mock('../hooks/useWardLocation', () =>
+  jest.fn().mockReturnValue({
+    location: { uuid: 'abcd', display: 'mock location' },
+    isLoadingLocation: false,
+    errorFetchingLocation: null,
+    invalidLocation: false,
+  }),
+);
+
+const mockedUseWardLocation = useWardLocation as jest.Mock;
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -52,6 +49,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,19 +60,25 @@ 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', () => {
     renderWithSwr(<WardView />);
-    const header = screen.getByRole('heading', { name: mockedSessionLocation.display });
+    const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
   it('renders the location provided in URL', () => {
-    const locationToUse = mockLocations.data.results[0];
-    mockedUseParams.mockReturnValueOnce({ locationUuid: locationToUse.uuid });
+    mockedUseParams.mockReturnValueOnce({ locationUuid: 'abcd' });
     renderWithSwr(<WardView />);
-    const header = screen.getByRole('heading', { name: locationToUse.display });
+    const header = screen.getByRole('heading', { name: 'mock location' });
     expect(header).toBeInTheDocument();
   });
 
@@ -82,17 +89,23 @@ describe('WardView:', () => {
   });
 
   it('renders notification for invalid location uuid', () => {
-    mockedUseParams.mockReturnValueOnce({ locationUuid: 'invalid-uuid' });
+    mockedUseWardLocation.mockReturnValueOnce({
+      location: null,
+      isLoadingLocation: false,
+      errorFetchingLocation: null,
+      invalidLocation: true,
+    });
+
     renderWithSwr(<WardView />);
     const notification = screen.getByRole('status');
     expect(notification).toBeInTheDocument();
-    const invalidText = screen.getByText('Unknown location uuid: invalid-uuid');
+    const invalidText = screen.getByText('Invalid location specified');
     expect(invalidText).toBeInTheDocument();
   });
 
   it('screen should be empty if backend module is not installed', () => {
     mockedUseFeatureFlag.mockReturnValueOnce(false);
     const { container } = renderWithSwr(<WardView />);
-    expect(container.firstChild).not.toBeInTheDocument();
+    expect(container).toBeEmptyDOMElement();
   });
 });

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { Movement } from '@carbon/react/icons';
+import { Button, InlineNotification } from '@carbon/react';
+import { ArrowRightIcon, isDesktop, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
+import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { useTranslation } from 'react-i18next';
+import useWardLocation from '../hooks/useWardLocation';
+import styles from './admission-requests.scss';
+
+const AdmissionRequestsBar = () => {
+  const { location } = useWardLocation();
+  const { inpatientRequests, isLoading, error } = useInpatientRequest(location?.uuid);
+  const admissionRequests = inpatientRequests?.filter((request) => request.type == 'ADMISSION');
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+
+  if (isLoading || !admissionRequests?.length) {
+    return null;
+  }
+
+  if (error) {
+    console.error(error);
+    return (
+      <InlineNotification
+        kind="error"
+        title={t('errorLoadingPatientAdmissionRequests', 'Error Loading patient admission requests')}
+      />
+    );
+  }
+
+  return (
+    <div className={styles.admissionRequestsContainer}>
+      <Movement className={styles.movementIcon} size="24" />
+      <span className={styles.content}>
+        {t('admissionRequestsCount', '{{count}} admission requests', {
+          count: admissionRequests.length,
+        })}
+      </span>
+      <Button
+        onClick={() => launchWorkspace('admission-requests-workspace', { admissionRequests })}
+        renderIcon={ArrowRightIcon}
+        kind="ghost"
+        size={isDesktop(layout) ? 'sm' : 'lg'}>
+        {t('manage', 'Manage')}
+      </Button>
+    </div>
+  );
+};
+
+export default AdmissionRequestsBar;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+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 AdmissionRequestsBar from './admission-requests-bar.component';
+import { mockInpatientRequest } from '../../../../__mocks__/ward-patient';
+import { useInpatientRequest } from '../hooks/useInpatientRequest';
+
+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 />);
+
+    await user.click(screen.getByRole('button', { name: /manage/i }));
+    expect(launchWorkspace).toHaveBeenCalled();
+  });
+
+  it('there should be one admission request', () => {
+    renderWithSwr(<AdmissionRequestsBar />);
+
+    expect(screen.getByText('1 admission requests')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,33 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.admissionRequestsContainer {
+  background-color: $color-gray-70;
+  display: flex;
+  align-items: center;
+  padding: spacing.$spacing-02 0 spacing.$spacing-02 spacing.$spacing-04;
+  background-color: #393939;
+
+  & > button {
+    color: #78a9ff;
+
+    svg {
+      fill: #78a9ff !important;
+    }
+  }
+}
+
+.movementIcon {
+  padding: spacing.$spacing-02;
+  border-radius: 50%;
+  fill: $ui-03;
+  background-color: $color-blue-60-2;
+  margin-right: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $ui-02;
+  margin-right: spacing.$spacing-03;
+}

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 useWardLocation from '../hooks/useWardLocation';
+
+interface WardViewHeaderProps {}
+
+const WardViewHeader: React.FC<WardViewHeaderProps> = () => {
+  const { location } = useWardLocation();
+  return (
+    <div className={styles.wardViewHeader}>
+      <h4>{location?.display}</h4>
+      <AdmissionRequestsBar />
+    </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,32 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import AdmissionRequestsWorkspace from './admission-requests-workspace.component';
+import { type ConfigSchema, type Person, getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { renderWithSwr } from 'tools';
+import { mockInpatientRequest } from '__mocks__';
+import { configSchema } from '../config-schema';
+
+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', () => {
+    renderWithSwr(<AdmissionRequestsWorkspace admissionRequests={[mockInpatientRequest]} />);
+    const { givenName, familyName } = mockInpatientRequest.patient.person!.preferredName!;
+    expect(screen.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,9 +1,14 @@
 {
+  "admissionRequestsCount_one": "{{count}} admission request",
+  "admissionRequestsCount_other": "{{count}} admission requests",
   "bedShare": "Bed share",
   "emptyBed": "Empty bed",
+  "errorLoadingPatientAdmissionRequests": "Error Loading patient admission requests",
+  "errorLoadingPatients": "Error loading admitted patients",
   "errorLoadingWardLocation": "Error loading ward location",
   "invalidLocationSpecified": "Invalid location specified",
   "invalidWardLocation": "Invalid ward location: {{location}}",
+  "manage": "Manage",
   "noBedsConfigured": "No beds configured for this location",
-  "unknownLocationUuid": "Unknown location uuid: {{locationUuidFromUrl}}"
+  "wards": "Wards"
 }