Member edit fixes

ui/src/app/account/settings/settings.component.html

@@ -8,7 +8,7 @@ <h1 class="mt-3" i18n="@@settings.personalDetails.string">Personal details</h1>
         <strong>Settings saved!</strong>
       </div>
 
-      <app-error-alert></app-error-alert>
+      <app-alert-error></app-alert-error>
 
       <form
         name="form"

ui/src/app/affiliation/affiliation-delete.component.html

@@ -4,7 +4,7 @@ <h4 class="modal-title" i18n="@@entity.delete.title.string">Confirm deletion</h4
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true" (click)="clear()">&times;</button>
   </div>
   <div class="modal-body" id="jhi-delete-assertion-heading">
-    <app-error-alert></app-error-alert>
+    <app-alert-error></app-alert-error>
     <p *ngIf="!affiliation?.addedToORCID" i18n="@@gatewayApp.assertionServiceAssertion.delete.fromPortal.string">
       Are you sure you want to delete this affiliation from the portal?
     </p>

ui/src/app/affiliation/affiliation-delete.component.ts

@@ -8,7 +8,7 @@ import { EventService } from 'src/app/shared/service/event.service'
 import { AlertService } from 'src/app/shared/service/alert.service'
 import { IAffiliation } from './model/affiliation.model'
 import { AFFILIATION_STATUS } from 'src/app/shared/constants/orcid-api.constants'
-import { AlertType, EventType } from 'src/app/app.constants'
+import { AlertMessage, AlertType, EventType } from 'src/app/app.constants'
 import { Event } from 'src/app/shared/model/event.model'
 import { faBan, faTimes } from '@fortawesome/free-solid-svg-icons'
 
@@ -46,10 +46,10 @@ export class AffiliationDeleteDialogComponent implements OnInit {
       this.affiliationService.delete(id).subscribe((response) => {
         if (response) {
           this.eventService.broadcast(new Event(EventType.AFFILIATION_LIST_MODIFICATION))
-          this.alertService.broadcast(AlertType.AFFILIATION_DELETED)
+          this.alertService.broadcast(AlertType.TOAST, AlertMessage.AFFILIATION_DELETED)
         } else {
           this.eventService.broadcast(new Event(EventType.AFFILIATION_LIST_MODIFICATION))
-          this.alertService.broadcast(AlertType.AFFILIATION_DELETE_FAILURE)
+          this.alertService.broadcast(AlertType.TOAST, AlertMessage.AFFILIATION_DELETE_FAILURE)
         }
         this.activeModal.dismiss(true)
       })

ui/src/app/affiliation/affiliation-detail.component.html

@@ -3,7 +3,7 @@
     <div *ngIf="affiliation">
       <h1 class="mt-5" i18n="@@gatewayApp.assertionServiceAssertion.detail.title.string">Affiliation details</h1>
       <hr />
-      <app-error-alert></app-error-alert>
+      <app-alert-error></app-alert-error>
       <div class="row">
         <dl class="jh-entity-details">
           <dt class="col-md-3" i18n="@@gatewayApp.assertionServiceAssertion.id.string">ID</dt>

ui/src/app/affiliation/affiliation-import-dialog.component.html

@@ -1,43 +1,76 @@
 <form name="uploadForm" (ngSubmit)="upload()">
-    <div class="modal-header">
-        <h4 class="modal-title" i18n="@@gatewayApp.assertionServiceAssertion.import.title.string">Import affiliations from CSV</h4>
-        <button type="button" class="close" (click)="close()" aria-hidden="true">&times;</button>
-    </div>
-    <div class="modal-body">
-    	<div class="alert alert-success" *ngIf="uploaded && success">
-			<div class="row">
-				<div class="col-md-12">
-	            	<span i18n="@@gatewayApp.assertionServiceAssertion.import.successMessage.string">Your CSV has been uploaded for processing. We will let you know via email once the file has been processed.</span>
-	            </div>
-	        </div>
-		</div>
-        <app-error-alert></app-error-alert>
-        <div class="alerts top right" role="alert" *ngIf="uploaded && !success">
-			<ngb-alert class="alert alert-danger alert-dismissible" role="alert" [dismissible]="false" ng-reflect-type="danger">
-			    <p i18n="@@gatewayApp.assertionServiceAssertion.import.failure.string">There was a problem uploading your CSV for processing.</p>
-		    </ngb-alert>
-		</div>
-        <p id="jhi-delete-msUser-heading" i18n="@@gatewayApp.assertionServiceAssertion.import.label.string">Please select the CSV file to upload</p>
-        <div class="form-group">
-            <label class="form-control-label" i18n="@@gatewayApp.assertionServiceAssertion.import.filePath.string" for="field_filePath.string">File Path</label>
-            <input type="file" class="form-control" name="filePath" id="field_filePath" accept=".csv"
-                   onclick="this.value=null" (change)="selectFile($event)"/>
+  <div class="modal-header">
+    <h4 class="modal-title" i18n="@@gatewayApp.assertionServiceAssertion.import.title.string">
+      Import affiliations from CSV
+    </h4>
+    <button type="button" class="close" (click)="close()" aria-hidden="true">&times;</button>
+  </div>
+  <div class="modal-body">
+    <div class="alert alert-success" *ngIf="uploaded && success">
+      <div class="row">
+        <div class="col-md-12">
+          <span i18n="@@gatewayApp.assertionServiceAssertion.import.successMessage.string"
+            >Your CSV has been uploaded for processing. We will let you know via email once the file has been
+            processed.</span
+          >
         </div>
-        <p><em><span i18n="@@gatewayApp.assertionServiceAssertion.uploadNote.string">Please do not forget to download and send permission links to your researchers once the upload has completed.</span></em></p>
+      </div>
     </div>
-    <div *ngIf="loading" class="progress progress-striped">
-        <div class="progress-bar indeterminate" role="progressbar"></div>
+    <app-alert-error></app-alert-error>
+    <div class="alerts top right" role="alert" *ngIf="uploaded && !success">
+      <ngb-alert
+        class="alert alert-danger alert-dismissible"
+        role="alert"
+        [dismissible]="false"
+        ng-reflect-type="danger"
+      >
+        <p i18n="@@gatewayApp.assertionServiceAssertion.import.failure.string">
+          There was a problem uploading your CSV for processing.
+        </p>
+      </ngb-alert>
     </div>
-
-    <div class="modal-footer">
-        <button type="button" class="btn btn-outline-primary" (click)="close()">
-            <fa-icon [icon]="faBan"></fa-icon>&nbsp;<span i18n="@@entity.action.cancel.string">Cancel</span>
-        </button>
-        <button id="jhi-confirm-csv-upload" type="submit" class="btn btn-primary" *ngIf="!uploaded">
-            <fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n="@@entity.action.upload.string">Upload</span>
-        </button>
-        <button id="close-dialog" class="btn btn-primary" (click)="close()" *ngIf="uploaded">
-            <fa-icon [icon]="faBan"></fa-icon>&nbsp;<span i18n="@@entity.action.close.string">Close</span>
-        </button>
+    <p id="jhi-delete-msUser-heading" i18n="@@gatewayApp.assertionServiceAssertion.import.label.string">
+      Please select the CSV file to upload
+    </p>
+    <div class="form-group">
+      <label
+        class="form-control-label"
+        i18n="@@gatewayApp.assertionServiceAssertion.import.filePath.string"
+        for="field_filePath.string"
+        >File Path</label
+      >
+      <input
+        type="file"
+        class="form-control"
+        name="filePath"
+        id="field_filePath"
+        accept=".csv"
+        onclick="this.value=null"
+        (change)="selectFile($event)"
+      />
     </div>
+    <p>
+      <em
+        ><span i18n="@@gatewayApp.assertionServiceAssertion.uploadNote.string"
+          >Please do not forget to download and send permission links to your researchers once the upload has
+          completed.</span
+        ></em
+      >
+    </p>
+  </div>
+  <div *ngIf="loading" class="progress progress-striped">
+    <div class="progress-bar indeterminate" role="progressbar"></div>
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="btn btn-outline-primary" (click)="close()">
+      <fa-icon [icon]="faBan"></fa-icon>&nbsp;<span i18n="@@entity.action.cancel.string">Cancel</span>
+    </button>
+    <button id="jhi-confirm-csv-upload" type="submit" class="btn btn-primary" *ngIf="!uploaded">
+      <fa-icon [icon]="faPlus"></fa-icon>&nbsp;<span i18n="@@entity.action.upload.string">Upload</span>
+    </button>
+    <button id="close-dialog" class="btn btn-primary" (click)="close()" *ngIf="uploaded">
+      <fa-icon [icon]="faBan"></fa-icon>&nbsp;<span i18n="@@entity.action.close.string">Close</span>
+    </button>
+  </div>
 </form>

ui/src/app/affiliation/affiliation-update.component.html

@@ -9,7 +9,7 @@
         Add or edit affiliation
       </h1>
       <div>
-        <app-error-alert></app-error-alert>
+        <app-alert-error></app-alert-error>
         <div class="form-group">
           <label class="form-control-label" i18n="@@gatewayApp.assertionServiceAssertion.email.string" for="field_email"
             >User Email</label

ui/src/app/affiliation/affiliation-update.component.ts

@@ -13,6 +13,7 @@ import {
   COUNTRIES,
   ORG_ID_TYPES,
   DEFAULT_LATEST_YEAR_INCREMENT,
+  AlertMessage,
   AlertType,
 } from '../app.constants'
 import { AlertService } from '../shared/service/alert.service'
@@ -265,15 +266,15 @@ export class AffiliationUpdateComponent implements OnInit {
       this.affiliationService.update(assertion).subscribe({
         next: () => {
           this.onSaveSuccess()
-          this.alertService.broadcast(AlertType.AFFILIATION_UPDATED)
+          this.alertService.broadcast(AlertType.TOAST, AlertMessage.AFFILIATION_UPDATED)
         },
         error: (err) => this.onSaveError(err),
       })
     } else {
       this.affiliationService.create(assertion).subscribe({
         next: () => {
           this.onSaveSuccess()
-          this.alertService.broadcast(AlertType.AFFILIATION_CREATED)
+          this.alertService.broadcast(AlertType.TOAST, AlertMessage.AFFILIATION_CREATED)
         },
         error: (err) => this.onSaveError(err),
       })

ui/src/app/affiliation/affiliations.component.html

@@ -119,7 +119,8 @@ <h1 id="page-heading" class="mt-3" i18n="@@gatewayApp.assertionServiceAssertion.
   </div>
   <div class="row">
     <div class="col-md-12">
-      <app-alert></app-alert>
+      <app-alert-error></app-alert-error>
+      <app-alert-toast></app-alert-toast>
       <br />
       <div class="alert alert-warning" *ngIf="affiliations?.length === 0">
         <span i18n="@@gatewayApp.assertionServiceAssertion.home.notFound.string">No affiliations found</span>

ui/src/app/affiliation/affiliations.component.spec.ts

@@ -1,18 +1,11 @@
 import { ComponentFixture, TestBed, tick, fakeAsync } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { RouterTestingModule } from '@angular/router/testing'
-import { EMPTY, of, throwError } from 'rxjs'
-import { MemberService } from 'src/app/member/service/member.service'
-import { AccountService, LoginService } from 'src/app/account'
-import { By } from '@angular/platform-browser'
+import { EMPTY, of } from 'rxjs'
+import { AccountService } from 'src/app/account'
 import { HasAnyAuthorityDirective } from 'src/app/shared/directive/has-any-authority.directive'
-import { HttpHeaders, HttpResponse } from '@angular/common/http'
-import { Member } from 'src/app/member/model/member.model'
 import { AlertService } from '../shared/service/alert.service'
 import { EventService } from '../shared/service/event.service'
 import { LocalizePipe } from '../shared/pipe/localize'
-import { EventType } from 'src/app/app.constants'
-import { Event } from '../shared/model/event.model'
 import { RouterModule } from '@angular/router'
 import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
 import { AffiliationsComponent } from './affiliations.component'

ui/src/app/affiliation/affiliations.component.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core'
 import { IAffiliation, IAffiliationPage } from './model/affiliation.model'
 import { AFFILIATION_STATUS } from '../shared/constants/orcid-api.constants'
 import { Subscription, delay, tap } from 'rxjs'
-import { EventType, ITEMS_PER_PAGE, ORCID_BASE_URL } from '../app.constants'
+import { AlertType, EventType, ITEMS_PER_PAGE, ORCID_BASE_URL } from '../app.constants'
 import {
   faChartBar,
   faFileDownload,
@@ -34,7 +34,6 @@ export class AffiliationsComponent implements OnInit, OnDestroy {
   errorDeletingInOrcid: string = AFFILIATION_STATUS.ERROR_DELETING_IN_ORCID
   currentAccount: any
   affiliations: IAffiliation[] | null | undefined
-  error: any
   success: any
   eventSubscriber: Subscription | undefined
   importEventSubscriber: Subscription | undefined
@@ -87,7 +86,6 @@ export class AffiliationsComponent implements OnInit, OnDestroy {
       this.searchTerm = ''
       this.submittedSearchTerm = ''
       this.loadAll()
-      console.log('test')
     })
     this.importEventSubscriber = this.eventService.on(EventType.IMPORT_AFFILIATIONS).subscribe(() => {
       this.loadAll()
@@ -228,10 +226,6 @@ export class AffiliationsComponent implements OnInit, OnDestroy {
     this.itemCount = $localize`:@@global.item-count.string:Showing ${first} - ${second} of ${this.totalItems} items.`
   }
 
-  protected onError(errorMessage: string) {
-    this.alertService.broadcast(errorMessage)
-  }
-
   ngOnDestroy() {
     if (this.notificationSubscription) {
       this.notificationSubscription.unsubscribe()

ui/src/app/affiliation/send-notifications-dialog.component.ts

@@ -8,7 +8,7 @@ import { faPaperPlane } from '@fortawesome/free-solid-svg-icons'
 import { MemberService } from '../member/service/member.service'
 import { LanguageService } from '../shared/service/language.service'
 import { AccountService } from '../account'
-import { AlertType, EventType } from '../app.constants'
+import { AlertMessage, AlertType, EventType } from '../app.constants'
 import { ActivatedRoute, Router } from '@angular/router'
 
 @Component({
@@ -60,7 +60,7 @@ export class SendNotificationsDialogComponent implements OnInit {
         this.requestAlreadyInProgress = true
       } else {
         this.notificationService.updateStatuses(this.language).subscribe(() => {
-          this.alertService.broadcast(AlertType.NOTIFICATION_IN_PROGRESS)
+          this.alertService.broadcast(AlertType.TOAST, AlertMessage.NOTIFICATION_IN_PROGRESS)
           this.close()
         })
       }

ui/src/app/app.component.spec.ts

@@ -18,10 +18,4 @@ describe('AppComponent', () => {
     const app = fixture.componentInstance
     expect(app).toBeTruthy()
   })
-
-  it(`should have as title 'ui'`, () => {
-    const fixture = TestBed.createComponent(AppComponent)
-    const app = fixture.componentInstance
-    expect(app.title).toEqual('ui')
-  })
 })

ui/src/app/app.component.ts

@@ -6,7 +6,4 @@ import { HttpClient } from '@angular/common/http'
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss'],
 })
-export class AppComponent {
-  title = 'ui';
-  constructor(private http: HttpClient) {}
-}
+export class AppComponent {}

ui/src/app/app.constants.ts

@@ -11,7 +11,7 @@ export enum EventType {
   MEMBER_LIST_MODIFICATION,
 }
 
-export enum AlertType {
+export enum AlertMessage {
   SEND_ACTIVATION_SUCCESS = 'Invite sent.',
   SEND_ACTIVATION_FAILURE = 'Invite email couldn`t be sent.',
   USER_CREATED = 'User created. Invite sent.',
@@ -26,6 +26,13 @@ export enum AlertType {
   AFFILIATION_DELETE_FAILURE = 'There was a problem deleting the affiliation',
 }
 
+export enum AlertType {
+  CONTACT_UPDATED,
+  CONSORTIUM_MEMBER_ADDED,
+  CONSORTIUM_MEMBER_REMOVED,
+  TOAST,
+}
+
 export const EMAIL_NOT_FOUND_TYPE = 'https://www.jhipster.tech/problem/email-not-found'
 
 export const DATE_FORMAT = 'YYYY-MM-DD'

ui/src/app/error/error-alert.component.ts

@@ -4,7 +4,7 @@ import { Subscription } from 'rxjs'
 import { AppError, ErrorAlert } from './model/error.model'
 
 @Component({
-  selector: 'app-error-alert',
+  selector: 'app-alert-error',
   templateUrl: './error-alert.component.html',
 })
 export class ErrorAlertComponent implements OnInit {
@@ -18,6 +18,8 @@ export class ErrorAlertComponent implements OnInit {
 
   ngOnInit(): void {
     this.sub = this.errorService.on().subscribe((err: AppError) => {
+      console.log(err)
+
       const alert: ErrorAlert = {
         type: 'danger',
         msg: err.message,

ui/src/app/error/service/error.service.ts

@@ -11,8 +11,10 @@ export class ErrorService implements ErrorHandler {
   private errors: Subject<any> = new Subject<any>()
 
   handleError(error: any) {
+    console.log(error)
+
     if (error instanceof HttpErrorResponse) {
-      this.errors.next(new AppError(error.status, error.error.title))
+      this.errors.next(new AppError(error.status, error.error.title || error.message))
     } else {
       console.error('Unknown error occurred', error)
     }

ui/src/app/home/home.component.html

@@ -4,3 +4,6 @@
     <router-outlet></router-outlet>
   </div>
 </div>
+<app-contact-update-alert></app-contact-update-alert>
+<app-add-consortium-member-alert></app-add-consortium-member-alert>
+<app-remove-consortium-member-alert></app-remove-consortium-member-alert>

ui/src/app/home/home.component.scss

@@ -1,7 +1,11 @@
-@import '~quill/dist/quill.snow.css';
 :host {
   max-width: 1250px;
   display: block;
   margin: auto;
   height: 100%;
 }
+
+.home-container {
+  border: 2px solid #eeeeee;
+  border-radius: 5px 0px 0px 5px;
+}

ui/src/app/home/home.component.ts

@@ -1,6 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core'
 import { AccountService } from '../account'
-import { MemberService } from '../member/service/member.service'
 import { Subscription } from 'rxjs/internal/Subscription'
 import { ISFMemberData } from '../member/model/salesforce-member-data.model'
 import { IAccount } from '../account/model/account.model'