Merge pull request #202 from jonas-atmire/150-List-and-grid-feedback

Closes #150

.gitignore

@@ -14,6 +14,7 @@ npm-debug.log
 /coverage/
 
 .idea
+*.iml
 *.ngfactory.ts
 *.css.shim.ts
 *.scss.shim.ts

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

@@ -41,13 +41,13 @@
     <ng-container *ngVar="(itemRDObs | async) as itemRD">
       <div *ngIf="itemRD?.hasSucceeded" @fadeIn>
         <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-        <ds-object-list
+        <ds-viewable-collection
           [config]="paginationConfig"
           [sortConfig]="sortConfig"
           [objects]="itemRD"
           [hideGear]="false"
           (paginationChange)="onPaginationChange($event)">
-        </ds-object-list>
+        </ds-viewable-collection>
       </div>
       <ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
       <ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}"></ds-loading>

src/app/+home-page/top-level-community-list/top-level-community-list.component.html

@@ -1,15 +1,13 @@
 <ng-container *ngVar="(communitiesRDObs | async) as communitiesRD">
-  <div *ngIf="communitiesRD?.hasSucceeded" @fadeInOut>
-    <h2>{{'home.top-level-communities.head' | translate}}</h2>
-    <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
-    <ds-object-list
-      [config]="config"
-      [sortConfig]="sortConfig"
-      [objects]="communitiesRD"
-      [hideGear]="true"
-      (paginationChange)="updatePage($event)">
-    </ds-object-list>
-  </div>
-  <ds-error *ngIf="communitiesRD?.hasFailed" message="{{'error.top-level-communites' | translate}}"></ds-error>
-  <ds-loading *ngIf="communitiesRD?.isLoading" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
-</ng-container>
+  <div *ngIf="communitiesRD?.hasSucceeded " @fadeInOut>
+  <h2>{{'home.top-level-communities.head' | translate}}</h2>
+  <p class="lead">{{'home.top-level-communities.help' | translate}}</p>
+  <ds-viewable-collection
+    [config]="config"
+    [sortConfig]="sortConfig"
+    [objects]="communitiesRD"
+    (paginationChange)="updatePage($event)">
+  </ds-viewable-collection>
+</div>
+<ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
+<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container>

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

@@ -30,7 +30,7 @@
               </button>
             </div>
             <ds-search-results [searchResults]="resultsRDObs | async"
-                               [searchConfig]="searchOptions"></ds-search-results>
+                               [searchConfig]="searchOptions" [sortConfig]="sortConfig"></ds-search-results>
           </div>
         </div>
       </div>

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

@@ -6,12 +6,14 @@ import { RemoteData } from '../core/data/remote-data';
 import { Community } from '../core/shared/community.model';
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { isNotEmpty } from '../shared/empty.util';
-import { SearchOptions } from './search-options.model';
+import { SearchOptions,ViewMode } from './search-options.model';
 import { SearchResult } from './search-result.model';
 import { SearchService } from './search-service/search.service';
 import { pushInOut } from '../shared/animations/push';
 import { HostWindowService } from '../shared/host-window.service';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
+import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { SortOptions } from '../core/cache/models/sort-options.model';
 
 /**
  * This component renders a simple item page.
@@ -36,6 +38,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
   resultsRDObs: Observable<RemoteData<Array<SearchResult<DSpaceObject>>>>;
   currentParams = {};
   searchOptions: SearchOptions;
+  sortConfig: SortOptions;
   scopeListRDObs: Observable<RemoteData<Community[]>>;
   isMobileView: Observable<boolean>;
 
@@ -51,6 +54,13 @@ export class SearchPageComponent implements OnInit, OnDestroy {
     );
     this.scopeListRDObs = communityService.findAll();
     // Initial pagination config
+    const pagination: PaginationComponentOptions = new PaginationComponentOptions();
+    pagination.id = 'search-results-pagination';
+    pagination.currentPage = 1;
+    pagination.pageSize = 10;
+
+    const sort: SortOptions = new SortOptions();
+    this.sortConfig = sort;
     this.searchOptions = this.service.searchOptions;
   }
 
@@ -63,16 +73,31 @@ export class SearchPageComponent implements OnInit, OnDestroy {
           this.query = params.query || '';
           this.scope = params.scope;
           const page = +params.page || this.searchOptions.pagination.currentPage;
-          const pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+          let pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
+          let pageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
+
+          if (isNotEmpty(params.view) && params.view === ViewMode.Grid) {
+            pageSizeOptions = [12, 24, 36, 48 , 50, 62, 74, 84];
+            if (pageSizeOptions.indexOf(pageSize) === -1) {
+              pageSize = 12;
+            }
+          }
+          if (isNotEmpty(params.view) && params.view === ViewMode.List) {
+            if (pageSizeOptions.indexOf(pageSize) === -1) {
+              pageSize = 10;
+            }
+          }
+
           const sortDirection = +params.sortDirection || this.searchOptions.sort.direction;
           const pagination = Object.assign({},
             this.searchOptions.pagination,
-            { currentPage: page, pageSize: pageSize }
+            { currentPage: page, pageSize: pageSize, pageSizeOptions: pageSizeOptions}
           );
           const sort = Object.assign({},
             this.searchOptions.sort,
             { direction: sortDirection, field: params.sortField }
           );
+
           this.updateSearchResults({
             pagination: pagination,
             sort: sort
@@ -88,6 +113,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
 
   private updateSearchResults(searchOptions) {
     this.resultsRDObs = this.service.search(this.query, this.scope, searchOptions);
+    this.searchOptions = searchOptions;
   }
 
   ngOnDestroy() {

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

@@ -4,9 +4,12 @@ import { SharedModule } from '../shared/shared.module';
 import { SearchPageRoutingModule } from './search-page-routing.module';
 import { SearchPageComponent } from './search-page.component';
 import { SearchResultsComponent } from './search-results/search-results.component';
-import { ItemSearchResultListElementComponent } from '../object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
-import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
-import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
+import { ItemSearchResultListElementComponent } from '../shared/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
+import { CollectionSearchResultListElementComponent } from '../shared/object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
+import { CommunitySearchResultListElementComponent } from '../shared/object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
+import { ItemSearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
+import { CommunitySearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
+import { CollectionSearchResultGridElementComponent } from '../shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
 import { SearchService } from './search-service/search.service';
 import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
 import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
@@ -37,6 +40,10 @@ const effects = [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
     CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
+    CommunitySearchResultListElementComponent,
     SearchFiltersComponent,
     SearchFilterComponent,
     SearchFacetFilterComponent
@@ -49,7 +56,11 @@ const effects = [
   entryComponents: [
     ItemSearchResultListElementComponent,
     CollectionSearchResultListElementComponent,
-    CommunitySearchResultListElementComponent
+    CommunitySearchResultListElementComponent,
+    ItemSearchResultGridElementComponent,
+    CollectionSearchResultGridElementComponent,
+    CommunitySearchResultGridElementComponent,
   ]
 })
-export class SearchPageModule { }
+export class SearchPageModule {
+}

src/app/+search-page/search-result.model.ts

@@ -1,6 +1,6 @@
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { Metadatum } from '../core/shared/metadatum.model';
-import { ListableObject } from '../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../shared/object-collection/shared/listable-object.model';
 
 export class SearchResult<T extends DSpaceObject> implements ListableObject {
 

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

@@ -1,10 +1,10 @@
 <div *ngIf="searchResults?.hasSucceeded" @fadeIn>
   <h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
-<ds-object-list
+<ds-viewable-collection
   [config]="searchConfig.pagination"
   [sortConfig]="searchConfig.sort"
   [objects]="searchResults"
   [hideGear]="true">
-</ds-object-list></div>
+</ds-viewable-collection></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>

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

@@ -2,7 +2,8 @@ import { Component, Input } from '@angular/core';
 import { RemoteData } from '../../core/data/remote-data';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 import { fadeIn, fadeInOut } from '../../shared/animations/fade';
-import { SearchOptions } from '../search-options.model';
+import { SearchOptions, ViewMode } from '../search-options.model';
+import { SortOptions } from '../../core/cache/models/sort-options.model';
 import { SearchResult } from '../search-result.model';
 
 /**
@@ -21,4 +22,6 @@ import { SearchResult } from '../search-result.model';
 export class SearchResultsComponent {
   @Input() searchResults: RemoteData<Array<SearchResult<DSpaceObject>>>;
   @Input() searchConfig: SearchOptions;
+  @Input() sortConfig: SortOptions;
+  @Input() viewMode: ViewMode;
 }

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

@@ -9,10 +9,10 @@ import { SearchOptions } from '../search-options.model';
 import { hasValue, isNotEmpty } from '../../shared/empty.util';
 import { Metadatum } from '../../core/shared/metadatum.model';
 import { Item } from '../../core/shared/item.model';
-import { ItemSearchResult } from '../../object-list/search-result-list-element/item-search-result/item-search-result.model';
 import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
+import { ItemSearchResult } from '../../shared/object-collection/shared/item-search-result.model';
 import { ViewMode } from '../../+search-page/search-options.model';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { RouteService } from '../../shared/route.service';
@@ -100,7 +100,7 @@ export class SearchService implements OnDestroy {
   }
 
   search(query: string, scopeId?: string, searchOptions?: SearchOptions): Observable<RemoteData<Array<SearchResult<DSpaceObject>>>> {
-    this.searchOptions = this.searchOptions;
+    this.searchOptions = 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

@@ -14,7 +14,7 @@ <h5>{{ 'search.sidebar.settings.sort-by' | translate}}</h5>
     <h5>{{ 'search.sidebar.settings.rpp' | translate}}</h5>
 
     <select class="form-control" (change)="reloadRPP($event)">
-        <option *ngFor="let item of searchOptions.pagination.pageSizeOptions" [value]="item"
+        <option *ngFor="let item of pageSizeOptions" [value]="item"
                 [selected]="item === searchOptions.pagination.pageSize ? 'selected': null">
             {{item}}
         </option>

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

@@ -1,6 +1,6 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { SearchService } from '../search-service/search.service';
-import { SearchOptions } from '../search-options.model';
+import { SearchOptions, ViewMode } from '../search-options.model';
 import { SortDirection } from '../../core/cache/models/sort-options.model';
 import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
 
@@ -20,6 +20,9 @@ export class SearchSettingsComponent implements OnInit {
    * Number of items per page.
    */
   public pageSize;
+  @Input() public pageSizeOptions;
+  public listPageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
+  public gridPageSizeOptions: number[] = [12, 24, 36, 48 , 50, 62, 74, 84];
 
   private sub;
   private scope: string;
@@ -36,6 +39,7 @@ export class SearchSettingsComponent implements OnInit {
   ngOnInit(): void {
     this.searchOptions = this.service.searchOptions;
     this.pageSize = this.searchOptions.pagination.pageSize;
+    this.pageSizeOptions = this.searchOptions.pagination.pageSizeOptions;
     this.sub = this.route
       .queryParams
       .subscribe((params) => {
@@ -45,6 +49,11 @@ export class SearchSettingsComponent implements OnInit {
         this.page  = +params.page || this.searchOptions.pagination.currentPage;
         this.pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
         this.direction = +params.sortDirection || this.searchOptions.sort.direction;
+        if (params.view === ViewMode.Grid) {
+          this.pageSizeOptions = this.gridPageSizeOptions;
+        } else {
+          this.pageSizeOptions = this.listPageSizeOptions;
+        }
       });
   }
 

src/app/core/data/browse-response-parsing.service.spec.ts

@@ -2,6 +2,7 @@ import { BrowseResponseParsingService } from './browse-response-parsing.service'
 import { BrowseEndpointRequest } from './request.models';
 import { BrowseSuccessResponse, ErrorResponse } from '../cache/response-cache.models';
 import { BrowseDefinition } from '../shared/browse-definition.model';
+import { DSpaceRESTV2Response } from '../dspace-rest-v2/dspace-rest-v2-response.model';
 
 describe('BrowseResponseParsingService', () => {
   let service: BrowseResponseParsingService;
@@ -48,7 +49,7 @@ describe('BrowseResponseParsingService', () => {
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '200'
-    };
+    } as DSpaceRESTV2Response;
 
     const invalidResponse1 = {
       payload: {
@@ -71,22 +72,21 @@ describe('BrowseResponseParsingService', () => {
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '200'
-    };
+    } as DSpaceRESTV2Response;
 
     const invalidResponse2 = {
       payload: {
-        browses: [{}, {}],
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '200'
-    };
+    } as DSpaceRESTV2Response ;
 
     const invalidResponse3 = {
       payload: {
         _links: { self: { href: 'https://rest.api/discover/browses' } },
         page: { size: 20, totalElements: 2, totalPages: 1, number: 0 }
       }, statusCode: '500'
-    };
+    } as DSpaceRESTV2Response;
 
     const definitions = [
       Object.assign(new BrowseDefinition(), {

src/app/core/shared/dspace-object.model.ts

@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
 import { CacheableObject } from '../cache/object-cache.reducer';
 import { RemoteData } from '../data/remote-data';
 import { ResourceType } from './resource-type';
-import { ListableObject } from '../../object-list/listable-object/listable-object.model';
+import { ListableObject } from '../../shared/object-collection/shared/listable-object.model';
 import { Observable } from 'rxjs/Observable';
 
 /**