Skip to content

Commit

Permalink
MOSIP-32711: Added submit flow in request policy (#408)
Browse files Browse the repository at this point in the history
Signed-off-by: SwethaKrish4 <[email protected]>
  • Loading branch information
SwethaKrish4 authored Jun 3, 2024
1 parent 6bc961d commit 2546b65
Show file tree
Hide file tree
Showing 8 changed files with 249 additions and 21 deletions.
10 changes: 7 additions & 3 deletions pmp-reactjs-ui/public/i18n/ara.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,16 @@
"clearForm": "شكل واضح",
"cancel": "يلغي",
"submit": "يُقدِّم",
"errorInResponse": "يوجد خطأ ما في جلب التفاصيل لجميع مجموعات السياسات المعتمدة. حاول مرة أخرى في وقت لاحق",
"errorInFetchingPolicyNames": "يوجد خطأ ما في جلب أسماء السياسات. حاول مرة أخرى في وقت لاحق"
"errorInResponse": "يوجد خطأ ما في جلب التفاصيل لجميع مجموعات السياسات المعتمدة. حاول مرة أخرى في وقت لاحق!",
"errorInFetchingPolicyNames": "يوجد خطأ ما في جلب أسماء السياسات. حاول مرة أخرى في وقت لاحق!",
"errorInMapPolicy": "هناك بعض الخطأ في طلب سياسة جديدة. حاول مرة أخرى في وقت لاحق!",
"policySuccessHeader": "تم إرسال السياسة بنجاح!",
"policySuccessMsg":"تم إرسال عملية طلب السياسة بنجاح. الموافقة في انتظار المشرف."
},
"commons": {
"home": "بيت",
"search": "يبحث"
"search": "يبحث",
"goBack": "عُد"
},
"serverError": {
"PMS_COR_001": "معلمة الإدخال مفقود",
Expand Down
10 changes: 7 additions & 3 deletions pmp-reactjs-ui/public/i18n/eng.json
Original file line number Diff line number Diff line change
Expand Up @@ -143,12 +143,16 @@
"clearForm": "Clear Form",
"cancel": "Cancel",
"submit": "Submit",
"errorInResponse": "There is some error in fetching the details for all approved policy groups. Try again later",
"errorInFetchingPolicyNames": "There is some error in fetching the policy names. Try again later"
"errorInResponse": "There is some error in fetching the details for all approved policy groups. Try again later!",
"errorInFetchingPolicyNames": "There is some error in fetching the policy names. Try again later!",
"errorInMapPolicy": "There is some error in requesting a new policy. Try again later!",
"policySuccessHeader": "Policy Submitted Successfully!",
"policySuccessMsg":"Policy request process has been successfully submitted. Approval is pending with admin."
},
"commons": {
"home": "Home",
"search": "Search"
"search": "Search",
"goBack": "Go Back"
},
"serverError": {
"PMS_COR_001": "Missing Input Parameter",
Expand Down
10 changes: 7 additions & 3 deletions pmp-reactjs-ui/public/i18n/fra.json
Original file line number Diff line number Diff line change
Expand Up @@ -144,12 +144,16 @@
"clearForm": "Forme claire",
"cancel": "Annuler",
"submit": "Soumettre",
"errorInResponse": "Une erreur s'est produite lors de la récupération des détails de tous les groupes de stratégies approuvés. Réessayez plus tard",
"errorInFetchingPolicyNames": "Une erreur s'est produite lors de la récupération des noms de stratégie. Réessayez plus tard"
"errorInResponse": "Une erreur s'est produite lors de la récupération des détails de tous les groupes de stratégies approuvés. Réessayez plus tard!",
"errorInFetchingPolicyNames": "Une erreur s'est produite lors de la récupération des noms de stratégie. Réessayez plus tard!",
"errorInMapPolicy": "Il y a une erreur lors de la demande d'une nouvelle politique. Réessayez plus tard!",
"policySuccessHeader": "Politique soumise avec succès !",
"policySuccessMsg":"Le processus de demande de politique a été soumis avec succès. L'approbation est en attente auprès de l'administrateur."
},
"commons": {
"home": "Maison",
"search": "Recherche"
"search": "Recherche",
"goBack": "Retourner"
},
"serverError": {
"PMS_COR_001": "Paramètre d'entrée manquant",
Expand Down
5 changes: 5 additions & 0 deletions pmp-reactjs-ui/src/AppRoutes.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Policies from './pages/policies/Policies.js';
import Dashboard from './pages/dashboard/Dashboard.js';
import ViewPolicyDetails from './pages/policies/ViewPolicyDetails.js';
import RequestPolicy from './pages/policies/RequestPolicy';
import RequestPolicyConfirmation from './pages/policies/RequestPolicyConfirmation.js';

function AppRoutes() {

Expand Down Expand Up @@ -37,6 +38,10 @@ function AppRoutes() {
{
path: 'requestPolicy',
element: <GuardedRoute><MainLayout><RequestPolicy/></MainLayout></GuardedRoute>,
},
{
path: 'requestPolicyConfirmation',
element: <GuardedRoute><MainLayout><RequestPolicyConfirmation/></MainLayout></GuardedRoute>,
}
],
},
Expand Down
46 changes: 40 additions & 6 deletions pmp-reactjs-ui/src/pages/policies/PoliciesFilter.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { useState, useEffect } from 'react';
import DropdownComponent from '../common/fields/DropdownComponent.js';
import { useTranslation } from 'react-i18next';
import { createDropdownDataList } from '../../utils/AppUtils.js';
import { getPartnerTypeDescription, getStatusCode } from '../../utils/AppUtils.js';

function PoliciesFilter({ filteredPoliciesList, onFilterChange }) {
const { t } = useTranslation();
Expand All @@ -13,12 +13,46 @@ function PoliciesFilter({ filteredPoliciesList, onFilterChange }) {
const [statusData, setStatusData] = useState([]);

useEffect(() => {
const getData = (fieldName) => {
let dataArr = [];
dataArr.push({
fieldCode: "",
fieldValue: ""
});
filteredPoliciesList.forEach(item => {
let alreadyAdded = false;
dataArr.forEach(item1 => {
if (item1.fieldValue === item[fieldName]) {
alreadyAdded = true;
}
});
if (!alreadyAdded) {
if (fieldName === "partnerType") {
dataArr.push({
fieldCode: getPartnerTypeDescription(item[fieldName], t),
fieldValue: item[fieldName]
});
} else if (fieldName === "status") {
dataArr.push({
fieldCode: getStatusCode(item[fieldName], t),
fieldValue: item[fieldName]
});
} else {
dataArr.push({
fieldCode: item[fieldName],
fieldValue: item[fieldName]
});
}
}
});
return dataArr;
}
const fetchData = async () => {
setPartnerIdData(createDropdownDataList('partnerId', filteredPoliciesList, t));
setPartnerTypeData(createDropdownDataList('partnerType', filteredPoliciesList, t));
setPolicyGroupNameData(createDropdownDataList('policyGroupName', filteredPoliciesList, t));
setPolicyNameData(createDropdownDataList('policyName', filteredPoliciesList, t));
setStatusData(createDropdownDataList('status', filteredPoliciesList, t));
setPartnerIdData(getData('partnerId'));
setPartnerTypeData(getData('partnerType'));
setPolicyGroupNameData(getData('policyGroupName'));
setPolicyNameData(getData('policyName'));
setStatusData(getData('status'));
};
fetchData();
}, [filteredPoliciesList, t]);
Expand Down
100 changes: 94 additions & 6 deletions pmp-reactjs-ui/src/pages/policies/RequestPolicy.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { getPartnerManagerUrl, getPolicyManagerUrl, handleServiceErrors, createDropdownDataList, moveToPolicies } from '../../utils/AppUtils';
import { getPartnerManagerUrl, getPolicyManagerUrl, handleServiceErrors, moveToPolicies } from '../../utils/AppUtils';
import { HttpService } from '../../services/HttpService';
import LoadingIcon from "../common/LoadingIcon";
import ErrorMessage from "../common/ErrorMessage";
Expand All @@ -16,6 +16,7 @@ function RequestPolicy() {
const [errorCode, setErrorCode] = useState("");
const [errorMsg, setErrorMsg] = useState("");
const [partnerId, setPartnerId] = useState("");
const [policyId, setPolicyId] = useState("");
const [policyName, setPolicyName] = useState("");
const [partnerType, setPartnerType] = useState("");
const [policyGroupName, setPolicyGroupName] = useState("");
Expand All @@ -42,7 +43,7 @@ function RequestPolicy() {
if (responseData && responseData.response) {
const resData = responseData.response;
setPartnerData(resData);
setPartnerIdDropdownData(createDropdownDataList('partnerId', partnerData, t));
setPartnerIdDropdownData(createPartnerIdDropdownData('partnerId', partnerData));
console.log('Response data:', partnerData.length);
} else {
handleServiceErrors(responseData, setErrorCode, setErrorMsg);
Expand All @@ -59,6 +60,54 @@ function RequestPolicy() {
fetchData();
}, [partnerData.length, t]);

const createPartnerIdDropdownData = (fieldName, dataList) => {
let dataArr = [];
dataArr.push({
fieldCode: "",
fieldValue: ""
});
dataList.forEach(item => {
let alreadyAdded = false;
dataArr.forEach(item1 => {
if (item1.fieldValue === item[fieldName]) {
alreadyAdded = true;
}
});
if (!alreadyAdded) {
dataArr.push({
fieldCode: item[fieldName],
fieldValue: item[fieldName]
});
}
});
return dataArr;
}

const createPoliciesDropdownData = (fieldName, dataList) => {
let dataArr = [];
dataArr.push({
fieldCode: "",
fieldValue: "",
fieldDescription: ""
});
dataList.forEach(item => {
let alreadyAdded = false;
dataArr.forEach(item1 => {
if (item1.fieldValue === item[fieldName]) {
alreadyAdded = true;
}
});
if (!alreadyAdded) {
dataArr.push({
fieldCode: item[fieldName],
fieldValue: item.id,
fieldDescription: item.descr
});
}
});
return dataArr;
}

const onChangePartnerId = async (fieldName, selectedValue) => {
setPartnerId(selectedValue);
// Find the selected partner data
Expand All @@ -72,7 +121,11 @@ function RequestPolicy() {
};

const onChangePolicyName = (fieldName, selectedValue) => {
setPolicyName(selectedValue);
setPolicyId(selectedValue);
const selectedPolicy = policiesDropdownData.find(item => item.fieldValue === selectedValue);
if (selectedPolicy) {
setPolicyName(selectedPolicy.fieldCode);
}
};

const getListofPolicies = async (policyGroupName) => {
Expand All @@ -87,7 +140,7 @@ function RequestPolicy() {
const responseData = response.data;
if (responseData && responseData.response) {
const resData = responseData.response;
setPoliciesDropdownData(createDropdownDataList('name', resData, t));
setPoliciesDropdownData(createPoliciesDropdownData('name', resData));
console.log(`Response data: ${resData.length}`);
} else {
handleServiceErrors(responseData, setErrorCode, setErrorMsg);
Expand All @@ -108,8 +161,43 @@ function RequestPolicy() {
setPolicyGroupName("");
setPolicyName("");
setPartnerComments("");
setPoliciesDropdownData([]);
};

const clickOnSubmit = async () => {
setErrorCode("");
setErrorMsg("");
setDataLoaded(false);
let request = {
request: {
partnerId: partnerId,
policyId: policyId,
policyName: policyName,
requestDetail: partnerComments,
useCaseDescription: partnerComments
},
}
try {
const response = await HttpService.post(getPartnerManagerUrl(`/partners/${partnerId}/policy/map`, process.env.NODE_ENV), request);
if (response) {
const responseData = response.data;
if (responseData && responseData.response) {
const resData = responseData.response;
navigate('/partnermanagement/requestPolicyConfirmation');
console.log(`Response data: ${resData.length}`);
} else {
handleServiceErrors(responseData, setErrorCode, setErrorMsg);
}
} else {
setErrorMsg(t('requestPolicy.errorInMapPolicy'));
}
setDataLoaded(true);
} catch (err) {
setErrorMsg(err);
console.log("Error fetching data: ", err);
}
}

const isFormValid = () => {
return partnerId && policyName && partnerComments;
};
Expand Down Expand Up @@ -201,7 +289,7 @@ function RequestPolicy() {
onDropDownChangeEvent={onChangePolicyName}
fieldNameKey='requestPolicy.policyName*'
placeHolderKey='requestPolicy.selectPolicyName'
selectedDropdownValue={policyGroupName}
selectedDropdownValue={policyName}
searchKey='commons.search'
styleSet={styleForSearch}>
</DropdownWithSearchComponent>
Expand All @@ -223,7 +311,7 @@ function RequestPolicy() {
<button onClick={() => clearForm()} className="mr-2 w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold">{t('requestPolicy.clearForm')}</button>
<div className="flex flex-row space-x-3 w-full md:w-auto justify-end">
<button onClick={() => moveToPolicies(navigate)} className="mr-2 w-full md:w-40 h-12 border-[#1447B2] border rounded-md bg-white text-tory-blue text-base font-semibold">{t('requestPolicy.cancel')}</button>
<button disabled={!isFormValid()} className={`mr-2 w-full md:w-40 h-12 border-[#1447B2] border rounded-md text-base font-semibold ${isFormValid() ? 'bg-tory-blue text-white' : 'border-[#A5A5A5] bg-[#A5A5A5] text-white cursor-not-allowed'}`}>{t('requestPolicy.submit')}</button>
<button disabled={!isFormValid()} onClick={() => clickOnSubmit()} className={`mr-2 w-full md:w-40 h-12 border-[#1447B2] border rounded-md text-base font-semibold ${isFormValid() ? 'bg-tory-blue text-white' : 'border-[#A5A5A5] bg-[#A5A5A5] text-white cursor-not-allowed'}`}>{t('requestPolicy.submit')}</button>
</div>
</div>
</div>
Expand Down
67 changes: 67 additions & 0 deletions pmp-reactjs-ui/src/pages/policies/RequestPolicyConfirmation.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import React from 'react'
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { getUserProfile } from '../../services/UserProfileService';
import { isLangRTL } from '../../utils/AppUtils';

import backArrow from '../../svg/back_arrow.svg';
import successIcon from '../../svg/success_message_icon.svg';

function RequestPolicyConfirmation() {

const navigate = useNavigate();
const { t } = useTranslation();
const isLoginLanguageRTL = isLangRTL(getUserProfile().langCode);

const moveToHome = () => {
navigate('/partnermanagement')
};

const moveToPolicies = () => {
navigate('/partnermanagement/policies')
};

return (
<div className="ml-32 mr-5 mt-5 w-[100%] h-[100%] font-inter">
<div className="flex-col">
<div className="flex items-start space-x-3">
<img src={backArrow} alt="" className="mt-[1%] cursor-pointer" />
<div className="flex-col">
<h1 className="font-semibold text-xl text-dark-blue">{t('requestPolicy.requestPolicy')}</h1>
<div className="flex space-x-1">
<p onClick={() => moveToHome()} className="font-semibold text-tory-blue text-xs cursor-pointer">
{t('commons.home')} /
</p>
<p onClick={() => moveToPolicies()} className="font-semibold text-tory-blue text-xs cursor-pointer">
{t('requestPolicy.policies')}
</p>
</div>
</div>
</div>
<div className="flex items-center justify-center w-[100%] h-[480px] bg-snow-white mt-[1.5%] rounded-lg shadow-md">
<div className="flex-col justify-center">
<img src={successIcon} alt="" className={`${isLoginLanguageRTL ? "mr-56" : "ml-56"} h-40`} />
<div className="text-center">
<h1 className="font-bold text-black text-lg">
{t('requestPolicy.policySuccessHeader')}
</h1>
<p className="text-[#666666] text-sm font-semibold">
{t('requestPolicy.policySuccessMsg')}
</p>
<div className="flex space-x-3 mt-12 border justify-center">
<button onClick={() => moveToPolicies()} type="button" className="text-white font-semibold bg-tory-blue rounded-md text-base px-12 py-4">
{t('commons.goBack')}
</button>
<button onClick={() => moveToHome()} type="button" className="text-[#1447b2] font-semibold bg-white border border-[#1447b2] rounded-md text-base px-12 py-4">
{t('commons.home')}
</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}

export default RequestPolicyConfirmation;
22 changes: 22 additions & 0 deletions pmp-reactjs-ui/src/svg/success_message_icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 2546b65

Please sign in to comment.