@kenyaemr/esm-patient-list-management-app 7.0.2-pre.65

package/src/lists-table/lists-table.component.tsx

@@ -0,0 +1,317 @@
+import React, { type CSSProperties, useCallback, useId, useMemo, useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import fuzzy from 'fuzzy';
+import orderBy from 'lodash-es/orderBy';
+import type { TFunction } from 'i18next';
+import {
+  Button,
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Layer,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { Star, StarFilled } from '@carbon/react/icons';
+import {
+  ConfigurableLink,
+  isDesktop,
+  showSnackbar,
+  useConfig,
+  useLayoutType,
+  usePagination,
+  useSession,
+} from '@openmrs/esm-framework';
+import type { ConfigSchema } from '../config-schema';
+import type { PatientList } from '../api/types';
+import { starPatientList } from '../api/api-remote';
+import { CustomPagination } from './custom-pagination.component';
+import { ErrorState } from '../error-state/error-state.component';
+import EmptyState from '../empty-state/empty-state.component';
+import styles from './lists-table.scss';
+
+/**
+ * FIXME Temporarily moved here
+ */
+interface DataTableHeader {
+  key: string;
+  header: React.ReactNode;
+}
+
+interface PatientListTableProps {
+  error?: Error | null;
+  handleCreate?: () => void;
+  headers?: Array<DataTableHeader>;
+  isLoading?: boolean;
+  isValidating?: boolean;
+  listType: string;
+  patientLists: Array<PatientList>;
+  refetch?(): void;
+  style?: CSSProperties;
+}
+
+const ListsTable: React.FC<PatientListTableProps> = ({
+  error,
+  handleCreate,
+  headers,
+  isLoading = false,
+  isValidating,
+  listType,
+  patientLists = [],
+  style,
+}) => {
+  const { t } = useTranslation();
+  const id = useId();
+  const layout = useLayoutType();
+  const config: ConfigSchema = useConfig();
+  const pageSize = config.patientListsToShow ?? 10;
+  const [sortParams, setSortParams] = useState({ key: '', order: 'none' });
+  const [searchTerm, setSearchTerm] = useState('');
+  const responsiveSize = layout === 'tablet' ? 'lg' : 'sm';
+
+  const { toggleStarredList, starredLists } = useStarredLists();
+
+  function customSortRow(listA, listB, { sortDirection, sortStates, ...props }) {
+    const { key } = props;
+    setSortParams({ key, order: sortDirection });
+  }
+
+  const filteredLists: Array<PatientList> = useMemo(() => {
+    if (!searchTerm) {
+      return patientLists;
+    }
+
+    return fuzzy
+      .filter(searchTerm, patientLists, { extract: (list) => `${list.display} ${list.type}` })
+      .sort((r1, r2) => r1.score - r2.score)
+      .map((result) => result.original);
+  }, [patientLists, searchTerm]);
+
+  const { key, order } = sortParams;
+  const sortedData =
+    order === 'DESC' ? orderBy(filteredLists, [key], ['desc']) : orderBy(filteredLists, [key], ['asc']);
+
+  const { paginated, goTo, results, currentPage } = usePagination(sortedData, pageSize);
+
+  const tableRows = useMemo(
+    () =>
+      results.map((list) => ({
+        id: list.id,
+        display: list.display,
+        description: list.description,
+        type: list.type,
+        size: list.size,
+      })) ?? [],
+    [results],
+  );
+
+  if (isLoading) {
+    return (
+      <DataTableSkeleton
+        columnCount={headers.length}
+        compact={isDesktop(layout)}
+        role="progressbar"
+        rowCount={pageSize}
+        showHeader={false}
+        showToolbar={false}
+        style={{ ...style, backgroundColor: 'transparent', padding: '0rem' }}
+        zebra
+      />
+    );
+  }
+
+  if (error) {
+    return <ErrorState error={error} headerTitle={t('patientLists', 'Patient lists')} />;
+  }
+
+  if (patientLists.length === 0) {
+    return <EmptyState launchForm={handleCreate} listType={listType} />;
+  }
+
+  return (
+    <>
+      <div id="tableToolBar" className={styles.searchContainer}>
+        <div>{isValidating && <InlineLoading />}</div>
+        <Layer>
+          <Search
+            className={styles.searchbox}
+            id={`${id}-search`}
+            labelText=""
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+            placeholder={t('searchThisList', 'Search this list')}
+            size={responsiveSize}
+            value={searchTerm}
+          />
+        </Layer>
+      </div>
+      <DataTable rows={tableRows} headers={headers} size={responsiveSize} sortRow={customSortRow}>
+        {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getTableContainerProps }) => (
+          <TableContainer {...getTableContainerProps()} className={styles.tableContainer}>
+            <Table
+              {...getTableProps()}
+              className={styles.table}
+              data-testid="patientListsTable"
+              isSortable
+              useZebraStyles>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader
+                      className={isDesktop(layout) ? styles.desktopHeader : styles.tabletHeader}
+                      key={header.key}
+                      {...getHeaderProps({ header })}
+                      isSortable>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody className={styles.tableBody}>
+                {rows.map((row) => {
+                  const currentList = patientLists?.find((list) => list?.id === row.id);
+                  const listDetailsPageUrl = '${openmrsSpaBase}/home/patient-lists/${listUuid}';
+
+                  return (
+                    <TableRow
+                      {...getRowProps({ row })}
+                      className={isDesktop(layout) ? styles.desktopRow : styles.tabletRow}
+                      key={row.id}>
+                      <TableCell>
+                        <ConfigurableLink
+                          className={styles.link}
+                          to={listDetailsPageUrl}
+                          templateParams={{ listUuid: row.id }}>
+                          {currentList?.display ?? ''}
+                        </ConfigurableLink>
+                      </TableCell>
+                      <TableCell>{currentList?.type ?? ''}</TableCell>
+                      <TableCell>{currentList?.size ?? ''}</TableCell>
+                      <PatientListStarIcon
+                        cohortUuid={row.id}
+                        isStarred={starredLists.includes(row.id)}
+                        toggleStarredList={toggleStarredList}
+                        t={t}
+                      />
+                    </TableRow>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+      {filteredLists?.length === 0 && (
+        <div className={styles.filterEmptyState}>
+          <Layer level={0}>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>{t('noMatchingLists', 'No matching lists to display')}</p>
+              <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+            </Tile>
+          </Layer>
+        </div>
+      )}
+      {paginated && (
+        <CustomPagination
+          currentItems={results.length}
+          totalItems={filteredLists.length}
+          onPageNumberChange={({ page }) => {
+            goTo(page);
+          }}
+          pageNumber={currentPage}
+          pageSize={pageSize}
+        />
+      )}
+    </>
+  );
+};
+
+interface PatientListStarIconProps {
+  cohortUuid: string;
+  isStarred: boolean;
+  toggleStarredList: (cohortUuid: string, starList) => void;
+  t: TFunction;
+}
+
+const PatientListStarIcon: React.FC<PatientListStarIconProps> = ({ cohortUuid, isStarred, toggleStarredList, t }) => {
+  const isTablet = useLayoutType() === 'tablet';
+
+  return (
+    <TableCell className={`cds--table-column-menu ${styles.starButton}`} key={cohortUuid} style={{ cursor: 'pointer' }}>
+      <Button
+        iconDescription={isStarred ? t('unstarList', 'Unstar list') : t('starList', 'Star list')}
+        size={isTablet ? 'lg' : 'sm'}
+        kind="ghost"
+        hasIconOnly
+        renderIcon={isStarred ? StarFilled : Star}
+        tooltipPosition="left"
+        enterDelayMs={500}
+        onClick={() => toggleStarredList(cohortUuid, !isStarred)}
+      />
+    </TableCell>
+  );
+};
+
+function useStarredLists() {
+  const { t } = useTranslation();
+  const [starredLists, setStarredLists] = useState([]);
+  const [starhandleTimeout, setStarHandleTimeout] = useState(null);
+  const { user: currentUser } = useSession();
+
+  const setInitialStarredLists = useCallback(() => {
+    const starredPatientLists = currentUser?.userProperties?.starredPatientLists ?? '';
+    setStarredLists(starredPatientLists.split(','));
+  }, [currentUser?.userProperties?.starredPatientLists, setStarredLists]);
+
+  const updateUserProperties = (newStarredLists: Array<string>) => {
+    const starredPatientLists = newStarredLists.join(',');
+    const userProperties = { ...(currentUser?.userProperties ?? {}), starredPatientLists };
+
+    starPatientList(currentUser?.uuid, userProperties).catch(() => {
+      setInitialStarredLists();
+      showSnackbar({
+        subtitle: t('starringPatientListFailed', 'Marking patient lists starred / unstarred failed'),
+        kind: 'error',
+        title: 'Failed to update patient lists',
+      });
+    });
+  };
+
+  /**
+   * Handles toggling the starred list
+   * It uses a timeout to store all the changes made by the user
+   * and pass the changes in a single request
+   * @param cohortUuid
+   * @param starPatientList
+   */
+  const toggleStarredList = useCallback(
+    (cohortUuid, starPatientList) => {
+      const newStarredLists = starPatientList
+        ? [...starredLists, cohortUuid]
+        : starredLists.filter((uuid) => uuid !== cohortUuid);
+      setStarredLists(newStarredLists);
+      if (starhandleTimeout) {
+        clearTimeout(starhandleTimeout);
+      }
+      const timeout = setTimeout(() => updateUserProperties(newStarredLists), 1500);
+      setStarHandleTimeout(timeout);
+    },
+    [starredLists, starhandleTimeout, setStarredLists, setStarHandleTimeout, updateUserProperties],
+  );
+
+  useEffect(() => {
+    if (currentUser?.userProperties?.starredPatientLists) {
+      setInitialStarredLists();
+    }
+  }, [currentUser?.userProperties?.starredPatientLists, setInitialStarredLists]);
+
+  return { toggleStarredList, starredLists };
+}
+
+export default ListsTable;

package/src/lists-table/lists-table.scss

@@ -0,0 +1,100 @@
+@use '@carbon/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../style.scss';
+
+.table {
+  tr {
+    &:last-of-type {
+      td {
+        border-bottom: none;
+      }
+    }
+  }
+
+  td {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+}
+
+.desktopRow,
+.desktopHeader {
+  height: spacing.$spacing-07 !important;
+}
+
+.tabletRow,
+.tabletHeader {
+  height: spacing.$spacing-09 !important;
+}
+
+.tableBody {
+  background-color: $ui-01;
+}
+
+.tableCell,
+.interactiveText01 {
+  color: $interactive-01;
+}
+
+.tableContainer {
+  padding: 0;
+
+  :global(.cds--data-table-content) {
+    border: 1px solid colors.$gray-20;
+    border-bottom: none;
+  }
+}
+
+.link {
+  text-decoration: none;
+}
+
+.tile {
+  text-align: center;
+  border-bottom: 1px solid $ui-03;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-09;
+  text-align: center;
+  border: 1px solid $ui-03;
+  background-color: white;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: 0.5rem;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+// Patient List Table
+.searchContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  align-items: center;
+}
+
+.searchContainer > div {
+  align-self: center;
+  justify-self: flex-end;
+}
+
+.searchbox {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}

package/src/lists-table/lists-table.test.tsx

@@ -0,0 +1,189 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen, within } from '@testing-library/react';
+import { useSession } from '@openmrs/esm-framework';
+import { mockSession } from '__mocks__';
+import type { PatientList } from '../api/types';
+import ListsTable from './lists-table.component';
+
+const mockedUseSession = jest.mocked(useSession);
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useConfig: jest.fn(() => ({
+    patientListsToShow: 10,
+  })),
+  isDesktop: jest.fn(() => true),
+}));
+
+const tableHeaders = [
+  { header: 'List name', key: '1' },
+  { header: 'List type', key: '2' },
+  { header: 'No. of patients', key: '3' },
+  { header: 'Starred', key: '4' },
+];
+
+const patientLists: Array<PatientList> = [
+  {
+    id: '3279e187-2d16-4222-a522-54fa9112d567',
+    display: 'COBALT Cohort',
+    description:
+      "Children's Obstructive Lung Disease, Bronchiectasis and Antibiotic Tolerance Study (investigates novel antibiotic treatment for persistent childhood lung infections)",
+    type: 'My List',
+    size: 200,
+  },
+  {
+    id: 'f1b2ca00-6742-490d-9062-5025644c7632',
+    display: 'GENESIS Cohort',
+    description:
+      'Genomic Evaluation of Neonatal Early Sepsis in Infants - Stratified for Risk Factors (examines genetic factors influencing sepsis risk in newborns).',
+    type: 'My List',
+    size: 300,
+  },
+  {
+    id: '9c5e8677-6747-4315-84c7-a20f30d795e2',
+    display: 'VIGOR Cohort',
+    description:
+      'Vascular Imaging and Genomics of Onset and Recovery in Stroke (analyzes cardiovascular and genetic markers predictive of stroke outcomes)',
+    type: 'My List',
+    size: 500,
+  },
+  {
+    id: 'be10d553-b183-4647-9be6-160d1246de8a',
+    display: 'EQUITY Cohort',
+    description:
+      'Equitable Quality in Cancer Treatment for Underserved Young Adults (assesses healthcare disparities in cancer treatment for young adults from disadvantaged backgrounds)',
+    type: 'My List',
+    size: 100,
+  },
+  {
+    id: '72a84c22-2425-4501-95b7-820b793602f3',
+    display: 'MINDSCAPE Cohort',
+    description:
+      'Mental Illness and Neuroimaging Study for Personalized Assessment and Care Evaluation (develops personalized treatment plans for mental illness based on brain imaging and individual factors)',
+    type: 'My List',
+    size: 250,
+  },
+  {
+    id: '06ca3df6-92d6-4401-8f06-4f094b004425',
+    display: 'MEND Cohort',
+    description:
+      'Mediterranean Diet, Exercise, and Nutrition for Diabetes (evaluates the combined effects of dietary and lifestyle changes on diabetes management).',
+    type: 'My List',
+    size: 150,
+  },
+];
+
+describe('ListsTable', () => {
+  beforeEach(() => mockedUseSession.mockReturnValue(mockSession.data));
+
+  it('renders a loading state when patient list data is getting fetched', () => {
+    render(<ListsTable error={null} headers={tableHeaders} isLoading listType={'My lists'} patientLists={[]} />);
+
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('renders an error state when there is a problem loading patient list data', () => {
+    const error = {
+      message: 'You are not logged in',
+      response: {
+        status: 401,
+        statusText: 'Unauthorized',
+      },
+    } as unknown as Error;
+
+    render(
+      <ListsTable
+        error={error}
+        headers={tableHeaders}
+        isLoading={false}
+        listType={''}
+        patientLists={[]}
+        refetch={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByText(/401:\s*unauthorized/i)).toBeInTheDocument();
+    expect(screen.getByText(/sorry, there was a problem displaying this information/i)).toBeInTheDocument();
+  });
+
+  it('renders an empty state when there is no patient list data to display', () => {
+    render(<ListsTable patientLists={[]} listType={''} />);
+
+    expect(screen.getByTitle(/empty state illustration/i)).toBeInTheDocument();
+    expect(screen.getByText(/there are no patient lists to display/i)).toBeInTheDocument();
+    expect(screen.queryByRole('table')).not.toBeInTheDocument();
+  });
+
+  it('renders the available patient lists in a datatable', () => {
+    const pageSize = 5;
+
+    render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
+
+    const columnHeaders = [/List name/, /List type/, /No. of patients/, /Starred/];
+
+    columnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox');
+    expect(searchInput).toBeInTheDocument();
+
+    patientLists.slice(0, pageSize).forEach((list) => {
+      expect(
+        screen.getByRole('row', { name: `${list.display} ${list.type} ${list.size} Star list` }),
+      ).toBeInTheDocument();
+    });
+  });
+
+  it('searches for patient lists by the list name or type', async () => {
+    const user = userEvent.setup();
+    const pageSize = 5;
+
+    render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
+
+    patientLists.slice(0, pageSize).forEach((list) => {
+      expect(
+        screen.getByRole('row', { name: `${list.display} ${list.type} ${list.size} Star list` }),
+      ).toBeInTheDocument();
+    });
+
+    const searchInput = screen.getByRole('searchbox');
+    expect(searchInput).toBeInTheDocument();
+
+    // Search for an existing list
+    await user.type(searchInput, 'cobalt');
+
+    expect(screen.getByRole('row', { name: /cobalt cohort my list 200 star list/i })).toBeInTheDocument();
+    expect(screen.getAllByRole('row').length).toBe(2);
+
+    // Search for a list that is not in the first page of results
+    await user.clear(searchInput);
+    await user.type(searchInput, 'mend');
+
+    expect(screen.getByRole('row', { name: /mend cohort my list 150 star list/i })).toBeInTheDocument();
+
+    // Search for a list that does not exist
+    await user.clear(searchInput);
+    await user.type(searchInput, 'apollo-soyuz');
+    expect(screen.getByText(/no matching lists to display/i)).toBeInTheDocument();
+    expect(screen.getByText(/check the filters above/i)).toBeInTheDocument();
+  });
+
+  it('clicking the "Star list" button toggles the starred status of a patient list', async () => {
+    const user = userEvent.setup();
+    const pageSize = 5;
+
+    render(<ListsTable patientLists={patientLists} listType={''} headers={tableHeaders} isLoading={false} />);
+
+    const cobaltCohortRow = screen.getByRole('row', { name: /cobalt cohort my list 200/i });
+    const starListButton = within(cobaltCohortRow).queryByRole('button', { name: /^star list$/i });
+    const unstarListButton = within(cobaltCohortRow).queryByRole('button', { name: /^unstar list$/i });
+
+    expect(unstarListButton).not.toBeInTheDocument();
+    expect(starListButton).toBeInTheDocument();
+
+    await user.click(starListButton);
+    await screen.findByRole('button', { name: /^unstar list$/i });
+  });
+});

package/src/lists-table/use-pagination-info.component.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+
+export function usePaginationInfo(pageSize: number, totalItems: number, pageNumber: number, currentItems: number) {
+  const { t } = useTranslation();
+
+  const pageSizes = useMemo(() => {
+    let numberOfPages = Math.ceil(totalItems / pageSize);
+    if (isNaN(numberOfPages)) {
+      numberOfPages = 0;
+    }
+
+    return [...Array(numberOfPages).keys()].map((x) => {
+      return (x + 1) * pageSize;
+    });
+  }, [pageSize, totalItems]);
+
+  const numberOfItemsDisplayed = useMemo(() => {
+    if (pageSize > totalItems) {
+      return `${totalItems} / ${totalItems}`;
+    } else if (pageSize * pageNumber > totalItems) {
+      return `${pageSize * (pageNumber - 1) + currentItems} / ${totalItems}`;
+    } else {
+      return `${pageSize * pageNumber} / ${totalItems}`;
+    }
+  }, [pageSize, totalItems, pageNumber, currentItems]);
+
+  return {
+    pageSizes,
+    itemsDisplayed: t('itemsDisplayed', '{{numberOfItemsDisplayed}} items', {
+      numberOfItemsDisplayed,
+      interpolation: { escapeValue: false },
+    }),
+  };
+}

package/src/offline.ts

@@ -0,0 +1,31 @@
+import {
+  fetchCurrentPatient,
+  fhirBaseUrl,
+  makeUrl,
+  messageOmrsServiceWorker,
+  setupDynamicOfflineDataHandler,
+} from '@openmrs/esm-framework';
+import { cacheForOfflineHeaders } from './constants';
+
+export function setupOffline() {
+  setupDynamicOfflineDataHandler({
+    id: 'esm-patient-list-management-app:patient',
+    type: 'patient',
+    displayName: 'Patient list',
+    async isSynced(patientUuid) {
+      const expectedUrls = [`${fhirBaseUrl}/Patient/${patientUuid}`];
+      const absoluteExpectedUrls = expectedUrls.map((url) => window.origin + makeUrl(url));
+      const cache = await caches.open('omrs-spa-cache-v1');
+      const keys = (await cache.keys()).map((key) => key.url);
+      return absoluteExpectedUrls.every((url) => keys.includes(url));
+    },
+    async sync(patientUuid) {
+      await messageOmrsServiceWorker({
+        type: 'registerDynamicRoute',
+        pattern: `${fhirBaseUrl}/Patient/${patientUuid}`,
+      });
+
+      await fetchCurrentPatient(patientUuid, { headers: cacheForOfflineHeaders });
+    },
+  });
+}