OLMIS-7903: fixed duplicate code

OpenLMIS · Apr 4, 2024 · 48c050b · 48c050b
1 parent 016dcb5
commit 48c050b
Show file tree

Hide file tree

Showing 4 changed files with 124 additions and 135 deletions.
diff --git a/src/buq/components/MOHApproval/MOHApproveRegionBuq.jsx b/src/buq/components/MOHApproval/MOHApproveRegionBuq.jsx
@@ -17,16 +17,14 @@ import useLocalStorage from '../../../react-hooks/useLocalStorage';
 import useCostCalculationRegion from '../../../react-hooks/useCostCalculationRegion';
 import ModalErrorMessage from '../../../react-components/ModalErrorMessage';
 import { addThousandsSeparatorsForStrings } from '../../utils/helpers';
+import MOHSearchBuq from "./MOHSearchBuq";
 
 const MOHApproveRegionBuq = ({ loadingModalService }) => {
   const { forecastingPeriodsParams } = useBuqCommonFuncs();
   const { geographicZoneParams } = useGeographicZoneGroup();
 
   const [group, setGroup] = useState();
-  const [noneSelectedGroup, setNoneSelectedGroup] = useState(false);
   const [forecastingPeriodId, setForecastingPeriodId] = useState();
-  const [noneSelectedForecastingPeriod, setNoneSelectedForecastingPeriod] =
-    useState(false);
   const [displayFinalApproveModal, setDisplayFinalApproveModal] =
     useState(false);
   const [data, setData] = useState([]);
@@ -49,41 +47,30 @@ const MOHApproveRegionBuq = ({ loadingModalService }) => {
     loadingModalService
   );
 
-  const { handleSaveInLocalStorage } = useLocalStorage();
+    const { handleSaveInLocalStorage } = useLocalStorage();
 
-  useEffect(() => {
-    if (regionData) {
-      setData(regionData);
-    }
-  }, [regionData]);
+    useEffect(() => {
+        if (regionData) {
+            setData(regionData);
+        }
+    }, [regionData]);
 
-  useEffect(() => {
-    if (data.length) {
-      const allCheckboxesAreSelected = data.every(
-        (item) => item.checkbox === true
-      );      
-      setSelectedCheckbox(allCheckboxesAreSelected);
-    } else {
-      setSelectedCheckbox(false);
+    const checkAllCheckboxes = (checkData) => {
+        if (checkData.length) {
+            const allCheckboxesAreSelected = checkData.every(
+                (item) => item.checkbox === true
+            );
+            setSelectedCheckbox(allCheckboxesAreSelected);
+        } else {
+            setSelectedCheckbox(false);
+        }
     }
-  }, [data]);
-
-  const handleSearchButton = () => {
-    if (!group) {
-      setNoneSelectedGroup(true);
-    }
-    if (!forecastingPeriodId) {
-      setNoneSelectedForecastingPeriod(true);
-    }
-    if (group && forecastingPeriodId) {
-      fetchRegionData();
-    }
-  };
 
   const toggleAllCheckboxes = (value) => {
     setSelectedCheckbox(value);
     const updatedData = data.map((obj) => ({ ...obj, checkbox: value }));
     setData(updatedData);
+    checkAllCheckboxes(updatedData);
   };
 
   const toggleRowCheckbox = (value, row) => {
@@ -95,6 +82,7 @@ const MOHApproveRegionBuq = ({ loadingModalService }) => {
     });
 
     setData(updatedData);
+    checkAllCheckboxes(updatedData);
   };
 
   const handleFinalApproveAction = () => {
@@ -219,56 +207,26 @@ const MOHApproveRegionBuq = ({ loadingModalService }) => {
     [data, selectedCheckbox]
   );
 
+    const handleSetData = (payload) => setData(payload);
+    const handleSetGroup = (payload) => setGroup(payload);
+    const handleSetForecastingPeriodId = (payload) => setForecastingPeriodId(payload);
+
   return (
     <>
       <h2 className="bottom-line">Consolidated Summary</h2>
       <div className="approve-buq-page-container">
-        <div className="approve-buq-page-left">
-          <div className="approve-buq-select-section">
-            <div className="approve-buq-select">
-              <p className="is-required">Group</p>
-              <InputWithSuggestionsAndValidation
-                data={geographicZoneParams}
-                defaultValue={geographicZoneParams[0]}
-                displayValue="name"
-                placeholder="Select group"
-                onClick={(value) => {
-                  setGroup(value);
-                  setNoneSelectedGroup(false);
-                }}
-                isInvalid={noneSelectedGroup}
-                displayInformation={true}
-              />
-            </div>
-            <div className="approve-buq-select">
-              <p className="is-required">Forecasting period</p>
-              <InputWithSuggestionsAndValidation
-                data={forecastingPeriodsParams}
-                defaultValue={forecastingPeriodsParams.at(-1)}
-                displayValue="name"
-                placeholder="Select period"
-                onClick={(value) => {
-                  setForecastingPeriodId(value);
-                  setNoneSelectedForecastingPeriod(false);
-                }}
-                isInvalid={noneSelectedForecastingPeriod}
-                displayInformation={true}
-              />
-            </div>
-          </div>
-          <div className="approve-buq-button">
-            <button
-              className="primary"
-              type="button"
-              onClick={() => handleSearchButton()}
-            >
-              Search
-            </button>
-          </div>
-        </div>
+        <MOHSearchBuq
+          geographicZoneParams={geographicZoneParams}
+          forecastingPeriodsParams={forecastingPeriodsParams}
+          group={group}
+          handleSetGroup={handleSetData}
+          forecastingPeriodId={forecastingPeriodId}
+          handleSetForecastingPeriodId={handleSetForecastingPeriodId}
+          fetchBuqs={fetchRegionData}
+        />
         <Table
           columns={columns}
-          data={data}
+          data={data[0]?.buqIdsToBeApproved !== undefined ? data : []}
           noItemsMessage="No pending consolidated summary"
           customReactTableStyle="moh-approve-buq-region"
         />

diff --git a/src/buq/components/MOHApproval/MOHFinalApprovalTable.jsx b/src/buq/components/MOHApproval/MOHFinalApprovalTable.jsx
@@ -45,8 +45,8 @@ const MOHApprovalTable = ({ data, redirectUrl, handleSetData }) => {
                 Header: () => (
                     <div className="prepare-buq-table-actions">
                         <Checkbox
-                            name="toggleAllCheckboxes"
                             checked={selectedCheckbox}
+                            name="toggleAllCheckboxes"
                             onClick={(value) => toggleAllCheckboxes(value)}
                         />
                     </div>
@@ -55,8 +55,8 @@ const MOHApprovalTable = ({ data, redirectUrl, handleSetData }) => {
                 Cell: ({ row }) => (
                     <div className="prepare-buq-table-actions">
                         <Checkbox
-                            name={row.original.id}
                             checked={row.original.checkbox}
+                            name={row.original.id}
                             onClick={(value) => toggleRowCheckbox(value, row.original)}
                         />
                     </div>
@@ -67,8 +67,8 @@ const MOHApprovalTable = ({ data, redirectUrl, handleSetData }) => {
                     <div className="header-moh-approve-status-icon">
                         <div>Status</div>
                         <WebTooltip
-                            shouldDisplayTooltip={true}
                             tooltipContent={"All facilities have reported in this period"}
+                            shouldDisplayTooltip={true}
                         >
                             <i className="fa fa-info-circle"></i>
                         </WebTooltip>

diff --git a/src/buq/components/MOHApproval/MOHSearchBuq.jsx b/src/buq/components/MOHApproval/MOHSearchBuq.jsx
@@ -0,0 +1,76 @@
+import React, { useState } from "react";
+import InputWithSuggestionsAndValidation from '../../../react-components/inputs/input-with-suggestions-and-validation';
+
+const MOHSearchBuq = ({
+                          geographicZoneParams,
+                          forecastingPeriodsParams,
+                          group,
+                          handleSetGroup,
+                          forecastingPeriodId,
+                          handleSetForecastingPeriodId,
+                          fetchBuqs
+                      }) => {
+
+    const [noneSelectedGroup, setNoneSelectedGroup] = useState(false);
+    const [noneSelectedForecastingPeriod, setNoneSelectedForecastingPeriod] = useState(false);
+
+    const handleSearchButton = () => {
+        if (!group) {
+            setNoneSelectedGroup(true);
+        }
+        if (!forecastingPeriodId) {
+            setNoneSelectedForecastingPeriod(true);
+        }
+        if (group && forecastingPeriodId) {
+            fetchBuqs();
+        }
+    };
+
+    return (
+        <div className="approve-buq-page-left">
+            <div className="approve-buq-select-section">
+                <div className="approve-buq-select">
+                    <p className="is-required">Group</p>
+                    <InputWithSuggestionsAndValidation
+                        data={geographicZoneParams}
+                        defaultValue={geographicZoneParams[0]}
+                        displayValue="name"
+                        placeholder="Select group"
+                        onClick={(value) => {
+                            handleSetGroup(value);
+                            setNoneSelectedGroup(false);
+                        }}
+                        isInvalid={noneSelectedGroup}
+                        displayInformation={true}
+                    />
+                </div>
+                <div className="approve-buq-select">
+                    <p className="is-required">Forecasting period</p>
+                    <InputWithSuggestionsAndValidation
+                        data={forecastingPeriodsParams}
+                        defaultValue={forecastingPeriodsParams.at(-1)}
+                        displayValue="name"
+                        placeholder="Select period"
+                        onClick={(value) => {
+                            handleSetForecastingPeriodId(value);
+                            setNoneSelectedForecastingPeriod(false);
+                        }}
+                        isInvalid={noneSelectedForecastingPeriod}
+                        displayInformation={true}
+                    />
+                </div>
+            </div>
+            <div className="approve-buq-button">
+                <button
+                    className="primary"
+                    type="button"
+                    onClick={() => handleSearchButton()}
+                >
+                    Search
+                </button>
+            </div>
+        </div>
+    )
+}
+
+export default MOHSearchBuq
diff --git a/src/buq/components/MOHApproval/MohForFinalApproval.jsx b/src/buq/components/MOHApproval/MohForFinalApproval.jsx
@@ -12,13 +12,12 @@ import ModalErrorMessage from '../../../react-components/ModalErrorMessage';
 import MOHFinalApprovalTable from "./MOHFinalApprovalTable";
 import useCostCalculationsForFourLevels from "../../../react-hooks/useCostCalculationsForFourLevels";
 import DetailsBlock from '../../../react-components/DetailsBlock';
+import MOHSearchBuq from "./MOHSearchBuq";
 
 const MohForFinalApproval = ({ loadingModalService, facilityService }) => {
     const { forecastingPeriodsParams } = useBuqCommonFuncs();
     const { geographicZoneParams } = useGeographicZoneGroup();
 
-    const [noneSelectedGroup, setNoneSelectedGroup] = useState(false);
-    const [noneSelectedForecastingPeriod, setNoneSelectedForecastingPeriod] = useState(false);
     const [group, setGroup] = useState();
     const [forecastingPeriodId, setForecastingPeriodId] = useState();
     const [data, setData] = useState([]);
@@ -107,8 +106,6 @@ const MohForFinalApproval = ({ loadingModalService, facilityService }) => {
         }
     };
 
-    const handleSetData = (payload) => setData(payload);
-
     const detailsData = data[0]?.calculatedGroupsCosts !== undefined ? [
         [
             {
@@ -176,65 +173,23 @@ const MohForFinalApproval = ({ loadingModalService, facilityService }) => {
         ]
     ] : [];
 
-    const handleSearchButton = () => {
-        if (!group) {
-            setNoneSelectedGroup(true);
-        }
-        if (!forecastingPeriodId) {
-            setNoneSelectedForecastingPeriod(true);
-        }
-        if (group && forecastingPeriodId) {
-            fetchBuqForFinalApproval();
-        }
-    };
+    const handleSetData = (payload) => setData(payload);
+    const handleSetGroup = (payload) => setGroup(payload);
+    const handleSetForecastingPeriodId = (payload) => setForecastingPeriodId(payload);
 
     return (
         <>
             <h2 className="bottom-line">Consolidated Summary</h2>
             <div className="approve-buq-page-container">
-                <div className="approve-buq-page-left">
-                    <div className="approve-buq-select-section">
-                        <div className="approve-buq-select">
-                            <p className="is-required">Group</p>
-                            <InputWithSuggestionsAndValidation
-                                data={geographicZoneParams}
-                                defaultValue={geographicZoneParams[0]}
-                                displayValue="name"
-                                placeholder="Select group"
-                                onClick={(value) => {
-                                    setGroup(value);
-                                    setNoneSelectedGroup(false);
-                                }}
-                                isInvalid={noneSelectedGroup}
-                                displayInformation={true}
-                            />
-                        </div>
-                        <div className="approve-buq-select">
-                            <p className="is-required">Forecasting period</p>
-                            <InputWithSuggestionsAndValidation
-                                data={forecastingPeriodsParams}
-                                defaultValue={forecastingPeriodsParams.at(-1)}
-                                displayValue="name"
-                                placeholder="Select period"
-                                onClick={(value) => {
-                                    setForecastingPeriodId(value);
-                                    setNoneSelectedForecastingPeriod(false);
-                                }}
-                                isInvalid={noneSelectedForecastingPeriod}
-                                displayInformation={true}
-                            />
-                        </div>
-                    </div>
-                    <div className="approve-buq-button">
-                        <button
-                            className="primary"
-                            type="button"
-                            onClick={() => handleSearchButton()}
-                        >
-                            Search
-                        </button>
-                    </div>
-                </div>
+                <MOHSearchBuq
+                    geographicZoneParams={geographicZoneParams}
+                    forecastingPeriodsParams={forecastingPeriodsParams}
+                    group={group}
+                    handleSetGroup={handleSetData}
+                    forecastingPeriodId={forecastingPeriodId}
+                    handleSetForecastingPeriodId={handleSetForecastingPeriodId}
+                    fetchBuqs={fetchBuqForFinalApproval}
+                />
                 <div className="approve-buq-page-right">
                     {data[0]?.calculatedGroupsCosts !== undefined ?
                         <DetailsBlock