Affiliation import

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

@@ -0,0 +1,43 @@
+<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" 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>
+        <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-import-dialog.component.spec.ts

@@ -0,0 +1,63 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { AffiliationImportDialogComponent } from './affiliation-import-dialog.component'
+import { AffiliationService } from './service/affiliations.service'
+import { EventService } from '../shared/service/event.service'
+import { FileUploadService } from '../shared/service/file-upload.service'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { FormBuilder } from '@angular/forms'
+import { NgbActiveModal, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { EMPTY, of } from 'rxjs'
+
+describe('AffiliationImportDialogComponent', () => {
+  let component: AffiliationImportDialogComponent
+  let fixture: ComponentFixture<AffiliationImportDialogComponent>
+  let eventService: jasmine.SpyObj<EventService>
+  let uploadService: jasmine.SpyObj<FileUploadService>
+
+  beforeEach(() => {
+    const eventServiceSpy = jasmine.createSpyObj('EventService', ['broadcast', 'on'])
+    const uploadServiceSpy = jasmine.createSpyObj('FileUploadService', ['uploadFile'])
+
+    TestBed.configureTestingModule({
+      declarations: [AffiliationImportDialogComponent],
+      imports: [HttpClientTestingModule],
+      providers: [
+        FormBuilder,
+        NgbModal,
+        NgbActiveModal,
+        { provide: EventService, useValue: eventServiceSpy },
+        { provide: FileUploadService, useValue: uploadServiceSpy },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(AffiliationImportDialogComponent)
+    component = fixture.componentInstance
+
+    eventService = TestBed.inject(EventService) as jasmine.SpyObj<EventService>
+    uploadService = TestBed.inject(FileUploadService) as jasmine.SpyObj<FileUploadService>
+  })
+
+  it('should create', () => {
+    expect(component).toBeTruthy()
+  })
+
+  it('should call upload service', () => {
+    component.currentFile = getFileList()
+    uploadService.uploadFile.and.returnValue(EMPTY)
+    component.upload()
+    expect(uploadService.uploadFile).toHaveBeenCalled()
+  })
+
+  const getFileList = () => {
+    const blob = new Blob([''], { type: 'text/html' })
+    const file = <File>blob
+    const fileList: FileList = {
+      0: file,
+      1: file,
+      length: 2,
+      item: (index: number) => file,
+    }
+    return fileList
+  }
+})

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

@@ -0,0 +1,108 @@
+import { Component, OnDestroy, OnInit } from '@angular/core'
+import { IAffiliation } from './model/affiliation.model'
+import { AffiliationService } from './service/affiliations.service'
+import { NgbActiveModal, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'
+import { EventService } from '../shared/service/event.service'
+import { FileUploadService } from '../shared/service/file-upload.service'
+import { HttpResponse } from '@angular/common/http'
+import { EventType } from '../app.constants'
+import { Event } from '../shared/model/event.model'
+import { ActivatedRoute, Router } from '@angular/router'
+import { faBan, faPlus } from '@fortawesome/free-solid-svg-icons'
+
+@Component({
+  selector: 'app-affiliation-import-dialog',
+  templateUrl: './affiliation-import-dialog.component.html',
+  styleUrls: ['./affiliation-import-dialog.component.scss'],
+})
+export class AffiliationImportDialogComponent {
+  public resourceUrl
+  affiliation: IAffiliation | undefined
+  isSaving: boolean
+  currentFile: FileList | undefined
+  success: boolean
+  uploaded: boolean
+  loading = false
+  faBan = faBan
+  faPlus = faPlus
+
+  constructor(
+    protected affiliationService: AffiliationService,
+    public activeModal: NgbActiveModal,
+    protected eventService: EventService,
+    private uploadService: FileUploadService
+  ) {
+    this.isSaving = false
+    this.resourceUrl = this.affiliationService.resourceUrl + '/upload'
+    this.success = false
+    this.uploaded = false
+  }
+
+  clear() {
+    this.activeModal.dismiss('cancel')
+  }
+
+  selectFile(event: any) {
+    this.currentFile = event.target.files
+  }
+
+  upload() {
+    if (this.currentFile) {
+      this.loading = true
+      const f = this.currentFile.item(0)
+      this.uploadService.uploadFile(this.resourceUrl, f!, 'json').subscribe((event: any) => {
+        if (event instanceof HttpResponse) {
+          this.success = event.body
+          this.uploaded = true
+          this.loading = false
+        }
+      })
+    } else {
+      alert($localize`:@@gatewayApp.msUserServiceMSUser.import.emptyFile.string:`)
+    }
+  }
+
+  close() {
+    this.eventService.broadcast(new Event(EventType.IMPORT_AFFILIATIONS, ''))
+    this.activeModal.dismiss(true)
+  }
+}
+
+@Component({
+  selector: 'app-affiliations-import-popup',
+  template: '',
+})
+export class AffiliationImportPopupComponent implements OnInit, OnDestroy {
+  protected ngbModalRef: NgbModalRef | undefined | null
+
+  constructor(
+    protected activatedRoute: ActivatedRoute,
+    protected router: Router,
+    protected modalService: NgbModal
+  ) {}
+
+  ngOnInit() {
+    setTimeout(() => {
+      this.ngbModalRef = this.modalService.open(AffiliationImportDialogComponent as Component, {
+        size: 'lg',
+        backdrop: 'static',
+      })
+
+      this.ngbModalRef.result.then(
+        (result) => {
+          this.router.navigate(['/affiliations', { outlets: { popup: null } }])
+          this.ngbModalRef = null
+        },
+        (reason) => {
+          this.router.navigate(['/affiliations', { outlets: { popup: null } }])
+          this.ngbModalRef = null
+        }
+      )
+    }, 0)
+  }
+
+  ngOnDestroy() {
+    this.ngbModalRef = null
+    this.router.navigateByUrl('/', { skipLocationChange: true }).then(() => this.router.navigate(['/affiliations']))
+  }
+}

ui/src/app/affiliation/affiliation.module.ts

@@ -1,16 +1,25 @@
 import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'
-import { RouterModule } from '@angular/router'
+import { RouterModule, provideRouter, withDebugTracing } from '@angular/router'
 import { ClipboardModule } from 'ngx-clipboard'
 import { AffiliationsComponent } from './affiliations.component'
 import { affiliationRoutes } from './affiliation.route'
 import { SharedModule } from '../shared/shared.module'
 import { CommonModule } from '@angular/common'
-import { FormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms'
 import { AffiliationDetailComponent } from './affiliation-detail.component'
+import {
+  AffiliationImportDialogComponent,
+  AffiliationImportPopupComponent,
+} from './affiliation-import-dialog.component'
 
 @NgModule({
   imports: [CommonModule, FormsModule, SharedModule, RouterModule.forChild(affiliationRoutes), ClipboardModule],
-  declarations: [AffiliationsComponent, AffiliationDetailComponent],
+  declarations: [
+    AffiliationsComponent,
+    AffiliationDetailComponent,
+    AffiliationImportDialogComponent,
+    AffiliationImportPopupComponent,
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
 export class AffiliationModule {}

ui/src/app/affiliation/affiliation.route.ts

@@ -6,6 +6,7 @@ import { AffiliationService } from './service/affiliations.service'
 import { Affiliation } from './model/affiliation.model'
 import { AffiliationsComponent } from './affiliations.component'
 import { AffiliationDetailComponent } from './affiliation-detail.component'
+import { AffiliationImportPopupComponent } from './affiliation-import-dialog.component'
 
 export const AffiliationResolver: ResolveFn<Affiliation | null> = (
   route: ActivatedRouteSnapshot,
@@ -32,6 +33,21 @@ export const affiliationRoutes: Routes = [
       pageTitle: 'gatewayApp.assertionServiceAssertion.home.title.string',
     },
     canActivate: [AuthGuard],
+    children: [
+      {
+        path: 'import',
+        component: AffiliationImportPopupComponent,
+        resolve: {
+          affiliation: AffiliationResolver,
+        },
+        data: {
+          authorities: ['ASSERTION_SERVICE_ENABLED'],
+          pageTitle: 'gatewayApp.msUserServiceMSUser.home.title.string',
+        },
+        canActivate: [AuthGuard],
+        outlet: 'popup',
+      },
+    ],
   },
   {
     path: 'affiliations/:id/view',

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

@@ -45,7 +45,7 @@ <h1 id="page-heading" class="mt-3" i18n="@@gatewayApp.assertionServiceAssertion.
       <button
         id="jh-upload-entities"
         class="btn btn-primary float-right jh-upload-entities upload-assertions ml-1"
-        [routerLink]="['/', 'affiliations', { outlets: { popup: 'import' } }]"
+        [routerLink]="['/' + 'affiliations', { outlets: { popup: 'import' } }]"
       >
         <fa-icon [icon]="faFileImport"></fa-icon>
         <span i18n="@@gatewayApp.assertionServiceAssertion.home.uploadLabel.string">
@@ -252,3 +252,4 @@ <h1 id="page-heading" class="mt-3" i18n="@@gatewayApp.assertionServiceAssertion.
     </div>
   </div>
 </div>
+<router-outlet name="popup"></router-outlet>

ui/src/app/user/user-import-dialog.component.ts

@@ -7,7 +7,7 @@ import { EventService } from '../shared/service/event.service'
 import { Event } from '../shared/model/event.model'
 import { EventType } from '../app.constants'
 import { ActivatedRoute, Router } from '@angular/router'
-import { faSave, faBan, faLaptopHouse } from '@fortawesome/free-solid-svg-icons'
+import { faSave, faBan } from '@fortawesome/free-solid-svg-icons'
 
 @Component({
   selector: 'app-user-import-dialog',
@@ -16,7 +16,6 @@ import { faSave, faBan, faLaptopHouse } from '@fortawesome/free-solid-svg-icons'
 })
 export class UserImportDialogComponent {
   resourceUrl: string
-  user: IUser | null
   isSaving: boolean
   currentFile: FileList | null
   csvErrors: any
@@ -31,7 +30,6 @@ export class UserImportDialogComponent {
     private fileUploadService: FileUploadService
   ) {
     this.isSaving = false
-    this.user = null
     this.currentFile = null
     this.resourceUrl = this.userService.resourceUrl + '/upload'
   }
@@ -81,25 +79,22 @@ export class UserImportPopupComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit() {
-    this.activatedRoute.data.subscribe(({ u }) => {
-      setTimeout(() => {
-        this.ngbModalRef = this.modalService.open(UserImportDialogComponent as Component, {
-          size: 'lg',
-          backdrop: 'static',
-        })
-        this.ngbModalRef.componentInstance.user = u
-        this.ngbModalRef.result.then(
-          (result) => {
-            this.router.navigate(['/users', { outlets: { popup: null } }])
-            this.ngbModalRef = null
-          },
-          (reason) => {
-            this.router.navigate(['/users', { outlets: { popup: null } }])
-            this.ngbModalRef = null
-          }
-        )
-      }, 0)
-    })
+    setTimeout(() => {
+      this.ngbModalRef = this.modalService.open(UserImportDialogComponent as Component, {
+        size: 'lg',
+        backdrop: 'static',
+      })
+      this.ngbModalRef.result.then(
+        (result) => {
+          this.router.navigate(['/users', { outlets: { popup: null } }])
+          this.ngbModalRef = null
+        },
+        (reason) => {
+          this.router.navigate(['/users', { outlets: { popup: null } }])
+          this.ngbModalRef = null
+        }
+      )
+    }, 0)
   }
 
   ngOnDestroy() {