Skip to content

Commit 5648af5

Browse files
codeMintercodeMinter
authored
Merge pull request #2622 from nauhil/feature-profile-enhancements
Fix issues of Topcoder Member Profile UI Fixes and Enhancements - Part 2
2 parents 23407c3 + 0981144 commit 5648af5

File tree

13 files changed

+229
-120
lines changed

13 files changed

+229
-120
lines changed

‎src/shared/components/Settings/Profile/Education/List/Item/index.jsx

+48-9
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,51 @@ export default function Item(props) {
3232
return true;
3333
};
3434

35+
const getDate = () => {
36+
let start = '';
37+
if (!_.isEmpty(education.timePeriodFrom)) {
38+
start = moment(education.timePeriodFrom).format('YYYY');
39+
}
40+
let end = '';
41+
if (!_.isEmpty(education.timePeriodTo)) {
42+
end = moment(education.timePeriodTo).format('YYYY');
43+
}
44+
45+
if (_.isEmpty(start) && _.isEmpty(end)) {
46+
return '';
47+
}
48+
49+
if (!_.isEmpty(start) && !_.isEmpty(end)) {
50+
return `${start} - ${end} `;
51+
}
52+
53+
if (!_.isEmpty(start) && _.isEmpty(end)) {
54+
return `${start} `;
55+
}
56+
57+
if (_.isEmpty(start) && !_.isEmpty(end)) {
58+
return `${end} `;
59+
}
60+
61+
return '';
62+
};
63+
64+
const getGraduated = () => {
65+
const date = getDate();
66+
if (!_.isEmpty(date)) {
67+
if (education.graduated) {
68+
return '| Graduated';
69+
}
70+
71+
return '';
72+
}
73+
74+
if (education.graduated) {
75+
return 'Graduated';
76+
}
77+
return '';
78+
};
79+
3580
return (
3681
<div styleName="container">
3782
<div styleName="education-info">
@@ -47,20 +92,14 @@ export default function Item(props) {
4792
<React.Fragment>
4893
<div styleName="parameter-second-line">
4994
{
50-
`${!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && !education.graduated ? `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}` : ''}`
51-
}
52-
{
53-
_.isEmpty(education.timePeriodFrom) && _.isEmpty(education.timePeriodTo) && `${education.graduated ? 'Graduated' : ''}`
54-
}
55-
{
56-
!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && education.graduated && `${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')} | Graduated`
95+
`${getDate()}${getGraduated()}`
5796
}
5897
</div>
5998
<div styleName="parameter-second-line-mobile">
6099
{
61-
!_.isEmpty(education.timePeriodFrom) && !_.isEmpty(education.timePeriodTo) && (
100+
!_.isEmpty(getDate()) && (
62101
<p>
63-
{`${moment(education.timePeriodFrom).format('YYYY')} - ${moment(education.timePeriodTo).format('YYYY')}`}
102+
{`${getDate()}`}
64103
</p>
65104
)
66105
}

‎src/shared/components/Settings/Profile/Education/index.jsx

+49-42
Original file line numberDiff line numberDiff line change
@@ -91,43 +91,41 @@ export default class Education extends ConsentComponent {
9191
*/
9292
onCheckFormValue(newEducation) {
9393
let invalid = false;
94-
let haveDate = false;
9594
const currentDate = new Date().setHours(0, 0, 0, 0);
9695

9796
if (!_.trim(newEducation.schoolCollegeName).length) {
9897
invalid = true;
9998
}
10099

101-
102-
if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
100+
if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
101+
// If enter End Date, the other becomes mandatory.
102+
// Not as per requirement, both are optional
103+
invalid = true;
104+
} else if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
103105
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
104-
const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
105106

106-
if (fromDate > toDate) {
107-
haveDate = true;
107+
if (fromDate > currentDate) {
108+
invalid = true; // Start Date should be in past or current
108109
}
110+
} else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
111+
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
112+
const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
109113

110114
if (fromDate > currentDate) {
111-
haveDate = true;
115+
invalid = true; // Start Date should be in past or current
112116
}
113117

114-
if ((toDate > currentDate) && newEducation.graduated) {
115-
haveDate = true;
116-
}
117-
}
118-
119-
if (!haveDate
120-
&& !(_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo))) {
121-
if (!_.trim(newEducation.timePeriodFrom).length) {
118+
if (fromDate >= toDate) { // Start Date should be before End Date
122119
invalid = true;
123120
}
124121

125-
if (!_.trim(newEducation.timePeriodTo).length) {
126-
invalid = true;
122+
if (newEducation.graduated) {
123+
if (toDate > currentDate) {
124+
invalid = true; // End Date should be in past or current
125+
}
127126
}
128127
}
129128

130-
131129
this.setState({ formInvalid: invalid });
132130
return invalid;
133131
}
@@ -140,26 +138,32 @@ export default class Education extends ConsentComponent {
140138
message: '',
141139
};
142140

143-
if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
144-
let fromDate = new Date(newEducation.timePeriodFrom);
145-
fromDate = fromDate.setHours(0, 0, 0, 0);
146-
let toDate = new Date(newEducation.timePeriodTo);
147-
toDate = toDate.setHours(0, 0, 0, 0);
148141

149-
if (fromDate > toDate) {
142+
if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
143+
// If enter End Date, the other becomes mandatory.
144+
// Not as per requirement, both are optional
145+
result.invalid = true;
146+
result.message = 'Start Date cannot be empty';
147+
} else if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
148+
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
149+
150+
if (fromDate > currentDate) {
150151
result.invalid = true;
151-
result.message = 'Start Date should be before End Date';
152+
result.message = 'Start Date should be in past or current';
152153
}
154+
} else if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
155+
const fromDate = new Date(newEducation.timePeriodFrom).setHours(0, 0, 0, 0);
156+
const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
153157

154158
if (fromDate > currentDate) {
155159
result.invalid = true;
156-
result.message = result.message.length > 0 ? `${result.message} and in past or current` : 'Start Date should be in past or current';
160+
result.message = 'Start Date should be in past or current';
157161
}
158-
}
159162

160-
if (_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
161-
result.invalid = true;
162-
result.message = 'Due to End Date has date, Start Date should be input';
163+
if (fromDate >= toDate) {
164+
result.invalid = true;
165+
result.message = 'Start Date should be before End Date';
166+
}
163167
}
164168

165169
return result;
@@ -176,17 +180,12 @@ export default class Education extends ConsentComponent {
176180
if (!_.isEmpty(newEducation.timePeriodFrom) && !_.isEmpty(newEducation.timePeriodTo)) {
177181
const toDate = new Date(newEducation.timePeriodTo).setHours(0, 0, 0, 0);
178182

179-
if ((toDate > currentDate) && newEducation.graduated) {
183+
if (newEducation.graduated && (toDate > currentDate)) {
180184
result.invalid = true;
181-
result.message = 'End Date (or expected) should be in past or current';
185+
result.message = 'End Date should be in past or current';
182186
}
183187
}
184188

185-
if (!_.isEmpty(newEducation.timePeriodFrom) && _.isEmpty(newEducation.timePeriodTo)) {
186-
result.invalid = true;
187-
result.message = 'Due to Start Date has date, End Date should be input';
188-
}
189-
190189
return result;
191190
}
192191

@@ -235,6 +234,7 @@ export default class Education extends ConsentComponent {
235234
showConfirmation: false,
236235
indexNo: null,
237236
inputChanged: false,
237+
isEdit: false,
238238
});
239239
}
240240

@@ -295,7 +295,7 @@ export default class Education extends ConsentComponent {
295295
}
296296

297297
if (educationTrait.traits && educationTrait.traits.data.length > 0) {
298-
const newEducationTrait = { ...educationTrait };
298+
const newEducationTrait = _.cloneDeep(educationTrait);
299299
if (isEdit) {
300300
newEducationTrait.traits.data.splice(indexNo, 1);
301301
}
@@ -343,9 +343,6 @@ export default class Education extends ConsentComponent {
343343
newEducation[e.target.name] = e.target.value;
344344
} else {
345345
newEducation[e.target.name] = e.target.checked;
346-
if (e.target.checked) {
347-
newEducation.timePeriodTo = '';
348-
}
349346
}
350347

351348
this.setState({ newEducation, inputChanged: true });
@@ -507,13 +504,18 @@ export default class Education extends ConsentComponent {
507504
</div>
508505
</div>
509506
<div styleName="row">
510-
<div styleName="field col-1-no-padding">
507+
<div styleName={`field ${_.isEmpty(newEducation.timePeriodTo) ? 'col-1-no-padding' : 'col-1'}`}>
511508
<label htmlFor="timePeriodFrom">
512509
Start Date
513510
<input type="hidden" />
514511
</label>
515512
</div>
516513
<div styleName="field col-2">
514+
{
515+
!_.isEmpty(newEducation.timePeriodTo) && (
516+
<span styleName="text-required">* Required</span>
517+
)
518+
}
517519
<DatePicker
518520
readOnly
519521
numberOfMonths={1}
@@ -650,6 +652,11 @@ export default class Education extends ConsentComponent {
650652
<div styleName="field col-date">
651653
<label htmlFor="timePeriodFrom">
652654
Start Date
655+
{
656+
!_.isEmpty(newEducation.timePeriodTo) && (
657+
<span styleName="text-required">* Required</span>
658+
)
659+
}
653660
<input type="hidden" />
654661
</label>
655662
<DatePicker

‎src/shared/components/Settings/Profile/Hobby/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ export default class Hobby extends ConsentComponent {
164164

165165
// save hobby
166166
if (hobbyTrait.traits && hobbyTrait.traits.data.length > 0) {
167-
const newHobbyTrait = { ...hobbyTrait };
167+
const newHobbyTrait = _.cloneDeep(hobbyTrait);
168168
if (isEdit) {
169169
newHobbyTrait.traits.data.splice(indexNo, 1);
170170
}

‎src/shared/components/Settings/Profile/Language/index.jsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -206,7 +206,7 @@ export default class Language extends ConsentComponent {
206206
delete language.writtenLevel;
207207
}
208208
if (languageTrait.traits && languageTrait.traits.data.length > 0) {
209-
const newLanguageTrait = { ...languageTrait };
209+
const newLanguageTrait = _.cloneDeep(languageTrait);
210210

211211
if (isEdit) {
212212
newLanguageTrait.traits.data.splice(indexNo, 1);

‎src/shared/components/Settings/Profile/Skills/index.jsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export default class Skills extends ConsentComponent {
9393
totalPage: 0,
9494
isMobileView: false,
9595
screenSM: 767,
96-
deleteSKill: null,
96+
deleteSkill: null,
9797
deleteSelector: null,
9898
showConfirmation: false,
9999
inputChanged: false,
@@ -401,7 +401,7 @@ export default class Skills extends ConsentComponent {
401401
newSkill[category] = result.length > 0 ? result.slice() : [];
402402
deleteUserSkill(handle, skill, tokenV3);
403403
this.setState({
404-
deleteSKill: null,
404+
deleteSkill: null,
405405
deleteSelector: null,
406406
showConfirmation: false,
407407
inputChanged: false,

‎src/shared/components/Settings/Profile/Work/List/Item/index.jsx

+15-3
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function Item(props) {
2525

2626
const hasSecondLine = () => {
2727
if (_.isEmpty(work.timePeriodFrom) && _.isEmpty(work.timePeriodTo)
28-
&& _.isEmpty(work.position)) {
28+
&& _.isEmpty(work.position) && !work.working) {
2929
return false;
3030
}
3131

@@ -43,15 +43,27 @@ export default function Item(props) {
4343
{ `${work.company}${_.isEmpty(work.industry) ? '' : ` | ${work.industry}`}${_.isEmpty(work.cityTown) ? '' : ` | ${work.cityTown}`}` }
4444
</div>
4545
<div styleName="parameter-second-line">
46-
{ `${!_.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' : ''}` }
46+
{ `${!_.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}` : ''}` }
4747
</div>
48+
{
49+
work.working && (
50+
<div styleName="parameter-second-line">
51+
Current
52+
</div>
53+
)
54+
}
4855
<div styleName="parameter-second-line-mobile">
4956
<p>
5057
{`${!_.isEmpty(work.timePeriodFrom) ? moment(work.timePeriodFrom).format('YYYY') : ''}${!_.isEmpty(work.timePeriodTo) ? ` - ${moment(work.timePeriodTo).format('YYYY')}` : ''}`}
5158
</p>
5259
<p>
53-
{`${!_.isEmpty(work.position) ? `${work.position}` : ''}${work.working ? ' Current' : ''}`}
60+
{`${!_.isEmpty(work.position) ? `${work.position}` : ''}`}
5461
</p>
62+
{
63+
work.working && (
64+
<p>Current</p>
65+
)
66+
}
5567
</div>
5668
</div>
5769
</div>

‎src/shared/components/Settings/Profile/Work/List/Item/styles.scss

+2-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,8 @@
5858
}
5959
}
6060

61-
.parameter-second-line {
61+
.parameter-second-line,
62+
.parameter-third-line {
6263
color: $tc-gray-50;
6364
font-weight: 400;
6465
word-break: break-all;

0 commit comments

Comments
 (0)