@kenyaemr/esm-active-visits-app 7.0.2-pre.65

package/dist/routes.json

@@ -0,0 +1 @@
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"webservices.rest":"^2.2.0"},"extensions":[{"name":"active-visits-widget","slot":"homepage-widgets-slot","component":"activeVisits","order":0},{"name":"visit-summary-widget","slot":"visit-summary-slot","component":"visitDetail"}],"pages":[],"version":"7.0.2-pre.65"}

package/jest.config.js

@@ -0,0 +1,3 @@
+const rootConfig = require('../../jest.config.js');
+
+module.exports = rootConfig;

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@kenyaemr/esm-active-visits-app",
+  "version": "7.0.2-pre.65",
+  "description": "Active visits widget microfrontend for the OpenMRS SPA",
+  "browser": "dist/kenyaemr-esm-active-visits-app.js",
+  "main": "src/index.ts",
+  "source": true,
+  "license": "MPL-2.0",
+  "homepage": "https://github.com/openmrs/openmrs-esm-patient-management#readme",
+  "scripts": {
+    "start": "openmrs develop",
+    "serve": "webpack serve --mode=development",
+    "debug": "npm run serve",
+    "build": "webpack --mode production",
+    "analyze": "webpack --mode=production --env.analyze=true",
+    "lint": "cross-env eslint src --ext ts,tsx",
+    "test": "cross-env TZ=UTC jest --config jest.config.js --verbose false --passWithNoTests --color",
+    "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/**/*.workspace.tsx' 'src/index.ts' --config ../../tools/i18next-parser.config.js"
+  },
+  "browserslist": [
+    "extends browserslist-config-openmrs"
+  ],
+  "keywords": [
+    "openmrs"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/openmrs/openmrs-esm-patient-management.git"
+  },
+  "bugs": {
+    "url": "https://github.com/openmrs/openmrs-esm-patient-management/issues"
+  },
+  "dependencies": {
+    "@carbon/react": "~1.37.0",
+    "lodash-es": "^4.17.15"
+  },
+  "peerDependencies": {
+    "@openmrs/esm-framework": "5.x",
+    "dayjs": "1.x",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-i18next": "11.x",
+    "swr": "2.x"
+  },
+  "devDependencies": {
+    "webpack": "^5.74.0"
+  },
+  "stableVersion": "7.0.1"
+}

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

@@ -0,0 +1,311 @@
+import React, { useMemo, useState, useCallback } from 'react';
+import {
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Layer,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import {
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  usePagination,
+  ExtensionSlot,
+  ErrorState,
+  ConfigurableLink,
+} from '@openmrs/esm-framework';
+import { EmptyDataIllustration } from './empty-data-illustration.component';
+import { useActiveVisits } 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;
+}
+
+const ActiveVisitsTable = () => {
+  const { t } = useTranslation();
+  const config = useConfig();
+  const layout = useLayoutType();
+  const pageSizes = config?.activeVisits?.pageSizes ?? [10, 20, 30, 40, 50];
+  const [pageSize, setPageSize] = useState(config?.activeVisits?.pageSize ?? 10);
+  const { activeVisits, isLoading, isValidating, error } = useActiveVisits();
+  const [searchString, setSearchString] = useState('');
+  const headerData = useMemo(() => generateTableHeaders(t, config), [config, t]);
+
+  const searchResults = useMemo(() => {
+    if (activeVisits !== undefined && activeVisits.length > 0) {
+      if (searchString && searchString.trim() !== '') {
+        const search = searchString.toLowerCase();
+        return activeVisits?.filter((activeVisitRow) =>
+          Object.entries(activeVisitRow).some(([header, value]) => {
+            if (header === 'patientUuid') {
+              return false;
+            }
+            return `${value}`.toLowerCase().includes(search);
+          }),
+        );
+      }
+    }
+
+    return activeVisits;
+  }, [searchString, activeVisits]);
+
+  const { paginated, goTo, results, currentPage } = usePagination(searchResults, pageSize);
+
+  const handleSearch = useCallback(
+    (e) => {
+      goTo(1);
+      setSearchString(e.target.value);
+    },
+    [goTo, setSearchString],
+  );
+
+  if (isLoading) {
+    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>
+        </div>
+        <Search
+          labelText=""
+          placeholder={t('filterTable', 'Filter table')}
+          onChange={handleSearch}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+          disabled
+        />
+        <DataTableSkeleton
+          rowCount={pageSize}
+          showHeader={false}
+          showToolbar={false}
+          zebra
+          columnCount={headerData?.length}
+          size={isDesktop(layout) ? 'sm' : 'lg'}
+        />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <Layer>
+          <ErrorState error={error} headerTitle={t('activeVisits', 'Active Visits')} />
+        </Layer>
+      </div>
+    );
+  }
+
+  if (!activeVisits.length) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <Layer>
+          <Tile className={styles.tile}>
+            <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+              <h4>{t('activeVisits', 'Active Visits')}</h4>
+            </div>
+            <EmptyDataIllustration />
+            <p className={styles.content}>
+              {t('noActiveVisitsForLocation', 'There are no active visits to display for this location.')}
+            </p>
+          </Tile>
+        </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>
+        </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);
+
+                    if (!currentVisit) {
+                      return null;
+                    }
+
+                    const patientChartUrl = '${openmrsSpaBase}/patient/${patientUuid}/chart/Patient%20Summary';
+
+                    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>
+        )}
+        {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;

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

@@ -0,0 +1,148 @@
+import { useEffect } 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,
+  parseDate,
+  useConfig,
+  restBaseUrl,
+} from '@openmrs/esm-framework';
+dayjs.extend(isToday);
+
+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;
+}
+
+export function useActiveVisits() {
+  const session = useSession();
+  const config = useConfig();
+  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)';
+
+  const getUrl = (pageIndex, previousPageData: FetchResponse<VisitResponse>) => {
+    if (pageIndex && !previousPageData?.data?.links?.some((link) => link.rel === 'next')) {
+      return null;
+    }
+
+    let url = `${restBaseUrl}/visit?v=${customRepresentation}&`;
+    let urlSearchParams = new URLSearchParams();
+
+    urlSearchParams.append('includeInactive', 'false');
+    urlSearchParams.append('totalCount', 'true');
+    urlSearchParams.append('location', `${sessionLocation}`);
+
+    if (pageIndex) {
+      urlSearchParams.append('startIndex', `${pageIndex * 50}`);
+    }
+
+    return url + urlSearchParams.toString();
+  };
+
+  const {
+    data,
+    error,
+    isLoading,
+    isValidating,
+    size: pageNumber,
+    setSize,
+  } = useSWRInfinite<FetchResponse<VisitResponse>, Error>(sessionLocation ? getUrl : null, openmrsFetch);
+
+  useEffect(() => {
+    if (data && data?.[pageNumber - 1]?.data?.links?.some((link) => link.rel === 'next')) {
+      setSize((currentSize) => currentSize + 1);
+    }
+  }, [data, pageNumber]);
+
+  const mapVisitProperties = (visit: Visit): ActiveVisit => {
+    // create base object
+    const activeVisits: ActiveVisit = {
+      age: visit?.patient?.person?.age,
+      id: visit.uuid,
+      idNumber: null,
+      gender: visit?.patient?.person?.gender,
+      location: visit?.location?.uuid,
+      name: visit?.patient?.person?.display,
+      patientUuid: visit?.patient?.uuid,
+      visitStartTime: formatDatetime(parseDate(visit?.startDatetime)),
+      visitType: visit?.visitType?.display,
+      visitUuid: visit.uuid,
+    };
+
+    // in case no configuration is given the previous behavior remains the same
+    if (!config?.activeVisits?.identifiers) {
+      activeVisits.idNumber = visit?.patient?.identifiers[0]?.identifier ?? '--';
+    } else {
+      // map identifiers on config
+      config?.activeVisits?.identifiers?.map((configIdentifier) => {
+        // check if in the current visit the patient has in his identifiers the current identifierType name
+        const visitIdentifier = visit?.patient?.identifiers.find(
+          (visitIdentifier) => visitIdentifier?.identifierType?.name === configIdentifier?.identifierName,
+        );
+
+        // add the new identifier or rewrite existing one to activeVisit object
+        // the parameter will corresponds to the name of the key value of the configuration
+        // and the respective value is the visit identifier
+        // If there isn't a identifier we display this default text '--'
+        activeVisits[configIdentifier.header?.key] = visitIdentifier?.identifier ?? '--';
+      });
+    }
+
+    // map attributes on config
+    config?.activeVisits?.attributes?.map(({ display, header }) => {
+      // check if in the current visit the person has in his attributes the current display
+      const personAttributes = visit?.patient?.person?.attributes.find(
+        (personAttributes) => personAttributes?.attributeType?.display === display,
+      );
+
+      // add the new attribute or rewrite existing one to activeVisit object
+      // the parameter will correspond to the name of the key value of the configuration
+      // and the respective value is the persons value
+      // If there isn't a attribute we display this default text '--'
+      activeVisits[header?.key] = personAttributes?.value ?? '--';
+    });
+
+    return activeVisits;
+  };
+
+  const formattedActiveVisits: Array<ActiveVisit> = data
+    ? [].concat(...data?.map((res) => res?.data?.results?.map(mapVisitProperties)))
+    : [];
+
+  return {
+    activeVisits: formattedActiveVisits,
+    error,
+    isLoading,
+    isValidating,
+    totalResults: data?.[0]?.data?.totalCount ?? 0,
+  };
+}
+
+export const getOriginFromPathName = (pathname = '') => {
+  const from = pathname.split('/');
+  return last(from);
+};