@ampath/esm-dispensing-app 1.10.0-next.1

package/src/prescriptions/prescription-tab-panel.component.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { MultiSelect, Search, TabPanel } from '@carbon/react';
+import { useConfig, useDebounce, useSession } from '@openmrs/esm-framework';
+import { type PharmacyConfig } from '../config-schema';
+import PrescriptionsTable from './prescriptions-table.component';
+import styles from './prescriptions.scss';
+import { useLocations } from '../location/location.resource';
+import { type SimpleLocation } from '../types';
+
+interface PrescriptionTabPanelProps {
+  isTabActive: boolean;
+  status?: string;
+  customPrescriptionsTableEndpoint?: string;
+}
+
+const PrescriptionTabPanel: React.FC<PrescriptionTabPanelProps> = ({
+  status,
+  isTabActive,
+  customPrescriptionsTableEndpoint,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const isInitialized = useRef(false);
+  const { sessionLocation } = useSession();
+  const { locations, isLoading: isFilterLocationsLoading } = useLocations(config);
+  const [searchTerm, setSearchTerm] = useState('');
+  const debouncedSearchTerm = useDebounce(searchTerm, 500);
+  const [filterLocations, setFilterLocations] = useState<SimpleLocation[]>([]);
+
+  // set any initially selected locations
+  useEffect(() => {
+    if (!isInitialized.current && !isFilterLocationsLoading && sessionLocation?.uuid) {
+      setFilterLocations(locations?.filter((l) => sessionLocation?.uuid === l.associatedPharmacyLocation) || []);
+      isInitialized.current = true; // we only want to run when the component is first mounted so we don't override user changes
+    }
+  }, [isFilterLocationsLoading, sessionLocation, locations]);
+
+  return (
+    <TabPanel>
+      <div className={styles.searchContainer}>
+        {config.locationBehavior?.locationFilter?.enabled &&
+          !isFilterLocationsLoading &&
+          isInitialized.current &&
+          locations?.length > 1 && (
+            <MultiSelect
+              hideLabel
+              id="locationFilter"
+              label={t('filterByLocations', 'Filter by locations')}
+              initialSelectedItems={filterLocations}
+              items={locations}
+              itemToString={(item: SimpleLocation) => item?.name}
+              onChange={({ selectedItems }) => {
+                setFilterLocations(selectedItems);
+              }}
+              className={styles.locationFilter}
+            />
+          )}
+        <Search
+          closeButtonLabelText={t('clearSearchInput', 'Clear search input')}
+          defaultValue={searchTerm}
+          placeholder={t('searchByPatientIdOrName', 'Search by patient ID or name')}
+          labelText={t('searchByPatientIdOrName', 'Search by patient ID or name')}
+          onChange={(e) => {
+            e.preventDefault();
+            setSearchTerm(e.target.value);
+          }}
+          size="md"
+          className={styles.patientSearch}
+        />
+      </div>
+      <PrescriptionsTable
+        loadData={isTabActive}
+        status={status}
+        customPrescriptionsTableEndpoint={customPrescriptionsTableEndpoint}
+        debouncedSearchTerm={debouncedSearchTerm}
+        locations={filterLocations}
+      />
+    </TabPanel>
+  );
+};
+
+export default PrescriptionTabPanel;

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

@@ -0,0 +1,189 @@
+import React, { useEffect, useState } from 'react';
+import {
+  DataTable,
+  DataTableSkeleton,
+  Layer,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableExpandedRow,
+  TableExpandHeader,
+  TableExpandRow,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+} from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { formatDatetime, parseDate, useConfig } from '@openmrs/esm-framework';
+import { usePrescriptionsTable } from '../medication-request/medication-request.resource';
+import { type PharmacyConfig } from '../config-schema';
+import { type SimpleLocation } from '../types';
+import PatientInfoCell from '../patient/patient-info-cell.component';
+import PrescriptionExpanded from './prescription-expanded.component';
+import styles from './prescriptions.scss';
+
+interface PrescriptionsTableProps {
+  loadData: boolean;
+  debouncedSearchTerm: string;
+  locations: SimpleLocation[];
+  status?: string;
+  customPrescriptionsTableEndpoint?: string;
+}
+
+const PrescriptionsTable: React.FC<PrescriptionsTableProps> = ({
+  loadData,
+  debouncedSearchTerm,
+  locations,
+  status,
+  customPrescriptionsTableEndpoint,
+}) => {
+  const { t } = useTranslation();
+  const config = useConfig<PharmacyConfig>();
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const nextOffSet = (page - 1) * pageSize;
+  const { prescriptionsTableRows, error, isLoading, totalOrders } = usePrescriptionsTable(
+    loadData,
+    customPrescriptionsTableEndpoint,
+    status,
+    pageSize,
+    nextOffSet,
+    debouncedSearchTerm,
+    locations,
+    config.medicationRequestExpirationPeriodInDays,
+    config.refreshInterval,
+  );
+
+  // reset back to page 1 whenever search term changes
+  useEffect(() => {
+    setPage(1);
+  }, [debouncedSearchTerm]);
+
+  // dynamic status keys we need to maintain
+  // t('active', 'Active')
+  // t('paused', 'Paused')
+  // t('closed', 'Closed')
+  // t('completed', 'Completed')
+  // t('expired', 'Expired')
+  // t('cancelled', 'Cancelled')
+
+  let columns = [
+    { header: t('created', 'Created'), key: 'created' },
+    { header: t('patientName', 'Patient name'), key: 'patient' },
+    { header: t('prescriber', 'Prescriber'), key: 'prescriber' },
+    { header: t('drugs', 'Drugs'), key: 'drugs' },
+    { header: t('lastDispenser', 'Last dispenser'), key: 'lastDispenser' },
+    { header: t('status', 'Status'), key: 'status' },
+  ];
+
+  // add the locations column, if enabled
+  if (config.locationBehavior?.locationColumn?.enabled) {
+    columns = [...columns.slice(0, 3), { header: t('location', 'Location'), key: 'location' }, ...columns.slice(3)];
+  }
+
+  return (
+    <div className={styles.patientListTableContainer}>
+      {isLoading && <DataTableSkeleton role="progressbar" />}
+      {error && (
+        <div className={styles.filterEmptyState}>
+          <Layer>
+            <Tile className={styles.filterEmptyStateTile}>
+              <p className={styles.filterEmptyStateContent}>
+                {t('errorLoadingPrescriptions', 'Error loading prescriptions')}
+              </p>
+              <p className={styles.filterEmptyStateHelper}>{error?.message}</p>
+            </Tile>
+          </Layer>
+        </div>
+      )}
+      {prescriptionsTableRows && (
+        <>
+          <DataTable rows={prescriptionsTableRows} headers={columns} isSortable>
+            {({ rows, headers, getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps }) => (
+              <TableContainer>
+                <Table {...getTableProps()} useZebraStyles>
+                  <TableHead>
+                    <TableRow>
+                      <TableExpandHeader {...getExpandHeaderProps()} />
+                      {headers.map((header) => (
+                        <TableHeader {...getHeaderProps({ header })}>{header.header}</TableHeader>
+                      ))}
+                    </TableRow>
+                  </TableHead>
+                  <TableBody>
+                    {rows.map((row) => (
+                      <React.Fragment key={row.id}>
+                        <TableExpandRow {...getRowProps({ row })}>
+                          {row.cells.map((cell) => (
+                            <TableCell key={cell.id}>
+                              {cell.id.endsWith('created') ? (
+                                formatDatetime(parseDate(cell.value))
+                              ) : cell.id.endsWith('patient') ? (
+                                <PatientInfoCell patient={cell.value} />
+                              ) : cell.id.endsWith('status') ? (
+                                t(cell.value)
+                              ) : (
+                                cell.value
+                              )}
+                            </TableCell>
+                          ))}
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow colSpan={headers.length + 1}>
+                            {row.cells.find((cell) => cell.id.endsWith('patient'))?.value?.uuid && (
+                              <PrescriptionExpanded
+                                encounterUuid={row.id}
+                                patientUuid={row.cells.find((cell) => cell.id.endsWith('patient')).value.uuid}
+                              />
+                            )}
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow className={styles.hiddenRow} colSpan={headers.length + 1} />
+                        )}
+                      </React.Fragment>
+                    ))}
+                  </TableBody>
+                </Table>
+              </TableContainer>
+            )}
+          </DataTable>
+          {prescriptionsTableRows?.length === 0 && (
+            <div className={styles.filterEmptyState}>
+              <Layer>
+                <Tile className={styles.filterEmptyStateTile}>
+                  <p className={styles.filterEmptyStateContent}>
+                    {t('noPrescriptionsToDisplay', 'No prescriptions to display')}
+                  </p>
+                  <p className={styles.filterEmptyStateHelper}>{t('checkFilters', 'Check the filters above')}</p>
+                </Tile>
+              </Layer>
+            </div>
+          )}
+          {prescriptionsTableRows?.length > 0 && (
+            <div className={styles.paginationContainer}>
+              <Pagination
+                page={page}
+                pageSize={pageSize}
+                pageSizes={[10, 20, 30, 40, 50, 100]}
+                totalItems={totalOrders}
+                onChange={({ page: newPage, pageSize: newPageSize }) => {
+                  if (newPageSize !== pageSize) {
+                    setPage(1);
+                  } else {
+                    setPage(newPage);
+                  }
+                  setPageSize(newPageSize);
+                }}
+              />
+            </div>
+          )}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default PrescriptionsTable;

package/src/prescriptions/prescriptions.scss

@@ -0,0 +1,152 @@
+@use '@carbon/layout';
+@use '@carbon/type';
+@use '@openmrs/esm-styleguide/src/vars' as *;
+
+.link {
+  text-decoration: none;
+}
+
+.breadcrumbsSlot {
+  grid-row: 1 / 2;
+  grid-column: 1 / 2;
+}
+
+.prescriptionTabsContainer {
+  height: 100%;
+  width: 100%;
+
+  :global(.cds--tab-content) {
+    padding: 0 !important;
+  }
+}
+
+.newListButton {
+  width: fit-content;
+  justify-self: end;
+  align-self: center;
+}
+
+.tabsContainer {
+  background-color: $ui-02;
+  padding: 0 layout.$spacing-05;
+
+  :global(.cds--tabs__nav-item--selected) {
+    box-shadow: inset 0 layout.$spacing-01 0 0 var(--brand-03) !important;
+  }
+
+  :global(.cds--tab--list) button {
+    max-width: 12rem !important;
+  }
+}
+
+.patientListTableContainer {
+  grid-row: 3 / 4;
+  grid-column: 1 / 2;
+  height: 100%;
+  margin: 0 layout.$spacing-05;
+  background-color: $ui-01;
+  border: 0.5px solid #e0e0e0;
+
+  :global(.cds--data-table-container) {
+    padding-top: 0 !important;
+  }
+
+  tbody > tr > :nth-child(2) {
+    white-space: nowrap;
+  }
+
+  :global(.cds--data-table td) {
+    height: unset !important;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 1) td {
+    background-color: $ui-02;
+    border-bottom: 1px solid $ui-03;
+    border-top: 1px solid $ui-03;
+  }
+
+  :global(.cds--data-table--zebra) tbody tr[data-parent-row]:nth-child(4n + 3) td {
+    background-color: $ui-01;
+    border-bottom: 1px solid $ui-03;
+  }
+
+  :global(.cds--pagination) {
+    border-top: none !important;
+  }
+
+  :global(.cds--table-expand__button) {
+    height: layout.$spacing-07 !important;
+  }
+}
+
+.searchContainer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: layout.$spacing-05;
+  padding: layout.$spacing-05 layout.$spacing-05 0;
+
+  :global(.cds--search-magnifier-icon) {
+    z-index: 0 !important;
+  }
+
+  input {
+    background-color: #fff;
+  }
+}
+
+.addPrescriptionBtn {
+  width: layout.$spacing-13 !important;
+  padding: layout.$spacing-05 !important;
+  margin-left: layout.$spacing-05;
+  margin-right: layout.$spacing-05;
+}
+
+.patientSearch {
+  width: 25rem;
+  border-bottom-color: $ui-03;
+}
+
+.locationFilter {
+  width: 25rem;
+}
+
+.search {
+  width: 100%;
+  max-width: 16rem;
+  background-color: $ui-02;
+  border-bottom-color: $ui-03;
+}
+
+.hiddenRow {
+  display: none;
+}
+
+.filterEmptyState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: layout.$spacing-09;
+  text-align: center;
+  background-color: $ui-02;
+}
+
+.filterEmptyStateTile {
+  margin: auto;
+  background-color: $ui-01;
+}
+
+.filterEmptyStateContent {
+  @include type.type-style('heading-compact-02');
+  color: $text-02;
+  margin-bottom: layout.$spacing-03;
+}
+
+.filterEmptyStateHelper {
+  @include type.type-style('body-compact-01');
+  color: $text-02;
+}
+
+.paginationContainer {
+  width: 100%;
+}

package/src/print-prescription/prescription-print-action.component.tsx

@@ -0,0 +1,30 @@
+import React, { useCallback } from 'react';
+import { Button } from '@carbon/react';
+import { Printer } from '@carbon/react/icons';
+import { useTranslation } from 'react-i18next';
+import { showModal } from '@openmrs/esm-framework';
+
+type PrescriptionPrintActionProps = {
+  encounterUuid: string;
+  patientUuid: string;
+};
+
+const PrescriptionPrintAction: React.FC<PrescriptionPrintActionProps> = ({ encounterUuid, patientUuid }) => {
+  const { t } = useTranslation();
+
+  const handleClick = useCallback(() => {
+    const dispose = showModal('prescription-print-preview-modal', {
+      onClose: () => dispose(),
+      encounterUuid,
+      patientUuid,
+    });
+  }, [encounterUuid, patientUuid]);
+
+  return (
+    <Button renderIcon={Printer} iconDescription={t('print', 'Print')} onClick={handleClick} kind="ghost">
+      {t('printPrescriptions', 'Print prescriptions')}
+    </Button>
+  );
+};
+
+export default PrescriptionPrintAction;

package/src/print-prescription/prescription-print-preview.modal.tsx

@@ -0,0 +1,92 @@
+import React, { useRef, useState } from 'react';
+import { useReactToPrint } from 'react-to-print';
+import { useTranslation } from 'react-i18next';
+import {
+  Button,
+  ButtonSet,
+  InlineLoading,
+  InlineNotification,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+} from '@carbon/react';
+import { ErrorState, getCoreTranslation } from '@openmrs/esm-framework';
+import { usePrescriptionDetails } from '../medication-request/medication-request.resource';
+import PrescriptionsPrintout from './prescription-printout.component';
+import PrintablePrescriptionsSelector from './printable-prescriptions.component';
+import styles from './print-prescription.scss';
+
+type PrescriptionPrintPreviewModalProps = {
+  onClose: () => void;
+  encounterUuid: string;
+  patientUuid: string;
+  status: string;
+};
+
+const PrescriptionPrintPreviewModal: React.FC<PrescriptionPrintPreviewModalProps> = ({ onClose, encounterUuid }) => {
+  const { t } = useTranslation();
+  const { medicationRequestBundles, error, isLoading } = usePrescriptionDetails(encounterUuid);
+
+  const [excludedPrescriptions, setExcludedPrescriptions] = useState<string[]>([]);
+  const [printError, setPrintError] = useState<string | null>(null);
+  const componentRef = useRef<HTMLDivElement>(null);
+
+  const handlePrint = useReactToPrint({
+    content: () => componentRef.current,
+    onBeforeGetContent: () => {
+      setPrintError(null);
+    },
+    onPrintError: (error) => {
+      setPrintError(t('printError', 'An error occurred while printing. Please try again.'));
+    },
+    copyStyles: true,
+  });
+
+  return (
+    <>
+      <ModalHeader closeModal={onClose} className={styles.title}>
+        {t('printPrescriptions', 'Print prescriptions')}
+      </ModalHeader>
+      <ModalBody>
+        {isLoading && (
+          <InlineLoading
+            status="active"
+            iconDescription="Loading"
+            description={t('loading', 'Loading prescriptions') + '....'}
+          />
+        )}
+        {error && <ErrorState error={error} headerTitle={t('error', 'Error')} />}
+        {!isLoading && medicationRequestBundles?.length > 0 && (
+          <div className={styles.printoutSelectorRow}>
+            <PrintablePrescriptionsSelector
+              medicationRequests={medicationRequestBundles}
+              excludedPrescription={excludedPrescriptions}
+              onExcludedPrescriptionChange={setExcludedPrescriptions}
+            />
+            <div ref={componentRef}>
+              <PrescriptionsPrintout
+                excludedPrescription={excludedPrescriptions}
+                medicationRequests={medicationRequestBundles}
+              />
+            </div>
+          </div>
+        )}
+        {printError && (
+          <InlineNotification kind="error" title={t('printErrorTitle', 'Print Error')} subtitle={printError} />
+        )}
+      </ModalBody>
+      <ModalFooter>
+        <ButtonSet className={styles.btnSet}>
+          <Button kind="secondary" onClick={onClose} type="button">
+            {getCoreTranslation('cancel', 'Cancel')}
+          </Button>
+          <Button kind="primary" onClick={handlePrint} type="button" disabled={isLoading}>
+            {t('print', 'Print')}
+          </Button>
+        </ButtonSet>
+      </ModalFooter>
+    </>
+  );
+};
+
+export default PrescriptionPrintPreviewModal;