@kenyaemr/esm-service-queues-app 8.1.1-pre.124 → 8.1.2-pre.152

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

@@ -1,277 +0,0 @@
-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 { type ActiveVisit, useMissingQueueEntries } from './visits-missing-inqueue.resource';
-import { Add } from '@carbon/react/icons';
-import { type ConfigObject } from '../config-schema';
-import styles from './visits-missing-inqueue.scss';
-
-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

@@ -1,93 +0,0 @@
-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,
-    error: !visitsError && !queueError,
-    visitsIsValidating,
-    mutateQueueEntries,
-  };
-}
-
-export const getOriginFromPathName = (pathname = '') => {
-  const from = pathname.split('/');
-  return last(from);
-};

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

@@ -1,111 +0,0 @@
-@use '@carbon/layout';
-@use '@carbon/type';
-
-.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: layout.$spacing-04 0 layout.$spacing-04 layout.$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 layout.$spacing-05;
-  display: flex;
-  align-items: center;
-}
-
-.visitSummaryContainer {
-  width: 100%;
-  max-width: 48rem;
-  margin: layout.$spacing-05 auto;
-}
-
-.expandedActiveVisitRow > td > div {
-  max-height: max-content !important;
-}
-
-.expandedActiveVisitRow td {
-  padding: 0 layout.$spacing-07;
-}
-
-.expandedActiveVisitRow th[colspan] td[colspan] > div:first-child {
-  padding: 0 layout.$spacing-05;
-}
-
-.action {
-  margin-bottom: layout.$spacing-03;
-}
-
-.content {
-  @include type.type-style('heading-compact-01');
-  color: $text-02;
-  margin-top: layout.$spacing-05;
-  margin-bottom: layout.$spacing-03;
-}
-
-.desktopHeading,
-.tabletHeading {
-  text-align: left;
-  text-transform: capitalize;
-  margin-bottom: layout.$spacing-05;
-
-  h4 {
-    @include type.type-style('heading-compact-02');
-    color: $text-02;
-
-    &:after {
-      content: '';
-      display: block;
-      width: layout.$spacing-07;
-      padding-top: 3px;
-      border-bottom: 0.375rem solid;
-      @include brand-03(border-bottom-color);
-    }
-  }
-}
-
-.tile {
-  text-align: center;
-}
-
-.bodyLong01 {
-  @include type.type-style('body-01');
-}