Merge pull request #217 from CenterForOpenScience/fix/fixes

Fix/fixes

Author: nsemets

src/app/features/moderation/components/registry-submissions/registry-submissions.component.ts

@@ -7,7 +7,6 @@ import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { Primitive } from '@osf/core/helpers';
-import { CollectionSubmissionsListComponent } from '@osf/features/moderation/components/collection-submissions-list/collection-submissions-list.component';
 import { IconComponent, SelectComponent } from '@osf/shared/components';
 import { ALL_SORT_OPTIONS } from '@osf/shared/constants';
 
@@ -17,15 +16,7 @@ import { pubicReviews } from '../test-data';
 
 @Component({
   selector: 'osf-registry-submissions',
-  imports: [
-    SelectButton,
-    TranslatePipe,
-    FormsModule,
-    SelectComponent,
-    CollectionSubmissionsListComponent,
-    IconComponent,
-    TitleCasePipe,
-  ],
+  imports: [SelectButton, TranslatePipe, FormsModule, SelectComponent, IconComponent, TitleCasePipe],
   templateUrl: './registry-submissions.component.html',
   styleUrl: './registry-submissions.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,

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

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

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

@@ -17,11 +17,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormArray, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
 import { UpdateProfileSettingsEducation, UserSelectors } from '@osf/core/store/user';
-import { Education } from '@osf/shared/models';
 import { CustomConfirmationService, LoaderService, ToastService } from '@osf/shared/services';
-import { CustomValidators, findChangedFields } from '@osf/shared/utils';
+import { CustomValidators } from '@osf/shared/utils';
 
 import { EducationForm } from '../../models';
+import { hasEducationChanges, mapEducationToForm, mapFormToEducation } from '../../utils';
 import { EducationFormComponent } from '../education-form/education-form.component';
 
 @Component({
@@ -54,7 +54,11 @@ export class EducationComponent {
   }
 
   removeEducation(index: number): void {
-    this.educations.removeAt(index);
+    if (this.educations.length > 1) {
+      this.educations.removeAt(index);
+    } else {
+      this.educations.reset();
+    }
   }
 
   addEducation(): void {
@@ -74,9 +78,10 @@ export class EducationComponent {
     this.customConfirmationService.confirmDelete({
       headerKey: 'common.discardChangesDialog.header',
       messageKey: 'common.discardChangesDialog.message',
+      acceptLabelKey: 'common.buttons.discardChanges',
       onConfirm: () => {
         this.setInitialData();
-        this.cd.markForCheck();
+        this.toastService.showSuccess('settings.profileSettings.changesDiscarded');
       },
     });
   }
@@ -87,7 +92,7 @@ export class EducationComponent {
       return;
     }
 
-    const formattedEducation = this.educations.value.map((education) => this.mapFormToEducation(education));
+    const formattedEducation = this.educations.value.map((education) => mapFormToEducation(education));
     this.loaderService.show();
 
     this.actions
@@ -111,10 +116,7 @@ export class EducationComponent {
       const initialEdu = this.educationItems()[index];
       if (!initialEdu) return true;
 
-      const formattedFormEducation = this.mapFormToEducation(formEducation);
-      const changedFields = findChangedFields<Education>(formattedFormEducation, initialEdu);
-
-      return Object.keys(changedFields).length > 0;
+      return hasEducationChanges(formEducation, initialEdu);
     });
   }
 
@@ -138,37 +140,9 @@ export class EducationComponent {
 
     this.educations.clear();
     educations
-      .map((education) => this.mapEducationToForm(education))
+      .map((education) => mapEducationToForm(education))
       .forEach((education) => this.educations.push(this.createEducationFormGroup(education)));
 
     this.cd.markForCheck();
   }
-
-  private mapFormToEducation(education: EducationForm): Education {
-    return {
-      institution: education.institution,
-      department: education.department,
-      degree: education.degree,
-      startYear: education.startDate?.getFullYear() ?? new Date().getFullYear(),
-      startMonth: (education.startDate?.getMonth() ?? 0) + 1,
-      endYear: education.ongoing ? null : (education.endDate?.getFullYear() ?? null),
-      endMonth: education.ongoing ? null : education.endDate ? education.endDate.getMonth() + 1 : null,
-      ongoing: education.ongoing,
-    };
-  }
-
-  private mapEducationToForm(education: Education): EducationForm {
-    return {
-      institution: education.institution,
-      department: education.department,
-      degree: education.degree,
-      startDate: new Date(+education.startYear, education.startMonth - 1),
-      endDate: education.ongoing
-        ? null
-        : education.endYear && education.endMonth
-          ? new Date(+education.endYear, education.endMonth - 1)
-          : null,
-      ongoing: education.ongoing,
-    };
-  }
 }

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

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

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

@@ -17,11 +17,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormArray, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
 import { UpdateProfileSettingsEmployment, UserSelectors } from '@osf/core/store/user';
-import { Employment } from '@osf/shared/models';
 import { CustomConfirmationService, LoaderService, ToastService } from '@osf/shared/services';
-import { CustomValidators, findChangedFields } from '@osf/shared/utils';
+import { CustomValidators } from '@osf/shared/utils';
 
 import { EmploymentForm } from '../../models';
+import { hasEmploymentChanges, mapEmploymentToForm, mapFormToEmployment } from '../../utils';
 import { EmploymentFormComponent } from '../employment-form/employment-form.component';
 
 @Component({
@@ -55,7 +55,11 @@ export class EmploymentComponent {
   }
 
   removePosition(index: number): void {
-    this.positions.removeAt(index);
+    if (this.positions.length > 1) {
+      this.positions.removeAt(index);
+    } else {
+      this.positions.reset();
+    }
   }
 
   addPosition(): void {
@@ -75,9 +79,10 @@ export class EmploymentComponent {
     this.customConfirmationService.confirmDelete({
       headerKey: 'common.discardChangesDialog.header',
       messageKey: 'common.discardChangesDialog.message',
+      acceptLabelKey: 'common.buttons.discardChanges',
       onConfirm: () => {
         this.setInitialData();
-        this.cd.markForCheck();
+        this.toastService.showSuccess('settings.profileSettings.changesDiscarded');
       },
     });
   }
@@ -88,7 +93,7 @@ export class EmploymentComponent {
       return;
     }
 
-    const formattedEmployment = this.positions.value.map((position) => this.mapFormToEmployment(position));
+    const formattedEmployment = this.positions.value.map((position) => mapFormToEmployment(position));
     this.loaderService.show();
 
     this.actions
@@ -112,10 +117,7 @@ export class EmploymentComponent {
       const initial = this.employment()[index];
       if (!initial) return true;
 
-      const formattedFormEducation = this.mapFormToEmployment(formEmployment);
-      const changedFields = findChangedFields<Employment>(formattedFormEducation, initial);
-
-      return Object.keys(changedFields).length > 0;
+      return hasEmploymentChanges(formEmployment, initial);
     });
   }
 
@@ -139,35 +141,9 @@ export class EmploymentComponent {
 
     this.positions.clear();
     employment
-      .map((x) => this.mapEmploymentToForm(x))
+      .map((x) => mapEmploymentToForm(x))
       .forEach((x) => this.positions.push(this.createEmploymentFormGroup(x)));
-  }
-
-  private mapFormToEmployment(employment: EmploymentForm): Employment {
-    return {
-      title: employment.title,
-      department: employment.department,
-      institution: employment.institution,
-      startYear: employment.startDate?.getFullYear() ?? new Date().getFullYear(),
-      startMonth: (employment.startDate?.getMonth() ?? 0) + 1,
-      endYear: employment.ongoing ? null : (employment.endDate?.getFullYear() ?? null),
-      endMonth: employment.ongoing ? null : employment.endDate ? employment.endDate.getMonth() + 1 : null,
-      ongoing: employment.ongoing,
-    };
-  }
 
-  private mapEmploymentToForm(employment: Employment): EmploymentForm {
-    return {
-      title: employment.title,
-      department: employment.department,
-      institution: employment.institution,
-      startDate: new Date(+employment.startYear, employment.startMonth - 1),
-      endDate: employment.ongoing
-        ? null
-        : employment.endYear && employment.endMonth
-          ? new Date(+employment.endYear, employment.endMonth - 1)
-          : null,
-      ongoing: employment.ongoing,
-    };
+    this.cd.markForCheck();
   }
 }

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

@@ -10,10 +10,11 @@ import { FormBuilder } from '@angular/forms';
 
 import { User } from '@osf/core/models';
 import { UpdateProfileSettingsUser, UserSelectors } from '@osf/core/store/user';
-import { LoaderService, ToastService } from '@osf/shared/services';
+import { CustomConfirmationService, LoaderService, ToastService } from '@osf/shared/services';
 import { CustomValidators } from '@osf/shared/utils';
 
 import { NameForm } from '../../models';
+import { hasNameChanges } from '../../utils';
 import { CitationPreviewComponent } from '../citation-preview/citation-preview.component';
 import { NameFormComponent } from '../name-form/name-form.component';
 
@@ -30,6 +31,7 @@ export class NameComponent {
   private readonly loaderService = inject(LoaderService);
   private readonly toastService = inject(ToastService);
   private readonly destroyRef = inject(DestroyRef);
+  private readonly customConfirmationService = inject(CustomConfirmationService);
 
   readonly actions = createDispatchMap({ updateProfileSettingsUser: UpdateProfileSettingsUser });
   readonly currentUser = select(UserSelectors.getUserNames);
@@ -85,13 +87,29 @@ export class NameComponent {
   }
 
   discardChanges() {
-    const user = this.currentUser();
-
-    if (!user) {
+    if (!this.hasFormChanges()) {
       return;
     }
 
-    this.updateForm(user);
+    this.customConfirmationService.confirmDelete({
+      headerKey: 'common.discardChangesDialog.header',
+      messageKey: 'common.discardChangesDialog.message',
+      acceptLabelKey: 'common.buttons.discardChanges',
+      onConfirm: () => {
+        const user = this.currentUser();
+        if (user) {
+          this.updateForm(user);
+          this.toastService.showSuccess('settings.profileSettings.changesDiscarded');
+        }
+      },
+    });
+  }
+
+  private hasFormChanges(): boolean {
+    const user = this.currentUser();
+    if (!user) return false;
+
+    return hasNameChanges(this.form.controls, user);
   }
 
   private updateForm(user: Partial<User>) {

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

@@ -6,38 +6,31 @@
     <h2>
       {{ 'settings.profileSettings.social.title' | translate: { index: index() + 1 } }}
     </h2>
-    @if (index() !== 0) {
-      <div>
-        <p-button
-          [label]="'common.buttons.remove' | translate"
-          severity="danger"
-          variant="text"
-          (click)="remove.emit()"
-        />
-      </div>
-    }
   </div>
 
   <div class="flex flex-column row-gap-4 w-full md:flex-row md:align-items-end md:column-gap-3">
-    <div class="w-full md:w-4">
-      <p class="font-light mb-1">
-        {{ 'settings.profileSettings.social.socialOutput' | translate }}
-      </p>
+    <div class="w-full md:w-12">
+      <label for="id">{{ label() | translate }}</label>
 
-      <p-select formControlName="socialOutput" [options]="socials" optionLabel="label" class="w-full"></p-select>
-    </div>
+      <p-inputgroup class="addon-input flex-wrap">
+        @if (domain()) {
+          <p-inputgroup-addon class="border-1 grey-border-color md:border-0">
+            {{ domain() }}
+          </p-inputgroup-addon>
+        }
 
-    <div class="w-full md:w-8">
-      <p class="mb-1">
-        {{ 'settings.profileSettings.social.webAddress' | translate }}
-      </p>
+        <input pInputText [placeholder]="placeholder()" formControlName="webAddress" [maxlength]="socialMaxLength" />
 
-      <p-inputgroup class="addon-input flex-wrap">
-        <p-inputgroup-addon class="border-1 grey-border-color md:border-0">
-          {{ domain }}
-        </p-inputgroup-addon>
+        @if (hasLinkedField()) {
+          <p-inputgroup-addon class="border-1 grey-border-color md:border-0"> .academia.edu/ </p-inputgroup-addon>
 
-        <input pInputText [placeholder]="placeholder" formControlName="webAddress" [maxlength]="socialMaxLength" />
+          <input
+            pInputText
+            [placeholder]="linkedPlaceholder()"
+            formControlName="linkedWebAddress"
+            [maxlength]="socialMaxLength"
+          />
+        }
       </p-inputgroup>
     </div>
   </div>