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

package/src/list-details-table/list-details-table.component.tsx

@@ -0,0 +1,402 @@
+import React, { type CSSProperties, type HTMLAttributes, useCallback, useId, useMemo, useState } from 'react';
+import fuzzy from 'fuzzy';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  type DataTableRow,
+  DataTableSkeleton,
+  InlineLoading,
+  Layer,
+  Modal,
+  Pagination,
+  Search,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { ArrowLeft, TrashCan } from '@carbon/react/icons';
+import { ConfigurableLink, useLayoutType, isDesktop, showSnackbar, useDebounce } from '@openmrs/esm-framework';
+import { removePatientFromList } from '../api/api-remote';
+import { EmptyDataIllustration } from '../empty-state/empty-data-illustration.component';
+import styles from './list-details-table.scss';
+
+// FIXME Temporarily included types from Carbon
+type InputPropsBase = Omit<HTMLAttributes<HTMLInputElement>, 'onChange'>;
+
+interface SearchProps extends InputPropsBase {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete?: string;
+
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className?: string;
+
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText?: string;
+
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue?: string | number;
+
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Specify whether or not ExpandableSearch should render expanded or not
+   */
+  isExpanded?: boolean;
+
+  /**
+   * Specify a custom `id` for the input
+   */
+  id?: string;
+
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: React.ReactNode;
+
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange?(e: { target: HTMLInputElement; type: 'change' }): void;
+
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear?(): void;
+
+  /**
+   * Optional callback called when the magnifier icon is clicked in ExpandableSearch.
+   */
+  onExpand?(e: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>): void;
+
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder?: string;
+
+  /**
+   * Rendered icon for the Search.
+   * Can be a React component class
+   */
+  renderIcon?: React.ComponentType | React.FunctionComponent;
+
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role?: string;
+
+  /**
+   * Specify the size of the Search
+   */
+  size?: 'sm' | 'md' | 'lg';
+
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type?: string;
+
+  /**
+   * Specify the value of the `<input>`
+   */
+  value?: string | number;
+}
+
+interface ListDetailsTableProps {
+  autoFocus?: boolean;
+  columns: Array<PatientTableColumn>;
+  isFetching?: boolean;
+  isLoading: boolean;
+  mutateListDetails: () => void;
+  mutateListMembers: () => void;
+  pagination: {
+    usePagination: boolean;
+    currentPage: number;
+    onChange(props: any): any;
+    pageSize: number;
+    totalItems: number;
+    pagesUnknown?: boolean;
+    lastPage?: boolean;
+  };
+  patients;
+  style?: CSSProperties;
+}
+
+interface PatientTableColumn {
+  key: string;
+  header: string;
+  getValue?(patient: any): any;
+  link?: {
+    getUrl(patient: any): string;
+  };
+}
+
+const ListDetailsTable: React.FC<ListDetailsTableProps> = ({
+  columns,
+  isFetching,
+  isLoading,
+  mutateListDetails,
+  mutateListMembers,
+  pagination,
+  patients,
+}) => {
+  const { t } = useTranslation();
+  const id = useId();
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+  const patientListsPath = window.getOpenmrsSpaBase() + 'home/patient-lists';
+
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [membershipUuid, setMembershipUuid] = useState('');
+  const [patientName, setPatientName] = useState('');
+  const [searchTerm, setSearchTerm] = useState('');
+  const [showConfirmationModal, setShowConfirmationModal] = useState(false);
+  const debouncedSearchTerm = useDebounce(searchTerm);
+
+  const filteredPatients = useMemo(() => {
+    if (!debouncedSearchTerm) {
+      return patients;
+    }
+
+    return debouncedSearchTerm
+      ? fuzzy
+          .filter(debouncedSearchTerm, patients, {
+            extract: (patient: any) => `${patient.name} ${patient.identifier} ${patient.sex}`,
+          })
+          .sort((r1, r2) => r1.score - r2.score)
+          .map((result) => result.original)
+      : patients;
+  }, [debouncedSearchTerm, patients]);
+
+  const tableRows: Array<typeof DataTableRow> = useMemo(
+    () =>
+      filteredPatients?.map((patient) => ({
+        id: patient.identifier,
+        identifier: patient.identifier,
+        membershipUuid: patient.membershipUuid,
+        name: columns.find((column) => column.key === 'name')?.link ? (
+          <ConfigurableLink
+            className={styles.link}
+            to={columns.find((column) => column.key === 'name')?.link?.getUrl(patient)}>
+            {patient.name}
+          </ConfigurableLink>
+        ) : (
+          patient.name
+        ),
+        sex: patient.sex,
+        startDate: patient.startDate,
+      })) ?? [],
+    [columns, filteredPatients],
+  );
+
+  const handleRemovePatientFromList = useCallback(async () => {
+    setIsDeleting(true);
+
+    try {
+      await removePatientFromList(membershipUuid);
+      mutateListMembers();
+      mutateListDetails();
+
+      showSnackbar({
+        isLowContrast: true,
+        kind: 'success',
+        subtitle: t('listUpToDate', 'The list is now up to date'),
+        title: t('patientRemovedFromList', 'Patient removed from list'),
+      });
+    } catch (error) {
+      showSnackbar({
+        kind: 'error',
+        subtitle: error?.message,
+        title: t('errorRemovingPatientFromList', 'Failed to remove patient from list'),
+      });
+    }
+
+    setIsDeleting(false);
+    setShowConfirmationModal(false);
+  }, [membershipUuid, mutateListDetails, mutateListMembers, t]);
+
+  const BackButton = () => (
+    <div className={styles.backButton}>
+      <ConfigurableLink to={patientListsPath}>
+        <Button
+          kind="ghost"
+          renderIcon={(props) => <ArrowLeft size={24} {...props} />}
+          iconDescription="Return to lists page"
+          size="sm"
+          onClick={() => {}}>
+          <span>{t('backToListsPage', 'Back to lists page')}</span>
+        </Button>
+      </ConfigurableLink>
+    </div>
+  );
+
+  if (isLoading) {
+    return (
+      <div className={styles.skeletonContainer}>
+        <DataTableSkeleton
+          data-testid="data-table-skeleton"
+          className={styles.dataTableSkeleton}
+          rowCount={5}
+          columnCount={5}
+          zebra
+        />
+      </div>
+    );
+  }
+
+  if (patients.length > 0) {
+    return (
+      <>
+        <BackButton />
+        <div className={styles.tableOverride}>
+          <div className={styles.searchContainer}>
+            <div>{isFetching && <InlineLoading />}</div>
+            <div>
+              <Layer>
+                <Search
+                  className={styles.searchOverrides}
+                  id={`${id}-search`}
+                  labelText=""
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchTerm(e.target.value)}
+                  placeholder={t('searchThisList', 'Search this list')}
+                  size={responsiveSize}
+                />
+              </Layer>
+            </div>
+          </div>
+          <DataTable rows={tableRows} headers={columns} isSortable size={responsiveSize} useZebraStyles>
+            {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+              <TableContainer>
+                <Table className={styles.table} {...getTableProps()} data-testid="patientsTable">
+                  <TableHead>
+                    <TableRow>
+                      {headers.map((header) => (
+                        <TableHeader
+                          {...getHeaderProps({
+                            header,
+                            isSortable: header.isSortable,
+                          })}
+                          className={isDesktop(layout) ? styles.desktopHeader : styles.tabletHeader}>
+                          {header.header?.content ?? header.header}
+                        </TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => {
+                      const currentPatient = patients.find((patient) => patient.identifier === row.id);
+
+                      return (
+                        <TableRow
+                          {...getRowProps({ row })}
+                          className={isDesktop(layout) ? styles.desktopRow : styles.tabletRow}
+                          key={row.id}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                          ))}
+                          <TableCell className="cds--table-column-menu">
+                            <Button
+                              kind="ghost"
+                              hasIconOnly
+                              renderIcon={TrashCan}
+                              iconDescription={t('removeFromList', 'Remove from list')}
+                              size={responsiveSize}
+                              tooltipPosition="left"
+                              onClick={() => {
+                                setMembershipUuid(currentPatient.membershipUuid);
+                                setPatientName(currentPatient.name);
+                                setShowConfirmationModal(true);
+                              }}
+                            />
+                          </TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+          {filteredPatients?.length === 0 && (
+            <div className={styles.filterEmptyState}>
+              <Layer level={0}>
+                <Tile className={styles.filterEmptyStateTile}>
+                  <p className={styles.filterEmptyStateContent}>
+                    {t('noMatchingPatients', 'No matching patients to display')}
+                  </p>
+                  <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+                </Tile>
+              </Layer>
+            </div>
+          )}
+          {pagination.usePagination && (
+            <Pagination
+              backwardText={t('nextPage', 'Next page')}
+              className={styles.paginationOverride}
+              forwardText={t('previousPage', 'Previous page')}
+              isLastPage={pagination.lastPage}
+              onChange={pagination.onChange}
+              page={pagination.currentPage}
+              pageSize={pagination.pageSize}
+              pageSizes={[10, 20, 30, 40, 50]}
+              pagesUnknown={pagination?.pagesUnknown}
+              totalItems={pagination.totalItems}
+            />
+          )}
+        </div>
+        {showConfirmationModal && (
+          <Modal
+            open
+            danger
+            modalHeading={t(
+              'removePatientFromListConfirmation',
+              'Are you sure you want to remove {{patientName}} from this list?',
+              {
+                patientName: patientName,
+              },
+            )}
+            primaryButtonText={t('removeFromList', 'Remove from list')}
+            secondaryButtonText={t('cancel', 'Cancel')}
+            onRequestClose={() => setShowConfirmationModal(false)}
+            onRequestSubmit={handleRemovePatientFromList}
+            primaryButtonDisabled={isDeleting}
+          />
+        )}
+      </>
+    );
+  }
+
+  return (
+    <>
+      <BackButton />
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={styles.illo}>
+            <EmptyDataIllustration />
+          </div>
+          <p className={styles.content}>{t('noPatientsInList', 'There are no patients in this list')}</p>
+        </Tile>
+      </Layer>
+    </>
+  );
+};
+
+export default ListDetailsTable;

package/src/list-details-table/list-details-table.scss

@@ -0,0 +1,143 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.searchContainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-top: spacing.$spacing-05;
+  background-color: #ededed;
+}
+
+.searchContainer > div {
+  align-self: center;
+  justify-self: end;
+}
+
+.searchOverrides {
+  width: 100%;
+  max-width: 250px;
+  border: 0px !important;
+}
+
+div.tableOverride {
+  background-color: $ui-01;
+}
+
+div.tableOverride > div {
+  white-space: nowrap;
+}
+
+div#table-tool-bar {
+  margin-top: spacing.$spacing-09;
+}
+
+.table {
+  background-color: $ui-03;
+}
+
+.desktopRow,
+.desktopHeader {
+  height: spacing.$spacing-07 !important;
+}
+
+.tabletRow,
+.tabletHeader {
+  height: spacing.$spacing-09 !important;
+}
+
+.paginationOverride {
+  background-color: $ui-background;
+  border-top: 1px solid $ui-03 !important;
+  border-bottom: 1px solid $ui-03 !important;
+  overflow-x: hidden;
+}
+
+.paginationOverride > div {
+  background-color: $ui-background;
+  border-bottom: 0px !important;
+  border-top: 0px !important;
+}
+
+.link {
+  text-decoration: none;
+}
+
+.dataTableSkeleton {
+  background-color: transparent;
+  padding: 0rem;
+}
+
+.skeletonContainer {
+  margin: spacing.$spacing-05;
+}
+
+.tile {
+  text-align: center;
+  border: 1px solid $ui-03;
+  margin: spacing.$spacing-05 0;
+}
+
+.illo {
+  margin-top: spacing.$spacing-05;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.backButton {
+  padding: spacing.$spacing-03 0;
+  max-width: fit-content;
+
+  a {
+    text-decoration: none;
+  }
+
+  button {
+    display: flex;
+    padding-left: 0 !important;
+
+    svg {
+      order: 1;
+      margin: 0 spacing.$spacing-03;
+    }
+
+    span {
+      order: 2;
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+  border-bottom: 1px solid $ui-03;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-09 !important;
+  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;
+}

package/src/list-details-table/list-details-table.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import ListDetailsTable from './list-details-table.component';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  isDesktop: jest.fn(() => true),
+}));
+
+describe('ListDetailsTable Component', () => {
+  const patients = [
+    {
+      identifier: '123abced',
+      firstName: 'John',
+      lastName: 'Doe',
+      age: 30,
+      sex: 'Male',
+      startDate: '2023-08-10',
+      membershipUuid: 'ce7d26fa-e1b4-4e78-a1f5-3a7a5de9c0db',
+    },
+    {
+      identifier: '123abcedfg',
+      firstName: 'Jane',
+      lastName: 'Smith',
+      age: 25,
+      sex: 'Female',
+      startDate: '2023-08-10',
+      membershipUuid: 'ce7d26fa-e1b4-4e78-a1f5-3a7a5de9c0db',
+    },
+  ];
+
+  const columns = [
+    {
+      key: 'firstName',
+      header: 'First Name',
+    },
+    {
+      key: 'lastName',
+      header: 'Last Name',
+      link: {
+        getUrl: (patient) => `/patient/${patient.id}`,
+      },
+    },
+    {
+      key: 'age',
+      header: 'Age',
+      getValue: (patient) => `${patient.age} years`,
+    },
+  ];
+
+  const mockedOnChange = jest.fn();
+
+  let pagination = {
+    usePagination: true,
+    currentPage: 1,
+    onChange: mockedOnChange,
+    pageSize: 10,
+    totalItems: 100,
+    pagesUnknown: false,
+  };
+
+  it('renders table with patient data', () => {
+    render(
+      <ListDetailsTable
+        patients={patients}
+        columns={columns}
+        pagination={pagination}
+        isLoading={false}
+        autoFocus={false}
+        isFetching={true}
+        mutateListDetails={jest.fn()}
+        mutateListMembers={jest.fn()}
+      />,
+    );
+    expect(screen.getByTestId('patientsTable')).toBeInTheDocument();
+  });
+
+  it('renders loading skeleton when loading', () => {
+    render(
+      <ListDetailsTable
+        patients={patients}
+        columns={columns}
+        pagination={pagination}
+        isLoading={true}
+        autoFocus={false}
+        isFetching={false}
+        mutateListDetails={jest.fn()}
+        mutateListMembers={jest.fn()}
+      />,
+    );
+
+    expect(screen.getByTestId('data-table-skeleton')).toBeInTheDocument();
+  });
+});