@openmrs/esm-ward-app 7.0.1-pre.60 → 7.1.0

package/src/config-schema.ts

@@ -15,7 +15,11 @@ const defaultWardPatientCard: WardPatientCardDefinition = {
 const defaultPatientAddressFields: Array<keyof PersonAddress> = ['cityVillage', 'country'];
 
 export const defaultPatientCardElementConfig: PatientCardElementConfig = {
-  addressFields: defaultPatientAddressFields,
+  address: {
+    addressFields: defaultPatientAddressFields,
+  },
+  obs: null,
+  codedObsTags: null,
 };
 
 export const builtInPatientCardElements: PatientCardElementType[] = [
@@ -23,7 +27,6 @@ export const builtInPatientCardElements: PatientCardElementType[] = [
   'patient-name',
   'patient-age',
   'patient-address',
-  'admission-time',
 ];
 
 export const configSchema: ConfigSchema = {
@@ -43,10 +46,92 @@ export const configSchema: ConfigSchema = {
           _validators: [validators.oneOf(patientCardElementTypes)],
         },
         config: {
-          addressFields: {
-            _type: Type.Array,
-            _description: 'For patientCardElementType "patient-address", defining which address fields to show',
-            _default: defaultPatientAddressFields,
+          address: {
+            _description: 'Config for the patientCardElementType "patient-address"',
+            addressFields: {
+              _type: Type.Array,
+              _description: 'defines which address fields to show',
+              _default: defaultPatientAddressFields,
+            },
+          },
+          obs: {
+            _description: 'Config for the patientCardElementType "patient-obs"',
+            conceptUuid: {
+              _type: Type.UUID,
+              _description: 'Required. Identifies the concept to use to identify the desired observations.',
+              _default: null,
+            },
+            label: {
+              _type: Type.String,
+              _description:
+                "Optional. The custom label or i18n key to the translated label to display. If not provided, defaults to the concept's name. (Note that this can be set to an empty string to not show a label)",
+              _default: null,
+            },
+            labelI18nModule: {
+              _type: Type.String,
+              _description: 'Optional. The custom module to use for translation of the label',
+              _default: null,
+            },
+            orderBy: {
+              _type: Type.String,
+              _description:
+                "Optional. One of 'ascending' or 'descending', specifying whether to display the obs by obsDatetime ascendingly or descendingly. Defaults to ascending.",
+              _default: 'descending',
+              _validators: [validators.oneOf(['ascending', 'descending'])],
+            },
+            limit: {
+              _type: Type.Number,
+              _description: 'Optional. Limits the max number of obs to display. Unlimited by default.',
+              _default: null,
+            },
+            onlyWithinCurrentVisit: {
+              _type: Type.Boolean,
+              _description:
+                'Optional. If true, limits display to only observations within current visit. Defaults to false',
+              _default: false,
+            },
+          },
+          codedObsTags: {
+            _description: 'Config for the patientCardElementType "patient-coded-obs-tags"',
+            conceptUuid: {
+              _type: Type.UUID,
+              _description: 'Required. Identifies the concept to use to identify the desired observations.',
+              _default: null,
+            },
+            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: {
+              _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.`,
+              _type: Type.Array,
+              _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,
+                  },
+                },
+              },
+            },
           },
         },
       },
@@ -133,4 +218,85 @@ export interface PatientAddressElementConfig {
   addressFields: Array<keyof PersonAddress>;
 }
 
-export type PatientCardElementConfig = {} & PatientAddressElementConfig;
+export interface PatientObsElementConfig {
+  /**
+   * 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. If not provided, defaults to the concept's name.
+   * (Note that this can be set to an empty string to not show a label)
+   */
+  label?: string;
+
+  /**
+   * Optional. The custom module to use for translation of the label
+   */
+  labelI18nModule?: string;
+
+  /**
+   * Optional. One of 'ascending' or 'descending', specifying whether to display the obs by obsDatetime ascendingly or descendingly. Defaults to descending.
+   */
+  orderBy?: 'ascending' | 'descending';
+
+  /**
+   * Optional. Limits the max number of obs to display. Unlimited by default.
+   */
+  limit?: number;
+
+  /**
+   * Optional. If true, limits display to only observations within current visit
+   */
+  onlyWithinCurrentVisit?: boolean;
+}
+
+export interface PatientCodedObsTagsElementConfig {
+  /**
+   * 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<{
+    /**
+     * 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>;
+  }>;
+}
+
+export type PatientCardElementConfig = {
+  address: PatientAddressElementConfig;
+  obs: PatientObsElementConfig;
+  codedObsTags: PatientCodedObsTagsElementConfig;
+};

package/src/constant.ts

@@ -0,0 +1 @@
+export const moduleName = '@openmrs/esm-ward-app';

package/src/createDashboardLink.component.tsx

@@ -0,0 +1,42 @@
+import React, { useMemo } from 'react';
+import classNames from 'classnames';
+import { ConfigurableLink } from '@openmrs/esm-framework';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+
+export interface DashboardLinkConfig {
+  name: string;
+  title: string;
+}
+
+// TODO: extract this out into the esm-framework and all 4 copies of this file in this repo?
+
+function DashboardExtension({ dashboardLinkConfig }: { dashboardLinkConfig: DashboardLinkConfig }) {
+  //
+  const { t } = useTranslation();
+  const { name, title } = dashboardLinkConfig;
+  const location = useLocation();
+  const spaBasePath = `${window.spaBase}/home`;
+
+  const navLink = useMemo(() => {
+    const pathArray = location.pathname.split('/home');
+    const lastElement = pathArray[pathArray.length - 1];
+    return decodeURIComponent(lastElement);
+  }, [location.pathname]);
+
+  return (
+    <ConfigurableLink
+      className={classNames('cds--side-nav__link', {
+        'active-left-nav-link': navLink.match(name),
+      })}
+      to={`${spaBasePath}/${name}`}>
+      {t(title)}
+    </ConfigurableLink>
+  );
+}
+
+export const createDashboardLink = (dashboardLinkConfig: DashboardLinkConfig) => () => (
+  <BrowserRouter>
+    <DashboardExtension dashboardLinkConfig={dashboardLinkConfig} />
+  </BrowserRouter>
+);

package/src/hooks/useAdmissionLocation.ts

@@ -1,13 +1,12 @@
 import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
-import useSWR from 'swr';
 import { type AdmissionLocation } from '../types/index';
+import useSWRImmutable from 'swr/immutable';
 
 export function useAdmissionLocation(locationUuid: string, rep: string = 'full') {
-  const apiUrl = `${restBaseUrl}/admissionLocation/${locationUuid}` + (rep ? `?v=${rep}` : '');
-  const { data, ...rest } = useSWR<{ data: AdmissionLocation }, Error>(apiUrl, openmrsFetch);
-
+  const apiUrl = locationUuid ? `${restBaseUrl}/admissionLocation/${locationUuid}?v=${rep}` : null;
+  const { data, ...rest } = useSWRImmutable<{ data: AdmissionLocation }, Error>(apiUrl, openmrsFetch);
   return {
-    admissionLocation: data?.data ?? null,
+    admissionLocation: data?.data,
     ...rest,
   };
 }

package/src/hooks/useAdmittedPatients.ts

@@ -0,0 +1,13 @@
+import useSWR from 'swr';
+import { type AdmittedPatient } from '../types';
+import { openmrsFetch } from '@openmrs/esm-framework';
+
+export function useAdmittedPatients(locationUuid: string) {
+  const apiUrl = `/ws/rest/emrapi/inpatient/visits?currentLocation=${locationUuid}`;
+  const { data, ...rest } = useSWR<{ data: AdmittedPatient[] }, Error>(apiUrl, openmrsFetch);
+
+  return {
+    admittedPatients: data?.data ?? null,
+    ...rest,
+  };
+}

package/src/hooks/useConcept.ts

@@ -0,0 +1,11 @@
+import { type Concept, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export function useConcepts(uuids: string[], rep = 'default') {
+  const apiUrl = `${restBaseUrl}/concept?references=${uuids.join()}&v=${rep}`;
+  const { data, ...rest } = useSWRImmutable<{ data: { results: Array<Concept> } }, Error>(apiUrl, openmrsFetch);
+  return {
+    concepts: data?.data?.results,
+    ...rest,
+  };
+}

package/src/hooks/useInpatientRequest.ts

@@ -0,0 +1,15 @@
+import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import type { InpatientRequest } from '../types';
+import useSWR from 'swr';
+
+export function useInpatientRequest(locationUuid: string) {
+  const { data, ...rest } = useSWR<FetchResponse<Array<InpatientRequest>>, Error>(
+    locationUuid ? `${restBaseUrl}/emrapi/inpatient/admissionRequests?admissionLocation=${locationUuid}` : null,
+    openmrsFetch,
+  );
+
+  return {
+    inpatientRequests: data?.data,
+    ...rest,
+  };
+}

package/src/hooks/useLocation.test.ts

@@ -0,0 +1,38 @@
+import { renderHook } from '@testing-library/react';
+import useLocation from './useLocation';
+import useSWRImmutable from 'swr/immutable';
+import { restBaseUrl } from '@openmrs/esm-framework';
+
+jest.mock('swr/immutable', () =>
+  jest.fn().mockReturnValue({
+    data: {},
+    error: null,
+    isValidating: false,
+    mutate: jest.fn(),
+  }),
+);
+
+const useSWRImmutableMock = useSWRImmutable as jest.Mock;
+
+describe('useLocation hook', () => {
+  it('should call useLocation', () => {
+    const { result } = renderHook(() => useLocation('testUUID'));
+    expect(useSWRImmutableMock).toHaveBeenCalledWith(
+      `${restBaseUrl}/location/testUUID?v=custom:(display,uuid)`,
+      expect.any(Function),
+    );
+  });
+
+  it('should call useLocation with given rep', () => {
+    const { result } = renderHook(() => useLocation('testUUID', 'custom:(display,uuid,links)'));
+    expect(useSWRImmutableMock).toHaveBeenCalledWith(
+      `${restBaseUrl}/location/testUUID?v=custom:(display,uuid,links)`,
+      expect.any(Function),
+    );
+  });
+
+  it('should call useSWR with key=null', () => {
+    const { result } = renderHook(() => useLocation(null, 'custom:(display,uuid,links)'));
+    expect(useSWRImmutableMock).toHaveBeenCalledWith(null, expect.any(Function));
+  });
+});

package/src/hooks/useLocation.ts

@@ -0,0 +1,9 @@
+import { type Location, openmrsFetch, restBaseUrl, type FetchResponse } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export default function useLocation(locationUuid: string, rep: string = 'custom:(display,uuid)') {
+  return useSWRImmutable<FetchResponse<Location>>(
+    locationUuid ? `${restBaseUrl}/location/${locationUuid}?v=${rep}` : null,
+    openmrsFetch,
+  );
+}

package/src/hooks/useObs.ts

@@ -0,0 +1,21 @@
+import useSWR from 'swr';
+import { type Observation } from '../types';
+import { type Link, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+
+interface ObsSearchCriteria {
+  patient: string;
+  concept: string;
+}
+
+export function useObs(criteria?: ObsSearchCriteria, representation = 'default') {
+  const params = new URLSearchParams({
+    ...criteria,
+    v: representation,
+  });
+
+  const apiUrl = `${restBaseUrl}/obs?${params}`;
+  return useSWR<{ data: { results: Array<Observation>; totalCount: number; links: Array<Link> } }, Error>(
+    apiUrl,
+    openmrsFetch,
+  );
+}

package/src/hooks/useWardLocation.test.ts

@@ -0,0 +1,78 @@
+import { renderHook } from '@testing-library/react';
+import { useSession } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+import useWardLocation from './useWardLocation';
+import useLocation from './useLocation';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  useSession: jest.fn(),
+}));
+jest.mock('react-router-dom', () => ({
+  useParams: jest.fn(),
+}));
+jest.mock('./useLocation', () => jest.fn());
+
+const mockedUseParams = useParams as jest.Mock;
+const mockedUseSession = useSession as jest.Mock;
+const mockedUseLocation = useLocation as jest.Mock;
+
+describe('useWardLocation', () => {
+  it('returns session location when locationUuidFromUrl is not provided', async () => {
+    mockedUseParams.mockReturnValue({});
+    mockedUseSession.mockReturnValue({ sessionLocation: 'sessionLocation' });
+    mockedUseLocation.mockReturnValue({});
+
+    const { result } = renderHook(() => useWardLocation());
+
+    expect(result.current.location).toBe('sessionLocation');
+  });
+
+  it('returns location from useLocation when locationUuidFromUrl is provided', async () => {
+    mockedUseParams.mockReturnValue({ locationUuid: 'uuid' });
+    mockedUseLocation.mockReturnValue({
+      data: { data: 'locationData' },
+      isLoading: false,
+      error: null,
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+
+    expect(result.current.location).toBe('locationData');
+    expect(result.current.invalidLocation).toBeFalsy();
+  });
+
+  it('handles loading state correctly', async () => {
+    mockedUseParams.mockReturnValue({ locationUuid: 'uuid' });
+    mockedUseLocation.mockReturnValue({
+      isLoading: true,
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+
+    expect(result.current.isLoadingLocation).toBe(true);
+  });
+
+  it('handles error state correctly when fetching location fails', async () => {
+    const error = new Error('Error fetching location');
+    mockedUseParams.mockReturnValue({ locationUuid: 'uuid' });
+    mockedUseLocation.mockReturnValue({
+      error,
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+
+    expect(result.current.errorFetchingLocation).toBe(error);
+  });
+
+  it('identifies invalid location correctly', async () => {
+    const error = new Error('Error fetching location');
+    mockedUseParams.mockReturnValue({ locationUuid: 'uuid' });
+    mockedUseLocation.mockReturnValue({
+      error,
+    });
+
+    const { result } = renderHook(() => useWardLocation());
+
+    expect(result.current.invalidLocation).toBeTruthy();
+  });
+});

package/src/hooks/useWardLocation.ts

@@ -0,0 +1,26 @@
+import { type Location, useLocations, useSession } from '@openmrs/esm-framework';
+import { useParams } from 'react-router-dom';
+import useLocation from './useLocation';
+
+export default function useWardLocation(): {
+  location: Location;
+  isLoadingLocation: boolean;
+  errorFetchingLocation: Error;
+  invalidLocation: boolean;
+} {
+  const { locationUuid: locationUuidFromUrl } = useParams();
+  const { sessionLocation } = useSession();
+  const {
+    data: locationResponse,
+    isLoading: isLoadingLocation,
+    error: errorFetchingLocation,
+  } = useLocation(locationUuidFromUrl ? locationUuidFromUrl : null);
+  const invalidLocation = locationUuidFromUrl && errorFetchingLocation;
+
+  return {
+    location: locationUuidFromUrl ? locationResponse?.data : sessionLocation,
+    isLoadingLocation,
+    errorFetchingLocation,
+    invalidLocation,
+  };
+}

package/src/index.ts

@@ -1,11 +1,18 @@
-import { defineConfigSchema, getSyncLifecycle, registerBreadcrumbs, registerFeatureFlag } from '@openmrs/esm-framework';
+import {
+  defineConfigSchema,
+  getAsyncLifecycle,
+  getSyncLifecycle,
+  registerBreadcrumbs,
+  registerFeatureFlag,
+} from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
 import rootComponent from './root.component';
+import { moduleName } from './constant';
+import WardPatientActionButton from './ward-patient-workspace/ward-patient-action-button.extension';
+import { createDashboardLink } from './createDashboardLink.component';
 
 export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
 
-const moduleName = '@openmrs/esm-ward-app';
-
 const options = {
   featureName: 'ward',
   moduleName,
@@ -13,6 +20,20 @@ const options = {
 
 export const root = getSyncLifecycle(rootComponent, options);
 
+export const wardDashboardLink = getSyncLifecycle(createDashboardLink({ name: 'ward', title: 'wards' }), options);
+
+export const admissionRequestWorkspace = getAsyncLifecycle(
+  () => import('./ward-workspace/admission-requests-workspace.component'),
+  options,
+);
+
+export const wardPatientWorkspace = getAsyncLifecycle(
+  () => import('./ward-patient-workspace/ward-patient.workspace'),
+  options,
+);
+
+export const wardPatientActionButtonExtension = getSyncLifecycle(WardPatientActionButton, options);
+
 export function startupApp() {
   registerBreadcrumbs([]);
   defineConfigSchema(moduleName, configSchema);

package/src/root.component.tsx

@@ -3,7 +3,8 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import WardView from './ward-view/ward-view.component';
 
 const Root: React.FC = () => {
-  const wardViewBasename = window.getOpenmrsSpaBase() + 'ward';
+  // t('wards', 'Wards')
+  const wardViewBasename = window.getOpenmrsSpaBase() + 'home/ward';
 
   return (
     <main>

package/src/routes.json

@@ -1,11 +1,12 @@
 {
   "$schema": "https://json.openmrs.org/routes.schema.json",
   "backendDependencies": {
-    "webservices.rest": "^2.2.0"
+    "webservices.rest": "^2.2.0",
+    "emrapi": "^2.0.0 || 2.0.0-SNAPSHOT"
   },
   "optionalBackendDependencies":{
      "bedmanagement":{
-      "version": "^5.14.0 || 5.14.0-SNAPSHOT",
+      "version": "^6.0.0 || 6.0.0-SNAPSHOT",
       "feature": {
         "flagName": "bedmanagement-module",
         "label":"Ward App Patient Service",
@@ -14,11 +15,40 @@
      }
   },
   "extensions": [
-  ],
-  "pages": [
+    {
+      "name": "ward-dashboard-link",
+      "component": "wardDashboardLink",
+      "slot": "homepage-dashboard-slot",
+      "meta": {
+        "name": "ward",
+        "slot": "ward-dashboard-slot",
+        "title": "Wards"
+      }
+    },
     {
       "component": "root",
-      "route": "ward"
-    }
-  ]
+      "name": "ward-dashboard",
+      "slot": "ward-dashboard-slot"
+    },
+    {
+    "component": "wardPatientActionButtonExtension",
+    "name": "ward-patient-action-button",
+    "slot": "action-menu-ward-patient-items-slot"
+  }],
+  "workspaces": [
+    {
+      "name":"admission-requests-workspace",
+      "component": "admissionRequestWorkspace",
+      "title":"admissionRequests",
+       "type":"admission-requests"
+    },
+    {
+    "name": "ward-patient-workspace",
+    "component": "wardPatientWorkspace",
+    "type": "ward",
+    "title": "Ward Patient",
+    "width": "extra-wide",
+    "hasOwnSidebar": true,
+    "sidebarFamily": "ward-patient"
+  }]
 }