Skip to content

Commit

Permalink
added popup for boundary summary (#1525)
Browse files Browse the repository at this point in the history 
* added popup for boundary summary

* code clean
  • Loading branch information
@Bhavya-egov
Bhavya-egov authored Oct 15, 2024
1 parent 4b6f2cd commit b350c6d
Showing 1 changed file with 119 additions and 35 deletions.
154 changes: 119 additions & 35 deletions ...o-ui-internals/packages/modules/campaign-manager/src/components/BoundaryDetailsSummary.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { Fragment, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { Button, Chip } from "@egovernments/digit-ui-components";
import { Button, Chip, PopUp } from "@egovernments/digit-ui-components";
import getProjectServiceUrl from "../utils/getProjectServiceUrl";

const BoundaryDetailsSummary = (props) => {
Expand All @@ -12,6 +12,7 @@ const BoundaryDetailsSummary = (props) => {

const [expandedGroups, setExpandedGroups] = useState({});
const [showAll, setShowAll] = useState(false);
const [showPopUp, setShowPopUp] = useState(false);

const handleToggle = (parentKey) => {
setExpandedGroups((prev) => ({
Expand All @@ -21,6 +22,7 @@ const BoundaryDetailsSummary = (props) => {
};

const handleShowAllToggle = () => {
setShowPopUp(true);
setShowAll((prevShowAll) => {
const newShowAll = !prevShowAll;
const newExpandedState = Object.keys(groupedByParent).reduce((acc, key) => {
Expand All @@ -40,47 +42,129 @@ const BoundaryDetailsSummary = (props) => {
return acc;
}, {});

// return (
// <div>
// <div>
// {Object.keys(groupedByParent)
// .slice(0, showAll ? Object.keys(groupedByParent).length : 2)
// .map((parentKey, index) => (
// <div className="parent-group" key={index} style={{ marginBottom: "20px" }}>
// {parentKey && parentKey !== "undefined" && parentKey.trim() !== "" && <div className="boundary-header">{t(parentKey)}</div>}
// <div>
// <div className="digit-tag-container" style={{ display: "flex", maxWidth: "100%" }}>
// {groupedByParent[parentKey]
// .slice(0, expandedGroups[parentKey] ? groupedByParent[parentKey].length : 10)
// .map((boundary) => (
// <Chip
// key={boundary.code}
// text={t(boundary.code)}
// onClick={() => {}}
// className="multiselectdropdown-tag"
// hideClose={true}
// />
// ))}
// {groupedByParent[parentKey].length > 10 && (
// <Button
// label={expandedGroups[parentKey] ? t("HCM_SHOW_LESS_SELECTED") : `+${groupedByParent[parentKey].length - 10} ${t("HCM_SELECTED")}`}
// onClick={() => handleToggle(parentKey)}
// variation="link"
// />
// )}
// </div>
// </div>
// </div>
// ))}

// {/* Show the button if there are more than 2 parent keys */}
// {Object.keys(groupedByParent).length > 2 && (
// <Button label={showAll ? t("HCM_SHOW_LESS_ALL") : t("HCM_SHOW_MORE_ALL")} onClick={handleShowAllToggle} variation="link" />
// )}
// </div>
// </div>
// );

return (
<div>
<div>
{Object.keys(groupedByParent)
.slice(0, showAll ? Object.keys(groupedByParent).length : 2)
.map((parentKey, index) => (
<div className="parent-group" key={index} style={{ marginBottom: "20px" }}>
{parentKey && parentKey !== "undefined" && parentKey.trim() !== "" && <div className="boundary-header">{t(parentKey)}</div>}
<div>
<div className="digit-tag-container" style={{ display: "flex", maxWidth: "100%" }}>
{groupedByParent[parentKey]
.slice(0, expandedGroups[parentKey] ? groupedByParent[parentKey].length : 10)
.map((boundary) => (
<Chip
key={boundary.code}
text={t(boundary.code)}
onClick={() => {}}
className="multiselectdropdown-tag"
hideClose={true}
/>
{Object.keys(groupedByParent)
.slice(0, 2)
.map((parentKey, index) => (
<div className="parent-group" key={index} style={{ marginBottom: "20px" }}>
{parentKey && parentKey !== "undefined" && parentKey.trim() !== "" && <div className="boundary-header">{t(parentKey)}</div>}
<div>
<div className="digit-tag-container" style={{ display: "flex", maxWidth: "100%" }}>
{groupedByParent[parentKey].slice(0, expandedGroups[parentKey] ? groupedByParent[parentKey].length : 10).map((boundary) => (
<Chip key={boundary.code} text={t(boundary.code)} onClick={() => {}} className="multiselectdropdown-tag" hideClose={true} />
))}
{groupedByParent[parentKey].length > 10 && (
<Button
label={
expandedGroups[parentKey] ? t("HCM_SHOW_LESS_SELECTED") : `+${groupedByParent[parentKey].length - 10} ${t("HCM_SELECTED")}`
}
onClick={() => handleToggle(parentKey)}
variation="link"
/>
)}
</div>
</div>
</div>
))}
{/* Show the button if there are more than 2 parent keys */}
{Object.keys(groupedByParent).length > 2 && (
<Button label={ t("HCM_SHOW_MORE_ALL")} onClick={handleShowAllToggle} variation="link" />
)}
{showPopUp && (
<PopUp
// className={"boundaries-pop-module"}
type={"default"}
// heading={t("ES_CAMPAIGN_UPDATE_TYPE_MODAL_HEADER")}
children={[]}
onOverlayClick={() => {
setShowPopUp(false);
}}
onClose={() => {
setShowPopUp(false);
}}
equalWidthButtons = {"false"}
footerChildren={[
<Button
className={"campaign-type-alert-button"}
type={"button"}
size={"large"}
variation={"primary"}
label={t("HCM_BOUNDARY_CLOSE")}
onClick={() => {
setShowPopUp(false);
}}
/>,
]}
// sortFooterChildren={true}
>
{Object.keys(groupedByParent)
.map((parentKey, index) => (
<div className="parent-group" key={index} style={{ marginBottom: "20px" }}>
{parentKey && parentKey !== "undefined" && parentKey.trim() !== "" && <div className="boundary-header">{t(parentKey)}</div>}
<div>
<div className="digit-tag-container" style={{ display: "flex", maxWidth: "100%" }}>
{groupedByParent[parentKey].slice(0, expandedGroups[parentKey] ? groupedByParent[parentKey].length : 10).map((boundary) => (
<Chip key={boundary.code} text={t(boundary.code)} onClick={() => {}} className="multiselectdropdown-tag" hideClose={true} />
))}
{groupedByParent[parentKey].length > 10 && (
<Button
label={expandedGroups[parentKey] ? t("HCM_SHOW_LESS_SELECTED") : `+${groupedByParent[parentKey].length - 10} ${t("HCM_SELECTED")}`}
onClick={() => handleToggle(parentKey)}
variation="link"
/>
)}
{groupedByParent[parentKey].length > 10 && (
<Button
label={
expandedGroups[parentKey] ? t("HCM_SHOW_LESS_SELECTED") : `+${groupedByParent[parentKey].length - 10} ${t("HCM_SELECTED")}`
}
onClick={() => handleToggle(parentKey)}
variation="link"
/>
)}
</div>
</div>
</div>
</div>
))}

{/* Show the button if there are more than 2 parent keys */}
{Object.keys(groupedByParent).length > 2 && (
<Button label={showAll ? t("HCM_SHOW_LESS_ALL") : t("HCM_SHOW_MORE_ALL")} onClick={handleShowAllToggle} variation="link" />
)}
</div>
))}
</PopUp>
)}
</div>
);

};

export default BoundaryDetailsSummary;

0 comments on commit b350c6d

Please sign in to comment.