Handle multiple results from the registry

packages/esm-patient-registration-app/src/index.ts

@@ -72,3 +72,8 @@ export const postToRegistryModal = getAsyncLifecycle(
   () => import('./patient-verification/verification-modal/registry-prompt.component'),
   options,
 );
+
+export const multiplePatientModal = getAsyncLifecycle(
+  () => import('./patient-verification/verification-modal/multiple-patient.component'),
+  options,
+);

packages/esm-patient-registration-app/src/patient-registration/empty-state/empty-state-illustration.component.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const EmptyStateIllustration = () => {
+  return (
+    <svg width={64} height={64} viewBox="0 0 64 64">
+      <title>Empty data illustration</title>
+      <g fill="none" fillRule="evenodd">
+        <path
+          d="M38.133 13.186H21.947c-.768.001-1.39.623-1.39 1.391V50.55l-.186.057-3.97 1.216a.743.743 0 01-.927-.493L3.664 12.751a.742.742 0 01.492-.926l6.118-1.874 17.738-5.43 6.119-1.873a.741.741 0 01.926.492L38.076 13l.057.186z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.664 13L38.026 1.117A1.576 1.576 0 0036.056.07l-8.601 2.633-17.737 5.43-8.603 2.634a1.578 1.578 0 00-1.046 1.97l12.436 40.616a1.58 1.58 0 001.969 1.046l5.897-1.805.185-.057v-.194l-.185.057-5.952 1.822a1.393 1.393 0 01-1.737-.923L.247 12.682a1.39 1.39 0 01.923-1.738L9.772 8.31 27.51 2.881 36.112.247a1.393 1.393 0 011.737.923L41.47 13l.057.186h.193l-.057-.185z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M11.378 11.855a.836.836 0 01-.798-.59L9.385 7.361a.835.835 0 01.554-1.042l16.318-4.996a.836.836 0 011.042.554l1.195 3.902a.836.836 0 01-.554 1.043l-16.318 4.995a.831.831 0 01-.244.037z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
+        <path
+          d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
+          fill="#F4F4F4"
+        />
+        <path
+          d="M41.47 13H21.948a1.579 1.579 0 00-1.576 1.577V52.4l.185-.057V14.577c.001-.768.623-1.39 1.391-1.39h19.581L41.471 13zm17.02 0H21.947a1.579 1.579 0 00-1.576 1.577v42.478c0 .87.706 1.576 1.576 1.577H58.49a1.579 1.579 0 001.576-1.577V14.577a1.579 1.579 0 00-1.576-1.576zm1.39 44.055c0 .768-.622 1.39-1.39 1.392H21.947c-.768-.001-1.39-.624-1.39-1.392V14.577c0-.768.622-1.39 1.39-1.39H58.49c.768 0 1.39.622 1.39 1.39v42.478z"
+          fill="#8D8D8D"
+        />
+        <path
+          d="M48.751 17.082H31.686a.836.836 0 01-.835-.835v-4.081c0-.46.374-.834.835-.835H48.75c.461 0 .834.374.835.835v4.08c0 .462-.374.835-.835.836z"
+          fill="#C6C6C6"
+        />
+        <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
+      </g>
+    </svg>
+  );
+};
+
+export default EmptyStateIllustration;

packages/esm-patient-registration-app/src/patient-registration/empty-state/empty-state.component.tsx

@@ -0,0 +1,16 @@
+import { Layer, Tile } from '@carbon/react';
+import styles from './empty-state.scss';
+import EmptyStateIllustration from './empty-state-illustration.component';
+import React from 'react';
+
+export const EmptyStateComponent = () => {
+  return (
+    <Layer className={styles.layer}>
+      <Tile className={styles.tile}>
+        <EmptyStateIllustration />
+        <p className={styles.content}>No Records Found</p>
+        <p className={styles.explainer}></p>
+      </Tile>
+    </Layer>
+  );
+};

packages/esm-patient-registration-app/src/patient-registration/empty-state/empty-state.scss

@@ -0,0 +1,29 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+
+.layer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: spacing.$spacing-05;
+  margin: 2rem 1rem;
+  text-align: center;
+  border: 1px solid colors.$gray-20;
+}
+
+.tile {
+  margin: auto;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: colors.$gray-70;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.explainer {
+  @include type.type-style('body-compact-01');
+  color: colors.$gray-70;
+}

packages/esm-patient-registration-app/src/patient-verification/data-table/data-table.component.tsx

@@ -0,0 +1,147 @@
+import {
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tile,
+} from '@carbon/react';
+import { isDesktop, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './data-tables.scss';
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: any;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+};
+
+interface ListProps {
+  columns: any;
+  data: any;
+}
+
+const DataList: React.FC<ListProps> = ({ columns, data }) => {
+  const { t } = useTranslation();
+  const layout = useLayoutType();
+  const isTablet = useLayoutType() === 'tablet';
+  const responsiveSize = isTablet ? 'lg' : 'sm';
+  const [allRows, setAllRows] = useState([]);
+  const [list] = useState(data);
+  const [documentType, setDocumentType] = useState<DocumentType>(null);
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const { goTo, results: paginatedList, currentPage } = usePagination(data, currentPageSize);
+
+  const handleFilter = ({ rowIds, headers, cellsById, inputValue, getCellId }: FilterProps): Array<string> => {
+    return rowIds.filter((rowId) =>
+      headers.some(({ key }) => {
+        const cellId = getCellId(rowId, key);
+        const filterableValue = cellsById[cellId].value;
+        const filterTerm = inputValue.toLowerCase();
+
+        if (typeof filterableValue === 'boolean') {
+          return false;
+        }
+
+        return ('' + filterableValue).toLowerCase().includes(filterTerm);
+      }),
+    );
+  };
+
+  useEffect(() => {
+    const rows: Array<Record<string, string>> = [];
+
+    paginatedList.map((item: any, index) => {
+      return rows.push({ ...item, id: index++ });
+    });
+    setAllRows(rows);
+  }, [paginatedList, allRows]);
+
+  return (
+    <DataTable
+      data-floating-menu-container
+      rows={allRows}
+      headers={columns}
+      filterRows={handleFilter}
+      overflowMenuOnHover={isDesktop(layout)}
+      size={isTablet ? 'lg' : 'sm'}
+      useZebraStyles>
+      {({ rows, headers, getHeaderProps, getTableProps, onInputChange }) => (
+        <div>
+          <TableContainer className={styles.tableContainer}>
+            <div className={styles.toolbarWrapper}>
+              <TableToolbar size={responsiveSize}>
+                <TableToolbarContent className={styles.toolbarContent}>
+                  <TableToolbarSearch
+                    className={styles.searchbox}
+                    expanded
+                    onChange={onInputChange}
+                    placeholder={t('searchThisList', 'Search this list')}
+                    size={responsiveSize}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+            </div>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row) => (
+                  <TableRow key={row.id}>
+                    {row.cells.map((cell) => (
+                      <TableCell key={cell.id}>{cell.value}</TableCell>
+                    ))}
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Tile className={styles.tile}>
+                  <div className={styles.tileContent}>
+                    <p className={styles.content}>{t('No data', 'No data to display')}</p>
+                  </div>
+                </Tile>
+              </div>
+            ) : null}
+            <Pagination
+              forwardText="Next page"
+              backwardText="Previous page"
+              page={currentPage}
+              pageSize={currentPageSize}
+              pageSizes={pageSizes}
+              totalItems={data?.length}
+              className={styles.pagination}
+              onChange={({ pageSize, page }) => {
+                if (pageSize !== currentPageSize) {
+                  setPageSize(pageSize);
+                }
+                if (page !== currentPage) {
+                  goTo(page);
+                }
+              }}
+            />
+          </TableContainer>
+        </div>
+      )}
+    </DataTable>
+  );
+};
+
+export default DataList;