Skip to content

Commit 4d896ea

Browse files
sushilshindesushilshinde
authored
Merge pull request #2378 from topcoder-platform/develop-from-master-23may
F2F for Language / Work and Education - Develop from master 23may
2 parents 676c79d + 8322311 commit 4d896ea

File tree

5 files changed

+109
-16
lines changed

5 files changed

+109
-16
lines changed

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

Lines changed: 49 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@
99
import React from 'react';
1010
import PT from 'prop-types';
1111
import _ from 'lodash';
12+
import moment from 'moment';
1213
import Select from 'components/Select';
1314
import ConsentComponent from 'components/Settings/ConsentComponent';
1415
import { PrimaryButton } from 'topcoder-react-ui-kit';
16+
import DatePicker from 'components/challenge-listing/Filters/DatePicker';
1517
import dropdowns from './dropdowns.json';
1618
import EducationList from './List';
1719

@@ -30,6 +32,7 @@ export default class Education extends ConsentComponent {
3032
this.onAddEducation = this.onAddEducation.bind(this);
3133
this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
3234
this.updatePredicate = this.updatePredicate.bind(this);
35+
this.onUpdateDate = this.onUpdateDate.bind(this);
3336

3437
const { userTraits } = props;
3538
this.state = {
@@ -138,7 +141,7 @@ export default class Education extends ConsentComponent {
138141

139142

140143
if (errorMessage.length > 0) {
141-
errorMessage = `${errorMessage}. ${dateError}`;
144+
errorMessage = `${errorMessage}. \n${dateError}`;
142145
} else if (dateError.length > 0) {
143146
errorMessage = dateError;
144147
invalid = dateInvalid;
@@ -152,6 +155,15 @@ export default class Education extends ConsentComponent {
152155
this.showConsent(this.onDeleteEducation.bind(this, indexNo));
153156
}
154157

158+
onUpdateDate(date, timePeriod) {
159+
if (date) {
160+
const { newEducation: oldEducation } = this.state;
161+
const newEducation = { ...oldEducation };
162+
newEducation[timePeriod] = date;
163+
this.setState({ newEducation });
164+
}
165+
}
166+
155167
/**
156168
* Delete education by index
157169
* @param indexNo the education index no
@@ -398,7 +410,15 @@ export default class Education extends ConsentComponent {
398410
</div>
399411
<div styleName="field col-2">
400412
<span styleName="text-required">* Required</span>
401-
<input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodFrom} required />
413+
<DatePicker
414+
readOnly
415+
numberOfMonths={1}
416+
isOutsideRange={moment()}
417+
date={newEducation.timePeriodFrom}
418+
id="date-from1"
419+
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
420+
placeholder="dd/mm/yyyy"
421+
/>
402422
</div>
403423
</div>
404424
<div styleName="row">
@@ -410,7 +430,15 @@ export default class Education extends ConsentComponent {
410430
</div>
411431
<div styleName="field col-2">
412432
<span styleName="text-required">* Required</span>
413-
<input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodTo} required />
433+
<DatePicker
434+
readOnly
435+
numberOfMonths={1}
436+
isOutsideRange={moment()}
437+
date={newEducation.timePeriodTo}
438+
id="date-to1"
439+
onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
440+
placeholder="dd/mm/yyyy"
441+
/>
414442
</div>
415443
</div>
416444
<div styleName="row">
@@ -493,14 +521,30 @@ export default class Education extends ConsentComponent {
493521
From
494522
<input type="hidden" />
495523
</label>
496-
<input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodFrom} required />
524+
<DatePicker
525+
readOnly
526+
numberOfMonths={1}
527+
isOutsideRange={moment()}
528+
date={newEducation.timePeriodFrom}
529+
id="date-from2"
530+
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
531+
placeholder="dd/mm/yyyy"
532+
/>
497533
</div>
498534
<div styleName="field col-date">
499535
<label htmlFor="timePeriodTo">
500536
To
501537
<input type="hidden" />
502538
</label>
503-
<input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newEducation.timePeriodTo} required />
539+
<DatePicker
540+
readOnly
541+
numberOfMonths={1}
542+
isOutsideRange={moment()}
543+
date={newEducation.timePeriodTo}
544+
id="date-to2"
545+
onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
546+
placeholder="dd/mm/yyyy"
547+
/>
504548
</div>
505549
<div styleName="field col-checkbox">
506550
<div styleName="tc-checkbox">

‎src/shared/components/Settings/Profile/Education/styles.scss

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,8 +70,10 @@ $checkbox-bg-selected: $tc-dark-blue;
7070
background-color: $tc-red-10;
7171
color: $tc-red-110;
7272
font-size: 15px;
73-
padding: 15px;
73+
line-height: 21px;
74+
padding: 12px 15px;
7475
margin-bottom: 15px;
76+
white-space: pre-line;
7577
}
7678
}
7779

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

Lines changed: 50 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@
99
import React from 'react';
1010
import PT from 'prop-types';
1111
import _ from 'lodash';
12+
import moment from 'moment';
1213
import ConsentComponent from 'components/Settings/ConsentComponent';
1314
import { PrimaryButton } from 'topcoder-react-ui-kit';
15+
import DatePicker from 'components/challenge-listing/Filters/DatePicker';
1416
import WorkList from './List';
1517

1618
import './styles.scss';
@@ -27,6 +29,8 @@ export default class Work extends ConsentComponent {
2729
this.onAddWork = this.onAddWork.bind(this);
2830
this.loadPersonalizationTrait = this.loadPersonalizationTrait.bind(this);
2931
this.updatePredicate = this.updatePredicate.bind(this);
32+
this.onUpdateDate = this.onUpdateDate.bind(this);
33+
3034
const { userTraits } = props;
3135
this.state = {
3236
formInvalid: false,
@@ -153,7 +157,7 @@ export default class Work extends ConsentComponent {
153157

154158

155159
if (errorMessage.length > 0) {
156-
errorMessage = `${errorMessage}. ${dateError}`;
160+
errorMessage = `${errorMessage}. \n${dateError}`;
157161
} else if (dateError.length > 0) {
158162
errorMessage = dateError;
159163
invalid = dateInvalid;
@@ -167,6 +171,15 @@ export default class Work extends ConsentComponent {
167171
this.showConsent(this.onDeleteWork.bind(this, indexNo));
168172
}
169173

174+
onUpdateDate(date, timePeriod) {
175+
if (date) {
176+
const { newWork: oldWork } = this.state;
177+
const newWork = { ...oldWork };
178+
newWork[timePeriod] = date;
179+
this.setState({ newWork });
180+
}
181+
}
182+
170183
/**
171184
* Delete work by index
172185
* @param indexNo the work index no
@@ -376,7 +389,15 @@ export default class Work extends ConsentComponent {
376389
</div>
377390
<div styleName="field col-2">
378391
<span styleName="text-required">* Required</span>
379-
<input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodFrom} required />
392+
<DatePicker
393+
readOnly
394+
numberOfMonths={1}
395+
isOutsideRange={moment()}
396+
date={newWork.timePeriodFrom}
397+
id="date-from1"
398+
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
399+
placeholder="dd/mm/yyyy"
400+
/>
380401
</div>
381402
</div>
382403
<div styleName="row">
@@ -388,7 +409,15 @@ export default class Work extends ConsentComponent {
388409
</div>
389410
<div styleName="field col-2">
390411
<span styleName="text-required">* Required</span>
391-
<input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodTo} required />
412+
<DatePicker
413+
readOnly
414+
numberOfMonths={1}
415+
isOutsideRange={moment()}
416+
date={newWork.timePeriodTo}
417+
id="date-to1"
418+
onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
419+
placeholder="dd/mm/yyyy"
420+
/>
392421
</div>
393422
</div>
394423
</form>
@@ -444,14 +473,30 @@ export default class Work extends ConsentComponent {
444473
From
445474
<input type="hidden" />
446475
</label>
447-
<input id="timePeriodFrom" styleName="date-input" name="timePeriodFrom" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodFrom} required />
476+
<DatePicker
477+
readOnly
478+
numberOfMonths={1}
479+
isOutsideRange={moment()}
480+
date={newWork.timePeriodFrom}
481+
id="date-from2"
482+
onDateChange={date => this.onUpdateDate(date, 'timePeriodFrom')}
483+
placeholder="dd/mm/yyyy"
484+
/>
448485
</div>
449486
<div styleName="field col-date">
450487
<label htmlFor="timePeriodTo">
451488
To
452489
<input type="hidden" />
453490
</label>
454-
<input id="timePeriodTo" styleName="date-input" name="timePeriodTo" type="date" onChange={this.onUpdateInput} value={newWork.timePeriodTo} required />
491+
<DatePicker
492+
readOnly
493+
numberOfMonths={1}
494+
isOutsideRange={moment()}
495+
date={newWork.timePeriodTo}
496+
id="date-to2"
497+
onDateChange={date => this.onUpdateDate(date, 'timePeriodTo')}
498+
placeholder="dd/mm/yyyy"
499+
/>
455500
</div>
456501
</div>
457502
</form>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,10 @@ $checkbox-bg-selected: $tc-dark-blue;
6666
background-color: $tc-red-10;
6767
color: $tc-red-110;
6868
font-size: 15px;
69-
padding: 15px;
7069
margin-bottom: 15px;
70+
line-height: 21px;
71+
padding: 12px 15px;
72+
white-space: pre-line;
7173
}
7274
}
7375

‎src/shared/reducers/page/ui/settings.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import settingsActions from 'actions/page/ui/settings';
99
const TABS = {
1010
PROFILE: {
1111
BASIC: 'basic info',
12-
// LANGUAGE: 'language',
13-
SKILL: 'skills',
14-
// EDUCATION: 'education',
15-
// WORK: 'work',
12+
LANGUAGE: 'language',
13+
EDUCATION: 'education',
14+
WORK: 'work',
1615
// ORGANIZATION: 'organization',
16+
SKILL: 'skills',
1717
HOBBY: 'hobbies',
1818
COMMUNITY: 'communities',
1919
},

0 commit comments

Comments
 (0)