Dsc 513

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html

@@ -8,16 +8,16 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [defaultImage]="'assets/images/orgunit-placeholder.svg'" [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
-            <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
-            </div>
-        </span>
+      <div>
+        <ds-thumbnail [defaultImage]="'assets/images/orgunit-placeholder.svg'" [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-thumbnail>
+      </div>
+    </span>
     <div class="card-body">
       <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html

@@ -8,16 +8,16 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [defaultImage]="'assets/images/person-placeholder.svg'" [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
-            <div>
-                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-thumbnail>
-            </div>
-        </span>
+      <div>
+        <ds-thumbnail [defaultImage]="'assets/images/person-placeholder.svg'" [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        </ds-thumbnail>
+      </div>
+    </span>
     <div class="card-body">
       <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html

@@ -8,13 +8,13 @@
        rel="noopener noreferrer" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [defaultImage]="'assets/images/project-placeholder.svg'" [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType == linkTypes.None" class="card-img-top full-width">
       <div>
-        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [defaultImage]="'assets/images/project-placeholder.svg'" [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
         </ds-thumbnail>
       </div>
     </span>

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

@@ -1,30 +1,24 @@
-<ds-pagination
-  [paginationOptions]="config"
-  [pageInfoState]="objects?.payload"
-  [collectionSize]="objects?.payload?.totalElements"
-  [sortOptions]="sortConfig"
-  [hideGear]="hideGear"
-  [objects]="objects"
-  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
-  [hidePaginationDetail]="hidePaginationDetail"
-  [showPaginator]="showPaginator"
-  (pageChange)="onPageChange($event)"
-  (pageSizeChange)="onPageSizeChange($event)"
-  (sortDirectionChange)="onSortDirectionChange($event)"
-  (sortFieldChange)="onSortFieldChange($event)"
-  (paginationChange)="onPaginationChange($event)"
-  (prev)="goPrev()"
-  (next)="goNext()"
-  >
-    <div class="card-columns row" *ngIf="objects?.hasSucceeded">
-      <div class="card-column col col-sm-6 col-lg-4" *ngFor="let column of (columns$ | async)" @fadeIn>
-        <div class="card-element" *ngFor="let object of column" [attr.data-test]="'grid-object' | dsBrowserOnly">
-          <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode" [context]="context" [linkType]="linkType"></ds-listable-object-component-loader>
-        </div>
+<ds-pagination [paginationOptions]="config"
+               [pageInfoState]="objects?.payload"
+               [collectionSize]="objects?.payload?.totalElements"
+               [sortOptions]="sortConfig"
+               [hideGear]="hideGear"
+               [objects]="objects"
+               [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+               [hidePaginationDetail]="hidePaginationDetail"
+               [showPaginator]="showPaginator"
+               (pageChange)="onPageChange($event)"
+               (pageSizeChange)="onPageSizeChange($event)"
+               (sortDirectionChange)="onSortDirectionChange($event)"
+               (sortFieldChange)="onSortFieldChange($event)"
+               (paginationChange)="onPaginationChange($event)"
+               (prev)="goPrev()"
+               (next)="goNext()">
+    <div class="row" *ngIf="objects?.hasSucceeded">
+      <div class="col col-sm-6 col-lg-4 mb-3 object-grid-element" *ngFor="let result of (results$ | async)" @fadeIn>
+        <ds-listable-object-component-loader [object]="result" [viewMode]="viewMode" [context]="context" [linkType]="linkType"></ds-listable-object-component-loader>
       </div>
     </div>
   <ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error>
   <ds-themed-loading *ngIf="objects.isLoading" message="{{'loading.objects' | translate}}"></ds-themed-loading>
 </ds-pagination>
-
-

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

@@ -12,18 +12,24 @@
       min-width: 100%;
       min-height: 100%;
       object-fit: cover;
-      object-position: 50% 15%;
+      //object-position: 50% 15%;
     }
   }
 }
 
-.card-columns {
+.row {
   margin-left: calc(-1 * var(--ds-wrapper-grid-spacing));
   margin-right: calc(-1 * var(--ds-wrapper-grid-spacing));
   column-gap: 0;
 
-  .card-column {
+  .object-grid-element {
     padding-left: var(--ds-wrapper-grid-spacing);
     padding-right: var(--ds-wrapper-grid-spacing);
   }
 }
+
+:host ::ng-deep .object-grid-element {
+  div.card {
+    height: 100%;
+  }
+}

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

@@ -1,6 +1,4 @@
 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', () => {
@@ -22,211 +20,59 @@ describe('ObjectGridComponent', () => {
     }
   } as any;
 
-  describe('the number of columns', () => {
+  describe('the number of elements', () => {
 
-    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);
+    // 10 elements are declared in testObject
+    it('should be 10 for all screens', () => {
+      const comp = new ObjectGridComponent();
 
       (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]],
+          testObjects[0], testObjects[1], testObjects[2], testObjects[3], testObjects[4],
+          testObjects[5], testObjects[6], testObjects[7], testObjects[8], testObjects[9],
         ]
       });
 
-      const result = comp.columns$;
+      const result = comp.results$;
 
       expect(result).toBeObservable(expected);
     });
 
-    it('should be left to right for SM screens', () => {
-      const hostWindowService = {
-        widthCategory: hot('a', { a: WidthCategory.SM }),
+    // 5 elements are declared in testObject
+    it('should be 5 for all screens', () => {
+      const newTestObjects = [
+        { one: 1 },
+        { two: 2 },
+        { three: 3 },
+        { four: 4 },
+        { five: 5 }
+      ];
+      const newMockRD = {
+        payload: {
+          page: newTestObjects
+        }
       } as any;
-      const comp = new ObjectGridComponent(hostWindowService);
+      const comp = new ObjectGridComponent();
 
-      (comp as any)._objects$ = hot('b', { b: mockRD });
+      (comp as any)._objects$ = hot('b', { b: newMockRD });
 
       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]],
+          newTestObjects[0], newTestObjects[1], newTestObjects[2], newTestObjects[3], newTestObjects[4]
         ]
       });
 
-      const result = comp.columns$;
+      const result = comp.results$;
 
       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);
-    });
   });
+
 });