@openmrs/esm-service-queues-app 5.0.1-pre.2087

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

@@ -0,0 +1,230 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  DataTable,
+  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, parseDate, usePagination } from '@openmrs/esm-framework';
+import styles from './queue-linelist-base-table.scss';
+import { FilterTypes } from '../types';
+import QueueLinelist from './queue-linelist.component';
+import { getGender } from '../helpers/functions';
+
+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 [showOverlay, setShowOverlay] = useState(false);
+  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 (1)')}
+              onClick={() => setShowOverlay(true)}
+              size="sm">
+              {t('filter', 'Filter (1)')}
+            </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}
+      />
+
+      {showOverlay && <QueueLinelist closePanel={() => setShowOverlay(false)} />}
+    </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,118 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { usePagination } from '@openmrs/esm-framework';
+import { mockMappedAppointmentsData } from '../../../../__mocks__/appointments.mock';
+import { renderWithSwr } from '../../../../tools/test-helpers';
+import QueuePatientBaseTable from './queue-linelist-base-table.component';
+
+const mockUsePagination = usePagination as jest.Mock;
+const mockGoToPage = jest.fn();
+
+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,
+};
+
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
+  return {
+    ...originalModule,
+    openmrsFetch: jest.fn(),
+    usePagination: jest.fn(),
+  };
+});
+
+describe('QueuePatientBaseTable: ', () => {
+  it('renders a tabular overview of appointments data when available', async () => {
+    const user = userEvent.setup();
+
+    mockUsePagination.mockReturnValue({
+      results: testProps.patientData,
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+
+    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 () => {
+    mockUsePagination.mockReturnValue({
+      results: [],
+      goTo: mockGoToPage,
+      currentPage: 1,
+    });
+
+    renderQueueBaseTable();
+
+    expect(screen.queryByRole('progressbar')).not.toBeInTheDocument();
+    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.component.tsx

@@ -0,0 +1,172 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  DatePicker,
+  DatePickerInput,
+  Form,
+  Layer,
+  Stack,
+  RadioButtonGroup,
+  RadioButton,
+  Dropdown,
+  Column,
+  Button,
+  ButtonSet,
+  NumberInput,
+  Toggle,
+} from '@carbon/react';
+import dayjs from 'dayjs';
+import { toDateObjectStrict, toOmrsIsoString, useLayoutType, useVisitTypes } from '@openmrs/esm-framework';
+import styles from './queue-linelist-filter.scss';
+
+interface QueueLinelistFilterProps {
+  closePanel: () => void;
+}
+
+const QueueLinelistFilter: React.FC<QueueLinelistFilterProps> = ({ closePanel }) => {
+  const { t } = useTranslation();
+  const [gender, setGender] = useState('');
+  const [startAge, setStartAge] = useState<number>();
+  const [endAge, setEndAge] = useState<number>();
+  const [returnDate, setReturnDate] = useState(new Date());
+  const [visitType, setVisitType] = useState('');
+  const isTablet = useLayoutType() === 'tablet';
+  const allVisitTypes = useVisitTypes();
+
+  const handleFilter = useCallback(
+    (event) => {
+      event.preventDefault();
+
+      const payload = {
+        gender: gender,
+        startAge: startAge,
+        endAge: endAge,
+        returnDate: toDateObjectStrict(
+          toOmrsIsoString(new Date(dayjs(returnDate).year(), dayjs(returnDate).month(), dayjs(returnDate).date())),
+        ),
+        visitType: visitType,
+      };
+    },
+    [gender, startAge, endAge, returnDate, visitType],
+  );
+
+  const handleTodaysDate = () => {
+    setReturnDate(new Date());
+  };
+
+  return (
+    <>
+      <Form onSubmit={handleFilter}>
+        <div className={styles.wrapper}>
+          <Stack gap={4} className={styles.grid}>
+            <Column>
+              <p className={styles.heading}> {t('gender', 'Gender')}</p>
+              <RadioButtonGroup name="gender" orientation="vertical" onChange={(event) => setGender(event.toString())}>
+                <RadioButton
+                  className={styles.radioButton}
+                  id="male"
+                  labelText={t('maleLabelText', 'Male')}
+                  value="Male"
+                />
+                <RadioButton
+                  className={styles.radioButton}
+                  id="female"
+                  labelText={t('femaleLabelText', 'Female')}
+                  value="Female"
+                />
+              </RadioButtonGroup>
+            </Column>
+          </Stack>
+
+          <Stack gap={4} className={styles.grid}>
+            <Column md={2}>
+              <p className={styles.heading}> {t('age', 'Age')}</p>
+              <Layer>
+                <Toggle
+                  size="sm"
+                  aria-label={t('age', 'Age')}
+                  defaultToggled
+                  id="age"
+                  labelA="Off"
+                  labelB="On"
+                  labelText=""
+                />
+              </Layer>
+              <Layer className={styles.numberInputs}>
+                <Layer>
+                  <NumberInput
+                    id="startAge"
+                    invalidText={t('startAgeRangeInvalid', 'Start age range is not valid')}
+                    label={t('between', 'Between')}
+                    max={100}
+                    min={0}
+                    onChange={(event) => setStartAge(event.target.value)}
+                    size="md"
+                    value={startAge}
+                  />
+                </Layer>
+                <Layer>
+                  <NumberInput
+                    id="endAge"
+                    invalidText={t('endAgeRangeInvalid', 'End age range is not valid')}
+                    label={t('and', 'And')}
+                    max={100}
+                    min={0}
+                    onChange={(event) => setEndAge(event.target.value)}
+                    size="md"
+                    value={endAge}
+                  />
+                </Layer>
+              </Layer>
+            </Column>
+          </Stack>
+
+          <Stack gap={4} className={styles.grid}>
+            <Column md={2}>
+              <p className={styles.heading}> {t('returnDate', 'Return Date')}</p>
+              <Layer>
+                <DatePicker datePickerType="single" value={returnDate} onChange={([date]) => setReturnDate(date)}>
+                  <DatePickerInput id="returnDate" placeholder="mm/dd/yyyy" labelText={t('date', 'Date')} type="date" />
+                </DatePicker>
+              </Layer>
+              <Button
+                kind="ghost"
+                onClick={() => {
+                  handleTodaysDate();
+                }}>
+                {t('useTodaysDate', "Use today's date")}
+              </Button>
+            </Column>
+          </Stack>
+
+          <Stack gap={4} className={styles.grid}>
+            <Column>
+              <p className={styles.heading}>{t('visitType', 'Visit Type')}</p>
+              <Layer>
+                <Dropdown
+                  id="visitType"
+                  label={t('selectVisitTyoe', 'Select visit type')}
+                  items={allVisitTypes}
+                  onChange={(event) => setVisitType(event.selectedItem.toString)}
+                  size="sm"
+                  itemToElement={(item) => (item ? <span>{item.display}</span> : null)}
+                />
+              </Layer>
+            </Column>
+          </Stack>
+        </div>
+
+        <ButtonSet className={isTablet ? styles.tablet : styles.desktop}>
+          <Button className={styles.button} kind="secondary" onClick={closePanel}>
+            {t('cancel', 'Cancel')}
+          </Button>
+          <Button className={styles.button} kind="primary" type="submit">
+            {t('applyFilters', 'Apply filters')}
+          </Button>
+        </ButtonSet>
+      </Form>
+    </>
+  );
+};
+
+export default QueueLinelistFilter;

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);
+  }
+}