ft : order status color

i18next-parser.config.js

@@ -1,14 +1,14 @@
 module.exports = {
-  contextSeparator: '_',
+  contextSeparator: "_",
   // Key separator used in your translation keys
 
   createOldCatalogs: false,
   // Save the \_old files
 
-  defaultNamespace: 'translations',
+  defaultNamespace: "translations",
   // Default namespace used in your i18next config
 
-  defaultValue: '',
+  defaultValue: "",
   // Default value to give to empty keys
   // You may also specify a function accepting the locale, namespace, and key as arguments
 
@@ -18,43 +18,43 @@ module.exports = {
   keepRemoved: false,
   // Keep keys from the catalog that are no longer in code
 
-  keySeparator: '.',
+  keySeparator: ".",
   // Key separator used in your translation keys
   // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
 
   // see below for more details
   lexers: {
-    hbs: ['HandlebarsLexer'],
-    handlebars: ['HandlebarsLexer'],
+    hbs: ["HandlebarsLexer"],
+    handlebars: ["HandlebarsLexer"],
 
-    htm: ['HTMLLexer'],
-    html: ['HTMLLexer'],
+    htm: ["HTMLLexer"],
+    html: ["HTMLLexer"],
 
-    mjs: ['JavascriptLexer'],
-    js: ['JavascriptLexer'], // if you're writing jsx inside .js files, change this to JsxLexer
-    ts: ['JavascriptLexer'],
-    jsx: ['JsxLexer'],
-    tsx: ['JsxLexer'],
+    mjs: ["JavascriptLexer"],
+    js: ["JavascriptLexer"], // if you're writing jsx inside .js files, change this to JsxLexer
+    ts: ["JavascriptLexer"],
+    jsx: ["JsxLexer"],
+    tsx: ["JsxLexer"],
 
-    default: ['JavascriptLexer'],
+    default: ["JavascriptLexer"],
   },
 
-  lineEnding: 'auto',
+  lineEnding: "auto",
   // Control the line ending. See options at https://github.com/ryanve/eol
 
-  locales: ['en', 'am', 'es', 'fr', 'km', 'he'],
+  locales: ["en", "am", "es", "fr", "km", "he"],
   // An array of the locales in your applications
 
-  namespaceSeparator: ':',
+  namespaceSeparator: ":",
   // Namespace separator used in your translation keys
   // If you want to use plain english keys, separators such as `.` and `:` will conflict. You might want to set `keySeparator: false` and `namespaceSeparator: false`. That way, `t('Status: Loading...')` will not think that there are a namespace and three separator dots for instance.
 
-  output: '$NAMESPACE/$LOCALE.json',
+  output: "$NAMESPACE/$LOCALE.json",
   // Supports $LOCALE and $NAMESPACE injection
   // Supports JSON (.json) and YAML (.yml) file formats
   // Where to write the locale files relative to process.cwd()
 
-  pluralSeparator: '_',
+  pluralSeparator: "_",
   // Plural separator used in your translation keys
   // If you want to use plain english keys, separators such as `_` might conflict. You might want to set `pluralSeparator` to a different string that does not occur in your keys.
 

package.json

@@ -7,7 +7,7 @@
   "main": "src/index.ts",
   "source": true,
   "scripts": {
-    "start": "openmrs develop --backend http://167.71.32.250:8080",
+    "start": "openmrs develop --backend https://ugandaemr-backend.mets.or.ug",
     "serve": "webpack serve --mode=development",
     "build": "webpack --mode production",
     "analyze": "webpack --mode=production --env analyze=true",

src/config-schema.ts

@@ -21,6 +21,11 @@ export const configSchema = {
     _default: "214e27a1-606a-4b1e-a96e-d736c87069d5",
     _description: "Concept uuid for the laboratory tool encounter type.",
   },
+  laboratoryOrderTypeUuid: {
+    _type: Type.String,
+    _default: "52a447d3-a64a-11e3-9aeb-50e549534c5e",
+    _description: "Uuid for orderType",
+  },
 };
 
 export type Config = {

src/patient-chart/laboratory-item/view-laboratory-item.component.tsx

@@ -3,24 +3,25 @@ import { useTranslation } from "react-i18next";
 import { Button, Tooltip } from "@carbon/react";
 import { View } from "@carbon/react/icons";
 import { launchPatientWorkspace } from "@openmrs/esm-patient-common-lib";
+import { EncounterResponse } from "./view-laboratory-item.resource";
 
 interface ViewLaboratoryItemActionMenuProps {
   closeModal: () => void;
-  encounterUuid: string;
+  encounter: EncounterResponse;
 }
 
 const ViewLaboratoryItemActionMenu: React.FC<
   ViewLaboratoryItemActionMenuProps
-> = ({ encounterUuid }) => {
+> = ({ encounter }) => {
   const { t } = useTranslation();
 
   const handleClick = useCallback(
     () =>
       launchPatientWorkspace("results-summary", {
         workspaceTitle: `Results Summary Form`,
-        encounterUuid,
+        encounter,
       }),
-    [encounterUuid]
+    [encounter]
   );
 
   return (

src/patient-chart/laboratory-item/view-laboratory-item.resource.ts

@@ -136,7 +136,7 @@ export interface Ob {
   groupMembers: any;
   comment: any;
   location: Location2;
-  order: any;
+  order: Order;
   encounter: Encounter;
   voided: boolean;
   value: any;

src/patient-chart/laboratory-order.component.tsx

@@ -9,6 +9,7 @@ import {
   openmrsFetch,
   parseDate,
   ErrorState,
+  useLayoutType,
 } from "@openmrs/esm-framework";
 
 import {
@@ -29,9 +30,13 @@ import {
   DataTableHeader,
   Tile,
   Pagination,
+  TableExpandHeader,
+  TableExpandRow,
+  TableExpandedRow,
 } from "@carbon/react";
 import ViewLaboratoryItemActionMenu from "./laboratory-item/view-laboratory-item.component";
-import { useLabOrders } from "./laboratory-order.resource";
+import { getOrderColor, useLabOrders } from "./laboratory-order.resource";
+import TestsResults from "./results-summary/test-results-table.component";
 
 interface LaboratoryOrderOverviewProps {
   patientUuid: string;
@@ -50,6 +55,8 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
 }) => {
   const { t } = useTranslation();
 
+  const isTablet = useLayoutType() === "tablet";
+
   const {
     labRequests,
     isLoading: loading,
@@ -70,8 +77,8 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
   let columns = [
     {
       id: 0,
-      header: t("encounterDate", "Encouter Date"),
-      key: "encounterDate",
+      header: t("orderDate", "Order Date"),
+      key: "orderDate",
     },
     { id: 1, header: t("orders", "Order"), key: "orders" },
     { id: 2, header: t("location", "Location"), key: "location" },
@@ -135,11 +142,11 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
     return paginatedLabEntries?.map((entry) => ({
       ...entry,
       id: entry.uuid,
-      encounterDate: {
+      orderDate: {
         content: (
           <span>
             {formatDate(parseDate(entry.encounterDatetime), {
-              time: true,
+              time: false,
             })}
           </span>
         ),
@@ -148,17 +155,22 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
         content: (
           <>
             {entry.orders.map((order) => {
-              return (
-                <Tag
-                  style={{
-                    background: "rgb(111 111 111 / 97%)",
-                    color: "white",
-                  }}
-                  role="tooltip"
-                >
-                  {order?.concept?.display}
-                </Tag>
-              );
+              if (order?.type === "testorder") {
+                return (
+                  <Tag
+                    style={{
+                      background: `${getOrderColor(
+                        order.dateActivated,
+                        order.dateStopped
+                      )}`,
+                      color: "white",
+                    }}
+                    role="tooltip"
+                  >
+                    {order?.concept?.display}
+                  </Tag>
+                );
+              }
             })}
           </>
         ),
@@ -174,7 +186,7 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
           <>
             <ViewLaboratoryItemActionMenu
               closeModal={() => true}
-              encounterUuid={entry.uuid}
+              encounter={entry}
             />
           </>
         ),
@@ -198,6 +210,7 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
           headers={columns}
           useZebraStyles
           filterRows={handleFilter}
+          size={isTablet ? "lg" : "sm"}
         >
           {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
             <TableContainer className={styles.tableContainer}>
@@ -210,6 +223,47 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
                 }}
               >
                 <TableToolbarContent>
+                  <div
+                    style={{
+                      fontSize: "10px",
+                      margin: "5px",
+                      display: "flex",
+                      flexDirection: "row",
+                      alignItems: "center",
+                    }}
+                  >
+                    Key:
+                    <Tag
+                      size="sm"
+                      style={{
+                        background: "green",
+                        color: "white",
+                      }}
+                      title="Result Complete"
+                    >
+                      {"Completed"}
+                    </Tag>
+                    <Tag
+                      size="sm"
+                      style={{
+                        background: "red",
+                        color: "white",
+                      }}
+                      title="Result Rejected"
+                    >
+                      {"Rejected"}
+                    </Tag>
+                    <Tag
+                      size="sm"
+                      style={{
+                        background: "#6F6F6F",
+                        color: "white",
+                      }}
+                      title="Result Requested"
+                    >
+                      {"Requested"}
+                    </Tag>
+                  </div>
                   <Layer>
                     <TableToolbarSearch
                       value={searchTerm}
@@ -226,6 +280,7 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
               >
                 <TableHead>
                   <TableRow>
+                    <TableExpandHeader />
                     {headers.map((header) => (
                       <TableHeader {...getHeaderProps({ header })}>
                         {header.header}
@@ -237,13 +292,28 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
                   {rows.map((row, index) => {
                     return (
                       <React.Fragment key={row.id}>
-                        <TableRow {...getRowProps({ row })}>
+                        <TableExpandRow {...getRowProps({ row })}>
                           {row.cells.map((cell) => (
                             <TableCell key={cell.id}>
                               {cell.value?.content ?? cell.value}
                             </TableCell>
                           ))}
-                        </TableRow>
+                        </TableExpandRow>
+                        {row.isExpanded ? (
+                          <TableExpandedRow
+                            className={styles.expandedActiveVisitRow}
+                            colSpan={headers.length + 2}
+                          >
+                            <TestsResults
+                              obs={paginatedLabEntries[index].obs}
+                            />
+                          </TableExpandedRow>
+                        ) : (
+                          <TableExpandedRow
+                            className={styles.hiddenRow}
+                            colSpan={headers.length + 2}
+                          />
+                        )}
                       </React.Fragment>
                     );
                   })}