Merge branch 'master' into post-support

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html

@@ -0,0 +1,14 @@
+<div class="card">
+  <a [routerLink]="['/collections/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-body">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <div class="text-center">
+      <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
+
+  </div>
+</div>

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.spec.ts

@@ -0,0 +1,59 @@
+import { CollectionGridElementComponent } from './collection-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { Collection } from '../../../core/shared/collection.model';
+let fixture: ComponentFixture<CollectionGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+const createdGridElementComponent:CollectionGridElementComponent= new CollectionGridElementComponent(mockCollection);
+
+describe('CollectionGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionGridElementComponent);
+  }));
+
+  it('should show the collection cards in the grid element',() => {
+    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCollection.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+})

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts

@@ -0,0 +1,15 @@
+import { Component, Inject } from '@angular/core';
+
+import { Collection } from '../../../core/shared/collection.model';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../../+search-page/search-options.model';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+
+@Component({
+  selector: 'ds-collection-grid-element',
+  styleUrls: ['./collection-grid-element.component.scss'],
+  templateUrl: './collection-grid-element.component.html'
+})
+
+@renderElementsFor(Collection, ViewMode.Grid)
+export class CollectionGridElementComponent extends AbstractListableElementComponent<Collection> {}

src/app/shared/object-grid/community-grid-element/community-grid-element.component.html

@@ -0,0 +1,14 @@
+<div class="card">
+
+  <a [routerLink]="['/communities/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-body">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <div class="text-center">
+      <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
+  </div>
+</div>

src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+

src/app/shared/object-grid/community-grid-element/community-grid-element.component.spec.ts

@@ -0,0 +1,66 @@
+import { CommunityGridElementComponent } from './community-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { Observable } from 'rxjs/Observable';
+import { By } from '@angular/platform-browser';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { Community } from '../../../core/shared/community.model';
+
+let communityGridElementComponent: CommunityGridElementComponent;
+let fixture: ComponentFixture<CommunityGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+const mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    }]
+});
+
+const createdGridElementComponent:CommunityGridElementComponent= new CommunityGridElementComponent(mockCommunity);
+
+describe('CommunityGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunityGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent)}
+      ],
+
+    schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunityGridElementComponent);
+    communityGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the community cards in the grid element',() => {
+    expect(fixture.debugElement.query(By.css('ds-community-grid-element'))).toBeDefined();
+  })
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCommunity.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});

src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Community } from '../../../core/shared/community.model';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-community-grid-element',
+  styleUrls: ['./community-grid-element.component.scss'],
+  templateUrl: './community-grid-element.component.html'
+})
+
+@renderElementsFor(Community, ViewMode.Grid)
+export class CommunityGridElementComponent extends AbstractListableElementComponent<Community> {}

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html

@@ -0,0 +1,4 @@
+<div class="thumbnail">
+  <img *ngIf="thumbnail && thumbnail.content" [src]="thumbnail.content" (error)="errorHandler($event)"/>
+  <img *ngIf="!(thumbnail && thumbnail.content)" [src]="holderSource | dsSafeUrl"/>
+</div>

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss

@@ -0,0 +1 @@
+@import '../../../../styles/variables';

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { GridThumbnailComponent } from './grid-thumbnail.component';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+import { SafeUrlPipe } from '../../utils/safe-url-pipe';
+
+describe('ThumbnailComponent', () => {
+  let comp: GridThumbnailComponent;
+  let fixture: ComponentFixture<GridThumbnailComponent>;
+  let de: DebugElement;
+  let el: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GridThumbnailComponent, SafeUrlPipe]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GridThumbnailComponent);
+    comp = fixture.componentInstance; // BannerComponent test instance
+    de = fixture.debugElement.query(By.css('div.thumbnail'));
+    el = de.nativeElement;
+  });
+
+  it('should display image', () => {
+    comp.thumbnail = new Bitstream();
+    comp.thumbnail.content = 'test.url';
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.thumbnail.content);
+  });
+
+  it('should display placeholder', () => {
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.holderSource);
+  });
+
+});

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+
+/**
+ * This component renders a given Bitstream as a thumbnail.
+ * One input parameter of type Bitstream is expected.
+ * If no Bitstream is provided, a holderjs image will be rendered instead.
+ */
+
+@Component({
+  selector: 'ds-grid-thumbnail',
+  styleUrls: ['./grid-thumbnail.component.scss'],
+  templateUrl: './grid-thumbnail.component.html'
+})
+export class GridThumbnailComponent {
+
+  @Input() thumbnail: Bitstream;
+
+  data: any = {};
+
+  /**
+   * The default 'holder.js' image
+   */
+  holderSource = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
+
+  errorHandler(event) {
+    event.currentTarget.src = this.holderSource;
+  }
+
+}

src/app/shared/object-grid/item-grid-element/item-grid-element.component.html

@@ -0,0 +1,23 @@
+<div class="card">
+
+  <a [routerLink]="['/items/' + object.id]" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
+    </ds-grid-thumbnail>
+  </a>
+  <div class="card-body">
+    <h4 class="card-title">{{object.findMetadata('dc.title')}}</h4>
+
+    <p *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-authors card-text text-muted">
+        <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+      <span *ngIf="object.findMetadata('dc.date.issued')">{{object.findMetadata("dc.date.issued")}}</span>
+    </p>
+
+    <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+    <div class="text-center">
+      <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
+  </div>
+</div>

src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+

src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts

@@ -0,0 +1,67 @@
+import { ItemGridElementComponent } from './item-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../utils/truncate.pipe';
+import { Item } from '../../../core/shared/item.model';
+
+let itemGridElementComponent: ItemGridElementComponent;
+let fixture: ComponentFixture<ItemGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+/* tslint:disable:no-shadowed-variable */
+const mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    }]
+});
+
+const createdGridElementComponent:ItemGridElementComponent= new ItemGridElementComponent(mockItem);
+
+describe('ItemGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemGridElementComponent , TruncatePipe],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: {createdGridElementComponent}}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemGridElementComponent);
+    itemGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the item cards in the grid element',() => {
+    expect(fixture.debugElement.query(By.css('ds-item-grid-element'))).toBeDefined()
+  });
+
+  it('should only show the author span if the author metadata is present',() => {
+    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+
+    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
+      expect(itemAuthorField).toBeDefined();
+    }else {
+      expect(itemAuthorField).toBeDefined();
+    }
+  });
+
+})

src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Item } from '../../../core/shared/item.model';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { ViewMode } from '../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-item-grid-element',
+  styleUrls: ['./item-grid-element.component.scss'],
+  templateUrl: './item-grid-element.component.html'
+})
+
+@renderElementsFor(Item, ViewMode.Grid)
+export class ItemGridElementComponent extends AbstractListableElementComponent<Item> {}

src/app/shared/object-grid/object-grid.component.html

@@ -0,0 +1,21 @@
+<ds-pagination
+  [paginationOptions]="config"
+  [pageInfoState]="objects?.payload"
+  [collectionSize]="objects?.payload?.totalElements"
+  [sortOptions]="sortConfig"
+  [hideGear]="hideGear"
+  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  (pageChange)="onPageChange($event)"
+  (pageSizeChange)="onPageSizeChange($event)"
+  (sortDirectionChange)="onSortDirectionChange($event)"
+  (sortFieldChange)="onSortFieldChange($event)"
+  (paginationChange)="onPaginationChange($event)">
+    <div class="row mt-2" *ngIf="objects?.hasSucceeded" @fadeIn>
+        <div class="col-lg-4 col-sm-6 col-xs-12 "
+          *ngFor="let object of objects?.payload?.page">
+          <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
+      </div>
+    </div>
+  <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
+  <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
+</ds-pagination>

src/app/shared/object-grid/object-grid.component.scss

@@ -0,0 +1,27 @@
+@import '../../../styles/variables';
+
+ds-wrapper-grid-element ::ng-deep {
+  div.thumbnail > img {
+    height: $card-thumbnail-height;
+    width: 100%;
+  }
+  .card-title {
+    line-height: $headings-line-height;
+    height: ($headings-line-height*3) +em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .item-abstract {
+    line-height: $line-height-base;
+    height: ($line-height-base*5)+em;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .item-authors{
+    line-height: $line-height-base;
+    height: ($line-height-base*1.5)+em;
+  }
+  div.card {
+    margin-bottom: 20px;
+  }
+}

src/app/shared/object-grid/object-grid.component.ts

@@ -0,0 +1,100 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  ViewEncapsulation
+} from '@angular/core';
+
+import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
+import { PaginatedList } from '../../core/data/paginated-list';
+
+import { RemoteData } from '../../core/data/remote-data';
+import { fadeIn } from '../animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'ds-object-grid',
+  styleUrls: [ './object-grid.component.scss' ],
+  templateUrl: './object-grid.component.html',
+  animations: [fadeIn]
+})
+
+export class ObjectGridComponent {
+
+  @Input() config: PaginationComponentOptions;
+  @Input() sortConfig: SortOptions;
+  @Input() hideGear = false;
+  @Input() hidePagerWhenSinglePage = true;
+  private _objects: RemoteData<PaginatedList<ListableObject>>;
+  @Input() set objects(objects: RemoteData<PaginatedList<ListableObject>>) {
+    this._objects = objects;
+  }
+  get objects() {
+    return this._objects;
+  }
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() change: EventEmitter<{
+    pagination: PaginationComponentOptions,
+    sort: SortOptions
+  }> = new EventEmitter<{
+    pagination: PaginationComponentOptions,
+    sort: SortOptions
+  }>();
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
+
+}

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html

@@ -0,0 +1,13 @@
+<div class="card">
+  <a [routerLink]="['/collections/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-body">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <div class="text-center">
+      <a [routerLink]="['/collections/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
+  </div>
+</div>

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss

@@ -0,0 +1 @@
+@import '../../../../../styles/variables';

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.spec.ts

@@ -0,0 +1,64 @@
+import {CollectionSearchResultGridElementComponent } from './collection-search-result-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Community } from '../../../../core/shared/community.model';
+import { Collection } from '../../../../core/shared/collection.model';
+
+let fixture: ComponentFixture<CollectionSearchResultGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const mockCollection: Collection = Object.assign(new Collection(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+const createdGridElementComponent: CollectionSearchResultGridElementComponent = new CollectionSearchResultGridElementComponent(mockCollection);
+
+describe('CollectionSearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CollectionSearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CollectionSearchResultGridElementComponent);
+  }));
+
+  it('should show the item result cards in the grid element', () => {
+    expect(fixture.debugElement.query(By.css('ds-collection-search-result-grid-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCollection.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { renderElementsFor} from '../../../object-collection/shared/dso-element-decorator';
+
+import { CollectionSearchResult } from './collection-search-result.model';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Collection } from '../../../../core/shared/collection.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-collection-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'collection-search-result-grid-element.component.scss'],
+  templateUrl: 'collection-search-result-grid-element.component.html'
+})
+
+@renderElementsFor(CollectionSearchResult, ViewMode.Grid)
+export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts

@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../../+search-page/search-result.model';
+import { Collection } from '../../../../core/shared/collection.model';
+
+export class CollectionSearchResult extends SearchResult<Collection> {
+}

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html

@@ -0,0 +1,14 @@
+<div class="card">
+
+  <a [routerLink]="['/communities/' + dso.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="dso.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-body">
+    <h4 class="card-title">{{dso.name}}</h4>
+    <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
+    <div class="text-center">
+      <a [routerLink]="['/communities/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
+  </div>
+</div>

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.spec.ts

@@ -0,0 +1,63 @@
+import { CommunitySearchResultGridElementComponent } from './community-search-result-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Community } from '../../../../core/shared/community.model';
+
+let fixture: ComponentFixture<CommunitySearchResultGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const mockCommunity: Community = Object.assign(new Community(), {
+  metadata: [
+    {
+      key: 'dc.description.abstract',
+      language: 'en_US',
+      value: 'Short description'
+    } ]
+
+});
+
+const createdGridElementComponent: CommunitySearchResultGridElementComponent = new CommunitySearchResultGridElementComponent(mockCommunity);
+
+describe('CommunitySearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CommunitySearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(CommunitySearchResultGridElementComponent);
+  }));
+
+  it('should show the item result cards in the grid element', () => {
+    expect(fixture.debugElement.query(By.css('ds-community-search-result-grid-element'))).toBeDefined();
+  });
+
+  it('should only show the description if "short description" metadata is present',() => {
+    const descriptionText = expect(fixture.debugElement.query(By.css('p.card-text')));
+
+    if (mockCommunity.shortDescription.length > 0) {
+      expect(descriptionText).toBeDefined();
+    }else {
+      expect(descriptionText).not.toBeDefined();
+    }
+  });
+});

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { CommunitySearchResult } from './community-search-result.model';
+import { Community } from '../../../../core/shared/community.model';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { ViewMode } from '../../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-community-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'community-search-result-grid-element.component.scss'],
+  templateUrl: 'community-search-result-grid-element.component.html'
+})
+
+@renderElementsFor(CommunitySearchResult, ViewMode.Grid)
+export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
+
+}

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts

@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../../+search-page/search-result.model';
+import { Community } from '../../../../core/shared/community.model';
+
+export class CommunitySearchResult extends SearchResult<Community> {
+}

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html

@@ -0,0 +1,34 @@
+<div class="card">
+  <a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
+    <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+    </ds-grid-thumbnail>
+  </a>
+  <div class="card-body">
+    <h4 class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></h4>
+
+    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+       class="item-authors card-text text-muted">
+        <span
+          *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let first=first;">
+          <span *ngIf="first" [innerHTML]="authorMd.value">
+          <span
+            *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">, ...</span>
+          </span>
+        </span>
+      <span *ngIf="dso.findMetadata('dc.date.issued')"
+            class="item-list-date">
+      <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">,</span>
+      {{dso.findMetadata("dc.date.issued")}}</span>
+
+
+    </p>
+    <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
+    </p>
+
+    <div class="text-center">
+      <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+    </div>
+  </div>
+
+</div>
+

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.spec.ts

@@ -0,0 +1,80 @@
+import { ItemSearchResultGridElementComponent } from './item-search-result-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { Item } from '../../../../core/shared/item.model';
+
+let itemSearchResultGridElementComponent: ItemSearchResultGridElementComponent;
+let fixture: ComponentFixture<ItemSearchResultGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+const mockItem: Item = Object.assign(new Item(), {
+  metadata: [
+    {
+      key: 'dc.contributor.author',
+      language: 'en_US',
+      value: 'Smith, Donald'
+    },
+    {
+      key: 'dc.date.issued',
+      language: null,
+      value: '1650-06-26'
+    }]
+});
+const createdGridElementComponent:ItemSearchResultGridElementComponent= new ItemSearchResultGridElementComponent(mockItem);
+
+describe('ItemSearchResultGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ItemSearchResultGridElementComponent, TruncatePipe ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useValue: (createdGridElementComponent) }
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(ItemSearchResultGridElementComponent);
+    itemSearchResultGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the item result cards in the grid element',() => {
+    expect(fixture.debugElement.query(By.css('ds-item-search-result-grid-element'))).toBeDefined();
+  });
+
+  it('should only show the author span if the author metadata is present',() => {
+    const itemAuthorField = expect(fixture.debugElement.query(By.css('p.item-authors')));
+
+    if (mockItem.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length > 0) {
+      expect(itemAuthorField).toBeDefined();
+    }else {
+      expect(itemAuthorField).not.toBeDefined();
+    }
+  });
+
+  it('should only show the date span if the issuedate is present',() => {
+    const dateField = expect(fixture.debugElement.query(By.css('span.item-list-date')));
+
+    if (mockItem.findMetadata('dc.date.issued').length > 0) {
+      expect(dateField).toBeDefined();
+    }else {
+      expect(dateField).not.toBeDefined();
+    }
+  });
+
+});

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Item } from '../../../../core/shared/item.model';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-item-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'],
+  templateUrl: 'item-search-result-grid-element.component.html'
+})
+
+@renderElementsFor(ItemSearchResult, ViewMode.Grid)
+export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss

@@ -0,0 +1,7 @@
+ @import '../../../../styles/variables';
+:host {
+    /deep/ em {
+        font-weight: bold;
+        font-style: normal;
+    }
+}

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts

@@ -0,0 +1,57 @@
+import { Component, Inject } from '@angular/core';
+
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { Metadatum } from '../../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../empty.util';
+import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-search-result-grid-element',
+  template: ``
+})
+
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends AbstractListableElementComponent<T> {
+  dso: K;
+
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    super(gridable);
+    this.dso = this.object.dspaceObject;
+  }
+
+  getValues(keys: string[]): string[] {
+    const results: string[] = new Array<string>();
+    this.object.hitHighlights.forEach(
+      (md: Metadatum) => {
+        if (keys.indexOf(md.key) > -1) {
+          results.push(md.value);
+        }
+      }
+    );
+    if (isEmpty(results)) {
+      this.dso.filterMetadata(keys).forEach(
+        (md: Metadatum) => {
+          results.push(md.value);
+        }
+      );
+    }
+    return results;
+  }
+
+  getFirstValue(key: string): string {
+    let result: string;
+    this.object.hitHighlights.some(
+      (md: Metadatum) => {
+        if (key === md.key) {
+          result =  md.value;
+          return true;
+        }
+      }
+    );
+    if (hasNoValue(result)) {
+      result = this.dso.findMetadata(key);
+    }
+    return result;
+  }
+}

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html

@@ -0,0 +1 @@
+<ng-container *ngComponentOutlet="getGridElement(); injector: objectInjector;"></ng-container>

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.spec.ts

@@ -0,0 +1,43 @@
+import { WrapperGridElementComponent } from './wrapper-grid-element.component';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { Observable } from 'rxjs/Observable';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterStub } from '../../testing/router-stub';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+
+let wrapperGridElementComponent: WrapperGridElementComponent;
+let fixture: ComponentFixture<WrapperGridElementComponent>;
+const queryParam = 'test query';
+const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';
+const activatedRouteStub = {
+  queryParams: Observable.of({
+    query: queryParam,
+    scope: scopeParam
+  })
+};
+
+describe('WrapperGridElementComponent', () => {
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ WrapperGridElementComponent ],
+      providers: [
+        { provide: ActivatedRoute, useValue: activatedRouteStub },
+        { provide: Router, useClass: RouterStub },
+        { provide: 'objectElementProvider', useFactory: (wrapperGridElementComponent)}
+      ],
+
+      schemas: [ NO_ERRORS_SCHEMA ]
+    }).compileComponents();  // compile template and css
+  }));
+
+  beforeEach(async(() => {
+    fixture = TestBed.createComponent(WrapperGridElementComponent);
+    wrapperGridElementComponent = fixture.componentInstance;
+
+  }));
+
+  it('should show the wrapper element containing the cards',() => {
+    expect(fixture.debugElement.query(By.css('ds-collection-grid-element'))).toBeDefined();
+  })
+})

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
+import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-wrapper-grid-element',
+  styleUrls: ['./wrapper-grid-element.component.scss'],
+  templateUrl: './wrapper-grid-element.component.html'
+})
+export class WrapperGridElementComponent implements OnInit {
+  @Input() object: ListableObject;
+  objectInjector: Injector;
+
+  constructor(private injector: Injector) {}
+
+  ngOnInit(): void {
+    this.objectInjector = ReflectiveInjector.resolveAndCreate(
+      [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
+
+  }
+
+  getGridElement(): string {
+    const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
+    return rendersDSOType(f, ViewMode.Grid);
+  }
+}