Skip to content

Commit

Permalink
Merge pull request #2262 from Bonymol-aot/feature/FWF-3542-settings-f…
Browse files Browse the repository at this point in the history 
…unctionalities

FWF - 3542 Added settings functionalities
  • Loading branch information
@arun-s-aot
arun-s-aot authored Oct 14, 2024
2 parents 591d88d + e94be27 commit 28e7be2
Show file tree
Hide file tree
Showing 2 changed files with 199 additions and 92 deletions.
177 changes: 110 additions & 67 deletions forms-flow-web/src/components/CustomComponents/settingsModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,45 +11,21 @@ import _set from "lodash/set";
import _cloneDeep from "lodash/cloneDeep";
import _camelCase from "lodash/camelCase";

const SettingsModal = ({ show, handleClose, handleConfirm }) => {
const SettingsModal =
({ show, handleClose, handleConfirm, rolesState,
setRolesState, formDetails, updateFormName, updateFormDescription, formDisplay,
setFormDisplay, newPath, handleFormPathChange }) => {
const { t } = useTranslation();
const dispatch = useDispatch();

const [rolesState, setRolesState] = useState({
edit: {
roleInput: '',
filteredRoles: [],
selectedRoles: [],
selectedOption: 'onlyYou',
},
create: {
roleInput: '',
filteredRoles: [],
selectedRoles: [],
selectedOption: 'registeredUsers',
isChecked: false,
},
view: {
roleInput: '',
filteredRoles: [],
selectedRoles: [],
selectedOption: 'submitter',
},
});

const [userRoles, setUserRoles] = useState([]);
const [url, setUrl] = useState('');
const formName = useSelector((state) => state.form.form.name);
const formDescription = useSelector((state) => state.process.formProcessList.description);
const formPath = useSelector((state) => state.form.form.path);

const [copied, setCopied] = useState(false);
const [newPath, setNewPath] = useState(formPath);
const [newFormName, setNewFormName] = useState(formName);
const [newFormDescription, setNewFormDescription] = useState(formDescription);
const formData = useSelector((state) => state.form?.form);
const reducer = (form, { type, value }) => {
const formCopy = _cloneDeep(form);
const [copied, setCopied] = useState(false);
const formData = useSelector((state) => state.form?.form.path);
const [editIndexValue, setEditIndexValue] = useState(0);
const [createIndexValue, setCreateIndexValue] = useState(0);
const [viewIndexValue, setViewIndexValue] = useState(0);
const reducer = (path, { type, value }) => {
const formCopy = _cloneDeep(path);
switch (type) {
case "formChange":
for (let prop in value) {
Expand Down Expand Up @@ -84,7 +60,7 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
target.type === "checkbox"
? target.checked ? "wizard" : "form"
: target.value;

setFormDisplay(value);
dispatchFormAction({ type: path, value });
};

Expand Down Expand Up @@ -171,10 +147,6 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
});
};

const handleFormPathChange = (e) => {
setNewPath(e.target.value);
};

const handleClickOutside = (event) => {
if (dropEditRef.current && !dropEditRef.current.contains(event.target)) {
setRolesState((prevState) => ({
Expand Down Expand Up @@ -203,6 +175,7 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
};
}, []);


return (
<Modal className="d-flex flex-column align-items-start w-100 settings-modal" show={show} onHide={handleClose} dialogClassName="modal-50w" backdrop="static">
<Modal.Header>
Expand All @@ -212,11 +185,16 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
{/* Section 1: Basic */}
<div className='section'>
<h5 className='fw-bold'>{t("Basic")}</h5>
<FormInput value={newFormName} label={t("Name")} onChange={(e) => setNewFormName(e.target.value)} dataTestid="form-name" ariaLabel={t("Form Name")} />
<FormInput
value={formDetails.name}
label={t("Name")}
onChange={(e) => updateFormName(e.target.value)}
dataTestid="form-name"
ariaLabel={t("Form Name")} />
<FormTextArea
label={t("Description")}
value={newFormDescription}
onChange={(e) => setNewFormDescription(e.target.value)}
value={formDetails.description}
onChange={(e) => updateFormDescription(e.target.value)}
aria-label={t("Description of the edited form")}
data-testid="form-description"
maxRows={3}
Expand All @@ -236,7 +214,7 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
type="checkbox"
id="createCheckbox"
label={t("Allow adding multiple pages in this form")}
checked={form.display === "wizard"}
checked={formDisplay === "wizard"}
onChange={(event) => handleChange("display", event)}


Expand All @@ -252,9 +230,32 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {

<Form.Label className='field-label'>{t("Who Can Edit This Form")}</Form.Label>
<CustomRadioButton items={[
{ label: t("Only You"), onClick: () => setRolesState((prev) => ({ ...prev, edit: { ...prev.edit, selectedOption: 'onlyYou' } })) },
{ label: t("You and specified roles"), onClick: () => setRolesState((prev) => ({ ...prev, edit: { ...prev.edit, selectedOption: 'specifiedRoles' } })) },
]} dataTestid="edit-submission-role" ariaLabel={t("Edit Submission Role")} />
{
label: t("Only You"),
onClick: () => {
setRolesState((prev) => ({
...prev,
edit: { ...prev.edit, selectedOption: 'onlyYou' }
}));
setEditIndexValue(0);
}
},
{
label: t("You and specified roles"),
onClick: () => {
setRolesState((prev) => ({
...prev,
edit: { ...prev.edit, selectedOption: 'specifiedRoles' }
}));
setEditIndexValue(1);
}
},
]}
dataTestid="edit-submission-role"
ariaLabel={t("Edit Submission Role")}
indexValue={editIndexValue}
/>


{rolesState.edit.selectedOption === 'onlyYou' && (
<FormInput disabled={true} />
Expand Down Expand Up @@ -289,15 +290,40 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
type="checkbox"
id="createCheckbox"
label={t("Anonymous users")}
checked={rolesState.create.isChecked}
checked={rolesState.create.isPublic}
onChange={() => setRolesState((prev) =>
({ ...prev, create: { ...prev.create, isChecked: !prev.create.isChecked } }))}
({ ...prev, create: { ...prev.create, isPublic: !prev.create.isPublic } }))}
className='field-label'
/>
<CustomRadioButton items={[
{ label: t("Registered users"), onClick: () => setRolesState((prev) => ({ ...prev, create: { ...prev.create, selectedOption: 'registeredUsers' } })) },
{ label: t("Specific roles"), onClick: () => setRolesState((prev) => ({ ...prev, create: { ...prev.create, selectedOption: 'specifiedRoles' } })) },
]} dataTestid="create-submission-role" ariaLabel={t("Create Submission Role")} />
<CustomRadioButton
items={[
{
label: t("Registered users"),
onClick: () => {
setRolesState((prev) => ({
...prev,
create: { ...prev.create, selectedOption: 'registeredUsers' }
}));
setCreateIndexValue(0);
// Set index value for Registered users
}
},
{
label: t("Specific roles"),
onClick: () => {
setRolesState((prev) => ({
...prev,
create: { ...prev.create, selectedOption: 'specifiedRoles' }
}));
setCreateIndexValue(1); // Set index value for Specific roles
}
},
]}
dataTestid="create-submission-role"
ariaLabel={t("Create Submission Role")}
indexValue={createIndexValue}
/>


{rolesState.create.selectedOption === 'registeredUsers' && (
<FormInput disabled={true} />
Expand Down Expand Up @@ -329,13 +355,33 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {

<Form.Label className="field-label mt-3">{t("Who Can View Submissions")}</Form.Label>
<CustomRadioButton
items={[
{ label: t("Submitter"), onClick: () => setRolesState((prev) => ({ ...prev, view: { ...prev.view, selectedOption: 'submitter' } })) },
{ label: t("Submitter and specified roles"), onClick: () => setRolesState((prev) => ({ ...prev, view: { ...prev.view, selectedOption: 'specifiedRoles' } })) },
]}
dataTestid="view-submission-role"
ariaLabel={t("View Submission Role")}
/>
items={[
{
label: t("Submitter"),
onClick: () => {
setRolesState((prev) => ({
...prev,
view: { ...prev.view, selectedOption: 'submitter' }
}));
setViewIndexValue(0); // Set index value for Submitter
}
},
{
label: t("Submitter and specified roles"),
onClick: () => {
setRolesState((prev) => ({
...prev,
view: { ...prev.view, selectedOption: 'specifiedRoles' }
}));
setViewIndexValue(0);
}
},
]}
dataTestid="view-submission-role"
ariaLabel={t("View Submission Role")}
indexValue={viewIndexValue}
/>


{rolesState.view.selectedOption === 'submitter' && (
<FormInput disabled={true} />
Expand Down Expand Up @@ -381,8 +427,8 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
</div>

<div className='modal-hr' />

<div className="section">
{rolesState.create.isPublic && (
<div className="section">
<h5 className='fw-bold'>{t("Link for this form")}</h5>
<div className="info-panel">
<div className='d-flex align-items-center'>
Expand Down Expand Up @@ -411,12 +457,9 @@ const SettingsModal = ({ show, handleClose, handleConfirm }) => {
</InputGroup.Text>
</InputGroup>
</Form.Group>





</div>
)}

</Modal.Body>
<Modal.Footer className="d-flex justify-content-start">
<CustomButton
Expand Down
Loading

0 comments on commit 28e7be2

Please sign in to comment.