From d618c43ce61d0b5208f1087945ef72dd15ecfb05 Mon Sep 17 00:00:00 2001 From: Ramkrishna-egov <85437265+Ramkrishna-egov@users.noreply.github.com> Date: Fri, 25 Oct 2024 14:59:51 +0530 Subject: [PATCH] Added ShowMore Popup for Boundary Summary Screen, Added Loader for User Download Screen (#1670) * Added Loader for User Download Screen * Added ShowMore Popup for Boundary Summary Screen --------- Co-authored-by: Nipun Arora --- .../packages/modules/microplan/src/Module.js | 4 +- .../src/components/ShowMoreWrapper.js | 41 +++++++++++++ .../components/UserAccessMgmtTableWrapper.js | 47 ++------------ .../src/components/subBoundaryView.js | 61 +++++++++++++++---- .../src/pages/employee/UserDownload.js | 15 +++-- 5 files changed, 107 insertions(+), 61 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 ( + { + setShowPopUp(false); + }} + onClose={() => { + setShowPopUp(false); + }} + > +
+ {alreadyQueuedSelectedState?.map((item, index) => ( + + ))} +
+ + ); + + }; \ 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 ( - { - setShowPopUp(false); - }} - onClose={() => { - setShowPopUp(false); - }} - > -
- {alreadyQueuedSelectedState?.map((item, index) => ( - - ))} -
- - ); - - }; - const UserAccessMgmtTableWrapper = ({ role,}) => { const { t } = useTranslation(); const tenantId = Digit.ULBService.getCurrentTenantId(); @@ -189,10 +153,11 @@ const UserAccessMgmtTableWrapper = ({ role,}) => { /> )} {showPopUp && ( - + )} ); 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 (
{ @@ -11,22 +19,53 @@ const SubBoundaryView = ({ title, arr }) => { {/* Flex container for the chips */} -
- {arr.map((el, ind) => { +
+ {arr?.slice(0, 10)?.map((el, ind) => { return ( -
-
); - })} + } + + + )} + {arr?.length > (10) && ( +
) : ( diff --git a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js index f7db93e713e..03ce41f4e79 100644 --- a/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js +++ b/health/micro-ui/web/micro-ui-internals/packages/modules/microplan/src/pages/employee/UserDownload.js @@ -1,14 +1,14 @@ import React, { useState, useEffect } from 'react'; import FileComponent from '../../components/FileComponent'; -import { Card } from '@egovernments/digit-ui-components'; import HeaderComp from '../../components/HeaderComp'; -import { TextBlock } from '@egovernments/digit-ui-components'; +import { TextBlock, Card } from '@egovernments/digit-ui-components'; +import {LoaderWithGap} from "@egovernments/digit-ui-react-components"; +import { useTranslation } from 'react-i18next'; + const UserDownload = () => { - + const { t } = useTranslation(); const [Files, setFile] = useState(""); // Initialize as an empty string - - const { data, isFetching, isLoading } = Digit.Hooks.microplanv1.useFileDownload({ "SearchCriteria": { "tenantId": Digit.ULBService.getCurrentTenantId(), @@ -53,11 +53,10 @@ const UserDownload = () => { return (
- - + {isLoading && } - + {data?.ResourceDetails && [...data?.ResourceDetails].reverse().map((item, index) => { let fileName = item?.additionalDetails?.fileName || `FileNo${item?.processedFilestoreId?.slice(0, 4) || ''}`;