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/beds/empty-bed.component.tsx

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

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-patient-card';
+
+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={'occupied-bed-pt-' + patient.uuid}>
+            <WardPatientCard patient={patient} bed={bed} />
+            {!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';
+@use '@openmrs/esm-styleguide/src/vars';
+
+.occupiedBed {
+  display: flex;
+  flex-direction: column;
+  background-color: vars.$ui-02;
+}
+
+.bedDivider {
+  background-color: vars.$ui-02;
+  color: vars.$text-02;
+  padding: spacing.$spacing-01;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.bedDividerLine {
+  height: 1px;
+  background-color: vars.$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, defaultPatientCardElementConfig } 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 = defaultPatientCardElementConfig.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,136 @@
-import { type ConfigSchema } from '@openmrs/esm-framework';
+import { Type, validators, type ConfigSchema, type PersonAddress } from '@openmrs/esm-framework';
+import { patientCardElementTypes, type PatientCardElementType } from './types';
 
-export const configSchema: ConfigSchema = {};
+const defaultWardPatientCard: WardPatientCardDefinition = {
+  id: 'default-card',
+  rows: [
+    {
+      rowType: 'header',
+      elements: ['bed-number', 'patient-name', 'patient-age', 'patient-address'],
+    },
+  ],
+  appliedTo: null,
+};
 
-export interface ConfigObject {}
+const defaultPatientAddressFields: Array<keyof PersonAddress> = ['cityVillage', 'country'];
+
+export const defaultPatientCardElementConfig: PatientCardElementConfig = {
+  addressFields: defaultPatientAddressFields,
+};
+
+export const builtInPatientCardElements: PatientCardElementType[] = [
+  'bed-number',
+  'patient-name',
+  'patient-age',
+  'patient-address',
+  'admission-time',
+];
+
+export const configSchema: ConfigSchema = {
+  wardPatientCards: {
+    _description: 'Configure the display of ward patient cards',
+    patientCardElementDefinitions: {
+      _type: Type.Array,
+      _default: [],
+      _elements: {
+        id: {
+          _type: Type.String,
+          _description: 'The unique identifier for this custom patient card element',
+        },
+        elementType: {
+          _type: Type.String,
+          _description: 'The patient card element type',
+          _validators: [validators.oneOf(patientCardElementTypes)],
+        },
+        config: {
+          addressFields: {
+            _type: Type.Array,
+            _description: 'For patientCardElementType "patient-address", defining which address fields to show',
+            _default: defaultPatientAddressFields,
+          },
+        },
+      },
+    },
+    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.',
+        },
+        rows: {
+          _type: Type.Array,
+          _elements: {
+            id: {
+              _type: Type.String,
+              _description: 'The unique identifier for this card row. Currently unused, but that might change.',
+            },
+            elements: {
+              _type: Type.Array,
+              _element: {
+                _type: Type.String,
+                _description: 'The ID of the (bulit-in or custom) patient card elements to appear in this card row',
+                _validators: [validators.oneOf(patientCardElementTypes)],
+              },
+            },
+          },
+        },
+        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 {
+  patientCardElementDefinitions: Array<PatientCardElementDefinition>;
+  cardDefinitions: Array<WardPatientCardDefinition>;
+}
+
+export interface WardPatientCardDefinition {
+  id: string;
+  rows: Array<{
+    /**
+     * The type of row. Currently, only "header" is supported
+     */
+    rowType: 'header';
+
+    /**
+     * an array of (either built-in or custom) patient card element ids
+     */
+    elements: Array<string>;
+  }>;
+  appliedTo?: Array<{
+    /**
+     * locationUuid. If given, only applies to patients at the specified ward locations. (If not provided, applies to all locations)
+     */
+    location: string;
+  }>;
+}
+
+export type PatientCardElementDefinition = {
+  id: string;
+  elementType: PatientCardElementType;
+  config?: PatientCardElementConfig;
+};
+
+export interface PatientAddressElementConfig {
+  addressFields: Array<keyof PersonAddress>;
+}
+
+export type PatientCardElementConfig = {} & PatientAddressElementConfig;

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');