Skip to content

Commit

Permalink
Merge pull request #2519 from shuhaib-aot/feature/FWF-3807-changed-mu…
Browse files Browse the repository at this point in the history 
…lti-select

Feature: changed multi select custom component in MF
  • Loading branch information
@arun-s-aot
arun-s-aot authored Jan 17, 2025
2 parents 5d2dd2b + 0978b98 commit c8d0601
Show file tree
Hide file tree
Showing 4 changed files with 68 additions and 158 deletions.
120 changes: 0 additions & 120 deletions forms-flow-web/src/components/CustomComponents/MultiSelect.js
View file

This file was deleted.

8 changes: 5 additions & 3 deletions forms-flow-web/src/components/Form/EditForm/FormEdit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@ import NewVersionModal from "../../Modals/NewVersionModal";
import { currentFormReducer } from "../../../modules/formReducer.js";
import { toast } from "react-toastify";
import userRoles from "../../../constants/permissions.js";
import { generateUniqueId, isFormComponentsChanged, addTenantkey, textTruncate } from "../../../helper/helper.js";
import { generateUniqueId, isFormComponentsChanged, addTenantkey, textTruncate,
convertMultiSelectOptionToValue } from "../../../helper/helper.js";
import { useMutation } from "react-query";
import NavigateBlocker from "../../CustomComponents/NavigateBlocker";
import { setProcessData, setFormPreviosData, setFormProcessesData } from "../../../actions/processActions.js";
Expand Down Expand Up @@ -538,12 +539,13 @@ const handleSaveLayout = () => {


/* ----------- save settings function to be used in settings modal ---------- */

const filterAuthorizationData = (authorizationData) => {
if(authorizationData.selectedOption === "submitter"){
return {roles: [], userName:null, resourceDetails:{submitter:true}};
}
if (authorizationData.selectedOption === "specifiedRoles") {
return { roles: authorizationData.selectedRoles, userName: "" };
return { roles: convertMultiSelectOptionToValue(authorizationData.selectedRoles, "role"), userName: "" };
}
return { roles: [], userName: preferred_username };
};
Expand Down Expand Up @@ -582,7 +584,7 @@ const handleSaveLayout = () => {
resourceDetails: {},
roles:
rolesState.FORM.selectedOption === "specifiedRoles"
? rolesState.FORM.selectedRoles
? convertMultiSelectOptionToValue(rolesState.FORM.selectedRoles, "role")
: [],
},
};
Expand Down
77 changes: 44 additions & 33 deletions forms-flow-web/src/components/Form/EditForm/FormSettings.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,11 @@ import {
CustomRadioButton,
FormInput,
FormTextArea,
MultipleSelect
} from "@formsflow/components";

import MultiSelectComponent from "../../CustomComponents/MultiSelect";
import { MULTITENANCY_ENABLED } from "../../../constants/constants";
import { addTenantkeyAsSuffix } from "../../../helper/helper";
import { addTenantkeyAsSuffix, convertSelectedValueToMultiSelectOption } from "../../../helper/helper";
import { useDispatch, useSelector } from "react-redux";
import { getUserRoles } from "../../../apiManager/services/authorizationService";
import { useTranslation } from "react-i18next";
Expand Down Expand Up @@ -67,22 +67,26 @@ const FormSettings = forwardRef((props, ref) => {

const publicUrlPath = `${window.location.origin}/public/form/`;
const [urlPath,setUrlPath] = useState(publicUrlPath);
const setSelectedOption = (roles, option)=> roles.length ? "specifiedRoles" : option;
const setSelectedOption = (option, roles = [])=> roles.length ? "specifiedRoles" : option;
const multiSelectOptionKey = "role";
/* ------------------------- authorization variables ------------------------ */
const [rolesState, setRolesState] = useState({
DESIGN: {
selectedRoles: formAuthorization.DESIGNER?.roles,
selectedOption: setSelectedOption(formAuthorization.DESIGNER?.roles,"onlyYou"),
selectedRoles: convertSelectedValueToMultiSelectOption(formAuthorization.DESIGNER?.roles,
multiSelectOptionKey),
selectedOption: setSelectedOption("onlyYou", formAuthorization.DESIGNER?.roles),
},
FORM: {
roleInput: "",
selectedRoles: formAuthorization.FORM?.roles,
selectedOption: setSelectedOption(formAuthorization.FORM?.roles,"registeredUsers"),
selectedRoles: convertSelectedValueToMultiSelectOption(formAuthorization.FORM?.roles,
multiSelectOptionKey),
selectedOption: setSelectedOption("registeredUsers", formAuthorization.FORM?.roles),
},
APPLICATION: {
roleInput: "",
selectedRoles: formAuthorization.APPLICATION?.roles,
selectedOption: setSelectedOption(formAuthorization.APPLICATION?.roles, "submitter"),
selectedRoles: convertSelectedValueToMultiSelectOption(formAuthorization.APPLICATION?.roles,
multiSelectOptionKey),
selectedOption: setSelectedOption("submitter", formAuthorization.APPLICATION?.roles),
/* The 'submitter' key is stored in 'resourceDetails'. If the roles array is not empty
we assume that the submitter is true. */
}
Expand Down Expand Up @@ -168,15 +172,15 @@ const FormSettings = forwardRef((props, ref) => {
.then((res) => {
if (res) {
const { data = [] } = res;
setUserRoles(data.map((role) => role.name));
setUserRoles(data.map((role,index) => ({[multiSelectOptionKey]:role.name, id: index})));
}
})
.catch((error) => console.error("error", error));
}, [dispatch]);



const handleRoleStateChange = (section, key, value) => {
const handleRoleStateChange = (section, key, value = []) => {
setRolesState((prevState) => ({
...prevState,
[section]: {
Expand Down Expand Up @@ -225,6 +229,10 @@ const FormSettings = forwardRef((props, ref) => {
props.setIsSaveButtonDisabled(shouldDisableSaveButton);
}, [rolesState, errors, formDetails]);

const handleRoleSelectForDesign = (roles) => handleRoleStateChange(DESIGN, "selectedRoles", roles);
const handleRoleSelectForForm = (roles) => handleRoleStateChange(FORM, "selectedRoles", roles);
const handleRoleSelectForApplication = (roles) =>
handleRoleStateChange(APPLICATION, "selectedRoles", roles);

return (
<>
Expand Down Expand Up @@ -304,14 +312,15 @@ const FormSettings = forwardRef((props, ref) => {
<FormInput disabled={true} />
)}
{rolesState.DESIGN.selectedOption === "specifiedRoles" && (
<MultiSelectComponent
openByDefault
allRoles={userRoles}
selectedRoles={rolesState.DESIGN.selectedRoles}
setSelectedRoles={(roles) =>
handleRoleStateChange(DESIGN, "selectedRoles", roles)
}
<MultipleSelect
options={userRoles}
selectedValues={rolesState.DESIGN.selectedRoles}
onSelect={handleRoleSelectForDesign}
onRemove={handleRoleSelectForDesign}
displayValue={multiSelectOptionKey}
avoidHighlightFirstOption={true}
/>

)}

<Form.Label className="field-label mt-3">
Expand Down Expand Up @@ -353,14 +362,15 @@ const FormSettings = forwardRef((props, ref) => {
<FormInput disabled={true} />
)}
{rolesState.FORM.selectedOption === "specifiedRoles" && (
<MultiSelectComponent
openByDefault
allRoles={userRoles}
selectedRoles={rolesState.FORM.selectedRoles}
setSelectedRoles={(roles) =>
handleRoleStateChange(FORM, "selectedRoles", roles)
}
/>
<MultipleSelect
options={userRoles} // Options to display in the dropdown
selectedValues={rolesState.FORM.selectedRoles} // Preselected value to persist in dropdown
onSelect={handleRoleSelectForForm} // Function will trigger on select event
onRemove={handleRoleSelectForForm} // Function will trigger on remove event
displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
avoidHighlightFirstOption={true}
/>

)}

<Form.Label className="field-label mt-3">
Expand Down Expand Up @@ -393,14 +403,15 @@ const FormSettings = forwardRef((props, ref) => {
)}

{rolesState.APPLICATION.selectedOption === "specifiedRoles" && (
<MultiSelectComponent
openByDefault
allRoles={userRoles}
selectedRoles={rolesState.APPLICATION.selectedRoles}
setSelectedRoles={(roles) =>
handleRoleStateChange(APPLICATION, "selectedRoles", roles)
}
<MultipleSelect
options={userRoles} // Options to display in the dropdown
selectedValues={rolesState.APPLICATION.selectedRoles} // Preselected value to persist in dropdown
onSelect={handleRoleSelectForApplication} // Function will trigger on select event
onRemove={handleRoleSelectForApplication} // Function will trigger on remove event
displayValue={multiSelectOptionKey} // Property name to display in the dropdown options
avoidHighlightFirstOption={true}
/>

)}
</div>

Expand Down
21 changes: 19 additions & 2 deletions forms-flow-web/src/helper/helper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,5 +114,22 @@ const addTenantkeyAsSuffix = (value, tenantkey) => {
}
};

export { generateUniqueId, replaceUrl, addTenantkey, removeTenantKey, textTruncate, renderPage,
filterSelectOptionByLabel, isFormComponentsChanged,addTenantkeyAsSuffix};
/* ----------------- convert data from and into multiselect ----------------- */
const convertMultiSelectOptionToValue = (selectedValues = [], key = null) =>
selectedValues.map(i=> i[key]);

const convertSelectedValueToMultiSelectOption = (values = [], key = null) =>
values.map((value)=>({[key]:value, id:_.uniqueId(value)}));
/* ----------------------------------- --- ---------------------------------- */
export { generateUniqueId,
replaceUrl,
addTenantkey,
removeTenantKey,
textTruncate,
renderPage,
filterSelectOptionByLabel,
isFormComponentsChanged,
addTenantkeyAsSuffix,
convertMultiSelectOptionToValue,
convertSelectedValueToMultiSelectOption
};

0 comments on commit c8d0601

Please sign in to comment.