(feat) O3-4190 Add ability to filter lab orders by type and date

openmrs · Nov 13, 2024 · ee70867 · ee70867
1 parent 4f6d6f5
commit ee70867
Show file tree

Hide file tree

Showing 4 changed files with 94 additions and 26 deletions.
diff --git a/packages/esm-patient-common-lib/src/orders/useOrders.ts b/packages/esm-patient-common-lib/src/orders/useOrders.ts
@@ -1,6 +1,6 @@
 import { useCallback, useMemo } from 'react';
 import useSWR, { useSWRConfig } from 'swr';
-import { type FetchResponse, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type FetchResponse, openmrsFetch, restBaseUrl, toOmrsIsoString } from '@openmrs/esm-framework';
 import { type OrderTypeFetchResponse, type PatientOrderFetchResponse } from '@openmrs/esm-patient-common-lib';
 
 export type Status = 'ACTIVE' | 'any';
@@ -14,7 +14,13 @@ export const drugCustomRepresentation =
   'frequency:ref,asNeeded,asNeededCondition,quantity,quantityUnits:ref,numRefills,dosingInstructions,' +
   'duration,durationUnits:ref,route:ref,brandName,dispenseAsWritten)';
 
-export function usePatientOrders(patientUuid: string, status?: Status, orderType?: string) {
+export function usePatientOrders(
+  patientUuid: string,
+  status?: Status,
+  orderType?: string,
+  startDate?: string,
+  endDate?: string,
+) {
   const { mutate } = useSWRConfig();
   const baseOrdersUrl = `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&v=full&status=${status}`;
   const ordersUrl = orderType ? `${baseOrdersUrl}&orderType=${orderType}` : baseOrdersUrl;
@@ -30,13 +36,18 @@ export function usePatientOrders(patientUuid: string, status?: Status, orderType
     [data, mutate, patientUuid],
   );
 
-  const orders = useMemo(
-    () =>
-      data?.data?.results
-        ? data.data.results?.sort((order1, order2) => (order2.dateActivated > order1.dateActivated ? 1 : -1))
-        : null,
-    [data],
-  );
+  const orders = useMemo(() => {
+    if (!data?.data?.results) return null;
+
+    const filteredResults =
+      startDate && endDate
+        ? data.data.results.filter((order) => {
+            return order.dateActivated >= toOmrsIsoString(startDate) && order.dateActivated <= toOmrsIsoString(endDate);
+          })
+        : data.data.results;
+
+    return filteredResults.sort((order1, order2) => (order2.dateActivated > order1.dateActivated ? 1 : -1));
+  }, [data, startDate, endDate]);
 
   return {
     data: orders,

diff --git a/packages/esm-patient-orders-app/src/components/order-details-table.scss b/packages/esm-patient-orders-app/src/components/order-details-table.scss
@@ -176,3 +176,26 @@
     page-break-inside: avoid;
   }
 }
+
+.filterContainer {
+  display: flex;
+  align-items: center;
+}
+
+.fullWidthDatePickerContainer {
+  :global .cds--date-picker {
+    width: 40%;
+
+    :global .cds--date-picker-container {
+      width: 100%;
+
+      :global .cds--date-picker-input__wrapper {
+        width: 100%;
+
+        :global .cds--date-picker__input {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx b/packages/esm-patient-orders-app/src/components/orders-details-table.component.tsx
@@ -59,6 +59,8 @@ import MedicationRecord from './medication-record.component';
 import PrintComponent from '../print/print.component';
 import TestOrder from './test-order.component';
 import styles from './order-details-table.scss';
+import { DatePicker } from '@carbon/react';
+import { DatePickerInput } from '@carbon/react';
 
 interface OrderDetailsProps {
   patientUuid: string;
@@ -114,13 +116,15 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
   const { orders, setOrders } = useOrderBasket<MutableOrderBasketItem>();
   const { data: orderTypes } = useOrderTypes();
   const [selectedOrderTypeUuid, setSelectedOrderTypeUuid] = useState(null);
+  const [selectedFromDate, setSelectedFromDate] = useState(null);
+  const [selectedToDate, setSelectedToDate] = useState(null);
   const selectedOrderName = orderTypes?.find((x) => x.uuid === selectedOrderTypeUuid)?.name;
   const {
     data: allOrders,
     error: error,
     isLoading,
     isValidating,
-  } = usePatientOrders(patientUuid, 'ACTIVE', selectedOrderTypeUuid);
+  } = usePatientOrders(patientUuid, 'ACTIVE', selectedOrderTypeUuid, selectedFromDate, selectedToDate);
 
   // launch respective order basket based on order type
   const openOrderForm = useCallback(
@@ -303,25 +307,54 @@ const OrderDetailsTable: React.FC<OrderDetailsProps> = ({ patientUuid, showAddBu
     [orderTypes, t],
   );
 
+  const handleDateFilterChange = ([startDate, endDate]) => {
+    if (startDate) {
+      setSelectedFromDate(startDate);
+      if (selectedToDate && startDate && selectedToDate < startDate) {
+        setSelectedToDate(startDate);
+      }
+    }
+    if (endDate) {
+      setSelectedToDate(endDate);
+      if (selectedFromDate && endDate && selectedFromDate > endDate) {
+        setSelectedFromDate(endDate);
+      }
+    }
+  };
   return (
     <>
-      <div className={styles.dropdownContainer}>
-        <Dropdown
-          id="orderTypeDropdown"
-          items={orderTypesToDisplay}
-          itemToString={(orderType: OrderType) => (orderType ? capitalize(orderType.display) : '')}
-          label={t('allOrders', 'All orders')}
-          onChange={(e: { selectedItem: Order }) => {
-            if (e.selectedItem.display === 'All') {
-              setSelectedOrderTypeUuid(null);
-              return;
-            }
-            setSelectedOrderTypeUuid(e.selectedItem.uuid);
+      <div className={styles.filterContainer}>
+        <div className={styles.dropdownContainer}>
+          <Dropdown
+            id="orderTypeDropdown"
+            items={orderTypesToDisplay}
+            itemToString={(orderType: OrderType) => (orderType ? capitalize(orderType.display) : '')}
+            label={t('allOrders', 'All orders')}
+            onChange={(e: { selectedItem: Order }) => {
+              if (e.selectedItem.display === 'All') {
+                setSelectedOrderTypeUuid(null);
+                return;
+              }
+              setSelectedOrderTypeUuid(e.selectedItem.uuid);
+            }}
+            selectedItem={orderTypes?.find((x) => x.uuid === selectedOrderTypeUuid)}
+            titleText={t('selectOrderType', 'Select order type') + ':'}
+            type="inline"
+          />
+        </div>
+        <p className={styles.helperText}>{t('dateRange', 'Date range')} :</p>
+        <DatePicker
+          datePickerType="range"
+          dateFormat={'d/m/Y'}
+          className={styles.fullWidthDatePickerContainer}
+          value={''}
+          onChange={([startDate, endDate]) => {
+            handleDateFilterChange([startDate, endDate]);
           }}
-          selectedItem={orderTypes?.find((x) => x.uuid === selectedOrderTypeUuid)}
-          titleText={t('selectOrderType', 'Select order type') + ':'}
-          type="inline"
-        />
+        >
+          <DatePickerInput id="startDatePickerInput" placeholder="dd/mm/yyyy" value={formatDate(selectedFromDate)} />
+          <DatePickerInput id="endDatePickerInput" placeholder="dd/mm/yyyy" value={formatDate(selectedToDate)} />
+        </DatePicker>
       </div>
 
       {(() => {

diff --git a/packages/esm-patient-orders-app/translations/en.json b/packages/esm-patient-orders-app/translations/en.json
@@ -12,6 +12,7 @@
   "chooseAnOption": "Choose an option",
   "dateCannotBeBeforeToday": "Date cannot be before today",
   "dateOfOrder": "Date of order",
+  "dateRange": "Date range",
   "discard": "Discard",
   "discontinued": "Discontinued",
   "dosage": "Dosage",