@thrustdevs/esm-procedure-orders-app 1.0.2-pre.6

package/src/ui-components/overflow-menu.component.tsx

@@ -0,0 +1,74 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import classNames from 'classnames';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './overflow-menu.scss';
+
+interface OrderCustomOverflowMenuComponentProps {
+  menuTitle: React.ReactNode;
+  children: React.ReactNode;
+}
+
+const OrderCustomOverflowMenuComponent: React.FC<OrderCustomOverflowMenuComponentProps> = ({ children, menuTitle }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const isTablet = useLayoutType() === 'tablet';
+  const wrapperRef = useRef(null);
+
+  const toggleShowMenu = useCallback(() => setShowMenu((state) => !state), []);
+
+  useEffect(() => {
+    /**
+     * Toggle showMenu if clicked on outside of element
+     */
+    function handleClickOutside(event: MouseEvent) {
+      if (wrapperRef.current && !wrapperRef.current.contains(event.target)) {
+        setShowMenu(false);
+      }
+    }
+
+    // Bind the event listener
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      // Unbind the event listener on clean up
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [wrapperRef]);
+
+  return (
+    <div data-overflow-menu className={classNames('cds--overflow-menu', styles.container)} ref={wrapperRef}>
+      <button
+        className={classNames(
+          'cds--btn',
+          'cds--btn--ghost',
+          'cds--overflow-menu__trigger',
+          { 'cds--overflow-menu--open': showMenu },
+          styles.overflowMenuButton,
+        )}
+        aria-haspopup="true"
+        aria-expanded={showMenu}
+        id="custom-actions-overflow-menu-trigger"
+        aria-controls="custom-actions-overflow-menu"
+        onClick={toggleShowMenu}>
+        {menuTitle}
+      </button>
+      <div
+        className={classNames('cds--overflow-menu-options', 'cds--overflow-menu--flip', styles.menu, {
+          [styles.show]: showMenu,
+        })}
+        tabIndex={0}
+        data-floating-menu-direction="bottom"
+        role="menu"
+        aria-labelledby="custom-actions-overflow-menu-trigger"
+        id="custom-actions-overflow-menu">
+        <ul
+          className={classNames('cds--overflow-menu-options__content', {
+            'cds--overflow-menu-options--lg': isTablet,
+          })}>
+          {children}
+        </ul>
+        <span />
+      </div>
+    </div>
+  );
+};
+
+export default OrderCustomOverflowMenuComponent;

package/src/ui-components/overflow-menu.scss

@@ -0,0 +1,39 @@
+@use '@carbon/colors';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.container {
+  position: relative;
+  top: 0px;
+}
+
+.menu {
+  display: none;
+  top: 3.125rem;
+  min-width: initial;
+  left: auto;
+  right: 0;
+  background-color: vars.$ui-01;
+  margin-right: 0.2rem;
+  box-shadow: 0 6px 6px rgb(0 0 0 / 30%);
+}
+
+.show {
+  display: block;
+}
+
+.overflowMenuButton {
+  width: auto;
+  height: auto;
+  padding: 0.875rem 1rem;
+  color: colors.$blue-60;
+  display: flex;
+  align-items: center;
+
+  &:hover {
+    background-color: colors.$gray-10-hover;
+  }
+}
+
+.deceased {
+  color: colors.$blue-40;
+}

package/src/utils/functions.ts

@@ -0,0 +1,236 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+
+export const trimVisitNumber = (visitNumber: string) => {
+  if (!visitNumber) {
+    return;
+  }
+  return visitNumber.substring(15);
+};
+
+export const formatWaitTime = (waitTime: string, t) => {
+  const num = parseInt(waitTime);
+  const hours = num / 60;
+  const rhours = Math.floor(hours);
+  const minutes = (hours - rhours) * 60;
+  const rminutes = Math.round(minutes);
+  if (rhours > 0) {
+    return rhours + ' ' + `${t('hoursAnd', 'hours and ')}` + rminutes + ' ' + `${t('minutes', 'minutes')}`;
+  } else {
+    return rminutes + ' ' + `${t('minutes', 'minutes')}`;
+  }
+};
+
+export const getTagColor = (waitTime: string) => {
+  const num = parseInt(waitTime);
+  if (num <= 30) {
+    return 'green';
+  } else if (num > 30 && num <= 45) {
+    return 'orange';
+  } else {
+    return 'red';
+  }
+};
+
+export const getStatusColor = (fulfillerStatus: string) => {
+  if (fulfillerStatus === 'COMPLETED') {
+    return 'green';
+  } else if (fulfillerStatus === 'IN_PROGRESS') {
+    return 'orange';
+  } else {
+    return 'red';
+  }
+};
+export interface PatientResource {
+  uuid: string;
+  display: string;
+  identifiers: Identifier[];
+  person: Person;
+  voided: boolean;
+  auditInfo: AuditInfo;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Identifier {
+  display: string;
+  uuid: string;
+  identifier: string;
+  identifierType: IdentifierType;
+  location: Location;
+  preferred: boolean;
+  voided: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface IdentifierType {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export interface Location {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface Person {
+  uuid: string;
+  display: string;
+  gender: string;
+  age: number;
+  birthdate: string;
+  birthdateEstimated: boolean;
+  dead: boolean;
+  deathDate: any;
+  causeOfDeath: any;
+  preferredName: PreferredName;
+  preferredAddress: PreferredAddress;
+  names: Name[];
+  addresses: Address[];
+  attributes: Attribute[];
+  voided: boolean;
+  auditInfo: AuditInfo;
+  birthtime: any;
+  deathdateEstimated: boolean;
+  causeOfDeathNonCoded: any;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface PreferredName {
+  display: string;
+  uuid: string;
+  givenName: string;
+  middleName: string;
+  familyName: string;
+  familyName2: any;
+  voided: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface PreferredAddress {
+  display: any;
+  uuid: string;
+  preferred: boolean;
+  address1: any;
+  address2: any;
+  cityVillage: any;
+  stateProvince: string;
+  country: string;
+  postalCode: any;
+  countyDistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: any;
+  startDate: any;
+  endDate: any;
+  latitude: any;
+  longitude: any;
+  voided: boolean;
+  address7: any;
+  address8: any;
+  address9: any;
+  address10: any;
+  address11: any;
+  address12: any;
+  address13: any;
+  address14: any;
+  address15: any;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Name {
+  display: string;
+  uuid: string;
+  givenName: string;
+  middleName: string;
+  familyName: string;
+  familyName2: any;
+  voided: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Address {
+  display: any;
+  uuid: string;
+  preferred: boolean;
+  address1: any;
+  address2: any;
+  cityVillage: any;
+  stateProvince: string;
+  country: string;
+  postalCode: any;
+  countyDistrict: string;
+  address3: string;
+  address4: string;
+  address5: string;
+  address6: any;
+  startDate: any;
+  endDate: any;
+  latitude: any;
+  longitude: any;
+  voided: boolean;
+  address7: any;
+  address8: any;
+  address9: any;
+  address10: any;
+  address11: any;
+  address12: any;
+  address13: any;
+  address14: any;
+  address15: any;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface Attribute {
+  display: string;
+  uuid: string;
+  value: string;
+  attributeType: AttributeType;
+  voided: boolean;
+  links: Link[];
+  resourceVersion: string;
+}
+
+export interface AttributeType {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export interface AuditInfo {
+  creator: Creator;
+  dateCreated: string;
+  changedBy: any;
+  dateChanged: any;
+}
+
+export interface Creator {
+  uuid: string;
+  display: string;
+  links: Link[];
+}
+
+export function useGetPatientByUuid(uuid: string) {
+  const apiUrl = `${restBaseUrl}/patient/${uuid}?v=full`;
+  const { data, error, isLoading } = useSWR<{ data: PatientResource }, Error>(apiUrl, openmrsFetch);
+  return {
+    patient: data?.data,
+    isLoading,
+    isError: error,
+  };
+}

package/src/utils/orders-table/orders-data-table.component.tsx

@@ -0,0 +1,129 @@
+import React, { useState, useMemo } from 'react';
+import {
+  DataTable,
+  Pagination,
+  Table,
+  TableBody,
+  TableCell,
+  TableContainer,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tile,
+  TableToolbar,
+  TableToolbarContent,
+  Layer,
+  TableToolbarSearch,
+  Dropdown,
+  DatePicker,
+  DatePickerInput,
+} from '@carbon/react';
+import styles from './orders-data-table.scss';
+import { useTranslation } from 'react-i18next';
+
+interface OrdersDataTableProps {
+  tabTitle: string;
+  currentPage: number;
+  currentPageSize: number;
+  pageSizes: number[];
+  totalItems: number;
+  setPageSize: (page: number) => void;
+  goTo: (page: number) => void;
+  orders: Array<Record<string, any>>;
+  rows: Array<Record<string, any>>;
+  columns: Array<Record<string, any>>;
+}
+
+const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
+  tabTitle,
+  currentPage,
+  currentPageSize,
+  pageSizes,
+  totalItems,
+  setPageSize,
+  goTo,
+  rows,
+  columns,
+}) => {
+  const { t } = useTranslation();
+
+  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState('');
+
+  return (
+    <DataTable rows={rows} headers={columns} useZebraStyles>
+      {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
+        <TableContainer className={styles.tableContainer}>
+          <TableToolbar style={{ position: 'static' }}>
+            <TableToolbarContent>
+              <Layer style={{ margin: '5px' }}>
+                <DatePicker dateFormat="Y-m-d" datePickerType="single">
+                  <DatePickerInput
+                    labelText={''}
+                    id="activatedOnOrAfterDate"
+                    placeholder="YYYY-MM-DD"
+                    onChange={(event) => {
+                      setActivatedOnOrAfterDate(event?.target?.value);
+                    }}
+                    type="date"
+                    value={activatedOnOrAfterDate}
+                  />
+                </DatePicker>
+              </Layer>
+              <Layer style={{ margin: '5px' }}>
+                <TableToolbarSearch persistent placeholder={t('searchThisList', 'Search this list')} size="sm" />
+              </Layer>
+            </TableToolbarContent>
+          </TableToolbar>
+          <Table {...getTableProps()} className={styles.activePatientsTable}>
+            <TableHead>
+              <TableRow>
+                {headers.map((header) => (
+                  <TableHeader {...getHeaderProps({ header })}>{header.header?.content ?? header.header}</TableHeader>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {rows.map((row) => (
+                <React.Fragment key={row.id}>
+                  <TableRow {...getRowProps({ row })} key={row.id}>
+                    {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}>
+              <Tile className={styles.tile}>
+                <div className={styles.tileContent}>
+                  <p className={styles.content}>{t('noOrdersList', `No ${tabTitle} orders to display`)}</p>
+                </div>
+              </Tile>
+            </div>
+          ) : null}
+          <Pagination
+            forwardText="Next page"
+            backwardText="Previous page"
+            page={currentPage}
+            pageSize={currentPageSize}
+            pageSizes={pageSizes}
+            totalItems={totalItems}
+            className={styles.pagination}
+            onChange={({ pageSize, page }) => {
+              if (pageSize !== currentPageSize) {
+                setPageSize(pageSize);
+              }
+              if (page !== currentPage) {
+                goTo(page);
+              }
+            }}
+          />
+        </TableContainer>
+      )}
+    </DataTable>
+  );
+};
+
+export default OrdersDataTable;

package/src/utils/orders-table/orders-data-table.scss

@@ -0,0 +1,50 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+@import '../../root.scss';
+
+.tableContainer {
+  background-color: vars.$ui-01;
+  margin: 0 spacing.$spacing-05;
+  padding: 0;
+
+  a {
+    text-decoration: none;
+  }
+
+  th {
+    color: vars.$text-02;
+  }
+
+  :global(.cds--data-table) {
+    background-color: vars.$ui-03;
+  }
+
+  .toolbarContent {
+    height: spacing.$spacing-07;
+    margin-bottom: spacing.$spacing-02;
+  }
+}
+
+.tileContainer {
+  background-color: vars.$ui-02;
+  border-top: 1px solid vars.$ui-03;
+  padding: 5rem 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: vars.$text-02;
+  margin-bottom: 0.5rem;
+}

package/src/work-list/work-list.component.tsx

@@ -0,0 +1,38 @@
+import React, { useState, useMemo, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import styles from './work-list.scss';
+import Overlay from '../components/overlay/overlay.component';
+import { useOrdersWorklist } from '../hooks/useOrdersWorklist';
+import GroupedOrdersTable from '../shared/ui/common/grouped-orders-table.component';
+import { DataTableSkeleton } from '@carbon/react';
+import { type WorklistProps } from '../types';
+
+const WorkList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
+  const { t } = useTranslation();
+
+  const { workListEntries, isLoading } = useOrdersWorklist('', fulfillerStatus);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  return (
+    <>
+      <div>
+        <div className={styles.headerBtnContainer}></div>
+        <GroupedOrdersTable
+          orders={workListEntries}
+          showActions={true}
+          showStatus={true}
+          showOrderType={true}
+          showStartButton={false}
+          title={t('workList', 'Work List')}
+          actions={[{ actionName: 'postProcedureResultForm' }, { actionName: 'reject-procedure-order-dialog' }]}
+        />
+      </div>
+      <Overlay />
+    </>
+  );
+};
+
+export default WorkList;

package/src/work-list/work-list.resource.ts

@@ -0,0 +1,26 @@
+import { openmrsFetch, useConfig } from '@openmrs/esm-framework';
+import useSWR from 'swr';
+import { type ConfigObject } from '../config-schema';
+import { type Result } from '../types';
+
+export function useGetOrdersWorklist(activatedOnOrAfterDate: string, fulfillerStatus: string) {
+  const config = useConfig() as ConfigObject;
+
+  const apiUrl = `/ws/rest/v1/order?orderTypes=${config.testOrderTypeUuid}&activatedOnOrAfterDate=${activatedOnOrAfterDate}&isStopped=false&fulfillerStatus=${fulfillerStatus}&v=full`;
+
+  const { data, error, isLoading } = useSWR<{ data: { results: Array<Result> } }, Error>(apiUrl, openmrsFetch);
+
+  const orders = data?.data?.results?.filter((order) => {
+    if (fulfillerStatus === '') {
+      return order.fulfillerStatus === null && order.dateStopped === null && order.action === 'NEW';
+    } else if (fulfillerStatus === 'IN_PROGRESS') {
+      return order.fulfillerStatus === 'IN_PROGRESS' && order.dateStopped === null && order.action !== 'DISCONTINUE';
+    }
+  });
+
+  return {
+    workListEntries: orders?.length > 0 ? orders : [],
+    isLoading,
+    isError: error,
+  };
+}