68346: Replace Bundle dropdown with combobox + edit-bistream cache fix

resources/i18n/en.json5

@@ -694,6 +694,8 @@
 
   "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.bundles.empty": "This item doesn\'t contain any bundles to upload a bitstream to.",
 
   "item.bitstreams.upload.drop-message": "Drop a file to upload",

src/app/+bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts

@@ -466,7 +466,6 @@ export class EditBitstreamPageComponent implements OnInit, OnDestroy {
         this.translate.instant(this.NOTIFICATIONS_PREFIX + 'saved.title'),
         this.translate.instant(this.NOTIFICATIONS_PREFIX + 'saved.content')
       );
-      this.requestService.removeByHrefSubstring(this.bitstream.self + '/format');
     });
   }
 

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

@@ -10,11 +10,18 @@
           </div>
         </ng-container>
       </div>
-      <div class="col-12" *ngIf="bundles.length > 0">
+      <div class="col-12">
-        <label for="bundleName" class="font-weight-bold">{{'item.bitstreams.upload.bundle' | translate}}</label>
+        <label class="font-weight-bold">{{'item.bitstreams.upload.bundle' | translate}}</label>
-        <select id="bundleName" class="form-control" [(ngModel)]="selectedBundleId" (change)="setUploadUrl()">
+        <ds-dso-input-suggestions #f id="search-form"
-          <option *ngFor="let bundle of bundles" [value]="bundle.id">{{bundle.name}}</option>
+                                  [suggestions]="bundles"
-        </select>
+                                  [placeholder]="'item.bitstreams.upload.bundle.placeholder'| translate"
+                                  [action]="getCurrentUrl()"
+                                  [name]="'bundle-select'"
+                                  [(ngModel)]="selectedBundleName"
+                                  (clickSuggestion)="onClick($event)"
+                                  (click)="f.open()"
+                                  ngDefaultControl>
+        </ds-dso-input-suggestions>
         <ds-uploader  class="w-100"
                       [dropMsg]="'item.bitstreams.upload.drop-message'"
                       [dropOverDocumentMsg]="'item.bitstreams.upload.drop-message'"

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

@@ -42,6 +42,11 @@ export class UploadBitstreamComponent implements OnInit, OnDestroy {
    */
   selectedBundleId: string;
 
+  /**
+   * The name of the currently selected bundle to upload a bitstream to
+   */
+  selectedBundleName: string;
+
   /**
    * The uploader configuration options
    * @type {UploaderOptions}
@@ -126,6 +131,24 @@ export class UploadBitstreamComponent implements OnInit, OnDestroy {
     this.notificationsService.error(null, this.translate.get('item.bitstreams.upload.failed'));
   }
 
+  /**
+   * The user selected a bundle from the input suggestions
+   * Set the bundle ID and Name properties, as well as the upload URL
+   * @param bundle
+   */
+  onClick(bundle: Bundle) {
+    this.selectedBundleId = bundle.id;
+    this.selectedBundleName = bundle.name;
+    this.setUploadUrl();
+  }
+
+  /**
+   * @returns {string} the current URL
+   */
+  getCurrentUrl() {
+    return this.router.url;
+  }
+
   /**
    * Unsubscribe from all open subscriptions when the component is destroyed
    */

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

@@ -2,7 +2,7 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { Observable } from 'rxjs/internal/Observable';
-import { map, switchMap } from 'rxjs/operators';
+import { map, switchMap, take } from 'rxjs/operators';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { FollowLinkConfig } from '../../shared/utils/follow-link-config.model';
@@ -188,7 +188,7 @@ export class BitstreamDataService extends DataService<Bitstream> {
     const formatHref$ = this.bitstreamFormatService.getBrowseEndpoint().pipe(
       map((href: string) => `${href}/${format.id}`)
     );
-    observableCombineLatest(bitstreamHref$, formatHref$).pipe(
+    observableCombineLatest([bitstreamHref$, formatHref$]).pipe(
       map(([bitstreamHref, formatHref]) => {
         const options: HttpOptions = Object.create({});
         let headers = new HttpHeaders();
@@ -196,8 +196,11 @@ export class BitstreamDataService extends DataService<Bitstream> {
         options.headers = headers;
         return new PutRequest(requestId, bitstreamHref, formatHref, options);
       }),
-      configureRequest(this.requestService)
+      configureRequest(this.requestService),
-    ).subscribe();
+      take(1)
+    ).subscribe(() => {
+      this.requestService.removeByHrefSubstring(bitstream.self + '/format');
+    });
 
     return this.requestService.getByUUID(requestId).pipe(
       getResponseFromEntry()

src/app/shared/object-list/bundle-list-element/bundle-list-element.component.html

@@ -0,0 +1 @@
+<div>{{object.name}}</div>

src/app/shared/object-list/bundle-list-element/bundle-list-element.component.ts

@@ -0,0 +1,16 @@
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { Bundle } from '../../../core/shared/bundle.model';
+import { Component } from '@angular/core';
+import { listableObjectComponent } from '../../object-collection/shared/listable-object/listable-object.decorator';
+import { ViewMode } from '../../../core/shared/view-mode.model';
+
+@Component({
+  selector: 'ds-bundle-list-element',
+  templateUrl: './bundle-list-element.component.html'
+})
+/**
+ * This component is automatically used to create a list view for Bundle objects
+ */
+@listableObjectComponent(Bundle, ViewMode.ListElement)
+export class BundleListElementComponent extends AbstractListableElementComponent<Bundle> {
+}

src/app/shared/shared.module.ts

@@ -178,6 +178,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ExistingMetadataListElementComponent } from './form/builder/ds-dynamic-form-ui/existing-metadata-list-element/existing-metadata-list-element.component';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { CustomSwitchComponent } from './form/builder/ds-dynamic-form-ui/models/custom-switch/custom-switch.component';
+import { BundleListElementComponent } from './object-list/bundle-list-element/bundle-list-element.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -407,7 +408,8 @@ const ENTRY_COMPONENTS = [
   DsDynamicLookupRelationSearchTabComponent,
   DsDynamicLookupRelationSelectionTabComponent,
   DsDynamicLookupRelationExternalSourceTabComponent,
-  ExternalSourceEntryImportModalComponent
+  ExternalSourceEntryImportModalComponent,
+  BundleListElementComponent
 ];
 
 const SHARED_ITEM_PAGE_COMPONENTS = [