63838: Fix feedback

Add a title to the move page
Disable submit button when no target is selected
Add operation in progress indicator
Use updated inputSuggestion to fix bug with value selection

resources/i18n/en.json

@@ -186,6 +186,7 @@
       },
       "move": {
         "head":"Move item: {{id}}",
+        "title":"Move item",
         "description": "Select the collection you wish to move this item to. To narrow down the list of displayed collections, you can enter a search query in the box.",
         "search.placeholder": "Enter a search query to look for collections",
         "inheritpolicies": {
@@ -193,6 +194,7 @@
           "checkbox": "Inherit policies"
         },
         "move": "Move",
+        "processing": "Moving...",
         "cancel": "Cancel",
         "success": "The item has been moved succesfully",
         "error": "An error occured when attempting to move the item"

src/app/+item-page/edit-item-page/item-move/item-move.component.html

@@ -1,29 +1,31 @@
 <div class="container">
     <div class="row">
         <div class="col-12">
-            <h2>{{'item.edit.move.head' | translate: { id: (itemRD$ | async)?.payload?.handle} }}</h2>
+            <h2>{{'item.edit.move.head' | translate: {id: (itemRD$ | async)?.payload?.handle} }}</h2>
             <p>{{'item.edit.move.description' | translate}}</p>
             <div class="row">
                 <div class="col-12">
-                    <ds-input-suggestions #f id="search-form"
+                    <ds-dso-input-suggestions #f id="search-form"
                                           [suggestions]="(collectionSearchResults | async)"
                                           [placeholder]="'item.edit.move.search.placeholder'| translate"
                                           [action]="getCurrentUrl()"
                                           [name]="'item-move'"
-                                          [(ngModel)]="selectedCollection"
+                                          [(ngModel)]="selectedCollectionName"
                                           (clickSuggestion)="onClick($event)"
+                                          (typeSuggestion)="resetCollection($event)"
                                           (findSuggestions)="findSuggestions($event)"
                                           (click)="f.open()"
                                           ngDefaultControl>
-                    </ds-input-suggestions>
+                    </ds-dso-input-suggestions>
+
                 </div>
-            </div>
+            </div>                                           
             <div class="row">
                 <div class="col-12">
                     <p>
                         <input type="checkbox" name="tc" [(ngModel)]="inheritPolicies" id="inheritPoliciesCheckbox">
                         <label for="inheritPoliciesCheckbox">{{'item.edit.move.inheritpolicies.checkbox' |
-                            translate}}</label>
+                                translate}}</label>
                     </p>
                     <p>
                         {{'item.edit.move.inheritpolicies.description' | translate}}
@@ -31,9 +33,14 @@
                 </div>
             </div>
 
-            <button (click)="moveCollection()" class="btn btn-outline-secondary">{{'item.edit.move.move' | translate}}
+            <button (click)="moveCollection()" class="btn btn-primary" [disabled]=!canSubmit>
+                <span *ngIf="!processing"> {{'item.edit.move.move' | translate}}</span>
+                <span *ngIf="processing"><i class='fas fa-circle-notch fa-spin'></i>
+                    {{'item.edit.move.processing' | translate}}
+                </span>
             </button>
-            <button [routerLink]="['/items/', (itemRD$ | async)?.payload?.id, 'edit']" class="btn btn-outline-secondary">
+            <button [routerLink]="['/items/', (itemRD$ | async)?.payload?.id, 'edit']"
+                    class="btn btn-outline-secondary">
                 {{'item.edit.move.cancel' | translate}}
             </button>
         </div>

src/app/+item-page/edit-item-page/item-move/item-move.component.spec.ts

@@ -103,20 +103,8 @@ describe('ItemMoveComponent', () => {
     });
     it('should load suggestions', () => {
       const expected = [
-        {
+        collection1,
-          displayValue: 'Test collection 1',
+        collection2
-          value: {
-            name: 'Test collection 1',
-            object: collection1,
-          }
-        },
-        {
-          displayValue: 'Test collection 2',
-          value: {
-            name: 'Test collection 2',
-            object: collection2,
-          }
-        }
       ];
 
       comp.collectionSearchResults.subscribe((value) => {
@@ -128,20 +116,18 @@ describe('ItemMoveComponent', () => {
       expect(comp.getCurrentUrl()).toEqual('fake-url/fake-id/edit');
     });
     it('should on click select the correct collection name and id', () => {
-      const data = {
+      const data = collection1;
-        name: 'Test collection 1',
+
-        object: collection1,
-      };
       comp.onClick(data);
 
-      expect(comp.selectedCollection).toEqual('Test collection 1');
+      expect(comp.selectedCollectionName).toEqual('Test collection 1');
-      expect(comp.selectedCollectionObject).toEqual(collection1);
+      expect(comp.selectedCollection).toEqual(collection1);
     });
     describe('moveCollection', () => {
       it('should call itemDataService.moveToCollection', () => {
         comp.itemId = 'item-id';
-        comp.selectedCollection = 'selected-collection-id';
+        comp.selectedCollectionName = 'selected-collection-id';
-        comp.selectedCollectionObject = collection1;
+        comp.selectedCollection = collection1;
         comp.moveCollection();
 
         expect(mockItemDataService.moveToCollection).toHaveBeenCalledWith('item-id', collection1);

src/app/+item-page/edit-item-page/item-move/item-move.component.ts

@@ -1,23 +1,23 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
-import {SearchService} from '../../../+search-page/search-service/search.service';
+import { SearchService } from '../../../+search-page/search-service/search.service';
-import {first, map} from 'rxjs/operators';
+import { first, map } from 'rxjs/operators';
-import {DSpaceObjectType} from '../../../core/shared/dspace-object-type.model';
+import { DSpaceObjectType } from '../../../core/shared/dspace-object-type.model';
-import {SearchOptions} from '../../../+search-page/search-options.model';
+import { SearchOptions } from '../../../+search-page/search-options.model';
-import {RemoteData} from '../../../core/data/remote-data';
+import { RemoteData } from '../../../core/data/remote-data';
-import {DSpaceObject} from '../../../core/shared/dspace-object.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
-import {PaginatedList} from '../../../core/data/paginated-list';
+import { PaginatedList } from '../../../core/data/paginated-list';
-import {SearchResult} from '../../../+search-page/search-result.model';
+import { SearchResult } from '../../../+search-page/search-result.model';
-import {Item} from '../../../core/shared/item.model';
+import { Item } from '../../../core/shared/item.model';
-import {ActivatedRoute, Router} from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
-import {NotificationsService} from '../../../shared/notifications/notifications.service';
+import { NotificationsService } from '../../../shared/notifications/notifications.service';
-import {TranslateService} from '@ngx-translate/core';
+import { TranslateService } from '@ngx-translate/core';
-import {getSucceededRemoteData} from '../../../core/shared/operators';
+import { getSucceededRemoteData } from '../../../core/shared/operators';
-import {ItemDataService} from '../../../core/data/item-data.service';
+import { ItemDataService } from '../../../core/data/item-data.service';
-import {getItemEditPath} from '../../item-page-routing.module';
+import { getItemEditPath } from '../../item-page-routing.module';
-import {Observable} from 'rxjs';
+import { Observable, of as observableOf } from 'rxjs';
-import {of as observableOf} from 'rxjs';
 import { RestResponse } from '../../../core/cache/response.models';
 import { Collection } from '../../../core/shared/collection.model';
+import { tap } from 'rxjs/internal/operators/tap';
 
 @Component({
   selector: 'ds-item-move',
@@ -31,13 +31,18 @@ export class ItemMoveComponent implements OnInit {
    * TODO: There is currently no backend support to change the owningCollection and inherit policies,
    * TODO: when this is added, the inherit policies option should be used.
    */
+
+  selectorType = DSpaceObjectType.COLLECTION;
+
   inheritPolicies = false;
   itemRD$: Observable<RemoteData<Item>>;
   collectionSearchResults: Observable<any[]> = observableOf([]);
-  selectedCollection: string;
+  selectedCollectionName: string;
-  selectedCollectionObject: Collection;
+  selectedCollection: Collection;
+  canSubmit = false;
 
   itemId: string;
+  processing = false;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -48,7 +53,7 @@ export class ItemMoveComponent implements OnInit {
   }
 
   ngOnInit(): void {
-    this.itemRD$ = this.route.data.pipe(map((data) => data.item),getSucceededRemoteData()) as Observable<RemoteData<Item>>;
+    this.itemRD$ = this.route.data.pipe(map((data) => data.item), getSucceededRemoteData()) as Observable<RemoteData<Item>>;
     this.itemRD$.subscribe((rd) => {
         this.itemId = rd.payload.id;
       }
@@ -76,12 +81,9 @@ export class ItemMoveComponent implements OnInit {
       first(),
       map((rd: RemoteData<PaginatedList<SearchResult<DSpaceObject>>>) => {
         return rd.payload.page.map((searchResult) => {
-          return {
+          return searchResult.indexableObject
-            displayValue: searchResult.indexableObject.name,
+        })
-            value: {name: searchResult.indexableObject.name, object: searchResult.indexableObject}
+      }) ,
-          };
-        });
-      })
     );
 
   }
@@ -91,8 +93,9 @@ export class ItemMoveComponent implements OnInit {
    * @param data - obtained from the ds-input-suggestions component
    */
   onClick(data: any): void {
-    this.selectedCollection = data.name;
+    this.selectedCollection = data;
-    this.selectedCollectionObject = data.object;
+    this.selectedCollectionName = data.name;
+    this.canSubmit = true;
   }
 
   /**
@@ -106,7 +109,8 @@ export class ItemMoveComponent implements OnInit {
    * Moves the item to a new collection based on the selected collection
    */
   moveCollection() {
-    this.itemDataService.moveToCollection(this.itemId, this.selectedCollectionObject).pipe(first()).subscribe(
+    this.processing = true;
+    this.itemDataService.moveToCollection(this.itemId, this.selectedCollection).pipe(first()).subscribe(
       (response: RestResponse) => {
         this.router.navigate([getItemEditPath(this.itemId)]);
         if (response.isSuccessful) {
@@ -114,8 +118,16 @@ export class ItemMoveComponent implements OnInit {
         } else {
           this.notificationsService.error(this.translateService.get('item.edit.move.error'));
         }
+        this.processing = false;
       }
     );
+  }
 
+  /**
+   * Resets the can submit when the user changes the content of the input field
+   * @param data
+   */
+  resetCollection(data: any) {
+    this.canSubmit = false;
   }
 }

src/app/+item-page/edit-item-page/item-operation/item-operation.component.html

@@ -4,7 +4,7 @@
       </span>
 </div>
 <div *ngIf="!operation.disabled" class="col-9 float-left action-button">
-  <a class="btn btn-outline-secondary" href="{{operation.operationUrl}}">
+  <a class="btn btn-outline-secondary" [routerLink]="operation.operationUrl">
     {{'item.edit.tabs.status.buttons.' + operation.operationKey + '.button' | translate}}
   </a>
 </div>

src/app/+item-page/edit-item-page/item-operation/item-operation.component.spec.ts

@@ -1,8 +1,9 @@
-import {ItemOperation} from './itemOperation.model';
+import { ItemOperation } from './itemOperation.model';
-import {async, TestBed} from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
-import {ItemOperationComponent} from './item-operation.component';
+import { ItemOperationComponent } from './item-operation.component';
-import {TranslateModule} from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
-import {By} from '@angular/platform-browser';
+import { By } from '@angular/platform-browser';
+import { RouterTestingModule } from '@angular/router/testing';
 
 describe('ItemOperationComponent', () => {
   let itemOperation: ItemOperation;
@@ -12,7 +13,7 @@ describe('ItemOperationComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [TranslateModule.forRoot()],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
       declarations: [ItemOperationComponent]
     }).compileComponents();
   }));