O3-3210 ward app - configuration system for ward patient cards

packages/esm-ward-app/src/empty-beds/empty-bed-skeleton.tsx → packages/esm-ward-app/src/beds/empty-bed-skeleton.tsx

@@ -1,6 +1,6 @@
+import { SkeletonIcon } from '@carbon/react';
 import React from 'react';
 import styles from './empty-bed.scss';
-import { SkeletonIcon, SkeletonText } from '@carbon/react';
 
 const EmptyBedSkeleton = () => {
   return (

packages/esm-ward-app/src/empty-beds/empty-bed.component.tsx → packages/esm-ward-app/src/beds/empty-bed.component.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import styles from './empty-bed.scss';
-import admittedPatientHeaderStyles from '../admitted-patient/admitted-patient-header.scss';
+import wardPatientCardStyles from '../ward-patient-card/ward-patient-card.scss';
 import { type Bed } from '../types';
 
 interface EmptyBedProps {
@@ -10,7 +10,9 @@ interface EmptyBedProps {
 const EmptyBed: React.FC<EmptyBedProps> = ({ bed }) => {
   return (
     <div className={styles.container}>
-      <span className={admittedPatientHeaderStyles.bedNumber}>{bed.bedNumber}</span>
+      <span className={`${wardPatientCardStyles.wardPatientBedNumber} ${wardPatientCardStyles.empty}`}>
+        {bed.bedNumber}
+      </span>
       <p className={styles.emptyBed}>Empty Bed</p>
     </div>
   );

packages/esm-ward-app/src/beds/occupied-bed.component.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type Patient } from '@openmrs/esm-framework';
+import { type Bed } from '../types';
+import styles from './occupied-bed.scss';
+import { Tag } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import WardPatientCard from '../ward-patient-card/ward-pateint-card.component';
+
+export interface OccupiedBedProps {
+  patients: Patient[];
+  bed: Bed;
+}
+const OccupiedBed: React.FC<OccupiedBedProps> = ({ patients, bed }) => {
+  return (
+    <div className={styles.occupiedBed}>
+      {patients.map((patient, index: number) => {
+        const last = index === patients.length - 1;
+        return (
+          <div key={patient.uuid + ' ' + index}>
+            <WardPatientCard patient={patient} bed={bed} status={'admitted'} />
+            {!last && <BedShareDivider />}
+          </div>
+        );
+      })}
+    </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 OccupiedBed;

packages/esm-ward-app/src/beds/occupied-bed.scss

@@ -0,0 +1,24 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.occupiedBed {
+  display: flex;
+  flex-direction: column;
+  background-color: $ui-02;
+}
+
+.bedDivider {
+  background-color: $ui-02;
+  color: $text-02;
+  padding: spacing.$spacing-01;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bedDividerLine {
+  height: 1px;
+  background-color: $ui-03;
+  width: 30%;
+}

packages/esm-ward-app/src/beds/occupied-bed.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from '@testing-library/react';
+import OccupiedBed from './occupied-bed.component';
+import React from 'react';
+import { mockAdmissionLocation } from '../../../../__mocks__/wards.mock';
+import { bedLayoutToBed, filterBeds } from '../ward-view/ward-view.resource';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { configSchema, defaultBentoElementConfig } from '../config-schema';
+
+const defaultConfigSchema = getDefaultsFromConfigSchema(configSchema);
+
+jest.mocked(useConfig).mockReturnValue({
+  ...defaultConfigSchema,
+});
+
+const mockBedLayouts = filterBeds(mockAdmissionLocation);
+
+const mockBedToUse = mockBedLayouts[0];
+jest.replaceProperty(mockBedToUse.patient.person, 'preferredName', {
+  uuid: '',
+  givenName: 'Alice',
+  familyName: 'Johnson',
+});
+const mockPatient = mockBedToUse.patient;
+const mockBed = bedLayoutToBed(mockBedToUse);
+
+describe('Occupied bed: ', () => {
+  it('renders a single bed with patient details', () => {
+    render(<OccupiedBed patients={[mockPatient]} bed={mockBed} />);
+    const patientName = screen.getByText('Alice Johnson');
+    expect(patientName).toBeInTheDocument();
+    const patientAge = `${mockPatient.person.age} yrs`;
+    expect(screen.getByText(patientAge)).toBeInTheDocument();
+    const defaultAddressFields = defaultBentoElementConfig.addressFields;
+    defaultAddressFields.forEach((addressField) => {
+      const addressFieldValue = mockPatient.person.preferredAddress[addressField] as string;
+      expect(screen.getByText(addressFieldValue)).toBeInTheDocument();
+    });
+  });
+
+  it('renders a divider for shared patients', () => {
+    render(<OccupiedBed patients={[mockPatient, mockPatient]} bed={mockBed} />);
+    const bedShareText = screen.getByTitle('Bed share');
+    expect(bedShareText).toBeInTheDocument();
+  });
+});

packages/esm-ward-app/src/config-schema.ts

@@ -1,5 +1,120 @@
-import { type ConfigSchema } from '@openmrs/esm-framework';
+import { type PersonAddress, Type, validator, validators, type ConfigSchema } from '@openmrs/esm-framework';
+import { type BentoElementType, bentoElementTypes } from './types';
 
-export const configSchema: ConfigSchema = {};
+const defaultWardPatientCard: WardPatientCardDefinition = {
+  card: {
+    id: 'default-card',
+    header: ['bed-number', 'patient-name', 'patient-age', 'patient-address'],
+  },
+  appliedTo: null,
+};
 
-export interface ConfigObject {}
+export const defaultBentoElementConfig: BentoElementConfig = {
+  addressFields: ['cityVillage', 'country'],
+};
+
+export const builtInBentoElements: BentoElementType[] = [
+  'bed-number',
+  'patient-name',
+  'patient-age',
+  'patient-address',
+  'admission-time',
+];
+
+export const configSchema: ConfigSchema = {
+  wardPatientCards: {
+    _description: 'Configure the display of ward patient cards',
+    bentoElementDefinitions: {
+      _type: Type.Array,
+      _default: [],
+      _elements: {
+        id: {
+          _type: Type.String,
+          _description: 'The unique identifier for this custom bento element',
+        },
+        elementType: {
+          _type: Type.String,
+          _description: 'The bento element type',
+          _validators: [validators.oneOf(bentoElementTypes)],
+        },
+        config: {
+          addressFields: {
+            _type: Type.Array,
+            _description: 'For bentoElementType "patient-address", defining which address fields to show',
+          },
+        },
+      },
+    },
+    cardDefinitions: {
+      _type: Type.Array,
+      _default: [defaultWardPatientCard],
+      _description: `An array of card configuration. A card configuration can be applied to different ward locations.
+         If multiple card configurations apply to a location, only the first one is chosen.`,
+      _elements: {
+        id: {
+          _type: Type.String,
+          _description: 'The unique identifier for this card definition. Currently unused, but that might change.',
+        },
+        card: {
+          header: {
+            _type: Type.Array,
+            _element: {
+              _type: Type.String,
+              _description: 'The ID of the (bulit-in or custom) bento element',
+              _validators: [
+                validator(
+                  (bentoElementId: string) => {
+                    const validBentoElementIds: string[] = [...bentoElementTypes];
+                    return validBentoElementIds.includes(bentoElementId);
+                  },
+                  (bentoElementId: string) => 'Invalid bento element id: ' + bentoElementId,
+                ),
+              ],
+            },
+          },
+        },
+        appliedTo: {
+          _type: Type.Array,
+          _elements: {
+            location: {
+              _type: Type.UUID,
+              _description: 'The UUID of the location. If not provided, applies to all queues.',
+              _default: null,
+            },
+          },
+        },
+      },
+    },
+  },
+};
+
+export interface WardConfigObject {
+  wardPatientCards: WardPatientCardsConfig;
+}
+
+export interface WardPatientCardsConfig {
+  bentoElementDefinitions: Array<BentoElementDefinition>;
+  cardDefinitions: Array<WardPatientCardDefinition>;
+}
+
+export interface WardPatientCardDefinition {
+  card: {
+    id: string;
+    header: Array<string>; // an array of (either built-in or custom) bento element ids
+  };
+  appliedTo?: Array<{
+    location: string; // locationUuid. If given, only applies to patients at the specified ward locations. (If not provided, applies to all locations)
+  }>;
+}
+
+export type BentoElementDefinition = {
+  id: string;
+  elementType: BentoElementType;
+  config?: BentoElementConfig;
+};
+
+export interface PatientAddressBentoElementConfig {
+  addressFields: Array<keyof PersonAddress>;
+}
+
+export type BentoElementConfig = {} & PatientAddressBentoElementConfig;

packages/esm-ward-app/src/index.ts

@@ -1,6 +1,10 @@
-import { defineConfigSchema, getSyncLifecycle, registerBreadcrumbs } from '@openmrs/esm-framework';
-import rootComponent from './root.component';
+import {
+  defineConfigSchema,
+  getSyncLifecycle,
+  registerBreadcrumbs
+} from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
+import rootComponent from './root.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 

packages/esm-ward-app/src/types/index.ts

@@ -1,4 +1,32 @@
-import { type Location, type Patient } from '@openmrs/esm-framework';
+import {
+  type OpenmrsResource,
+  type OpenmrsResourceStrict,
+  type Person,
+  type Visit,
+  type Location,
+  type Patient,
+} from '@openmrs/esm-framework';
+import type React from 'react';
+
+export interface WardPatientCardProps {
+  patient: Patient;
+  bed: Bed;
+  status?: WardPatientStatus;
+}
+
+export type WardPatientCardRow = React.FC<WardPatientCardProps>;
+export type WardPatientCardBentoElement = React.FC<WardPatientCardProps>;
+
+export type WardPatientStatus = 'admitted' | 'pending';
+
+export const bentoElementTypes = [
+  'bed-number',
+  'patient-name',
+  'patient-age',
+  'patient-address',
+  'admission-time',
+] as const;
+export type BentoElementType = (typeof bentoElementTypes)[number];
 
 // server-side types defined in openmrs-module-bedmanagement:
 
@@ -50,3 +78,51 @@ interface BedTagMap {
 }
 
 export type BedStatus = 'AVAILABLE' | 'OCCUPIED';
+
+// TODO: Move these types to esm-core
+export interface Observation extends OpenmrsResourceStrict {
+  concept: OpenmrsResource;
+  person: Person;
+  obsDatetime: string;
+  accessionNumber: string;
+  obsGroup: Observation;
+  valueCodedName: OpenmrsResource; // ConceptName
+  groupMembers: Array<Observation>;
+  comment: string;
+  location: Location;
+  order: OpenmrsResource; // Order
+  encounter: Encounter;
+  voided: boolean;
+}
+
+export interface Encounter extends OpenmrsResourceStrict {
+  encounterDatetime?: string;
+  patient?: Patient;
+  location?: Location;
+  form?: OpenmrsResource;
+  encounterType?: EncounterType;
+  obs?: Observation;
+  orders?: any;
+  voided?: boolean;
+  visit?: Visit;
+  encounterProviders?: Array<EncounterProvider>;
+  diagnoses?: any;
+}
+
+export interface EncounterProvider extends OpenmrsResourceStrict {
+  provider?: OpenmrsResource;
+  encounterRole?: EncounterRole;
+  voided?: boolean;
+}
+
+export interface EncounterType extends OpenmrsResourceStrict {
+  name?: string;
+  description?: string;
+  retired?: boolean;
+}
+
+export interface EncounterRole extends OpenmrsResourceStrict {
+  name?: string;
+  description?: string;
+  retired?: boolean;
+}

packages/esm-ward-app/src/ward-patient-card/bento-elements/ward-patient-age.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { type WardPatientCardBentoElement } from '../../types';
+
+const WardPatientAge: WardPatientCardBentoElement = ({ patient }) => {
+  const { t } = useTranslation();
+  return (
+    <div>
+      {t('yearsOld', '{{age}} yrs', {
+        age: patient?.person?.age,
+      })}
+    </div>
+  );
+};
+
+export default WardPatientAge;

packages/esm-ward-app/src/ward-patient-card/bento-elements/ward-patient-bed-number.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import styles from '../ward-patient-card.scss';
+import { type WardPatientCardBentoElement } from '../../types';
+
+const WardPatientBedNumber: WardPatientCardBentoElement = ({ bed }) => {
+  return (
+    <div className={styles.bedNumberBox}>
+      <span className={styles.wardPatientBedNumber}>{bed.bedNumber}</span>
+    </div>
+  );
+};
+
+export default WardPatientBedNumber;