68346: Upload-bitstream automatically fill bundle name in combobox + create new bundle option

resources/i18n/en.json5

@@ -694,16 +694,22 @@
 
   "item.bitstreams.upload.bundle": "Bundle",
 
-  "item.bitstreams.upload.bundle.placeholder": "Click here to enter a bundle name or select one from the dropdown, if available.",
+  "item.bitstreams.upload.bundle.dropdown.placeholder": "Click here to select a bundle from the dropdown.",
+
+  "item.bitstreams.upload.bundle.new.placeholder": "Click here to enter a new bundle name.",
 
   "item.bitstreams.upload.bundles.empty": "This item doesn\'t contain any bundles to upload a bitstream to.",
 
   "item.bitstreams.upload.drop-message": "Drop a file to upload",
 
-  "item.bitstreams.upload.failed": "Upload failed. Please verify the content before retrying.",
-
   "item.bitstreams.upload.item": "Item: ",
 
+  "item.bitstreams.upload.notifications.bundle.created.content": "Successfully created new bundle.",
+
+  "item.bitstreams.upload.notifications.bundle.created.title": "Created bundle",
+
+  "item.bitstreams.upload.notifications.upload.failed": "Upload failed. Please verify the content before retrying.",
+
   "item.bitstreams.upload.title": "Upload bitstream",
 
 

src/app/+item-page/bitstreams/upload/upload-bitstream.component.html

@@ -14,28 +14,27 @@
         <label class="font-weight-bold">{{'item.bitstreams.upload.bundle' | translate}}</label>
         <ds-dso-input-suggestions #f id="search-form"
                                   [suggestions]="bundles"
-                                  [placeholder]="'item.bitstreams.upload.bundle.placeholder'| translate"
+                                  [placeholder]="(bundles?.length > 0 ? 'item.bitstreams.upload.bundle.dropdown.placeholder' : 'item.bitstreams.upload.bundle.new.placeholder') | translate"
                                   [action]="getCurrentUrl()"
                                   [name]="'bundle-select'"
+                                  [debounceTime]="50"
                                   [(ngModel)]="selectedBundleName"
+                                  (typeSuggestion)="bundleNameChange()"
                                   (clickSuggestion)="onClick($event)"
                                   (click)="f.open()"
                                   ngDefaultControl>
         </ds-dso-input-suggestions>
-        <ds-uploader  class="w-100"
+        <button *ngIf="!selectedBundleId && selectedBundleName?.length > 0" class="btn btn-success" (click)="createBundle()">
+          <i class="fa fa-plus"></i> Create bundle
+        </button>
+        <ds-uploader  class="w-100" *ngIf="selectedBundleId"
                       [dropMsg]="'item.bitstreams.upload.drop-message'"
                       [dropOverDocumentMsg]="'item.bitstreams.upload.drop-message'"
                       [enableDragOverDocument]="true"
                       [uploadFilesOptions]="uploadFilesOptions"
-                      [uploadProperties]="uploadProperties"
                       (onCompleteItem)="onCompleteItem($event)"
                       (onUploadError)="onUploadError()"></ds-uploader>
       </div>
-      <div class="col-12" *ngIf="bundles.length === 0">
-        <div class="alert alert-info w-100 d-inline-block" role="alert">
-          {{'item.bitstreams.upload.bundles.empty' | translate}}
-        </div>
-      </div>
     </div>
   </ng-container>
 </div>

src/app/+item-page/bitstreams/upload/upload-bitstream.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { Observable } from 'rxjs/internal/Observable';
 import { RemoteData } from '../../../core/data/remote-data';
 import { Item } from '../../../core/shared/item.model';
@@ -6,7 +6,7 @@ import { map, switchMap, take } from 'rxjs/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { UploaderOptions } from '../../../shared/uploader/uploader-options.model';
 import { Subscription } from 'rxjs/internal/Subscription';
-import { hasValue, isEmpty } from '../../../shared/empty.util';
+import { hasValue, isEmpty, isNotEmpty } from '../../../shared/empty.util';
 import { ItemDataService } from '../../../core/data/item-data.service';
 import { AuthService } from '../../../core/auth/auth.service';
 import { NotificationsService } from '../../../shared/notifications/notifications.service';
@@ -15,17 +15,28 @@ import { getBitstreamModulePath } from '../../../app-routing.module';
 import { PaginatedList } from '../../../core/data/paginated-list';
 import { Bundle } from '../../../core/shared/bundle.model';
 import { BundleDataService } from '../../../core/data/bundle-data.service';
-import { getRemoteDataPayload, getSucceededRemoteData } from '../../../core/shared/operators';
+import {
+  getFirstSucceededRemoteDataPayload
+} from '../../../core/shared/operators';
+import { UploaderComponent } from '../../../shared/uploader/uploader.component';
 
 @Component({
   selector: 'ds-upload-bitstream',
-  templateUrl: './upload-bitstream.component.html',
+  templateUrl: './upload-bitstream.component.html'
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
 /**
  * Page component for uploading a bitstream to an item
  */
 export class UploadBitstreamComponent implements OnInit, OnDestroy {
+  /**
+   * The file uploader component
+   */
+  @ViewChild(UploaderComponent, {static: false}) uploaderComponent: UploaderComponent;
+
+  /**
+   * The ID of the item to upload a bitstream to
+   */
+  itemId: string;
 
   /**
    * The item to upload a bitstream to
@@ -59,6 +70,11 @@ export class UploadBitstreamComponent implements OnInit, OnDestroy {
     itemAlias: null
   });
 
+  /**
+   * The prefix for all i18n notification messages within this component
+   */
+  NOTIFICATIONS_PREFIX = 'item.bitstreams.upload.notifications.';
+
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
@@ -83,27 +99,45 @@ export class UploadBitstreamComponent implements OnInit, OnDestroy {
    * Calls setUploadUrl after setting the selected bundle
    */
   ngOnInit(): void {
+    this.itemId = this.route.snapshot.params.id;
     this.itemRD$ = this.route.data.pipe(map((data) => data.item));
     this.bundlesRD$ = this.itemRD$.pipe(
       switchMap((itemRD: RemoteData<Item>) => itemRD.payload.bundles)
     );
     this.selectedBundleId = this.route.snapshot.queryParams.bundle;
-    if (isEmpty(this.selectedBundleId)) {
+    if (isNotEmpty(this.selectedBundleId)) {
-      this.bundlesRD$.pipe(
+      this.bundleService.findById(this.selectedBundleId).pipe(
-        getSucceededRemoteData(),
+        getFirstSucceededRemoteDataPayload()
-        getRemoteDataPayload(),
+      ).subscribe((bundle: Bundle) => {
-        take(1)
+        this.selectedBundleName = bundle.name;
-      ).subscribe((bundles: PaginatedList<Bundle>) => {
-        if (bundles.page.length > 0) {
-          this.selectedBundleId = bundles.page[0].id;
-          this.setUploadUrl();
-        }
       });
-    } else {
       this.setUploadUrl();
     }
   }
 
+  /**
+   * Create a new bundle with the filled in name on the current item
+   */
+  createBundle() {
+    this.itemService.createBundle(this.itemId, this.selectedBundleName).pipe(
+      getFirstSucceededRemoteDataPayload()
+    ).subscribe((bundle: Bundle) => {
+      this.selectedBundleId = bundle.id;
+      this.notificationsService.success(
+        this.translate.instant(this.NOTIFICATIONS_PREFIX + 'bundle.created.title'),
+        this.translate.instant(this.NOTIFICATIONS_PREFIX + 'bundle.created.content')
+      );
+    });
+  }
+
+  /**
+   * The user changed the bundle name
+   * Reset the bundle ID
+   */
+  bundleNameChange() {
+    this.selectedBundleId = undefined;
+  }
+
   /**
    * Set the upload url to match the selected bundle ID
    */
@@ -113,6 +147,8 @@ export class UploadBitstreamComponent implements OnInit, OnDestroy {
       if (isEmpty(this.uploadFilesOptions.authToken)) {
         this.uploadFilesOptions.authToken = this.authService.buildAuthHeader();
       }
+      // Re-initialize the uploader component to ensure the latest changes to the options are applied
+      this.uploaderComponent.ngOnInit();
     });
   }
 
@@ -128,7 +164,7 @@ export class UploadBitstreamComponent implements OnInit, OnDestroy {
    * The request was unsuccessful, display an error notification
    */
   public onUploadError() {
-    this.notificationsService.error(null, this.translate.get('item.bitstreams.upload.failed'));
+    this.notificationsService.error(null, this.translate.get(this.NOTIFICATIONS_PREFIX + 'upload.failed'));
   }
 
   /**

src/app/core/data/item-data.service.ts

@@ -43,6 +43,8 @@ import { RequestEntry } from './request.reducer';
 import { RequestService } from './request.service';
 import { PaginatedSearchOptions } from '../../shared/search/paginated-search-options.model';
 import { Bundle } from '../shared/bundle.model';
+import { MetadataMap } from '../shared/metadata.models';
+import { BundleDataService } from './bundle-data.service';
 
 @Injectable()
 @dataService(ITEM)
@@ -59,6 +61,7 @@ export class ItemDataService extends DataService<Item> {
     protected notificationsService: NotificationsService,
     protected http: HttpClient,
     protected comparator: DSOChangeAnalyzer<Item>,
+    protected bundleService: BundleDataService
   ) {
     super();
   }
@@ -245,6 +248,47 @@ export class ItemDataService extends DataService<Item> {
     return this.rdbService.buildList<Bundle>(hrefObs);
   }
 
+  /**
+   * Create a new bundle on an item
+   * @param itemId      The item's ID
+   * @param bundleName  The new bundle's name
+   * @param metadata    Optional metadata for the bundle
+   */
+  public createBundle(itemId: string, bundleName: string, metadata?: MetadataMap): Observable<RemoteData<Bundle>> {
+    const requestId = this.requestService.generateRequestId();
+    const hrefObs = this.getBundlesEndpoint(itemId);
+
+    const bundleJson = {
+      name: bundleName,
+      metadata: metadata ? metadata : {}
+    };
+
+    hrefObs.pipe(
+      take(1)
+    ).subscribe((href) => {
+      const options: HttpOptions = Object.create({});
+      let headers = new HttpHeaders();
+      headers = headers.append('Content-Type', 'application/json');
+      options.headers = headers;
+      const request = new PostRequest(requestId, href, JSON.stringify(bundleJson), options);
+      this.requestService.configure(request);
+    });
+
+    const selfLink$ = this.requestService.getByUUID(requestId).pipe(
+      getResponseFromEntry(),
+      map((response: any) => {
+        if (isNotEmpty(response.resourceSelfLinks)) {
+          return response.resourceSelfLinks[0];
+        }
+      }),
+      distinctUntilChanged()
+    ) as Observable<string>;
+
+    return selfLink$.pipe(
+      switchMap((selfLink: string) => this.bundleService.findByHref(selfLink)),
+    );
+  }
+
   /**
    * Get the endpoint to move the item
    * @param itemId