195 Pre-test commit

resources/i18n/en.json

@@ -85,7 +85,15 @@
     "sidebar": {
       "close": "Back to results",
       "open": "Search Tools",
-      "results": "results"
+      "results": "results",
+      "filters":{
+        "title":"Filters"
+      },
+      "settings":{
+        "title":"Settings",
+        "sort-by":"Sort By",
+        "rpp":"Results per page"
+      }
     },
     "view-switch": {
       "show-list": "Show as list",

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

@@ -1,15 +1,19 @@
 <div class="container">
     <div class="search-page row">
-        <ds-search-sidebar *ngIf="!(isMobileView | async)" class="col-3 sidebar-sm-sticky"
+      <div class="col-3">
+        <ds-search-sidebar *ngIf="!(isMobileView | async)" class="sidebar-sm-sticky"
                            id="search-sidebar"
                            [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"></ds-search-sidebar>
-        <div class="col-12 col-sm-9">
+        </div>
+        <div class="col-9">
+          <div id="search-header" class="row">
             <ds-search-form id="search-form"
                             [query]="query"
                             [scope]="(scopeObjectRDObs | async)?.payload"
                             [currentParams]="currentParams"
                             [scopes]="(scopeListRDObs | async)?.payload">
             </ds-search-form>
+        </div>
             <div class="row">
                 <div id="search-body"
                      class="row-offcanvas row-offcanvas-left"
@@ -36,5 +40,6 @@
             </div>
         </div>
     </div>
+  </div>
 </div>
 

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

@@ -49,12 +49,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     this.isMobileView = this.windowService.isXs();
     this.scopeListRDObs = communityService.findAll();
     // Initial pagination config
-    const pagination: PaginationComponentOptions = new PaginationComponentOptions();
+    this.searchOptions = this.service.searchOptions;
-    pagination.id = 'search-results-pagination';
-    pagination.currentPage = 1;
-    pagination.pageSize = 10;
-    const sort: SortOptions = new SortOptions();
-    this.searchOptions = { pagination: pagination, sort: sort };
   }
 
   ngOnInit(): void {

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

@@ -11,6 +11,7 @@ import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
 import { SearchSidebarEffects } from './search-sidebar/search-sidebar.effects';
+import { SearchSettingsComponent } from './search-settings/search-settings.component';
 import { EffectsModule } from '@ngrx/effects';
 import { SidebarFiltersComponent } from './search-filters/search-filters.component';
 import { SidebarFilterComponent } from './search-filters/search-filter/search-filter.component';
@@ -32,6 +33,7 @@ const effects = [
     SearchPageComponent,
     SearchResultsComponent,
     SearchSidebarComponent,
+    SearchSettingsComponent,
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
     CommunitySearchResultListElementComponent,

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

@@ -1,11 +1,10 @@
 <div *ngIf="searchResults?.hasSucceeded" @fadeIn>
-  <h2 *ngIf="searchResults?.payload?.length > 0">{{ 'search.results.head' | translate }}</h2>
+  <h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
-  <ds-object-list
+<ds-object-list
-    [config]="searchConfig.pagination"
+  [config]="searchConfig.pagination"
-    [sortConfig]="searchConfig.sort"
+  [sortConfig]="searchConfig.sort"
-    [objects]="searchResults"
+  [objects]="searchResults"
-    [hideGear]="false">
+  [hideGear]="true">
-  </ds-object-list>
+</ds-object-list></div>
-</div>
 <ds-loading *ngIf="searchResults?.isLoading" message="{{'loading.search-results' | translate}}"></ds-loading>
-<ds-error *ngIf="searchResults?.hasFailed" message="{{'error.search-results' | translate}}"></ds-error>
+<ds-error *ngIf="searchResults?.hasFailed" message="{{'error.search-results' | translate}}"></ds-error>

src/app/+search-page/search-service/search.service.ts

@@ -14,8 +14,10 @@ import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
 import { ViewMode } from '../../+search-page/search-options.model';
-import { Router, NavigationExtras, ActivatedRoute, Params } from '@angular/router';
+import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { RouteService } from '../../shared/route.service';
+import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
+import { SortOptions } from 'src/app/core/cache/models/sort-options.model';
 
 function shuffle(array: any[]) {
   let i = 0;
@@ -80,15 +82,25 @@ export class SearchService implements OnDestroy {
         isOpenByDefault: false
       })
   ];
+  // searchOptions: BehaviorSubject<SearchOptions>;
+  searchOptions: SearchOptions;
 
   constructor(private itemDataService: ItemDataService,
               private routeService: RouteService,
               private route: ActivatedRoute,
               private router: Router) {
 
+    const pagination: PaginationComponentOptions = new PaginationComponentOptions();
+    pagination.id = 'search-results-pagination';
+    pagination.currentPage = 1;
+    pagination.pageSize = 10;
+    const sort: SortOptions = new SortOptions();
+    this.searchOptions = { pagination: pagination, sort: sort };
+    // this.searchOptions = new BehaviorSubject<SearchOptions>(searchOptions);
   }
 
   search(query: string, scopeId?: string, searchOptions?: SearchOptions): Observable<RemoteData<Array<SearchResult<DSpaceObject>>>> {
+    this.searchOptions = this.searchOptions;
     let self = `https://dspace7.4science.it/dspace-spring-rest/api/search?query=${query}`;
     if (hasValue(scopeId)) {
       self += `&scope=${scopeId}`;

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

@@ -0,0 +1,25 @@
+<h3>{{ 'search.sidebar.settings.title' | translate}}</h3>
+<div *ngIf="[searchOptions].sort">
+  <h4>{{ 'search.sidebar.settings.sort-by' | translate}}</h4>
+    <div class="form-group">
+      <select class="form-control" (change)="reloadOrder($event)">
+        <option *ngFor="let direction of (sortDirections | dsKeys); let currentElementIndex = index" [value]="currentElementIndex"
+                [selected]="direction === searchOptions.sort? 'selected': null">
+          {{direction.value}}
+        </option>
+      </select>
+    </div>
+</div>
+
+<div *ngIf="searchOptions.pagination.pageSize">
+  <h4>{{ 'search.sidebar.settings.rpp' | translate}}</h4>
+
+    <div class="form-group">
+      <select class="form-control" (change)="reloadRPP($event)">
+        <option *ngFor="let item of searchOptions.pagination.pageSizeOptions" [value]="item"
+                [selected]="item === searchOptions.pagination.pageSize ? 'selected': null">
+          {{item}}
+        </option>
+      </select>
+    </div>
+</div>

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

@@ -0,0 +1,79 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { SearchService } from '../search-service/search.service';
+import { SearchOptions } from '../search-options.model';
+import { SortDirection } from '../../core/cache/models/sort-options.model';
+import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
+
+@Component({
+  selector: 'ds-search-settings',
+  styleUrls: ['./search-settings.component.scss'],
+  templateUrl: './search-settings.component.html',
+})
+export class SearchSettingsComponent implements OnInit{
+
+  @Input() searchOptions: SearchOptions;
+  /**
+   * Declare SortDirection enumeration to use it in the template
+   */
+  public sortDirections = SortDirection;
+  /**
+   * Number of items per page.
+   */
+  public pageSize;
+
+  private sub;
+  private scope: string;
+  query: string;
+  page: number;
+  direction: SortDirection;
+  currentParams = {};
+
+  constructor(private service: SearchService,
+              private route: ActivatedRoute,
+              private router: Router){
+
+  }
+
+  ngOnInit(): void {
+    this.searchOptions = this.service.searchOptions;
+    this.pageSize = this.searchOptions.pagination.pageSize;
+    this.sub = this.route
+      .queryParams
+      .subscribe((params) => {
+        this.currentParams = params;
+        this.query = params.query || '';
+        this.scope = params.scope;
+        this.page  = +params.page || this.searchOptions.pagination.currentPage;
+        this.pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+        this.direction = +params.sortDirection || this.searchOptions.sort.direction;
+      });
+  }
+  reloadRPP(event:Event) {
+    let value = (<HTMLInputElement>event.target).value;
+    this.searchOptions.sort.direction;
+    const navigationExtras: NavigationExtras = {
+      queryParams: {
+        query:this.query,
+        pageSize:value,
+        scope: this.scope,
+        page:this.page,
+        sortDirection:this.direction
+      }
+    };
+    this.router.navigate(['/search'], navigationExtras);
+  }
+
+  reloadOrder(event:Event) {
+    let value = (<HTMLInputElement>event.target).value;
+    const navigationExtras: NavigationExtras = {
+      queryParams: {
+        query:this.query,
+        pageSize:this.pageSize,
+        scope: this.scope,
+        page:this.page,
+        sortDirection:value
+      }
+    };
+    this.router.navigate(['/search'], navigationExtras);
+  }
+}

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

@@ -9,5 +9,6 @@
     <div id="search-sidebar-content">
         <ds-view-mode-switch class="d-none d-sm-block"></ds-view-mode-switch>
         <ds-search-filters></ds-search-filters>
+        <ds-search-settings></ds-search-settings>
     </div>
-</div>
+</div>

src/app/shared/pagination/pagination.component.html

@@ -1,12 +1,12 @@
 <div *ngIf="currentPageState == undefined || currentPageState == currentPage">
-  <div *ngIf="!hideGear" class="pagination-masked clearfix top">
+  <div  class="pagination-masked clearfix top">
     <div class="row">
       <div class="col pagination-info">
         <span class="align-middle hidden-xs-down">{{ 'pagination.showing.label' | translate }}</span>
         <span class="align-middle" *ngIf="collectionSize">{{ 'pagination.showing.detail' | translate:getShowingDetails(collectionSize)}}</span>
       </div>
       <div class="col">
-        <div ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
+        <div *ngIf="!hideGear" ngbDropdown #paginationControls="ngbDropdown" placement="bottom-right" class="d-inline-block float-right">
           <button class="btn btn-outline-primary" id="paginationControls" ngbDropdownToggle><i class="fa fa-cog" aria-hidden="true"></i></button>
           <div id="paginationControlsDropdownMenu" aria-labelledby="paginationControls" ngbDropdownMenu>
             <h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>