BREAKING: Rework card config system (supports O3-3242)

__mocks__/inpatient-request.ts

@@ -6,6 +6,35 @@ import { mockAddress } from './address.mock';
 
 export const mockInpatientRequest: InpatientRequest = {
   patient: mockPatientAlice,
+  visit: {
+    uuid: 'e5727d7e-8e1e-4615-bc3a-abd69e63234a',
+    display: 'Clinic or Hospital Visit @ KGH - 06/27/2024 07:40 PM',
+    patient: {
+      uuid: mockPatientAlice.uuid,
+      display: mockPatientAlice.display,
+    },
+    visitType: {
+      uuid: 'f01c54cb-2225-471a-9cd5-d348552c337c',
+      display: 'Clinic or Hospital Visit',
+    },
+    indication: null,
+    location: mockLocationInpatientWard,
+    startDatetime: '2024-06-27T19:40:16.000+0000',
+    stopDatetime: null,
+    encounters: [
+      {
+        uuid: '78f4dff6-197a-4314-b702-e1f796bf7531',
+        display: 'Consultation 07/23/2024',
+      },
+      {
+        uuid: '9e4cf2b3-8587-4999-93d6-3a3cbd50f9d8',
+        display: 'Sierra Leone MCH Triage 07/16/2024',
+      },
+    ],
+    attributes: [],
+    voided: false,
+    resourceVersion: '1.9',
+  },
   dispositionLocation: mockLocationInpatientWard,
   dispositionType: 'ADMIT',
   disposition: {

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { Tag } from '@carbon/react';
 import { type WardBedProps } from '../ward-view/ward-bed.component';
-import WardPatientCard from '../ward-patient-card/ward-patient-card';
+import WardPatientCard from '../ward-patient-card/ward-patient-card.component';
 import styles from './occupied-bed.scss';
 
 const OccupiedBed: React.FC<WardBedProps> = ({ wardPatients, bed }) => {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { configSchema, defaultPatientCardElementConfig } from '../config-schema';
+import { configSchema, type WardConfigObject } from '../config-schema';
 import {
   mockAdmissionLocation,
   mockLocationInpatientWard,
@@ -12,7 +12,7 @@ import { bedLayoutToBed, filterBeds } from '../ward-view/ward-view.resource';
 import useWardLocation from '../hooks/useWardLocation';
 import OccupiedBed from './occupied-bed.component';
 
-const defaultConfig = getDefaultsFromConfigSchema(configSchema);
+const defaultConfig: WardConfigObject = getDefaultsFromConfigSchema(configSchema);
 
 jest.mocked(useConfig).mockReturnValue(defaultConfig);
 
@@ -31,14 +31,21 @@ mockedUseWardLocation.mockReturnValue({
 const mockBedToUse = mockBedLayouts[0];
 const mockBed = bedLayoutToBed(mockBedToUse);
 
+const mockWardPatientProps = {
+  admitted: true,
+  visit: null,
+  encounterAssigningToCurrentInpatientLocation: null,
+  firstAdmissionOrTransferEncounter: null,
+};
+
 describe('Occupied bed', () => {
   it('renders a single bed with patient details', () => {
-    render(<OccupiedBed wardPatients={[{ patient: mockPatientAlice, admitted: true }]} bed={mockBed} />);
+    render(<OccupiedBed wardPatients={[{ ...mockWardPatientProps, patient: mockPatientAlice }]} bed={mockBed} />);
     const patientName = screen.getByText('Alice Johnson');
     expect(patientName).toBeInTheDocument();
     const patientAge = `${mockPatientAlice.person.age} yrs`;
     expect(screen.getByText(patientAge)).toBeInTheDocument();
-    const defaultAddressFields = defaultPatientCardElementConfig.address.addressFields;
+    const defaultAddressFields = ['cityVillage', 'country'];
     defaultAddressFields.forEach((addressField) => {
       const addressFieldValue = mockPatientAlice.person.preferredAddress[addressField] as string;
       expect(screen.getByText(addressFieldValue)).toBeInTheDocument();
@@ -50,8 +57,8 @@ describe('Occupied bed', () => {
       <OccupiedBed
         bed={mockBed}
         wardPatients={[
-          { patient: mockPatientAlice, admitted: true },
-          { patient: mockPatientBrian, admitted: true },
+          { ...mockWardPatientProps, patient: mockPatientAlice },
+          { ...mockWardPatientProps, patient: mockPatientBrian },
         ]}
       />,
     );

packages/esm-ward-app/src/beds/unassigned-patient.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import WardPatientCard from '../ward-patient-card/ward-patient-card';
+import WardPatientCard from '../ward-patient-card/ward-patient-card.component';
 import styles from './unassigned-patient.scss';
 import { type WardPatient } from '../types';
 

packages/esm-ward-app/src/config-schema-extension-colored-obs-tags.ts

@@ -0,0 +1,91 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const coloredObsTagsCardRowConfigSchema = {
+  conceptUuid: {
+    _type: Type.UUID,
+    _description: 'Required. Identifies the concept to use to identify the desired observations.',
+    // Problem list
+    _default: '1284AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+  summaryLabel: {
+    _type: Type.String,
+    _description: `Optional. The custom label or i18n key to the translated label to display for the summary tag. The summary tag shows the count of the number of answers that are present but not configured to show as their own tags. If not provided, defaults to the name of the concept.`,
+    _default: null,
+  },
+  summaryLabelI18nModule: {
+    _type: Type.String,
+    _description: 'Optional. The custom module to use for translation of the summary label',
+    _default: null,
+  },
+  summaryLabelColor: {
+    _type: Type.String,
+    _description:
+      'The color of the summary tag. See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors',
+    _default: null,
+  },
+  tags: {
+    _type: Type.Array,
+    _description: `An array specifying concept sets and color. Observations with coded values that are members of the specified concept sets will be displayed as their own tags with the specified color. Any observation with coded values not belonging to any concept sets specified will be summarized as a count in the summary tag. If a concept set is listed multiple times, the first matching applied-to rule takes precedence.`,
+    _default: [],
+    _elements: {
+      color: {
+        _type: Type.String,
+        _description:
+          'Color of the tag. See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors.',
+      },
+      appliedToConceptSets: {
+        _type: Type.Array,
+        _description: `The concept sets which the color applies to. Observations with coded values that are members of the specified concept sets will be displayed as their own tag with the specified color. If an observation's coded value belongs to multiple concept sets, the first matching applied-to rule takes precedence.`,
+        _elements: {
+          _type: Type.UUID,
+        },
+      },
+    },
+  },
+};
+
+export interface ColoredObsTagsCardRowConfigObject {
+  /**
+   * Required. Identifies the concept to use to identify the desired observations.
+   */
+  conceptUuid: string;
+
+  /**
+   * Optional. The custom label or i18n key to the translated label to display for the summary tag. The summary tag
+   * shows the count of the number of answers that are present but not configured to show as their own tags. If not
+   * provided, defaults to the name of the concept.
+   */
+  summaryLabel?: string;
+  /**
+   * Optional. The custom module to use for translation of the summary label
+   */
+  summaryLabelI18nModule?: string;
+
+  /**
+   * The color of the summary tag.
+   * See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors
+   */
+  summaryLabelColor?: string;
+
+  /**
+   * An array specifying concept sets and color. Observations with coded values that are members of the specified concept sets
+   * will be displayed as their own tags with the specified color. Any observation with coded values not belonging to
+   * any concept sets specified will be summarized as a count in the summary tag. If a concept set is listed multiple times,
+   * the first matching applied-to rule takes precedence.
+   */
+  tags: Array<TagConfigObject>;
+}
+
+export interface TagConfigObject {
+  /**
+   * Color of the tag. See https://react.carbondesignsystem.com/?path=/docs/components-tag--overview for a list of supported colors.
+   */
+  color: string;
+
+  /**
+   * The concept sets which the color applies to. Observations with coded values that are members of the specified concept sets
+   * will be displayed as their own tag with the specified color.
+   * If an observation's coded value belongs to multiple concept sets, the first matching applied-to rule takes precedence.
+   */
+  appliedToConceptSets: Array<string>;
+}