From 7a5c443bac63207df002de719ce19874f8b84da5 Mon Sep 17 00:00:00 2001
From: Silevester Dongmo <58907550+SilverD3@users.noreply.github.com>
Date: Wed, 13 Nov 2024 10:56:00 +0100
Subject: [PATCH] OH2-386 | Laboratory - edit page: fix "results" select (#685)

* fix:OH2-386 | Laboratory - edit page: fix "results" select

* chore:code improvement

* chore: remove exam results table header

* chore:remove exam result header
---
 .../laboratory/examForm/ExamForm.tsx          | 26 ++++---------
 .../patientExams/ExamForm/ExamForm.tsx        | 11 +-----
 .../examRowTable/ExamRowTable.tsx             | 37 +++++++------------
 .../patientExams/examRowTable/types.ts        |  6 +--
 4 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/src/components/accessories/laboratory/examForm/ExamForm.tsx b/src/components/accessories/laboratory/examForm/ExamForm.tsx
index 9fe0b27ed..8a62db45d 100644
--- a/src/components/accessories/laboratory/examForm/ExamForm.tsx
+++ b/src/components/accessories/laboratory/examForm/ExamForm.tsx
@@ -141,14 +141,6 @@ const ExamForm: FC<ExamProps> = ({
     setActivityTransitionState("IDLE");
   }, [dispatch]);
 
-  const rowTableHeaders: Array<{
-    label: string;
-    align: "left" | "right" | "center" | "justify";
-  }> = [
-    { label: t("lab.resultrow"), align: "left" },
-    { label: t("lab.value"), align: "right" },
-  ];
-
   const validationSchema = object({
     labDate: string()
       .required(t("common.required"))
@@ -284,15 +276,14 @@ const ExamForm: FC<ExamProps> = ({
   );
 
   const onBlurCallbackForTableRow = useCallback(
-    () => (value: string) => {
-      setRowsData((rowObjs: string[]) => {
-        if (!rowObjs.includes(value)) {
-          rowObjs.push(value);
-        } else rowObjs = rowObjs.filter((e) => e !== value);
-        return rowObjs;
-      });
+    (value: string, checked: boolean) => {
+      if (checked && !rowsData.includes(value)) {
+        setRowsData((prevState) => [...prevState, value]);
+      } else {
+        setRowsData((prevState) => prevState.filter((row) => row !== value));
+      }
     },
-    []
+    [rowsData]
   );
 
   const [openResetConfirmation, setOpenResetConfirmation] = useState(false);
@@ -411,8 +402,7 @@ const ExamForm: FC<ExamProps> = ({
               {currentExamProcedure === "2" && (
                 <ExamRowTable
                   title={t("lab.resultstitle")}
-                  headerData={rowTableHeaders}
-                  onBlur={onBlurCallbackForTableRow()}
+                  onChange={onBlurCallbackForTableRow}
                   rows={examRows}
                   disabled={isLoading}
                 />
diff --git a/src/components/accessories/patientExams/ExamForm/ExamForm.tsx b/src/components/accessories/patientExams/ExamForm/ExamForm.tsx
index ae93c8991..4a7d7d64d 100644
--- a/src/components/accessories/patientExams/ExamForm/ExamForm.tsx
+++ b/src/components/accessories/patientExams/ExamForm/ExamForm.tsx
@@ -41,14 +41,6 @@ const ExamForm: FC<ExamProps> = ({
   const [currentExamProcedure, setCurrentExamProcedure] = useState("");
   const labToEditRows = labWithRowsToEdit.laboratoryRowList ?? [];
 
-  const rowTableHeaders: Array<{
-    label: string;
-    align: "left" | "right" | "center" | "justify";
-  }> = [
-    { label: t("lab.resultrow"), align: "left" },
-    { label: t("lab.value"), align: "right" },
-  ];
-
   const validationSchema = object({
     labDate: string()
       .required(t("common.required"))
@@ -287,8 +279,7 @@ const ExamForm: FC<ExamProps> = ({
               {currentExamProcedure === "2" && (
                 <ExamRowTable
                   title={t("lab.resultstitle")}
-                  headerData={rowTableHeaders}
-                  onBlur={onBlurCallbackForTableRow()}
+                  onChange={onBlurCallbackForTableRow()}
                   rows={examRows}
                   disabled={isLoading}
                 />
diff --git a/src/components/accessories/patientExams/examRowTable/ExamRowTable.tsx b/src/components/accessories/patientExams/examRowTable/ExamRowTable.tsx
index ada2220e2..4c489b57e 100644
--- a/src/components/accessories/patientExams/examRowTable/ExamRowTable.tsx
+++ b/src/components/accessories/patientExams/examRowTable/ExamRowTable.tsx
@@ -8,19 +8,17 @@ import Table from "@mui/material/Table";
 import TableBody from "@mui/material/TableBody";
 import TableCell from "@mui/material/TableCell";
 import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
 import TableRow from "@mui/material/TableRow";
 import { useAppSelector } from "libraries/hooks/redux";
 import { debounce, isEmpty } from "lodash";
-import React, { FC, useCallback } from "react";
+import React, { ChangeEvent, FC, useCallback } from "react";
 import { IState } from "../../../../types";
 import "./styles.scss";
 import { IEditableTableProps } from "./types";
 
 const ExamRowTable: FC<IEditableTableProps> = ({
   rows,
-  onBlur,
-  headerData,
+  onChange,
   title,
   disabled = false,
 }) => {
@@ -29,16 +27,22 @@ const ExamRowTable: FC<IEditableTableProps> = ({
       state.laboratories.getLabWithRowsByCode.data?.laboratoryRowList
   );
 
-  const handleOnBlur = (value: string) => {
-    debounceUpdate(value);
-  };
-
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const debounceUpdate = useCallback(
-    debounce((value: string) => onBlur(value), 100),
+    debounce(
+      (value: string, checked: boolean) => onChange(value, checked),
+      100
+    ),
     []
   );
 
+  const handleChange = useCallback(
+    (value: string) => (_: ChangeEvent, checked: boolean) => {
+      debounceUpdate(value, checked);
+    },
+    [debounceUpdate]
+  );
+
   return (
     <Accordion disabled={disabled}>
       <AccordionSummary
@@ -56,17 +60,6 @@ const ExamRowTable: FC<IEditableTableProps> = ({
             size="small"
             aria-label="results table"
           >
-            <TableHead>
-              <TableRow key={"header"}>
-                {headerData.map((row, index) => {
-                  return (
-                    <TableCell key={index} align={row.align}>
-                      {row.label}
-                    </TableCell>
-                  );
-                })}
-              </TableRow>
-            </TableHead>
             <TableBody>
               {rows?.map((row, index) => (
                 <TableRow key={index}>
@@ -75,9 +68,7 @@ const ExamRowTable: FC<IEditableTableProps> = ({
                   </TableCell>
                   <TableCell align="right" component="td" scope="row">
                     <Checkbox
-                      onChange={(e, value) => {
-                        handleOnBlur(row.label);
-                      }}
+                      onChange={handleChange(row.label)}
                       defaultChecked={
                         !isEmpty(
                           labToEditRows?.filter((e) => e === row.label) ?? []
diff --git a/src/components/accessories/patientExams/examRowTable/types.ts b/src/components/accessories/patientExams/examRowTable/types.ts
index c86d85f1e..a69d48903 100644
--- a/src/components/accessories/patientExams/examRowTable/types.ts
+++ b/src/components/accessories/patientExams/examRowTable/types.ts
@@ -1,11 +1,7 @@
 export interface IEditableTableProps {
   rows: Array<{ label: string; value: string }>;
-  onBlur: (value: string) => void;
+  onChange: (value: string, checked: boolean) => void;
   fieldValues?: string[];
-  headerData: Array<{
-    label: string;
-    align: "left" | "right" | "center" | "justify";
-  }>;
   title: string;
   disabled?: boolean;
 }