44024: pagination fixes and translation

resources/i18n/en.json

@@ -69,5 +69,14 @@
       "head": "Communities in DSpace",
       "help": "Select a community to browse its collections."
     }
+  },
+  "search": {
+    "form": {
+      "search": "Search",
+      "search_dspace": "Search DSpace"
+    },
+    "results": {
+      "title": "Search Results"
+    }
   }
 }

src/app/search-page/search-page.component.html

@@ -1,4 +1,4 @@
 <div class="search-page">
     <ds-search-form (formSubmit)="updateSearch($event)" [query]="query"></ds-search-form>
-    <ds-search-results [searchResults]="results"></ds-search-results>
+    <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
 </div>

src/app/search-page/search-page.component.ts

@@ -6,6 +6,7 @@ import { SearchResult } from '../search/search-result.model';
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { SortOptions } from '../core/cache/models/sort-options.model';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { SearchOptions } from '../search/search-options.model';
 
 /**
  * This component renders a simple item page.
@@ -20,11 +21,12 @@ import { PaginationComponentOptions } from '../shared/pagination/pagination-comp
 })
 export class SearchPageComponent implements OnInit, OnDestroy {
   private sub;
-  private query: string;
+  query: string;
   private scope: string;
   private page: number;
-  private results: RemoteData<Array<SearchResult<DSpaceObject>>>;
+  results: RemoteData<Array<SearchResult<DSpaceObject>>>;
   private currentParams = {};
+  searchOptions: SearchOptions;
 
   constructor(private service: SearchService,
               private route: ActivatedRoute,
@@ -40,13 +42,12 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           this.scope = params.scope;
           this.page = +params.page || 1;
           const pagination: PaginationComponentOptions = new PaginationComponentOptions();
-          pagination.id = 'results-pagination';
+          pagination.id = 'search-results-pagination';
           pagination.currentPage = this.page;
-          pagination.pageSize = +params.pageSize;
-          this.results = this.service.search(this.query, this.scope, {
-            pagination: pagination,
-            sort: new SortOptions(params.sortField, params.sortDirection)
-          });
+          pagination.pageSize = +params.pageSize || 10;
+          const sort: SortOptions =  new SortOptions(params.sortField, params.sortDirection);
+          this.searchOptions =  {pagination: pagination, sort: sort};
+          this.results = this.service.search(this.query, this.scope, this.searchOptions);
         }
       );
   }

src/app/search-page/search-results/search-results.component.html

@@ -1,2 +1,3 @@
+<h2 *ngIf="(searchResults.payload | async)?.length > 0">{{ 'search.results.title' | translate }}</h2>
 <ds-object-list [config]="searchConfig.pagination" [sortConfig]="searchConfig.sort"
                 [objects]="searchResults" [hideGear]="false"></ds-object-list>

src/app/search-page/search-results/search-results.compontent.ts

@@ -17,16 +17,7 @@ import { SearchOptions } from '../../search/search-options.model';
   templateUrl: './search-results.component.html',
 })
 
-export class SearchResultsComponent implements OnInit {
+export class SearchResultsComponent {
   @Input() searchResults: RemoteData<Array<SearchResult<DSpaceObject>>>;
-
   @Input() searchConfig: SearchOptions;
-
-  ngOnInit(): void {
-    this.searchConfig = new SearchOptions();
-    this.searchConfig.pagination = new PaginationComponentOptions();
-    this.searchConfig.pagination.id = 'search-results-pagination';
-    this.searchConfig.sort = new SortOptions();
-  }
-
 }

src/app/shared/pagination/pagination.component.ts

@@ -199,8 +199,8 @@ export class PaginationComponent implements OnDestroy, OnInit {
           this.sortDirection = this.sortOptions.direction;
           this.sortField = this.sortOptions.field;
         }
+        this.setShowingDetail();
       }));
-    this.setShowingDetail();
   }
 
   /**
@@ -246,6 +246,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
    */
   public setPageSize(pageSize: number) {
     this.pageSize = pageSize;
+    this.doPageChange(1);
     this.updateRoute();
     this.setShowingDetail();
     this.pageSizeChange.emit(pageSize);
@@ -259,6 +260,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
    */
   public setSortDirection(sortDirection: SortDirection) {
     this.sortDirection = sortDirection;
+    this.doPageChange(1);
     this.updateRoute();
     this.setShowingDetail();
     this.sortDirectionChange.emit(sortDirection);
@@ -272,6 +274,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
    */
   public setSortField(field: string) {
     this.sortField = field;
+    this.doPageChange(1);
     this.updateRoute();
     this.setShowingDetail();
     this.sortFieldChange.emit(field);
@@ -298,11 +301,11 @@ export class PaginationComponent implements OnDestroy, OnInit {
   private setShowingDetail() {
     let firstItem;
     let lastItem;
-    const lastPage = Math.round(this.collectionSize / this.pageSize);
+    const pageMax = this.pageSize  * this.currentPage;
 
     firstItem = this.pageSize * (this.currentPage - 1) + 1;
-    if (this.currentPage !== lastPage) {
-      lastItem = this.pageSize * this.currentPage;
+    if (this.collectionSize > pageMax) {
+      lastItem = pageMax;
     } else {
       lastItem = this.collectionSize;
     }

src/app/shared/search-form/search-form.component.html

@@ -1,16 +1,16 @@
 <form #form="ngForm" (ngSubmit)="onSubmit(form.value)">
-    <div class="input-group">
+    <div class="form-group input-group">
         <input type="text" [ngModel]="query" name="query" class="form-control" aria-label="Search input">
         <div class="input-group-btn" ngbDropdown>
-            <button type="submit" class="btn btn-secondary">Search DSpace</button>
+            <button type="submit" class="btn btn-secondary">{{ 'search.form.search_dspace' | translate }}</button>
             <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"
                     aria-haspopup="true" aria-expanded="false" id="searchDropdown" ngbDropdownToggle>
                 <span class="sr-only">Toggle Dropdown</span>
             </button>
             <div ngbDropdownMenu class="dropdown-menu dropdown-menu-right" aria-labelledby="searchDropdown">
-                <a class="dropdown-item" (click)="onSubmit(form.value)">Search DSpace</a>
-                <a class="dropdown-item" (click)="onSubmit(form.value, '7669c72a-3f2a-451f-a3b9-9210e7a4c02f')">Search OR2017 - Demonstration</a>
-                <a class="dropdown-item" (click)="onSubmit(form.value, '9076bd16-e69a-48d6-9e41-0238cb40d863')">Search Sample Community</a>
+                <a class="dropdown-item" (click)="onSubmit(form.value)">{{ 'search.form.search_dspace' | translate }}</a>
+                <a class="dropdown-item" (click)="onSubmit(form.value, '7669c72a-3f2a-451f-a3b9-9210e7a4c02f')">{{ 'search.form.search' | translate }} OR2017 - Demonstration</a>
+                <a class="dropdown-item" (click)="onSubmit(form.value, '9076bd16-e69a-48d6-9e41-0238cb40d863')">{{ 'search.form.search' | translate }} Sample Community</a>
             </div>
         </div>
     </div>

src/app/shared/search-form/search-form.component.ts

@@ -11,12 +11,10 @@ import { Component, OnInit, EventEmitter, Output, Input } from '@angular/core';
   styleUrls: ['./search-form.component.scss'],
   templateUrl: './search-form.component.html',
 })
-export class SearchFormComponent implements OnInit {
+export class SearchFormComponent {
   @Output() formSubmit: EventEmitter<any> = new EventEmitter<any>();
   @Input() query: string;
 
-  ngOnInit(): void { }
-
   onSubmit(form: any, scope?: string) {
     const data: any = Object.assign({}, form, { scope: scope });
     this.formSubmit.emit(data);