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

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,9 +14,18 @@ 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 baseOrdersUrl =
+    startDate && endDate
+      ? `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&v=full&activatedOnOrAfterDate=${startDate}&activatedOnOrBeforeDate=${endDate}`
+      : `${restBaseUrl}/order?patient=${patientUuid}&careSetting=${careSettingUuid}&v=full&status=${status}`;
   const ordersUrl = orderType ? `${baseOrdersUrl}&orderType=${orderType}` : baseOrdersUrl;
 
   const { data, error, isLoading, isValidating } = useSWR<FetchResponse<PatientOrderFetchResponse>, Error>(

packages/esm-patient-orders-app/src/components/order-details-table.scss

@@ -187,3 +187,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%;
+        }
+      }
+    }
+  }
+}

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.toISOString());
+      if (selectedToDate && startDate && selectedToDate < startDate) {
+        setSelectedToDate(startDate.toISOString());
+      }
+    }
+    if (endDate) {
+      setSelectedToDate(endDate.toISOString());
+      if (selectedFromDate && endDate && selectedFromDate > endDate) {
+        setSelectedFromDate(endDate.toISOString());
+      }
+    }
+  };
   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" />
+          <DatePickerInput id="endDatePickerInput" placeholder="dd/mm/yyyy" />
+        </DatePicker>
       </div>
 
       {(() => {

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",