@kenyaemr/esm-service-queues-app 7.0.2-pre.65

package/src/queue-patient-linelists/queue-linelist-base-table.component.tsx

@@ -0,0 +1,241 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  type DataTableHeader,
+  Layer,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  Tag,
+  Tile,
+  DataTableSkeleton,
+  Pagination,
+} from '@carbon/react';
+import { Filter, OverflowMenuVertical } from '@carbon/react/icons';
+import {
+  ConfigurableLink,
+  ExtensionSlot,
+  formatDatetime,
+  launchWorkspace,
+  parseDate,
+  usePagination,
+} from '@openmrs/esm-framework';
+import styles from './queue-linelist-base-table.scss';
+import { type FilterTypes } from '../types';
+import { getGender } from '../helpers/functions';
+
+/**
+ * FIXME Temporarily moved here
+ */
+interface DataTableHeader {
+  key: string;
+  header: React.ReactNode;
+}
+
+type FilterProps = {
+  rowIds: Array<string>;
+  headers: Array<DataTableHeader>;
+  cellsById: any;
+  inputValue: string;
+  getCellId: (row, key) => string;
+};
+
+interface QueuePatientTableProps {
+  title: string;
+  patientData: Array<any>;
+  headers: Array<any>;
+  serviceType: string;
+  isLoading: boolean;
+  toggleFilter?: (filterMode: FilterTypes) => void;
+}
+
+const QueuePatientBaseTable: React.FC<QueuePatientTableProps> = ({
+  title,
+  patientData,
+  headers,
+  serviceType,
+  isLoading,
+}) => {
+  const { t } = useTranslation();
+  const { results, currentPage, goTo } = usePagination(patientData ?? [], 100);
+
+  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;
+        }
+        if (filterableValue.hasOwnProperty('content')) {
+          if (Array.isArray(filterableValue.content.props.children)) {
+            return ('' + filterableValue.content.props.children[1].props.children).toLowerCase().includes(filterTerm);
+          }
+          if (typeof filterableValue.content.props.children === 'object') {
+            return ('' + filterableValue.content.props.children.props.children.props.children)
+              .toLowerCase()
+              .includes(filterTerm);
+          }
+          return ('' + filterableValue.content.props.children).toLowerCase().includes(filterTerm);
+        }
+        return ('' + filterableValue).toLowerCase().includes(filterTerm);
+      }),
+    );
+  };
+
+  const pageSizes = useMemo(() => {
+    const numberOfPages = Math.ceil(patientData?.length / 100);
+    return [...Array(numberOfPages).keys()].map((x) => {
+      return (x + 1) * 100;
+    });
+  }, [patientData]);
+
+  const tableRows = useMemo(
+    () =>
+      results?.map((entry) => {
+        return {
+          id: entry.id,
+          name: {
+            content: (
+              <ConfigurableLink to={`\${openmrsSpaBase}/patient/${entry.patientUuid}/chart`}>
+                {entry.name}
+              </ConfigurableLink>
+            ),
+          },
+          returnDate: formatDatetime(parseDate(entry.returnDate), { mode: 'wide' }),
+          gender: getGender(entry.gender, t),
+          age: entry.age,
+          visitType: entry.visitType,
+          phoneNumber: entry.phoneNumber,
+        };
+      }),
+    [results, t],
+  );
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <div className={styles.container}>
+      <ExtensionSlot name="breadcrumbs-slot" />
+
+      <div className={styles.headerContainer}>
+        <div>
+          <p className={styles.title}>
+            {title} {serviceType}
+          </p>
+          <p className={styles.subTitle}>
+            {patientData?.length} · Last Updated: {formatDatetime(new Date(), { mode: 'standard' })}
+          </p>
+        </div>
+
+        <Button kind="ghost" size="sm" renderIcon={(props) => <OverflowMenuVertical size={16} {...props} />}>
+          {t('actions', 'Actions')}
+        </Button>
+      </div>
+
+      <Layer>
+        <Tile className={styles.filterTile}>
+          <Tag size="md" title="Clear Filter" type="blue">
+            {t('today', 'Today')}
+          </Tag>
+
+          <div className={styles.actionsBtn}>
+            <Button
+              kind="ghost"
+              renderIcon={(props) => <Filter size={16} {...props} />}
+              iconDescription={t('filter', 'Filter')}
+              onClick={() => launchWorkspace('service-queues-linelist-filter')}
+              size="sm">
+              {t('filter', 'Filter')}
+            </Button>
+          </div>
+        </Tile>
+      </Layer>
+
+      <DataTable
+        data-floating-menu-container
+        filterRows={handleFilter}
+        headers={headers}
+        overflowMenuOnHover={false}
+        rows={tableRows}
+        size="md"
+        useZebraStyles>
+        {({ rows, headers, getHeaderProps, getTableProps, getRowProps, onInputChange }) => (
+          <TableContainer className={styles.tableContainer}>
+            <TableToolbar style={{ position: 'static', height: '3rem', overflow: 'visible', backgroundColor: 'color' }}>
+              <TableToolbarContent className={styles.toolbarContent}>
+                <TableToolbarSearch
+                  className={styles.search}
+                  expanded
+                  onChange={onInputChange}
+                  placeholder={t('searchThisList', 'Search this list')}
+                  size="sm"
+                />
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()} className={styles.queueTable}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, index) => {
+                  return (
+                    <React.Fragment key={row.id}>
+                      <TableRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value?.content ?? cell.value}</TableCell>
+                        ))}
+                      </TableRow>
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+            {rows.length === 0 ? (
+              <div className={styles.tileContainer}>
+                <Layer>
+                  <Tile className={styles.tile}>
+                    <div className={styles.tileContent}>
+                      <p className={styles.content}>{t('noPatientsToDisplay', 'No patients to display')}</p>
+                      <p className={styles.helper}>{t('checkFilters', 'Check the filters above')}</p>
+                    </div>
+                  </Tile>
+                </Layer>
+              </div>
+            ) : null}
+          </TableContainer>
+        )}
+      </DataTable>
+
+      <Pagination
+        backwardText="Previous page"
+        forwardText="Next page"
+        page={currentPage}
+        pageNumberText="Page Number"
+        pageSize={100}
+        onChange={({ page }) => goTo(page)}
+        pageSizes={pageSizes?.length > 0 ? pageSizes : [100]}
+        totalItems={patientData?.length ?? 0}
+      />
+    </div>
+  );
+};
+
+export default QueuePatientBaseTable;

package/src/queue-patient-linelists/queue-linelist-base-table.scss

@@ -0,0 +1,110 @@
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  padding-bottom: spacing.$spacing-07;
+  background-color: $ui-01;
+}
+
+.menuItem {
+  max-width: none;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: spacing.$spacing-05;
+  margin: spacing.$spacing-03;
+  border-top: 1px solid $text-03;
+  border-bottom: 1px solid $text-03;
+}
+
+.title {
+  @include type.type-style('body-compact-02');
+
+  margin: 0 spacing.$spacing-04 spacing.$spacing-04;
+}
+
+.subTitle {
+  @include type.type-style('label-01');
+  color: $text-02;
+  margin: spacing.$spacing-01;
+  margin-left: spacing.$spacing-04;
+}
+
+.filterTile {
+  border-bottom: 1px solid $text-03;
+  margin-bottom: spacing.$spacing-04;
+  background-color: $ui-01;
+}
+
+.actionsBtn {
+  float: right;
+}
+
+.tableContainer {
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+}
+
+.search {
+  max-width: 16rem;
+
+  input {
+    background-color: $ui-02 !important;
+  }
+}
+
+.tableContainer {
+  background-color: $ui-01;
+
+  a {
+    text-decoration: none;
+  }
+
+  tr {
+    width: spacing.$spacing-01;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.queueTable tr:last-of-type {
+  td {
+    border-bottom: none;
+  }
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: spacing.$spacing-11 0;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.content {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.helper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}

package/src/queue-patient-linelists/queue-linelist-base-table.test.tsx

@@ -0,0 +1,93 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { mockMappedAppointmentsData } from '__mocks__';
+import { renderWithSwr } from 'tools';
+import QueuePatientBaseTable from './queue-linelist-base-table.component';
+
+const tableHeaders = [
+  {
+    id: 0,
+    header: 'Name',
+    key: 'name',
+  },
+  {
+    id: 1,
+    header: 'Return Date',
+    key: 'returnDate',
+  },
+  {
+    id: 2,
+    header: 'Gender',
+    key: 'gender',
+  },
+  {
+    id: 3,
+    header: 'Age',
+    key: 'age',
+  },
+  {
+    id: 4,
+    header: 'Visit Type',
+    key: 'visitType',
+  },
+  {
+    id: 5,
+    header: 'Phone Number',
+    key: 'phoneNumber',
+  },
+];
+
+const testProps = {
+  title: 'Scheduled appointments',
+  patientData: mockMappedAppointmentsData.data,
+  headers: tableHeaders,
+  serviceType: '',
+  isLoading: false,
+};
+
+describe('QueuePatientBaseTable: ', () => {
+  it('renders a tabular overview of appointments data when available', async () => {
+    const user = userEvent.setup();
+
+    renderQueueBaseTable();
+
+    expect(screen.queryByText(/scheduled appointments/i)).toBeInTheDocument();
+    const expectedColumnHeaders = [/name/, /return date/, /gender/, /age/, /visit type/, /phone number/];
+    expectedColumnHeaders.forEach((header) => {
+      expect(screen.getByRole('columnheader', { name: new RegExp(header, 'i') })).toBeInTheDocument();
+    });
+
+    const expectedTableRows = [
+      /John Wilson Today, 02:08 PM Male 45 HIV Clinic 0700123456/,
+      /Eric Test Ric Today, 02:08 PM Male 32 TB Clinic 0700987654/,
+    ];
+
+    expectedTableRows.forEach((row) => {
+      expect(screen.queryByRole('row', { name: new RegExp(row, 'i') })).not.toBeInTheDocument();
+    });
+
+    const searchBox = screen.getByRole('searchbox');
+    await user.type(searchBox, 'John');
+
+    expect(screen.queryByText(/john wilson/i)).toBeInTheDocument();
+    expect(screen.queryByText(/eric test ric/i)).not.toBeInTheDocument();
+
+    await user.clear(searchBox);
+    await user.type(searchBox, 'gibberish');
+    expect(screen.queryByText(/john wilson/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/eric test ric/i)).not.toBeInTheDocument();
+  });
+
+  it('renders an empty state view if data is unavailable', async () => {
+    testProps.patientData = [];
+    renderQueueBaseTable();
+
+    expect(screen.getByText(/scheduled appointments/i)).toBeInTheDocument();
+    expect(screen.getByText(/no patients to display/i)).toBeInTheDocument();
+  });
+});
+
+function renderQueueBaseTable() {
+  renderWithSwr(<QueuePatientBaseTable {...testProps} />);
+}

package/src/queue-patient-linelists/queue-linelist-filter.scss

@@ -0,0 +1,63 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.wrapper {
+  background-color: $ui-02;
+  padding: spacing.$spacing-06;
+}
+
+.grid {
+  padding: 0 spacing.$spacing-06 spacing.$spacing-03;
+  background-color: $ui-01;
+  margin-bottom: spacing.$spacing-05;
+}
+
+.heading {
+  color: $text-02;
+  @include type.type-style('heading-compact-02');
+  margin: spacing.$spacing-04 0 spacing.$spacing-04;
+}
+
+.radioButton {
+  margin-top: spacing.$spacing-03;
+}
+
+.button {
+  height: spacing.$spacing-10;
+  display: flex;
+  align-content: flex-start;
+  align-items: baseline;
+  min-width: 50%;
+}
+
+.numberInputs {
+  margin-top: spacing.$spacing-02;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.tablet {
+  padding: spacing.$spacing-06 spacing.$spacing-05;
+  background-color: $ui-02;
+}
+
+.desktop {
+  padding: 0rem;
+  margin-top: spacing.$spacing-05;
+}
+
+/* Desktop */
+:global(.omrs-breakpoint-gt-tablet) {
+  .form {
+    height: calc(100vh - 6rem);
+  }
+}
+
+/* Tablet */
+:global(.omrs-breakpoint-lt-desktop) {
+  .form {
+    height: calc(100vh - 3rem);
+  }
+}

package/src/queue-patient-linelists/queue-linelist-filter.test.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
+import { mockVisitTypes } from '__mocks__';
+import QueueLinelistFilter from './queue-linelist-filter.workspace';
+
+jest.mock('@openmrs/esm-framework', () => ({
+  ...jest.requireActual('@openmrs/esm-framework'),
+  useLayoutType: jest.fn(() => 'tablet'),
+  useVisitTypes: jest.fn(() => mockVisitTypes),
+  toOpemrsIsoString: jest.fn(),
+}));
+
+const workspaceProps = {
+  closeWorkspace: jest.fn(),
+  promptBeforeClosing: jest.fn(),
+  closeWorkspaceWithSavedChanges: jest.fn(),
+};
+
+describe('QueueLinelistFilter', () => {
+  it('renders the form with filter elements', () => {
+    render(<QueueLinelistFilter {...workspaceProps} />);
+
+    expect(screen.getByText('Gender')).toBeInTheDocument();
+    expect(screen.getByLabelText('Age')).toBeInTheDocument();
+    expect(screen.getByLabelText('Between')).toBeInTheDocument();
+    expect(screen.getByLabelText('And')).toBeInTheDocument();
+    expect(screen.getByLabelText('Date')).toBeInTheDocument();
+    expect(screen.getByText("Use today's date")).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { name: /Select visit type/i })).toBeInTheDocument();
+    expect(screen.getByText('Cancel')).toBeInTheDocument();
+    expect(screen.getByText('Apply filters')).toBeInTheDocument();
+  });
+
+  it('calls closePanel function when cancel button is clicked', async () => {
+    const user = userEvent.setup();
+    const closeWorkspace = jest.fn();
+
+    render(<QueueLinelistFilter {...{ ...workspaceProps, closeWorkspace }} />);
+
+    const cancelButton = screen.getByText('Cancel');
+    await user.click(cancelButton);
+
+    expect(closeWorkspace).toHaveBeenCalledTimes(1);
+  });
+
+  it('updates gender state when a radio button is selected', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueLinelistFilter {...workspaceProps} />);
+
+    const maleRadioButton = screen.getByLabelText('Male');
+    await user.click(maleRadioButton);
+
+    expect(maleRadioButton).toBeChecked();
+  });
+
+  it('updates startAge state when a number is entered', async () => {
+    const user = userEvent.setup();
+    render(<QueueLinelistFilter {...workspaceProps} />);
+
+    const startAgeInput = screen.getByLabelText('Between');
+    await user.type(startAgeInput, '10');
+
+    expect(startAgeInput).toHaveValue(10);
+  });
+
+  it('updates returnDate state when date input changes', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueLinelistFilter {...workspaceProps} />);
+
+    const returnDateInput = screen.getByLabelText('Date');
+
+    await user.clear(returnDateInput);
+    await user.type(returnDateInput, '2023-08-20');
+
+    expect(returnDateInput).toHaveValue('2023-08-20');
+  });
+
+  it('should open the visit type dropdown and close after selection', async () => {
+    const user = userEvent.setup();
+
+    render(<QueueLinelistFilter {...workspaceProps} />);
+
+    const visitTypeDropdown = screen.getByRole('combobox', { name: /Select visit type/i });
+    await user.click(visitTypeDropdown);
+
+    const type1Option = screen.getByText('Outpatient Visit');
+    await user.click(type1Option);
+
+    expect(visitTypeDropdown).toHaveTextContent('Open menu');
+  });
+});