resolved merge conflicts

package.json

@@ -87,7 +87,7 @@
     "@ngx-translate/core": "8.0.0",
     "@ngx-translate/http-loader": "2.0.0",
     "body-parser": "1.18.2",
-    "bootstrap": "4.0.0-alpha.6",
+    "bootstrap": "v4.0.0-beta",
     "cerialize": "0.1.16",
     "compression": "1.7.1",
     "cookie-parser": "1.4.3",

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/+collection-page/collection-page.component.html

@@ -32,13 +32,9 @@
     </ds-comcol-page-content>
   </div>
   <br>
-  <div *ngIf="itemData.hasSucceeded | async">
+  <div *ngIf="(itemData.hasSucceeded | async)">
     <h2>{{'collection.page.browse.recent.head' | translate}}</h2>
-    <ds-object-list [config]="config" [sortConfig]="sortConfig"
-                    [objects]="itemData" [hideGear]="true"
-                    (pageChange)="onPageChange($event)"
-                    (pageSizeChange)="onPageSizeChange($event)"
-                    (sortDirectionChange)="onSortDirectionChange($event)"
-                    (sortFieldChange)="onSortDirectionChange($event)"></ds-object-list>
+    <ds-object-list [config]="paginationConfig" [sortConfig]="sortConfig"
+                    [objects]="itemData" [hideGear]="false"></ds-object-list>
   </div>
 </div>

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

@@ -14,90 +14,81 @@ import { ItemDataService } from '../core/data/item-data.service';
 import { Item } from '../core/shared/item.model';
 import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
-import { hasValue, isUndefined } from '../shared/empty.util';
+import { hasValue, isNotEmpty, isUndefined } from '../shared/empty.util';
 import { PageInfo } from '../core/shared/page-info.model';
+import { Observable } from 'rxjs/Observable';
 
 @Component({
   selector: 'ds-collection-page',
   styleUrls: ['./collection-page.component.scss'],
   templateUrl: './collection-page.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class CollectionPageComponent implements OnInit, OnDestroy {
   collectionData: RemoteData<Collection>;
   itemData: RemoteData<Item[]>;
   logoData: RemoteData<Bitstream>;
-  config: PaginationComponentOptions;
+  paginationConfig: PaginationComponentOptions;
   sortConfig: SortOptions;
   private subs: Subscription[] = [];
   private collectionId: string;
-  private pageInfoState: PageInfo;
-
-  constructor(
-    private collectionDataService: CollectionDataService,
-    private itemDataService: ItemDataService,
-    private ref: ChangeDetectorRef,
-    private route: ActivatedRoute
-  ) {
 
+  constructor(private collectionDataService: CollectionDataService,
+              private itemDataService: ItemDataService,
+              private route: ActivatedRoute) {
+    this.paginationConfig = new PaginationComponentOptions();
+    this.paginationConfig.id = 'collection-page-pagination';
+    this.paginationConfig.pageSizeOptions = [4];
+    this.paginationConfig.pageSize = 4;
+    this.paginationConfig.currentPage = 1;
+    this.sortConfig = new SortOptions();
   }
 
   ngOnInit(): void {
-    this.subs.push(this.route.params.map((params: Params) => params.id)
-      .subscribe((id: string) => {
-        this.collectionId = id;
-        this.collectionData = this.collectionDataService.findById(this.collectionId);
-        this.subs.push(this.collectionData.payload.subscribe((collection) => this.logoData = collection.logo));
+    this.subs.push(
+      Observable.combineLatest(
+        this.route.params,
+        this.route.queryParams,
+        (params, queryParams,) => {
+          return Object.assign({}, params, queryParams);
+        })
+        .subscribe((params) => {
+          this.collectionId = params.id;
+          this.collectionData = this.collectionDataService.findById(this.collectionId);
+          this.subs.push(this.collectionData.payload.subscribe((collection) => this.logoData = collection.logo));
 
-        this.config = new PaginationComponentOptions();
-        this.config.id = 'collection-browse';
-        this.config.pageSizeOptions = [4];
-        this.config.pageSize = 4;
-        this.sortConfig = new SortOptions();
+          const page = +params.page || this.paginationConfig.currentPage;
+          const pageSize = +params.pageSize || this.paginationConfig.pageSize;
+          const sortDirection = +params.page || this.sortConfig.direction;
+          const pagination = Object.assign({},
+            this.paginationConfig,
+            { currentPage: page, pageSize: pageSize }
+          );
+          const sort = Object.assign({},
+            this.sortConfig,
+            { direction: sortDirection, field: params.sortField }
+          );
+          this.updatePage({
+            pagination: pagination,
+            sort: sort
+          });
+        }));
 
-        this.updateResults();
-      }));
+  }
 
+  updatePage(searchOptions) {
+    this.itemData = this.itemDataService.findAll({
+      scopeID: this.collectionId,
+      currentPage: searchOptions.pagination.currentPage,
+      elementsPerPage: searchOptions.pagination.pageSize,
+      sort: searchOptions.sort
+    });
   }
 
   ngOnDestroy(): void {
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
 
-  onPageChange(currentPage: number): void {
-    this.config.currentPage = currentPage;
-    this.updateResults();
-  }
-
-  onPageSizeChange(elementsPerPage: number): void {
-    this.config.pageSize = elementsPerPage;
-    this.updateResults();
-  }
-
-  onSortDirectionChange(sortDirection: SortDirection): void {
-    this.sortConfig = new SortOptions(this.sortConfig.field, sortDirection);
-    this.updateResults();
-  }
-
-  onSortFieldChange(field: string): void {
-    this.sortConfig = new SortOptions(field, this.sortConfig.direction);
-    this.updateResults();
-  }
-
-  updateResults() {
-    this.itemData = null;
-    this.ref.markForCheck();
-    this.itemData = this.itemDataService.findAll({
-      scopeID: this.collectionId,
-      currentPage: this.config.currentPage,
-      elementsPerPage: this.config.pageSize,
-      sort: this.sortConfig
-    });
-    this.subs.push(this.itemData.pageInfo.subscribe((pageInfo) => {
-      if (isUndefined(this.pageInfoState) || this.pageInfoState !== pageInfo) {
-        this.pageInfoState = pageInfo;
-        this.ref.detectChanges();
-      }
-    }));
+  isNotEmpty(object: any) {
+    return isNotEmpty(object);
   }
 }

src/app/+home/home-news/home-news.component.scss

-@import '../../../styles/mixins.scss';
+@import '../../../styles/variables.scss';
 :host {
   display: block;
-  @include negate-gutters();
+  margin-right: ($grid-gutter-width / -2);
+  margin-left:  ($grid-gutter-width / -2);
+  margin-top: -$content-spacing;
+  margin-bottom: -$content-spacing;
 }
 
 .dspace-logo-container {

src/app/+home/home.component.html

 <ds-home-news></ds-home-news>
+<ds-search-form></ds-search-form>
 <ds-top-level-community-list></ds-top-level-community-list>

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

@@ -2,9 +2,5 @@
   <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]="topLevelCommunities" [hideGear]="true"
-                  (pageChange)="onPageChange($event)"
-                  (pageSizeChange)="onPageSizeChange($event)"
-                  (sortDirectionChange)="onSortDirectionChange($event)"
-                  (sortFieldChange)="onSortDirectionChange($event)"></ds-object-list>
+                  [objects]="topLevelCommunities" [hideGear]="true" (paginationChange)="updatePage($event)"></ds-object-list>
 </div>

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

@@ -5,58 +5,40 @@ import { CommunityDataService } from '../../core/data/community-data.service';
 import { Community } from '../../core/shared/community.model';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+import { ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'ds-top-level-community-list',
   styleUrls: ['./top-level-community-list.component.scss'],
   templateUrl: './top-level-community-list.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TopLevelCommunityListComponent implements OnInit {
+
+export class TopLevelCommunityListComponent {
   topLevelCommunities: RemoteData<Community[]>;
   config: PaginationComponentOptions;
   sortConfig: SortOptions;
 
-  constructor(
-    private cds: CommunityDataService,
-    private ref: ChangeDetectorRef
-  ) {
-
-  }
-
-  ngOnInit(): void {
+  constructor(private cds: CommunityDataService) {
     this.config = new PaginationComponentOptions();
     this.config.id = 'top-level-pagination';
     this.config.pageSizeOptions = [4];
     this.config.pageSize = 4;
+    this.config.currentPage = 1;
     this.sortConfig = new SortOptions();
 
-    this.updateResults();
-  }
-
-  onPageChange(currentPage: number): void {
-    this.config.currentPage = currentPage;
-    this.updateResults();
-  }
-
-  onPageSizeChange(elementsPerPage: number): void {
-    this.config.pageSize = elementsPerPage;
-    this.updateResults();
-  }
-
-  onSortDirectionChange(sortDirection: SortDirection): void {
-    this.sortConfig = new SortOptions(this.sortConfig.field, sortDirection);
-    this.updateResults();
-  }
-
-  onSortFieldChange(field: string): void {
-    this.sortConfig = new SortOptions(field, this.sortConfig.direction);
-    this.updateResults();
+    this.updatePage({
+      page: this.config.currentPage,
+      pageSize: this.config.pageSize,
+      sortField: this.sortConfig.field,
+      direction: this.sortConfig.direction
+    });
   }
 
-  updateResults() {
-    this.topLevelCommunities = undefined;
-    this.topLevelCommunities = this.cds.findAll({ currentPage: this.config.currentPage, elementsPerPage: this.config.pageSize, sort: this.sortConfig });
-    // this.ref.detectChanges();
+  updatePage(data) {
+    this.topLevelCommunities = this.cds.findAll({
+      currentPage: data.page,
+      elementsPerPage: data.pageSize,
+      sort: { field: data.sortField, direction: data.sortDirection }
+    });
   }
 }

src/app/+item-page/full/field-components/file-section/full-file-section.component.scss

-@import '../../../../../styles/variables.scss';
-@import '../../../../../../node_modules/bootstrap/scss/_variables.scss';
+@import '../../../../../styles/variables';
+@import '../../../../../styles/mixins';
 @media screen and (min-width: map-get($grid-breakpoints, md)) {
     dt {
         text-align: right;

src/app/+item-page/full/full-item-page.component.html

@@ -2,7 +2,7 @@
     <ds-item-page-title-field [item]="item.payload | async"></ds-item-page-title-field>
 
     <div class="simple-view-link">
-        <a class="btn btn-secondary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
+        <a class="btn btn-outline-primary col-4" [routerLink]="['/items/' + (item.payload | async)?.id]">
             {{"item.page.link.simple" | translate}}
         </a>
     </div>

src/app/+item-page/simple/item-page.component.html

@@ -16,7 +16,7 @@
             <ds-item-page-uri-field [item]="item.payload | async"></ds-item-page-uri-field>
             <ds-item-page-collections [item]="item.payload | async"></ds-item-page-collections>
             <div>
-                <a class="btn btn-secondary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
+                <a class="btn btn-outline-primary" [routerLink]="['/items/' + (item.payload | async)?.id + '/full']">
                     {{"item.page.link.full" | translate}}
                 </a>
             </div>

src/app/app.component.scss

@@ -23,4 +23,6 @@ html {
 
 .main-content {
   flex: 1 0 auto;
+  margin-top: $content-spacing;
+  margin-bottom: $content-spacing;
 }

src/app/core/cache/builders/remote-data-build.service.ts

@@ -14,6 +14,7 @@ import { GenericConstructor } from '../../shared/generic-constructor';
 import { getMapsTo, getRelationMetadata, getRelationships } from './build-decorators';
 import { NormalizedObjectFactory } from '../models/normalized-object-factory';
 import { Request } from '../../data/request.models';
+import { PageInfo } from '../../shared/page-info.model';
 
 @Injectable()
 export class RemoteDataBuildService {
@@ -21,13 +22,12 @@ export class RemoteDataBuildService {
     protected objectCache: ObjectCacheService,
     protected responseCache: ResponseCacheService,
     protected requestService: RequestService
+
   ) {
   }
 
-  buildSingle<TNormalized extends CacheableObject, TDomain>(
-    href: string,
-    normalizedType: GenericConstructor<TNormalized>
-  ): RemoteData<TDomain> {
+  buildSingle<TNormalized extends CacheableObject, TDomain>(href: string,
+                                                            normalizedType: GenericConstructor<TNormalized>): RemoteData<TDomain> {
     const requestHrefObs = this.objectCache.getRequestHrefBySelfLink(href);
 
     const requestObs = Observable.race(
@@ -61,6 +61,13 @@ export class RemoteDataBuildService {
     const pageInfo = responseCacheObs
       .filter((entry: ResponseCacheEntry) => hasValue(entry.response) && hasValue(entry.response['pageInfo']))
       .map((entry: ResponseCacheEntry) => (entry.response as SuccessResponse).pageInfo)
+      .map((pInfo: PageInfo) => {
+        if (isNotEmpty(pageInfo) && pInfo.currentPage >= 0) {
+          return Object.assign({}, pInfo, {currentPage: pInfo.currentPage + 1});
+        } else {
+          return pInfo;
+        }
+      })
       .distinctUntilChanged();
     /* tslint:enable:no-string-literal */
 
@@ -104,10 +111,8 @@ export class RemoteDataBuildService {
     );
   }
 
-  buildList<TNormalized extends CacheableObject, TDomain>(
-    href: string,
-    normalizedType: GenericConstructor<TNormalized>
-  ): RemoteData<TDomain[]> {
+  buildList<TNormalized extends CacheableObject, TDomain>(href: string,
+                                                          normalizedType: GenericConstructor<TNormalized>): RemoteData<TDomain[]> {
     const requestObs = this.requestService.get(href)
       .filter((entry) => hasValue(entry));
     const responseCacheObs = this.responseCache.get(href).filter((entry) => hasValue(entry));
@@ -237,7 +242,7 @@ export class RemoteDataBuildService {
       })
       .filter((e) => hasValue(e))
       .join(', ')
-      );
+    );
 
     const statusCode = Observable.combineLatest(
       ...input.map((rd) => rd.statusCode),
@@ -249,7 +254,7 @@ export class RemoteDataBuildService {
       })
       .filter((c) => hasValue(c))
       .join(', ')
-      );
+    );
 
     const pageInfo = Observable.of(undefined);
 

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

@@ -3,11 +3,12 @@ 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';
 
 /**
  * An abstract model class for a DSpaceObject.
  */
-export abstract class DSpaceObject implements CacheableObject {
+export abstract class DSpaceObject implements CacheableObject, ListableObject {
 
   self: string;
 

src/app/footer/footer.component.scss

 @import '../../styles/variables.scss';
-@import '../../../node_modules/bootstrap/scss/_variables.scss';
-$footer-bg: $gray-lighter;
+$footer-bg: $gray-100;
 $footer-border: 1px solid darken($footer-bg, 10%);
 $footer-padding: $spacer * 1.5;
 

src/app/header/header.component.html

 <header>
-  <nav class="navbar navbar-toggleable-sm navbar-inverse bg-inverse">
-    <button class="navbar-toggler navbar-toggler-right" type="button" (click)="toggle()" aria-controls="collapsingNav" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon fa fa-bars fa-fw" aria-hidden="true"></span>
-    </button>
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark">
     <div [ngClass]="{'clearfix': !(isNavBarCollapsed | async)}">
       <a class="navbar-brand" routerLink="/home">{{ 'title' | translate }}</a>
     </div>
+    <button class="navbar-toggler" type="button" (click)="toggle()" aria-controls="collapsingNav" aria-expanded="false" aria-label="Toggle navigation">
+      <span class="navbar-toggler-icon fa fa-bars fa-fw" aria-hidden="true"></span>
+    </button>
     <div [ngbCollapse]="(isNavBarCollapsed | async)" class="collapse navbar-collapse" id="collapsingNav">
       <ul class="navbar-nav mr-auto">
         <li class="nav-item">

src/app/object-list/collection-list-element/collection-list-element.component.html

-<a [routerLink]="['/collections/' + collection.id]" class="lead">
-    {{collection.name}}
+<a [routerLink]="['/collections/' + object.id]" class="lead">
+    {{object.name}}
 </a>
-<div *ngIf="collection.shortDescription" class="text-muted">
-    {{collection.shortDescription}}
+<div *ngIf="object.shortDescription" class="text-muted">
+    {{object.shortDescription}}
 </div>

src/app/object-list/collection-list-element/collection-list-element.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, Inject } from '@angular/core';
 
 import { Collection } from '../../core/shared/collection.model';
+import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
+import { listElementFor } from '../list-element-decorator';
 
 @Component({
   selector: 'ds-collection-list-element',
   styleUrls: ['./collection-list-element.component.scss'],
   templateUrl: './collection-list-element.component.html'
 })
-export class CollectionListElementComponent {
 
-  @Input() collection: Collection;
-
-  data: any = {};
-
-}
+@listElementFor(Collection)
+export class CollectionListElementComponent extends ObjectListElementComponent<Collection> {}

src/app/object-list/community-list-element/community-list-element.component.html

-<a [routerLink]="['/communities/' + community.id]" class="lead">
-    {{community.name}}
+<a [routerLink]="['/communities/' + object.id]" class="lead">
+    {{object.name}}
 </a>
-<div *ngIf="community.shortDescription" class="text-muted">
-    {{community.shortDescription}}
+<div *ngIf="object.shortDescription" class="text-muted">
+    {{object.shortDescription}}
 </div>

src/app/object-list/community-list-element/community-list-element.component.ts

-import { Component, Input } from '@angular/core';
+import { Component, Input, Inject } from '@angular/core';
 
 import { Community } from '../../core/shared/community.model';
+import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
+import { listElementFor } from '../list-element-decorator';
 
 @Component({
   selector: 'ds-community-list-element',
   styleUrls: ['./community-list-element.component.scss'],
   templateUrl: './community-list-element.component.html'
 })
-export class CommunityListElementComponent {
 
-  @Input() community: Community;
-
-  data: any = {};
-
-}
+@listElementFor(Community)
+export class CommunityListElementComponent extends ObjectListElementComponent<Community> {}