+
+
diff --git a/src/app/shared/object-grid/object-grid.component.scss b/src/app/shared/object-grid/object-grid.component.scss
index 1b9418be48..ff78634863 100644
--- a/src/app/shared/object-grid/object-grid.component.scss
+++ b/src/app/shared/object-grid/object-grid.component.scss
@@ -1,24 +1,26 @@
@import '../../../styles/variables';
@import '../../../styles/mixins';
+$ds-wrapper-grid-spacing: $spacer/2;
+
ds-wrapper-grid-element ::ng-deep {
div.thumbnail > img {
height: $card-thumbnail-height;
width: 100%;
}
div.card {
- margin-bottom: $spacer;
+ margin-top: $ds-wrapper-grid-spacing;
+ margin-bottom: $ds-wrapper-grid-spacing;
}
}
.card-columns {
- @include media-breakpoint-only(lg) {
- column-count: 3;
+ margin-left: -$ds-wrapper-grid-spacing;
+ margin-right: -$ds-wrapper-grid-spacing;
+
+ .card-column {
+ padding-left: $ds-wrapper-grid-spacing;
+ padding-right: $ds-wrapper-grid-spacing;
}
- @include media-breakpoint-only(sm) {
- column-count: 2;
- }
- @include media-breakpoint-only(xs) {
- column-count: 1;
- }
-}
\ No newline at end of file
+}
+
diff --git a/src/app/shared/object-grid/object-grid.component.spec.ts b/src/app/shared/object-grid/object-grid.component.spec.ts
index e69de29bb2..2ced28718a 100644
--- a/src/app/shared/object-grid/object-grid.component.spec.ts
+++ b/src/app/shared/object-grid/object-grid.component.spec.ts
@@ -0,0 +1,224 @@
+import { cold, hot } from 'jasmine-marbles';
+import { map } from 'rxjs/operators';
+import { WidthCategory } from '../host-window.service';
+import { ObjectGridComponent } from './object-grid.component';
+
+describe('ObjectGridComponent', () => {
+ const testObjects = [
+ { one: 1 },
+ { two: 2 },
+ { three: 3 },
+ { four: 4 },
+ { five: 5 },
+ { six: 6 },
+ { seven: 7 },
+ { eight: 8 },
+ { nine: 9 },
+ { ten: 10 }
+ ];
+ const mockRD = {
+ payload: {
+ page: testObjects
+ }
+ } as any;
+
+ describe('the number of columns', () => {
+
+ it('should be 3 for xl screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.XL }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: 3 });
+
+ const result = comp.columns$.pipe(
+ map((columns) => columns.length)
+ );
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be 3 for lg screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.LG }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: 3 });
+
+ const result = comp.columns$.pipe(
+ map((columns) => columns.length)
+ );
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be 2 for md screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.MD }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: 2 });
+
+ const result = comp.columns$.pipe(
+ map((columns) => columns.length)
+ );
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be 2 for sm screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.SM }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: 2 });
+
+ const result = comp.columns$.pipe(
+ map((columns) => columns.length)
+ );
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be 1 for xs screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.XS }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: 1 });
+
+ const result = comp.columns$.pipe(
+ map((columns) => columns.length)
+ );
+
+ expect(result).toBeObservable(expected);
+ });
+
+ });
+
+ describe('The ordering of the content', () => {
+ it('should be left to right for XL screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.XL }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: [
+ [testObjects[0], testObjects[3], testObjects[6], testObjects[9]],
+ [testObjects[1], testObjects[4], testObjects[7]],
+ [testObjects[2], testObjects[5], testObjects[8]]
+ ] });
+
+ const result = comp.columns$;
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be left to right for LG screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.LG }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: [
+ [testObjects[0], testObjects[3], testObjects[6], testObjects[9]],
+ [testObjects[1], testObjects[4], testObjects[7]],
+ [testObjects[2], testObjects[5], testObjects[8]]
+ ] });
+
+ const result = comp.columns$;
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be left to right for MD screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.MD }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: [
+ [testObjects[0], testObjects[2], testObjects[4], testObjects[6], testObjects[8]],
+ [testObjects[1], testObjects[3], testObjects[5], testObjects[7], testObjects[9]],
+ ] });
+
+ const result = comp.columns$;
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be left to right for SM screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.SM }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: [
+ [testObjects[0], testObjects[2], testObjects[4], testObjects[6], testObjects[8]],
+ [testObjects[1], testObjects[3], testObjects[5], testObjects[7], testObjects[9]],
+ ] });
+
+ const result = comp.columns$;
+
+ expect(result).toBeObservable(expected);
+ });
+
+ it('should be top to bottom for XS screens', () => {
+ const hostWindowService = {
+ widthCategory: hot('a', { a: WidthCategory.XS }),
+ } as any;
+ const comp = new ObjectGridComponent(hostWindowService);
+
+ (comp as any)._objects$ = hot('b', { b: mockRD });
+
+ comp.ngOnInit();
+
+ const expected = cold('c', { c: [ testObjects ] });
+
+ const result = comp.columns$;
+
+ expect(result).toBeObservable(expected);
+ });
+ });
+});
diff --git a/src/app/shared/object-grid/object-grid.component.ts b/src/app/shared/object-grid/object-grid.component.ts
index a8f8ebb183..4c4add9b06 100644
--- a/src/app/shared/object-grid/object-grid.component.ts
+++ b/src/app/shared/object-grid/object-grid.component.ts
@@ -2,16 +2,21 @@ import {
ChangeDetectionStrategy,
Component,
EventEmitter,
- Input,
+ Input, OnInit,
Output,
ViewEncapsulation
} from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
+import { distinctUntilChanged, map } from 'rxjs/operators';
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 { hasNoValue, hasValue } from '../empty.util';
+import { HostWindowService, WidthCategory } from '../host-window.service';
import { ListableObject } from '../object-collection/shared/listable-object.model';
import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
@@ -25,18 +30,18 @@ import { PaginationComponentOptions } from '../pagination/pagination-component-o
animations: [fadeIn]
})
-export class ObjectGridComponent {
+export class ObjectGridComponent implements OnInit {
@Input() config: PaginationComponentOptions;
@Input() sortConfig: SortOptions;
@Input() hideGear = false;
@Input() hidePagerWhenSinglePage = true;
- private _objects: RemoteData
>;
+ private _objects$: BehaviorSubject>>;
@Input() set objects(objects: RemoteData>) {
- this._objects = objects;
+ this._objects$.next(objects);
}
get objects() {
- return this._objects;
+ return this._objects$.getValue();
}
/**
@@ -77,6 +82,56 @@ export class ObjectGridComponent {
*/
@Output() sortFieldChange: EventEmitter = new EventEmitter();
data: any = {};
+ columns$: Observable
+
+ constructor(private hostWindow: HostWindowService) {
+ this._objects$ = new BehaviorSubject(undefined);
+ }
+
+ ngOnInit(): void {
+ const nbColumns$ = this.hostWindow.widthCategory.pipe(
+ map((widthCat: WidthCategory) => {
+ switch (widthCat) {
+ case WidthCategory.XL:
+ case WidthCategory.LG: {
+ return 3;
+ }
+ case WidthCategory.MD:
+ case WidthCategory.SM: {
+ return 2;
+ }
+ default: {
+ return 1;
+ }
+ }
+ }),
+ distinctUntilChanged()
+ ).startWith(3);
+
+ this.columns$ = Observable.combineLatest(
+ nbColumns$,
+ this._objects$,
+ (nbColumns, objects) => {
+ if (hasValue(objects) && hasValue(objects.payload) && hasValue(objects.payload.page)) {
+ const page = objects.payload.page;
+
+ const result = [];
+
+ page.forEach((obj: ListableObject, i: number) => {
+ const colNb = i % nbColumns;
+ let col = result[colNb];
+ if (hasNoValue(col)) {
+ col = [];
+ }
+ result[colNb] = [...col, obj];
+ });
+ return result;
+ } else {
+ return [];
+ }
+ });
+ }
+
onPageChange(event) {
this.pageChange.emit(event);
}
diff --git a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
index d6b1bfb5f4..91548d945d 100644
--- a/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
+++ b/src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html
@@ -1,13 +1,13 @@
-
-
-
+
+
+
{{dso.name}}
{{dso.shortDescription}}
-
-
-
+
+
+
{{dso.name}}
{{dso.shortDescription}}