ft : add date activated on orders list items (#15)

* ft : add date activated on orders list items * fix : build error
openmrs · Nov 22, 2023 · 3e5fa9a · 3e5fa9a
1 parent dfb0a75
commit 3e5fa9a
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 28 deletions.
diff --git a/src/completed-list/completed-list.component.tsx b/src/completed-list/completed-list.component.tsx
@@ -1,7 +1,12 @@
 import React, { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetOrdersWorklist } from "../work-list/work-list.resource";
-import { ErrorState, usePagination } from "@openmrs/esm-framework";
+import {
+  ErrorState,
+  formatDate,
+  parseDate,
+  usePagination,
+} from "@openmrs/esm-framework";
 import {
   DataTable,
   DataTableSkeleton,
@@ -55,24 +60,33 @@ const CompletedList: React.FC<CompletedlistProps> = ({ fulfillerStatus }) => {
 
   // get picked orders
   let columns = [
-    { id: 0, header: t("orderNumber", "Order Number"), key: "orderNumber" },
+    { id: 0, header: t("date", "Date"), key: "date" },
+
+    { id: 1, header: t("orderNumber", "Order Number"), key: "orderNumber" },
     {
-      id: 1,
+      id: 2,
       header: t("accessionNumber", "Accession Number"),
       key: "accessionNumber",
     },
-    { id: 2, header: t("test", "Test"), key: "test" },
-    { id: 3, header: t("action", "Action"), key: "action" },
-    { id: 4, header: t("status", "Status"), key: "status" },
-    { id: 5, header: t("orderer", "Orderer"), key: "orderer" },
-    { id: 6, header: t("orderType", "Order Type"), key: "orderType" },
-    { id: 7, header: t("urgency", "Urgency"), key: "urgency" },
+    { id: 3, header: t("test", "Test"), key: "test" },
+    { id: 4, header: t("action", "Action"), key: "action" },
+    { id: 5, header: t("status", "Status"), key: "status" },
+    { id: 6, header: t("orderer", "Orderer"), key: "orderer" },
+    { id: 7, header: t("orderType", "Order Type"), key: "orderType" },
+    { id: 8, header: t("urgency", "Urgency"), key: "urgency" },
   ];
 
   const tableRows = useMemo(() => {
     return paginatedWorkListEntries?.map((entry, index) => ({
       ...entry,
       id: entry.uuid,
+      date: {
+        content: (
+          <>
+            <span>{formatDate(parseDate(entry.dateActivated))}</span>
+          </>
+        ),
+      },
       orderNumber: { content: <span>{entry.orderNumber}</span> },
       accessionNumber: { content: <span>{entry.accessionNumber}</span> },
       test: { content: <span>{entry.concept.display}</span> },

diff --git a/src/review-list/review-list.component.tsx b/src/review-list/review-list.component.tsx
@@ -1,7 +1,13 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useGetOrdersWorklist } from "../work-list/work-list.resource";
-import { ErrorState, showModal, usePagination } from "@openmrs/esm-framework";
+import {
+  ErrorState,
+  formatDate,
+  parseDate,
+  showModal,
+  usePagination,
+} from "@openmrs/esm-framework";
 import {
   DataTable,
   DataTableSkeleton,
@@ -85,24 +91,33 @@ const ReviewList: React.FC<ReviewlistProps> = ({ fulfillerStatus }) => {
 
   // get picked orders
   let columns = [
-    { id: 0, header: t("orderNumber", "Order Number"), key: "orderNumber" },
+    { id: 0, header: t("date", "Date"), key: "date" },
+
+    { id: 1, header: t("orderNumber", "Order Number"), key: "orderNumber" },
     {
-      id: 1,
+      id: 2,
       header: t("accessionNumber", "Accession Number"),
       key: "accessionNumber",
     },
-    { id: 2, header: t("test", "Test"), key: "test" },
-    { id: 3, header: t("action", "Action"), key: "action" },
-    { id: 4, header: t("status", "Status"), key: "status" },
-    { id: 5, header: t("orderer", "Orderer"), key: "orderer" },
-    { id: 6, header: t("orderType", "Order Type"), key: "orderType" },
-    { id: 7, header: t("urgency", "Urgency"), key: "urgency" },
+    { id: 3, header: t("test", "Test"), key: "test" },
+    { id: 4, header: t("action", "Action"), key: "action" },
+    { id: 5, header: t("status", "Status"), key: "status" },
+    { id: 6, header: t("orderer", "Orderer"), key: "orderer" },
+    { id: 7, header: t("orderType", "Order Type"), key: "orderType" },
+    { id: 8, header: t("urgency", "Urgency"), key: "urgency" },
   ];
 
   const tableRows = useMemo(() => {
     return paginatedWorkListEntries?.map((entry, index) => ({
       ...entry,
       id: entry.uuid,
+      date: {
+        content: (
+          <>
+            <span>{formatDate(parseDate(entry.dateActivated))}</span>
+          </>
+        ),
+      },
       orderNumber: { content: <span>{entry.orderNumber}</span> },
       accessionNumber: { content: <span>{entry.accessionNumber}</span> },
       test: { content: <span>{entry.concept.display}</span> },

diff --git a/src/work-list/work-list.component.tsx b/src/work-list/work-list.component.tsx
@@ -33,7 +33,7 @@ import {
 } from "@carbon/react";
 import { Result, useGetOrdersWorklist } from "./work-list.resource";
 import styles from "./work-list.scss";
-import { usePagination } from "@openmrs/esm-framework";
+import { formatDate, parseDate, usePagination } from "@openmrs/esm-framework";
 import { launchOverlay } from "../components/overlay/hook";
 import ResultForm from "../results/result-form.component";
 import { getStatusColor } from "../utils/functions";
@@ -70,19 +70,21 @@ const WorkList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
 
   // get picked orders
   let columns = [
-    { id: 0, header: t("orderNumber", "Order Number"), key: "orderNumber" },
+    { id: 0, header: t("date", "Date"), key: "date" },
+
+    { id: 1, header: t("orderNumber", "Order Number"), key: "orderNumber" },
     {
-      id: 1,
+      id: 2,
       header: t("accessionNumber", "Accession Number"),
       key: "accessionNumber",
     },
-    { id: 2, header: t("test", "Test"), key: "test" },
-    { id: 3, header: t("action", "Action"), key: "action" },
-    { id: 4, header: t("status", "Status"), key: "status" },
-    { id: 5, header: t("orderer", "Orderer"), key: "orderer" },
-    { id: 6, header: t("orderType", "Order Type"), key: "orderType" },
-    { id: 7, header: t("urgency", "Urgency"), key: "urgency" },
-    { id: 8, header: t("actions", "Actions"), key: "actions" },
+    { id: 3, header: t("test", "Test"), key: "test" },
+    { id: 4, header: t("action", "Action"), key: "action" },
+    { id: 5, header: t("status", "Status"), key: "status" },
+    { id: 6, header: t("orderer", "Orderer"), key: "orderer" },
+    { id: 7, header: t("orderType", "Order Type"), key: "orderType" },
+    { id: 8, header: t("urgency", "Urgency"), key: "urgency" },
+    { id: 9, header: t("actions", "Actions"), key: "actions" },
   ];
 
   const ResultsOrder: React.FC<ResultsOrderProps> = ({
@@ -107,6 +109,13 @@ const WorkList: React.FC<WorklistProps> = ({ fulfillerStatus }) => {
     return paginatedWorkListEntries?.map((entry, index) => ({
       ...entry,
       id: entry.uuid,
+      date: {
+        content: (
+          <>
+            <span>{formatDate(parseDate(entry.dateActivated))}</span>
+          </>
+        ),
+      },
       orderNumber: { content: <span>{entry.orderNumber}</span> },
       accessionNumber: { content: <span>{entry.accessionNumber}</span> },
       test: { content: <span>{entry.concept.display}</span> },