@pih/esm-audit-app 2.1.1-pre.144 → 2.1.1-pre.151

package/src/audit/provider-encounters.component.tsx

@@ -0,0 +1,160 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTableSkeleton,
+  InlineNotification,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tag,
+} from '@carbon/react';
+import { ArrowLeftIcon, ErrorState, useConfig } from '@openmrs/esm-framework';
+import { type Config } from '../config-schema';
+import { formatAuditDatetime, formatUserAndDate } from './audit-format';
+import { useAuditProvider, useProviderEncounters, useUsedEncounterTypes } from './audit.resource';
+import { type EncounterFilters, hasActiveFilters } from './encounter-filters';
+import EncounterFiltersBar from './encounter-filters.component';
+import styles from './audit.scss';
+
+interface ProviderEncountersProps {
+  providerUuid: string;
+  onSelectEncounter(encounterUuid: string): void;
+  onBackToSearch(): void;
+}
+
+/**
+ * The encounters a provider is recorded on, as a way into each one's audit trail.
+ *
+ * This is "was a provider on", which is not the same as "entered or changed" — the Users tab
+ * answers that. The list names who entered each encounter so the distinction stays visible.
+ */
+export default function ProviderEncounters({
+  providerUuid,
+  onSelectEncounter,
+  onBackToSearch,
+}: ProviderEncountersProps) {
+  const { t } = useTranslation();
+  const config = useConfig<Config>();
+  const [pageSize, setPageSize] = useState(config.encountersPageSize ?? 10);
+  const pageSizes = useMemo(() => Array.from(new Set([pageSize, 10, 20, 50])).sort((a, b) => a - b), [pageSize]);
+
+  const [filters, setFilters] = useState<EncounterFilters>({});
+
+  const { provider, error: providerError, isLoading: isLoadingProvider } = useAuditProvider(providerUuid);
+  const { encounterTypes, isLoading: isLoadingTypes } = useUsedEncounterTypes();
+  const { encounters, totalCount, currentPage, goTo, error, isLoading } = useProviderEncounters(
+    providerUuid,
+    pageSize,
+    filters,
+  );
+
+  return (
+    <div className={styles.section}>
+      <Button className={styles.backButton} kind="ghost" onClick={onBackToSearch} renderIcon={ArrowLeftIcon} size="sm">
+        {t('backToProviderSearch', 'Back to provider search')}
+      </Button>
+      <div className={styles.contextHeader}>
+        <span className={styles.contextTitle}>{provider?.person?.display ?? provider?.display ?? ''}</span>
+        <span className={styles.contextSubtitle}>{provider?.identifier}</span>
+      </div>
+
+      {/*
+        Both filters narrow on the server, so the page count and totals stay right — which is why
+        the encounter types come from those in use system-wide rather than from what is on screen.
+      */}
+      <EncounterFiltersBar
+        encounterTypes={encounterTypes}
+        filters={filters}
+        isLoadingTypes={isLoadingTypes}
+        onChange={setFilters}
+      />
+
+      <InlineNotification
+        className={styles.inlineNotification}
+        hideCloseButton
+        kind="info"
+        lowContrast
+        subtitle={t(
+          'providerEncountersScope',
+          'These are the encounters this provider is recorded on, which is not the same as the ones they entered or changed — the last column names who did that, and the Users tab searches by it.',
+        )}
+        title={t('recordedAsProvider', 'Recorded as provider')}
+      />
+
+      {providerError || error ? (
+        <ErrorState error={providerError ?? error} headerTitle={t('encounters', 'Encounters')} />
+      ) : isLoadingProvider || isLoading ? (
+        <DataTableSkeleton columnCount={7} compact role="progressbar" showHeader={false} showToolbar={false} />
+      ) : encounters.length === 0 ? (
+        <p className={styles.emptyState}>
+          {hasActiveFilters(filters)
+            ? t('noProviderEncountersMatch', 'No encounters for this provider match these filters.')
+            : t('noProviderEncounters', 'This provider is not recorded on any encounters.')}
+        </p>
+      ) : (
+        <>
+          <TableContainer className={styles.tableContainer}>
+            <Table size="sm" useZebraStyles>
+              <TableHead>
+                <TableRow>
+                  <TableHeader>{t('encounterDate', 'Encounter date')}</TableHeader>
+                  <TableHeader>{t('patient', 'Patient')}</TableHeader>
+                  <TableHeader>{t('encounterType', 'Encounter type')}</TableHeader>
+                  <TableHeader>{t('form', 'Form')}</TableHeader>
+                  <TableHeader>{t('location', 'Location')}</TableHeader>
+                  <TableHeader>{t('status', 'Status')}</TableHeader>
+                  <TableHeader>{t('createdBy', 'Created by')}</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {encounters.map((encounter) => (
+                  <TableRow
+                    className={styles.clickableRow}
+                    key={encounter.uuid}
+                    onClick={() => onSelectEncounter(encounter.uuid)}>
+                    <TableCell>
+                      <button
+                        className={styles.linkButton}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onSelectEncounter(encounter.uuid);
+                        }}
+                        type="button">
+                        {formatAuditDatetime(encounter.encounterDatetime)}
+                      </button>
+                    </TableCell>
+                    <TableCell>{encounter.patient?.display}</TableCell>
+                    <TableCell>{encounter.encounterType?.display}</TableCell>
+                    <TableCell>{encounter.form?.display}</TableCell>
+                    <TableCell>{encounter.location?.display}</TableCell>
+                    <TableCell>{encounter.voided ? <Tag type="red">{t('deleted', 'Deleted')}</Tag> : null}</TableCell>
+                    <TableCell>
+                      {formatUserAndDate(encounter.auditInfo?.creator, encounter.auditInfo?.dateCreated)}
+                    </TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <Pagination
+            onChange={({ page: nextPage, pageSize: nextPageSize }) => {
+              setPageSize(nextPageSize);
+              goTo(nextPage);
+            }}
+            page={currentPage}
+            pageSize={pageSize}
+            pageSizes={pageSizes}
+            size="sm"
+            totalItems={totalCount}
+          />
+        </>
+      )}
+    </div>
+  );
+}

package/src/audit/provider-search.component.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SWRConfig } from 'swr';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import ProviderSearch from './provider-search.component';
+
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+
+const mockProviders = [
+  {
+    uuid: 'prov-1',
+    display: 'MCPRPG - Louidor Jean paul',
+    identifier: 'MCPRPG',
+    person: { uuid: 'person-1', display: 'Louidor Jean paul', gender: 'M' },
+  },
+];
+
+function renderProviderSearch() {
+  const onSelectProvider = jest.fn();
+  render(
+    <SWRConfig value={{ dedupingInterval: 0, provider: () => new Map() }}>
+      <ProviderSearch onSelectProvider={onSelectProvider} />
+    </SWRConfig>,
+  );
+  return onSelectProvider;
+}
+
+describe('<ProviderSearch />', () => {
+  beforeEach(() => {
+    mockOpenmrsFetch.mockResolvedValue({
+      data: { results: mockProviders, totalCount: 1 },
+    } as unknown as ReturnType<typeof openmrsFetch>);
+  });
+
+  it('asks for a search term before searching', () => {
+    renderProviderSearch();
+
+    expect(screen.getByText(/enter a provider name or identifier/i)).toBeInTheDocument();
+    expect(mockOpenmrsFetch).not.toHaveBeenCalled();
+  });
+
+  it('searches providers by name or identifier and lists what it finds', async () => {
+    renderProviderSearch();
+
+    await userEvent.type(screen.getByRole('searchbox'), 'MCPRPG');
+
+    expect(await screen.findByRole('button', { name: 'Louidor Jean paul' })).toBeInTheDocument();
+    expect(screen.getByRole('cell', { name: 'MCPRPG' })).toBeInTheDocument();
+    expect(mockOpenmrsFetch).toHaveBeenCalledWith(expect.stringContaining('/ws/rest/v1/provider?q=MCPRPG'));
+  });
+
+  it('drills down into the provider that is clicked', async () => {
+    const onSelectProvider = renderProviderSearch();
+
+    await userEvent.type(screen.getByRole('searchbox'), 'MCPRPG');
+    await userEvent.click(await screen.findByRole('button', { name: 'Louidor Jean paul' }));
+
+    expect(onSelectProvider).toHaveBeenCalledWith('prov-1');
+  });
+
+  it('says so when nothing matches', async () => {
+    mockOpenmrsFetch.mockResolvedValue({ data: { results: [], totalCount: 0 } } as unknown as ReturnType<
+      typeof openmrsFetch
+    >);
+    renderProviderSearch();
+
+    await userEvent.type(screen.getByRole('searchbox'), 'nobody');
+
+    expect(await screen.findByText(/no providers match "nobody"/i)).toBeInTheDocument();
+  });
+});

package/src/audit/provider-search.component.tsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DataTableSkeleton,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@carbon/react';
+import { ErrorState, useConfig, useDebounce } from '@openmrs/esm-framework';
+import { type Config } from '../config-schema';
+import { useProviderSearch } from './audit.resource';
+import styles from './audit.scss';
+
+interface ProviderSearchProps {
+  onSelectProvider(providerUuid: string): void;
+}
+
+/**
+ * Finds the provider whose encounters are being audited, by name or by provider identifier.
+ */
+export default function ProviderSearch({ onSelectProvider }: ProviderSearchProps) {
+  const { t } = useTranslation();
+  const config = useConfig<Config>();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(config.patientSearchPageSize ?? 10);
+  const debouncedSearchTerm = useDebounce(searchTerm.trim(), 300);
+  const pageSizes = useMemo(() => Array.from(new Set([pageSize, 10, 20, 50])).sort((a, b) => a - b), [pageSize]);
+  const { providers, totalCount, error, isLoading } = useProviderSearch(debouncedSearchTerm, page, pageSize);
+
+  useEffect(() => {
+    setPage(1);
+  }, [debouncedSearchTerm]);
+
+  return (
+    <div>
+      <Search
+        className={styles.searchInput}
+        labelText={t('searchForProvider', 'Search for a provider by name or identifier')}
+        onChange={(event) => setSearchTerm(event.target.value)}
+        placeholder={t('searchForProvider', 'Search for a provider by name or identifier')}
+        size="lg"
+        value={searchTerm}
+      />
+      {!debouncedSearchTerm ? (
+        <p className={styles.emptyState}>
+          {t(
+            'searchProviderToBegin',
+            'Enter a provider name or identifier to see the encounters they are recorded on.',
+          )}
+        </p>
+      ) : error ? (
+        <ErrorState error={error} headerTitle={t('providerSearchResults', 'Provider search results')} />
+      ) : isLoading ? (
+        <DataTableSkeleton columnCount={3} compact role="progressbar" showHeader={false} showToolbar={false} />
+      ) : providers.length === 0 ? (
+        <p className={styles.emptyState}>
+          {t('noProvidersFound', 'No providers match "{{searchTerm}}".', { searchTerm: debouncedSearchTerm })}
+        </p>
+      ) : (
+        <>
+          <TableContainer className={styles.tableContainer}>
+            <Table size="sm" useZebraStyles>
+              <TableHead>
+                <TableRow>
+                  <TableHeader>{t('providerName', 'Provider name')}</TableHeader>
+                  <TableHeader>{t('identifier', 'Identifier')}</TableHeader>
+                  <TableHeader>{t('gender', 'Gender')}</TableHeader>
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {providers.map((provider) => (
+                  <TableRow
+                    className={styles.clickableRow}
+                    key={provider.uuid}
+                    onClick={() => onSelectProvider(provider.uuid)}>
+                    <TableCell>
+                      <button
+                        className={styles.linkButton}
+                        onClick={(event) => {
+                          event.stopPropagation();
+                          onSelectProvider(provider.uuid);
+                        }}
+                        type="button">
+                        {provider.person?.display ?? provider.display}
+                      </button>
+                    </TableCell>
+                    <TableCell>{provider.identifier}</TableCell>
+                    <TableCell>{provider.person?.gender}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          <Pagination
+            onChange={({ page: nextPage, pageSize: nextPageSize }) => {
+              setPage(nextPage);
+              setPageSize(nextPageSize);
+            }}
+            page={page}
+            pageSize={pageSize}
+            pageSizes={pageSizes}
+            size="sm"
+            totalItems={totalCount}
+          />
+        </>
+      )}
+    </div>
+  );
+}