Skip to content

Commit 72d5703

Browse files
nsemetsnsemets
committed
fix(profile-settings): fixed profile settings
1 parent 4112bea commit 72d5703

17 files changed

Lines changed: 171 additions & 107 deletions

‎src/app/core/store/user/user.actions.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,25 +24,25 @@ export class UpdateUserSettings {
2424
export class UpdateProfileSettingsEmployment {
2525
static readonly type = '[Profile Settings] Update Employment';
2626

27-
constructor(public payload: { employment: Employment[] }) {}
27+
constructor(public payload: Employment[]) {}
2828
}
2929

3030
export class UpdateProfileSettingsEducation {
3131
static readonly type = '[Profile Settings] Update Education';
3232

33-
constructor(public payload: { education: Education[] }) {}
33+
constructor(public payload: Education[]) {}
3434
}
3535

3636
export class UpdateProfileSettingsSocialLinks {
3737
static readonly type = '[Profile Settings] Update Social Links';
3838

39-
constructor(public payload: { socialLinks: Partial<Social>[] }) {}
39+
constructor(public payload: Partial<Social>[]) {}
4040
}
4141

4242
export class UpdateProfileSettingsUser {
4343
static readonly type = '[Profile Settings] Update User';
4444

45-
constructor(public payload: { user: Partial<User> }) {}
45+
constructor(public payload: Partial<User>) {}
4646
}
4747

4848
export class SetUserAsModerator {

‎src/app/core/store/user/user.state.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export class UserState {
135135
return;
136136
}
137137

138-
const withoutNulls = payload.employment.map((item) => removeNullable(item));
138+
const withoutNulls = payload.map((item) => removeNullable(item));
139139

140140
return this.userService.updateUserProfile(userId, ProfileSettingsKey.Employment, withoutNulls).pipe(
141141
tap((user) => {
@@ -160,7 +160,7 @@ export class UserState {
160160
return;
161161
}
162162

163-
const withoutNulls = payload.education.map((item) => removeNullable(item));
163+
const withoutNulls = payload.map((item) => removeNullable(item));
164164

165165
return this.userService.updateUserProfile(userId, ProfileSettingsKey.Education, withoutNulls).pipe(
166166
tap((user) => {
@@ -185,7 +185,7 @@ export class UserState {
185185
return;
186186
}
187187

188-
const withoutNulls = UserMapper.toNamesRequest(removeNullable(payload.user));
188+
const withoutNulls = UserMapper.toNamesRequest(removeNullable(payload));
189189

190190
return this.userService.updateUserProfile(userId, ProfileSettingsKey.User, withoutNulls).pipe(
191191
tap((user) => {
@@ -212,7 +212,7 @@ export class UserState {
212212

213213
let social = {} as Partial<Social>;
214214

215-
payload.socialLinks.forEach((item) => {
215+
payload.forEach((item) => {
216216
social = {
217217
...social,
218218
...item,

‎src/app/features/settings/profile-settings/components/education-form/education-form.component.html‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,16 @@ <h2>
5252
[dateFormat]="dateFormat"
5353
[iconDisplay]="'input'"
5454
[showIcon]="true"
55+
view="month"
5556
[maxDate]="maxDate"
5657
[minDate]="minDate"
5758
></p-datepicker>
59+
60+
@if (startDateRequiredError) {
61+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
62+
{{ 'validation.required' | translate }}
63+
</p-message>
64+
}
5865
</div>
5966

6067
@if (!group().controls['ongoing'].value) {
@@ -68,10 +75,17 @@ <h2>
6875
formControlName="endDate"
6976
[dateFormat]="dateFormat"
7077
[iconDisplay]="'input'"
78+
view="month"
7179
[showIcon]="true"
7280
[maxDate]="maxDate"
7381
[minDate]="minDate"
7482
></p-datepicker>
83+
84+
@if (endDateRequiredError) {
85+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
86+
{{ 'validation.required' | translate }}
87+
</p-message>
88+
}
7589
</div>
7690
}
7791
</div>
@@ -91,7 +105,7 @@ <h2>
91105
</div>
92106

93107
@if (isDateError) {
94-
<p-message class="simple-variant flex" severity="error" variant="simple" size="small">
108+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
95109
{{ 'settings.profileSettings.endDateError' | translate }}
96110
</p-message>
97111
}

‎src/app/features/settings/profile-settings/components/education-form/education-form.component.ts‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,9 @@ import { DatePicker } from 'primeng/datepicker';
66
import { InputText } from 'primeng/inputtext';
77
import { Message } from 'primeng/message';
88

9-
import { filter } from 'rxjs';
10-
119
import { ChangeDetectionStrategy, Component, DestroyRef, inject, input, OnInit, output } from '@angular/core';
1210
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
13-
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
11+
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
1412

1513
import { TextInputComponent } from '@osf/shared/components';
1614
import { InputLimits } from '@osf/shared/constants';
@@ -28,7 +26,7 @@ export class EducationFormComponent implements OnInit {
2826
readonly maxDate = MAX_DATE;
2927
readonly minDate = MIN_DATE;
3028
readonly institutionMaxLength = InputLimits.fullName.maxLength;
31-
readonly dateFormat = 'mm/dd/yy';
29+
readonly dateFormat = 'mm/yy';
3230

3331
private readonly destroyRef = inject(DestroyRef);
3432

@@ -46,12 +44,30 @@ export class EducationFormComponent implements OnInit {
4644
return form.errors && form.errors['dateRangeInvalid'];
4745
}
4846

47+
get startDateRequiredError() {
48+
const control = this.group().controls['startDate'];
49+
return control.invalid && control.errors?.['required'] && (control.touched || control.dirty);
50+
}
51+
52+
get endDateRequiredError() {
53+
const control = this.group().controls['endDate'];
54+
return control.invalid && control.errors?.['required'] && (control.touched || control.dirty);
55+
}
56+
4957
ngOnInit() {
5058
this.group()
51-
.controls['ongoing'].valueChanges.pipe(
52-
filter((res) => !!res),
53-
takeUntilDestroyed(this.destroyRef)
54-
)
55-
.subscribe(() => this.group().controls['endDate'].setValue(null));
59+
.controls['ongoing'].valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
60+
.subscribe((ongoing) => {
61+
const endDateControl = this.group().controls['endDate'];
62+
63+
if (ongoing) {
64+
endDateControl.setValue(null);
65+
endDateControl.clearValidators();
66+
} else {
67+
endDateControl.setValidators([Validators.required]);
68+
}
69+
70+
endDateControl.updateValueAndValidity();
71+
});
5672
}
5773
}

‎src/app/features/settings/profile-settings/components/education/education.component.spec.ts‎

Lines changed: 22 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -125,30 +125,28 @@ describe('EducationComponent', () => {
125125
component.saveEducation();
126126

127127
expect(mockStore.dispatch).toHaveBeenCalledWith(
128-
new UpdateProfileSettingsEducation({
129-
education: [
130-
{
131-
institution: 'Test University',
132-
department: 'Engineering',
133-
degree: 'Bachelor',
134-
startYear: 2020,
135-
startMonth: 0,
136-
endYear: 2024,
137-
endMonth: 6,
138-
ongoing: false,
139-
},
140-
{
141-
institution: 'Advanced University',
142-
department: 'Software Engineering',
143-
degree: 'Master of Science',
144-
startYear: 2020,
145-
startMonth: 8,
146-
endYear: null,
147-
endMonth: null,
148-
ongoing: false,
149-
},
150-
],
151-
})
128+
new UpdateProfileSettingsEducation([
129+
{
130+
institution: 'Test University',
131+
department: 'Engineering',
132+
degree: 'Bachelor',
133+
startYear: 2020,
134+
startMonth: 0,
135+
endYear: 2024,
136+
endMonth: 6,
137+
ongoing: false,
138+
},
139+
{
140+
institution: 'Advanced University',
141+
department: 'Software Engineering',
142+
degree: 'Master of Science',
143+
startYear: 2020,
144+
startMonth: 8,
145+
endYear: null,
146+
endMonth: null,
147+
ongoing: false,
148+
},
149+
])
152150
);
153151
});
154152
});

‎src/app/features/settings/profile-settings/components/education/education.component.ts‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
inject,
1515
} from '@angular/core';
1616
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
17-
import { FormArray, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
17+
import { FormArray, FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
1818

1919
import { UpdateProfileSettingsEducation, UserSelectors } from '@osf/core/store/user';
2020
import { CustomValidators } from '@osf/shared/helpers';
@@ -96,7 +96,7 @@ export class EducationComponent {
9696
this.loaderService.show();
9797

9898
this.actions
99-
.updateProfileSettingsEducation({ education: formattedEducation })
99+
.updateProfileSettingsEducation(formattedEducation)
100100
.pipe(takeUntilDestroyed(this.destroyRef))
101101
.subscribe({
102102
next: () => {
@@ -132,16 +132,19 @@ export class EducationComponent {
132132
}
133133

134134
private createEducationFormGroup(education?: Partial<EducationForm>): FormGroup {
135+
const isOngoing = education?.ongoing ?? false;
136+
const endDateValidators = isOngoing ? [] : [Validators.required];
137+
135138
return this.fb.group(
136139
{
137140
institution: [education?.institution ?? '', CustomValidators.requiredTrimmed()],
138141
department: [education?.department ?? ''],
139142
degree: [education?.degree ?? ''],
140-
startDate: [education?.startDate ?? null],
141-
endDate: [education?.endDate ?? null],
142-
ongoing: [education?.ongoing ?? false],
143+
startDate: [education?.startDate ?? null, Validators.required],
144+
endDate: [education?.endDate ?? null, endDateValidators],
145+
ongoing: [isOngoing],
143146
},
144-
{ validators: CustomValidators.dateRangeValidator }
147+
{ validators: CustomValidators.monthYearRangeValidator }
145148
);
146149
}
147150

‎src/app/features/settings/profile-settings/components/employment-form/employment-form.component.html‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ <h2>
99
[label]="'common.buttons.remove' | translate"
1010
severity="danger"
1111
variant="text"
12-
(click)="remove.emit()"
12+
(onClick)="remove.emit()"
1313
/>
1414
}
1515
</div>
@@ -33,11 +33,11 @@ <h2>
3333
</div>
3434

3535
<div class="w-full lg:w-6">
36-
<label for="institution-{{ index() }}" class="mb-1">
37-
{{ 'settings.profileSettings.employment.institution' | translate }}
38-
</label>
39-
40-
<input pInputText [id]="'institution-' + index()" class="w-full" formControlName="institution" />
36+
<osf-text-input
37+
[control]="institutionControl"
38+
[label]="'settings.profileSettings.employment.institution'"
39+
[maxLength]="institutionMaxLength"
40+
></osf-text-input>
4141
</div>
4242
</div>
4343

@@ -53,10 +53,17 @@ <h2>
5353
formControlName="startDate"
5454
[dateFormat]="dateFormat"
5555
[iconDisplay]="'input'"
56+
view="month"
5657
[showIcon]="true"
5758
[maxDate]="maxDate"
5859
[minDate]="minDate"
5960
></p-datepicker>
61+
62+
@if (startDateRequiredError) {
63+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
64+
{{ 'validation.required' | translate }}
65+
</p-message>
66+
}
6067
</div>
6168

6269
@if (!group().controls['ongoing'].value) {
@@ -70,10 +77,17 @@ <h2>
7077
formControlName="endDate"
7178
[dateFormat]="dateFormat"
7279
[iconDisplay]="'input'"
80+
view="month"
7381
[showIcon]="true"
7482
[maxDate]="maxDate"
7583
[minDate]="minDate"
7684
></p-datepicker>
85+
86+
@if (endDateRequiredError) {
87+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
88+
{{ 'validation.required' | translate }}
89+
</p-message>
90+
}
7791
</div>
7892
}
7993
</div>
@@ -93,7 +107,7 @@ <h2>
93107
</div>
94108

95109
@if (isDateError) {
96-
<p-message class="simple-variant flex" severity="error" variant="simple" size="small">
110+
<p-message class="simple-variant flex mt-1" severity="error" variant="simple" size="small">
97111
{{ 'settings.profileSettings.endDateError' | translate }}
98112
</p-message>
99113
}

0 commit comments

Comments
 (0)