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

Merge branch 'master' into w2p-50632_Replace-mock-registry-service-with-implementation

Browse Source
This commit is contained in:
Kristof De Langhe
2018-05-03 11:44:47 +02:00
parent cfe4066b9e 99f8d4f24d
commit 9dd79eda2e
42 changed files with 556 additions and 148 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
nodemon.json
View File

@@ -4,5 +4,6 @@
"config",
"src/index.html"
],
"ext": "js ts json html"
"ext": "js ts json html",
"delay": "50"
}

4
resources/i18n/en.json
View File

@@ -56,6 +56,10 @@
"detail": "{{ range }} of {{ total }}"
}
},
"sorting": {
"ASC": "Ascending",
"DESC": "Descending"
},
"title": "DSpace",
"404": {
"help": "We can't find the page you're looking for. The page may have been moved or deleted. You can use the button below to get back to the home page. ",

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

@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { Subscription } from 'rxjs/Subscription';
import { SortOptions } from '../core/cache/models/sort-options.model';
import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
import { CollectionDataService } from '../core/data/collection-data.service';
import { ItemDataService } from '../core/data/item-data.service';
import { PaginatedList } from '../core/data/paginated-list';
@@ -48,7 +48,7 @@ export class CollectionPageComponent implements OnInit, OnDestroy {
this.paginationConfig.id = 'collection-page-pagination';
this.paginationConfig.pageSize = 5;
this.paginationConfig.currentPage = 1;
this.sortConfig = new SortOptions();
this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
}
ngOnInit(): void {

4
src/app/+home-page/top-level-community-list/top-level-community-list.component.ts
View File

@@ -1,6 +1,6 @@
import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { SortOptions } from '../../core/cache/models/sort-options.model';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { CommunityDataService } from '../../core/data/community-data.service';
import { PaginatedList } from '../../core/data/paginated-list';
@@ -27,7 +27,7 @@ export class TopLevelCommunityListComponent {
this.config.id = 'top-level-pagination';
this.config.pageSize = 5;
this.config.currentPage = 1;
this.sortConfig = new SortOptions();
this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
this.updatePage({
page: this.config.currentPage,

4
src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.spec.ts
View File

@@ -124,14 +124,14 @@ describe('SearchFacetFilterComponent', () => {
describe('when the getAddParams method is called wih a value', () => {
it('should return the selectedValue list with the new parameter value', () => {
const result = comp.getAddParams(value3);
expect(result).toEqual({ [mockFilterConfig.paramName]: [value1, value2, value3] });
expect(result[mockFilterConfig.paramName]).toEqual([value1, value2, value3]);
});
});
describe('when the getRemoveParams method is called wih a value', () => {
it('should return the selectedValue list with the parameter value left out', () => {
const result = comp.getRemoveParams(value1);
expect(result).toEqual({ [mockFilterConfig.paramName]: [value2] });
expect(result[mockFilterConfig.paramName]).toEqual([value2]);
});
});

10
src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
View File

@@ -100,11 +100,17 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
return hasValue(o);
}
getRemoveParams(value: string) {
return { [this.filterConfig.paramName]: this.selectedValues.filter((v) => v !== value) };
return {
[this.filterConfig.paramName]: this.selectedValues.filter((v) => v !== value),
page: 1
};
}
getAddParams(value: string) {
return { [this.filterConfig.paramName]: [...this.selectedValues, value] };
return {
[this.filterConfig.paramName]: [...this.selectedValues, value],
page: 1
};
}
ngOnDestroy(): void {

3
src/app/+search-page/search-filters/search-filter/search-filter.component.ts
View File

@@ -28,14 +28,13 @@ export class SearchFilterComponent implements OnInit {
}
ngOnInit() {
const sub = this.filterService.isFilterActive(this.filter.paramName).first().subscribe((isActive) => {
this.filterService.isFilterActive(this.filter.paramName).first().subscribe((isActive) => {
if (this.filter.isOpenByDefault || isActive) {
this.initialExpand();
} else {
this.initialCollapse();
}
});
sub.unsubscribe();
}
toggle() {

25
src/app/+search-page/search-filters/search-filter/search-filter.service.ts
View File

@@ -1,4 +1,5 @@
import { Injectable } from '@angular/core';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { SearchFiltersState, SearchFilterState } from './search-filter.reducer';
import { createSelector, MemoizedSelector, Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
@@ -10,7 +11,7 @@ import {
SearchFilterInitialExpandAction, SearchFilterResetPageAction,
SearchFilterToggleAction
} from './search-filter.actions';
import { hasValue, } from '../../../shared/empty.util';
import { hasValue, isEmpty, isNotEmpty, } from '../../../shared/empty.util';
import { SearchFilterConfig } from '../../search-service/search-filter-config.model';
import { SearchService } from '../../search-service/search.service';
import { RouteService } from '../../../shared/route.service';
@@ -56,10 +57,15 @@ export class SearchFilterService {
});
}
getCurrentSort(): Observable<SortOptions> {
getCurrentSort(defaultSort: SortOptions): Observable<SortOptions> {
const sortDirection$ = this.routeService.getQueryParameterValue('sortDirection');
const sortField$ = this.routeService.getQueryParameterValue('sortField');
return Observable.combineLatest(sortDirection$, sortField$, (sortDirection, sortField) => new SortOptions(sortField || undefined, SortDirection[sortDirection]));
return Observable.combineLatest(sortDirection$, sortField$, (sortDirection, sortField) => {
const field = sortField || defaultSort.field;
const direction = SortDirection[sortDirection] || defaultSort.direction;
return new SortOptions(field, direction)
}
);
}
getCurrentFilters() {
@@ -73,12 +79,13 @@ export class SearchFilterService {
getPaginatedSearchOptions(defaults: any = {}): Observable<PaginatedSearchOptions> {
return Observable.combineLatest(
this.getCurrentPagination(defaults.pagination),
this.getCurrentSort(),
this.getCurrentSort(defaults.sort),
this.getCurrentView(),
this.getCurrentScope(),
this.getCurrentQuery(),
this.getCurrentFilters(),
(pagination, sort, view, scope, query, filters) => {
this.getCurrentFilters()).pipe(
distinctUntilChanged((a, b) => JSON.stringify(a) === JSON.stringify(b)),
map(([pagination, sort, view, scope, query, filters]) => {
return Object.assign(new PaginatedSearchOptions(),
defaults,
{
@@ -89,11 +96,11 @@ export class SearchFilterService {
query: query,
filters: filters
})
}
})
)
}
getSearchOptions(defaults: any = {}): Observable<SearchOptions> {
getSearchOptions(defaults: any = {}): Observable<SearchOptions> {
return Observable.combineLatest(
this.getCurrentView(),
this.getCurrentScope(),
@@ -104,7 +111,7 @@ export class SearchFilterService {
defaults,
{
view: view,
scope: scope,
scope: scope || defaults.scope,
query: query,
filters: filters
})

1
src/app/+search-page/search-options.model.ts
View File

@@ -1,5 +1,6 @@
import { isNotEmpty } from '../shared/empty.util';
import { URLCombiner } from '../core/url-combiner/url-combiner';
import 'core-js/fn/object/entries';
export enum ViewMode {
List = 'list',

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

@@ -7,7 +7,7 @@
<ds-search-form id="search-form"
[query]="(searchOptions$ | async)?.query"
[scope]="(searchOptions$ | async)?.scope"
[currentParams]="currentParams"
[currentUrl]="getSearchLink()"
[scopes]="(scopeListRD$ | async)?.payload?.page">
</ds-search-form>
<div class="row">

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

@@ -8,10 +8,8 @@ import { cold, hot } from 'jasmine-marbles';
import { Observable } from 'rxjs/Observable';
import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
import { CommunityDataService } from '../core/data/community-data.service';
import { Community } from '../core/shared/community.model';
import { HostWindowService } from '../shared/host-window.service';
import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
import { PaginatedSearchOptions } from './paginated-search-options.model';
import { SearchPageComponent } from './search-page.component';
import { SearchService } from './search-service/search.service';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -35,10 +33,11 @@ describe('SearchPageComponent', () => {
pagination.id = 'search-results-pagination';
pagination.currentPage = 1;
pagination.pageSize = 10;
const sort: SortOptions = new SortOptions();
const sort: SortOptions = new SortOptions('score', SortDirection.DESC);
const mockResults = Observable.of(['test', 'data']);
const searchServiceStub = jasmine.createSpyObj('SearchService', {
search: mockResults
search: mockResults,
getSearchLink: '/search'
});
const queryParam = 'test query';
const scopeParam = '7669c72a-3f2a-451f-a3b9-9210e7a4c02f';

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

@@ -1,7 +1,7 @@
import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { flatMap, } from 'rxjs/operators';
import { SortOptions } from '../core/cache/models/sort-options.model';
import { SortDirection, SortOptions } from '../core/cache/models/sort-options.model';
import { CommunityDataService } from '../core/data/community-data.service';
import { PaginatedList } from '../core/data/paginated-list';
import { RemoteData } from '../core/data/remote-data';
@@ -31,7 +31,6 @@ import { SearchSidebarService } from './search-sidebar/search-sidebar.service';
export class SearchPageComponent implements OnInit {
resultsRD$: Observable<RemoteData<PaginatedList<SearchResult<DSpaceObject>>>>;
currentParams = {};
searchOptions$: Observable<PaginatedSearchOptions>;
sortConfig: SortOptions;
scopeListRD$: Observable<RemoteData<PaginatedList<Community>>>;
@@ -43,6 +42,7 @@ export class SearchPageComponent implements OnInit {
id: 'search-results-pagination',
pageSize: 10
},
sort: new SortOptions('score', SortDirection.DESC),
query: '',
scope: ''
};
@@ -78,4 +78,8 @@ export class SearchPageComponent implements OnInit {
public isSidebarCollapsed(): Observable<boolean> {
return this.sidebarService.isCollapsed;
}
public getSearchLink(): string {
return this.service.getSearchLink();
}
}

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

@@ -1,5 +1,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { CoreModule } from '../core/core.module';
import { SharedModule } from '../shared/shared.module';
import { SearchPageRoutingModule } from './search-page-routing.module';
import { SearchPageComponent } from './search-page.component';
@@ -31,6 +32,7 @@ const effects = [
CommonModule,
SharedModule,
EffectsModule.forFeature(effects),
CoreModule.forRoot()
],
declarations: [
SearchPageComponent,

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

@@ -1,5 +1,5 @@
<h2>{{ 'search.results.head' | translate }}</h2>
<div *ngIf="searchResults?.hasSucceeded && !searchResults?.isLoading" @fadeIn>
<div *ngIf="searchResults?.hasSucceeded && !searchResults?.isLoading && searchResults?.payload?.page.length > 0" @fadeIn>
<ds-viewable-collection
[config]="searchConfig.pagination"
[sortConfig]="searchConfig.sort"

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

@@ -7,7 +7,7 @@ import { Observable } from 'rxjs/Observable';
import { flatMap, map, tap } from 'rxjs/operators';
import { ViewMode } from '../../+search-page/search-options.model';
import { RemoteDataBuildService } from '../../core/cache/builders/remote-data-build.service';
import { SortOptions } from '../../core/cache/models/sort-options.model';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import {
FacetConfigSuccessResponse,
FacetValueSuccessResponse,
@@ -61,7 +61,7 @@ export class SearchService implements OnDestroy {
pagination.id = 'search-results-pagination';
pagination.currentPage = 1;
pagination.pageSize = 10;
const sort: SortOptions = new SortOptions();
const sort: SortOptions = new SortOptions('score', SortDirection.DESC);
this.searchOptions = Object.assign(new SearchOptions(), { pagination: pagination, sort: sort });
}
@@ -167,7 +167,8 @@ export class SearchService implements OnDestroy {
// get search results from response cache
const facetConfigObs: Observable<SearchFilterConfig[]> = responseCacheObs.pipe(
map((entry: ResponseCacheEntry) => entry.response),
map((response: FacetConfigSuccessResponse) => response.results)
map((response: FacetConfigSuccessResponse) =>
response.results.map((result: any) => Object.assign(new SearchFilterConfig(), result)))
);
return this.rdb.toRemoteDataObservable(requestEntryObs, responseCacheObs, facetConfigObs);
@@ -235,7 +236,7 @@ export class SearchService implements OnDestroy {
this.router.navigate([this.getSearchLink()], navigationExtras);
}
getSearchLink() {
getSearchLink(): string {
const urlTree = this.router.parseUrl(this.router.url);
const g: UrlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
return '/' + g.toString();

2
src/app/+search-page/search-settings/search-settings.component.html
View File

@@ -5,7 +5,7 @@
<option *ngFor="let sortDirection of (sortDirections | dsKeys)"
[value]="sortDirection.value"
[selected]="sortDirection.value === direction? 'selected': null">
{{sortDirection.key}}
{{'sorting.' + sortDirection.key | translate}}
</option>
</select>
</div>

4
src/app/+search-page/search-settings/search-settings.component.spec.ts
View File

@@ -3,7 +3,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SearchSettingsComponent } from './search-settings.component';
import { Observable } from 'rxjs/Observable';
import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
import { SortOptions } from '../../core/cache/models/sort-options.model';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { TranslateModule } from '@ngx-translate/core';
import { RouterTestingModule } from '@angular/router/testing';
import { ActivatedRoute } from '@angular/router';
@@ -22,7 +22,7 @@ describe('SearchSettingsComponent', () => {
pagination.id = 'search-results-pagination';
pagination.currentPage = 1;
pagination.pageSize = 10;
const sort: SortOptions = new SortOptions();
const sort: SortOptions = new SortOptions('score', SortDirection.DESC);
const mockResults = [ 'test', 'data' ];
const searchServiceStub = {
searchOptions: { pagination: pagination, sort: sort },

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

@@ -22,8 +22,6 @@ export class SearchSettingsComponent implements OnInit {
*/
public pageSize;
@Input() public pageSizeOptions;
public listPageSizeOptions: number[] = [5, 10, 20, 40, 60, 80, 100];
public gridPageSizeOptions: number[] = [12, 24, 36, 48 , 50, 62, 74, 84];
private sub;
private scope: string;
@@ -51,9 +49,9 @@ export class SearchSettingsComponent implements OnInit {
this.pageSize = +params.pageSize || this.searchOptions.pagination.pageSize;
this.direction = params.sortDirection || this.searchOptions.sort.direction;
if (params.view === ViewMode.Grid) {
this.pageSizeOptions = this.gridPageSizeOptions;
this.pageSizeOptions = this.pageSizeOptions;
} else {
this.pageSizeOptions = this.listPageSizeOptions;
this.pageSizeOptions = this.pageSizeOptions;
}
});
}

2
src/app/core/browse/browse.service.ts
View File

@@ -36,7 +36,7 @@ export class BrowseService {
getBrowseURLFor(metadatumKey: string, linkPath: string): Observable<string> {
const searchKeyArray = BrowseService.toSearchKeyArray(metadatumKey);
return this.halService.getEndpoint(linkPath)
return this.halService.getEndpoint(this.linkPath)
.filter((href: string) => isNotEmpty(href))
.distinctUntilChanged()
.map((endpointURL: string) => new BrowseEndpointRequest(this.requestService.generateRequestId(), endpointURL))

6
src/app/core/cache/models/sort-options.model.ts vendored
View File

@@ -1,10 +1,10 @@
export enum SortDirection {
Ascending = 'ASC',
Descending = 'DESC'
ASC = 'ASC',
DESC = 'DESC'
}
export class SortOptions {
constructor(public field: string = 'dc.title', public direction: SortDirection = SortDirection.Ascending) {
constructor(public field: string, public direction: SortDirection) {
}
}

2
src/app/core/data/search-response-parsing.service.ts
View File

@@ -26,7 +26,7 @@ export class SearchResponseParsingService implements ResponseParsingService {
value: hhObject[key].join('...')
}))
} else {
return undefined;
return [];
}
});

75
src/app/shared/host-window.service.spec.ts
View File

@@ -1,9 +1,10 @@
import { Store } from '@ngrx/store';
import { cold, hot } from 'jasmine-marbles';
import { Observable } from 'rxjs/Observable';
import { AppState } from '../app.reducer';
import { HostWindowState } from './host-window.reducer';
import { HostWindowService } from './host-window.service';
import { GridBreakpoint, HostWindowService, WidthCategory } from './host-window.service';
describe('HostWindowService', () => {
let service: HostWindowService;
@@ -189,4 +190,76 @@ describe('HostWindowService', () => {
});
});
describe('widthCategory', () => {
beforeEach(() => {
service = new HostWindowService({} as Store<AppState>);
});
it('should call getWithObs to get the current width', () => {
spyOn(service as any, 'getWidthObs').and
.returnValue(hot('a-', { a: GridBreakpoint.SM_MIN - 1 }));
const result = service.widthCategory;
expect((service as any).getWidthObs).toHaveBeenCalled();
});
it('should return XS if width < SM_MIN', () => {
spyOn(service as any, 'getWidthObs').and
.returnValue(hot('a-', { a: GridBreakpoint.SM_MIN - 1 }));
const result = service.widthCategory;
const expected = cold('b-', { b: WidthCategory.XS });
expect(result).toBeObservable(expected);
});
it('should return SM if SM_MIN <= width < MD_MIN', () => {
spyOn(service as any, 'getWidthObs').and
.returnValue(hot('a-', {
a: GridBreakpoint.SM_MIN + Math.floor((GridBreakpoint.MD_MIN - GridBreakpoint.SM_MIN) / 2)
}));
const result = service.widthCategory;
const expected = cold('b-', { b: WidthCategory.SM });
expect(result).toBeObservable(expected);
});
it('should return MD if MD_MIN <= width < LG_MIN', () => {
spyOn(service as any, 'getWidthObs').and
.returnValue(hot('a-', {
a: GridBreakpoint.MD_MIN + Math.floor((GridBreakpoint.LG_MIN - GridBreakpoint.MD_MIN) / 2)
}));
const result = service.widthCategory;
const expected = cold('b-', { b: WidthCategory.MD });
expect(result).toBeObservable(expected);
});
it('should return LG if LG_MIN <= width < XL_MIN', () => {
spyOn(service as any, 'getWidthObs').and
.returnValue(hot('a-', {
a: GridBreakpoint.LG_MIN + Math.floor((GridBreakpoint.XL_MIN - GridBreakpoint.LG_MIN) / 2)
}));
const result = service.widthCategory;
const expected = cold('b-', { b: WidthCategory.LG });
expect(result).toBeObservable(expected);
});
it('should return XL if width >= XL_MIN', () => {
spyOn(service as any, 'getWidthObs').and
.returnValue(hot('a-', { a: GridBreakpoint.XL_MIN + 1 }));
const result = service.widthCategory;
const expected = cold('b-', { b: WidthCategory.XL });
expect(result).toBeObservable(expected);
});
});
});

72
src/app/shared/host-window.service.ts
View File

@@ -1,3 +1,4 @@
import { distinctUntilChanged, map } from 'rxjs/operators';
import { HostWindowState } from './host-window.reducer';
import { Injectable } from '@angular/core';
import { createSelector, Store } from '@ngrx/store';
@@ -8,11 +9,18 @@ import { AppState } from '../app.reducer';
// TODO: ideally we should get these from sass somehow
export enum GridBreakpoint {
XS = 0,
SM = 576,
MD = 768,
LG = 992,
XL = 1200
SM_MIN = 576,
MD_MIN = 768,
LG_MIN = 992,
XL_MIN = 1200
}
export enum WidthCategory {
XS,
SM,
MD,
LG,
XL
}
const hostWindowStateSelector = (state: AppState) => state.hostWindow;
@@ -31,33 +39,57 @@ export class HostWindowService {
.filter((width) => hasValue(width));
}
get widthCategory(): Observable<WidthCategory> {
return this.getWidthObs().pipe(
map((width: number) => {
if (width < GridBreakpoint.SM_MIN) {
return WidthCategory.XS
} else if (width >= GridBreakpoint.SM_MIN && width < GridBreakpoint.MD_MIN) {
return WidthCategory.SM
} else if (width >= GridBreakpoint.MD_MIN && width < GridBreakpoint.LG_MIN) {
return WidthCategory.MD
} else if (width >= GridBreakpoint.LG_MIN && width < GridBreakpoint.XL_MIN) {
return WidthCategory.LG
} else {
return WidthCategory.XL
}
}),
distinctUntilChanged()
);
}
isXs(): Observable<boolean> {
return this.getWidthObs()
.map((width) => width < GridBreakpoint.SM)
.distinctUntilChanged();
return this.widthCategory.pipe(
map((widthCat: WidthCategory) => widthCat === WidthCategory.XS),
distinctUntilChanged()
);
}
isSm(): Observable<boolean> {
return this.getWidthObs()
.map((width) => width >= GridBreakpoint.SM && width < GridBreakpoint.MD)
.distinctUntilChanged();
return this.widthCategory.pipe(
map((widthCat: WidthCategory) => widthCat === WidthCategory.SM),
distinctUntilChanged()
);
}
isMd(): Observable<boolean> {
return this.getWidthObs()
.map((width) => width >= GridBreakpoint.MD && width < GridBreakpoint.LG)
.distinctUntilChanged();
return this.widthCategory.pipe(
map((widthCat: WidthCategory) => widthCat === WidthCategory.MD),
distinctUntilChanged()
);
}
isLg(): Observable<boolean> {
return this.getWidthObs()
.map((width) => width >= GridBreakpoint.LG && width < GridBreakpoint.XL)
.distinctUntilChanged();
return this.widthCategory.pipe(
map((widthCat: WidthCategory) => widthCat === WidthCategory.LG),
distinctUntilChanged()
);
}
isXl(): Observable<boolean> {
return this.getWidthObs()
.map((width) => width >= GridBreakpoint.XL)
.distinctUntilChanged();
return this.widthCategory.pipe(
map((widthCat: WidthCategory) => widthCat === WidthCategory.XL),
distinctUntilChanged()
);
}
}

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 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">
<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>

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

@@ -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;
}
@include media-breakpoint-only(sm) {
column-count: 2;
}
@include media-breakpoint-only(xs) {
column-count: 1;
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;
}
}

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

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

65
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 { 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<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,56 @@ 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;
}
}
}),
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);
}

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>

2
src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html
View File

@@ -1,5 +1,5 @@
<ds-truncatable [id]="dso.id">
<div class="card mt-1" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
<div class="card" [@focusShadow]="(isCollapsed() | async)?'blur':'focus'">
<a [routerLink]="['/items/' + dso.id]" class="card-img-top full-width">
<div>
<ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">

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

@@ -1,12 +1,12 @@
import { Component, Inject } from '@angular/core';
import { Observable } from 'rxjs/Observable';
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, isNotEmpty } from '../../empty.util';
import { hasNoValue, isEmpty } from '../../empty.util';
import { ListableObject } from '../../object-collection/shared/listable-object.model';
import { AbstractListableElementComponent } from '../../object-collection/shared/object-collection-element/abstract-listable-element.component';
import { Observable } from 'rxjs/Observable';
import { TruncatableService } from '../../truncatable/truncatable.service';
@Component({
@@ -24,15 +24,13 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
getValues(keys: string[]): string[] {
const results: string[] = new Array<string>();
if (isNotEmpty(this.object.hitHighlights)) {
this.object.hitHighlights.forEach(
(md: Metadatum) => {
if (keys.indexOf(md.key) > -1) {
results.push(md.value);
}
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) => {
@@ -45,16 +43,14 @@ export class SearchResultListElementComponent<T extends SearchResult<K>, K exten
getFirstValue(key: string): string {
let result: string;
if (isNotEmpty(this.object.hitHighlights)) {
this.object.hitHighlights.some(
(md: Metadatum) => {
if (key === md.key) {
result = md.value;
return true;
}
this.object.hitHighlights.some(
(md: Metadatum) => {
if (key === md.key) {
result = md.value;
return true;
}
);
}
}
);
if (hasNoValue(result)) {
result = this.dso.findMetadata(key);
}

2
src/app/shared/pagination/pagination.component.html
View File

@@ -12,7 +12,7 @@
<h6 class="dropdown-header">{{ 'pagination.results-per-page' | translate}}</h6>
<button class="dropdown-item" *ngFor="let item of pageSizeOptions" (click)="doPageSizeChange(item)"><i [ngClass]="{'invisible': item != pageSize}" class="fa fa-check" aria-hidden="true"></i> {{item}} </button>
<h6 class="dropdown-header">{{ 'pagination.sort-direction' | translate}}</h6>
<button class="dropdown-item" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortDirection}" class="fa fa-check" aria-hidden="true"></i> {{direction.key}} </button>
<button class="dropdown-item" *ngFor="let direction of (sortDirections | dsKeys)" (click)="doSortDirectionChange(direction.value)"><i [ngClass]="{'invisible': direction.value !== sortDirection}" class="fa fa-check" aria-hidden="true"></i> {{'sorting.' + direction.key | translate}} </button>
</div>
</div>
</div>

4
src/app/shared/pagination/pagination.component.spec.ts
View File

@@ -41,7 +41,7 @@ import { MockRouter } from '../mocks/mock-router';
import { HostWindowService } from '../host-window.service';
import { EnumKeysPipe } from '../utils/enum-keys-pipe';
import { SortOptions } from '../../core/cache/models/sort-options.model';
import { SortDirection, SortOptions } from '../../core/cache/models/sort-options.model';
import { GLOBAL_CONFIG, ENV_CONFIG } from '../../../config';
@@ -349,7 +349,7 @@ class TestComponent {
collection: string[] = [];
collectionSize: number;
paginationOptions = new PaginationComponentOptions();
sortOptions = new SortOptions();
sortOptions = new SortOptions('dc.title', SortDirection.ASC);
constructor() {
this.collection = Array.from(new Array(100), (x, i) => `item ${i + 1}`);

2
src/app/shared/pagination/pagination.component.ts
View File

@@ -144,7 +144,7 @@ export class PaginationComponent implements OnDestroy, OnInit {
/**
* Direction in which to sort: ascending or descending
*/
public sortDirection: SortDirection = SortDirection.Ascending;
public sortDirection: SortDirection = SortDirection.ASC;
/**
* Name of the field that's used to sort by

10
src/app/shared/route.service.ts
View File

@@ -13,19 +13,19 @@ export class RouteService {
}
getQueryParameterValues(paramName: string): Observable<string[]> {
return this.route.queryParamMap.map((map) => [...map.getAll(paramName)]);
return this.route.queryParamMap.map((map) => [...map.getAll(paramName)]).distinctUntilChanged();
}
getQueryParameterValue(paramName: string): Observable<string> {
return this.route.queryParamMap.map((map) => map.get(paramName));
return this.route.queryParamMap.map((map) => map.get(paramName)).distinctUntilChanged();
}
hasQueryParam(paramName: string): Observable<boolean> {
return this.route.queryParamMap.map((map) => map.has(paramName));
return this.route.queryParamMap.map((map) => map.has(paramName)).distinctUntilChanged();
}
hasQueryParamWithValue(paramName: string, paramValue: string): Observable<boolean> {
return this.route.queryParamMap.map((map) => map.getAll(paramName).indexOf(paramValue) > -1);
return this.route.queryParamMap.map((map) => map.getAll(paramName).indexOf(paramValue) > -1).distinctUntilChanged();
}
getQueryParamsWithPrefix(prefix: string): Observable<Params> {
@@ -38,6 +38,6 @@ export class RouteService {
params[key] = [...map.getAll(key)];
});
return params;
});
}).distinctUntilChanged();
}
}

1
src/app/shared/search-form/search-form.component.spec.ts
View File

@@ -2,7 +2,6 @@ import { ComponentFixture, TestBed, async, tick, fakeAsync } from '@angular/core
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { SearchFormComponent } from './search-form.component';
import { Observable } from 'rxjs/Observable';
import { FormsModule } from '@angular/forms';
import { ResourceType } from '../../core/shared/resource-type';
import { RouterTestingModule } from '@angular/router/testing';

25
src/app/shared/search-form/search-form.component.ts
View File

@@ -1,7 +1,8 @@
import { Component, Input } from '@angular/core';
import { SearchService } from '../../+search-page/search-service/search.service';
import { DSpaceObject } from '../../core/shared/dspace-object.model';
import { Router } from '@angular/router';
import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
import { isNotEmpty, hasValue, isEmpty, hasNoValue } from '../empty.util';
/**
* This component renders a simple item page.
@@ -17,8 +18,7 @@ import { isNotEmpty, hasValue, isEmpty } from '../empty.util';
export class SearchFormComponent {
@Input() query: string;
selectedId = '';
// Optional existing search parameters
@Input() currentParams: {};
@Input() currentUrl: string;
@Input() scopes: DSpaceObject[];
@Input()
@@ -34,16 +34,15 @@ export class SearchFormComponent {
}
updateSearch(data: any) {
this.router.navigate(['/search'], {
queryParams: Object.assign({}, this.currentParams,
{
query: data.query,
scope: data.scope || undefined,
page: data.page || 1
}
)
})
;
const newUrl = hasValue(this.currentUrl) ? this.currentUrl : 'search';
this.router.navigate([newUrl], {
queryParams: {
query: data.query,
scope: data.scope || undefined,
page: data.page || 1
},
queryParamsHandling: 'merge'
});
}
isNotEmpty(object: any) {

3
tsconfig.json
View File

@@ -26,7 +26,8 @@
"es6",
"es2015",
"es2016",
"es2017"
"es2017",
"es2017.object"
]
},
"exclude": [

3
webpack/webpack.common.js
View File

@@ -13,6 +13,9 @@ module.exports = {
output: {
path: root('dist')
},
watchOptions: {
aggregateTimeout: 50,
},
module: {
rules: [{
test: /\.ts$/,