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

package/src/form/procedures-orders/api.ts

@@ -0,0 +1,282 @@
+import useSWR, { mutate } from 'swr';
+import { type FetchResponse, openmrsFetch, useConfig, restBaseUrl, showSnackbar } from '@openmrs/esm-framework';
+import { type ConfigObject } from '../../config-schema';
+import { useCallback, useMemo } from 'react';
+import type { OrderPost, PatientOrderFetchResponse } from '@openmrs/esm-patient-common-lib';
+import useSWRImmutable from 'swr/immutable';
+import { type ProcedureOrderBasketItem } from '../../types';
+
+export interface ProcedureOrderPost extends OrderPost {
+  scheduledDate?: string;
+  commentToFulfiller?: string;
+  specimenSource?: string;
+  specimenType?: string;
+  numberOfRepeats?: string;
+}
+export const careSettingUuid = '6f0c9a92-6f24-11e3-af88-005056821db0';
+/**
+ * SWR-based data fetcher for patient orders.
+ *
+ * @param patientUuid The UUID of the patient whose orders should be fetched.
+ * @param status Allows fetching either all orders or only active orders.
+ */
+export function usePatientLabOrders(patientUuid: string, status: 'ACTIVE' | 'any') {
+  const { labOrderTypeUuid: labOrderTypeUUID } = (useConfig() as ConfigObject).orders;
+  const ordersUrl = `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&status=${status}&orderType=${labOrderTypeUUID}`;
+
+  const { data, error, isLoading, isValidating } = useSWR<FetchResponse<PatientOrderFetchResponse>, Error>(
+    patientUuid ? ordersUrl : null,
+    openmrsFetch,
+  );
+
+  const mutateOrders = useCallback(
+    () => mutate((key) => typeof key === 'string' && key.startsWith(`${restBaseUrl}/order?patient=${patientUuid}`)),
+    [patientUuid],
+  );
+
+  const labOrders = useMemo(
+    () =>
+      data?.data?.results
+        ? data.data.results?.sort((order1, order2) => (order2.dateActivated > order1.dateActivated ? 1 : -1))
+        : null,
+    [data],
+  );
+
+  return {
+    data: data ? labOrders : null,
+    error,
+    isLoading,
+    isValidating,
+    mutate: mutateOrders,
+  };
+}
+
+export function useOrderReasons(conceptUuids: Array<string>) {
+  const shouldFetch = conceptUuids && conceptUuids.length > 0;
+  const url = shouldFetch ? getConceptReferenceUrls(conceptUuids) : null;
+  const { data, error, isLoading } = useSWRImmutable<FetchResponse<ConceptResponse>, Error>(
+    shouldFetch ? `${restBaseUrl}/${url[0]}` : null,
+    openmrsFetch,
+  );
+
+  const ob = data?.data;
+  const orderReasons = ob
+    ? Object.entries(ob).map(([key, value]) => ({
+        uuid: value.uuid,
+        display: value.display,
+      }))
+    : [];
+
+  if (error) {
+    showSnackbar({
+      title: error.name,
+      subtitle: error.message,
+      kind: 'error',
+    });
+  }
+
+  return { orderReasons: orderReasons, isLoading };
+}
+
+export function prepProceduresOrderPostData(
+  order: ProcedureOrderBasketItem,
+  patientUuid: string,
+  encounterUuid: string,
+): ProcedureOrderPost {
+  let payload = {};
+  if (order.action === 'NEW' || order.action === 'RENEW') {
+    payload = {
+      action: 'NEW',
+      type: 'procedureorder',
+      patient: patientUuid,
+      careSetting: careSettingUuid,
+      orderer: order.orderer,
+      encounter: encounterUuid,
+      concept: order.testType.conceptUuid,
+      frequency: order.frequency,
+      numberOfRepeats: order.numberOfRepeats,
+      urgency: order.urgency,
+      commentToFulfiller: order.commentsToFulfiller,
+      instructions: order.instructions,
+      orderReason: order.orderReason,
+      orderReasonNonCoded: order.orderReasonNonCoded,
+      bodySite: order.bodySite,
+    };
+    if (order.urgency === 'ON_SCHEDULED_DATE') {
+      payload['scheduledDate'] =
+        order.scheduleDate instanceof Date ? order.scheduleDate.toISOString() : order.scheduleDate;
+    }
+    return payload;
+  } else if (order.action === 'REVISE') {
+    payload = {
+      action: 'REVISE',
+      type: 'procedureorder',
+      patient: patientUuid,
+      careSetting: order.careSetting,
+      orderer: order.orderer,
+      encounter: encounterUuid,
+      concept: order.testType.conceptUuid,
+      specimenSource: order.specimenSource,
+      specimenType: order.specimenType,
+      frequency: order.frequency,
+      numberOfRepeats: order.numberOfRepeats,
+      urgency: order.urgency,
+      commentToFulfiller: order.commentsToFulfiller,
+      instructions: order.instructions,
+      orderReason: order.orderReason,
+      orderReasonNonCoded: order.orderReasonNonCoded,
+      previousOrder: order.previousOrder,
+    };
+    if (order.urgency === 'ON_SCHEDULED_DATE') {
+      payload['scheduledDate'] =
+        order.scheduleDate instanceof Date ? order.scheduleDate.toISOString() : order.scheduleDate;
+    }
+    return payload;
+  } else if (order.action === 'DISCONTINUE') {
+    payload = {
+      action: 'DISCONTINUE',
+      type: 'procedureorder',
+      patient: patientUuid,
+      careSetting: order.careSetting,
+      orderer: order.orderer,
+      encounter: encounterUuid,
+      concept: order.testType.conceptUuid,
+      specimenSource: order.specimenSource,
+      specimenType: order.specimenType,
+      frequency: order.frequency,
+      urgency: order.urgency,
+      numberOfRepeats: order.numberOfRepeats,
+      commentToFulfiller: order.commentsToFulfiller,
+      orderReason: order.orderReason,
+      orderReasonNonCoded: order.orderReasonNonCoded,
+      previousOrder: order.previousOrder,
+    };
+    if (order.urgency === 'ON_SCHEDULED_DATE') {
+      payload['scheduledDate'] =
+        order.scheduleDate instanceof Date ? order.scheduleDate.toISOString() : order.scheduleDate;
+    }
+    return payload;
+  } else {
+    throw new Error(`Unknown order action: ${order.action}.`);
+  }
+}
+const chunkSize = 10;
+export function getConceptReferenceUrls(conceptUuids: Array<string>) {
+  const accumulator = [];
+  for (let i = 0; i < conceptUuids.length; i += chunkSize) {
+    accumulator.push(conceptUuids.slice(i, i + chunkSize));
+  }
+
+  return accumulator.map((partition) => `conceptreferences?references=${partition.join(',')}&v=custom:(uuid,display)`);
+}
+
+export type PostDataPrepLabOrderFunction = (
+  order: ProcedureOrderBasketItem,
+  patientUuid: string,
+  encounterUuid: string,
+) => OrderPost;
+
+export interface ConceptAnswers {
+  display: string;
+  uuid: string;
+}
+export interface ConceptResponse {
+  uuid: string;
+  display: string;
+  datatype: {
+    uuid: string;
+    display: string;
+  };
+  answers: Array<ConceptAnswers>;
+  setMembers: Array<ConceptAnswers>;
+}
+
+export interface OpenmrsObject {
+  uuid: string;
+}
+
+export type BaseOpenmrsObject = OpenmrsObject;
+
+export interface SessionPriviledge {
+  uuid: string;
+  name: string;
+}
+
+export interface Person {
+  uuid: string;
+  display: string;
+}
+
+export interface Role {
+  role: string;
+  display: string;
+}
+export interface User {
+  uuid: string;
+  display: string;
+  givenName: string;
+  familyName: string;
+  firstName: string;
+  lastName: string;
+  person?: Person;
+  roles?: Role[];
+  privileges: SessionPriviledge[];
+}
+export interface Auditable extends OpenmrsObject {
+  creator: User;
+  dateCreated: Date;
+  changedBy: User;
+  dateChanged: Date;
+}
+export interface Retireable extends OpenmrsObject {
+  retired: boolean;
+  dateRetired: Date;
+  retiredBy: User;
+  retireReason: string;
+}
+
+export interface ConceptName extends BaseOpenmrsObject {
+  conceptNameId: number;
+  concept: Concept;
+  name: string;
+  localePreferred: boolean;
+  short: boolean;
+  preferred: boolean;
+  indexTerm: boolean;
+  synonym: boolean;
+  fullySpecifiedName: boolean;
+}
+export interface Concept extends BaseOpenmrsObject, Auditable, Retireable {
+  conceptId: number;
+  display: string;
+  set: boolean;
+  version: string;
+  names: ConceptName[];
+  name: ConceptName;
+  numeric: boolean;
+  complex: boolean;
+  shortNames: ConceptName[];
+  indexTerms: ConceptName[];
+  synonyms: ConceptName[];
+  setMembers: Concept[];
+  possibleValues: Concept[];
+  preferredName: ConceptName;
+  shortName: ConceptName;
+  fullySpecifiedName: ConceptName;
+  answers: Concept[];
+}
+
+export function useConceptById(id: string) {
+  const apiUrl = `ws/rest/v1/concept/${id}`;
+  const { data, error, isLoading } = useSWR<
+    {
+      data: Concept;
+    },
+    Error
+  >(apiUrl, openmrsFetch);
+  return {
+    items: data?.data || <Concept>{},
+    isLoading,
+    isError: error,
+  };
+}

package/src/form/procedures-orders/order-config.ts

@@ -0,0 +1,48 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import useSWRImmutable from 'swr/immutable';
+import { type DurationUnit, type OrderFrequency } from '../../types';
+
+export interface CommonConfigProps {
+  uuid: string;
+  display: string;
+}
+
+export interface OrderConfig {
+  durationUnits: Array<CommonConfigProps>;
+  orderFrequencies: Array<CommonConfigProps>;
+}
+
+export function useOrderConfig(): {
+  isLoading: boolean;
+  error: Error;
+  orderConfigObject: {
+    durationUnits: Array<DurationUnit>;
+    orderFrequencies: Array<OrderFrequency>;
+  };
+} {
+  const { data, error, isLoading, isValidating } = useSWRImmutable<{ data: OrderConfig }, Error>(
+    `${restBaseUrl}/orderentryconfig`,
+    openmrsFetch,
+  );
+
+  const results = useMemo(
+    () => ({
+      orderConfigObject: {
+        durationUnits: data?.data?.durationUnits?.map(({ uuid, display }) => ({
+          valueCoded: uuid,
+          value: display,
+        })),
+        orderFrequencies: data?.data?.orderFrequencies?.map(({ uuid, display }) => ({
+          valueCoded: uuid,
+          value: display,
+        })),
+      },
+      isLoading,
+      error,
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}

package/src/form/procedures-orders/procedures-order-basket-panel/procedures-icon.component.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+interface ProcedureIconProps {
+  isTablet: boolean;
+}
+
+export default function ProcedureIcon({ isTablet }: ProcedureIconProps) {
+  const size = isTablet ? 40 : 24;
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clip-path="url(#clip0_319_602)">
+        <mask id="mask0_319_602" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
+          <path d="M24 0H0V24H24V0Z" fill="white" />
+        </mask>
+        <g mask="url(#mask0_319_602)">
+          <path d="M24 0H0V24H24V0Z" fill="#FFE9BD" />
+          <g clip-path="url(#clip1_319_602)">
+            <path
+              d="M17.6122 8.1377C17.279 7.81933 16.8358 7.64167 16.375 7.64167C15.9141 7.64167 15.4709 7.81933 15.1377 8.1377L5.15015 18.125H9.1951C9.48249 18.1257 9.76718 18.0695 10.0327 17.9595C10.2982 17.8495 10.5393 17.6879 10.7419 17.4841L17.6122 10.6123C17.7748 10.4498 17.9037 10.2569 17.9917 10.0446C18.0797 9.83235 18.125 9.6048 18.125 9.37499C18.125 9.14519 18.0797 8.91763 17.9917 8.70533C17.9037 8.49303 17.7748 8.30015 17.6122 8.1377ZM10.3781 14.1344L11.2907 13.2218L12.5285 14.4597L11.616 15.3724L10.3781 14.1344ZM10.1231 16.8655C10.0015 16.9877 9.85685 17.0846 9.69757 17.1506C9.53829 17.2166 9.36751 17.2504 9.1951 17.25H7.26244L9.75938 14.7531L10.9975 15.9912L10.1231 16.8655ZM16.9934 9.99366L13.1469 13.841L11.9091 12.6032L15.7561 8.75632C15.9228 8.59715 16.1443 8.50833 16.3748 8.50833C16.6052 8.50833 16.8268 8.59715 16.9934 8.75632C17.0747 8.83756 17.1392 8.934 17.1832 9.04016C17.2271 9.14631 17.2498 9.26009 17.2498 9.37499C17.2498 9.48989 17.2271 9.60367 17.1832 9.70982C17.1392 9.81598 17.0747 9.91242 16.9934 9.99366Z"
+              fill="#D99000"
+            />
+            <path
+              d="M11.5625 5.87499C11.2919 5.87581 11.0282 5.96036 10.8077 6.11703C10.5871 6.2737 10.4205 6.49481 10.3306 6.74999H8.41928C8.34588 6.54115 8.22073 6.35433 8.05552 6.20699C7.89031 6.05966 7.69044 5.95662 7.47459 5.90751C7.25875 5.85839 7.03397 5.86481 6.82128 5.92616C6.60859 5.98751 6.41492 6.10179 6.25839 6.25831C6.10186 6.41484 5.98757 6.6085 5.92621 6.82118C5.86485 7.03387 5.85842 7.25865 5.90752 7.4745C5.95662 7.69035 6.05965 7.89022 6.20698 8.05544C6.3543 8.22065 6.54112 8.34582 6.74995 8.41923V10.3305C6.45805 10.4337 6.21202 10.6368 6.05536 10.9039C5.89871 11.1709 5.8415 11.4848 5.89385 11.7899C5.94621 12.0951 6.10476 12.3719 6.34148 12.5715C6.57819 12.771 6.87784 12.8805 7.18745 12.8805C7.49707 12.8805 7.79671 12.771 8.03343 12.5715C8.27015 12.3719 8.42869 12.0951 8.48105 11.7899C8.53341 11.4848 8.4762 11.1709 8.31954 10.9039C8.16288 10.6368 7.91686 10.4337 7.62495 10.3305V8.41945C7.80796 8.35418 7.97417 8.24904 8.11155 8.11164C8.24893 7.97424 8.35404 7.80801 8.41928 7.62499H10.3305C10.4112 7.85121 10.5524 8.05092 10.7388 8.20229C10.9253 8.35367 11.1497 8.45089 11.3877 8.48334C11.6256 8.51578 11.8679 8.4822 12.0881 8.38627C12.3082 8.29033 12.4978 8.13572 12.636 7.93935C12.7743 7.74297 12.8559 7.51238 12.8719 7.27276C12.888 7.03314 12.8379 6.79372 12.7271 6.58066C12.6163 6.3676 12.449 6.18909 12.2436 6.06464C12.0383 5.94018 11.8026 5.87458 11.5625 5.87499ZM7.18745 12C7.10092 12 7.01634 11.9743 6.94439 11.9263C6.87244 11.8782 6.81637 11.8099 6.78326 11.7299C6.75014 11.65 6.74148 11.562 6.75836 11.4771C6.77524 11.3923 6.81691 11.3143 6.87809 11.2531C6.93928 11.1919 7.01723 11.1503 7.1021 11.1334C7.18697 11.1165 7.27493 11.1252 7.35488 11.1583C7.43482 11.1914 7.50315 11.2475 7.55122 11.3194C7.59929 11.3914 7.62495 11.476 7.62495 11.5625C7.62486 11.6785 7.57874 11.7897 7.49671 11.8717C7.41468 11.9538 7.30346 11.9999 7.18745 12ZM7.18745 7.62499C7.10092 7.62499 7.01634 7.59933 6.94439 7.55126C6.87244 7.50319 6.81637 7.43486 6.78326 7.35491C6.75014 7.27497 6.74148 7.18701 6.75836 7.10214C6.77524 7.01727 6.81691 6.93932 6.87809 6.87813C6.93928 6.81695 7.01723 6.77528 7.1021 6.7584C7.18697 6.74152 7.27493 6.75018 7.35488 6.78329C7.43482 6.81641 7.50315 6.87248 7.55122 6.94443C7.59929 7.01638 7.62495 7.10096 7.62495 7.18749C7.62486 7.30349 7.57874 7.41472 7.49671 7.49675C7.41468 7.57877 7.30346 7.6249 7.18745 7.62499ZM11.5625 7.62499C11.4759 7.62499 11.3913 7.59933 11.3194 7.55126C11.2474 7.50319 11.1914 7.43486 11.1583 7.35491C11.1251 7.27497 11.1165 7.18701 11.1334 7.10214C11.1502 7.01727 11.1919 6.93932 11.2531 6.87813C11.3143 6.81695 11.3922 6.77528 11.4771 6.7584C11.562 6.74152 11.6499 6.75018 11.7299 6.78329C11.8098 6.81641 11.8781 6.87248 11.9262 6.94443C11.9743 7.01638 12 7.10096 12 7.18749C11.9999 7.30349 11.9537 7.41472 11.8717 7.49675C11.7897 7.57877 11.6785 7.6249 11.5625 7.62499Z"
+              fill="#D99000"
+            />
+          </g>
+        </g>
+      </g>
+      <defs>
+        <clipPath id="clip0_319_602">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_319_602">
+          <rect width="14" height="14" fill="white" transform="translate(5 5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/src/form/procedures-orders/procedures-order-basket-panel/procedures-order-basket-item-tile.component.tsx

@@ -0,0 +1,100 @@
+import React, { useRef } from 'react';
+import classNames from 'classnames';
+import { useTranslation } from 'react-i18next';
+import { Button, ClickableTile, Tile } from '@carbon/react';
+import { TrashCan, Warning } from '@carbon/react/icons';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './procedures-order-basket-item-tile.scss';
+import { type ProcedureOrderBasketItem } from '../../../types';
+
+export interface OrderBasketItemTileProps {
+  orderBasketItem: ProcedureOrderBasketItem;
+  onItemClick: () => void;
+  onRemoveClick: () => void;
+}
+
+export function ProceduresOrderBasketItemTile({
+  orderBasketItem,
+  onItemClick,
+  onRemoveClick,
+}: OrderBasketItemTileProps) {
+  const { t } = useTranslation();
+  const isTablet = useLayoutType() === 'tablet';
+
+  // This here is really dirty, but required.
+  // If the ref's value is false, we won't react to the ClickableTile's handleClick function.
+  // Why is this necessary?
+  // The "Remove" button is nested inside the ClickableTile. If the button's clicked, the tile also raises the
+  // handleClick event later. Not sure if this is a bug, but this shouldn't be possible in our flows.
+  // Hence, we manually prevent the handleClick callback from being invoked as soon as the button is pressed once.
+  const shouldOnClickBeCalled = useRef(true);
+
+  const labTile = (
+    <div className={styles.orderBasketItemTile}>
+      <div className={styles.clipTextWithEllipsis}>
+        <OrderActionLabel orderBasketItem={orderBasketItem} />
+        <br />
+        <span className={styles.name}>{orderBasketItem.testType?.label}</span>
+        <span className={styles.label01}>
+          {!!orderBasketItem.orderError && (
+            <>
+              <br />
+              <span className={styles.orderErrorText}>
+                <Warning size={16} /> &nbsp; <span className={styles.label01}>{t('error', 'Error').toUpperCase()}</span>{' '}
+                &nbsp;
+                {orderBasketItem.orderError.responseBody?.error?.message ?? orderBasketItem.orderError.message}
+              </span>
+            </>
+          )}
+        </span>
+      </div>
+      <Button
+        className={styles.removeButton}
+        kind="ghost"
+        hasIconOnly={true}
+        renderIcon={(props) => <TrashCan size={16} {...props} />}
+        iconDescription={t('removeFromBasket', 'Remove from basket')}
+        onClick={() => {
+          shouldOnClickBeCalled.current = false;
+          onRemoveClick();
+        }}
+        tooltipPosition="left"
+      />
+    </div>
+  );
+
+  return orderBasketItem.action === 'DISCONTINUE' ? (
+    <Tile>{labTile}</Tile>
+  ) : (
+    <ClickableTile
+      role="listitem"
+      className={classNames({
+        [styles.clickableTileTablet]: isTablet,
+        [styles.clickableTileDesktop]: !isTablet,
+      })}
+      onClick={() => shouldOnClickBeCalled.current && onItemClick()}>
+      {labTile}
+    </ClickableTile>
+  );
+}
+
+function OrderActionLabel({ orderBasketItem }: { orderBasketItem: ProcedureOrderBasketItem }) {
+  const { t } = useTranslation();
+
+  if (orderBasketItem.isOrderIncomplete) {
+    return <span className={styles.orderActionIncompleteLabel}>{t('orderActionIncomplete', 'Incomplete')}</span>;
+  }
+
+  switch (orderBasketItem.action) {
+    case 'NEW':
+      return <span className={styles.orderActionNewLabel}>{t('orderActionNew', 'New')}</span>;
+    case 'RENEW':
+      return <span className={styles.orderActionRenewLabel}>{t('orderActionRenew', 'Renew')}</span>;
+    case 'REVISE':
+      return <span className={styles.orderActionRevisedLabel}>{t('orderActionRevise', 'Modify')}</span>;
+    case 'DISCONTINUE':
+      return <span className={styles.orderActionDiscontinueLabel}>{t('orderActionDiscontinue', 'Discontinue')}</span>;
+    default:
+      return <></>;
+  }
+}

package/src/form/procedures-orders/procedures-order-basket-panel/procedures-order-basket-item-tile.scss

@@ -0,0 +1,72 @@
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@openmrs/esm-styleguide/src/vars' as vars;
+
+.clickableTileDesktop {
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid vars.$ui-03;
+}
+
+.clickableTileTablet {
+  padding: 0.75rem 1rem;
+  background-color: vars.$ui-02;
+  border-bottom: 1px solid vars.$ui-03;
+}
+
+.orderBasketItemTile {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+}
+
+.label {
+  display: inline-block;
+  @include type.type-style('label-01');
+  margin-bottom: 0.5rem;
+}
+
+.orderActionNewLabel {
+  @extend .label;
+  color: black;
+  background-color: #c4f4cc;
+  padding: 0 0.25rem;
+}
+
+.orderActionIncompleteLabel {
+  @extend .label;
+  color: white;
+  background-color: vars.$danger;
+  padding: 0 0.25rem;
+}
+
+.orderActionRenewLabel {
+  @extend .label;
+  color: vars.$support-02;
+}
+
+.orderActionRevisedLabel {
+  @extend .label;
+  color: #943d00;
+}
+
+.orderActionDiscontinueLabel {
+  @extend .label;
+  color: vars.$danger;
+}
+
+.orderErrorText {
+  color: vars.$danger;
+  display: flex;
+  align-items: center;
+}
+
+.name {
+  @include type.type-style('heading-compact-01');
+  color: black;
+}
+
+.removeButton {
+  svg {
+    fill: vars.$danger !important;
+  }
+}