ft : fix auto refresh on list (#8)

(cherry picked from commit b5835e2)

package.json

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

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

@@ -309,7 +309,7 @@ export function useLabOrders(patientUuid: string) {
   const { data, error, isLoading } = useSWR<
     { data: LaboratoryResponse },
     Error
-  >(apiUrl, openmrsFetch);
+  >(apiUrl, openmrsFetch, { refreshInterval: 3000 });
 
   return {
     labRequests: data?.data ? data?.data?.results : [],

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

@@ -7,25 +7,36 @@ import {
 } from "@carbon/react";
 import React from "react";
 import { useTranslation } from "react-i18next";
+import { EncounterResponse } from "../../laboratory-item/view-laboratory-item.resource";
 
 interface EditResultsDialogProps {
+  encounterResponse: EncounterResponse;
   closeModal: () => void;
 }
 
 const EditResultsDialog: React.FC<EditResultsDialogProps> = ({
+  encounterResponse,
   closeModal,
 }) => {
   const { t } = useTranslation();
+
   return (
     <>
       <Form>
-        <ModalHeader></ModalHeader>
-        <ModalBody></ModalBody>
+        <ModalHeader
+          closeModal={closeModal}
+          title={t("editOrder", "Edit Order")}
+        />
+        <ModalBody>
+          <>
+            <span>{encounterResponse?.display}</span>
+          </>
+        </ModalBody>
         <ModalFooter>
           <Button kind="secondary" onClick={closeModal}>
             {t("cancel", "Cancel")}
           </Button>
-          <Button type="submit">{t("editOrder", "Edit Order")}</Button>
+          <Button type="submit">{t("editOrder", "Submit")}</Button>
         </ModalFooter>
       </Form>
     </>

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

@@ -1,19 +1,34 @@
-import React, { useEffect, useRef, useState } from "react";
-import { Button, DataTableSkeleton } from "@carbon/react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+  Button,
+  DataTableSkeleton,
+  Form,
+  ModalBody,
+  ModalFooter,
+} from "@carbon/react";
 import { Printer, MailAll, Edit } from "@carbon/react/icons";
 import styles from "./results-summary.scss";
 import TestsResults from "./test-results-table.component";
 import { useReactToPrint } from "react-to-print";
-import { useGetEncounterById } from "../laboratory-item/view-laboratory-item.resource";
+import {
+  EncounterResponse,
+  useGetEncounterById,
+} from "../laboratory-item/view-laboratory-item.resource";
 import { ErrorState } from "@openmrs/esm-patient-common-lib";
 import PrintResultsSummary from "./print-results-summary.component";
-import { formatDate, parseDate } from "@openmrs/esm-framework";
+import { formatDate, parseDate, showModal } from "@openmrs/esm-framework";
+import { useTranslation } from "react-i18next";
 
 interface ResultsSummaryProps {
   encounterUuid: string;
 }
 
+interface EditResultsProps {
+  encounterResponse: EncounterResponse;
+}
+
 const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
+  const { t } = useTranslation();
   // get encouter details
   const { encounter, isLoading, isError } = useGetEncounterById(encounterUuid);
 
@@ -72,15 +87,22 @@ const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
     );
   };
 
-  const EditButtonAction: React.FC = () => {
-    const handleButtonClick = (event: MouseEvent) => {
-      event.preventDefault();
-    };
+  const EditButtonAction: React.FC<EditResultsProps> = ({
+    encounterResponse,
+  }) => {
+    console.info("encounter edit", encounter);
+
+    const launchEditResultModal = useCallback(() => {
+      const dispose = showModal("edit-results-dialog", {
+        encounterResponse,
+        closeModal: () => dispose(),
+      });
+    }, [encounterResponse]);
     return (
       <Button
         kind="ghost"
         size="sm"
-        onClick={(e) => handleButtonClick(e)}
+        onClick={launchEditResultModal}
         renderIcon={(props) => <Edit size={16} {...props} />}
       />
     );
@@ -95,47 +117,55 @@ const ResultsSummary: React.FC<ResultsSummaryProps> = ({ encounterUuid }) => {
   if (encounter) {
     return (
       <div>
-        <section className={styles.section}>
-          <div style={{ display: "flex", justifyContent: "space-between" }}>
-            <div></div>
-            <div style={{ display: "flex", flexDirection: "row" }}>
-              <PrintButtonAction />
-              <EmailButtonAction />
-            </div>
-          </div>
-        </section>
-        <section className={styles.section}>
-          <div style={{ display: "flex", flexDirection: "column" }}>
-            <span style={{ margin: "5px" }}>
-              Date :{" "}
-              {formatDate(parseDate(encounter.encounterDatetime), {
-                time: false,
-              })}
-            </span>
-            <span style={{ margin: "5px" }}>
-              Ordered By : {encounter?.auditInfo?.creator?.display}
-            </span>
-          </div>
-        </section>
-        <section className={styles.section}>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center",
-            }}
-          >
-            <div>
-              <span> Results Ordered</span>
-            </div>
-            <div>
-              <EditButtonAction />
-            </div>
-          </div>
-        </section>
-        <section className={styles.section}>
-          <TestsResults orders={encounter?.orders} />
-        </section>
+        <Form>
+          <ModalBody>
+            <section className={styles.section}>
+              <div style={{ display: "flex", justifyContent: "space-between" }}>
+                <div></div>
+                <div style={{ display: "flex", flexDirection: "row" }}>
+                  <PrintButtonAction />
+                  <EmailButtonAction />
+                </div>
+              </div>
+            </section>
+            <section className={styles.section}>
+              <div style={{ display: "flex", flexDirection: "column" }}>
+                <span style={{ margin: "5px" }}>
+                  Date :{" "}
+                  {formatDate(parseDate(encounter.encounterDatetime), {
+                    time: true,
+                  })}
+                </span>
+                <span style={{ margin: "5px" }}>
+                  Ordered By : {encounter?.auditInfo?.creator?.display}
+                </span>
+              </div>
+            </section>
+            <section className={styles.section}>
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <span> Results Ordered</span>
+                </div>
+                <div>
+                  <EditButtonAction encounterResponse={encounter} />
+                </div>
+              </div>
+            </section>
+            <section className={styles.section}>
+              <TestsResults orders={encounter?.orders} />
+            </section>
+          </ModalBody>
+          {/* <ModalFooter>
+            <Button kind="secondary">{t("cancel", "Cancel")}</Button>
+            <Button type="submit">{t("results", "Save")}</Button>
+          </ModalFooter> */}
+        </Form>
       </div>
     );
   }

src/patient-chart/results-summary/results-summary.scss

@@ -4,7 +4,7 @@
 @import '../../root.scss';
 
   .section {
-    margin: 10px;
+    margin: 5px;
   }
 
   .headerBtnContainer {