62589: Feedback improvements and fixes

resources/i18n/en.json5

@@ -139,6 +139,7 @@
   "collection.form.tableofcontents": "News (HTML)",
   "collection.form.title": "Name",
 
+  "collection.item-mapper.cancel": "Cancel",
   "collection.item-mapper.collection": "Collection: \"<b>{{name}}</b>\"",
   "collection.item-mapper.confirm": "Map selected items",
   "collection.item-mapper.description": "This is the item mapper tool that allows collection administrators to map items from other collections into this collection. You can search for items from other collections and map them, or browse the list of currently mapped items.",
@@ -152,7 +153,6 @@
   "collection.item-mapper.notifications.unmap.success.content": "Successfully removed the mappings of {{amount}} items.",
   "collection.item-mapper.notifications.unmap.success.head": "Remove mapping completed",
   "collection.item-mapper.remove": "Remove selected item mappings",
-  "collection.item-mapper.return": "Return",
   "collection.item-mapper.tabs.browse": "Browse",
   "collection.item-mapper.tabs.map": "Map",
 
@@ -252,6 +252,7 @@
 
   "item.edit.item-mapper.buttons.add": "Map item to selected collections",
   "item.edit.item-mapper.buttons.remove": "Remove item's mapping for selected collections",
+  "item.edit.item-mapper.cancel": "Cancel",
   "item.edit.item-mapper.description": "This is the item mapper tool that allows administrators to map this item to other collections. You can search for collections and map them, or browse the list of collections the item is currently mapped to.",
   "item.edit.item-mapper.head": "Item Mapper - Map Item to Collections",
   "item.edit.item-mapper.item": "Item: \"<b>{{name}}</b>\"",
@@ -263,7 +264,6 @@
   "item.edit.item-mapper.notifications.remove.error.head": "Removal of mapping errors",
   "item.edit.item-mapper.notifications.remove.success.content": "Successfully removed mapping of item to {{amount}} collections.",
   "item.edit.item-mapper.notifications.remove.success.head": "Removal of mapping completed",
-  "item.edit.item-mapper.return": "Return",
   "item.edit.item-mapper.tabs.browse": "Browse",
   "item.edit.item-mapper.tabs.map": "Map",
 

src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.html

@@ -14,8 +14,11 @@
                 [dsoRD$]="collectionItemsRD$"
                 [paginationOptions]="(searchOptions$ | async)?.pagination"
                 [confirmButton]="'collection.item-mapper.remove'"
+                [cancelButton]="'collection.item-mapper.cancel'"
+                [dangerConfirm]="true"
                 [hideCollection]="true"
-                (confirm)="mapItems($event, true)"></ds-item-select>
+                (confirm)="mapItems($event, true)"
+                (cancel)="onCancel()"></ds-item-select>
             </div>
           </ng-template>
         </ngb-tab>
@@ -26,7 +29,8 @@
                 <ds-search-form id="search-form"
                                 [query]="(searchOptions$ | async)?.query"
                                 [scope]="(searchOptions$ | async)?.scope"
-                                [currentUrl]="getCurrentUrl()">
+                                [currentUrl]="'./'"
+                                [inPlaceSearch]="true">
                 </ds-search-form>
               </div>
             </div>
@@ -37,13 +41,13 @@
                 [dsoRD$]="mappedItemsRD$"
                 [paginationOptions]="(searchOptions$ | async)?.pagination"
                 [confirmButton]="'collection.item-mapper.confirm'"
-                (confirm)="mapItems($event)"></ds-item-select>
+                [cancelButton]="'collection.item-mapper.cancel'"
+                (confirm)="mapItems($event)"
+                (cancel)="onCancel()"></ds-item-select>
             </div>
           </ng-template>
         </ngb-tab>
       </ngb-tabset>
-
-      <button [routerLink]="['/collections/', (collectionRD$ | async)?.payload?.id]" class="btn btn-outline-secondary">{{'collection.item-mapper.return' | translate}}</button>
     </div>
   </div>
 </div>

src/app/+collection-page/collection-item-mapper/collection-item-mapper.component.ts

@@ -9,7 +9,7 @@ import { SearchConfigurationService } from '../../+search-page/search-service/se
 import { PaginatedSearchOptions } from '../../+search-page/paginated-search-options.model';
 import { PaginatedList } from '../../core/data/paginated-list';
 import { map, switchMap, take, tap } from 'rxjs/operators';
-import { getSucceededRemoteData, toDSpaceObjectListRD } from '../../core/shared/operators';
+import { getRemoteDataPayload, getSucceededRemoteData, toDSpaceObjectListRD } from '../../core/shared/operators';
 import { SearchService } from '../../+search-page/search-service/search.service';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { DSpaceObjectType } from '../../core/shared/dspace-object-type.model';
@@ -242,4 +242,17 @@ export class CollectionItemMapperComponent implements OnInit {
     this.tabs.select('browseTab');
   }
 
+  /**
+   * When a cancel event is fired, return to the collection page
+   */
+  onCancel() {
+    this.collectionRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    ).subscribe((collection: Collection) => {
+      this.router.navigate(['/collections/', collection.id])
+    });
+  }
+
 }

src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html

@@ -14,7 +14,10 @@
                 [dsoRD$]="itemCollectionsRD$"
                 [paginationOptions]="(searchOptions$ | async)?.pagination"
                 [confirmButton]="'item.edit.item-mapper.buttons.remove'"
-                (confirm)="removeMappings($event)"></ds-collection-select>
+                [cancelButton]="'item.edit.item-mapper.cancel'"
+                [dangerConfirm]="true"
+                (confirm)="removeMappings($event)"
+                (cancel)="onCancel()"></ds-collection-select>
             </div>
           </ng-template>
         </ngb-tab>
@@ -24,7 +27,8 @@
               <div class="col-12 col-lg-6">
                 <ds-search-form id="search-form"
                                 [query]="(searchOptions$ | async)?.query"
-                                [currentUrl]="getCurrentUrl()">
+                                [currentUrl]="'./'"
+                                [inPlaceSearch]="true">
                 </ds-search-form>
               </div>
             </div>
@@ -36,13 +40,13 @@
                 [paginationOptions]="(searchOptions$ | async)?.pagination"
                 [sortOptions]="(searchOptions$ | async)?.sort"
                 [confirmButton]="'item.edit.item-mapper.buttons.add'"
-                (confirm)="mapCollections($event)"></ds-collection-select>
+                [cancelButton]="'item.edit.item-mapper.cancel'"
+                (confirm)="mapCollections($event)"
+                (cancel)="onCancel()"></ds-collection-select>
             </div>
           </ng-template>
         </ngb-tab>
       </ngb-tabset>
-
-      <button [routerLink]="['/items/', (itemRD$ | async)?.payload?.id]" class="btn btn-outline-secondary">{{'item.edit.item-mapper.return' | translate}}</button>
     </div>
   </div>
 </div>

src/app/+item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.ts

@@ -7,7 +7,7 @@ import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list';
 import { Collection } from '../../../core/shared/collection.model';
 import { Item } from '../../../core/shared/item.model';
-import { getSucceededRemoteData, toDSpaceObjectListRD } from '../../../core/shared/operators';
+import { getRemoteDataPayload, getSucceededRemoteData, toDSpaceObjectListRD } from '../../../core/shared/operators';
 import { ActivatedRoute, Router } from '@angular/router';
 import { SearchService } from '../../../+search-page/search-service/search.service';
 import { SearchConfigurationService } from '../../../+search-page/search-service/search-configuration.service';
@@ -270,4 +270,17 @@ export class ItemCollectionMapperComponent implements OnInit {
     this.tabs.select('browseTab');
   }
 
+  /**
+   * When a cancel event is fired, return to the item page
+   */
+  onCancel() {
+    this.itemRD$.pipe(
+      getSucceededRemoteData(),
+      getRemoteDataPayload(),
+      take(1)
+    ).subscribe((item: Item) => {
+      this.router.navigate(['/items/', item.id])
+    });
+  }
+
 }

src/app/+item-page/item-page.module.ts

@@ -31,8 +31,8 @@ import { MetadataFieldWrapperComponent } from './field-components/metadata-field
   imports: [
     CommonModule,
     SharedModule,
-    EditItemPageModule,
     ItemPageRoutingModule,
+    EditItemPageModule,
     SearchPageModule
   ],
   declarations: [

src/app/shared/object-select/collection-select/collection-select.component.html

@@ -24,5 +24,9 @@
       </table>
     </div>
   </ds-pagination>
-  <button class="btn btn-outline-secondary collection-confirm" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+  <div>
+    <button class="btn btn-outline-secondary collection-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
+    <button *ngIf="dangerConfirm" class="btn btn-danger collection-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+    <button *ngIf="!dangerConfirm" class="btn btn-primary collection-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+  </div>
 </ng-container>

src/app/shared/object-select/item-select/item-select.component.html

@@ -28,5 +28,9 @@
       </table>
     </div>
   </ds-pagination>
-  <button class="btn btn-outline-secondary item-confirm" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+  <div>
+    <button class="btn btn-outline-secondary item-cancel float-left" (click)="onCancel()">{{cancelButton | translate}}</button>
+    <button *ngIf="dangerConfirm" class="btn btn-danger item-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+    <button *ngIf="!dangerConfirm" class="btn btn-primary item-confirm float-right" (click)="confirmSelected()">{{confirmButton | translate}}</button>
+  </div>
 </ng-container>

src/app/shared/object-select/item-select/item-select.component.ts

@@ -1,4 +1,4 @@
-import { Component} from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { Item } from '../../../core/shared/item.model';
 import { ObjectSelectService } from '../object-select.service';
 import { ObjectSelectComponent } from '../object-select/object-select.component';
@@ -14,6 +14,12 @@ import { isNotEmpty } from '../../empty.util';
  */
 export class ItemSelectComponent extends ObjectSelectComponent<Item> {
 
+  /**
+   * Whether or not to hide the collection column
+   */
+  @Input()
+  hideCollection = false;
+
   constructor(protected objectSelectService: ObjectSelectService) {
     super(objectSelectService);
   }

src/app/shared/object-select/object-select/object-select.component.ts

@@ -12,6 +12,9 @@ import { SortOptions } from '../../../core/cache/models/sort-options.model';
  */
 export abstract class ObjectSelectComponent<TDomain> implements OnInit, OnDestroy {
 
+  /**
+   * A unique key used for the object select service
+   */
   @Input()
   key: string;
 
@@ -40,8 +43,18 @@ export abstract class ObjectSelectComponent<TDomain> implements OnInit, OnDestro
   @Input()
   confirmButton: string;
 
+  /**
+   * The message key used for the cancel button
+   * @type {string}
+   */
   @Input()
-  hideCollection = false;
+  cancelButton: string;
+
+  /**
+   * An event fired when the cancel button is clicked
+   */
+  @Output()
+  cancel = new EventEmitter<any>();
 
   /**
    * EventEmitter to return the selected UUIDs when the confirm button is pressed
@@ -50,6 +63,13 @@ export abstract class ObjectSelectComponent<TDomain> implements OnInit, OnDestro
   @Output()
   confirm: EventEmitter<string[]> = new EventEmitter<string[]>();
 
+  /**
+   * Whether or not to render the confirm button as danger (for example if confirm deletes objects)
+   * Defaults to false
+   */
+  @Input()
+  dangerConfirm = false;
+
   /**
    * The list of selected UUIDs
    */
@@ -96,4 +116,11 @@ export abstract class ObjectSelectComponent<TDomain> implements OnInit, OnDestro
     });
   }
 
+  /**
+   * Fire a cancel event
+   */
+  onCancel() {
+    this.cancel.emit();
+  }
+
 }