88300: Implement feedback

src/app/browse-by/browse-by-routing.module.ts

@@ -17,7 +17,7 @@ import { ThemedBrowseBySwitcherComponent } from './browse-by-switcher/themed-bro
             component: ThemedBrowseBySwitcherComponent,
             canActivate: [BrowseByGuard],
             resolve: { breadcrumb: BrowseByI18nBreadcrumbResolver },
-            data: { title: 'browse.title', breadcrumbKey: 'browse.metadata' }
+            data: { title: 'browse.title.page', breadcrumbKey: 'browse.metadata' }
           }
         ]
       }])

src/app/browse-by/browse-by-title-page/browse-by-title-page.component.ts

@@ -45,6 +45,7 @@ export class BrowseByTitlePageComponent extends BrowseByMetadataPageComponent {
           return [Object.assign({}, routeParams, queryParams),currentPage,currentSort];
         })
       ).subscribe(([params, currentPage, currentSort]: [Params, PaginationComponentOptions, SortOptions]) => {
+        this.startsWith = +params.startsWith || params.startsWith;
         this.browseId = params.id || this.defaultBrowseId;
         this.updatePageWithItems(browseParamsToOptions(params, currentPage, currentSort, this.browseId), undefined, undefined);
         this.updateParent(params.scope);

src/app/shared/browse-by/browse-by.component.html

@@ -3,8 +3,7 @@
   <ng-container *ngComponentOutlet="getStartsWithComponent(); injector: objectInjector;"></ng-container>
   <div *ngIf="objects?.hasSucceeded && !objects?.isLoading && objects?.payload?.page.length > 0" @fadeIn>
       <div *ngIf="shouldDisplayResetButton$ |async" class="mb-2 reset">
-          <a class="btn btn-secondary" [routerLink]="[]"
+          <button class="btn btn-secondary" (click)="back()"><i class="fas fa-arrow-left"></i> {{'browse.back.all-results' | translate}}</button>
-             [queryParams]="{startsWith: null, value: null}" queryParamsHandling="merge"><i class="fas fa-arrow-left"></i> {{'browse.back.all-results' | translate}}</a>
       </div>
     <ds-viewable-collection
       [config]="paginationConfig"
@@ -19,9 +18,7 @@
   <ds-error *ngIf="objects?.hasFailed" message="{{'error.browse-by' | translate}}"></ds-error>
   <div *ngIf="!objects?.isLoading && objects?.payload?.page.length === 0">
     <div *ngIf="shouldDisplayResetButton$ |async" class="d-inline-block mb-4 reset">
-      <a class="btn btn-secondary" [routerLink]="[]"
+      <button class="btn btn-secondary" (click)="back()"><i class="fas fa-arrow-left"></i> {{'browse.back.all-results' | translate}}</button>
-         [queryParams]="{startsWith: null, value: null}" queryParamsHandling="merge"><i
-              class="fas fa-arrow-left"></i> {{'browse.back.all-results' | translate}}</a>
     </div>
     <div class="alert alert-info w-100" role="alert">
       {{'browse.empty' | translate}}

src/app/shared/browse-by/browse-by.component.spec.ts

@@ -17,9 +17,13 @@ import { SortDirection, SortOptions } from '../../core/cache/models/sort-options
 import { createSuccessfulRemoteDataObject$ } from '../remote-data.utils';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { PaginationServiceStub } from '../testing/pagination-service.stub';
-import { ListableObjectComponentLoaderComponent } from '../object-collection/shared/listable-object/listable-object-component-loader.component';
+import {
+  ListableObjectComponentLoaderComponent
+} from '../object-collection/shared/listable-object/listable-object-component-loader.component';
 import { ViewMode } from '../../core/shared/view-mode.model';
-import { BrowseEntryListElementComponent } from '../object-list/browse-entry-list-element/browse-entry-list-element.component';
+import {
+  BrowseEntryListElementComponent
+} from '../object-list/browse-entry-list-element/browse-entry-list-element.component';
 import {
   DEFAULT_CONTEXT,
   listableObjectComponent,
@@ -30,6 +34,8 @@ import { ThemeService } from '../theme-support/theme.service';
 import { SelectableListService } from '../object-list/selectable-list/selectable-list.service';
 import { HostWindowServiceStub } from '../testing/host-window-service.stub';
 import { HostWindowService } from '../host-window.service';
+import { RouteService } from '../../core/services/route.service';
+import { routeServiceStub } from '../testing/route-service.stub';
 import SpyObj = jasmine.SpyObj;
 
 @listableObjectComponent(BrowseEntry, ViewMode.ListElement, DEFAULT_CONTEXT, 'custom')
@@ -39,8 +45,6 @@ import SpyObj = jasmine.SpyObj;
 })
 class MockThemedBrowseEntryListElementComponent {
 }
-import { RouteService } from '../../core/services/route.service';
-import { routeServiceStub } from '../testing/route-service.stub';
 
 describe('BrowseByComponent', () => {
   let comp: BrowseByComponent;
@@ -112,6 +116,8 @@ describe('BrowseByComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(BrowseByComponent);
     comp = fixture.componentInstance;
+    comp.paginationConfig = paginationConfig;
+    fixture.detectChanges();
   });
 
   it('should display a loading message when objects is empty', () => {
@@ -208,5 +214,14 @@ describe('BrowseByComponent', () => {
       expect(button).toBeDefined();
     });
   });
+  describe('back', () => {
+    it('should navigate back to the main browse page', () => {
+      comp.back();
+      expect(paginationService.updateRoute).toHaveBeenCalledWith('test-pagination', {page: 1}, {
+        value: null,
+        startsWith: null
+      });
+    });
+  });
 
 });

src/app/shared/browse-by/browse-by.component.ts

@@ -70,7 +70,7 @@ export class BrowseByComponent implements OnInit {
   /**
    * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
    */
-  @Input() showPaginator = false;
+  @Input() showPaginator = true;
 
   /**
    * It is used to hide or show gear
@@ -173,4 +173,7 @@ export class BrowseByComponent implements OnInit {
     );
   }
 
+  back() {
+    this.paginationService.updateRoute(this.paginationConfig.id, {page: 1}, {value: null, startsWith: null});
+  }
 }

src/app/shared/starts-with/date/starts-with-date.component.spec.ts

@@ -85,14 +85,9 @@ describe('StartsWithDateComponent', () => {
     let select;
     let input;
     let expectedValue;
-    let extras;
 
     beforeEach(() => {
       expectedValue = '' + options[0];
-      extras = {
-        queryParams: Object.assign({ startsWith: expectedValue }),
-        queryParamsHandling: 'merge'
-      };
 
       select = fixture.debugElement.query(By.css('select#year-select')).nativeElement;
       input = fixture.debugElement.query(By.css('input')).nativeElement;
@@ -106,7 +101,7 @@ describe('StartsWithDateComponent', () => {
     });
 
     it('should add a startsWith query parameter', () => {
-      expect(router.navigate).toHaveBeenCalledWith([], extras);
+      expect(paginationService.updateRoute).toHaveBeenCalledWith('page-id', {page: 1}, {startsWith: expectedValue});
     });
 
     it('should automatically fill in the input field', () => {
@@ -128,7 +123,7 @@ describe('StartsWithDateComponent', () => {
       });
 
       it('should add a startsWith query parameter', () => {
-        expect(router.navigate).toHaveBeenCalledWith([], extras);
+        expect(paginationService.updateRoute).toHaveBeenCalledWith('page-id', {page: 1}, {startsWith: expectedValue});
       });
 
       it('should automatically fill in the input field', () => {
@@ -141,11 +136,6 @@ describe('StartsWithDateComponent', () => {
 
       beforeEach(() => {
         expectedValue = `${options[0]}-01`;
-        extras = {
-          queryParams: Object.assign({ startsWith: expectedValue }),
-          queryParamsHandling: 'merge'
-        };
-
         monthSelect = fixture.debugElement.query(By.css('select#month-select')).nativeElement;
         monthSelect.value = monthSelect.options[1].value;
         monthSelect.dispatchEvent(new Event('change'));
@@ -157,7 +147,7 @@ describe('StartsWithDateComponent', () => {
       });
 
       it('should add a startsWith query parameter', () => {
-        expect(router.navigate).toHaveBeenCalledWith([], extras);
+        expect(paginationService.updateRoute).toHaveBeenCalledWith('page-id', {page: 1}, {startsWith: expectedValue});
       });
 
       it('should automatically fill in the input field', () => {
@@ -186,7 +176,7 @@ describe('StartsWithDateComponent', () => {
     });
 
     it('should add a startsWith query parameter', () => {
-      expect(router.navigate).toHaveBeenCalledWith([], extras);
+      expect(paginationService.updateRoute).toHaveBeenCalledWith('page-id', {page: 1}, {startsWith: expectedValue});
     });
   });
 

src/app/shared/starts-with/date/starts-with-date.component.ts

@@ -68,7 +68,7 @@ export class StartsWithDateComponent extends StartsWithAbstractComponent {
   setStartsWithYearEvent(event: Event) {
     this.startsWithYear = +(event.target as HTMLInputElement).value;
     this.setStartsWithYearMonth();
-    this.setStartsWithParam();
+    this.setStartsWithParam(true);
   }
 
   /**
@@ -78,7 +78,7 @@ export class StartsWithDateComponent extends StartsWithAbstractComponent {
   setStartsWithMonthEvent(event: Event) {
     this.startsWithMonth = (event.target as HTMLInputElement).value;
     this.setStartsWithYearMonth();
-    this.setStartsWithParam();
+    this.setStartsWithParam(true);
   }
 
   /**
@@ -131,7 +131,7 @@ export class StartsWithDateComponent extends StartsWithAbstractComponent {
     } else {
       this.startsWithYear = +startsWith;
     }
-    this.setStartsWithParam();
+    this.setStartsWithParam(false);
   }
 
   /**

src/app/shared/starts-with/starts-with-abstract.component.ts

@@ -70,21 +70,25 @@ export abstract class StartsWithAbstractComponent implements OnInit, OnDestroy {
    */
   setStartsWith(startsWith: string) {
     this.startsWith = startsWith;
-    this.setStartsWithParam();
+    this.setStartsWithParam(false);
   }
 
   /**
    * Add/Change the url query parameter startsWith using the local variable
    */
-  setStartsWithParam() {
+  setStartsWithParam(resetPage = true) {
     if (this.startsWith === '-1') {
       this.startsWith = undefined;
     }
+    if (resetPage) {
+      this.paginationService.updateRoute(this.paginationId, {page: 1}, { startsWith: this.startsWith });
+    } else {
       this.router.navigate([], {
         queryParams: Object.assign({ startsWith: this.startsWith }),
         queryParamsHandling: 'merge'
       });
     }
+  }
 
   /**
    * Submit the form data. Called when clicking a submit button on the form.

src/app/shared/starts-with/text/starts-with-text.component.spec.ts

@@ -54,10 +54,6 @@ describe('StartsWithTextComponent', () => {
   describe('when filling in the input form', () => {
     let form;
     const expectedValue = 'A';
-    const extras: NavigationExtras = {
-      queryParams: Object.assign({ startsWith: expectedValue }),
-      queryParamsHandling: 'merge'
-    };
 
     beforeEach(() => {
       form = fixture.debugElement.query(By.css('form'));
@@ -71,7 +67,7 @@ describe('StartsWithTextComponent', () => {
     });
 
     it('should add a startsWith query parameter', () => {
-      expect(router.navigate).toHaveBeenCalledWith([], extras);
+      expect(paginationService.updateRoute).toHaveBeenCalledWith('page-id', {page: 1}, {startsWith: expectedValue});
     });
   });
 

src/app/shared/starts-with/text/starts-with-text.component.ts

@@ -28,11 +28,11 @@ export class StartsWithTextComponent extends StartsWithAbstractComponent {
   /**
    * Add/Change the url query parameter startsWith using the local variable
    */
-  setStartsWithParam() {
+  setStartsWithParam(resetPage = true) {
     if (this.startsWith === '0-9') {
       this.startsWith = '0';
     }
-    super.setStartsWithParam();
+    super.setStartsWithParam(resetPage);
   }
 
   /**

src/assets/i18n/en.json5

@@ -734,6 +734,8 @@
 
   "browse.title": "Browsing {{ collection }} by {{ field }}{{ startsWith }} {{ value }}",
 
+  "browse.title.page": "Browsing {{ collection }} by {{ field }} {{ value }}",
+
 
   "chips.remove": "Remove chip",