From 26f8b84e9aa778e3a01698f144ca4ec047f9d26c Mon Sep 17 00:00:00 2001 From: nabeelmd-eGov Date: Mon, 1 Apr 2024 08:46:17 +0530 Subject: [PATCH 1/5] HLM-5334/HLM-5550: Edit delivery rules, delivery screen ui fix and enhance --- .../micro-ui-internals/example/package.json | 3 +- .../example/public/index.html | 3 +- micro-ui/web/micro-ui-internals/package.json | 1 + .../css/src/pages/employee/campaignCycle.scss | 7 + .../css/src/pages/employee/index.scss | 11 ++ .../modules/campaign-manager/package.json | 1 + .../src/configs/attributeConfig.js | 10 +- .../src/configs/operatorConfig.js | 4 + .../src/pages/employee/CycleConfiguration.js | 40 ++++-- .../src/pages/employee/SetupCampaign.js | 75 ++++++----- .../deliveryRule/AddDeliverycontext.js | 123 +++++++++++++----- .../src/pages/employee/deliveryRule/index.js | 7 +- 12 files changed, 197 insertions(+), 88 deletions(-) diff --git a/micro-ui/web/micro-ui-internals/example/package.json b/micro-ui/web/micro-ui-internals/example/package.json index 27549842118..e8bf59f8177 100644 --- a/micro-ui/web/micro-ui-internals/example/package.json +++ b/micro-ui/web/micro-ui-internals/example/package.json @@ -14,8 +14,9 @@ "@egovernments/digit-ui-module-utilities": "1.0.1-beta.1", "@egovernments/digit-ui-react-components": "1.8.1-beta.6", "@egovernments/digit-ui-module-workbench": "1.0.1-beta.2", - "@egovernments/digit-ui-module-hcmworkbench":"0.0.38", + "@egovernments/digit-ui-module-hcmworkbench": "0.0.38", "@egovernments/digit-ui-module-campaign-manager": "0.0.1", + "@egovernments/digit-ui-components": "0.0.1-beta.2", "http-proxy-middleware": "^1.0.5", "react": "17.0.2", "react-dom": "17.0.2", diff --git a/micro-ui/web/micro-ui-internals/example/public/index.html b/micro-ui/web/micro-ui-internals/example/public/index.html index 7186e854a0c..c31a72125d3 100644 --- a/micro-ui/web/micro-ui-internals/example/public/index.html +++ b/micro-ui/web/micro-ui-internals/example/public/index.html @@ -10,11 +10,12 @@ DIGIT - + diff --git a/micro-ui/web/micro-ui-internals/package.json b/micro-ui/web/micro-ui-internals/package.json index 7d855d854e3..f827f12a0a9 100644 --- a/micro-ui/web/micro-ui-internals/package.json +++ b/micro-ui/web/micro-ui-internals/package.json @@ -45,6 +45,7 @@ "lodash": "4.17.21", "microbundle-crl": "0.13.11", "@egovernments/digit-ui-react-components": "1.8.1-beta.6", + "@egovernments/digit-ui-components": "0.0.1-beta.2", "react": "17.0.2", "react-dom": "17.0.2", "react-hook-form": "6.15.8", diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaignCycle.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaignCycle.scss index fb3658f5c07..6e16c50b82a 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaignCycle.scss +++ b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaignCycle.scss @@ -68,6 +68,9 @@ padding: 1.5rem; .label-field-pair { margin-bottom: 1rem; + .card-label { + font-weight: 700; + } } .date-field-container { display: grid; @@ -158,6 +161,7 @@ width: calc(100% / 4 * 3); justify-content: center; h2 { + font-size: 1rem; width: unset !important; } } @@ -174,6 +178,9 @@ } .add-rule-btn { margin: auto; + h2 { + font-size: 1rem; + } } .popup-wrap.campaign-product-wrapper { diff --git a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss index 49a68219003..19dde8944c4 100644 --- a/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss +++ b/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss @@ -18,3 +18,14 @@ grid-gap: 0.2rem; gap: 0.2rem; } + +.mandatory-span { + margin-left: 0.5rem; + color: red !important; + font-size: 1rem; + font-weight: 700; +} + +.digit-employee-card-input.numeric{ + margin-bottom: unset; +} \ No newline at end of file diff --git a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json index b790b8b9e8e..12a323835bc 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json +++ b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/package.json @@ -19,6 +19,7 @@ }, "dependencies": { "@egovernments/digit-ui-react-components": "1.8.1-beta.6", + "@egovernments/digit-ui-components": "0.0.1-beta.2", "@rjsf/core": "5.10.0", "@rjsf/utils": "5.10.0", "@rjsf/validator-ajv8": "5.10.0", diff --git a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/attributeConfig.js b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/attributeConfig.js index 5950a48bdc1..ada3796f7fa 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/attributeConfig.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/attributeConfig.js @@ -1,14 +1,18 @@ export const attributeConfig = [ { key: 1, - code: "age", + code: "Age", }, { key: 2, - code: "height", + code: "Height", }, { key: 3, - code: "weight", + code: "Weight", + }, + { + key: 4, + code: "Gender", }, ]; diff --git a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/operatorConfig.js b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/operatorConfig.js index 5b0d4626412..00c82fce409 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/operatorConfig.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/operatorConfig.js @@ -11,4 +11,8 @@ export const operatorConfig = [ key: 3, code: "IN_BETWEEN", }, + { + key: 4, + code: "EQUAL_TO", + }, ]; diff --git a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js index fd05281bf1d..9fde256321f 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/CycleConfiguration.js @@ -1,14 +1,17 @@ import React, { useReducer, Fragment, useEffect } from "react"; -import { CardText, DatePicker, LabelFieldPair, Card, CardHeader, CardLabel, CardSubHeader } from "@egovernments/digit-ui-react-components"; +import { CardText, DatePicker, LabelFieldPair, Card, CardHeader, CardLabel, CardSubHeader, Paragraph, Header } from "@egovernments/digit-ui-react-components"; import PlusMinusInput from "../../components/PlusMinusInput"; import { useTranslation } from "react-i18next"; +import { TextInput } from "@egovernments/digit-ui-components"; -const initialState = { - cycleConfgureDate: { - cycle: 1, - deliveries: 1, - }, - cycleData: [], +const initialState = (saved) => { + return { + cycleConfgureDate: { + cycle: saved?.cycleConfgureDate?.cycle ? saved?.cycleConfgureDate?.cycle : 1, + deliveries: saved?.cycleConfgureDate?.deliveries ? saved?.cycleConfgureDate?.deliveries : 1, + }, + cycleData: saved?.cycleData ? [...saved?.cycleData] : [], + }; }; const reducer = (state, action) => { @@ -47,7 +50,8 @@ const updateCycleData = (cycleData, index, update) => { }; function CycleConfiguration({ onSelect, formData, control, ...props }) { - const [state, dispatch] = useReducer(reducer, initialState); + const saved = JSON.parse(sessionStorage.getItem("Digit.HCM_CAMPAIGN_MANAGER_FORM_DATA"))?.value?.HCM_CAMPAIGN_CYCLE_CONFIGURE?.cycleConfigure; + const [state, dispatch] = useReducer(reducer, initialState(saved)); const { cycleConfgureDate, cycleData } = state; const { t } = useTranslation(); @@ -56,7 +60,7 @@ function CycleConfiguration({ onSelect, formData, control, ...props }) { }, [state]); const updateCycle = (d) => { - dispatch({ type: "UPDATE_CYCLE", payload: d }); + dispatch({ type: "UPDATE_CYCLE", payload: d?.target?.value ? Number(d?.target?.value) : d }); }; const updateDelivery = (d) => { @@ -73,15 +77,25 @@ function CycleConfiguration({ onSelect, formData, control, ...props }) { return ( <> +
{t(`CAMPAIGN_CYCLE_TITLE`)}
+ {t(`CAMPAIGN_CYCLE_CONFIGURE_HEADING`)} - {t(`CAMPAIGN_NO_OF_CYCLE`)} - updateCycle(d)} /> + + {t(`CAMPAIGN_NO_OF_CYCLE`)} + * + + updateCycle(d)} /> + {/* updateCycle(d)} /> */} - {t(`CAMPAIGN_NO_OF_DELIVERY`)} - updateDelivery(d)} /> + + {t(`CAMPAIGN_NO_OF_DELIVERY`)} + * + + updateDelivery(d)} /> + {/* updateDelivery(d)} /> */} diff --git a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js index 175d623c7e9..ae80bc2af39 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js @@ -13,7 +13,9 @@ const SetupCampaign = () => { const [currentKey, setCurrentKey] = useState(1); const [totalFormData, setTotalFormData] = useState({}); const [campaignConfig, setCampaignConfig] = useState(CampaignConfig(totalFormData)); + const [shouldUpdate, setShouldUpdate] = useState(false); const [params, setParams, clearParams] = Digit.Hooks.useSessionStorage("HCM_CAMPAIGN_MANAGER_FORM_DATA", {}); + const { mutate } = Digit.Hooks.campaign.useCreateCampaign(tenantId); useEffect(() => { @@ -85,42 +87,45 @@ const SetupCampaign = () => { } useEffect(() => { - if (currentKey === 8) { - // history.push() - return; - } - const reqCreate = async () => { - let payloadData = {}; - payloadData.startDate = totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate - ? Digit.Utils.date.convertDateToEpoch(totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate) - : null; - payloadData.endDate = totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate - ? Digit.Utils.date.convertDateToEpoch(totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate) - : null; - payloadData.tenantId = tenantId; - payloadData.action = "draft"; - payloadData.campaignName = totalFormData?.HCM_CAMPAIGN_NAME?.campaignName; - payloadData.boundaries = []; - payloadData.resources = []; - payloadData.projectType = null; - payloadData.additionalDetails = {}; - if (totalFormData?.HCM_CAMPAIGN_DELIVERY_DATA?.deliveryRule) { - const temp = restructureData(totalFormData?.HCM_CAMPAIGN_DELIVERY_DATA?.deliveryRule); - payloadData.deliveryRules = temp; + if (shouldUpdate === true) { + if (currentKey === 8) { + // history.push() + return; } + const reqCreate = async () => { + let payloadData = {}; + payloadData.startDate = totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate + ? Digit.Utils.date.convertDateToEpoch(totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate) + : null; + payloadData.endDate = totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate + ? Digit.Utils.date.convertDateToEpoch(totalFormData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate) + : null; + payloadData.tenantId = tenantId; + payloadData.action = "draft"; + payloadData.campaignName = totalFormData?.HCM_CAMPAIGN_NAME?.campaignName; + payloadData.boundaries = []; + payloadData.resources = []; + payloadData.projectType = null; + payloadData.additionalDetails = {}; + if (totalFormData?.HCM_CAMPAIGN_DELIVERY_DATA?.deliveryRule) { + const temp = restructureData(totalFormData?.HCM_CAMPAIGN_DELIVERY_DATA?.deliveryRule); + payloadData.deliveryRules = temp; + } + + await mutate(payloadData, { + onError: (error, variables) => { + console.log(error); + }, + onSuccess: async (data) => { + console.log(data); + }, + }); + }; - await mutate(payloadData, { - onError: (error, variables) => { - console.log(error); - }, - onSuccess: async (data) => { - console.log(data); - }, - }); - }; - - reqCreate(); - }, [totalFormData, currentKey]); + reqCreate(); + setShouldUpdate(false); + } + }, [shouldUpdate, totalFormData, currentKey]); const onSubmit = (formData) => { setCurrentKey(currentKey + 1); @@ -147,6 +152,7 @@ const SetupCampaign = () => { ], }; + setShouldUpdate(true); // convertFormData(totalFormData); const payload = convertPayload(dummyData); }; @@ -166,6 +172,7 @@ const SetupCampaign = () => { const onSecondayActionClick = () => { if (currentKey > 1) { + setShouldUpdate(false); setCurrentKey(currentKey - 1); } }; diff --git a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js index 770b9acdab7..b609b2adce0 100644 --- a/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js +++ b/micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js @@ -4,7 +4,7 @@ import { DustbinIcon, CardLabel, Dropdown, - TextInput, + // TextInput, Button, Card, CardHeader, @@ -19,6 +19,7 @@ import { operatorConfig } from "../../../configs/operatorConfig"; import RemoveableTagNew from "../../../components/RemovableTagNew"; import AddProducts from "./AddProductscontext"; import { CycleContext } from "."; +import { TextInput } from "@egovernments/digit-ui-components"; const makeSequential = (jsonArray, keyName) => { return jsonArray.map((item, index) => ({ @@ -31,9 +32,18 @@ const AddAttributeField = ({ deliveryRuleIndex, delivery, deliveryRules, setDeli const [val, setVal] = useState(""); const [showAttribute, setShowAttribute] = useState(null); const [showOperator, setShowOperator] = useState(null); + const [addedOption, setAddedOption] = useState(null); const { t } = useTranslation(); + useEffect(() => { + setAddedOption(delivery?.attributes?.map((i) => i?.attribute?.code)?.filter((i) => i)); + }, [delivery]); + const selectValue = (e) => { + let val = e.target.value; + if (isNaN(val) || [" ", "e", "E"].some((f) => val.includes(f))) { + val = val.slice(0, -1); + } // setAttributes((pre) => pre.map((item) => (item.key === attribute.key ? { ...item, value: e.target.value } : item))); const updatedData = deliveryRules.map((item, index) => { if (item.ruleKey === deliveryRuleIndex) { @@ -44,6 +54,17 @@ const AddAttributeField = ({ deliveryRuleIndex, delivery, deliveryRules, setDeli setDeliveryRules(updatedData); }; + const selectGender = (value) => { + // setAttributes((pre) => pre.map((item) => (item.key === attribute.key ? { ...item, value: e.target.value } : item))); + const updatedData = deliveryRules.map((item, index) => { + if (item.ruleKey === deliveryRuleIndex) { + item.attributes.find((i) => i.key === attribute.key).value = value; + } + return item; + }); + setDeliveryRules(updatedData); + }; + const selectToFromValue = (e, range) => { if (range === "to") { const updatedData = deliveryRules.map((item, index) => { @@ -68,6 +89,11 @@ const AddAttributeField = ({ deliveryRuleIndex, delivery, deliveryRules, setDeli const updatedData = deliveryRules.map((item, index) => { if (item.ruleKey === deliveryRuleIndex) { item.attributes.find((i) => i.key === attribute.key).attribute = value; + if (value.code === "Gender") { + item.attributes.find((i) => i.key === attribute.key).operator = { + code: "EQUAL_TO", + }; + } } return item; }); @@ -98,7 +124,7 @@ const AddAttributeField = ({ deliveryRuleIndex, delivery, deliveryRules, setDeli selected={attribute?.attribute} disable={false} isMandatory={true} - option={attributeConfig} + option={addedOption ? attributeConfig.filter((item) => !addedOption.includes(item.code)) : attributeConfig} select={(value) => selectAttribute(value)} optionKey="code" t={t} @@ -111,7 +137,7 @@ const AddAttributeField = ({ deliveryRuleIndex, delivery, deliveryRules, setDeli selectOperator(value)} @@ -139,27 +165,50 @@ const AddAttributeField = ({ deliveryRuleIndex, delivery, deliveryRules, setDeli disable={false} /> + ) : attribute?.attribute?.code === "Gender" ? ( + selectGender(value)} + optionKey="code" + t={t} + /> ) : ( - + )} -
onDelete()} - style={{ - cursor: "pointer", - fontWeight: "600", - fontSize: "1rem", - color: "#f47738", - display: "flex", - gap: "0.5rem", - alignItems: "center", - marginTop: "1rem", - }} - > - - {t(`CAMPAIGN_DELETE_ROW_TEXT`)} -
+ {delivery.attributes.length !== 1 && ( +
onDelete()} + style={{ + cursor: "pointer", + fontWeight: "600", + marginLeft: "1rem", + fontSize: "1rem", + color: "#f47738", + display: "flex", + gap: "0.5rem", + alignItems: "center", + marginTop: "1rem", + }} + > + + {t(`CAMPAIGN_DELETE_ROW_TEXT`)} +
+ )} ); }; @@ -221,13 +270,15 @@ const AddAttributeWrapper = ({ deliveryRuleIndex, delivery, deliveryRules, setDe onDelete={() => deleteAttribute(item, deliveryRuleIndex)} /> ))} -