Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HLM 6177: Error card implementation in summary screen #806

Merged
merged 3 commits into from
Jun 6, 2024
Merged

HLM 6177: Error card implementation in summary screen #806

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9fa1d25
HLM-6177: PARALLEL SEARCH IMPLEMENT, DELIVERY TYPE IMPLEMENT
Jun 4, 2024
d878e1d
Added Error Cards in summary screen and redirection
Jun 6, 2024
aa727f9
Merge branch 'campaign' into HLM-6177
Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"ajv": "8.12.0",
"lodash": "4.17.21",
"microbundle-crl": "0.13.11",
"@egovernments/digit-ui-react-components": "1.8.2-beta.1",
"@egovernments/digit-ui-react-components": "1.8.2-beta.2",
"@egovernments/digit-ui-components": "0.0.2-beta.1",
"react": "17.0.2",
"react-dom": "17.0.2",
Expand Down
22 changes: 19 additions & 3 deletions micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,6 +298,12 @@ tbody {
@extend .typography.text-heading-m;
margin-bottom: 1.5rem;
}
.employee-card-sub-header.error {
color: #d4351c;
display: flex;
align-items: center;
gap: 0.5rem;
}
}
.add-new-product-container {
border: 1px solid #d6d5d4;
Expand Down Expand Up @@ -413,7 +419,7 @@ tbody {
.link {
color: #c84c0e !important;
}
.employeeCard.employeeCard-override.error {
.employeeCard.employeeCard-override.card-error {
border: 1px solid #d4351c;
}
.label-field-pair.delivery-type-radio {
Expand All @@ -427,6 +433,16 @@ tbody {
}
}
}
.bold{
.bold {
font-weight: 700;
}
}
.summary-doc-error {
p {
margin-top: 0;
margin-bottom: 0;
}
.digit-infobanner-wrap.error{
margin-bottom: 0.5rem;
margin-top: 1.5rem;
}
}
2 changes: 1 addition & 1 deletion micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
"react-router-dom": "5.3.0"
},
"dependencies": {
"@egovernments/digit-ui-react-components": "1.8.2-beta.1",
"@egovernments/digit-ui-react-components": "1.8.2-beta.2",
"@egovernments/digit-ui-components": "0.0.2-beta.1",
"@rjsf/core": "5.10.0",
"@rjsf/utils": "5.10.0",
Expand Down
16 changes: 14 additions & 2 deletions ...ui-internals/packages/modules/campaign-manager/src/components/CampaignDocumentsPreview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { DocumentIcon } from "./DocumentIcon";
import XlsPreview from "./XlsPreview";
import { XlsxFile } from "./icons/XlsxFile";
import { downloadExcelWithCustomName } from "../utils";
import { InfoCard } from "@egovernments/digit-ui-components";

function CampaignDocumentsPreview({ documents = [], svgStyles = {}, isUserGenerate = false }) {
function CampaignDocumentsPreview({ documents = [], svgStyles = {}, isUserGenerate = false, cardErrors }) {
const { t } = useTranslation();
const tenantId = Digit.ULBService.getCurrentTenantId();
const [filesArray, setFilesArray] = useState(null);
Expand Down Expand Up @@ -68,8 +69,19 @@ function CampaignDocumentsPreview({ documents = [], svgStyles = {}, isUserGenera
)
)
) : (
<div>
<div className="summary-doc-error" style={{ width: "100%" }}>
<p>{t("ES_CAMPAIGN_NO_DOCUMENTS_AVAILABLE")}</p>
{cardErrors?.map((i) => (
<InfoCard
populators={{
name: "infocard",
}}
variant="error"
text={t(i?.error ? i?.error : i?.message)}
hasAdditionalElements={true}
// additionalElements={[<Button label={i?.button} onClick={i.onClick} />]}
/>
))}
</div>
)}
</div>
Expand Down
216 changes: 128 additions & 88 deletions ...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React, { Fragment, useEffect, useState } from "react";
import React, { Fragment, useEffect, useRef, useState } from "react";
import { useTranslation } from "react-i18next";
import { useHistory } from "react-router-dom";
import { Button, EditIcon, Header, Loader, ViewComposer } from "@egovernments/digit-ui-react-components";
import { Toast } from "@egovernments/digit-ui-components";
import { InfoBannerIcon, Toast } from "@egovernments/digit-ui-components";
import { DownloadIcon } from "@egovernments/digit-ui-react-components";
import { PRIMARY_COLOR, downloadExcelWithCustomName } from "../utils";

Expand Down Expand Up @@ -68,7 +68,7 @@ function loopAndReturn(dataa, t) {
if (i.operator === "IN_BETWEEN") {
return {
...i,
value: `${i?.toValue} to ${i?.fromValue}`,
value: `${i?.toValue ? i?.toValue : "N/A"} to ${i?.fromValue ? i?.fromValue : "N/A"}`,
};
}
return {
Expand Down Expand Up @@ -134,7 +134,7 @@ const fetchResourceFile = async (tenantId, resourceIdArr) => {
return res?.ResourceDetails;
};

const CampaignSummary = () => {
const CampaignSummary = (props) => {
const { t } = useTranslation();
const history = useHistory();
const tenantId = Digit.ULBService.getCurrentTenantId();
Expand All @@ -143,7 +143,59 @@ const CampaignSummary = () => {
const noAction = searchParams.get("action");
const [showToast, setShowToast] = useState(null);
const [userCredential, setUserCredential] = useState(null);
const { isLoading, data, error } = Digit.Hooks.campaign.useSearchCampaign({
const [deliveryErrors, setDeliveryErrors] = useState(null);
const [targetErrors, setTargetErrors] = useState(null);
const [facilityErrors, setFacilityErrors] = useState(null);
const [userErrors, setUserErrors] = useState(null);
const [cycleDatesError, setCycleDatesError] = useState(null);
const [summaryErrors, setSummaryErrors] = useState(null);
const handleRedirect = (step, activeCycle) => {
const urlParams = new URLSearchParams(window.location.search);
const id = urlParams.get("id");
urlParams.set("key", step);
urlParams.set("preview", false);
if (activeCycle) {
urlParams.set("activeCycle", activeCycle);
}
const newUrl = `${window.location.pathname}?${urlParams.toString()}`;
history.push(newUrl);
};

useEffect(() => {
if (props?.props?.summaryErrors) {
if (props?.props?.summaryErrors?.deliveryErrors) {
const temp = props?.props?.summaryErrors?.deliveryErrors?.map((i) => {
return {
...i,
onClick: i?.dateError ? () => handleRedirect(5) : () => handleRedirect(6, i?.cycle),
};
});
setSummaryErrors({ ...props?.props?.summaryErrors, deliveryErrors: temp });
} else {
setSummaryErrors(props?.props?.summaryErrors);
}
}
// if (props?.props?.summaryErrors?.deliveryErrors) {
// const temp = props?.props?.summaryErrors?.deliveryErrors?.map((i) => {
// return {
// ...i,
// onClick: () => handleRedirect(6, i?.cycle),
// };
// });
// setDeliveryErrors(temp);
// }
// if (props?.props?.summaryErrors?.targetErrors) {
// setTargetErrors(props?.props?.summaryErrors?.targetErrors);
// }
// if (props?.props?.summaryErrors?.facilityErrors) {
// setFacilityErrors(props?.props?.summaryErrors?.facilityErrors);
// }
// if (props?.props?.summaryErrors?.userErrors) {
// setUserErrors(props?.props?.summaryErrors?.userErrors);
// }
}, [props?.props?.summaryErrors]);

const { isLoading, data, error, refetch } = Digit.Hooks.campaign.useSearchCampaign({
tenantId: tenantId,
filter: {
ids: [id],
Expand Down Expand Up @@ -200,66 +252,72 @@ const CampaignSummary = () => {
},
],
},
data?.[0]?.resources?.find((i) => i?.type === "boundaryWithTarget")
? {
sections: [
{
type: "COMPONENT",
component: "CampaignDocumentsPreview",
props: {
documents: data?.[0]?.resources?.filter((i) => i.type === "boundaryWithTarget"),
},
cardHeader: { value: t("TARGET_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(7)}>
<span>{t(`CAMPAIGN_EDIT`)}</span>
<EditIcon />
</div>
),
},
],
}
: {},
data?.[0]?.resources?.find((i) => i?.type === "facility")
? {
sections: [
{
type: "COMPONENT",
component: "CampaignDocumentsPreview",
props: {
documents: data?.[0]?.resources?.filter((i) => i.type === "facility"),
},
cardHeader: { value: t("FACILITY_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(8)}>
<span>{t(`CAMPAIGN_EDIT`)}</span>
<EditIcon />
</div>
),
},
],
}
: {},
data?.[0]?.resources?.find((i) => i?.type === "user")
? {
sections: [
{
type: "COMPONENT",
component: "CampaignDocumentsPreview",
props: {
documents: data?.[0]?.resources?.filter((i) => i.type === "user"),
},
cardHeader: { value: t("USER_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(9)}>
<span>{t(`CAMPAIGN_EDIT`)}</span>
<EditIcon />
</div>
),
},
],
}
: {},
// data?.[0]?.resources?.find((i) => i?.type === "boundaryWithTarget") ?
{
name: "target",
sections: [
{
name: "target",
type: "COMPONENT",
component: "CampaignDocumentsPreview",
props: {
documents: data?.[0]?.resources?.filter((i) => i?.type === "boundaryWithTarget"),
},
cardHeader: { value: t("TARGET_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(7)}>
<span>{t(`CAMPAIGN_EDIT`)}</span>
<EditIcon />
</div>
),
},
],
},
// : {}
// data?.[0]?.resources?.find((i) => i?.type === "facility") ?
{
name: "facility",
sections: [
{
name: "facility",
type: "COMPONENT",
component: "CampaignDocumentsPreview",
props: {
documents: data?.[0]?.resources?.filter((i) => i.type === "facility"),
},
cardHeader: { value: t("FACILITY_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(8)}>
<span>{t(`CAMPAIGN_EDIT`)}</span>
<EditIcon />
</div>
),
},
],
},
// : {}
// data?.[0]?.resources?.find((i) => i?.type === "user") ?
{
name: "user",
sections: [
{
name: "user",
type: "COMPONENT",
component: "CampaignDocumentsPreview",
props: {
documents: data?.[0]?.resources?.filter((i) => i.type === "user"),
},
cardHeader: { value: t("USER_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(9)}>
<span>{t(`CAMPAIGN_EDIT`)}</span>
<EditIcon />
</div>
),
},
],
},
// : {}
resourceIdArr?.length > 0
? {
sections: [
Expand All @@ -282,7 +340,7 @@ const CampaignSummary = () => {
type: "DATA",
cardHeader: { value: t("CAMPAIGN_DELIVERY_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(4)}>
<div className="campaign-preview-edit-container" onClick={() => handleRedirect(5)}>
<span>{t(`CAMPAIGN_EDIT`)}</span>
<EditIcon />
</div>
Expand All @@ -306,8 +364,11 @@ const CampaignSummary = () => {
},
...cycleData?.map((item, index) => {
return {
name: `CYCLE_${index + 1}`,
errorName: "deliveryErrors",
sections: [
{
name: `CYCLE_${index + 1}`,
type: "COMPONENT",
cardHeader: { value: `${t("CYCLE")} ${item?.cycleIndex}`, inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
cardSecondaryAction: noAction !== "false" && (
Expand Down Expand Up @@ -337,25 +398,6 @@ const CampaignSummary = () => {
},
});

const handleRedirect = (step) => {
const urlParams = new URLSearchParams(window.location.search);

// Get the values of other parameters
const id = urlParams.get("id");
// If there are more parameters, you can get them similarly

// Modify the 'key' parameter
urlParams.set("key", step);
urlParams.set("preview", false);

// Reconstruct the URL with the modified parameters
const newUrl = `${window.location.pathname}?${urlParams.toString()}`;

// Push the new URL to history
history.push(newUrl);
// history.push(`/${window?.contextPath}/employee/campaign/setup-campaign?key=${step}`);
};

if (isLoading) {
return <Loader />;
}
Expand Down Expand Up @@ -421,12 +463,10 @@ const CampaignSummary = () => {
)}
</div>
<div className="campaign-summary-container">
<ViewComposer data={data} />
<ViewComposer data={data} cardErrors={summaryErrors} />
{showToast && (
<Toast
type={showToast?.key === "error" ? "error" : showToast?.key === "info" ? "info" : "success"}
// error={showToast?.key === "error" ? true : false}
// info={showToast?.key === "info" ? true : false}
label={t(showToast?.label)}
onClose={closeToast}
/>
Expand Down
2 changes: 1 addition & 1 deletion ...i/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ const CampaignSelection = ({ onSelect, formData, formState, ...props }) => {
handleChange(value);
}}
/>
{error?.message && <ErrorMessage wrapperStyles={{ marginTop: "-10px" }} message={t(error?.message)} showIcon={true} />}
{error?.message && <ErrorMessage message={t(error?.message)} showIcon={true} />}
</div>
</LabelFieldPair>
{showBeneficiary && (
Expand Down
Loading
Loading