From 78be1baed9c047ba820baf0a5fe12f617a8bbd17 Mon Sep 17 00:00:00 2001
From: Ramkrishna-egov <ramkrishna.sahoo@egovernments.org>
Date: Fri, 25 Oct 2024 13:57:57 +0530
Subject: [PATCH] Added ShowMore Popup for Boundary Summary Screen

---
 .../packages/modules/microplan/src/Module.js  |  4 +-
 .../src/components/ShowMoreWrapper.js         | 41 +++++++++++++
 .../components/UserAccessMgmtTableWrapper.js  | 47 ++------------
 .../src/components/subBoundaryView.js         | 61 +++++++++++++++----
 4 files changed, 100 insertions(+), 53 deletions(-)
 create mode 100644 health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ShowMoreWrapper.js

diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js
index 7846d99a54d..f2a6087f3e5 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/Module.js
@@ -26,6 +26,7 @@ import FacilityPopup from "./components/FacilityPopup";
 import UserAccessMgmt from "./components/UserAccessMgmt";
 import UserAccessMgmtTableWrapper from "./components/UserAccessMgmtTableWrapper";
 import { DataMgmtComponent } from "./components/DataMgmtComponent";
+import { ShowMoreWrapper } from "./components/ShowMoreWrapper";
 
 export const MicroplanModule = ({ stateCode, userType, tenants }) => {
   const { path, url } = useRouteMatch();
@@ -82,7 +83,8 @@ const componentsToRegister = {
   FacilityPopup,
   UserAccessMgmt,
   UserAccessMgmtTableWrapper,
-  DataMgmtComponent
+  DataMgmtComponent,
+  ShowMoreWrapper,
 };
 
 export const initMicroplanComponents = () => {
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ShowMoreWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ShowMoreWrapper.js
new file mode 100644
index 00000000000..67e8b6f06ec
--- /dev/null
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/ShowMoreWrapper.js
@@ -0,0 +1,41 @@
+import React, { Fragment, useEffect, useState } from "react";
+import { Button, PopUp, Chip, Loader,} from "@egovernments/digit-ui-components";
+import { useTranslation } from "react-i18next";
+
+
+export const ShowMoreWrapper = ({ setShowPopUp, alreadyQueuedSelectedState, heading="" }) => {
+    const { t } = useTranslation();
+   
+    return (
+       <PopUp
+       className={""}
+       style={{
+           maxWidth: '40%'
+       }}
+       type={"default"}
+       heading={t(heading)}
+       children={[]}
+       onOverlayClick={() => {
+           setShowPopUp(false);
+       }}
+       onClose={() => {
+           setShowPopUp(false);
+       }}
+       >
+       <div className="digit-tag-container userAccessCell">
+      {alreadyQueuedSelectedState?.map((item, index) => (
+               <Chip 
+                key={index} 
+                text={t(item)} 
+                className=""
+                error=""
+                extraStyles={{}}
+                iconReq=""
+                hideClose={true}
+               />
+         ))}  
+         </div>
+       </PopUp>
+    );
+
+ };
\ No newline at end of file
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
index dbd76dc89d6..fe0dd1fe30b 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/UserAccessMgmtTableWrapper.js
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import DataTable from "react-data-table-component";
 import { CardSubHeader, Card } from "@egovernments/digit-ui-react-components";
 import { tableCustomStyle } from "./tableCustomStyle";
+import { ShowMoreWrapper } from "./ShowMoreWrapper";
 
 
 function groupEmployeesByPlan(data, planData) {
@@ -31,43 +32,6 @@ function groupEmployeesByPlan(data, planData) {
     return groupedEmployees ? Object.values(groupedEmployees) : [];
   }
 
-  const Wrapper = ({ setShowPopUp, alreadyQueuedSelectedState }) => {
-   
-    const { t } = useTranslation();
-     return (
-        <PopUp
-        className={""}
-        style={{
-            maxWidth: '40%'
-        }}
-        type={"default"}
-        heading={t("MICROPLAN_ADMINISTRATIVE_AREA")}
-        children={[]}
-        onOverlayClick={() => {
-            setShowPopUp(false);
-        }}
-        onClose={() => {
-            setShowPopUp(false);
-        }}
-        >
-        <div className="digit-tag-container userAccessCell">
-       {alreadyQueuedSelectedState?.map((item, index) => (
-                <Chip 
-                 key={index} 
-                 text={t(item)} 
-                 className=""
-                 error=""
-                 extraStyles={{}}
-                 iconReq=""
-                 hideClose={true}
-                />
-          ))}  
-          </div>
-        </PopUp>
-     );
-
-  };
-
 const UserAccessMgmtTableWrapper = ({ role,}) => {
   const { t } = useTranslation();
   const tenantId = Digit.ULBService.getCurrentTenantId();
@@ -189,10 +153,11 @@ const UserAccessMgmtTableWrapper = ({ role,}) => {
             />
           )}
            {showPopUp && (
-            <Wrapper
-              setShowPopUp={setShowPopUp}
-              alreadyQueuedSelectedState={row?.planData?.jurisdiction}
-            />
+            <ShowMoreWrapper
+            setShowPopUp={setShowPopUp}
+            alreadyQueuedSelectedState={row?.planData?.jurisdiction}
+            heading={"MICROPLAN_ADMINISTRATIVE_AREA"}
+          />
           )}
                 </div>
             );
diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
index b4b7081619e..ce592eb172c 100644
--- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
+++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/components/subBoundaryView.js
@@ -1,9 +1,17 @@
-import React from 'react'
+import React, { useState } from 'react'
 import HeaderComp from './HeaderComp';
-import { Card } from '@egovernments/digit-ui-components';
-import { Chip } from '@egovernments/digit-ui-components';
+import { Card, Button, PopUp, Chip, Loader } from '@egovernments/digit-ui-components';
+import { ShowMoreWrapper } from './ShowMoreWrapper';
+import { useTranslation } from 'react-i18next';
 
 const SubBoundaryView = ({ title, arr }) => {
+    const [showPopUp, setShowPopUp] = useState(false);
+    const { t } = useTranslation();
+
+    const openPopUp = () => {
+        setShowPopUp(true);
+      };
+
     return (
         <div>
             {
@@ -11,22 +19,53 @@ const SubBoundaryView = ({ title, arr }) => {
                     <Card>
                         <HeaderComp title={title} />
                         {/* Flex container for the chips */}
-                        <div className="subBoundarycomp-container">
-                            {arr.map((el, ind) => {
+                        <div className="digit-tag-container userAccessCell">
+                            {arr?.slice(0, 10)?.map((el, ind) => {
                                 return (
-                                    <div className="digit-tag-container">
                                         <Chip
+                                            key={ind}
                                             className=""
                                             error=""
                                             extraStyles={{}}
                                             iconReq=""
-                                            onClick={function noRefCheck() { }}
-                                            onTagClick={function noRefCheck() { }}
-                                            text={el}
+                                            hideClose={true}
+                                            text={t(el)}
                                         />
-                                    </div>
                                 );
-                            })}
+                            }
+                            
+                            
+                            )}
+                            {arr?.length > (10) && (
+                                <Button
+                                  label={`+${arr?.length - (10)} ${t("ES_MORE")}`}
+                                  onClick={() => openPopUp()}
+                                  variation="link"
+                                  style={{
+                                    height: "2rem",
+                                    minWidth: "4.188rem",
+                                    minHeight: "2rem",
+                                    padding: "0.5rem",
+                                    justifyContent: "center",
+                                    alignItems: "center",
+                                  }}
+                                  textStyles={{
+                                    height: "auto",
+                                    fontSize: "0.875rem",
+                                    fontWeight: "400",
+                                    width: "100%",
+                                    lineHeight: "16px",
+                                    color: "#C84C0E",
+                                  }}
+                                />
+                              )}
+                               {showPopUp && (
+                                <ShowMoreWrapper
+                                  setShowPopUp={setShowPopUp}
+                                  alreadyQueuedSelectedState={arr}
+                                  heading={title}
+                                />
+                              )}
                         </div>
                     </Card>
                 ) : (