From d978cfc7ee0a34b91f46e26d9580f4b502fe2573 Mon Sep 17 00:00:00 2001 From: Huan Li Date: Fri, 14 Jun 2019 11:41:42 +0800 Subject: [PATCH 1/2] Fix issue of Topcoder Member Profile UI Fixes and Enhancements - Part 2 --- .../Profile/Education/List/Item/index.jsx | 57 ++++++-- .../Settings/Profile/Education/index.jsx | 89 +++++++------ .../Settings/Profile/Hobby/index.jsx | 2 +- .../Settings/Profile/Language/index.jsx | 2 +- .../Settings/Profile/Skills/index.jsx | 4 +- .../Settings/Profile/Work/List/Item/index.jsx | 18 ++- .../Profile/Work/List/Item/styles.scss | 3 +- .../Settings/Profile/Work/index.jsx | 125 +++++++++++------- .../Settings/Profile/Work/styles.scss | 39 ++++-- .../Settings/Tools/Devices/index.jsx | 2 +- .../Settings/Tools/ServiceProviders/index.jsx | 2 +- .../Settings/Tools/Software/index.jsx | 2 +- .../Settings/Tools/Subscriptions/index.jsx | 2 +- 13 files changed, 228 insertions(+), 119 deletions(-) diff --git a/src/shared/components/Settings/Profile/Education/List/Item/index.jsx b/src/shared/components/Settings/Profile/Education/List/Item/index.jsx index 2064979138..fc8415e89d 100644 --- a/src/shared/components/Settings/Profile/Education/List/Item/index.jsx +++ b/src/shared/components/Settings/Profile/Education/List/Item/index.jsx @@ -32,6 +32,51 @@ export default function Item(props) { return true; }; + const getDate = () => { + let start = ''; + if (!_.isEmpty(education.timePeriodFrom)) { + start = moment(education.timePeriodFrom).format('YYYY'); + } + let end = ''; + if (!_.isEmpty(education.timePeriodTo)) { + end = moment(education.timePeriodTo).format('YYYY'); + } + + if (_.isEmpty(start) && _.isEmpty(end)) { + return ''; + } + + if (!_.isEmpty(start) && !_.isEmpty(end)) { + return `${start} - ${end} `; + } + + if (!_.isEmpty(start) && _.isEmpty(end)) { + return `${start} `; + } + + if (_.isEmpty(start) && !_.isEmpty(end)) { + return `${end} `; + } + + return ''; + }; + + const getGraduated = () => { + const date = getDate(); + if (!_.isEmpty(date)) { + if (education.graduated) { + return '| Graduated'; + } + + return ''; + } + + if (education.graduated) { + return 'Graduated'; + } + return ''; + }; + return (
@@ -47,20 +92,14 @@ export default function Item(props) {
{ - `${!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && !education.graduated ? `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}` : ''}` - } - { - _.isEmpty(education.timePeriodFrom) && _.isEmpty(education.timePeriodTo) && `${education.graduated ? 'Graduated' : ''}` - } - { - !_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && education.graduated && `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')} | Graduated` + `${getDate()}${getGraduated()}` }
{ - !_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && ( + !_.isEmpty(getDate()) && (

- {`${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}`} + {`${getDate()}`}

) } diff --git a/src/shared/components/Settings/Profile/Education/index.jsx b/src/shared/components/Settings/Profile/Education/index.jsx index a8bdc221e6..1087f47f77 100644 --- a/src/shared/components/Settings/Profile/Education/index.jsx +++ b/src/shared/components/Settings/Profile/Education/index.jsx @@ -91,43 +91,41 @@ export default class Education extends ConsentComponent { */ onCheckFormValue(newEducation) { let invalid = false; - let haveDate = false; const currentDate = new Date().setHours(0, 0, 0, 0); if (!_.trim(newEducation.schoolCollegeName).length) { invalid = true; } - - if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { + if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { + // If enter End Date, the other becomes mandatory. + // Not as per requirement, both are optional + invalid = true; + } else if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) { const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0); - const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0); - if (fromDate > toDate) { - haveDate = true; + if (fromDate > currentDate) { + invalid = true; // Start Date should be in past or current } + } else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { + const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0); + const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0); if (fromDate > currentDate) { - haveDate = true; + invalid = true; // Start Date should be in past or current } - if ((toDate > currentDate) && newEducation.graduated) { - haveDate = true; - } - } - - if (!haveDate - && !(_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo))) { - if (!_.trim(newEducation.timePeriodFrom).length) { + if (fromDate >= toDate) { // Start Date should be before End Date invalid = true; } - if (!_.trim(newEducation.timePeriodTo).length) { - invalid = true; + if (newEducation.graduated) { + if (toDate > currentDate) { + invalid = true; // End Date should be in past or current + } } } - this.setState({ formInvalid: invalid }); return invalid; } @@ -140,26 +138,32 @@ export default class Education extends ConsentComponent { message: '', }; - if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { - let fromDate = new Date(newEducation.timePeriodFrom); - fromDate = fromDate.setHours(0, 0, 0, 0); - let toDate = new Date(newEducation.timePeriodTo); - toDate = toDate.setHours(0, 0, 0, 0); - if (fromDate > toDate) { + if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { + // If enter End Date, the other becomes mandatory. + // Not as per requirement, both are optional + result.invalid = true; + result.message = 'Start Date cannot be empty'; + } else if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) { + const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0); + + if (fromDate > currentDate) { result.invalid = true; - result.message = 'Start Date should be before End Date'; + result.message = 'Start Date should be in past or current'; } + } else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { + const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0); + const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0); if (fromDate > currentDate) { result.invalid = true; - result.message = result.message.length > 0 ? `${result.message} and in past or current` : 'Start Date should be in past or current'; + result.message = 'Start Date should be in past or current'; } - } - if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { - result.invalid = true; - result.message = 'Due to End Date has date, Start Date should be input'; + if (fromDate >= toDate) { + result.invalid = true; + result.message = 'Start Date should be before End Date'; + } } return result; @@ -176,17 +180,12 @@ export default class Education extends ConsentComponent { if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) { const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0); - if ((toDate > currentDate) && newEducation.graduated) { + if (newEducation.graduated && (toDate > currentDate)) { result.invalid = true; - result.message = 'End Date (or expected) should be in past or current'; + result.message = 'End Date should be in past or current'; } } - if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) { - result.invalid = true; - result.message = 'Due to Start Date has date, End Date should be input'; - } - return result; } @@ -235,6 +234,7 @@ export default class Education extends ConsentComponent { showConfirmation: false, indexNo: null, inputChanged: false, + isEdit: false, }); } @@ -343,9 +343,6 @@ export default class Education extends ConsentComponent { newEducation[e.target.name] = e.target.value; } else { newEducation[e.target.name] = e.target.checked; - if (e.target.checked) { - newEducation.timePeriodTo = ''; - } } this.setState({ newEducation, inputChanged: true }); @@ -507,13 +504,18 @@ export default class Education extends ConsentComponent {
-
+
+ { + !_.isEmpty(newEducation.timePeriodTo) && ( + * Required + ) + } 0) { - const newHobbyTrait = { ...hobbyTrait }; + const newHobbyTrait = _.cloneDeep(hobbyTrait); if (isEdit) { newHobbyTrait.traits.data.splice(indexNo, 1); } diff --git a/src/shared/components/Settings/Profile/Language/index.jsx b/src/shared/components/Settings/Profile/Language/index.jsx index 251b3cb438..3af900c43e 100644 --- a/src/shared/components/Settings/Profile/Language/index.jsx +++ b/src/shared/components/Settings/Profile/Language/index.jsx @@ -206,7 +206,7 @@ export default class Language extends ConsentComponent { delete language.writtenLevel; } if (languageTrait.traits && languageTrait.traits.data.length > 0) { - const newLanguageTrait = { ...languageTrait }; + const newLanguageTrait = _.cloneDeep(languageTrait); if (isEdit) { newLanguageTrait.traits.data.splice(indexNo, 1); diff --git a/src/shared/components/Settings/Profile/Skills/index.jsx b/src/shared/components/Settings/Profile/Skills/index.jsx index 9a3a22ee97..49f2ebdff2 100644 --- a/src/shared/components/Settings/Profile/Skills/index.jsx +++ b/src/shared/components/Settings/Profile/Skills/index.jsx @@ -93,7 +93,7 @@ export default class Skills extends ConsentComponent { totalPage: 0, isMobileView: false, screenSM: 767, - deleteSKill: null, + deleteSkill: null, deleteSelector: null, showConfirmation: false, inputChanged: false, @@ -401,7 +401,7 @@ export default class Skills extends ConsentComponent { newSkill[category] = result.length > 0 ? result.slice() : []; deleteUserSkill(handle, skill, tokenV3); this.setState({ - deleteSKill: null, + deleteSkill: null, deleteSelector: null, showConfirmation: false, inputChanged: false, diff --git a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx b/src/shared/components/Settings/Profile/Work/List/Item/index.jsx index f47a37da54..f6a2a14a99 100644 --- a/src/shared/components/Settings/Profile/Work/List/Item/index.jsx +++ b/src/shared/components/Settings/Profile/Work/List/Item/index.jsx @@ -25,7 +25,7 @@ export default function Item(props) { const hasSecondLine = () => { if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo) - && _.isEmpty(work.position)) { + && _.isEmpty(work.position) && !work.working) { return false; } @@ -43,15 +43,27 @@ export default function Item(props) { { `${work.company}${_.isEmpty(work.industry) ? '' : ` | ${work.industry}`}${_.isEmpty(work.cityTown) ? '' : ` | ${work.cityTown}`}` }
- { `${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ''}${!_.isEmpty(work.position) && (!_.isEmpty(work.timePeriodTo) || !_.isEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}${work.working ? ' Current' : ''}` } + { `${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ''}${!_.isEmpty(work.position) && (!_.isEmpty(work.timePeriodTo) || !_.isEmpty(work.timePeriodFrom)) ? ' | ' : ''}${!_.isEmpty(work.position) ? `${work.position}` : ''}` }
+ { + work.working && ( +
+ Current +
+ ) + }

{`${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ''}`}

- {`${!_.isEmpty(work.position) ? `${work.position}` : ''}${work.working ? ' Current' : ''}`} + {`${!_.isEmpty(work.position) ? `${work.position}` : ''}`}

+ { + work.working && ( +

Current

+ ) + }
diff --git a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss index e49b5a910a..d419082362 100644 --- a/src/shared/components/Settings/Profile/Work/List/Item/styles.scss +++ b/src/shared/components/Settings/Profile/Work/List/Item/styles.scss @@ -58,7 +58,8 @@ } } -.parameter-second-line { +.parameter-second-line, +.parameter-third-line { color: $tc-gray-50; font-weight: 400; word-break: break-all; diff --git a/src/shared/components/Settings/Profile/Work/index.jsx b/src/shared/components/Settings/Profile/Work/index.jsx index b6e3dda8da..9361846de9 100644 --- a/src/shared/components/Settings/Profile/Work/index.jsx +++ b/src/shared/components/Settings/Profile/Work/index.jsx @@ -108,45 +108,52 @@ export default class Work extends ConsentComponent { */ onCheckFormValue(newWork) { let invalid = false; - let haveDate = false; const currentDate = new Date().setHours(0, 0, 0, 0); if (!_.trim(newWork.company).length) { invalid = true; } + if (newWork.working) { + if (!_.isEmpty(newWork.timePeriodTo)) { + invalid = true; // timePeriodTo should be null + } - if (!_.isEmpty(newWork.timePeriodFrom) && !_.isEmpty(newWork.timePeriodTo)) { - const fromDate = new Date(newWork.timePeriodFrom).setHours(0, 0, 0, 0); - const toDate = new Date(newWork.timePeriodTo).setHours(0, 0, 0, 0); - haveDate = true; + if (!_.isEmpty(newWork.timePeriodFrom)) { + const fromDate = new Date(newWork.timePeriodFrom).setHours(0, 0, 0, 0); - if (fromDate > currentDate) { - invalid = true; + if (fromDate > currentDate) { + invalid = true; // Start Date should be in past or current + } } - - if (!newWork.working && toDate > currentDate) { + } else if (!newWork.working) { + if (_.isEmpty(newWork.timePeriodFrom) && !_.isEmpty(newWork.timePeriodTo)) { + // If enter End Date, the other becomes mandatory. + // Not as per requirement, both are optional invalid = true; } - } - if (!haveDate && !(!_.isEmpty(newWork.timePeriodFrom) && !_.isEmpty(newWork.timePeriodTo))) { if (!_.isEmpty(newWork.timePeriodFrom)) { const fromDate = new Date(newWork.timePeriodFrom).setHours(0, 0, 0, 0); - if (fromDate > currentDate && newWork.working) { - invalid = true; + + if (fromDate > currentDate) { + invalid = true; // Start Date should be in past or current } if (!_.isEmpty(newWork.timePeriodTo)) { const toDate = new Date(newWork.timePeriodTo).setHours(0, 0, 0, 0); - if (fromDate > toDate) { - invalid = true; - } - if (toDate > currentDate && !newWork.working) { - invalid = true; + if (fromDate >= toDate) { + invalid = true; // Start Date should be before End Date } } } + + if (!_.isEmpty(newWork.timePeriodTo)) { + const toDate = new Date(newWork.timePeriodTo).setHours(0, 0, 0, 0); + if (toDate > currentDate) { + invalid = true; // End Date should be in past or current + } + } } this.setState({ formInvalid: invalid }); @@ -161,33 +168,52 @@ export default class Work extends ConsentComponent { message: '', }; - if (newWork.working && !_.isEmpty(newWork.timePeriodFrom)) { - const fromDate = new Date(newWork.timePeriodFrom).setHours(0, 0, 0, 0); - if (fromDate > currentDate) { + if (newWork.working) { + // if (!_.isEmpty(newWork.timePeriodTo)) { + // result.invalid = true; + // result.message = 'End Date should be null'; + // } + + if (!_.isEmpty(newWork.timePeriodFrom)) { + const fromDate = new Date(newWork.timePeriodFrom).setHours(0, 0, 0, 0); + + if (fromDate > currentDate) { + result.invalid = true; + result.message = 'Start Date should be in past or current'; + } + } + } else if (!newWork.working) { + if (_.isEmpty(newWork.timePeriodFrom) && !_.isEmpty(newWork.timePeriodTo)) { + // If enter End Date, the other becomes mandatory. + // Not as per requirement, both are optional result.invalid = true; - result.message = 'Start Date should be in past or current'; + result.message = 'Start Date cannot be empty'; } - } - if (!newWork.working) { - if (!_.isEmpty(newWork.timePeriodFrom) && !_.isEmpty(newWork.timePeriodTo)) { - let fromDate = new Date(newWork.timePeriodFrom); - fromDate = fromDate.setHours(0, 0, 0, 0); - let toDate = new Date(newWork.timePeriodTo); - toDate = toDate.setHours(0, 0, 0, 0); + if (!_.isEmpty(newWork.timePeriodFrom)) { + const fromDate = new Date(newWork.timePeriodFrom).setHours(0, 0, 0, 0); - if (fromDate >= toDate) { + if (fromDate > currentDate) { result.invalid = true; - result.message = 'Start Date should be before End Date'; + result.message = 'Start Date should be in past or current'; + } + + if (!_.isEmpty(newWork.timePeriodTo)) { + const toDate = new Date(newWork.timePeriodTo).setHours(0, 0, 0, 0); + if (fromDate >= toDate) { + result.invalid = true; + result.message = 'Start Date should be before End Date'; + } } } - } - if (_.isEmpty(newWork.timePeriodFrom) && !_.isEmpty(newWork.timePeriodTo)) { - result.invalid = true; - result.message = 'Due to End Date has date, Start Date should be input'; + // if (!_.isEmpty(newWork.timePeriodTo)) { + // const toDate = new Date(newWork.timePeriodTo).setHours(0, 0, 0, 0); + // if (toDate > currentDate) { + // invalid = true; // End Date should be in past or current + // } + // } } - return result; } @@ -199,21 +225,18 @@ export default class Work extends ConsentComponent { message: '', }; - if (!newWork.working && !_.isEmpty(newWork.timePeriodTo)) { + if (newWork.working) { + if (!_.isEmpty(newWork.timePeriodTo)) { + result.invalid = true; + result.message = 'End Date should be null'; + } + } else if (!newWork.working && !_.isEmpty(newWork.timePeriodTo)) { const toDate = new Date(newWork.timePeriodTo).setHours(0, 0, 0, 0); - if (toDate > currentDate) { result.invalid = true; result.message = 'End Date should be in past or current'; } } - - if (!newWork.working && !_.isEmpty(newWork.timePeriodFrom) && _.isEmpty(newWork.timePeriodTo)) { - result.invalid = true; - result.message = 'Due to Start Date has date, End Date should be input'; - } - - return result; } @@ -326,7 +349,7 @@ export default class Work extends ConsentComponent { } if (workTrait.traits && workTrait.traits.data.length > 0) { - const newWorkTrait = { ...workTrait }; + const newWorkTrait = _.cloneDeep(workTrait); if (isEdit) { newWorkTrait.traits.data.splice(indexNo, 1); } @@ -532,6 +555,11 @@ export default class Work extends ConsentComponent {
+ { + !_.isEmpty(newWork.timePeriodTo) && !newWork.working && ( + * Required + ) + } 0) { - const newDeviceTrait = { ...deviceTrait }; + const newDeviceTrait = _.cloneDeep(deviceTrait); if (isEdit) { newDeviceTrait.traits.data.splice(indexNo, 1); } diff --git a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx index 93af12cbf1..d32551dbdd 100644 --- a/src/shared/components/Settings/Tools/ServiceProviders/index.jsx +++ b/src/shared/components/Settings/Tools/ServiceProviders/index.jsx @@ -182,7 +182,7 @@ export default class ServiceProviders extends ConsentComponent { } = this.props; const { serviceProviderTrait } = this.state; if (serviceProviderTrait.traits && serviceProviderTrait.traits.data.length > 0) { - const newServiceProviderTrait = { ...serviceProviderTrait }; + const newServiceProviderTrait = _.cloneDeep(serviceProviderTrait); if (isEdit) { newServiceProviderTrait.traits.data.splice(indexNo, 1); } diff --git a/src/shared/components/Settings/Tools/Software/index.jsx b/src/shared/components/Settings/Tools/Software/index.jsx index 7a270f41da..646e939495 100644 --- a/src/shared/components/Settings/Tools/Software/index.jsx +++ b/src/shared/components/Settings/Tools/Software/index.jsx @@ -182,7 +182,7 @@ export default class Software extends ConsentComponent { } = this.props; const { softwareTrait } = this.state; if (softwareTrait.traits && softwareTrait.traits.data.length > 0) { - const newSoftwareTrait = { ...softwareTrait }; + const newSoftwareTrait = _.cloneDeep(softwareTrait); if (isEdit) { newSoftwareTrait.traits.data.splice(indexNo, 1); } diff --git a/src/shared/components/Settings/Tools/Subscriptions/index.jsx b/src/shared/components/Settings/Tools/Subscriptions/index.jsx index a31a9b7a3b..2c713cec54 100644 --- a/src/shared/components/Settings/Tools/Subscriptions/index.jsx +++ b/src/shared/components/Settings/Tools/Subscriptions/index.jsx @@ -172,7 +172,7 @@ export default class Subscription extends ConsentComponent { } = this.props; const { subscriptionTrait } = this.state; if (subscriptionTrait.traits && subscriptionTrait.traits.data.length > 0) { - const newSubscriptionTrait = { ...subscriptionTrait }; + const newSubscriptionTrait = _.cloneDeep(subscriptionTrait); if (isEdit) { newSubscriptionTrait.traits.data.splice(indexNo, 1); } From 0981144ad2d7bacf70c6c230f6cebfae4991a4a2 Mon Sep 17 00:00:00 2001 From: Huan Li Date: Fri, 14 Jun 2019 11:58:45 +0800 Subject: [PATCH 2/2] Fix issue of add education --- src/shared/components/Settings/Profile/Education/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/shared/components/Settings/Profile/Education/index.jsx b/src/shared/components/Settings/Profile/Education/index.jsx index 1087f47f77..4e6bcd967b 100644 --- a/src/shared/components/Settings/Profile/Education/index.jsx +++ b/src/shared/components/Settings/Profile/Education/index.jsx @@ -295,7 +295,7 @@ export default class Education extends ConsentComponent { } if (educationTrait.traits && educationTrait.traits.data.length > 0) { - const newEducationTrait = { ...educationTrait }; + const newEducationTrait = _.cloneDeep(educationTrait); if (isEdit) { newEducationTrait.traits.data.splice(indexNo, 1); }