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

package/src/visits-missing-inqueue/visits-missing-inqueue.component.tsx

@@ -0,0 +1,277 @@
+import React, { useMemo, useEffect, useState, useCallback, type AnchorHTMLAttributes } from 'react';
+import classNames from 'classnames';
+import {
+  DataTable,
+  DataTableSkeleton,
+  InlineLoading,
+  Layer,
+  Pagination,
+  Search,
+  Table,
+  TableContainer,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  TableToolbar,
+  TableToolbarContent,
+  TableExpandRow,
+  TableExpandHeader,
+  TableExpandedRow,
+  Tile,
+  Button,
+} from '@carbon/react';
+import {
+  useLayoutType,
+  isDesktop,
+  useConfig,
+  usePagination,
+  ExtensionSlot,
+  formatDatetime,
+  parseDate,
+  showModal,
+  ConfigurableLink,
+} from '@openmrs/esm-framework';
+import { useTranslation } from 'react-i18next';
+import styles from './visits-missing-inqueue.scss';
+import { type ActiveVisit, useMissingQueueEntries } from './visits-missing-inqueue.resource';
+import { Add } from '@carbon/react/icons';
+import { type ConfigObject } from '../config-schema';
+
+interface PaginationData {
+  goTo: (page: number) => void;
+  results: Array<ActiveVisit>;
+  currentPage: number;
+}
+
+function AddMenu({ visitDetails }: { visitDetails: ActiveVisit }) {
+  const { t } = useTranslation();
+  const launchAddVisitToQueueModal = useCallback(() => {
+    const dispose = showModal('add-visit-to-queue-modal', {
+      closeModal: () => dispose(),
+      visitDetails,
+    });
+  }, [visitDetails]);
+
+  return (
+    <Button
+      kind="ghost"
+      onClick={launchAddVisitToQueueModal}
+      iconDescription={t('addisitToQueueTooltip', 'Add to queue')}
+      renderIcon={(props) => <Add size={16} {...props} />}>
+      {t('addToQueue', 'Add to queue')}
+    </Button>
+  );
+}
+
+const MissingQueueEntries = () => {
+  const { t } = useTranslation();
+  const config = useConfig<ConfigObject>();
+  const layout = useLayoutType();
+  const { activeVisits, isLoading, visitsIsValidating } = useMissingQueueEntries();
+  const pageSizes = [10, 20, 30, 40, 50];
+  const [currentPageSize, setPageSize] = useState(10);
+  const [searchString, setSearchString] = useState('');
+
+  const headerData = useMemo(
+    () => [
+      {
+        id: 0,
+        header: t('visitStartTime', 'Visit Time'),
+        key: 'visitStartTime',
+      },
+      {
+        id: 1,
+        header: t('idNumber', 'ID Number'),
+        key: 'idNumber',
+      },
+      {
+        id: 2,
+        header: t('name', 'Name'),
+        key: 'name',
+      },
+      {
+        id: 3,
+        header: t('gender', 'Gender'),
+        key: 'gender',
+      },
+      {
+        id: 4,
+        header: t('age', 'Age'),
+        key: 'age',
+      },
+      {
+        id: 5,
+        header: t('visitType', 'Visit Type'),
+        key: 'visitType',
+      },
+    ],
+    [t],
+  );
+
+  const rowData = activeVisits.map((visit) => ({
+    ...visit,
+    visitStartTime: formatDatetime(parseDate(visit.visitStartTime)),
+  }));
+
+  const searchResults = useMemo(() => {
+    if (searchString && searchString.trim() !== '') {
+      const search = searchString.toLowerCase();
+      return rowData.filter((activeVisitRow) =>
+        Object.keys(activeVisitRow).some((header) => {
+          if (header === 'patientUuid') {
+            return false;
+          }
+          return `${activeVisitRow[header]}`.toLowerCase().includes(search);
+        }),
+      );
+    } else {
+      return rowData;
+    }
+  }, [searchString, rowData]);
+
+  const {
+    goTo,
+    results: paginatedActiveVisits,
+    currentPage,
+  }: PaginationData = usePagination(searchResults, currentPageSize);
+
+  const handleSearch = useCallback((e) => setSearchString(e.target.value), []);
+
+  useEffect(() => {
+    if (currentPage !== 1) {
+      goTo(1);
+    }
+  }, [searchString, currentPage, goTo]);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+  if (activeVisits?.length) {
+    return (
+      <div className={styles.activeVisitsContainer}>
+        <div className={styles.activeVisitsDetailHeaderContainer}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{t('activeVisitsNotInQueue', 'Active visits not in queue')}</h4>
+          </div>
+          <div className={styles.backgroundDataFetchingIndicator}>
+            <span>{visitsIsValidating ? <InlineLoading /> : null}</span>
+          </div>
+        </div>
+        <DataTable
+          rows={paginatedActiveVisits}
+          headers={headerData}
+          size={isDesktop(layout) ? 'xs' : 'md'}
+          useZebraStyles={activeVisits?.length > 1 ? true : false}>
+          {({ rows, headers, getHeaderProps, getTableProps, getBatchActionProps, getRowProps }) => (
+            <TableContainer className={styles.tableContainer}>
+              <TableToolbar>
+                <TableToolbarContent>
+                  <Search
+                    tabIndex={getBatchActionProps().shouldShowBatchActions ? -1 : 0}
+                    labelText=""
+                    placeholder={t('filterTable', 'Filter table')}
+                    onChange={handleSearch}
+                  />
+                </TableToolbarContent>
+              </TableToolbar>
+              <Table className={styles.activeVisitsTable} {...getTableProps()}>
+                <TableHead>
+                  <TableRow>
+                    <TableExpandHeader />
+                    {headers.map((header) => (
+                      <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                    ))}
+                  </TableRow>
+                </TableHead>
+                <TableBody>
+                  {rows.map((row, index) => (
+                    <React.Fragment key={index}>
+                      <TableExpandRow {...getRowProps({ row })}>
+                        {row.cells.map((cell) => (
+                          <TableCell key={cell.id}>
+                            {cell.info.header === 'name' ? (
+                              <ConfigurableLink
+                                to={`\${openmrsSpaBase}/patient/${paginatedActiveVisits?.[index]?.patientUuid}/chart/`}>
+                                {cell.value}
+                              </ConfigurableLink>
+                            ) : (
+                              cell.value
+                            )}
+                          </TableCell>
+                        ))}
+                        <TableCell className="cds--table-column-menu">
+                          <AddMenu visitDetails={paginatedActiveVisits?.[index]} />
+                        </TableCell>
+                      </TableExpandRow>
+                      {row.isExpanded ? (
+                        <TableRow className={styles.expandedActiveVisitRow}>
+                          <th colSpan={headers.length + 2}>
+                            <ExtensionSlot
+                              className={styles.visitSummaryContainer}
+                              name="visit-summary-slot"
+                              state={{
+                                visitUuid: paginatedActiveVisits[index]?.visitUuid,
+                                patientUuid: paginatedActiveVisits[index]?.patientUuid,
+                              }}
+                            />
+                          </th>
+                        </TableRow>
+                      ) : (
+                        <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 2} />
+                      )}
+                    </React.Fragment>
+                  ))}
+                </TableBody>
+              </Table>
+              {rows.length === 0 && (
+                <p
+                  style={{
+                    height: isDesktop(layout) ? '2rem' : '3rem',
+                    margin: '1rem 1.5rem',
+                  }}
+                  className={classNames(styles.emptyRow, styles.bodyLong01)}>
+                  {t('noVisitsNotInQueueFound', 'No visits currently not in queue found')}
+                </p>
+              )}
+              <Pagination
+                forwardText="Next page"
+                backwardText="Previous page"
+                page={currentPage}
+                pageSize={currentPageSize}
+                pageSizes={pageSizes}
+                totalItems={searchResults.length}
+                className={styles.pagination}
+                onChange={({ pageSize, page }) => {
+                  if (pageSize !== currentPageSize) {
+                    setPageSize(pageSize);
+                  }
+                  if (page !== currentPage) {
+                    goTo(page);
+                  }
+                }}
+              />
+            </TableContainer>
+          )}
+        </DataTable>
+      </div>
+    );
+  }
+  return (
+    <div className={styles.activeVisitsContainer}>
+      <Layer>
+        <Tile className={styles.tile}>
+          <div className={!isDesktop(layout) ? styles.tabletHeading : styles.desktopHeading}>
+            <h4>{t('activeVisits', 'Active Visits')}</h4>
+          </div>
+          <p className={styles.content}>
+            {t('noActiveVisitsForLocation', 'There are no active visits to display for this location.')}
+          </p>
+        </Tile>
+      </Layer>
+    </div>
+  );
+};
+
+export default MissingQueueEntries;

package/src/visits-missing-inqueue/visits-missing-inqueue.resource.ts

@@ -0,0 +1,93 @@
+import useSWR from 'swr';
+import dayjs from 'dayjs';
+import isToday from 'dayjs/plugin/isToday';
+import last from 'lodash-es/last';
+import { openmrsFetch, type Visit, useSession, restBaseUrl } from '@openmrs/esm-framework';
+import { type VisitQueueEntry } from '../active-visits/active-visits-table.resource';
+
+dayjs.extend(isToday);
+
+export interface ActiveVisit {
+  age: string;
+  id: string;
+  idNumber: string;
+  gender: string;
+  location: string;
+  name: string;
+  patientUuid: string;
+  visitStartTime: string;
+  visitType: string;
+  visitUuid: string;
+}
+
+export function useMissingQueueEntries() {
+  const currentUserSession = useSession();
+  const startDate = dayjs().format('YYYY-MM-DD');
+  const sessionLocation = currentUserSession?.sessionLocation?.uuid;
+
+  const customRepresentation =
+    'custom:(uuid,patient:(uuid,identifiers:(identifier,uuid),person:(age,display,gender,uuid)),' +
+    'visitType:(uuid,name,display),location:(uuid,name,display),startDatetime,' +
+    'stopDatetime)&fromStartDate=' +
+    startDate +
+    '&location=' +
+    sessionLocation;
+  const url = `${restBaseUrl}/visit?includeInactive=false&v=${customRepresentation}`;
+  const {
+    data: visitsData,
+    error: visitsError,
+    isValidating: visitsIsValidating,
+  } = useSWR<{ data: { results: Array<Visit> } }, Error>(sessionLocation ? url : null, openmrsFetch);
+
+  const apiUrl = `${restBaseUrl}/visit-queue-entry`;
+  const {
+    data: queueData,
+    error: queueError,
+    isValidating: queueIsValidating,
+    mutate: mutateQueueEntries,
+  } = useSWR<{ data: { results: Array<VisitQueueEntry> } }, Error>(apiUrl, openmrsFetch);
+
+  const byId = {};
+  queueData?.data?.results.forEach((item) => {
+    if (item?.queueEntry.patient?.uuid) {
+      byId[item?.queueEntry.patient?.uuid] = true;
+    }
+  });
+
+  const data = visitsData?.data?.results?.filter((item) => {
+    if (byId[item?.patient?.uuid]) {
+      return false;
+    }
+    return true;
+  });
+
+  const mapVisitProperties = (visit: Visit): ActiveVisit => ({
+    age: visit?.patient?.person?.age,
+    id: visit.uuid,
+    idNumber: visit?.patient?.identifiers[0]?.identifier,
+    gender: visit?.patient?.person?.gender,
+    location: visit?.location?.uuid,
+    name: visit?.patient?.person?.display,
+    patientUuid: visit?.patient?.uuid,
+    visitStartTime: visit?.startDatetime,
+    visitType: visit?.visitType?.display,
+    visitUuid: visit.uuid,
+  });
+
+  const formattedActiveVisits = data?.length
+    ? data.map(mapVisitProperties).filter(({ visitStartTime }) => dayjs(visitStartTime).isToday())
+    : [];
+
+  return {
+    activeVisits: formattedActiveVisits,
+    isLoading: !data && !visitsError && !queueError,
+    isError: !visitsError && !queueError,
+    visitsIsValidating,
+    mutateQueueEntries,
+  };
+}
+
+export const getOriginFromPathName = (pathname = '') => {
+  const from = pathname.split('/');
+  return last(from);
+};

package/src/visits-missing-inqueue/visits-missing-inqueue.scss

@@ -0,0 +1,108 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../root.scss';
+
+.activeVisitsContainer {
+  background-color: $ui-background;
+  border: 1px solid $ui-03;
+  width: 100%;
+  margin: 0 auto;
+  max-width: 95vw;
+}
+
+.activeVisitsDetailHeaderContainer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: spacing.$spacing-04 0 spacing.$spacing-04 spacing.$spacing-05;
+  background-color: $ui-background;
+}
+
+.backgroundDataFetchingIndicator {
+  align-items: center;
+  display: flex;
+  flex: 1 1 0%;
+  justify-content: center;
+}
+
+.tableContainer section {
+  position: relative;
+}
+
+.tableContainer a {
+  text-decoration: none;
+}
+
+.tableContainer {
+  :global(.cds--data-table) {
+    background-color: $ui-03;
+  }
+}
+
+.pagination {
+  overflow: hidden;
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.emptyRow {
+  padding: 0 1rem;
+  display: flex;
+  align-items: center;
+}
+
+.visitSummaryContainer {
+  width: 100%;
+  max-width: 768px;
+  margin: 1rem auto;
+}
+
+.expandedActiveVisitRow > td > div {
+  max-height: max-content !important;
+}
+
+.expandedActiveVisitRow td {
+  padding: 0 2rem;
+}
+
+.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
+  padding: 0 1rem;
+}
+
+.action {
+  margin-bottom: spacing.$spacing-03;
+}
+
+.content {
+  @include type.type-style('heading-compact-01');
+  color: $text-02;
+  margin-top: spacing.$spacing-05;
+  margin-bottom: spacing.$spacing-03;
+}
+
+.desktopHeading,
+.tabletHeading {
+  text-align: left;
+  text-transform: capitalize;
+  margin-bottom: spacing.$spacing-05;
+
+  h4 {
+    @include type.type-style('heading-compact-02');
+    color: $text-02;
+
+    &:after {
+      content: '';
+      display: block;
+      width: 2rem;
+      padding-top: 3px;
+      border-bottom: 0.375rem solid;
+      @include brand-03(border-bottom-color);
+    }
+  }
+}
+
+.tile {
+  text-align: center;
+}