(feat) O3-3366: Add ability to filter lab order by activatedOnOrAfterDate params

package.json

@@ -74,6 +74,7 @@
         "@typescript-eslint/parser": "^5.59.9",
         "concurrently": "^7.6.0",
         "css-loader": "^6.8.1",
+        "dayjs": "^1.11.11",
         "eslint": "^8.42.0",
         "eslint-config-prettier": "^8.8.0",
         "eslint-config-ts-react-important-stuff": "^3.0.0",

src/components/orders-table/orders-data-table.component.tsx

@@ -17,6 +17,8 @@
   TableToolbarContent,
   Layer,
   TableToolbarSearch,
+  DatePicker,
+  DatePickerInput,
 } from "@carbon/react";
 import { OverflowMenuVertical } from "@carbon/react/icons";
 import {
@@ -32,13 +34,16 @@
 import { getStatusColor } from "../../utils";
 import { FulfillerStatus } from "../../types";
 import { useLabOrders } from "../../laboratory-resource";
+import dayjs from "dayjs";
+import { isoDateTimeString } from "../../constants";
 
 interface OrdersDataTableProps {
   useFilter?: boolean;
   actionsSlotName?: string;
   excludeColumns?: string[];
   fulfillerStatus?: FulfillerStatus;
   excludeCanceledAndDiscontinuedOrders?: boolean;
+  useActivatedOnOrAfterDateFilter?: boolean;
 }
 
 const OrdersDataTable: React.FC<OrdersDataTableProps> = ({
@@ -47,15 +52,20 @@
   excludeColumns = [],
   fulfillerStatus,
   excludeCanceledAndDiscontinuedOrders = true,
+  useActivatedOnOrAfterDateFilter = true,
 }) => {
   const { t } = useTranslation();
   const {
     targetPatientDashboard: { redirectToResultsViewer, redirectToOrders },
   } = useConfig();
   const [filter, setFilter] = useState<FulfillerStatus>(null);
+  const [activatedOnOrAfterDate, setActivatedOnOrAfterDate] = useState<string>(
+    dayjs().startOf("day").format(isoDateTimeString)
+  );
   const { labOrders, isLoading } = useLabOrders(
     useFilter ? filter : fulfillerStatus,
-    excludeCanceledAndDiscontinuedOrders
+    excludeCanceledAndDiscontinuedOrders,
+    activatedOnOrAfterDate
   );
   const orderStatuses = [
     {
@@ -120,6 +130,11 @@
   const handleOrderStatusChange = ({ selectedItem }) =>
     setFilter(selectedItem.value);
 
+  const handleActivateOnOrAfterDateChange = (date: string) =>
+    setActivatedOnOrAfterDate(
+      dayjs(date).startOf("day").format(isoDateTimeString)
+    );
+
   const tableRows = useMemo(() => {
     return paginatedLabOrders.map((order, index) => ({
       id: order.uuid,
@@ -162,7 +177,7 @@
         </CustomOverflowMenu>
       ),
     }));
   }, [
     paginatedLabOrders,
     redirectToResultsViewer,
     redirectToOrders,
@@ -190,27 +205,55 @@
         <TableContainer className={styles.tableContainer}>
           <TableToolbar>
             <TableToolbarContent>
-              {useFilter && (
+              {
                 <Layer className={styles.toolbarItem}>
-                  <Dropdown
-                    id="orderStatusFilter"
-                    initialSelectedItem={
-                      filter
-                        ? orderStatuses.find(
-                            (status) => status.value === filter
-                          )
-                        : orderStatuses[0]
-                    }
-                    titleText={
-                      t("filterOrdersByStatus", "Filter orders by status") + ":"
-                    }
-                    type="inline"
-                    items={orderStatuses}
-                    onChange={handleOrderStatusChange}
-                    itemToString={(item) => item?.display}
-                  />
+                  {useFilter && (
+                    <Dropdown
+                      id="orderStatusFilter"
+                      initialSelectedItem={
+                        filter
+                          ? orderStatuses.find(
+                              (status) => status.value === filter
+                            )
+                          : orderStatuses[0]
+                      }
+                      titleText={
+                        t("filterOrdersByStatus", "Filter orders by status") +
+                        ":"
+                      }
+                      type="inline"
+                      items={orderStatuses}
+                      onChange={handleOrderStatusChange}
+                      itemToString={(item) => item?.display}
+                    />
+                  )}
+                  {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>
+                    </>
+                  )}
                 </Layer>
-              )}
+              }
               <Layer className={styles.toolbarItem}>
                 <TableToolbarSearch
                   expanded

src/components/orders-table/orders-data-table.scss

@@ -1,10 +1,9 @@
 @use '@carbon/styles/scss/spacing';
 @use '@carbon/styles/scss/type';
-@import "~@openmrs/esm-styleguide/src/vars";
-@import '../../root.scss';
+@use '@carbon/colors';
 
 .tableContainer {
-  background-color: $ui-01;
+  background-color: colors.$gray-10;
   margin: 0 spacing.$spacing-05;
   padding: 0;
 
@@ -17,11 +16,11 @@
   }
 
   th {
-    color: $text-02;
+    color: colors.$gray-70;
   }
 
   :global(.cds--data-table) {
-    background-color: $ui-03;
+    background-color: colors.$gray-20;
   }
 
   :global(.cds--table-toolbar) {
@@ -40,18 +39,28 @@
 }
 
 .toolbarItem {
+  display: flex;
   margin: 5px 10px;
+  align-items: center;
+
+  & p {
+    padding-right: 5px;
+    @include type.type-style('body-01');
+    color: colors.$gray-70;
+  }
 }
 
+
+
 .tableWrapper tr:last-of-type {
   td {
     border-bottom: none;
   }
 }
 
 .tileContainer {
-  background-color: $ui-02;
-  border-top: 1px solid $ui-03;
+  background-color: colors.$white;
+  border-top: 1px solid colors.$gray-20;
   padding: 5rem 0;
 }
 
@@ -68,11 +77,10 @@
 
 .content {
   @include type.type-style('heading-compact-02');
-  color: $text-02;
+  color: colors.$gray-70;
   margin-bottom: 0.5rem;
 }
 
 .singleLineDisplay {
   white-space: nowrap;
-}
-
+}

src/constants.ts

@@ -1 +1,2 @@
 export const moduleName = "@openmrs/esm-laboratory-app";
+export const isoDateTimeString = "YYYY-MM-DDTHH:mm:ss.sss";

src/lab-tabs/modals/pickup-lab-request-modal.component.tsx

@@ -1,13 +1,17 @@
 import { Order } from "@openmrs/esm-patient-common-lib";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { setFulfillerStatus, useLabOrders } from "../../laboratory-resource";
+import { setFulfillerStatus } from "../../laboratory-resource";
 import {
+  restBaseUrl,
   showNotification,
   showSnackbar,
   useAbortController,
+  useConfig,
 } from "@openmrs/esm-framework";
 import { Button, ModalBody, ModalFooter, ModalHeader } from "@carbon/react";
+import { mutate } from "swr";
+import { Config } from "../../config-schema";
 
 interface PickupLabRequestModal {
   closeModal: () => void;
@@ -20,14 +24,22 @@ const PickupLabRequestModal: React.FC<PickupLabRequestModal> = ({
 }) => {
   const { t } = useTranslation();
   const [isSubmitting, setIsSubmitting] = useState(false);
-  const { mutate } = useLabOrders();
+  const { laboratoryOrderTypeUuid } = useConfig<Config>();
   const abortController = useAbortController();
 
   const handlePickup = () => {
     setIsSubmitting(true);
     setFulfillerStatus(order.uuid, "IN_PROGRESS", abortController).then(
       () => {
-        mutate();
+        mutate(
+          (key) =>
+            typeof key === "string" &&
+            key.startsWith(
+              `${restBaseUrl}/order?orderTypes=${laboratoryOrderTypeUuid}`
+            ),
+          undefined,
+          { revalidate: true }
+        );
         setIsSubmitting(false);
         closeModal();
         showSnackbar({

src/laboratory-resource.ts

@@ -12,7 +12,8 @@ import { useMemo } from "react";
  */
 export function useLabOrders(
   status: "NEW" | FulfillerStatus = null,
-  excludeCanceled = true
+  excludeCanceled = true,
+  activatedOnOrAfterDate?: string
 ) {
   const { laboratoryOrderTypeUuid } = useConfig();
   const fulfillerStatus = useMemo(
@@ -26,10 +27,13 @@ export function useLabOrders(
     ? `${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
-  const refreshInterval = status ? 5000 : null;
-  const { data, error, mutate, isLoading } = useSWR<{
+  url = activatedOnOrAfterDate
+    ? `${url}&=&activatedOnOrAfterDate=${activatedOnOrAfterDate}`
+    : url;
+
+  const { data, error, mutate, isLoading, isValidating } = useSWR<{
     data: { results: Array<Order> };
-  }>(url, openmrsFetch, { refreshInterval });
+  }>(`${url}`, openmrsFetch);
 
   const filteredOrders =
     data?.data &&
@@ -42,6 +46,7 @@ export function useLabOrders(
     isLoading,
     isError: error,
     mutate,
+    isValidating,
   };
 }