fixed a few sorting, rpp and view persistence issues with grid view

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 { 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<PaginatedList<ListableObject>>;
+  private _objects$: BehaviorSubject<RemoteData<PaginatedList<ListableObject>>>;
   @Input() set objects(objects: RemoteData<PaginatedList<ListableObject>>) {
-    this._objects = objects;
+    this._objects$.next(objects);
   }
   get objects() {
-    return this._objects;
+    return this._objects$.getValue();
   }
 
   /**
@@ -77,6 +82,55 @@ export class ObjectGridComponent {
    */
   @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
   data: any = {};
+  columns$: Observable<ListableObject[]>
+
+  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;
+          }
+        }
+      })
+    ).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);
   }