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

package/src/queue-table/queue-table-metrics-card.component.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Layer, Tile } from '@carbon/react';
+import { useQueueEntriesMetrics } from '../hooks/useQueueEntries';
+import styles from './queue-table-metrics-card.scss';
+
+interface QueueTableMetricsCardProps {
+  value?: number;
+  queueUuid?: string;
+  status?: string;
+  headerLabel: string;
+  children?: React.ReactNode;
+}
+
+const QueueTableMetricsCard: React.FC<QueueTableMetricsCardProps> = ({
+  value,
+  queueUuid,
+  status,
+  headerLabel,
+  children,
+}) => {
+  const { t } = useTranslation();
+  const { count } = useQueueEntriesMetrics({
+    queue: queueUuid,
+    status: status,
+    isEnded: false,
+  });
+
+  return (
+    <Layer
+      className={classNames(styles.container, {
+        [styles.cardWithChildren]: children,
+      })}>
+      <Tile className={styles.tileContainerWithoutBorder}>
+        <div className={styles.tileHeader}>
+          <div className={styles.headerLabelContainer}>
+            <label className={styles.headerLabel}>{headerLabel}</label>
+            {children}
+          </div>
+        </div>
+        <div>
+          <label className={styles.valueLabel}>{!isNaN(value) ? value : count}</label>
+        </div>
+      </Tile>
+    </Layer>
+  );
+};
+
+export default QueueTableMetricsCard;

package/src/queue-table/queue-table-metrics-card.scss

@@ -0,0 +1,48 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  flex-grow: 1;
+}
+
+/* Tablet viewport */
+:global(.omrs-breakpoint-lt-desktop) {
+  // The card containing the dropdown element should be the first to overflow on tablet
+  .cardWithChildren {
+    order: 3;
+  }
+}
+
+.tileContainerWithoutBorder {
+  height: 4.875rem;
+}
+
+.tileHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.headerLabel {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+}
+
+.valueLabel {
+  font-size: x-large;
+}
+
+.headerLabelContainer {
+  display: flex;
+  height: spacing.$spacing-07;
+
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+    margin-top: -0.75rem;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+}

package/src/queue-table/queue-table-metrics.component.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useQueueEntries, useQueueEntriesMetrics } from '../hooks/useQueueEntries';
+import QueueTableMetricsCard from './queue-table-metrics-card.component';
+import styles from './queue-table-metrics.scss';
+import { type Queue } from '../types';
+
+interface QueueTableMetricsProps {
+  selectedQueue: Queue;
+}
+
+function QueueTableMetrics({ selectedQueue }: QueueTableMetricsProps) {
+  const { t } = useTranslation();
+
+  const allowedStatuses = selectedQueue.allowedStatuses;
+  const { count } = useQueueEntriesMetrics({ queue: selectedQueue.uuid, isEnded: false });
+
+  return (
+    <div className={styles.metricsBorder}>
+      <QueueTableMetricsCard value={count} headerLabel={t('totalPatients', 'Total Patients')} />
+      {allowedStatuses?.map((status) => {
+        return (
+          <QueueTableMetricsCard queueUuid={selectedQueue.uuid} status={status.uuid} headerLabel={status.display} />
+        );
+      })}
+    </div>
+  );
+}
+
+export default QueueTableMetrics;

package/src/queue-table/queue-table-metrics.scss

@@ -0,0 +1,11 @@
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.metricsBorder {
+  border: 0.0625rem solid $ui-03;
+  background-color: $ui-02;
+  display: flex;
+  justify-content: space-between;
+  flex-flow: row wrap;
+  margin-top: -(spacing.$spacing-03);
+}

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

@@ -0,0 +1,179 @@
+import React, { useEffect, useState, type FC } from 'react';
+import {
+  DataTable,
+  InlineLoading,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  TableToolbar,
+  TableToolbarContent,
+  Tile,
+} from '@carbon/react';
+import { isDesktop, useLayoutType, usePagination } from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import { type QueueEntry, type QueueTableColumn } from '../types';
+import styles from './queue-table.scss';
+import { useColumns } from './cells/columns.resource';
+
+interface QueueTableProps {
+  queueEntries: QueueEntry[];
+  isValidating?: boolean;
+
+  // the queueUuid and statusUuid are used to determine the columns
+  // to display based on the tablesConfig configuration.
+  // For a table displaying entries of a particular queue (across all statuses)
+  // statusUuid param should be null.
+  // For a table displaying entries from multiple quueues
+  // both queueUuid and statusUuid params should be null
+  queueUuid: string;
+  statusUuid: string;
+
+  // If provided, overides the columns specified by the tablesConfig configuration.
+  queueTableColumnsOverride?: QueueTableColumn[];
+
+  // if provided, a queue entry row can be expanded with the
+  // provided component rendering more info about the row
+  ExpandedRow?: FC<{ queueEntry: QueueEntry }>;
+
+  // if provided, adds addition table toolbar elements
+  tableFilter?: React.ReactNode[];
+
+  // if provided, adds title to the top-left
+  header?: string;
+}
+
+function QueueTable({
+  queueEntries,
+  isValidating,
+  queueUuid,
+  statusUuid,
+  queueTableColumnsOverride,
+  ExpandedRow,
+  tableFilter,
+  header,
+}: QueueTableProps) {
+  const { t } = useTranslation();
+  const [currentPageSize, setPageSize] = useState(10);
+  const pageSizes = [10, 20, 30, 40, 50];
+
+  const { goTo, results: paginatedQueueEntries, currentPage } = usePagination(queueEntries, currentPageSize);
+  const layout = useLayoutType();
+  const responsiveSize = isDesktop(layout) ? 'sm' : 'lg';
+
+  const columnsFromConfig = useColumns(queueUuid, statusUuid);
+  const columns = queueTableColumnsOverride ?? columnsFromConfig ?? [];
+
+  useEffect(() => {
+    goTo(1);
+  }, [queueEntries]);
+
+  const rowsData =
+    paginatedQueueEntries?.map((queueEntry) => {
+      const row: Record<string, JSX.Element | string> = { id: queueEntry.uuid };
+      columns.forEach(({ key, CellComponent }) => {
+        row[key] = <CellComponent queueEntry={queueEntry} />;
+      });
+      return row;
+    }) ?? [];
+
+  if (columns.length == 0) {
+    return <p>{t('noColumnsDefined', 'No table columns defined. Check Configuration')}</p>;
+  }
+
+  return (
+    <DataTable
+      data-floating-menu-container
+      overflowMenuOnHover={isDesktop(layout)}
+      rows={rowsData}
+      headers={columns}
+      size={responsiveSize}
+      useZebraStyles>
+      {({ rows, headers, getTableProps, getHeaderProps, getRowProps, getToolbarProps, getExpandHeaderProps }) => (
+        <>
+          <TableContainer className={styles.tableContainer}>
+            <div className={styles.toolbarContainer}>
+              <h5 className={styles.tableHeader}>{header}</h5>
+              {isValidating ? (
+                <span>
+                  <InlineLoading />
+                </span>
+              ) : null}
+
+              {tableFilter && (
+                <TableToolbar {...getToolbarProps()}>
+                  <TableToolbarContent className={styles.toolbarContent}>{tableFilter}</TableToolbarContent>
+                </TableToolbar>
+              )}
+            </div>
+            <Table {...getTableProps()} className={styles.queueTable} useZebraStyles>
+              <TableHead>
+                <TableRow>
+                  {ExpandedRow && <TableExpandHeader enableToggle {...getExpandHeaderProps()} />}
+                  {headers.map((header) => (
+                    <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {rows.map((row, i) => {
+                  const Row = ExpandedRow ? TableExpandRow : TableRow;
+
+                  return (
+                    <React.Fragment key={row.id}>
+                      <Row {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>{cell.value}</TableCell>
+                        ))}
+                      </Row>
+                      {ExpandedRow && row.isExpanded && (
+                        <TableExpandedRow className={styles.expandedActiveVisitRow} colSpan={headers.length + 1}>
+                          <ExpandedRow queueEntry={paginatedQueueEntries[i]} />
+                        </TableExpandedRow>
+                      )}
+                    </React.Fragment>
+                  );
+                })}
+              </TableBody>
+            </Table>
+          </TableContainer>
+          {rows.length === 0 && (
+            <div className={styles.tileContainer}>
+              <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>
+            </div>
+          )}
+          <Pagination
+            forwardText={t('nextPage', 'Next page')}
+            backwardText={t('previousPage', 'Previous page')}
+            page={currentPage}
+            pageSize={currentPageSize}
+            pageSizes={pageSizes}
+            totalItems={queueEntries?.length}
+            onChange={({ pageSize, page }) => {
+              if (pageSize !== currentPageSize) {
+                setPageSize(pageSize);
+              }
+              if (page !== currentPage) {
+                goTo(page);
+              }
+            }}
+          />
+        </>
+      )}
+    </DataTable>
+  );
+}
+
+export default QueueTable;

package/src/queue-table/queue-table.scss

@@ -0,0 +1,192 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/spacing';
+@import '~@openmrs/esm-styleguide/src/vars';
+
+.container {
+  background-color: $ui-01;
+}
+
+.headerContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  background-color: $ui-background;
+}
+
+.headerButtons {
+  display: flex;
+  flex-flow: column;
+}
+
+.filterContainer {
+  :global(.cds--dropdown__wrapper--inline) {
+    gap: 0;
+  }
+
+  :global(.cds--list-box__menu-icon) {
+    height: 1rem;
+  }
+
+  :global(.cds--dropdown--inline) :global(.cds--list-box__field) {
+    min-width: 12rem;
+  }
+}
+
+.statusContainer {
+  display: flex;
+  align-items: center;
+
+  svg {
+    margin-right: 0.5rem;
+  }
+}
+
+.search {
+  max-width: 16rem;
+  display: inline;
+
+  input {
+    background-color: $ui-02 !important;
+  }
+}
+
+.statusTableContainer {
+  padding: spacing.$spacing-05;
+}
+
+.tableHeader {
+  padding: 8px 0;
+}
+
+.tableContainer {
+  background-color: $ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: $text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: $ui-03;
+  }
+
+  .toolbarContainer {
+    display: flex;
+  }
+
+  .toolbarContent {
+    display: flex;
+    z-index: 1; // prevent dropdown from getting covered by table elements
+  }
+
+  :global(.cds--table-toolbar) {
+    position: static;
+    overflow: visible;
+  }
+}
+
+.desktopHeading {
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+  }
+}
+
+.tabletHeading {
+  h4 {
+    @include type.type-style('heading-03');
+    color: $text-02;
+  }
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4:after {
+    content: '';
+    display: block;
+    width: 2rem;
+    padding-top: 3px;
+    border-bottom: 0.375rem solid var(--brand-03);
+  }
+}
+
+.expandedActiveVisitRow {
+  :global(.cds--tab-content) {
+    padding: 0.5rem 0;
+  }
+
+  td {
+    padding: 0.5rem;
+
+    > div {
+      max-height: max-content !important;
+      background-color: $ui-02;
+    }
+  }
+
+  th[colspan] td[colspan] > div:first-child {
+    padding: 0 1rem;
+  }
+}
+
+// Overriding styles for RTL support
+html[dir='rtl'] {
+  .headerContainer {
+    svg {
+      margin-left: 0;
+      margin-right: spacing.$spacing-03;
+    }
+    h4 {
+      text-align: right;
+    }
+  }
+  .tableContainer {
+    th > div {
+      text-align: right;
+    }
+    td {
+      text-align: right;
+      .serviceColor {
+        margin-right: 0;
+        margin-left: spacing.$spacing-03;
+      }
+      button {
+        padding: spacing.$spacing-03 0 spacing.$spacing-03 spacing.$spacing-05;
+        text-align: right;
+      }
+    }
+  }
+}
+
+.tabList {
+  padding-left: spacing.$spacing-05;
+}
+
+.tileContainer {
+  background-color: $ui-02;
+  border-top: 1px solid $ui-03;
+  padding: 5rem 0;
+  margin: 0 spacing.$spacing-05;
+}
+
+.tile {
+  margin: auto;
+  width: fit-content;
+}
+
+.tileContent {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}