}
+ label={t('Patient', 'patient')}
+ iconDescription={t('Patient', 'patient')}
+ handler={() => launchWorkspace('ward-patient-workspace')}
+ type={'ward'}
+ />
+ );
+}
diff --git a/packages/esm-ward-app/src/ward-patient-workspace/ward-patient.style.scss b/packages/esm-ward-app/src/ward-patient-workspace/ward-patient.style.scss
new file mode 100644
index 000000000..cff5179a4
--- /dev/null
+++ b/packages/esm-ward-app/src/ward-patient-workspace/ward-patient.style.scss
@@ -0,0 +1,11 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+
+.workspaceContainer {
+ min-height: var(--desktop-workspace-window-height);
+}
+
+.headerPatientDetail {
+ @include type.type-style('body-compact-02');
+ margin: 0 spacing.$spacing-02;
+}
diff --git a/packages/esm-ward-app/src/ward-patient-workspace/ward-patient.workspace.tsx b/packages/esm-ward-app/src/ward-patient-workspace/ward-patient.workspace.tsx
new file mode 100644
index 000000000..ff9e6ff2f
--- /dev/null
+++ b/packages/esm-ward-app/src/ward-patient-workspace/ward-patient.workspace.tsx
@@ -0,0 +1,79 @@
+import React, { useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { InlineNotification } from '@carbon/react';
+import { InlineLoading } from '@carbon/react';
+import {
+ type DefaultWorkspaceProps,
+ ExtensionSlot,
+ attach,
+ getPatientName,
+ usePatient,
+ age,
+} from '@openmrs/esm-framework';
+import styles from './ward-patient.style.scss';
+
+attach('ward-patient-workspace-header-slot', 'patient-vitals-info');
+
+export interface WardPatientWorkspaceProps extends DefaultWorkspaceProps {
+ patientUuid: string;
+}
+
+export default function WardPatientWorkspace({ patientUuid, setTitle }: WardPatientWorkspaceProps) {
+ const { t } = useTranslation();
+ const { patient, isLoading, error } = usePatient(patientUuid);
+
+ useEffect(() => {
+ if (isLoading) {
+ setTitle(t('wardPatientWorkspaceTitle', 'Ward Patient'), );
+ } else if (patient) {
+ setTitle(getPatientName(patient), );
+ } else if (error) {
+ setTitle(t('wardPatientWorkspaceTitle', 'Ward Patient'));
+ }
+ }, [patient]);
+
+ return (
+
+ {isLoading ? (
+
+ ) : patient ? (
+
+ ) : error ? (
+ {error.message}
+ ) : (
+
+ {t('failedToLoadPatientWorkspace', 'Ward patient workspace has failed to load.')}
+
+ )}
+
+ );
+}
+
+interface WardPatientWorkspaceViewProps {
+ patient: fhir.Patient;
+}
+
+function WardPatientWorkspaceView({ patient }: WardPatientWorkspaceViewProps) {
+ const extensionSlotState = useMemo(() => ({ patient, patientUuid: patient.id }), [patient]);
+
+ return (
+ <>
+
+
+
+
+
+
+
+ );
+}
+
+function PatientWorkspaceTitle({ patient }: { patient: fhir.Patient }) {
+ return (
+ <>
+ {getPatientName(patient)}
+ · {patient.gender}
+ · {age(patient.birthDate)}
+
+ );
+}
diff --git a/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx b/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx
index c7c6ba65f..81de509d4 100644
--- a/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx
+++ b/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.component.tsx
@@ -1,45 +1,49 @@
-import { SkeletonIcon } from '@carbon/react';
-import { Movement } from '@carbon/react/icons';
-import { launchWorkspace, showNotification, type Location } from '@openmrs/esm-framework';
import React from 'react';
-import { useTranslation } from 'react-i18next';
+import { Movement } from '@carbon/react/icons';
+import { Button, InlineNotification } from '@carbon/react';
+import { ArrowRightIcon, isDesktop, launchWorkspace, useLayoutType } from '@openmrs/esm-framework';
import { useInpatientRequest } from '../hooks/useInpatientRequest';
+import { useTranslation } from 'react-i18next';
+import useWardLocation from '../hooks/useWardLocation';
import styles from './admission-requests.scss';
-interface AdmissionRequestsBarProps {
- location: Location;
-}
-
-const AdmissionRequestsBar: React.FC = ({ location }) => {
- const { inpatientRequests, isLoading, error } = useInpatientRequest(location.uuid);
+const AdmissionRequestsBar = () => {
+ const { location } = useWardLocation();
+ const { inpatientRequests, isLoading, error } = useInpatientRequest(location?.uuid);
const admissionRequests = inpatientRequests?.filter((request) => request.type == 'ADMISSION');
const { t } = useTranslation();
+ const layout = useLayoutType();
- if (isLoading) {
- return ;
+ if (isLoading || !admissionRequests?.length) {
+ return null;
}
if (error) {
- showNotification({
- kind: 'error',
- title: t('errorLoadingPatientAdmissionRequests', 'Error Loading Patient Admission Requests'),
- description: error.message,
- });
- return <>;
+ console.error(error);
+ return (
+
+ );
}
- return admissionRequests.length > 0 ? (
+ return (
- {admissionRequests.length} admission requests
-
+
+ {t('admissionRequestsCount', '{{count}} admission requests', {
+ count: admissionRequests.length,
+ })}
+
+
- ) : (
- <>
);
};
diff --git a/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.test.tsx b/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.test.tsx
index c00d76004..8fd887961 100644
--- a/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.test.tsx
+++ b/packages/esm-ward-app/src/ward-view-header/admission-requests-bar.test.tsx
@@ -1,12 +1,11 @@
+import React from 'react';
import userEvent from '@testing-library/user-event';
import { renderWithSwr } from '../../../../tools/test-utils';
import { screen } from '@testing-library/react';
import { launchWorkspace } from '@openmrs/esm-framework';
-import React from 'react';
import AdmissionRequestsBar from './admission-requests-bar.component';
import { mockInpatientRequest } from '../../../../__mocks__/ward-patient';
import { useInpatientRequest } from '../hooks/useInpatientRequest';
-import { mockLocationInpatientWard } from '../../../../__mocks__/locations.mock';
jest.mock('@openmrs/esm-framework', () => {
return {
@@ -30,13 +29,15 @@ jest.mocked(useInpatientRequest).mockReturnValue(mockInpatientRequestResponse);
describe('Admission Requests Button', () => {
it('call launch workspace when clicked on manage button', async () => {
const user = userEvent.setup();
- renderWithSwr();
+ renderWithSwr();
+
await user.click(screen.getByRole('button', { name: /manage/i }));
expect(launchWorkspace).toHaveBeenCalled();
});
it('there should be one admission request', () => {
- const { getByText } = renderWithSwr();
- expect(getByText('1 admission requests')).toBeInTheDocument();
+ renderWithSwr();
+
+ expect(screen.getByText('1 admission requests')).toBeInTheDocument();
});
});
diff --git a/packages/esm-ward-app/src/ward-view-header/admission-requests.scss b/packages/esm-ward-app/src/ward-view-header/admission-requests.scss
index e22cb1d0b..83a4ebd2c 100644
--- a/packages/esm-ward-app/src/ward-view-header/admission-requests.scss
+++ b/packages/esm-ward-app/src/ward-view-header/admission-requests.scss
@@ -3,12 +3,19 @@
@import '~@openmrs/esm-styleguide/src/vars';
.admissionRequestsContainer {
- width: fit-content;
- border-left: 2px solid $color-blue-60-2;
background-color: $color-gray-70;
display: flex;
align-items: center;
- padding: spacing.$spacing-02;
+ padding: spacing.$spacing-02 0 spacing.$spacing-02 spacing.$spacing-04;
+ background-color: #393939;
+
+ & > button {
+ color: #78a9ff;
+
+ svg {
+ fill: #78a9ff !important;
+ }
+ }
}
.movementIcon {
@@ -16,27 +23,11 @@
border-radius: 50%;
fill: $ui-03;
background-color: $color-blue-60-2;
-}
-
-.manageButton {
- background-color: transparent;
- border: none;
- color: $inverse-link;
- cursor: pointer;
- margin-left: spacing.$spacing-04;
- &::after {
- content: '→';
- padding: spacing.$spacing-02;
- }
+ margin-right: spacing.$spacing-03;
}
.content {
@include type.type-style('heading-compact-01');
color: $ui-02;
- margin-left: spacing.$spacing-02;
-}
-
-.skeleton {
- height: 20px;
- width: 120px;
+ margin-right: spacing.$spacing-03;
}
diff --git a/packages/esm-ward-app/src/ward-view-header/ward-view-header.component.tsx b/packages/esm-ward-app/src/ward-view-header/ward-view-header.component.tsx
index 025abafb8..7932cfa92 100644
--- a/packages/esm-ward-app/src/ward-view-header/ward-view-header.component.tsx
+++ b/packages/esm-ward-app/src/ward-view-header/ward-view-header.component.tsx
@@ -1,16 +1,16 @@
import React from 'react';
import styles from './ward-view-header.scss';
import AdmissionRequestsBar from './admission-requests-bar.component';
-import { type Location } from '@openmrs/esm-framework';
+import useWardLocation from '../hooks/useWardLocation';
-interface WardViewHeaderProps {
- location: Location;
-}
-const WardViewHeader: React.FC = ({ location }) => {
+interface WardViewHeaderProps {}
+
+const WardViewHeader: React.FC = () => {
+ const { location } = useWardLocation();
return (
-
{location.display}
-
+
{location?.display}
+