@kenyaemr/esm-active-visits-app 8.1.1-pre.124 → 8.1.2-pre.152

package/src/active-visits-widget/active-visits.resource.tsx

@@ -1,39 +1,24 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import useSWRInfinite from 'swr/infinite';
 import dayjs from 'dayjs';
 import isToday from 'dayjs/plugin/isToday';
 import last from 'lodash-es/last';
 import {
-  openmrsFetch,
-  type Visit,
-  useSession,
   type FetchResponse,
   formatDatetime,
+  openmrsFetch,
+  type OpenmrsResource,
   parseDate,
-  useConfig,
   restBaseUrl,
+  useConfig,
+  useSession,
+  type Visit,
 } from '@openmrs/esm-framework';
-dayjs.extend(isToday);
+import useSWR from 'swr';
+import { type ActiveVisit, type VisitResponse } from '../types';
+import { useTranslation } from 'react-i18next';
 
-export interface ActiveVisit {
-  age: string;
-  id: string;
-  idNumber: string;
-  gender: string;
-  location: string;
-  name: string;
-  patientUuid: string;
-  visitStartTime: string;
-  visitType: string;
-  visitUuid: string;
-  [identifier: string]: string;
-}
-
-interface VisitResponse {
-  results: Array<Visit>;
-  links: Array<{ rel: 'prev' | 'next' }>;
-  totalCount: number;
-}
+dayjs.extend(isToday);
 
 export function useActiveVisits() {
   const session = useSession();
@@ -41,8 +26,10 @@ export function useActiveVisits() {
   const sessionLocation = session?.sessionLocation?.uuid;
 
   const customRepresentation =
-    'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid,identifierType:(name,uuid)),person:(age,display,gender,uuid,attributes:(value,attributeType:(uuid,display)))),' +
-    'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,stopDatetime)';
+    'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid,identifierType:(name,uuid)),' +
+    'person:(age,display,gender,uuid,attributes:(value,attributeType:(uuid,display)))),' +
+    'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,stopDatetime,' +
+    'encounters:(encounterDatetime,obs:(uuid,concept:(uuid,display),value)))';
 
   const getUrl = (pageIndex, previousPageData: FetchResponse<VisitResponse>) => {
     if (pageIndex && !previousPageData?.data?.links?.some((link) => link.rel === 'next')) {
@@ -76,7 +63,7 @@ export function useActiveVisits() {
     if (data && data?.[pageNumber - 1]?.data?.links?.some((link) => link.rel === 'next')) {
       setSize((currentSize) => currentSize + 1);
     }
-  }, [data, pageNumber]);
+  }, [data, pageNumber, setSize]);
 
   const mapVisitProperties = (visit: Visit): ActiveVisit => {
     // create base object
@@ -126,6 +113,23 @@ export function useActiveVisits() {
       activeVisits[header?.key] = personAttributes?.value ?? '--';
     });
 
+    // Add flattened observations
+    const allObs = visit.encounters.reduce((accumulator, encounter) => {
+      return [...accumulator, ...(encounter.obs || [])];
+    }, []);
+
+    activeVisits.observations = allObs.reduce((map, obs) => {
+      const key = obs.concept.uuid;
+      if (!map[key]) {
+        map[key] = [];
+      }
+      map[key].push({
+        value: obs.value,
+        uuid: obs.uuid,
+      });
+      return map;
+    }, {});
+
     return activeVisits;
   };
 
@@ -142,6 +146,176 @@ export function useActiveVisits() {
   };
 }
 
+export function useObsConcepts(uuids: Array<string>): {
+  obsConcepts: Array<OpenmrsResource> | undefined;
+  isLoadingObsConcepts: boolean;
+} {
+  const fetchConcept = async (uuid: string): Promise<OpenmrsResource | null> => {
+    try {
+      const response = await openmrsFetch(`${restBaseUrl}/concept/${uuid}?v=custom:(uuid,display)`);
+      return response?.data;
+    } catch (error) {
+      console.error(`Error fetching concept for UUID: ${uuid}`, error);
+      return null;
+    }
+  };
+
+  const { data, isLoading, error } = useSWR(uuids.length > 0 ? ['obs-concepts', uuids] : null, async () => {
+    const results = await Promise.all(uuids.map(fetchConcept));
+    return results.filter((concept) => concept !== null);
+  });
+
+  return useMemo(
+    () => ({
+      obsConcepts: data ?? [],
+      isLoadingObsConcepts: isLoading,
+    }),
+    [data, isLoading],
+  );
+}
+
+export function useActiveVisitsSorting(tableRows: Array<any>) {
+  const [sortParams, setSortParams] = useState<{
+    key: string;
+    sortDirection: 'ASC' | 'DESC' | 'NONE';
+  }>({ key: 'visitStartTime', sortDirection: 'DESC' });
+
+  const sortRow = (cellA, cellB, { key, sortDirection }) => {
+    setSortParams({ key, sortDirection });
+  };
+
+  const getSortValue = (item: any, key: string) => {
+    // For observation columns
+    if (key.startsWith('obs-')) {
+      const conceptUuid = key.replace('obs-', '');
+      const obsValue = item?.observations?.[conceptUuid]?.[0]?.value;
+
+      if (!obsValue) return null;
+      if (typeof obsValue === 'object' && obsValue.display) {
+        return obsValue.display.toLowerCase();
+      }
+      return obsValue;
+    }
+
+    const value = item[key];
+    if (value == null) return null;
+
+    if (key === 'visitStartTime') {
+      return new Date(value).getTime();
+    }
+
+    if (key === 'age' && !isNaN(value)) {
+      return Number(value);
+    }
+
+    return String(value).toLowerCase();
+  };
+
+  const sortedRows = useMemo(() => {
+    if (sortParams.sortDirection === 'NONE') {
+      return tableRows;
+    }
+
+    return [...tableRows].sort((a, b) => {
+      const valueA = getSortValue(a, sortParams.key);
+      const valueB = getSortValue(b, sortParams.key);
+
+      if (valueA === null && valueB === null) return 0;
+      if (valueA === null) return 1;
+      if (valueB === null) return -1;
+
+      if (typeof valueA === 'number' && typeof valueB === 'number') {
+        return sortParams.sortDirection === 'DESC' ? valueB - valueA : valueA - valueB;
+      }
+
+      const compareResult = String(valueA).localeCompare(String(valueB), undefined, {
+        numeric: true,
+      });
+
+      return sortParams.sortDirection === 'DESC' ? -compareResult : compareResult;
+    });
+  }, [sortParams, tableRows]);
+
+  return {
+    sortedRows,
+    sortRow,
+  };
+}
+
+export function useTableHeaders(obsConcepts: OpenmrsResource[]) {
+  const { t } = useTranslation();
+  const config = useConfig();
+  return useMemo(() => {
+    let headersIndex = 0;
+
+    const headers = [
+      {
+        id: headersIndex++,
+        header: t('visitStartTime', 'Visit Time'),
+        key: 'visitStartTime',
+      },
+    ];
+
+    config?.activeVisits?.identifiers?.forEach((identifier) => {
+      headers.push({
+        id: headersIndex++,
+        header: t(identifier?.header?.key, identifier?.header?.default),
+        key: identifier?.header?.key,
+      });
+    });
+
+    if (!config?.activeVisits?.identifiers) {
+      headers.push({
+        id: headersIndex++,
+        header: t('idNumber', 'ID Number'),
+        key: 'idNumber',
+      });
+    }
+
+    config?.activeVisits?.attributes?.forEach((attribute) => {
+      headers.push({
+        id: headersIndex++,
+        header: t(attribute?.header?.key, attribute?.header?.default),
+        key: attribute?.header?.key,
+      });
+    });
+
+    // Add headers for obs concepts
+    obsConcepts?.forEach((concept) => {
+      headers.push({
+        id: headersIndex++,
+        header: concept.display,
+        key: `obs-${concept.uuid}`,
+      });
+    });
+
+    headers.push(
+      {
+        id: headersIndex++,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: headersIndex++,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: headersIndex++,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: headersIndex++,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+    );
+
+    return headers;
+  }, [t, config, obsConcepts]);
+}
+
 export const getOriginFromPathName = (pathname = '') => {
   const from = pathname.split('/');
   return last(from);

package/src/active-visits-widget/active-visits.scss

@@ -24,6 +24,14 @@
 }
 
 .activeVisitsTable {
+  width: 100%;
+
+  th,
+  td {
+    white-space: nowrap;
+    text-align: left;
+  }
+
   tbody tr[data-parent-row] {
     // Don't show a bottom border on the last row so we don't end up with a double border from the activeVisitContainer
     &:nth-last-of-type(2) > td {
@@ -154,12 +162,14 @@ html[dir='rtl'] {
     .activeVisitsDetailHeaderContainer {
       padding: layout.$spacing-04 layout.$spacing-05 layout.$spacing-04 0;
     }
+
     .desktopHeading,
     .tabletHeading {
       h4 {
         text-align: right;
       }
     }
+
     div[role='search'] {
       & :first-child {
         svg {
@@ -167,21 +177,29 @@ html[dir='rtl'] {
           right: layout.$spacing-03;
         }
       }
+
       & :last-child {
         right: unset;
         left: 0;
       }
     }
+
     .tableContainer {
+      overflow-x: auto;
+      text-wrap: nowrap;
+
       th > div {
         text-align: right;
       }
+
       td {
         text-align: right;
+
         .serviceColor {
           margin-right: 0;
           margin-left: layout.$spacing-03;
         }
+
         button {
           text-align: right;
         }

package/src/active-visits-widget/active-visits.test.tsx

@@ -1,41 +1,72 @@
 import React from 'react';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
-import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
-import { mockPatient, mockSession } from '__mocks__';
-import { configSchema, type SectionDefinition } from '../config-schema';
-import { useActiveVisits } from './active-visits.resource';
+import { getDefaultsFromConfigSchema, type OpenmrsResource, useConfig } from '@openmrs/esm-framework';
+import { mockSession } from '__mocks__';
+import { type ActiveVisitsConfigSchema, configSchema } from '../config-schema';
+import { useActiveVisits, useObsConcepts } from './active-visits.resource';
 import ActiveVisitsTable from './active-visits.component';
+import { type ActiveVisit, type Observation } from '../types';
 
 const mockUseActiveVisits = jest.mocked(useActiveVisits);
-const mockUseConfig = jest.mocked(useConfig<SectionDefinition>);
+const mockUseObsConcepts = jest.mocked(useObsConcepts);
+const mockIsDesktop = jest.mocked(useObsConcepts);
+const mockUseConfig = jest.mocked(useConfig<ActiveVisitsConfigSchema>);
 
 jest.mock('./active-visits.resource', () => ({
   ...jest.requireActual('./active-visits.resource'),
   useActiveVisits: jest.fn(),
+  useObsConcepts: jest.fn(),
 }));
 
+const mockObsConcepts: Array<OpenmrsResource> = [
+  { uuid: '160225AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Sickle cell screening test' },
+  { uuid: '5484AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Nutritional support' },
+];
+
+const mockConfig: ActiveVisitsConfigSchema = {
+  activeVisits: {
+    ...getDefaultsFromConfigSchema(configSchema).activeVisits,
+    obs: ['160225AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', '5484AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'],
+  },
+};
+
+const mockActiveVisits: ActiveVisit[] = [
+  {
+    age: '20',
+    gender: 'male',
+    id: '1',
+    idNumber: '000001A',
+    location: mockSession.data.sessionLocation.uuid,
+    name: 'John Doe',
+    patientUuid: 'uuid1',
+    visitStartTime: '',
+    visitType: 'Checkup',
+    visitUuid: 'visit-uuid-1',
+  },
+  {
+    age: '25',
+    gender: 'female',
+    id: '2',
+    idNumber: '000001B',
+    location: mockSession.data.sessionLocation.uuid,
+    name: 'Some One',
+    patientUuid: 'uuid2',
+    visitStartTime: '',
+    visitType: 'Checkup',
+    visitUuid: 'visit-uuid-2',
+  },
+];
+
 describe('ActiveVisitsTable', () => {
   beforeEach(() => {
-    mockUseConfig.mockReturnValue({
-      ...getDefaultsFromConfigSchema(configSchema),
+    mockUseConfig.mockReturnValue(mockConfig);
+    mockUseObsConcepts.mockReturnValue({
+      obsConcepts: mockObsConcepts,
+      isLoadingObsConcepts: false,
     });
-
     mockUseActiveVisits.mockReturnValue({
-      activeVisits: [
-        {
-          age: '20',
-          gender: 'male',
-          id: '1',
-          idNumber: mockPatient.uuid,
-          location: mockSession.data.sessionLocation.uuid,
-          name: 'John Doe',
-          patientUuid: 'uuid1',
-          visitStartTime: '',
-          visitType: 'Checkup',
-          visitUuid: 'visit-uuid-1',
-        },
-      ],
+      activeVisits: mockActiveVisits,
       isLoading: false,
       isValidating: false,
       error: undefined,
@@ -43,51 +74,82 @@ describe('ActiveVisitsTable', () => {
     });
   });
 
-  it('renders data table with active visits', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders data table with standard and observation columns', () => {
+    mockUseActiveVisits.mockReturnValue({
+      activeVisits: mockActiveVisits.map((visit) => ({
+        ...visit,
+        observations: {
+          '160225AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': [
+            {
+              value: { uuid: '1065AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Patient is sick' },
+              uuid: 'obs-uuid-1',
+            } as unknown as Observation,
+          ],
+          '5484AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': [
+            {
+              value: 'Not done',
+              uuid: 'obs-uuid-2',
+            } as unknown as Observation,
+          ],
+        },
+      })),
+      isLoading: false,
+      isValidating: false,
+      error: undefined,
+      totalResults: 0,
+    });
+
     render(<ActiveVisitsTable />);
 
-    expect(screen.getByText('Visit Time')).toBeInTheDocument();
-    expect(screen.getByText('ID Number')).toBeInTheDocument();
-    const expectedColumnHeaders = [/Visit Time/, /ID Number/, /Name/, /Gender/, /Age/, /Visit Type/];
-    expectedColumnHeaders.forEach((header) => {
-      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    const standardColumnHeaders = [/Visit Time/, /ID Number/, /Name/, /Gender/, /Age/, /Visit Type/];
+    standardColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: header })).toBeInTheDocument();
     });
 
-    const patientNameLink = screen.getByText('John Doe');
-    expect(patientNameLink).toBeInTheDocument();
-    expect(patientNameLink.tagName).toBe('A');
+    expect(screen.getByRole('columnheader', { name: /Sickle cell screening test/ })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: /Nutritional support/ })).toBeInTheDocument();
+  });
+
+  it('displays observation values correctly', () => {
+    mockUseActiveVisits.mockReturnValue({
+      activeVisits: mockActiveVisits.map((visit) => ({
+        ...visit,
+        observations: {
+          '160225AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': [
+            {
+              value: { uuid: '1065AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA', display: 'Patient is sick' },
+              uuid: 'obs-uuid-1',
+            } as unknown as Observation,
+          ],
+          '5484AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA': [
+            {
+              value: 'Not done',
+              uuid: 'obs-uuid-2',
+            } as unknown as Observation,
+          ],
+        },
+      })),
+      isLoading: false,
+      isValidating: false,
+      error: undefined,
+      totalResults: 0,
+    });
+
+    render(<ActiveVisitsTable />);
+
+    expect(screen.getAllByRole('cell', { name: /Patient is sick/ }).length).toBe(2);
+    expect(screen.getAllByRole('cell', { name: /Not done/ }).length).toBe(2);
   });
 
   it('filters active visits based on search input', async () => {
     const user = userEvent.setup();
 
     mockUseActiveVisits.mockReturnValue({
-      activeVisits: [
-        {
-          age: '20',
-          gender: 'male',
-          id: '1',
-          idNumber: '000001A',
-          location: mockSession.data.sessionLocation.uuid,
-          name: 'John Doe',
-          patientUuid: 'uuid1',
-          visitStartTime: '',
-          visitType: 'Checkup',
-          visitUuid: 'visit-uuid-1',
-        },
-        {
-          age: '25',
-          gender: 'female',
-          id: '2',
-          idNumber: '000001B',
-          location: mockSession.data.sessionLocation.uuid,
-          name: 'Some One',
-          patientUuid: 'uuid2',
-          visitStartTime: '',
-          visitType: 'Checkup',
-          visitUuid: 'visit-uuid-2',
-        },
-      ],
+      activeVisits: mockActiveVisits,
       isLoading: false,
       isValidating: false,
       error: undefined,
@@ -151,32 +213,7 @@ describe('ActiveVisitsTable', () => {
 
   it('should display the pagination when pagination is true', () => {
     mockUseActiveVisits.mockReturnValue({
-      activeVisits: [
-        {
-          age: '20',
-          gender: 'male',
-          id: '1',
-          idNumber: '000001A',
-          location: mockSession.data.sessionLocation.uuid,
-          name: 'John Doe',
-          patientUuid: 'uuid1',
-          visitStartTime: '',
-          visitType: 'Checkup',
-          visitUuid: 'visit-uuid-1',
-        },
-        {
-          age: '25',
-          gender: 'female',
-          id: '2',
-          idNumber: '000001B',
-          location: mockSession.data.sessionLocation.uuid,
-          name: 'Some One',
-          patientUuid: 'uuid2',
-          visitStartTime: '',
-          visitType: 'Checkup',
-          visitUuid: 'visit-uuid-2',
-        },
-      ],
+      activeVisits: mockActiveVisits,
       isLoading: false,
       isValidating: false,
       error: undefined,

package/src/config-schema.ts

@@ -1,10 +1,11 @@
 import { Type } from '@openmrs/esm-framework';
 
-export interface SectionDefinition {
+export interface ActiveVisitsConfigSchema {
   activeVisits: {
     pageSize: Number;
     pageSizes: Array<Number>;
     identifiers: Array<IdentifiersDefinition>;
+    obs: Array<string>;
   };
 }
 
@@ -53,5 +54,14 @@ export const configSchema = {
       _description: 'Customizable page sizes that user can choose',
       _default: [10, 20, 50],
     },
+    obs: {
+      _type: Type.Array,
+      _description: 'Array of observation concept UUIDs to be displayed on the active visits table.',
+      _elements: {
+        _type: Type.UUID,
+        _description: 'UUID of an observation concept.',
+      },
+      _default: [],
+    },
   },
 };