@kenyaemr/esm-ward-app 8.0.1-pre.99 → 8.0.3-pre.131

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-ward-app",
-  "version": "8.0.1-pre.99",
+  "version": "8.0.3-pre.131",
   "description": "Ward and bed management module for O3",
   "browser": "dist/kenyaemr-esm-ward-app.js",
   "main": "src/index.ts",
@@ -50,5 +50,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "8.0.0"
+  "stableVersion": "8.0.2"
 }

package/src/action-menu-buttons/clinical-forms-workspace-siderail.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Document } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { ActionMenuButton, launchWorkspace, useWorkspaces } from '@openmrs/esm-framework';
+import type { WardPatientWorkspaceProps } from '../types';
+
+const ClinicalFormsWorkspaceSideRailIcon: React.FC = () => {
+  const { t } = useTranslation();
+  const { workspaces } = useWorkspaces();
+
+  const formEntryWorkspaces = workspaces.filter((w) => w.name === 'ward-patient-form-entry-workspace');
+  const recentlyOpenedForm = formEntryWorkspaces[0];
+
+  const isClinicalFormOpen = formEntryWorkspaces?.length >= 1;
+
+  const launchPatientWorkspaceCb = () => {
+    if (isClinicalFormOpen) {
+      launchWorkspace('ward-patient-form-entry-workspace', {
+        workspaceTitle: recentlyOpenedForm?.additionalProps?.['workspaceTitle'],
+      });
+    } else {
+      launchWorkspace<WardPatientWorkspaceProps>('ward-patient-clinical-forms-workspace');
+    }
+  };
+
+  return (
+    <ActionMenuButton
+      getIcon={(props) => <Document {...props} />}
+      label={t('clinicalForms', 'Clinical forms')}
+      iconDescription={t('clinicalForms', 'Clinical forms')}
+      handler={launchPatientWorkspaceCb}
+      type="ward-patient-clinical-form"
+    />
+  );
+};
+
+export default ClinicalFormsWorkspaceSideRailIcon;

package/src/action-menu-buttons/discharge-workspace-siderail.component.tsx

@@ -0,0 +1,20 @@
+import { ActionMenuButton, launchWorkspace } from '@openmrs/esm-framework';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Exit } from '@carbon/react/icons';
+
+export default function PatientDischargeSideRailIcon() {
+  const { t } = useTranslation();
+  const handler = () => {
+    launchWorkspace('patient-discharge-workspace');
+  };
+  return (
+    <ActionMenuButton
+      getIcon={(props) => <Exit {...props} />}
+      label={t('discharge', 'Discharge')}
+      iconDescription={t('discharge', 'Discharge')}
+      handler={handler}
+      type="patient-discharge-workspace"
+    />
+  );
+}

package/src/beds/empty-bed-skeleton.tsx

@@ -1,12 +1,13 @@
 import { SkeletonIcon } from '@carbon/react';
 import React from 'react';
-import styles from './empty-bed.scss';
+import styles from './ward-bed.scss';
+import WardPatientSkeletonText from '../ward-patient-card/row-elements/ward-patient-skeleton-text';
 
 const EmptyBedSkeleton = () => {
   return (
-    <div className={styles.container + ' ' + styles.skeleton}>
+    <div className={styles.emptyBed + ' ' + styles.skeleton}>
       <SkeletonIcon />
-      <SkeletonIcon className={styles.skeletonText} />
+      <WardPatientSkeletonText />
     </div>
   );
 };

package/src/beds/empty-bed.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './empty-bed.scss';
+import styles from './ward-bed.scss';
 import wardPatientCardStyles from '../ward-patient-card/ward-patient-card.scss';
 import { type Bed } from '../types';
 import { useTranslation } from 'react-i18next';
@@ -12,11 +12,11 @@ const EmptyBed: React.FC<EmptyBedProps> = ({ bed }) => {
   const { t } = useTranslation();
 
   return (
-    <div className={styles.container}>
+    <div className={styles.emptyBed}>
       <span className={`${wardPatientCardStyles.wardPatientBedNumber} ${wardPatientCardStyles.empty}`}>
         {bed.bedNumber}
       </span>
-      <p className={styles.emptyBed}>{t('emptyBed', 'Empty bed')}</p>
+      <p className={styles.emptyBedText}>{t('emptyBed', 'Empty bed')}</p>
     </div>
   );
 };

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

@@ -0,0 +1,41 @@
+import React, { type ReactNode } from 'react';
+import { type Bed } from '../types';
+import EmptyBed from './empty-bed.component';
+import styles from './ward-bed.scss';
+import { useTranslation } from 'react-i18next';
+import { Tag } from '@carbon/react';
+
+export interface WardBedProps {
+  patientCards: Array<ReactNode>;
+  bed: Bed;
+}
+
+const WardBed: React.FC<WardBedProps> = ({ bed, patientCards }) => {
+  return patientCards?.length > 0 ? <OccupiedBed bed={bed} patientCards={patientCards} /> : <EmptyBed bed={bed} />;
+};
+
+const OccupiedBed: React.FC<WardBedProps> = ({ patientCards }) => {
+  // interlace patient card with bed dividers between each of them
+  const patientCardsWithDividers = patientCards.flatMap((patientCard, index) => {
+    if (index == 0) {
+      return [patientCard];
+    } else {
+      return [<BedShareDivider key={'divider-' + index} />, patientCard];
+    }
+  });
+
+  return <div className={styles.occupiedBed}>{patientCardsWithDividers}</div>;
+};
+
+const BedShareDivider = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.bedDivider}>
+      <div className={styles.bedDividerLine}></div>
+      <Tag>{t('bedShare', 'Bed share')}</Tag>
+      <div className={styles.bedDividerLine}></div>
+    </div>
+  );
+};
+
+export default WardBed;

package/src/beds/ward-bed.scss

@@ -0,0 +1,45 @@
+@use '@carbon/layout';
+@use '@openmrs/esm-styleguide/src/vars';
+@use '@carbon/type';
+
+.occupiedBed {
+  display: flex;
+  flex-direction: column;
+  background-color: vars.$ui-02;
+  height: fit-content;
+}
+
+.bedDivider {
+  background-color: vars.$ui-02;
+  color: vars.$text-02;
+  padding: layout.$spacing-01;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bedDividerLine {
+  height: 1px;
+  background-color: vars.$ui-05;
+  width: 30%;
+}
+.emptyBed {
+  display: flex;
+  gap: layout.$spacing-04;
+  justify-content: center;
+  align-items: center;
+  border: 1px dashed vars.$ui-04;
+  padding: layout.$spacing-03 layout.$spacing-04;
+  height: fit-content;
+}
+
+.emptyBed:hover:not(.skeleton) {
+  border: 1px solid transparent;
+  box-shadow: inset 0px 0px 0px 2px vars.$color-blue-60-2;
+  cursor: pointer;
+}
+
+.emptyBedText {
+  @include type.type-style('heading-compact-01');
+  color: vars.$text-02;
+}

package/src/beds/{occupied-bed.test.tsx → ward-bed.test.tsx}

@@ -1,24 +1,37 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { configSchema, type WardConfigObject } from '../config-schema';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
 import {
   mockAdmissionLocation,
   mockLocationInpatientWard,
   mockPatientAlice,
   mockPatientBrian,
 } from '../../../../__mocks__';
-import { bedLayoutToBed, filterBeds } from '../ward-view/ward-view.resource';
+import { configSchema, type WardConfigObject } from '../config-schema';
+import { useObs } from '../hooks/useObs';
 import useWardLocation from '../hooks/useWardLocation';
-import OccupiedBed from './occupied-bed.component';
+import { type WardPatient } from '../types';
+import DefaultWardPatientCard from '../ward-view/default-ward/default-ward-patient-card.component';
+import { bedLayoutToBed, filterBeds } from '../ward-view/ward-view.resource';
+import WardBed from './ward-bed.component';
 
 const defaultConfig: WardConfigObject = getDefaultsFromConfigSchema(configSchema);
 
 jest.mocked(useConfig).mockReturnValue(defaultConfig);
+jest.mock('../hooks/useObs', () => ({
+  useObs: jest.fn(),
+}));
+jest.mock('../ward-patient-card/row-elements/ward-patient-obs.resource', () => ({
+  useConceptToTagColorMap: jest.fn(),
+}));
 
 const mockBedLayouts = filterBeds(mockAdmissionLocation);
 
 jest.mock('../hooks/useWardLocation', () => jest.fn());
+//@ts-ignore
+jest.mocked(useObs).mockReturnValue({
+  data: [],
+});
 
 const mockedUseWardLocation = useWardLocation as jest.Mock;
 mockedUseWardLocation.mockReturnValue({
@@ -31,34 +44,43 @@ mockedUseWardLocation.mockReturnValue({
 const mockBedToUse = mockBedLayouts[0];
 const mockBed = bedLayoutToBed(mockBedToUse);
 
-const mockWardPatientProps = {
-  admitted: true,
+const mockWardPatientAliceProps: WardPatient = {
+  visit: null,
+  patient: mockPatientAlice,
+  bed: mockBed,
+  inpatientAdmission: null,
+  inpatientRequest: null,
+};
+
+const mockWardPatientBrianProps: WardPatient = {
   visit: null,
-  encounterAssigningToCurrentInpatientLocation: null,
-  firstAdmissionOrTransferEncounter: null,
+  patient: mockPatientBrian,
+  bed: mockBed,
+  inpatientAdmission: null,
+  inpatientRequest: null,
 };
 
-describe('Occupied bed', () => {
+describe('Ward bed', () => {
   it('renders a single bed with patient details', () => {
-    render(<OccupiedBed wardPatients={[{ ...mockWardPatientProps, patient: mockPatientAlice }]} bed={mockBed} />);
+    render(
+      <WardBed
+        patientCards={[<DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />]}
+        bed={mockBed}
+      />,
+    );
     const patientName = screen.getByText('Alice Johnson');
     expect(patientName).toBeInTheDocument();
     const patientAge = `${mockPatientAlice.person.age} yrs`;
     expect(screen.getByText(patientAge)).toBeInTheDocument();
-    const defaultAddressFields = ['cityVillage', 'country'];
-    defaultAddressFields.forEach((addressField) => {
-      const addressFieldValue = mockPatientAlice.person.preferredAddress[addressField] as string;
-      expect(screen.getByText(addressFieldValue)).toBeInTheDocument();
-    });
   });
 
   it('renders a divider for shared patients', () => {
     render(
-      <OccupiedBed
+      <WardBed
         bed={mockBed}
-        wardPatients={[
-          { ...mockWardPatientProps, patient: mockPatientAlice },
-          { ...mockWardPatientProps, patient: mockPatientBrian },
+        patientCards={[
+          <DefaultWardPatientCard key={mockPatientAlice.uuid} {...mockWardPatientAliceProps} />,
+          <DefaultWardPatientCard key={mockPatientBrian.uuid} {...mockWardPatientBrianProps} />,
         ]}
       />,
     );