fix: replaced single date picker for date range picker in the lab res…

…ults component. (#90) * fix: removed conditional rendering of date range picker on Tests Ordered component * feat: replaced single date picker for date range picker
openmrs · Sep 9, 2024 · 3399318 · 3399318
1 parent bc4a286
commit 3399318
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 31 deletions.
diff --git a/src/components/orders-table/orders-data-table.component.tsx b/src/components/orders-table/orders-data-table.component.tsx
@@ -31,6 +31,7 @@ import { isoDateTimeString } from '../../constants';
 import ListOrderDetails from './list-order-details.component';
 import styles from './orders-data-table.scss';
 import { Order } from '@openmrs/esm-patient-common-lib';
+import { OrdersDateRangePicker } from './orders-date-range-picker';
 
 const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   const { t } = useTranslation();
@@ -39,15 +40,14 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   } = useConfig();
 
   const [filter, setFilter] = useState<FulfillerStatus>(null);
-  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState<string>(
-    dayjs().startOf('day').format(isoDateTimeString),
-  );
+  const [dateRange, setDateRange] = useState<Date[]>([dayjs().startOf('day').toDate(), new Date()]);
+
   const [searchString, setSearchString] = useState<string>('');
 
   const { labOrders, isLoading } = useLabOrders(
     props.useFilter ? filter : props.fulfillerStatus,
     props.excludeCanceledAndDiscontinuedOrders,
-    activatedOnOrAfterDate,
+    dateRange,
   );
 
   const flattenedLabOrders: Order[] = useMemo(() => {
@@ -134,11 +134,12 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
 
   const handleOrderStatusChange = ({ selectedItem }) => setFilter(selectedItem.value);
 
-  const handleActivateOnOrAfterDateChange = (date: string) =>
-    setActivatedOnOrAfterDate(dayjs(date).startOf('day').format(isoDateTimeString));
+  const handleOrdersDateRangeChange = (dates: Date[]) => {
+    setDateRange(dates);
+  };
 
   const tableRows = useMemo(() => {
-    return paginatedLabOrders.map((patient, index) => ({
+    return paginatedLabOrders.map((patient) => ({
       id: patient.patientId,
       patientName: patient.orders[0].patient?.display?.split('-')[1],
       orders: patient.orders,
@@ -147,14 +148,14 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
   }, [paginatedLabOrders]);
 
   if (isLoading) {
-    return <DataTableSkeleton className={styles.loader} role="progressbar" />;
+    return <DataTableSkeleton className={styles.loader} role="progressbar" showHeader={false} showToolbar={false} />;
   }
   return (
     <DataTable rows={tableRows} headers={columns} useZebraStyles>
       {({ getExpandHeaderProps, getHeaderProps, getRowProps, getTableProps, headers, rows }) => (
         <TableContainer className={styles.tableContainer}>
           <TableToolbar>
-            <TableToolbarContent>
+            <TableToolbarContent className={styles.tableToolBar}>
               <Layer className={styles.toolbarItem}>
                 {props.useFilter && (
                   <Dropdown
@@ -169,19 +170,7 @@ const OrdersDataTable: React.FC<OrdersDataTableProps> = (props) => {
                     type="inline"
                   />
                 )}
-                {props.useActivatedOnOrAfterDateFilter && (
-                  <>
-                    <p>{t('onOrAfterDateFilter', 'Filter orders on or after')}:</p>
-                    <DatePicker
-                      onChange={([date]) => handleActivateOnOrAfterDateChange(date)}
-                      maxDate={new Date()}
-                      datePickerType="single"
-                      value={new Date(activatedOnOrAfterDate).toISOString()}
-                    >
-                      <DatePickerInput placeholder="mm/dd/yyyy" labelText="" id="date-picker-single" size="md" />
-                    </DatePicker>
-                  </>
-                )}
+                <OrdersDateRangePicker onChange={handleOrdersDateRangeChange} currentValues={dateRange} />
               </Layer>
               <Layer className={styles.toolbarItem}>
                 <TableToolbarSearch

diff --git a/src/components/orders-table/orders-data-table.scss b/src/components/orders-table/orders-data-table.scss
@@ -1,6 +1,7 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
 @use '@carbon/colors';
+@use '@carbon/layout';
 
 .tableContainer {
   border: 1px solid colors.$gray-20;
@@ -110,3 +111,8 @@
 .hiddenRow {
   display: none;
 }
+
+.tableToolBar {
+  height: auto;
+  padding-top: layout.$spacing-05;
+}
diff --git a/src/components/orders-table/orders-date-range-picker.scss b/src/components/orders-table/orders-date-range-picker.scss
@@ -0,0 +1,3 @@
+.dateRangePicker {
+  flex-grow: unset;
+}
diff --git a/src/components/orders-table/orders-date-range-picker.tsx b/src/components/orders-table/orders-date-range-picker.tsx
@@ -0,0 +1,37 @@
+import { DatePicker, DatePickerInput } from '@carbon/react';
+import React from 'react';
+import styles from './orders-date-range-picker.scss';
+import { useTranslation } from 'react-i18next';
+
+export const OrdersDateRangePicker = ({
+  onChange,
+  currentValues,
+}: {
+  onChange: (dates: Array<Date>) => void;
+  currentValues: Array<Date>;
+}) => {
+  const currentDate = new Date();
+  const { t } = useTranslation();
+  return (
+    <DatePicker
+      datePickerType="range"
+      className={styles.dateRangePicker}
+      onClose={onChange}
+      maxDate={currentDate.toISOString()}
+      value={currentValues}
+    >
+      <DatePickerInput
+        id="date-picker-input-id-start"
+        placeholder="mm/dd/yyyy"
+        labelText={t('startDate', 'Start date')}
+        size="md"
+      />
+      <DatePickerInput
+        id="date-picker-input-id-finish"
+        placeholder="mm/dd/yyyy"
+        labelText={t('endDate', 'End date')}
+        size="md"
+      />
+    </DatePicker>
+  );
+};
diff --git a/src/lab-tabs/data-table-extensions/completed-lab-requests-table.extension.tsx b/src/lab-tabs/data-table-extensions/completed-lab-requests-table.extension.tsx
@@ -6,7 +6,6 @@ const CompletedLabRequestsTable: React.FC = () => {
     <OrdersDataTable
       fulfillerStatus="COMPLETED"
       excludeColumns={[]}
-      useActivatedOnOrAfterDateFilter
       excludeCanceledAndDiscontinuedOrders={false}
       actions={[]}
     />

diff --git a/src/lab-tabs/data-table-extensions/in-progress-lab-requests-table.extension.tsx b/src/lab-tabs/data-table-extensions/in-progress-lab-requests-table.extension.tsx
@@ -6,7 +6,6 @@ const InProgressLabRequestsTable: React.FC = () => {
     <OrdersDataTable
       excludeColumns={[]}
       actionsSlotName="inprogress-tests-actions-slot"
-      useActivatedOnOrAfterDateFilter
       fulfillerStatus="IN_PROGRESS"
       actions={[
         { actionName: 'labResultsForm', order: 0 },

diff --git a/src/laboratory-resource.ts b/src/laboratory-resource.ts
@@ -10,19 +10,19 @@ import { useMemo } from 'react';
  * @param status - The status of the orders to retrieve
  * @param excludeCanceled - Whether to exclude canceled, discontinued and expired orders
  */
-export function useLabOrders(
-  status: 'NEW' | FulfillerStatus = null,
-  excludeCanceled = true,
-  activatedOnOrAfterDate?: string,
-) {
+export function useLabOrders(status: 'NEW' | FulfillerStatus = null, excludeCanceled = true, dateRange?: Date[]) {
   const { laboratoryOrderTypeUuid } = useConfig();
   const fulfillerStatus = useMemo(() => (status === 'NEW' ? null : status), [status]);
   const newOrdersOnly = status === 'NEW';
   let url = `${restBaseUrl}/order?orderTypes=${laboratoryOrderTypeUuid}&v=full`;
   url = fulfillerStatus ? url + `&fulfillerStatus=${fulfillerStatus}` : url;
   url = excludeCanceled ? `${url}&excludeCanceledAndExpired=true&excludeDiscontinueOrders=true` : url;
   // The usage of SWR's mutator seems to only suffice for cases where we don't apply a status filter
-  url = activatedOnOrAfterDate ? `${url}&=&activatedOnOrAfterDate=${activatedOnOrAfterDate}` : url;
+  url = dateRange
+    ? `${url}&=&activatedOnOrAfterDate=${dateRange.at(0).toISOString()}&activatedOnOrBeforeDate=${dateRange
+        .at(1)
+        .toISOString()}`
+    : url;
 
   const { data, error, mutate, isLoading, isValidating } = useSWR<{
     data: { results: Array<Order> };

diff --git a/src/types.ts b/src/types.ts
@@ -16,12 +16,12 @@ export interface OrderAction {
   actionName: string;
   order: 0 | number;
 }
+
 export interface OrdersDataTableProps {
   useFilter?: boolean;
   actionsSlotName?: string;
   excludeColumns?: string[];
   fulfillerStatus?: FulfillerStatus;
   excludeCanceledAndDiscontinuedOrders?: boolean;
-  useActivatedOnOrAfterDateFilter?: boolean;
   actions: Array<OrderAction>;
 }