Skip to content

GitLab

Unverified Commit 9941066b authored by Zhou (Link) Fang's avatar Zhou (Link) Fang Committed by GitHub
Browse files

Fixed layout issue when firstname validation fails (#299) 

* Fixed layout issue when firstname validation fails

* Fixed wg and signing rep and improved based on feedback
parent bbcb2bd8
Hide whitespace changes
Inline Side-by-side
src/main/www/src/components/Application/CompanyInformation/CompanyInformationContacts.js
View file @ 9941066b
......@@ -107,29 +107,40 @@ const Contacts = ({ formik, formikWG }) => {
isWGRepSameAsCompany && formikWG.setFieldValue('workingGroups', newWG);
};
const generateSingleContact = (el, index, prefix, type, disableInput) => (
<div key={prefix + index} className="col-md-12">
<Input
name={`representative.${type}.${el.name}`}
labelName={el.label}
ariaLabel={prefix + el.name}
placeholder={el.placeholder}
requiredMark={true}
disableInput={disableInput}
onChange={type === 'member' ? (ev) => handleMemberInputChange(ev.target.value, el.name) : formik.handleChange}
value={formik.values.representative?.[type]?.[el.name]}
error={
formik.touched.representative?.[type]?.[el.name] && Boolean(formik.errors.representative?.[type]?.[el.name])
}
helperText={formik.errors.representative?.[type]?.[el.name]}
/>
</div>
);
const generateContacts = (representativeFields, prefix, type, disableInput) => (
<>
{representativeFields.map((el, index) => (
<div key={prefix + index} className="col-md-12">
<Input
name={`representative.${type}.${el.name}`}
labelName={el.label}
ariaLabel={prefix + el.name}
placeholder={el.placeholder}
requiredMark={true}
disableInput={disableInput}
onChange={
type === 'member' ? (ev) => handleMemberInputChange(ev.target.value, el.name) : formik.handleChange
}
value={formik.values.representative?.[type]?.[el.name]}
error={
formik.touched.representative?.[type]?.[el.name] &&
Boolean(formik.errors.representative?.[type]?.[el.name])
}
helperText={formik.errors.representative?.[type]?.[el.name]}
/>
</div>
))}
{
// Create 2 rows to prevent a strange layout issue when validation for firstname fails.
}
<div className="row">
{representativeFields.map(
(el, index) => index < 2 && generateSingleContact(el, index, prefix, type, disableInput)
)}
</div>
<div className="row">
{representativeFields.map(
(el, index) => index > 1 && generateSingleContact(el, index, prefix, type, disableInput)
)}
</div>
</>
);
......@@ -147,13 +158,8 @@ const Contacts = ({ formik, formikWG }) => {
organization, and shall have the authority to update information
provided to Eclipse Foundation.
</p>
<p>
All formal communications from the Eclipse Foundation will be sent to
the Member Representative.
</p>
<div className="row">
{generateContacts(companyRep, 'company-rep', 'member', false)}
</div>
<p>All formal communications from the Eclipse Foundation will be sent to the Member Representative.</p>
{generateContacts(companyRep, 'company-rep', 'member', false)}
<h2 className="fw-600 h4" id="marketing-rep">
Company Marketing Representative
......@@ -173,14 +179,7 @@ const Contacts = ({ formik, formikWG }) => {
label="Same as Member Representative"
/>
<div className="row">
{generateContacts(
companyRep,
'marketing-rep',
'marketing',
isMarketingSameAsCompany
)}
</div>
{generateContacts(companyRep, 'marketing-rep', 'marketing', isMarketingSameAsCompany)}
<h2 className="fw-600 h4" id="accounting-rep">
Company Accounting Representative
......@@ -200,13 +199,8 @@ const Contacts = ({ formik, formikWG }) => {
label="Same as Member Representative"
/>
<div className="row margin-bottom-40">
{generateContacts(
companyRep,
'accounting-rep',
'accounting',
isAccountingSameAsCompany
)}
<div className="margin-bottom-40">
{generateContacts(companyRep, 'accounting-rep', 'accounting', isAccountingSameAsCompany)}
</div>
</>
);
......
src/main/www/src/components/Application/MembershipLevel/MembershipLevel.js
View file @ 9941066b
......@@ -49,7 +49,7 @@ const MembershipLevel = ({ formik }) => {
<MembershipLevelFeeTable />
</div>
<CustomStepButton previousPage="/company-info" nextPage="/working-groups" pageIndex={2} />
<CustomStepButton previousPage="/company-info" nextPage="/working-groups" />
</form>
);
};
......
src/main/www/src/components/Application/SigningAuthority/SigningAuthority.js
View file @ 9941066b
......@@ -13,6 +13,28 @@ import { scrollToTop } from '../../../Utils/formFunctionHelpers';
const sectionName = 'signing-authority';
const SigningAuthority = ({ formik }) => {
const { signingAuthorityRepresentative } = formField;
const name = 'signingAuthorityRepresentative';
const generateSingleContact = (el) => (
<div key={el.name} className="col-md-12">
<Input
name={`${name}.${el.name}`}
labelName={el.label}
placeholder={el.placeholder}
requiredMark={true}
ariaLabel={`${name}.${el.name}`}
onChange={formik.handleChange}
value={formik.values.signingAuthorityRepresentative[`${el.name}`]}
error={
formik.touched.signingAuthorityRepresentative?.[`${el.name}`] &&
Boolean(formik.errors.signingAuthorityRepresentative?.[`${el.name}`])
}
helperText={
formik.touched.signingAuthorityRepresentative?.[`${el.name}`] &&
formik.errors.signingAuthorityRepresentative?.[`${el.name}`]
}
/>
</div>
);
useEffect(() => {
scrollToTop();
......@@ -24,47 +46,16 @@ const SigningAuthority = ({ formik }) => {
<h1 className="fw-600 h2" id={sectionName}>
Signing Authority
</h1>
<p>
Please indicate the individual who has the signing authority for the
agreement.
</p>
<p>Please indicate the individual who has the signing authority for the agreement.</p>
<div className="row">
{signingAuthorityRepresentative.map((el, index) => (
<div key={index} className="col-md-12">
<Input
name={`signingAuthorityRepresentative.${el.name}`}
labelName={el.label}
placeholder={el.placeholder}
requiredMark={true}
onChange={formik.handleChange}
value={
formik.values.signingAuthorityRepresentative[`${el.name}`]
}
error={
formik.touched.signingAuthorityRepresentative?.[
`${el.name}`
] &&
Boolean(
formik.errors.signingAuthorityRepresentative?.[`${el.name}`]
)
}
helperText={
formik.touched.signingAuthorityRepresentative?.[
`${el.name}`
] &&
formik.errors.signingAuthorityRepresentative?.[`${el.name}`]
}
/>
</div>
))}
{signingAuthorityRepresentative.map((el, index) => index < 2 && generateSingleContact(el))}
</div>
<div className="row">
{signingAuthorityRepresentative.map((el, index) => index > 1 && generateSingleContact(el))}
</div>
</div>
<CustomStepButton
previousPage="/working-groups"
nextPage="/review"
pageIndex={4}
/>
<CustomStepButton previousPage="/working-groups" nextPage="/review" />
</form>
);
};
......
src/main/www/src/components/Application/WorkingGroups/WorkingGroupRepresentative.js
View file @ 9941066b
......@@ -27,6 +27,29 @@ const WorkingGroupRepresentative = ({ name, index, formik, formikOrgValue }) =>
formik.setFieldValue(`workingGroups[${theIndex}].workingGroupRepresentative`, newValues);
};
const generateSingleContact = (el) => (
<div key={el.name} className="col-md-12" id={`${name}.${el.name}`}>
<Input
name={`${name}.${el.name}`}
labelName={el.label}
placeholder={el.placeholder}
ariaLabel={`${name} ${name}.${el.name}`}
onChange={formik.handleChange}
requiredMark={true}
disableInput={formik.values.workingGroups[theIndex].workingGroupRepresentative.sameAsCompany}
value={formik.values.workingGroups[theIndex].workingGroupRepresentative[`${el.name}`]}
error={
formik.touched.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`] &&
Boolean(formik.errors.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`])
}
helperText={
formik.touched.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`] &&
formik.errors.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`]
}
/>
</div>
);
return (
<>
<h3 className="fw-600 margin-top-30 h4" id={name}>
......@@ -44,30 +67,8 @@ const WorkingGroupRepresentative = ({ name, index, formik, formikOrgValue }) =>
}
label="Same as Member Representative"
/>
<div className="row">
{workingGroupRepresentative.map((el) => (
<div key={el.name} className="col-md-12" id={`${name}.${el.name}`}>
<Input
name={`${name}.${el.name}`}
labelName={el.label}
placeholder={el.placeholder}
ariaLabel={`${name} ${name}.${el.name}`}
onChange={formik.handleChange}
requiredMark={true}
disableInput={formik.values.workingGroups[theIndex].workingGroupRepresentative.sameAsCompany}
value={formik.values.workingGroups[theIndex].workingGroupRepresentative[`${el.name}`]}
error={
formik.touched.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`] &&
Boolean(formik.errors.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`])
}
helperText={
formik.touched.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`] &&
formik.errors.workingGroups?.[theIndex]?.workingGroupRepresentative?.[`${el.name}`]
}
/>
</div>
))}
</div>
<div className="row">{workingGroupRepresentative.map((el, index) => index < 2 && generateSingleContact(el))}</div>
<div className="row">{workingGroupRepresentative.map((el, index) => index > 1 && generateSingleContact(el))}</div>
</>
);
};
......
src/main/www/src/components/Application/WorkingGroups/WorkingGroupsWrapper.js
View file @ 9941066b
......@@ -136,7 +136,7 @@ const WorkingGroupsWrapper = ({ formik, formikOrgValue, fullWorkingGroupList, wo
</>
)}
</div>
<CustomStepButton previousPage="/membership-level" nextPage="/signing-authority" pageIndex={3} />
<CustomStepButton previousPage="/membership-level" nextPage="/signing-authority" />
</FormikProvider>
</form>
);
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Copyright © Eclipse Foundation, Inc. All Rights Reserved.     Privacy Policy | Terms of Use | Copyright Agent