hazza/dspace-angular
1
0
Fork 1
mirror of https://github.com/DSpace/dspace-angular.git synced 2025-10-15 14:03:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Art Lowel
2018-04-26 10:57:12 +02:00
parent 545145a759
commit 994c089925
23 changed files with 208 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,13 +1,13 @@
<div class="card">
<a [routerLink]="['/collections/' + object.id]"class="card-img-top">
<ds-comcol-page-logo [logo]="object.logo">
</ds-comcol-page-logo>
<a [routerLink]="['/collections/', object.id]" class="card-img-top">
<ds-grid-thumbnail [thumbnail]="object.logo">
</ds-grid-thumbnail>
</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>
<a [routerLink]="['/collections/', object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>

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

@@ -1,14 +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 [routerLink]="['/communities/', object.id]" class="card-img-top">
<ds-grid-thumbnail [thumbnail]="object.logo">
</ds-grid-thumbnail>
</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>
<a [routerLink]="['/communities/', object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

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

@@ -1,6 +1,6 @@
<div class="card">
<a [routerLink]="['/items/' + object.id]" class="card-img-top">
<a [routerLink]="['/items/', object.id]" class="card-img-top">
<ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
</ds-grid-thumbnail>
</a>
@@ -16,7 +16,7 @@
<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>
<a [routerLink]="['/items/', object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

8
src/app/shared/object-grid/object-grid.component.html
View File

@@ -10,12 +10,14 @@
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortFieldChange($event)"
(paginationChange)="onPaginationChange($event)">
<div class="card-columns" *ngIf="objects?.hasSucceeded" @fadeIn>
<div
*ngFor="let object of objects?.payload?.page">
<div class="card-columns" *ngIf="objects?.hasSucceeded">
<div class="card-column" *ngFor="let column of (columns$ | async)" @fadeIn>
<div class="card-element" *ngFor="let object of column">
<ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
</div>
</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>

37
src/app/shared/object-grid/object-grid.component.scss
View File

@@ -11,14 +11,33 @@ ds-wrapper-grid-element ::ng-deep {
}
}
$gutter: ($grid-gutter-width / 2);
$min-width: 300px;
$max-cols: 3;
.card-columns {
@include media-breakpoint-only(lg) {
column-count: 3;
display: flex;
flex-wrap: wrap;
margin-left: -$gutter;
margin-top: -$gutter;
.card-column {
flex: 1 0 $min-width;
margin-left: $gutter;
margin-top: $gutter;
@for $i from 2 through $max-cols {
$screen-width: ($min-width*$i)+($gutter*$i);
$column-width: (100%/$i);
@media (min-width: $screen-width) {
max-width: calc(#{$column-width} - #{$gutter});
}
}
$column-width: (100%/$max-cols);
@media (min-width: $min-width*$max-cols) {
min-width: calc(#{$column-width} - #{$gutter});
}
}
@include media-breakpoint-only(sm) {
column-count: 2;
}
@include media-breakpoint-only(xs) {
column-count: 1;
}
}
}

64
src/app/shared/object-grid/object-grid.component.ts
View File

@@ -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);
}

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

@@ -1,13 +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 [routerLink]="['/collections/', dso.id]" class="card-img-top">
<ds-grid-thumbnail [thumbnail]="dso.logo">
</ds-grid-thumbnail>
</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>
<a [routerLink]="['/collections/', dso.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>

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

@@ -1,14 +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 [routerLink]="['/communities/', dso.id]" class="card-img-top">
<ds-grid-thumbnail [thumbnail]="dso.logo">
</ds-grid-thumbnail>
</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>
<a [routerLink]="['/communities/', dso.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>
</div>