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

#150 Initial grid/list view implementation

Browse Source
This commit is contained in:
Jonas Van Goolen
2017-10-26 09:38:27 +02:00
parent 16786a90ff
commit a704157c1f
58 changed files with 684 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@@ -103,6 +103,7 @@
"methods": "1.1.2",
"morgan": "1.9.0",
"ngx-pagination": "3.0.1",
"object-fit-images": "^3.2.3",
"pem": "1.12.3",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.3",

4
src/app/+collection-page/collection-page.component.html
View File

@@ -41,13 +41,13 @@
<ng-container *ngVar="(itemRDObs | async) as itemRD">
<div *ngIf="itemRD?.hasSucceeded" @fadeIn>
<h2>{{'collection.page.browse.recent.head' | translate}}</h2>
<ds-object-list
<ds-viewable-collection
[config]="paginationConfig"
[sortConfig]="sortConfig"
[objects]="itemRD"
[hideGear]="false"
(paginationChange)="onPaginationChange($event)">
</ds-object-list>
</ds-viewable-collection>
</div>
<ds-error *ngIf="itemRD?.hasFailed" message="{{'error.recent-submissions' | translate}}"></ds-error>
<ds-loading *ngIf="!itemRD || itemRD.isLoading" message="{{'loading.recent-submissions' | translate}}"></ds-loading>

8
src/app/+community-page/sub-collection-list/community-page-sub-collection-list.component.html
View File

@@ -2,12 +2,8 @@
<div *ngIf="subCollectionsRD?.hasSucceeded" @fadeIn>
<h2>{{'community.sub-collection-list.head' | translate}}</h2>
<ul>
<li *ngFor="let collection of subCollectionsRD?.payload">
<p>
<span class="lead"><a [routerLink]="['/collections', collection.id]">{{collection.name}}</a></span><br>
<span class="text-muted">{{collection.shortDescription}}</span>
</p>
</li>
<ds-viewable-collection [objects]="subCollectionsRD?.payload">
</ds-viewable-collection>
</ul>
</div>
<ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>

10
src/app/+home-page/top-level-community-list/top-level-community-list.component.html
View File

@@ -2,14 +2,12 @@
<div *ngIf="communitiesRD?.hasSucceeded " @fadeInOut>
<h2>{{'home.top-level-communities.head' | translate}}</h2>
<p class="lead">{{'home.top-level-communities.help' | translate}}</p>
<ds-object-list
<ds-viewable-collection
[config]="config"
[sortConfig]="sortConfig"
[objects]="communitiesRD"
[hideGear]="true"
(paginationChange)="updatePage($event)">
</ds-object-list>
</ds-viewable-collection>
</div>
<ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
<ds-loading *ngIf="communitiesRD?.isLoading" message="{{'loading.top-level-communities' | translate}}"></ds-loading>
</ng-container>
<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container>

15
src/app/+search-page/search-page.component.ts
View File

@@ -51,7 +51,22 @@ export class SearchPageComponent implements OnInit, OnDestroy {
);
this.scopeListRDObs = communityService.findAll();
// Initial pagination config
const pagination: PaginationComponentOptions = new PaginationComponentOptions();
pagination.id = 'search-results-pagination';
pagination.currentPage = 1;
pagination.pageSize = 10;
// TODO Update to accommodate view switcher
this.route.queryParams.map((params) => {
if (isNotEmpty(params.view) && params.view == 'grid') {
pagination.pageSize = 12;
}
});
const sort: SortOptions = new SortOptions();
this.searchOptions = this.service.searchOptions;
}
ngOnInit(): void {

15
src/app/+search-page/search-page.module.ts
View File

@@ -7,6 +7,9 @@ import { SearchResultsComponent } from './search-results/search-results.componen
import { ItemSearchResultListElementComponent } from '../object-list/search-result-list-element/item-search-result/item-search-result-list-element.component';
import { CollectionSearchResultListElementComponent } from '../object-list/search-result-list-element/collection-search-result/collection-search-result-list-element.component';
import { CommunitySearchResultListElementComponent } from '../object-list/search-result-list-element/community-search-result/community-search-result-list-element.component';
import { ItemSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component';
import { CommunitySearchResultGridElementComponent } from '../object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component'
import { CollectionSearchResultGridElementComponent } from '../object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component';
import { SearchService } from './search-service/search.service';
import { SearchSidebarComponent } from './search-sidebar/search-sidebar.component';
import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
@@ -37,6 +40,10 @@ const effects = [
ItemSearchResultListElementComponent,
CollectionSearchResultListElementComponent,
CommunitySearchResultListElementComponent,
ItemSearchResultGridElementComponent,
CollectionSearchResultGridElementComponent,
CommunitySearchResultGridElementComponent,
CommunitySearchResultListElementComponent,
SearchFiltersComponent,
SearchFilterComponent,
SearchFacetFilterComponent
@@ -49,7 +56,11 @@ const effects = [
entryComponents: [
ItemSearchResultListElementComponent,
CollectionSearchResultListElementComponent,
CommunitySearchResultListElementComponent
CommunitySearchResultListElementComponent,
ItemSearchResultGridElementComponent,
CollectionSearchResultGridElementComponent,
CommunitySearchResultGridElementComponent,
]
})
export class SearchPageModule { }
export class SearchPageModule {
}

2
src/app/+search-page/search-result.model.ts
View File

@@ -1,6 +1,6 @@
import { DSpaceObject } from '../core/shared/dspace-object.model';
import { Metadatum } from '../core/shared/metadatum.model';
import { ListableObject } from '../object-list/listable-object/listable-object.model';
import { ListableObject } from '../object-collection/shared/listable-object.model';
export class SearchResult<T extends DSpaceObject> implements ListableObject {

4
src/app/+search-page/search-results/search-results.component.html
View File

@@ -1,10 +1,10 @@
<div *ngIf="searchResults?.hasSucceeded" @fadeIn>
<h2 *ngIf="searchResults?.payload ?.length > 0">{{ 'search.results.head' | translate }}</h2>
<ds-object-list
<ds-viewable-collection
[config]="searchConfig.pagination"
[sortConfig]="searchConfig.sort"
[objects]="searchResults"
[hideGear]="true">
</ds-object-list></div>
</ds-viewable-collection></div>
<ds-loading *ngIf="searchResults?.isLoading" message="{{'loading.search-results' | translate}}"></ds-loading>
<ds-error *ngIf="searchResults?.hasFailed" message="{{'error.search-results' | translate}}"></ds-error>

2
src/app/+search-page/search-service/search.service.ts
View File

@@ -9,10 +9,10 @@ import { SearchOptions } from '../search-options.model';
import { hasValue, isNotEmpty } from '../../shared/empty.util';
import { Metadatum } from '../../core/shared/metadatum.model';
import { Item } from '../../core/shared/item.model';
import { ItemSearchResult } from '../../object-list/search-result-list-element/item-search-result/item-search-result.model';
import { SearchFilterConfig } from './search-filter-config.model';
import { FilterType } from './filter-type.model';
import { FacetValue } from './facet-value.model';
import { ItemSearchResult } from '../../object-collection/shared/item-search-result.model';
import { ViewMode } from '../../+search-page/search-options.model';
import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
import { RouteService } from '../../shared/route.service';

2
src/app/core/shared/dspace-object.model.ts
View File

@@ -3,7 +3,7 @@ import { isEmpty, isNotEmpty } from '../../shared/empty.util';
import { CacheableObject } from '../cache/object-cache.reducer';
import { RemoteData } from '../data/remote-data';
import { ResourceType } from './resource-type';
import { ListableObject } from '../../object-list/listable-object/listable-object.model';
import { ListableObject } from '../../object-collection/shared/listable-object.model';
import { Observable } from 'rxjs/Observable';
/**

13
src/app/object-collection/object-collection.component.html Normal file
View File

@@ -0,0 +1,13 @@
<ds-object-list [config]="config"
[sortConfig]="sortConfig"
[objects]="objects"
*ngIf="getViewMode()=='list'">
</ds-object-list>
<ds-object-grid [config]="config"
[sortConfig]="sortConfig"
[objects]="objects"
*ngIf="getViewMode()=='grid'">
</ds-object-grid>

1
src/app/object-collection/object-collection.component.scss Normal file
View File

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

113
src/app/object-collection/object-collection.component.ts Normal file
View File

@@ -0,0 +1,113 @@
import { Component, EventEmitter,
Input,
OnInit,
Output, SimpleChanges, OnChanges, ChangeDetectorRef } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { RemoteData } from '../core/data/remote-data';
import { PageInfo } from '../core/shared/page-info.model';
import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
import { SortDirection } from '../core/cache/models/sort-options.model';
import { ListableObject } from './shared/listable-object.model';
import { hasValue, isNotEmpty } from '../shared/empty.util';
@Component({
selector: 'ds-viewable-collection',
styleUrls: ['./object-collection.component.scss'],
templateUrl: './object-collection.component.html',
})
export class ObjectCollectionComponent implements OnChanges, OnInit {
@Input() objects: RemoteData<ListableObject[]>;
@Input() config?: PaginationComponentOptions;
pageInfo: Observable<PageInfo>;
/**
* 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 = {};
defaultViewMode: string ='list';
ngOnChanges(changes: SimpleChanges) {
if (changes.objects && !changes.objects.isFirstChange()) {
this.pageInfo = this.objects.pageInfo;
}
}
ngOnInit(): void {
this.pageInfo = this.objects.pageInfo;
}
/**
* @param route
* Route is a singleton service provided by Angular.
* @param router
* Router is a singleton service provided by Angular.
*/
constructor(private cdRef: ChangeDetectorRef, private route: ActivatedRoute,
private router: Router) {
}
getViewMode(): string {
// TODO Update to accommodate view switcher
this.route.queryParams.map((params) => {
if (isNotEmpty(params.view) && hasValue(params.view)) {
return params.view;
} else {
return this.defaultViewMode;
}
});
return this.defaultViewMode;
}
setViewMode(viewMode: string) {
this.defaultViewMode = viewMode;
}
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);
}
}

5
src/app/object-collection/shared/item-search-result.model.ts Normal file
View File

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

0
src/app/object-list/listable-object/listable-object.model.ts → src/app/object-collection/shared/listable-object.model.ts
View File

12
src/app/object-grid/collection-grid-element/collection-grid-element.component.html Normal file
View File

@@ -0,0 +1,12 @@
<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-block">
<h4 class="card-title">{{object.name}}</h4>
<p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
<a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>

2
src/app/object-grid/collection-grid-element/collection-grid-element.component.scss Normal file
View File

@@ -0,0 +1,2 @@
@import '../../../styles/variables.scss';
@import '../grid-card-styling.scss';

14
src/app/object-grid/collection-grid-element/collection-grid-element.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component, Inject } from '@angular/core';
import { Collection } from '../../core/shared/collection.model';
import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
import { gridElementFor } from '../grid-element-decorator';
@Component({
selector: 'ds-collection-grid-element',
styleUrls: ['./collection-grid-element.component.scss'],
templateUrl: './collection-grid-element.component.html'
})
@gridElementFor(Collection)
export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}

12
src/app/object-grid/community-grid-element/community-grid-element.component.html Normal file
View File

@@ -0,0 +1,12 @@
<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-block">
<h4 class="card-title">{{object.name}}</h4>
<p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
<a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
</div>
</div>

2
src/app/object-grid/community-grid-element/community-grid-element.component.scss Normal file
View File

@@ -0,0 +1,2 @@
@import '../../../styles/variables.scss';
@import '../grid-card-styling.scss';

14
src/app/object-grid/community-grid-element/community-grid-element.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component, Input, Inject } from '@angular/core';
import { Community } from '../../core/shared/community.model';
import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
import { gridElementFor} from '../grid-element-decorator';
@Component({
selector: 'ds-community-grid-element',
styleUrls: ['./community-grid-element.component.scss'],
templateUrl: './community-grid-element.component.html'
})
@gridElementFor(Community)
export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}

36
src/app/object-grid/grid-card-styling.scss Normal file
View File

@@ -0,0 +1,36 @@
.card-title{
line-height: 1em;
height:3em;
overflow: hidden;
text-overflow: ellipsis;
}
.card-text {
overflow: hidden;
text-overflow: ellipsis;
line-height: 1em;
margin-bottom:10px;
}
.card-text.item-authors {
height: 1em;
}
.card-text.item-abstract {
height: 5em;
}
.viewButton{
display:block;
}
.card{
padding:10px;
margin-bottom: 15px;
}
.card-img-top ::ng-deep img
{
height: 120px;
width: 100%;
object-fit: cover;
margin-bottom: 10px;
}

16
src/app/object-grid/grid-element-decorator.ts Normal file
View File

@@ -0,0 +1,16 @@
import { GenericConstructor } from '../core/shared/generic-constructor';
import { ListableObject } from '../object-collection/shared/listable-object.model';
const gridElementMap = new Map();
export function gridElementFor(gridable: GenericConstructor<ListableObject>) {
return function decorator(objectElement: any) {
if (!objectElement) {
return;
}
gridElementMap.set(gridable, objectElement);
};
}
export function getGridElementFor(gridable: GenericConstructor<ListableObject>) {
return gridElementMap.get(gridable);
}

20
src/app/object-grid/item-grid-element/item-grid-element.component.html Normal file
View File

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

2
src/app/object-grid/item-grid-element/item-grid-element.component.scss Normal file
View File

@@ -0,0 +1,2 @@
@import '../../../styles/variables.scss';
@import '../grid-card-styling.scss';

14
src/app/object-grid/item-grid-element/item-grid-element.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component, Input, Inject } from '@angular/core';
import { Item } from '../../core/shared/item.model';
import { gridElementFor } from '../grid-element-decorator';
import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
@Component({
selector: 'ds-item-grid-element',
styleUrls: ['./item-grid-element.component.scss'],
templateUrl: './item-grid-element.component.html'
})
@gridElementFor(Item)
export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}

0
src/app/object-grid/object-grid-element/object-grid-element.component.html Normal file
View File

6
src/app/object-grid/object-grid-element/object-grid-element.component.scss Normal file
View File

@@ -0,0 +1,6 @@
@import '../../../styles/variables.scss';
@import '../grid-card-styling.scss';
:host {
display: block;
margin-bottom: $spacer;
}

14
src/app/object-grid/object-grid-element/object-grid-element.component.ts Normal file
View File

@@ -0,0 +1,14 @@
import { Component, Inject } from '@angular/core';
import { ListableObject } from '../../object-collection/shared/listable-object.model';
@Component({
selector: 'ds-object-grid-element',
styleUrls: ['./object-grid-element.component.scss'],
templateUrl: './object-grid-element.component.html'
})
export class ObjectGridElementComponent <T extends ListableObject> {
object: T;
public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
this.object = gridable as T;
}
}

23
src/app/object-grid/object-grid.component.html Normal file
View File

@@ -0,0 +1,23 @@
<ds-pagination
[paginationOptions]="config"
[pageInfoState]="pageInfo"
[collectionSize]="(pageInfo | async)?.totalElements"
[sortOptions]="sortConfig"
[hideGear]="hideGear"
[hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
(pageChange)="onPageChange($event)"
(pageSizeChange)="onPageSizeChange($event)"
(sortDirectionChange)="onSortDirectionChange($event)"
(sortFieldChange)="onSortDirectionChange($event)"
(paginationChange)="onPaginationChange($event)">
<ul *ngIf="objects.hasSucceeded | async" @fadeIn>
<div class="row">
<div class="col-lg-3 col-xs-12 col-sm-6"
*ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
<ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
</div>
</div>
</ul>
<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>

1
src/app/object-grid/object-grid.component.scss Normal file
View File

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

86
src/app/object-grid/object-grid.component.ts Normal file
View File

@@ -0,0 +1,86 @@
import {
Component, EventEmitter,
Input,
ViewEncapsulation,
ChangeDetectionStrategy,
OnInit,
Output, SimpleChanges, OnChanges, ChangeDetectorRef, DoCheck
} from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { RemoteData } from '../core/data/remote-data';
import { PageInfo } from '../core/shared/page-info.model';
import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
import { SortOptions, SortDirection } from '../core/cache/models/sort-options.model';
import { fadeIn } from '../shared/animations/fade';
import { ListableObject } from '../object-collection/shared/listable-object.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 implements OnChanges, OnInit {
@Input() objects: RemoteData<ListableObject[]>;
@Input() config: PaginationComponentOptions;
@Input() sortConfig: SortOptions;
@Input() hideGear = false;
@Input() hidePagerWhenSinglePage = true;
pageInfo: Observable<PageInfo>;
/**
* 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 = {};
ngOnChanges(changes: SimpleChanges) {
if (changes.objects && !changes.objects.isFirstChange()) {
this.pageInfo = this.objects.pageInfo;
}
}
ngOnInit(): void {
this.pageInfo = this.objects.pageInfo;
this.config.pageSize = 4;
}
/**
* @param route
* Route is a singleton service provided by Angular.
* @param router
* Router is a singleton service provided by Angular.
*/
constructor(private cdRef: ChangeDetectorRef) {
}
}

2
src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html Normal file
View File

@@ -0,0 +1,2 @@
<a [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>

2
src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss Normal file
View File

@@ -0,0 +1,2 @@
@import '../../../../styles/variables.scss';
@import '../../grid-card-styling.scss';

15
src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { gridElementFor } from '../../grid-element-decorator';
import { CollectionSearchResult } from './collection-search-result.model';
import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
import { Collection } from '../../../core/shared/collection.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'
})
@gridElementFor(CollectionSearchResult)
export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}

5
src/app/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts Normal file
View File

@@ -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> {
}

2
src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html Normal file
View File

@@ -0,0 +1,2 @@
<a [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>

2
src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss Normal file
View File

@@ -0,0 +1,2 @@
@import '../../../../styles/variables.scss';
@import '../../grid-card-styling.scss';

17
src/app/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts Normal file
View File

@@ -0,0 +1,17 @@
import { Component } from '@angular/core';
import { CommunitySearchResult } from './community-search-result.model';
import { Community } from '../../../core/shared/community.model';
import { gridElementFor } from '../../grid-element-decorator';
import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
@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'
})
@gridElementFor(CommunitySearchResult)
export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
}

5
src/app/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts Normal file
View File

@@ -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> {
}

27
src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html Normal file
View File

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

2
src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss Normal file
View File

@@ -0,0 +1,2 @@
@import '../../../../styles/variables.scss';
@import '../../grid-card-styling.scss';

15
src/app/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component } from '@angular/core';
import { gridElementFor } from '../../grid-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';
@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'
})
@gridElementFor(ItemSearchResult)
export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}

8
src/app/object-grid/search-result-grid-element/search-result-grid-element.component.scss Normal file
View File

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

57
src/app/object-grid/search-result-grid-element/search-result-grid-element.component.ts Normal file
View File

@@ -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 '../../shared/empty.util';
import { ObjectGridElementComponent } from '../object-grid-element/object-grid-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 ObjectGridElementComponent<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;
}
}

1
src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.html Normal file
View File

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

2
src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss Normal file
View File

@@ -0,0 +1,2 @@
@import '../../../styles/variables.scss';
@import '../grid-card-styling.scss';

27
src/app/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts Normal file
View File

@@ -0,0 +1,27 @@
import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
import { GenericConstructor } from '../../core/shared/generic-constructor';
import { getGridElementFor } from '../grid-element-decorator';
import { ListableObject } from '../../object-collection/shared/listable-object.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 getGridElementFor(f);
}
}

2
src/app/object-list/list-element-decorator.ts
View File

@@ -1,5 +1,5 @@
import { ListableObject } from './listable-object/listable-object.model';
import { GenericConstructor } from '../core/shared/generic-constructor';
import { ListableObject } from '../object-collection/shared/listable-object.model';
const listElementMap = new Map();
export function listElementFor(listable: GenericConstructor<ListableObject>) {

2
src/app/object-list/object-list-element/object-list-element.component.ts
View File

@@ -1,5 +1,5 @@
import { Component, Inject } from '@angular/core';
import { ListableObject } from '../listable-object/listable-object.model';
import { ListableObject } from '../../object-collection/shared/listable-object.model';
@Component({
selector: 'ds-object-list-element',

4
src/app/object-list/object-list.component.ts
View File

@@ -11,9 +11,8 @@ import { SortDirection, SortOptions } from '../core/cache/models/sort-options.mo
import { RemoteData } from '../core/data/remote-data';
import { PageInfo } from '../core/shared/page-info.model';
import { ListableObject } from '../object-list/listable-object/listable-object.model';
import { fadeIn } from '../shared/animations/fade';
import { ListableObject } from '../object-collection/shared/listable-object.model';
import { hasValue } from '../shared/empty.util';
import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
@@ -83,6 +82,7 @@ export class ObjectListComponent {
@Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
data: any = {};
onPageChange(event) {
this.pageChange.emit(event);
}

2
src/app/object-list/search-result-list-element/item-search-result/item-search-result-list-element.component.ts
View File

@@ -1,9 +1,9 @@
import { Component } from '@angular/core';
import { listElementFor } from '../../list-element-decorator';
import { ItemSearchResult } from './item-search-result.model';
import { SearchResultListElementComponent } from '../search-result-list-element.component';
import { Item } from '../../../core/shared/item.model';
import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
@Component({
selector: 'ds-item-search-result-list-element',

5
src/app/object-list/search-result-list-element/item-search-result/item-search-result.model.ts
View File

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

2
src/app/object-list/search-result-list-element/search-result-list-element.component.ts
View File

@@ -1,11 +1,11 @@
import { Component, Inject } from '@angular/core';
import { ObjectListElementComponent } from '../object-list-element/object-list-element.component';
import { ListableObject } from '../listable-object/listable-object.model';
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 '../../shared/empty.util';
import { ListableObject } from '../../object-collection/shared/listable-object.model';
@Component({
selector: 'ds-search-result-list-element',

2
src/app/object-list/wrapper-list-element/wrapper-list-element.component.ts
View File

@@ -1,7 +1,7 @@
import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
import { ListableObject } from '../listable-object/listable-object.model';
import { getListElementFor } from '../list-element-decorator'
import { GenericConstructor } from '../../core/shared/generic-constructor';
import { ListableObject } from '../../object-collection/shared/listable-object.model';
@Component({
selector: 'ds-wrapper-list-element',

35
src/app/shared/shared.module.ts
View File

@@ -15,20 +15,30 @@ import { SafeUrlPipe } from './utils/safe-url-pipe';
import { TruncatePipe } from './utils/truncate.pipe';
import { CollectionListElementComponent } from '../object-list/collection-list-element/collection-list-element.component';
import { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
import { ObjectListComponent } from '../object-list/object-list.component';
import { CollectionGridElementComponent} from '../object-grid/collection-grid-element/collection-grid-element.component'
import { CommunityGridElementComponent} from '../object-grid/community-grid-element/community-grid-element.component'
import { ItemGridElementComponent} from '../object-grid/item-grid-element/item-grid-element.component'
import { ObjectGridElementComponent} from '../object-grid/object-grid-element/object-grid-element.component'
import { WrapperGridElementComponent} from '../object-grid/wrapper-grid-element/wrapper-grid-element.component'
import { ObjectGridComponent } from '../object-grid/object-grid.component';
import { ObjectCollectionComponent } from '../object-collection/object-collection.component';
import { ComcolPageContentComponent } from './comcol-page-content/comcol-page-content.component';
import { ComcolPageHeaderComponent } from './comcol-page-header/comcol-page-header.component';
import { ComcolPageLogoComponent } from './comcol-page-logo/comcol-page-logo.component';
import { CommunityListElementComponent } from '../object-list/community-list-element/community-list-element.component';
import { ErrorComponent } from './error/error.component';
import { LoadingComponent } from './loading/loading.component';
import { ItemListElementComponent } from '../object-list/item-list-element/item-list-element.component';
import { ObjectListComponent } from '../object-list/object-list.component';
import { ObjectListElementComponent } from '../object-list/object-list-element/object-list-element.component';
import { PaginationComponent } from './pagination/pagination.component';
import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
import { SearchFormComponent } from './search-form/search-form.component';
import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
import { SearchResultGridElementComponent } from '../object-grid/search-result-grid-element/search-result-grid-element.component';
import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
import { VarDirective } from './utils/var.directive';
@@ -60,6 +70,11 @@ const COMPONENTS = [
LoadingComponent,
ObjectListComponent,
ObjectListElementComponent,
WrapperListElementComponent,
ObjectGridComponent,
ObjectGridElementComponent,
WrapperGridElementComponent,
ObjectCollectionComponent,
PaginationComponent,
SearchFormComponent,
ThumbnailComponent,
@@ -69,10 +84,14 @@ const COMPONENTS = [
const ENTRY_COMPONENTS = [
// put shared entry components (components that are created dynamically) here
ItemListElementComponent,
CollectionListElementComponent,
CommunityListElementComponent,
ItemListElementComponent,
SearchResultListElementComponent
SearchResultListElementComponent,
ItemGridElementComponent,
CollectionGridElementComponent,
CommunityGridElementComponent,
SearchResultGridElementComponent
];
const DIRECTIVES = [

1
src/styles/_mixins.scss
View File

@@ -2,3 +2,4 @@
@import '../../node_modules/bootstrap/scss/mixins.scss';
/* Custom mixins go here */

4
yarn.lock
View File

@@ -4804,6 +4804,10 @@ object-copy@^0.1.0:
define-property "^0.2.5"
kind-of "^3.0.3"
object-fit-images@^3.2.3:
version "3.2.3"
resolved "https://registry.yarnpkg.com/object-fit-images/-/object-fit-images-3.2.3.tgz#4089f6d0070a3b5563d3c1ab6f1b28d61331f0ac"
object-keys@^1.0.8:
version "1.0.11"
resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.11.tgz#c54601778ad560f1142ce0e01bcca8b56d13426d"