From 197907fa2c574e388e8794306785f53d12aad289 Mon Sep 17 00:00:00 2001 From: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com> Date: Tue, 29 Oct 2024 18:01:44 +0530 Subject: [PATCH] MOSIP-36598: UI Development Create Policy Group Signed-off-by: Anil_Kumar_Majji <106086523+Anil-kumar-Majji@users.noreply.github.com> --- pmp-reactjs-ui/public/i18n/ara.json | 5 +- pmp-reactjs-ui/public/i18n/eng.json | 5 +- pmp-reactjs-ui/public/i18n/fra.json | 4 +- .../admin/policyManager/CreatePolicyGroup.js | 136 ++++++++++-------- 4 files changed, 85 insertions(+), 65 deletions(-) diff --git a/pmp-reactjs-ui/public/i18n/ara.json b/pmp-reactjs-ui/public/i18n/ara.json index 51d55800..808296e1 100644 --- a/pmp-reactjs-ui/public/i18n/ara.json +++ b/pmp-reactjs-ui/public/i18n/ara.json @@ -604,7 +604,10 @@ "enterNameforPolicyGroup": "أدخل اسمًا لمجموعة السياسات", "policyGroupDescription":"وصف مجموعة السياسات", "enterPolicyGroupDescription": "أدخل وصفًا حول مجموعة السياسات هنا", - "errorInCreatePolicyGroup": "أثناء إنشاء السياسة، واجهنا خطأ" + "errorInCreatePolicyGroup": "أثناء إنشاء السياسة، واجهنا خطأ", + "creatPolicyGroupSuccessHeader": "تم إنشاء مجموعة السياسات بنجاح", + "creatPolicyGroupSuccessDescription": "Lorem Ipsum" + }, "policyGroupList": { "policies": "السياسات", diff --git a/pmp-reactjs-ui/public/i18n/eng.json b/pmp-reactjs-ui/public/i18n/eng.json index 0caf5d10..2aaf5e0c 100644 --- a/pmp-reactjs-ui/public/i18n/eng.json +++ b/pmp-reactjs-ui/public/i18n/eng.json @@ -600,7 +600,10 @@ "enterNameforPolicyGroup": "Enter name for Policy Group", "policyGroupDescription":"Policy Group Description", "enterPolicyGroupDescription": "Enter description about Policy Group here", - "errorInCreatePolicyGroup": "While Creating Policy, we have encountered with an error." + "errorInCreatePolicyGroup": "While Creating Policy, we have encountered with an error.", + "creatPolicyGroupSuccessHeader": "Policy Group created successfully!", + "creatPolicyGroupSuccessDescription": "Lorem Ipsum" + }, "policyGroupList": { "policies": "Policies", diff --git a/pmp-reactjs-ui/public/i18n/fra.json b/pmp-reactjs-ui/public/i18n/fra.json index dc8127f4..8bdf31bc 100644 --- a/pmp-reactjs-ui/public/i18n/fra.json +++ b/pmp-reactjs-ui/public/i18n/fra.json @@ -604,7 +604,9 @@ "enterNameforPolicyGroup": "Entrez le nom du groupe de stratégies", "policyGroupDescription":"Description du groupe de stratégies", "enterPolicyGroupDescription": "Entrez la description du groupe de stratégies ici", - "errorInCreatePolicyGroup": "Lors de la création de la stratégie, nous avons rencontré une erreur" + "errorInCreatePolicyGroup": "Lors de la création de la stratégie, nous avons rencontré une erreur", + "creatPolicyGroupSuccessHeader": "Groupe de stratégies créé avec succès !", + "creatPolicyGroupSuccessDescription": "Lorem Ipsum" }, "policyGroupList": { "policies": "Politiques", diff --git a/pmp-reactjs-ui/src/pages/admin/policyManager/CreatePolicyGroup.js b/pmp-reactjs-ui/src/pages/admin/policyManager/CreatePolicyGroup.js index 71b6f638..36045e45 100644 --- a/pmp-reactjs-ui/src/pages/admin/policyManager/CreatePolicyGroup.js +++ b/pmp-reactjs-ui/src/pages/admin/policyManager/CreatePolicyGroup.js @@ -8,6 +8,7 @@ import Title from '../../common/Title'; import LoadingIcon from '../../common/LoadingIcon'; import ErrorMessage from '../../common/ErrorMessage'; import { HttpService } from '../../../services/HttpService'; +import Confirmation from '../../common/Confirmation'; function CreatePolicyGroup() { @@ -22,6 +23,8 @@ function CreatePolicyGroup() { const [isSubmitClicked, setIsSubmitClicked] = useState(false); const [validationError, setValidationError] = useState(""); const [createPolicySuccess, setCreatePolicySuccess] = useState(false); + const [confirmationData, setConfirmationData] = useState({}); + let isCancelledClicked = false; const blocker = useBlocker( @@ -83,33 +86,39 @@ function CreatePolicyGroup() { setIsSubmitClicked(true); setErrorCode(""); setErrorMsg(""); - // let request = createRequest({ - // name: trimAndReplace(policyGroupName), - // desc: trimAndReplace(policyGroupDesc) - // }); - // try { - // const response = await HttpService.post(getPolicyManagerUrl(`/policies/group/new`, process.env.NODE_ENV), request, { - // headers: { - // 'Content-Type': 'application/json' - // } - // }); - // if (response) { - // const responseData = response.data; - // if (responseData && responseData.response) { - // const resData = responseData.response; - // console.log(`Response data: ${resData}`); - - // } else { - // handleServiceErrors(responseData, setErrorCode, setErrorMsg); - // } - // } else { - // setErrorMsg(t('createPolicyGroup.errorInCreatePolicyGroup')); - // } - // setDataLoaded(false); - // } catch (err) { - // setErrorMsg(err); - // console.log("Error fetching data: ", err); - // } + let request = createRequest({ + name: trimAndReplace(policyGroupName), + desc: trimAndReplace(policyGroupDesc) + }); + try { + const response = await HttpService.post(getPolicyManagerUrl(`/policies/group/new`, process.env.NODE_ENV), request, { + headers: { + 'Content-Type': 'application/json' + } + }); + if (response) { + const responseData = response.data; + if (responseData && responseData.response) { + const resData = responseData.response; + console.log(resData); + const requireData = { + backUrl: "/partnermanagement/admin/policy-manager/policy-group-list", + header: "createPolicyGroup.creatPolicyGroupSuccessHeader", + description: "createPolicyGroup.creatPolicyGroupSuccessDescription" + } + setConfirmationData(requireData); + setCreatePolicySuccess(true); + } else { + handleServiceErrors(responseData, setErrorCode, setErrorMsg); + } + } else { + setErrorMsg(t('createPolicyGroup.errorInCreatePolicyGroup')); + } + setDataLoaded(false); + } catch (err) { + setErrorMsg(err); + console.log("Error fetching data: ", err); + } setIsSubmitClicked(false); } @@ -140,49 +149,52 @@ function CreatePolicyGroup() {
</div> - <div className="w-[100%] bg-snow-white mt-[1.5%] rounded-lg shadow-md"> - <div className="px-[2.5%] py-[2%]"> - <p className="text-base text-[#3D4468]">{t('requestPolicy.mandatoryFieldsMsg1')} <span className="text-crimson-red">*</span> {t('requestPolicy.mandatoryFieldsMsg2')}</p> - <form onSubmit={handleFormSubmit}> - <div className="flex flex-col"> - <div className="space-y-6"> - <div className="my-4"> - <div className="flex flex-col w-[48%] max-[450px]:w-full"> - <label className={`block text-dark-blue text-sm font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('createPolicyGroup.policyGroupName')}<span className="text-crimson-red mx-1">*</span></label> - <input value={policyGroupName} onChange={(e) => onChangePolicyGroupName(e.target.value)} maxLength={128} - className="h-12 px-2 py-3 border border-[#707070] rounded-md text-md text-dark-blue bg-white leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar" - placeholder={t('createPolicyGroup.enterNameforPolicyGroup')} id="policy_group_name" - /> + {!createPolicySuccess ? + <div className="w-[100%] bg-snow-white mt-[1.5%] rounded-lg shadow-md"> + <div className="px-[2.5%] py-[2%]"> + <p className="text-base text-[#3D4468]">{t('requestPolicy.mandatoryFieldsMsg1')} <span className="text-crimson-red">*</span> {t('requestPolicy.mandatoryFieldsMsg2')}</p> + <form onSubmit={handleFormSubmit}> + <div className="flex flex-col"> + <div className="space-y-6"> + <div className="my-4"> + <div className="flex flex-col w-[48%] max-[450px]:w-full"> + <label className={`block text-dark-blue text-sm font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('createPolicyGroup.policyGroupName')}<span className="text-crimson-red mx-1">*</span></label> + <input value={policyGroupName} onChange={(e) => onChangePolicyGroupName(e.target.value)} maxLength={128} + className="h-12 px-2 py-3 border border-[#707070] rounded-md text-md text-dark-blue bg-white leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar" + placeholder={t('createPolicyGroup.enterNameforPolicyGroup')} id="policy_group_name" + /> + </div> </div> </div> - </div> - <div className="space-y-6"> - <div className="my-4"> - <div className="flex flex-col w-full max-[450px]:w-full"> - <label className={`block text-dark-blue text-sm font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('createPolicyGroup.policyGroupDescription')}<span className="text-crimson-red mx-1">*</span></label> - <textarea value={policyGroupDesc} onChange={(e) => onChangePolicyGroupDesc(e.target.value)} maxLength={256} - className="h-14 px-2 py-3 border border-[#707070] rounded-md text-md text-dark-blue bg-white leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar" - placeholder={t('createPolicyGroup.enterPolicyGroupDescription')} id="policy_group_description" - /> + <div className="space-y-6"> + <div className="my-4"> + <div className="flex flex-col w-full max-[450px]:w-full"> + <label className={`block text-dark-blue text-sm font-semibold mb-1 ${isLoginLanguageRTL ? "mr-1" : "ml-1"}`}>{t('createPolicyGroup.policyGroupDescription')}<span className="text-crimson-red mx-1">*</span></label> + <textarea value={policyGroupDesc} onChange={(e) => onChangePolicyGroupDesc(e.target.value)} maxLength={256} + className="h-14 px-2 py-3 border border-[#707070] rounded-md text-md text-dark-blue bg-white leading-tight focus:outline-none focus:shadow-outline overflow-x-auto whitespace-nowrap no-scrollbar" + placeholder={t('createPolicyGroup.enterPolicyGroupDescription')} id="policy_group_description" + /> + </div> </div> </div> </div> - </div> - </form> - </div> - <div className="border bg-medium-gray" /> - <div className="flex flex-row max-[450px]:flex-col px-[3%] py-9 justify-between max-[450px]:space-y-2"> - <button id="createPolicy_clear_form" onClick={() => clearForm()} className={`w-40 h-10 mr-3 border-[#1447B2] ${isLoginLanguageRTL ? "mr-2" : "ml-2"} border rounded-md bg-white text-tory-blue text-sm font-semibold`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, clearForm())}> - {t('requestPolicy.clearForm')} - </button> - <div className={`flex flex-row max-[450px]:flex-col space-x-3 max-[450px]:space-x-0 max-[450px]:space-y-2 w-full md:w-auto justify-end`}> - <button id="createPolicy_cancel_btn" onClick={() => clickOnCancel()} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-11/12 md:w-40 h-10 border-[#1447B2] border rounded-md bg-white text-tory-blue text-sm font-semibold`}>{t('requestPolicy.cancel')}</button> - <button id="createPolicy_submit_btn" disabled={!isFormValid()} onClick={() => clickOnSubmit()} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-11/12 md:w-40 h-10 border-[#1447B2] border rounded-md text-sm font-semibold ${isFormValid() ? 'bg-tory-blue text-white' : 'border-[#A5A5A5] bg-[#A5A5A5] text-white cursor-not-allowed'}`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, clearForm())}> - {t('requestPolicy.submit')} + </form> + </div> + <div className="border bg-medium-gray" /> + <div className="flex flex-row max-[450px]:flex-col px-[3%] py-9 justify-between max-[450px]:space-y-2"> + <button id="createPolicy_clear_form" onClick={() => clearForm()} className={`w-40 h-10 mr-3 border-[#1447B2] ${isLoginLanguageRTL ? "mr-2" : "ml-2"} border rounded-md bg-white text-tory-blue text-sm font-semibold`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, clearForm())}> + {t('requestPolicy.clearForm')} </button> + <div className={`flex flex-row max-[450px]:flex-col space-x-3 max-[450px]:space-x-0 max-[450px]:space-y-2 w-full md:w-auto justify-end`}> + <button id="createPolicy_cancel_btn" onClick={() => clickOnCancel()} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-11/12 md:w-40 h-10 border-[#1447B2] border rounded-md bg-white text-tory-blue text-sm font-semibold`}>{t('requestPolicy.cancel')}</button> + <button id="createPolicy_submit_btn" disabled={!isFormValid()} onClick={() => clickOnSubmit()} className={`${isLoginLanguageRTL ? "ml-2" : "mr-2"} w-11/12 md:w-40 h-10 border-[#1447B2] border rounded-md text-sm font-semibold ${isFormValid() ? 'bg-tory-blue text-white' : 'border-[#A5A5A5] bg-[#A5A5A5] text-white cursor-not-allowed'}`} tabIndex="0" onKeyPress={(e) => onPressEnterKey(e, clearForm())}> + {t('requestPolicy.submit')} + </button> + </div> </div> </div> - </div> + : <Confirmation confirmationData={confirmationData} /> + } </div> </> )}