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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenyaemr/esm-active-visits-app",
-  "version": "8.1.1-pre.129",
+  "version": "8.1.2-pre.152",
   "description": "Active visits widget microfrontend for the OpenMRS SPA",
   "browser": "dist/kenyaemr-esm-active-visits-app.js",
   "main": "src/index.ts",
@@ -18,7 +18,7 @@
     "test:watch": "cross-env TZ=UTC jest --watch --config jest.config.js --color",
     "coverage": "yarn test --coverage",
     "typescript": "tsc",
-    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+    "extract-translations": "i18next 'src/**/*.component.tsx' 'src/**/*.resource.tsx' 'src/**/*.extension.tsx' 'src/**/*modal.tsx' 'src/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
   },
   "browserslist": [
     "extends browserslist-config-openmrs"
@@ -37,11 +37,11 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
   },
   "dependencies": {
-    "@carbon/react": "~1.37.0",
+    "@carbon/react": "^1.71.0",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "5.x",
+    "@openmrs/esm-framework": "6.x",
     "dayjs": "1.x",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
@@ -51,5 +51,5 @@
   "devDependencies": {
     "webpack": "^5.74.0"
   },
-  "stableVersion": "8.1.0"
+  "stableVersion": "8.0.2"
 }

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   DataTable,
   DataTableSkeleton,
@@ -20,88 +20,53 @@ import {
 } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import {
-  useLayoutType,
+  ConfigurableLink,
+  ErrorState,
+  ExtensionSlot,
   isDesktop,
   useConfig,
+  useLayoutType,
   usePagination,
-  ExtensionSlot,
-  ErrorState,
-  ConfigurableLink,
 } from '@openmrs/esm-framework';
 import { EmptyDataIllustration } from './empty-data-illustration.component';
-import { useActiveVisits } from './active-visits.resource';
+import { useActiveVisits, useActiveVisitsSorting, useObsConcepts, useTableHeaders } from './active-visits.resource';
 import styles from './active-visits.scss';
-
-function generateTableHeaders(t, config) {
-  let headersIndex = 0;
-
-  const headers = [
-    {
-      id: headersIndex++,
-      header: t('visitStartTime', 'Visit Time'),
-      key: 'visitStartTime',
-    },
-  ];
-
-  config?.activeVisits?.identifiers?.map((identifier) => {
-    headers.push({
-      id: headersIndex++,
-      header: t(identifier?.header?.key, identifier?.header?.default),
-      key: identifier?.header?.key,
-    });
-  });
-
-  if (!config?.activeVisit?.identifiers) {
-    headers.push({
-      id: headersIndex++,
-      header: t('idNumber', 'ID Number'),
-      key: 'idNumber',
-    });
-  }
-
-  config?.activeVisits?.attributes?.map((attribute) => {
-    headers.push({
-      id: headersIndex++,
-      header: t(attribute?.header?.key, attribute?.header?.default),
-      key: attribute?.header?.key,
-    });
-  });
-
-  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;
-}
+import { type ActiveVisitsConfigSchema } from '../config-schema';
+import { type ActiveVisit } from '../types';
 
 const ActiveVisitsTable = () => {
   const { t } = useTranslation();
-  const config = useConfig();
+  const config = useConfig<ActiveVisitsConfigSchema>();
   const layout = useLayoutType();
   const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 30, 40, 50];
   const [pageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
+  const { obsConcepts, isLoadingObsConcepts } = useObsConcepts(config.activeVisits.obs);
   const { activeVisits, isLoading, isValidating, error } = useActiveVisits();
   const [searchString, setSearchString] = useState('');
-  const headerData = useMemo(() => generateTableHeaders(t, config), [config, t]);
+  const headerData = useTableHeaders(obsConcepts);
+
+  const transformVisitForDisplay = useCallback(
+    (visit: ActiveVisit) => {
+      const displayData = { ...visit };
+
+      // Add observation values to the display data
+      obsConcepts?.forEach((concept) => {
+        const obsValues = visit?.observations?.[concept.uuid] ?? [];
+        const latestObs = obsValues[0];
+
+        if (latestObs) {
+          // Handle both string and object values
+          displayData[`obs-${concept.uuid}`] =
+            typeof latestObs.value === 'object' ? latestObs.value.display : latestObs.value;
+        } else {
+          displayData[`obs-${concept.uuid}`] = '--';
+        }
+      });
+
+      return displayData;
+    },
+    [obsConcepts],
+  );
 
   const searchResults = useMemo(() => {
     if (activeVisits !== undefined && activeVisits.length > 0) {
@@ -118,10 +83,11 @@ const ActiveVisitsTable = () => {
       }
     }
 
-    return activeVisits;
-  }, [searchString, activeVisits]);
+    return activeVisits.map(transformVisitForDisplay);
+  }, [searchString, activeVisits, transformVisitForDisplay]);
 
-  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+  const { sortedRows, sortRow } = useActiveVisitsSorting(searchResults);
+  const { paginated, goTo, results, currentPage } = usePagination(sortedRows, pageSize as number);
 
   const handleSearch = useCallback(
     (e) => {
@@ -131,7 +97,7 @@ const ActiveVisitsTable = () => {
     [goTo, setSearchString],
   );
 
-  if (isLoading) {
+  if (isLoading || isLoadingObsConcepts) {
     return (
       <div className={styles.activeVisitsContainer}>
         <div className={styles.activeVisitsDetailHeaderContainer}>
@@ -187,125 +153,128 @@ const ActiveVisitsTable = () => {
         </Layer>
       </div>
     );
-  } else {
-    return (
-      <div className={styles.activeVisitsContainer}>
-        <div className={styles.activeVisitsDetailHeaderContainer}>
-          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
-            <h4>{t('activeVisits', 'Active Visits')}</h4>
-          </div>
-          <div className={styles.backgroundDataFetchingIndicator}>
-            <span>{isValidating ? <InlineLoading /> : null}</span>
-          </div>
+  }
+
+  return (
+    <div className={styles.activeVisitsContainer}>
+      <div className={styles.activeVisitsDetailHeaderContainer}>
+        <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{t('activeVisits', 'Active Visits')}</h4>
         </div>
-        <Search
-          labelText=""
-          placeholder={t('filterTable', 'Filter table')}
-          onChange={handleSearch}
-          size={isDesktop(layout) ? 'sm' : 'lg'}
-        />
-        <DataTable
-          rows={results}
-          headers={headerData}
-          size={isDesktop(layout) ? 'sm' : 'lg'}
-          useZebraStyles={activeVisits?.length > 1 ? true : false}>
-          {({ rows, headers, getHeaderProps, getTableProps, getRowProps, getExpandHeaderProps }) => (
-            <TableContainer className={styles.tableContainer}>
-              <Table className={styles.activeVisitsTable} {...getTableProps()}>
-                <TableHead>
-                  <TableRow>
-                    <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
-                    {headers.map((header) => (
-                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
-                    ))}
-                  </TableRow>
-                </TableHead>
-                <TableBody>
-                  {rows.map((row, index) => {
-                    const currentVisit = activeVisits.find((visit) => visit.id === row.id);
+        <div className={styles.backgroundDataFetchingIndicator}>
+          <span>{isValidating ? <InlineLoading /> : null}</span>
+        </div>
+      </div>
+      <Search
+        labelText=""
+        placeholder={t('filterTable', 'Filter table')}
+        onChange={handleSearch}
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+      />
+      <DataTable
+        isSortable
+        useStaticWidth
+        rows={results}
+        headers={headerData}
+        sortRow={sortRow}
+        size={isDesktop(layout) ? 'sm' : 'lg'}
+        useZebraStyles={activeVisits?.length > 1}>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, getExpandHeaderProps }) => (
+          <TableContainer className={styles.tableContainer}>
+            <Table className={styles.activeVisitsTable} {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  <TableExpandHeader enableToggle {...getExpandHeaderProps()} />
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  const currentVisit = activeVisits.find((visit) => visit.id === row.id);
 
-                    if (!currentVisit) {
-                      return null;
-                    }
+                  if (!currentVisit) {
+                    return null;
+                  }
 
-                    const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/Patient%20Summary';
+                  const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart';
 
-                    return (
-                      <React.Fragment key={`active-visit-row-${index}`}>
-                        <TableExpandRow
-                          {...getRowProps({ row })}
-                          data-testid={`activeVisitRow${currentVisit.patientUuid || 'unknown'}`}>
-                          {row.cells.map((cell) => (
-                            <TableCell key={`active-visit-row-${index}-cell-${cell.id}`} data-testid={cell.id}>
-                              {cell.info.header === 'name' && currentVisit.patientUuid ? (
-                                <ConfigurableLink
-                                  to={patientChartUrl}
-                                  templateParams={{ patientUuid: currentVisit.patientUuid }}>
-                                  {cell.value}
-                                </ConfigurableLink>
-                              ) : (
-                                cell.value
-                              )}
-                            </TableCell>
-                          ))}
-                        </TableExpandRow>
-                        {row.isExpanded ? (
-                          <TableRow className={styles.expandedActiveVisitRow}>
-                            <th colSpan={headers.length + 2}>
-                              <ExtensionSlot
-                                className={styles.visitSummaryContainer}
-                                name="visit-summary-slot"
-                                state={{
-                                  patientUuid: currentVisit.patientUuid,
-                                  visitUuid: currentVisit.visitUuid,
-                                }}
-                              />
-                            </th>
-                          </TableRow>
-                        ) : (
-                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
-                        )}
-                      </React.Fragment>
-                    );
-                  })}
-                </TableBody>
-              </Table>
-            </TableContainer>
-          )}
-        </DataTable>
-        {searchResults?.length === 0 && (
-          <div className={styles.filterEmptyState}>
-            <Layer level={0}>
-              <Tile className={styles.filterEmptyStateTile}>
-                <p className={styles.filterEmptyStateContent}>{t('noVisitsToDisplay', 'No visits to display')}</p>
-                <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
-              </Tile>
-            </Layer>
-          </div>
+                  return (
+                    <React.Fragment key={`active-visit-row-${index}`}>
+                      <TableExpandRow
+                        {...getRowProps({ row })}
+                        data-testid={`activeVisitRow${currentVisit.patientUuid || 'unknown'}`}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={`active-visit-row-${index}-cell-${cell.id}`} data-testid={cell.id}>
+                            {cell.info.header === 'name' && currentVisit.patientUuid ? (
+                              <ConfigurableLink
+                                to={patientChartUrl}
+                                templateParams={{ patientUuid: currentVisit.patientUuid }}>
+                                {cell.value}
+                              </ConfigurableLink>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
+                        ))}
+                      </TableExpandRow>
+                      {row.isExpanded ? (
+                        <TableRow className={styles.expandedActiveVisitRow}>
+                          <th colSpan={headers.length + 2}>
+                            <ExtensionSlot
+                              className={styles.visitSummaryContainer}
+                              name="visit-summary-slot"
+                              state={{
+                                patientUuid: currentVisit.patientUuid,
+                                visitUuid: currentVisit.visitUuid,
+                              }}
+                            />
+                          </th>
+                        </TableRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
         )}
-        {paginated && (
-          <Pagination
-            forwardText="Next page"
-            backwardText="Previous page"
-            page={currentPage}
-            pageSize={pageSize}
-            pageSizes={pageSizes}
-            totalItems={searchResults?.length}
-            className={styles.pagination}
-            size={isDesktop(layout) ? 'sm' : 'lg'}
-            onChange={({ pageSize: newPageSize, page: newPage }) => {
-              if (newPageSize !== pageSize) {
-                setPageSize(newPageSize);
-              }
-              if (newPage !== currentPage) {
-                goTo(newPage);
-              }
-            }}
-          />
-        )}
-      </div>
-    );
-  }
+      </DataTable>
+      {searchResults?.length === 0 && (
+        <div className={styles.filterEmptyState}>
+          <Layer level={0}>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>{t('noVisitsToDisplay', 'No visits to display')}</p>
+              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+            </Tile>
+          </Layer>
+        </div>
+      )}
+      {paginated && (
+        <Pagination
+          forwardText="Next page"
+          backwardText="Previous page"
+          page={currentPage}
+          pageSize={pageSize}
+          pageSizes={pageSizes}
+          totalItems={searchResults?.length}
+          className={styles.pagination}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+          onChange={({ pageSize: newPageSize, page: newPage }) => {
+            if (newPageSize !== pageSize) {
+              setPageSize(newPageSize);
+            }
+            if (newPage !== currentPage) {
+              goTo(newPage);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
 };
 
 export default ActiveVisitsTable;