fix(profile-settings): updated education and employment (#607)

Author: nsemets

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

@@ -4,14 +4,12 @@ <h2>
  {{ 'settings.profileSettings.education.title' | translate: { index: index() + 1 } }}
  </h2>
 
- @if (showRemove()) {
- <p-button
- [label]="'common.buttons.remove' | translate"
- severity="danger"
- variant="text"
- (click)="remove.emit()"
- />
- }
+ <p-button
+ [label]="'common.buttons.remove' | translate"
+ severity="danger"
+ variant="text"
+ (onClick)="remove.emit()"
+ />
  </div>
 
  <div class="flex flex-column row-gap-4">

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

@@ -32,7 +32,6 @@ export class EducationFormComponent implements OnInit {
 
  group = input.required<FormGroup>();
  index = input.required<number>();
- showRemove = input(false);
  remove = output<void>();
 
  get institutionControl() {

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

@@ -1,14 +1,7 @@
 <form [formGroup]="educationForm">
  <div formArrayName="educations" class="flex flex-column row-gap-4">
- @if (educations.controls.length) {
- @for (education of educations.controls; track $index; let index = $index) {
- <osf-education-form
- [group]="education"
- [index]="index"
- [showRemove]="educations.controls.length > 1"
- (remove)="removeEducation(index)"
- ></osf-education-form>
- }
+ @for (education of educations.controls; track $index; let index = $index) {
+ <osf-education-form [group]="education" [index]="index" (remove)="removeEducation(index)"></osf-education-form>
  }
  </div>
 </form>

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

@@ -54,11 +54,7 @@ export class EducationComponent {
  }
 
  removeEducation(index: number): void {
- if (this.educations.length > 1) {
- this.educations.removeAt(index);
- } else {
- this.educations.reset();
- }
+ this.educations.removeAt(index);
  }
 
  addEducation(): void {
@@ -157,16 +153,12 @@ export class EducationComponent {
 
  this.educations.clear();
 
- if (!educations?.length) {
- this.addEducation();
- this.cd.markForCheck();
- return;
+ if (educations?.length) {
+ educations
+  .map((education) => mapEducationToForm(education))
+  .forEach((education) => this.educations.push(this.createEducationFormGroup(education)));
  }
 
- educations
- .map((education) => mapEducationToForm(education))
- .forEach((education) => this.educations.push(this.createEducationFormGroup(education)));
-
  this.cd.markForCheck();
  }
 }

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

@@ -4,14 +4,12 @@ <h2>
  {{ 'settings.profileSettings.employment.title' | translate: { index: index() + 1 } }}
  </h2>
 
- @if (showRemove()) {
- <p-button
- [label]="'common.buttons.remove' | translate"
- severity="danger"
- variant="text"
- (onClick)="remove.emit()"
- />
- }
+ <p-button
+ [label]="'common.buttons.remove' | translate"
+ severity="danger"
+ variant="text"
+ (onClick)="remove.emit()"
+ />
  </div>
 
  <div class="flex flex-column row-gap-4">

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

@@ -32,7 +32,6 @@ export class EmploymentFormComponent implements OnInit {
 
  group = input.required<FormGroup>();
  index = input.required<number>();
- showRemove = input(false);
  remove = output<void>();
 
  get titleControl() {

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

@@ -1,14 +1,7 @@
 <form [formGroup]="employmentForm">
  <div formArrayName="positions" class="flex flex-column row-gap-4">
- @if (positions.controls.length) {
- @for (position of positions.controls; track index; let index = $index) {
- <osf-employment-form
- [group]="position"
- [index]="index"
- [showRemove]="positions.controls.length > 1"
- (remove)="removePosition(index)"
- ></osf-employment-form>
- }
+ @for (position of positions.controls; track index; let index = $index) {
+ <osf-employment-form [group]="position" [index]="index" (remove)="removePosition(index)"></osf-employment-form>
  }
  </div>
 </form>

src/app/features/settings/profile-settings/components/employment/employment.component.ts

@@ -55,11 +55,7 @@ export class EmploymentComponent {
  }
 
  removePosition(index: number): void {
- if (this.positions.length > 1) {
- this.positions.removeAt(index);
- } else {
- this.positions.reset();
- }
+ this.positions.removeAt(index);
  }
 
  addPosition(): void {
@@ -93,11 +89,11 @@ export class EmploymentComponent {
  return;
  }
 
- const formattedEmployment = this.positions.value.map((position) => mapFormToEmployment(position));
+ const employments = this.positions.value.map(mapFormToEmployment);
  this.loaderService.show();
 
  this.actions
- .updateProfileSettingsEmployment(formattedEmployment)
+ .updateProfileSettingsEmployment(employments)
  .pipe(takeUntilDestroyed(this.destroyRef))
  .subscribe({
  next: () => {
@@ -112,18 +108,6 @@ export class EmploymentComponent {
  const employment = this.employment();
  const formPositions = this.positions.value;
 
- if (!employment?.length) {
- return formPositions.some(
- (position) =>
- position.title?.trim() ||
- position.institution?.trim() ||
- position.department?.trim() ||
- position.startDate ||
- position.endDate ||
- position.ongoing
- );
- }
-
  if (formPositions.length !== employment.length) {
  return true;
  }
@@ -157,16 +141,12 @@ export class EmploymentComponent {
  const employment = this.employment();
  this.positions.clear();
 
- if (!employment?.length) {
- this.addPosition();
- this.cd.markForCheck();
- return;
+ if (employment?.length) {
+ employment
+  .map((x) => mapEmploymentToForm(x))
+  .forEach((x) => this.positions.push(this.createEmploymentFormGroup(x)));
  }
 
- employment
- .map((x) => mapEmploymentToForm(x))
- .forEach((x) => this.positions.push(this.createEmploymentFormGroup(x)));
-
  this.cd.markForCheck();
  }
 }

src/app/features/settings/profile-settings/helpers/employment-comparison.helper.ts

@@ -8,7 +8,7 @@ export function mapFormToEmployment(employment: EmploymentForm): Employment {
  title: employment.title,
  department: employment.department,
  institution: employment.institution,
- startYear: employment.startDate?.getFullYear() ?? new Date().getFullYear(),
+ startYear: employment.startDate?.getFullYear() ?? null,
  startMonth: employment.startDate?.getMonth() + 1,
  endYear: employment.ongoing ? null : (employment.endDate?.getFullYear() ?? null),
  endMonth: employment.ongoing ? null : employment.endDate ? employment.endDate.getMonth() + 1 : null,
@@ -21,16 +21,15 @@ export function mapEmploymentToForm(employment: Employment): EmploymentForm {
  title: employment.title,
  department: employment.department,
  institution: employment.institution,
- startDate: new Date(+employment.startYear, employment.startMonth - 1),
+ startDate: new Date(employment.startYear, employment.startMonth - 1),
  endDate: employment.ongoing
  ? null
  : employment.endYear && employment.endMonth
- ? new Date(+employment.endYear, employment.endMonth - 1)
+ ? new Date(employment.endYear, employment.endMonth - 1)
  : null,
  ongoing: employment.ongoing,
  };
 }
-
 export function hasEmploymentChanges(formEmployment: EmploymentForm, initialEmployment: Employment): boolean {
  const formattedFormEmployment = mapFormToEmployment(formEmployment);
 

src/app/shared/constants/input-limits.const.ts

@@ -37,4 +37,4 @@ export const InputLimits = {
  },
 };
 
-export const forbiddenFileNameCharacters = /[()<>~!@$&*:;,"'\\|/?]/;
+export const forbiddenFileNameCharacters = /[()<>~!@$&*#%^:;,"'\\|/?]/;