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/patient-chart/laboratory-order.component.tsx

@@ -29,9 +29,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 Results from "./results-summary/results/results.component";
 
 interface LaboratoryOrderOverviewProps {
   patientUuid: string;
@@ -151,7 +155,10 @@ const LaboratoryOrder: React.FC<LaboratoryOrderOverviewProps> = ({
               return (
                 <Tag
                   style={{
-                    background: "rgb(111 111 111 / 97%)",
+                    background: `${getOrderColor(
+                      order.dateActivated,
+                      order.dateStopped
+                    )}`,
                     color: "white",
                   }}
                   role="tooltip"

src/patient-chart/laboratory-order.resource.ts

@@ -231,7 +231,7 @@ export interface Order {
   previousOrder: any;
   dateActivated: string;
   scheduledDate: any;
-  dateStopped: any;
+  dateStopped: string;
   autoExpireDate: any;
   encounter: Encounter;
   orderer: Orderer;
@@ -301,6 +301,19 @@ export interface OrderType {
   resourceVersion: string;
 }
 
+export const getOrderColor = (activated: string, stopped: string) => {
+  const numAct = parseInt(activated);
+  let numStopped = 0;
+  if (stopped == null) {
+    numStopped = parseInt(stopped);
+  }
+  if (numAct <= 0 && numStopped == 0) {
+    return "green";
+  } else {
+    return "#6F6F6F";
+  }
+};
+
 export function useLabOrders(patientUuid: string) {
   const config = useConfig();
   const { laboratoryEncounterTypeUuid } = config;

src/patient-chart/results-summary/results-summary.component.tsx

@@ -18,6 +18,7 @@ import { ErrorState } from "@openmrs/esm-patient-common-lib";
 import PrintResultsSummary from "./print-results-summary.component";
 import { formatDate, parseDate, showModal } from "@openmrs/esm-framework";
 import { useTranslation } from "react-i18next";
+import { useGetLabEncounterTests } from "./results/results.resource";
 
 interface ResultsSummaryProps {
   encounterUuid: string;
@@ -32,6 +33,7 @@ const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
   // get encouter details
   const { encounter, isLoading, isError } = useGetEncounterById(encounterUuid);
 
+  // print button
   const PrintButtonAction: React.FC = () => {
     const [isPrinting, setIsPrinting] = useState(false);
 
@@ -73,6 +75,7 @@ const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
     );
   };
 
+  // email button
   const EmailButtonAction: React.FC = () => {
     const handleButtonClick = (event: MouseEvent) => {
       event.preventDefault();
@@ -87,11 +90,10 @@ const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
     );
   };
 
+  // edit button
   const EditButtonAction: React.FC<EditResultsProps> = ({
     encounterResponse,
   }) => {
-    console.info("encounter edit", encounter);
-
     const launchEditResultModal = useCallback(() => {
       const dispose = showModal("edit-results-dialog", {
         encounterResponse,
@@ -107,6 +109,7 @@ const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
       />
     );
   };
+
   if (isLoading) {
     return <DataTableSkeleton role="progressbar" />;
   }
@@ -153,12 +156,15 @@ const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
                   <span> Results Ordered</span>
                 </div>
                 <div>
-                  <EditButtonAction encounterResponse={encounter} />
+                  {/* <EditButtonAction encounterResponse={encounter} /> */}
                 </div>
               </div>
             </section>
             <section className={styles.section}>
-              <TestsResults orders={encounter?.orders} />
+              <TestsResults
+                encounterUuid={encounter.uuid}
+                orders={encounter?.orders}
+              />
             </section>
           </ModalBody>
           {/* <ModalFooter>

src/patient-chart/results-summary/results/results.component.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useGetLabEncounterTests } from "./results.resource";
+import { DataTableSkeleton } from "@carbon/react";
+import { ErrorState } from "@openmrs/esm-framework";
+
+interface ResultsProps {
+  encounterUuid: string;
+}
+
+const Results: React.FC<ResultsProps> = ({ encounterUuid }) => {
+  const { labResults, isLoading, isError } =
+    useGetLabEncounterTests(encounterUuid);
+
+  if (isLoading) {
+    return <DataTableSkeleton role="progressbar" />;
+  }
+
+  if (isError) {
+    return <ErrorState error={isError} headerTitle={"Results Error"} />;
+  }
+
+  return <span>{JSON.stringify(labResults)}</span>;
+};
+
+export default Results;

src/patient-chart/results-summary/results/results.resource.ts

@@ -0,0 +1,50 @@
+import { FetchResponse, openmrsFetch, useConfig } from "@openmrs/esm-framework";
+import useSWR from "swr";
+
+export interface LabTestResultResponse {
+  results: Result[];
+}
+
+export interface Result {
+  order: string;
+  result: Result2[];
+  links: Link[];
+}
+
+export interface Result2 {
+  investigation: string;
+  set: string;
+  test: string;
+  value: string;
+  hiNormal: any;
+  lowNormal: any;
+  lowAbsolute: any;
+  hiCritical: any;
+  lowCritical: any;
+  unit: any;
+  level: string;
+  concept: string;
+  encounterId: any;
+  testId: any;
+  hiAbsolute: any;
+}
+
+export interface Link {
+  rel: string;
+  uri: string;
+  resourceAlias: string;
+}
+
+export function useGetLabEncounterTests(encounterUuid: string) {
+  const apiUrl = `/ws/rest/v1/encountertestresults?encounterUuid=${encounterUuid}`;
+
+  const { data, error, isLoading } = useSWR<
+    { data: LabTestResultResponse },
+    Error
+  >(apiUrl, openmrsFetch, { refreshInterval: 3000 });
+  return {
+    labResults: data?.data ? data?.data.results : [],
+    isLoading,
+    isError: error,
+  };
+}

src/patient-chart/results-summary/test-print-results-table.component.tsx

@@ -37,7 +37,7 @@ const TestsPrintResults: React.FC<TestOrdersProps> = ({ orders }) => {
       key: "expectedResults",
     },
     {
-      id: 2,
+      id: 3,
       header: t("results", " Results"),
       key: "results",
     },

src/patient-chart/results-summary/test-results-rescend-action-menu.component.tsx

@@ -1,5 +1,4 @@
-import { showModal, useSession } from "@openmrs/esm-framework";
-import React, { useCallback } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import { Button, Tooltip } from "@carbon/react";
 import { ArrowRight } from "@carbon/react/icons";