[DSpace-CRIS] Bulk Import from Excel File (Frontend)

src/app/app-routing-paths.ts

@@ -1,3 +1,4 @@
+
 export const COAR_NOTIFY_SUPPORT = 'coar-notify-support';
 
 export const ADMIN_MODULE_PATH = 'admin';
@@ -56,4 +57,3 @@ export function getEditItemPageRoute() {
   return `/${EDIT_ITEM_PATH}`;
 }
 export const CORRECTION_TYPE_PATH = 'corrections';
-

src/app/app.menus.ts

@@ -13,6 +13,7 @@ import { AdminSearchMenuProvider } from './shared/menu/providers/admin-search.me
 import { AuditLogsMenuProvider } from './shared/menu/providers/audit-item.menu';
 import { AuditOverviewMenuProvider } from './shared/menu/providers/audit-overview.menu';
 import { BrowseMenuProvider } from './shared/menu/providers/browse.menu';
+import { BulkImportMenuProvider } from './shared/menu/providers/bulk-import.menu';
 import { CoarNotifyMenuProvider } from './shared/menu/providers/coar-notify.menu';
 import { SubscribeMenuProvider } from './shared/menu/providers/comcol-subscribe.menu';
 import { CommunityListMenuProvider } from './shared/menu/providers/community-list.menu';
@@ -112,6 +113,9 @@ export const MENUS = buildMenuStructure({
       ClaimMenuProvider.onRoute(
         MenuRoute.ITEM_PAGE,
       ),
+      BulkImportMenuProvider.onRoute(
+        MenuRoute.COLLECTION_PAGE,
+      ),
     ]),
   ],
 });

src/app/bulk-import/bulk-import-page-routes.ts

@@ -0,0 +1,23 @@
+import { Route } from '@angular/router';
+
+import { i18nBreadcrumbResolver } from '../core/breadcrumbs/i18n-breadcrumb.resolver';
+import { bulkImportGuard } from './bulk-import.guard';
+import { BulkImportPageComponent } from './bulk-import-page.component';
+import { bulkImportPageResolver } from './bulk-import-page.resolver';
+
+/**
+ * RouterModule to help navigate to the page with the bulk import.
+ */
+export const ROUTES: Route[] = [
+  {
+    path: '',
+    component: BulkImportPageComponent,
+    resolve: {
+      collection: bulkImportPageResolver,
+      breadcrumb: i18nBreadcrumbResolver,
+    },
+    pathMatch: 'full',
+    data: { title: 'bulk-import.title', breadcrumbKey: 'bulk-import' },
+    canActivate: [bulkImportGuard],
+  },
+];

src/app/bulk-import/bulk-import-page.component.html

@@ -0,0 +1,27 @@
+<div class="container">
+  <h1 class="mb-3">{{ 'bulk-import.title' | translate }}</h1>
+  <form [formGroup]="form" (ngSubmit)="submit()">
+    <div class="form-group mb-2">
+      <label for="name">{{ 'bulk-import.collection-name' | translate }}</label>
+      <input type="text" class="form-control" id="name" formControlName="name">
+    </div>
+    <div class="form-group mb-2">
+      <label for="file">{{ 'bulk-import.file' | translate }}</label>
+      <input type="file" (change)="handleFileInput($event)" formControlName="file" id="file" class="form-control-file d-block" requireFile/>
+    </div>
+    <div class="form-check">
+      <input type="checkbox" formControlName="abortOnError" id="abortOnError" class="form-check-input" />
+      <label for="abortOnError" class="me-5">{{ 'bulk-import.abort-on-error' | translate }}</label>
+    </div>
+
+    <button type="submit" class="btn btn-primary float-end" [dsBtnDisabled]="form.invalid" >
+        <span>
+          {{'bulk-import.submit' | translate}}
+        </span>
+    </button>
+    <button type="button" class="btn btn-outline-secondary float-end me-2" (click)="goBack()">
+      {{'bulk-import.back' | translate}}
+    </button>
+
+  </form>
+</div>

src/app/bulk-import/bulk-import-page.component.spec.ts

@@ -0,0 +1,151 @@
+import { CommonModule } from '@angular/common';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import {
+  ComponentFixture,
+  fakeAsync,
+  inject,
+  TestBed,
+  tick,
+} from '@angular/core/testing';
+import {
+  FormsModule,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { NotificationsService } from '@dspace/core/notification-system/notifications.service';
+import { ActivatedRouteStub } from '@dspace/core/testing/active-router.stub';
+import { NotificationsServiceStub } from '@dspace/core/testing/notifications-service.stub';
+import { getMockRequestService } from '@dspace/core/testing/request.service.mock';
+import { RouterMock } from '@dspace/core/testing/router.mock';
+import { TranslateLoaderMock } from '@dspace/core/testing/translate-loader.mock';
+import { createSuccessfulRemoteDataObject } from '@dspace/core/utilities/remote-data.utils';
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import {
+  TranslateLoader,
+  TranslateModule,
+} from '@ngx-translate/core';
+import { of } from 'rxjs';
+
+import { AuthService } from '../core/auth/auth.service';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
+import { RestResponse } from '../core/cache/response.models';
+import { ScriptDataService } from '../core/data/processes/script-data.service';
+import { RequestService } from '../core/data/request.service';
+import { RequestEntry } from '../core/data/request-entry.model';
+import { Collection } from '../core/shared/collection.model';
+import { BulkImportPageComponent } from './bulk-import-page.component';
+
+describe('BulkImportPageComponent', () => {
+
+  let component: BulkImportPageComponent;
+  let fixture: ComponentFixture<BulkImportPageComponent>;
+
+  let requestService: any;
+  let scriptDataService: any;
+  let notificationsService: any;
+  let route: any;
+  let router: RouterMock;
+
+  const collection: Collection = Object.assign(new Collection(), {
+    id: '626b80c5-ef15-4b29-8e69-bda89b0a7acf',
+    name: 'Test collection',
+  });
+
+  const file: File = new File(['test'], 'test.xls');
+
+  const fileList: any = {
+    item: (index: number) => file,
+    length: 10,
+  };
+
+  const authService = jasmine.createSpyObj('authService', {
+    isAuthenticated: of(true),
+    setRedirectUrl: {},
+  });
+
+  beforeEach(() => {
+    requestService = getMockRequestService();
+    scriptDataService = jasmine.createSpyObj('scriptDataService', {
+      invoke: of(Object.assign(new RequestEntry(), {
+        response: new RestResponse(true, 200, 'OK'),
+      })),
+    });
+    notificationsService = new NotificationsServiceStub();
+
+    route = new ActivatedRouteStub({}, {
+      collection: createSuccessfulRemoteDataObject( collection ),
+    });
+    router = new RouterMock();
+
+    TestBed.configureTestingModule({
+      imports: [CommonModule, NgbModule, FormsModule, ReactiveFormsModule, BrowserModule, RouterTestingModule,
+        TranslateModule.forRoot({
+          loader: {
+            provide: TranslateLoader,
+            useClass: TranslateLoaderMock,
+          },
+        }), BulkImportPageComponent],
+      providers: [
+        BulkImportPageComponent,
+        DSONameService,
+        { provide: RequestService, useValue: requestService },
+        { provide: RequestService, useValue: requestService },
+        { provide: ScriptDataService, useValue: scriptDataService },
+        { provide: NotificationsService, useValue: notificationsService },
+        { provide: ActivatedRoute, useValue: route },
+        { provide: Router, useValue: router },
+        { provide: AuthService, useValue: authService },
+      ],
+      schemas: [NO_ERRORS_SCHEMA],
+    }).compileComponents();
+
+  });
+
+  beforeEach(fakeAsync(() => {
+    fixture = TestBed.createComponent(BulkImportPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+    tick();
+  }));
+
+  it('should create BulkImportPageComponent', inject([BulkImportPageComponent], (comp: BulkImportPageComponent) => {
+    expect(comp).toBeDefined();
+  }));
+
+  describe('when the user submit the form', () => {
+
+    beforeEach(() => {
+      component.form.value.abortOnError = true;
+      component.form.value.file = fileList;
+      component.setFile(fileList);
+      component.submit();
+    });
+
+    it('should invoke the bulk-import script', () => {
+      expect(scriptDataService.invoke).toHaveBeenCalledWith('bulk-import', [
+        { name: '-c', value: '626b80c5-ef15-4b29-8e69-bda89b0a7acf' },
+        { name: '-f', value: 'test.xls' },
+        { name: '-er', value: true },
+      ], [file]);
+    });
+
+  });
+
+  describe('when the user click on back button', () => {
+
+    beforeEach(() => {
+      component.goBack();
+    });
+
+    it('should nagivate to collection page', () => {
+      expect(router.navigateByUrl).toHaveBeenCalledWith('/collections/626b80c5-ef15-4b29-8e69-bda89b0a7acf');
+    });
+
+  });
+
+});

src/app/bulk-import/bulk-import-page.component.ts

@@ -0,0 +1,166 @@
+import {
+  Component,
+  OnDestroy,
+  OnInit,
+} from '@angular/core';
+import {
+  FormBuilder,
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+} from '@angular/forms';
+import {
+  ActivatedRoute,
+  Router,
+} from '@angular/router';
+import { NotificationsService } from '@dspace/core/notification-system/notifications.service';
+import { Process } from '@dspace/core/processes/process.model';
+import { ProcessParameter } from '@dspace/core/processes/process-parameter.model';
+import { getCollectionPageRoute } from '@dspace/core/router/utils/dso-route.utils';
+import {
+  TranslateModule,
+  TranslateService,
+} from '@ngx-translate/core';
+import { Subscription } from 'rxjs';
+import {
+  map,
+  take,
+} from 'rxjs/operators';
+import { BtnDisabledDirective } from 'src/app/shared/btn-disabled.directive';
+
+import { AuthService } from '../core/auth/auth.service';
+import { DSONameService } from '../core/breadcrumbs/dso-name.service';
+import { ScriptDataService } from '../core/data/processes/script-data.service';
+import { RemoteData } from '../core/data/remote-data';
+import { RequestService } from '../core/data/request.service';
+import { redirectOn4xx } from '../core/shared/authorized.operators';
+import { Collection } from '../core/shared/collection.model';
+import { getFirstCompletedRemoteData } from '../core/shared/operators';
+import { FileValidator } from '../shared/utils/require-file.validator';
+
+/**
+ * Form values for bulk import page
+ */
+interface BulkImportFormValues {
+  name: string;
+  file?: File;
+  abortOnError: boolean;
+}
+
+/**
+ * Page to perform an items bulk imports into the given collection.
+ */
+@Component({
+  selector: 'ds-bulk-import-page',
+  templateUrl: './bulk-import-page.component.html',
+  imports: [
+    BtnDisabledDirective,
+    FileValidator,
+    ReactiveFormsModule,
+    TranslateModule,
+  ],
+})
+export class BulkImportPageComponent implements OnInit, OnDestroy {
+
+  collectionId: string;
+
+  form: FormGroup;
+
+  subs: Subscription[] = [];
+
+  private selectedFile: File;
+
+  constructor(
+    private authService: AuthService,
+    private formBuilder: FormBuilder,
+    private dsoNameService: DSONameService,
+    private scriptService: ScriptDataService,
+    private notificationsService: NotificationsService,
+    private translationService: TranslateService,
+    private requestService: RequestService,
+    private route: ActivatedRoute,
+    private router: Router) {
+
+  }
+
+  ngOnInit(): void {
+
+    this.form = this.formBuilder.group({
+      name: new FormControl({ value:'', disabled: true }),
+      file: new FormControl(),
+      abortOnError: new FormControl(false),
+    });
+
+    this.subs.push(this.route.data.pipe(
+      map((data) => data.collection as RemoteData<Collection>),
+      redirectOn4xx(this.router, this.authService),
+      take(1),
+    ).subscribe((remoteData) => {
+      if (remoteData.payload) {
+        const collection = remoteData.payload;
+        this.collectionId = collection.id;
+        this.form.controls.name.setValue(this.dsoNameService.getName(collection));
+      }
+    }));
+
+  }
+
+  /**
+   * Validates the form, sets the parameters to correct values and invokes the script with the correct parameters
+   * @param form
+   */
+  submit() {
+    if (!this.selectedFile) {
+      this.notificationsService.error(this.translationService.get('bulk-import.error.no-file'));
+      return;
+    }
+
+    const values: BulkImportFormValues = this.form.value;
+
+    const stringParameters: ProcessParameter[] = [
+      { name: '-c', value: this.collectionId },
+      { name: '-f', value: this.selectedFile.name },
+    ];
+
+    if (values.abortOnError) {
+      stringParameters.push( { name: '-er', value: values.abortOnError } );
+    }
+
+    this.scriptService.invoke('bulk-import', stringParameters, [this.selectedFile])
+      .pipe(getFirstCompletedRemoteData())
+      .subscribe((rd: RemoteData<Process>) => {
+        if (rd.isSuccess) {
+          this.notificationsService.success(this.translationService.get('bulk-import.success'));
+          this.navigateToProcesses();
+        } else {
+          this.notificationsService.error(this.translationService.get('bulk-import.error'));
+        }
+      });
+  }
+
+  goBack(): void {
+    this.router.navigateByUrl(getCollectionPageRoute(this.collectionId));
+  }
+
+
+  private navigateToProcesses() {
+    this.requestService.setStaleByHrefSubstring('/processes');
+    this.router.navigateByUrl('/processes');
+  }
+
+  ngOnDestroy(): void {
+    this.subs.forEach((sub) => sub.unsubscribe());
+  }
+
+  public handleFileInput(event: Event) {
+    const input = event.target as HTMLInputElement;
+    if (input.files && input.files.length > 0) {
+      this.setFile(input.files);
+    }
+  }
+
+  public setFile(files: FileList) {
+    this.selectedFile = files.length > 0 ? files.item(0) : undefined;
+  }
+
+}