(feat) O3-3242 - ward app - add admission request detail to admission…

packages/esm-ward-app/src/config-schema-admission-request-note.ts

@@ -0,0 +1,9 @@
+import { Type } from '@openmrs/esm-framework';
+
+export const admissionRequestNoteRowConfigSchema = {
+  conceptUuid: {
+    _type: Type.UUID,
+    _description: 'Required. Identifies the concept for the admission request note.',
+    _default: '161011AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+  },
+};

packages/esm-ward-app/src/hooks/useInpatientRequest.ts

@@ -11,7 +11,8 @@ const defaultRep =
     'dispositionType,' +
     'disposition,' +
     'dispositionEncounter:full,' +
-    'patient:default,' +
+    'patient:(uuid,identifiers,voided,' +
+      'person:(uuid,display,gender,age,birthdate,birthtime,preferredName,preferredAddress,dead,deathDate)),' + 
     'dispositionObsGroup,' +
     'visit)';
 

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

@@ -7,12 +7,11 @@ import {
   registerFeatureFlag,
 } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import rootComponent from './root.component';
+import { admissionRequestNoteRowConfigSchema } from './config-schema-admission-request-note';
+import { coloredObsTagsCardRowConfigSchema } from './config-schema-extension-colored-obs-tags';
 import { moduleName } from './constant';
 import { createDashboardLink } from './createDashboardLink.component';
-import { coloredObsTagsCardRowConfigSchema } from './config-schema-extension-colored-obs-tags';
-import WardPatientActionButton from './ward-patient-workspace/ward-patient-action-button.extension';
-import ColoredObsTagsCardRowExtension from './ward-patient-card/colored-obs-tags-card-row/colored-obs-tags-card-row.extension';
+import rootComponent from './root.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
@@ -58,12 +57,22 @@ export const wardPatientNotesActionButtonExtension = getAsyncLifecycle(
   options,
 );
 
-export const coloredObsTagCardRowExtension = getSyncLifecycle(ColoredObsTagsCardRowExtension, options);
+export const coloredObsTagCardRowExtension = getAsyncLifecycle(
+  () => import('./ward-patient-card/card-rows/colored-obs-tags-card-row.extension'),
+  options,
+);
+
+export const admissionRequestNoteRowExtension = getAsyncLifecycle(
+  () => import('./ward-patient-card/card-rows/admission-request-note.extension'),
+  options,
+);
 
 export function startupApp() {
   registerBreadcrumbs([]);
   defineConfigSchema(moduleName, configSchema);
   defineExtensionConfigSchema('colored-obs-tags-card-row', coloredObsTagsCardRowConfigSchema);
+  defineExtensionConfigSchema('admission-request-note-card-row', admissionRequestNoteRowConfigSchema);
+
   registerFeatureFlag(
     'bedmanagement-module',
     'Bed Management Module',

packages/esm-ward-app/src/routes.json

@@ -44,6 +44,11 @@
       "component": "coloredObsTagCardRowExtension",
       "name": "colored-obs-tags-card-row",
       "slot": "ward-patient-card-slot"
+    },
+    {
+      "component": "admissionRequestNoteRowExtension",
+      "name": "admission-request-note-card-row",
+      "slot": "ward-patient-card-slot"
     }
   ],
   "workspaces": [

packages/esm-ward-app/src/ward-patient-card/card-rows/admission-request-note.extension.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { type ObsElementDefinition } from '../../config-schema';
+import { type WardPatientCard } from '../../types';
+import WardPatientObs from '../row-elements/ward-patient-obs';
+import { useConfig } from '@openmrs/esm-framework';
+
+const AdmissionRequestNoteRowExtension: WardPatientCard = ({ patient, visit, inpatientAdmission }) => {
+  const { conceptUuid } = useConfig<ObsElementDefinition>();
+  const config: ObsElementDefinition = {
+    conceptUuid,
+    limit: 0,
+    id: 'admission-note',
+    onlyWithinCurrentVisit: true,
+    orderBy: 'ascending',
+    label: 'Admission Note',
+  };
+
+  // only show if the patient has not been admitted yet
+  const admitted = inpatientAdmission != null;
+  if (admitted) {
+    return <></>;
+  } else {
+    return <WardPatientObs config={config} patient={patient} visit={visit} />;
+  }
+};
+
+export default AdmissionRequestNoteRowExtension;

packages/esm-ward-app/src/ward-workspace/admission-request-card/admission-request-card-actions.component.tsx

@@ -1,18 +1,13 @@
+import { Button } from '@carbon/react';
+import { ArrowRightIcon, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
 import React, { useCallback } from 'react';
-import styles from './admission-request-card.scss';
 import { useTranslation } from 'react-i18next';
-import { Button } from '@carbon/react';
-import { ArrowRightIcon, launchWorkspace, useLayoutType, type Patient } from '@openmrs/esm-framework';
-import type { DispositionType, Encounter } from '../../types';
+import type { WardPatientCard } from '../../types';
 import type { AdmitPatientFormWorkspaceProps } from '../admit-patient-form-workspace/types';
+import styles from './admission-request-card.scss';
 
-interface AdmissionRequestCardActionsProps {
-  patient: Patient;
-  dispositionType: DispositionType;
-  dispositionEncounter: Encounter;
-}
-
-const AdmissionRequestCardActions: React.FC<AdmissionRequestCardActionsProps> = ({ patient, dispositionType }) => {
+const AdmissionRequestCardActions: WardPatientCard = ({ patient, inpatientRequest }) => {
+  const { dispositionType } = inpatientRequest;
   const { t } = useTranslation();
   const responsiveSize = useLayoutType() === 'tablet' ? 'lg' : 'md';
   const launchPatientAdmissionForm = useCallback(

packages/esm-ward-app/src/ward-workspace/admission-request-card/admission-request-card-header.component.tsx

@@ -1,24 +1,33 @@
+import { ExtensionSlot, formatDatetime, getLocale } from '@openmrs/esm-framework';
+import classNames from 'classnames';
 import React from 'react';
-import type { InpatientRequest } from '../../types';
-import WardPatientAge from '../../ward-patient-card/row-elements/ward-patient-age';
-import WardPatientGender from '../../ward-patient-card/row-elements/ward-patient-gender.component';
-import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
+import WardPatientWorkspaceBanner from '../patient-banner/patient-banner.component';
 import styles from './admission-request-card.scss';
-import classNames from 'classnames';
-import { formatDatetime, getLocale } from '@openmrs/esm-framework';
+import type WardPatientCard from '../../ward-patient-card/ward-patient-card.component';
+import { useCurrentWardCardConfig } from '../../hooks/useCurrentWardCardConfig';
+import { WardPatientCardElement } from '../../ward-patient-card/ward-patient-card-element.component';
+import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
+
+const AdmissionRequestCardHeader: WardPatientCard = (wardPatient) => {
+  const { inpatientRequest } = wardPatient;
+  const { dispositionEncounter } = inpatientRequest;
+  const { id, headerRowElements } = useCurrentWardCardConfig();
+  const { patient } = wardPatient;
+  const extensionSlotState = wardPatient;
 
-interface AdmissionRequestCardHeaderProps {
-  patient: InpatientRequest['patient'];
-  dispositionEncounter: InpatientRequest['dispositionEncounter'];
-}
+  const rowsExtensionSlotName = id == 'default' ? 'ward-patient-card-slot' : `ward-patient-card-${id}-slot`;
 
-const AdmissionRequestCardHeader: React.FC<AdmissionRequestCardHeaderProps> = ({ patient, dispositionEncounter }) => {
   return (
     <div className={styles.admissionRequestCardHeaderContainer}>
       <div className={styles.admissionRequestCardHeader}>
         <WardPatientName patient={patient} />
-        <WardPatientGender patient={patient} />
-        <WardPatientAge patient={patient} />
+        {headerRowElements.map((elementId, i) => (
+          <WardPatientCardElement
+            key={`ward-card-${patient.uuid}-header-${i}`}
+            elementId={elementId}
+            {...wardPatient}
+          />
+        ))}
       </div>
       <div className={classNames(styles.admissionRequestCardHeader, styles.admissionEncounterDetails)}>
         <div>
@@ -30,6 +39,11 @@ const AdmissionRequestCardHeader: React.FC<AdmissionRequestCardHeaderProps> = ({
         <div>{dispositionEncounter?.encounterProviders?.map((provider) => provider?.provider?.display).join(',')}</div>
         <div>{dispositionEncounter?.location?.display}</div>
       </div>
+      <ExtensionSlot
+        name={rowsExtensionSlotName}
+        state={extensionSlotState}
+        className={styles.admissionRequestCardRow}
+      />
     </div>
   );
 };

packages/esm-ward-app/src/ward-workspace/admission-request-card/admission-request-card.component.tsx

@@ -4,19 +4,11 @@ import AdmissionRequestCardActions from './admission-request-card-actions.compon
 import AdmissionRequestCardHeader from './admission-request-card-header.component';
 import styles from './admission-request-card.scss';
 
-const AdmissionRequestCard: WardPatientCard = ({
-  patient,
-  inpatientRequest,
-}) => {
-  const { dispositionEncounter, dispositionType } = inpatientRequest;
+const AdmissionRequestCard: WardPatientCard = (wardPatient) => {
   return (
     <div className={styles.admissionRequestCard}>
-      <AdmissionRequestCardHeader patient={patient} dispositionEncounter={dispositionEncounter} />
-      <AdmissionRequestCardActions
-        patient={patient}
-        dispositionType={dispositionType}
-        dispositionEncounter={dispositionEncounter}
-      />
+      <AdmissionRequestCardHeader {...wardPatient} />
+      <AdmissionRequestCardActions {...wardPatient} />
     </div>
   );
 };

packages/esm-ward-app/src/ward-workspace/admission-request-card/admission-request-card.scss

@@ -20,12 +20,18 @@
   align-items: center;
   flex-wrap: wrap;
 
-  > div:not(:first-of-type)::before {
+  > div:not(:first-of-type):not(:empty)::before {
     content: '·';
     padding: layout.$spacing-02;
   }
 }
 
+.admissionRequestCardRow {
+  padding: layout.$spacing-05;
+  margin: layout.$spacing-03;
+  background-color: white;
+}
+
 .admissionEncounterDetails {
   @include type.type-style('helper-text-01');
   color: $text-02;

packages/esm-ward-app/src/ward-workspace/patient-banner/patient-banner.component.tsx

@@ -6,9 +6,9 @@ import styles from './style.scss';
 import WardPatientBedNumber from '../../ward-patient-card/row-elements/ward-patient-bed-number';
 import WardPatientName from '../../ward-patient-card/row-elements/ward-patient-name';
 
-const WardPatientWorkspaceBanner = (props: WardPatient) => {
+const WardPatientWorkspaceBanner = (wardPatient: WardPatient) => {
   const { headerRowElements } = useCurrentWardCardConfig();
-  const { patient, bed, visit } = props;
+  const { patient, bed, visit } = wardPatient;
 
   if (!(patient && visit)) {
     console.warn('Patient details and visit details were not received by the workspace');
@@ -20,11 +20,7 @@ const WardPatientWorkspaceBanner = (props: WardPatient) => {
       {bed ? <WardPatientBedNumber bed={bed} /> : null}
       <WardPatientName patient={patient} />
       {headerRowElements.map((elementId, i) => (
-        <WardPatientCardElement
-          key={`ward-card-${patient.uuid}-header-${i}`}
-          elementId={elementId}
-          {...props}
-        />
+        <WardPatientCardElement key={`ward-card-${patient.uuid}-header-${i}`} elementId={elementId} {...wardPatient} />
       ))}
     </div>
   );

packages/esm-ward-app/src/ward-workspace/patient-banner/style.scss

@@ -11,7 +11,7 @@
 }
 
 .dotSeparatedChildren {
-  > div:not(div:first-of-type) {
+  > div:not(div:first-of-type):not(:empty) {
     display: flex;
     align-items: center;