diff --git a/packages/esm-patient-common-lib/src/orders/useOrders.ts b/packages/esm-patient-common-lib/src/orders/useOrders.ts index 87de8cf147..f60abb7866 100644 --- 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,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, Error>( 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 index 92afdc9933..23fc8437c6 100644 --- a/packages/esm-patient-orders-app/src/components/order-details-table.scss +++ b/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%; + } + } + } + } +} 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 index f90cbfeba5..1ca5fdc66a 100644 --- 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 = ({ patientUuid, showAddBu const { orders, setOrders } = useOrderBasket(); 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 = ({ 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 ( <> -
- (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); +
+
+ (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" + /> +
+

{t('dateRange', 'Date range')} :

+ { + handleDateFilterChange([startDate, endDate]); }} - selectedItem={orderTypes?.find((x) => x.uuid === selectedOrderTypeUuid)} - titleText={t('selectOrderType', 'Select order type') + ':'} - type="inline" - /> + > + + +
{(() => { diff --git a/packages/esm-patient-orders-app/translations/en.json b/packages/esm-patient-orders-app/translations/en.json index 4e3f28edb0..fccec1197c 100644 --- 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",