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 'w2p-49440_Date-widget' into w2p-49440_date-widget-for-search-features

Browse Source 
Conflicts:
	package.json
	src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.ts
	src/app/+search-page/search-filters/search-filter/search-filter.component.html
	src/app/+search-page/search-page.component.ts
	src/app/+search-page/search-page.module.ts
	src/app/shared/shared.module.ts
This commit is contained in:
lotte
2018-07-17 10:09:07 +02:00
parent 4d538cab5f fd916501de
commit 2e04b542b8
32 changed files with 655 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@@ -87,6 +87,7 @@
"@ngx-translate/core": "9.1.1",
"@ngx-translate/http-loader": "2.0.1",
"angular-idle-preload": "2.0.4",
"angular2-moment": "^1.9.0",
"angulartics2": "^5.2.0",
"body-parser": "1.18.2",
"bootstrap": "^4.0.0",
@@ -104,8 +105,11 @@
"jsonschema": "1.2.2",
"jwt-decode": "^2.2.0",
"methods": "1.1.2",
"moment": "^2.22.1",
"morgan": "1.9.0",
"ng2-nouislider": "^1.7.11",
"ngx-pagination": "3.0.3",
"nouislider": "^11.0.0",
"pem": "1.12.3",
"reflect-metadata": "0.1.12",
"rxjs": "5.5.6",

7
resources/i18n/en.json
View File

@@ -125,7 +125,12 @@
"head": "Subject"
},
"dateIssued": {
"placeholder": "Date",
"max": {
"placeholder": "Minimum Date"
},
"min": {
"placeholder": "Maximum Date"
},
"head": "Date"
},
"has_content_in_original_bundle": {

0
src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.html → src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
View File

0
src/app/+search-page/search-filters/search-filter/search-facet-filter/search-facet-filter.component.scss → src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.scss
View File

22
src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.ts Normal file
View File

@@ -0,0 +1,22 @@
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { FilterType } from '../../../search-service/filter-type.model';
import { renderFacetFor } from '../search-filter-type-decorator';
import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
/**
* This component renders a simple item page.
* The route parameter 'id' is used to request the item it represents.
* All fields of the item that should be displayed, are defined in its template.
*/
@Component({
selector: 'ds-search-boolean-filter',
styleUrls: ['./search-boolean-filter.component.scss'],
templateUrl: './search-boolean-filter.component.html',
})
@renderFacetFor(FilterType.boolean)
export class SearchBooleanFilterComponent extends SearchFacetFilterComponent implements OnInit {
currentPage: Observable<number>;
}

1
src/app/+search-page/search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component.html Normal file
View File

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

36
src/app/+search-page/search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component.ts Normal file
View File

@@ -0,0 +1,36 @@
import { Component, Injector, Input, OnInit } from '@angular/core';
import { renderFilterType } from '../search-filter-type-decorator';
import { FilterType } from '../../../search-service/filter-type.model';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { FILTER_CONFIG, SELECTED_VALUES } from '../search-filter.service';
import { Observable } from 'rxjs/Observable';
@Component({
selector: 'ds-search-facet-filter-wrapper',
templateUrl: './search-facet-filter-wrapper.component.html'
})
export class SearchFacetFilterWrapperComponent implements OnInit {
@Input() filterConfig: SearchFilterConfig;
@Input() selectedValues: Observable<string[]>;
objectInjector: Injector;
constructor(private injector: Injector) {
}
ngOnInit(): void {
this.selectedValues.subscribe((values) => {
this.objectInjector = Injector.create({
providers: [
{ provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
{ provide: SELECTED_VALUES, useFactory: () => (values), deps: [] }],
parent: this.injector
});
});
}
getSearchFilter(): string {
const type: FilterType = this.filterConfig.type;
return renderFilterType(type);
}
}

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

@@ -2,8 +2,7 @@ import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { SearchFacetFilterComponent } from './search-facet-filter.component';
import { SearchFilterService } from '../search-filter.service';
import { FILTER_CONFIG, SearchFilterService, SELECTED_VALUES } from '../search-filter.service';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { FilterType } from '../../../search-service/filter-type.model';
import { FacetValue } from '../../../search-service/facet-value.model';
@@ -18,6 +17,7 @@ import { RouterStub } from '../../../../shared/testing/router-stub';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { PageInfo } from '../../../../core/shared/page-info.model';
import { SearchFacetFilterComponent } from './search-facet-filter.component';
describe('SearchFacetFilterComponent', () => {
let comp: SearchFacetFilterComponent;
@@ -64,6 +64,8 @@ describe('SearchFacetFilterComponent', () => {
providers: [
{ provide: SearchService, useValue: new SearchServiceStub(searchLink) },
{ provide: Router, useValue: new RouterStub() },
{ provide: FILTER_CONFIG, useValue: new SearchFilterConfig()},
{ provide: SELECTED_VALUES, useValue: {} },
{
provide: SearchFilterService, useValue: {
isFilterActiveWithValue: (paramName: string, filterValue: string) => true,

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

@@ -1,7 +1,7 @@
import {
Component,
ElementRef,
Input,
Inject,
OnDestroy,
OnInit, QueryList,
ViewChild,
@@ -11,7 +11,7 @@ import { FacetValue } from '../../../search-service/facet-value.model';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { Router } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { SearchFilterService } from '../search-filter.service';
import { FILTER_CONFIG, SearchFilterService, SELECTED_VALUES } from '../search-filter.service';
import { hasNoValue, hasValue, isNotEmpty } from '../../../../shared/empty.util';
import { RemoteData } from '../../../../core/data/remote-data';
import { PaginatedList } from '../../../../core/data/paginated-list';
@@ -29,13 +29,10 @@ import { EmphasizePipe } from '../../../../shared/utils/emphasize.pipe';
@Component({
selector: 'ds-search-facet-filter',
styleUrls: ['./search-facet-filter.component.scss'],
templateUrl: './search-facet-filter.component.html'
template: ``,
})
export class SearchFacetFilterComponent implements OnInit, OnDestroy {
@Input() filterConfig: SearchFilterConfig;
@Input() selectedValues: string[];
filterValues: Array<Observable<RemoteData<PaginatedList<FacetValue>>>> = [];
filterValues$: BehaviorSubject<any> = new BehaviorSubject(this.filterValues);
currentPage: Observable<number>;
@@ -45,7 +42,11 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
sub: Subscription;
filterSearchResults: Observable<any[]> = Observable.of([]);
constructor(private searchService: SearchService, private filterService: SearchFilterService, private router: Router) {
constructor(protected searchService: SearchService,
protected filterService: SearchFilterService,
protected router: Router,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(SELECTED_VALUES) public selectedValues: string[]) {
}
ngOnInit(): void {

17
src/app/+search-page/search-filters/search-filter/search-filter-type-decorator.ts Normal file
View File

@@ -0,0 +1,17 @@
import { FilterType } from '../../search-service/filter-type.model';
const filterTypeMap = new Map();
export function renderFacetFor(type: FilterType) {
return function decorator(objectElement: any) {
if (!objectElement) {
return;
}
filterTypeMap.set(type, objectElement);
};
}
export function renderFilterType(type: FilterType) {
return filterTypeMap.get(type);
}

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

@@ -1,7 +1,7 @@
<div>
<div (click)="toggle()" class="filter-name"><h5 class="d-inline-block mb-0">{{'search.filters.filter.' + filter.name + '.head'| translate}}</h5> <span class="filter-toggle fa float-right"
[ngClass]="(isCollapsed() | async) ? 'fa-plus' : 'fa-minus'"></span></div>
<div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'" (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{closed: collapsed}">
<ds-search-facet-filter [filterConfig]="filter" [selectedValues]="getSelectedValues() | async"></ds-search-facet-filter>
<div [@slide]="(isCollapsed() | async) ? 'collapsed' : 'expanded'" (@slide.start)="startSlide($event)" (@slide.done)="finishSlide($event)" class="search-filter-wrapper" [ngClass]="{'closed' : collapsed}">
<ds-search-facet-filter-wrapper [filterConfig]="filter" [selectedValues]="getSelectedValues() | async"></ds-search-facet-filter-wrapper>
</div>
</div>

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

@@ -1,4 +1,4 @@
import { Injectable } from '@angular/core';
import { Injectable, InjectionToken } from '@angular/core';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { SearchFiltersState, SearchFilterState } from './search-filter.reducer';
import { createSelector, MemoizedSelector, Store } from '@ngrx/store';
@@ -23,6 +23,9 @@ import { PaginatedSearchOptions } from '../../paginated-search-options.model';
const filterStateSelector = (state: SearchFiltersState) => state.searchFilter;
export const FILTER_CONFIG: InjectionToken<SearchFilterConfig> = new InjectionToken<SearchFilterConfig>('filterConfig');
export const SELECTED_VALUES: InjectionToken<string[]> = new InjectionToken<string[]>('selectedValues');
@Injectable()
export class SearchFilterService {
@@ -68,10 +71,31 @@ export class SearchFilterService {
);
}
getCurrentFilters() {
return this.routeService.getQueryParamsWithPrefix('f.');
getCurrentFilters(): Observable<any> {
return this.routeService.getQueryParamsWithPrefix('f.').map((filterParams) => {
if (isNotEmpty(filterParams)) {
const params = {};
Object.keys(filterParams).forEach((key) => {
if (key.endsWith('.min') || key.endsWith('.max')) {
const realKey = key.slice(0, -4);
if (isEmpty(params[realKey])) {
const min = filterParams[realKey + '.min'][0] || '*';
const max = filterParams[realKey + '.max'][0] || '*';
params[realKey] = ['[' + min + ' TO ' + max + ']'];
}
} else {
params[key] = filterParams[key];
}
});
return params;
}
return filterParams;
});
}
getCurrentFrontendFilters(): Observable<any> {
return this.routeService.getQueryParamsWithPrefix('f.');
}
getCurrentView() {
return this.routeService.getQueryParameterValue('view');
}

38
src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html Normal file
View File

@@ -0,0 +1,38 @@
<div>
<div class="filters">
<a *ngFor="let value of selectedValues" class="d-block"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
<input type="checkbox" [checked]="true"/>
<span class="filter-value">{{value}}</span>
</a>
<ng-container *ngFor="let page of (filterValues$ | async)">
<ng-container *ngFor="let value of (page | async)?.payload.page; let i=index">
<a *ngIf="!selectedValues.includes(value.value)" class="d-block clearfix"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value)" queryParamsHandling="merge" >
<input type="checkbox" [checked]="false"/>
<span class="filter-value">{{value.value}}</span>
<span class="float-right filter-value-count">
<span class="badge badge-secondary badge-pill">{{value.count}}</span>
</span>
</a>
</ng-container>
</ng-container>
<div class="clearfix toggle-more-filters">
<a class="float-left" *ngIf="!(isLastPage$ | async)"
(click)="showMore()">{{"search.filters.filter.show-more"
| translate}}</a>
<a class="float-right" *ngIf="(currentPage | async) > 1"
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
| translate}}</a>
</div>
</div>
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter"
[action]="getCurrentUrl()">
<input type="text" [(ngModel)]="filter" [name]="filterConfig.paramName" class="form-control"
aria-label="New filter input"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate" [ngModelOptions]="{standalone: true}"/>
<input type="submit" class="d-none"/>
</form>
</div>

18
src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.scss Normal file
View File

@@ -0,0 +1,18 @@
@import '../../../../../styles/variables.scss';
@import '../../../../../styles/mixins.scss';
.filters {
margin-top: $spacer/2;
margin-bottom: $spacer/2;
a {
color: $body-color;
&:hover {
text-decoration: none;
}
}
.toggle-more-filters a {
color: $link-color;
text-decoration: underline;
cursor: pointer;
}
}

23
src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.ts Normal file
View File

@@ -0,0 +1,23 @@
import { Component, OnInit } from '@angular/core';
import { FacetValue } from '../../../search-service/facet-value.model';
import { Observable } from 'rxjs/Observable';
import { FilterType } from '../../../search-service/filter-type.model';
import { renderFacetFor } from '../search-filter-type-decorator';
import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
/**
* This component renders a simple item page.
* The route parameter 'id' is used to request the item it represents.
* All fields of the item that should be displayed, are defined in its template.
*/
@Component({
selector: 'ds-search-hierarchy-filter',
styleUrls: ['./search-hierarchy-filter.component.scss'],
templateUrl: './search-hierarchy-filter.component.html',
})
@renderFacetFor(FilterType.hierarchy)
export class SearchHierarchyFilterComponent extends SearchFacetFilterComponent implements OnInit {
currentPage: Observable<number>;
}

38
src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.html Normal file
View File

@@ -0,0 +1,38 @@
<div>
<div class="filters">
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter row"
[action]="getCurrentUrl()">
<div class="col-6">
<input type="text" [ngModel]="range[0]" [name]="filterConfig.paramName + '.min'"
class="form-control" (blur)="onSubmit(form.value)"
aria-label="Mininum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder'| translate"/>
</div>
<div class="col-6">
<input type="text" [ngModel]="range[1]" [name]="filterConfig.paramName + '.max'"
class="form-control" (blur)="onSubmit(form.value)"
aria-label="Maximum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder'| translate"/>
</div>
<input type="submit" class="d-none"/>
</form>
<ng-container *ngIf="shouldShowSlider()">
<nouislider [connect]="true" [min]="min" [max]="max" [step]="1"
[(ngModel)]="range" (mouseup)="onSubmit(form.value)" ngDefaultControl></nouislider>
</ng-container>
<ng-container *ngFor="let page of (filterValues$ | async)">
<ng-container *ngFor="let value of (page | async)?.payload.page">
<a *ngIf="!selectedValues.includes(value.value)" class="d-block clearfix"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value)" queryParamsHandling="merge">
<span class="filter-value">{{value.value}}</span>
<span class="float-right filter-value-count">
<span class="badge badge-secondary badge-pill">{{value.count}}</span>
</span>
</a>
</ng-container>
</ng-container>
</div>
</div>

41
src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.scss Normal file
View File

@@ -0,0 +1,41 @@
@import '../../../../../styles/variables.scss';
@import '../../../../../styles/mixins.scss';
.filters {
margin-top: $spacer/2;
margin-bottom: $spacer/2;
a {
color: $link-color;
&:hover {
text-decoration: underline;
color: $link-hover-color;
}
}
.toggle-more-filters a {
color: $link-color;
text-decoration: underline;
cursor: pointer;
}
}
$slider-handle-width: 18px;
::ng-deep
{
html:not([dir=rtl]) .noUi-horizontal .noUi-handle {
right: -$slider-handle-width/2;
}
.noUi-horizontal .noUi-handle {
width: $slider-handle-width;
&:before {
left: ($slider-handle-width - 2)/2 - 2;
}
&:after {
left: ($slider-handle-width - 2)/2 + 2;
}
&:focus {
outline: none;
}
}
}

139
src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.spec.ts Normal file
View File

@@ -0,0 +1,139 @@
import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { TranslateModule } from '@ngx-translate/core';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { FILTER_CONFIG, SearchFilterService, SELECTED_VALUES } from '../search-filter.service';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { FilterType } from '../../../search-service/filter-type.model';
import { FacetValue } from '../../../search-service/facet-value.model';
import { FormsModule } from '@angular/forms';
import { Observable } from 'rxjs/Observable';
import { SearchService } from '../../../search-service/search.service';
import { SearchServiceStub } from '../../../../shared/testing/search-service-stub';
import { RemoteData } from '../../../../core/data/remote-data';
import { PaginatedList } from '../../../../core/data/paginated-list';
import { RouterStub } from '../../../../shared/testing/router-stub';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { PageInfo } from '../../../../core/shared/page-info.model';
import { SearchRangeFilterComponent } from './search-range-filter.component';
import { MockActivatedRoute } from '../../../../shared/mocks/mock-active-router';
describe('SearchFacetFilterComponent', () => {
let comp: SearchRangeFilterComponent;
let fixture: ComponentFixture<SearchRangeFilterComponent>;
const minSuffix = '.min';
const maxSuffix = '.max';
const dateFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD'];
const filterName1 = 'test name';
const value1 = '2000 - 2012';
const value2 = '1992 - 2000';
const value3 = '1990 - 1992';
const mockFilterConfig: SearchFilterConfig = Object.assign(new SearchFilterConfig(), {
name: filterName1,
type: FilterType.range,
hasFacets: false,
isOpenByDefault: false,
pageSize: 2,
minValue: 200,
maxValue: 3000,
});
const values: FacetValue[] = [
{
value: value1,
count: 52,
search: ''
}, {
value: value2,
count: 20,
search: ''
}, {
value: value3,
count: 5,
search: ''
}
];
const searchLink = '/search';
const selectedValues = [value1];
let filterService;
let searchService;
let router;
const page = Observable.of(0);
const activatedRouteStub = new MockActivatedRoute();
const mockValues = Observable.of(new RemoteData(false, false, true, null, new PaginatedList(new PageInfo(), values)));
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [TranslateModule.forRoot(), NoopAnimationsModule, FormsModule],
declarations: [SearchRangeFilterComponent],
providers: [
{ provide: SearchService, useValue: new SearchServiceStub(searchLink) },
{ provide: Router, useValue: new RouterStub() },
{ provide: FILTER_CONFIG, useValue: mockFilterConfig},
{ provide: SELECTED_VALUES, useValue: selectedValues },
{ provide: ActivatedRoute, useValue: activatedRouteStub },
{
provide: SearchFilterService, useValue: {
isFilterActiveWithValue: (paramName: string, filterValue: string) => true,
getPage: (paramName: string) => page,
/* tslint:disable:no-empty */
incrementPage: (filterName: string) => {
},
resetPage: (filterName: string) => {
},
getSearchOptions: () => Observable.of({}),
/* tslint:enable:no-empty */
}
}
],
schemas: [NO_ERRORS_SCHEMA]
}).overrideComponent(SearchRangeFilterComponent, {
set: { changeDetection: ChangeDetectionStrategy.Default }
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(SearchRangeFilterComponent);
comp = fixture.componentInstance; // SearchPageComponent test instance
comp.filterValues = [mockValues];
comp.filterValues$ = new BehaviorSubject(comp.filterValues);
filterService = (comp as any).filterService;
searchService = (comp as any).searchService;
spyOn(searchService, 'getFacetValuesFor').and.returnValue(mockValues);
router = (comp as any).router;
fixture.detectChanges();
});
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[mockFilterConfig.paramName + minSuffix]).toEqual(['1990']);
expect(result[mockFilterConfig.paramName + maxSuffix]).toEqual(['1992']);
});
});
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[mockFilterConfig.paramName + minSuffix]).toBeNull();
expect(result[mockFilterConfig.paramName + maxSuffix]).toBeNull();
});
});
describe('when the onSubmit method is called with data', () => {
const searchUrl = '/search/path';
const data = { [mockFilterConfig.paramName + minSuffix]: '1900', [mockFilterConfig.paramName + maxSuffix]: '1950' };
beforeEach(() => {
spyOn(comp, 'getSearchLink').and.returnValue(searchUrl);
comp.onSubmit(data);
});
it('should call navigate on the router with the right searchlink and parameters', () => {
expect(router.navigate).toHaveBeenCalledWith([searchUrl], {
queryParams: { [mockFilterConfig.paramName + minSuffix]: ['1900'], [mockFilterConfig.paramName + maxSuffix]: ['1950']},
queryParamsHandling: 'merge'
});
});
});
});

95
src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts Normal file
View File

@@ -0,0 +1,95 @@
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
import { FilterType } from '../../../search-service/filter-type.model';
import { renderFacetFor } from '../search-filter-type-decorator';
import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
import { isNotEmpty } from '../../../../shared/empty.util';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { FILTER_CONFIG, SearchFilterService, SELECTED_VALUES } from '../search-filter.service';
import { SearchService } from '../../../search-service/search.service';
import { ActivatedRoute, Router } from '@angular/router';
import * as moment from 'moment';
/**
* This component renders a simple item page.
* The route parameter 'id' is used to request the item it represents.
* All fields of the item that should be displayed, are defined in its template.
*/
const minSuffix = '.min';
const maxSuffix = '.max';
const dateFormats = ['YYYY', 'YYYY-MM', 'YYYY-MM-DD'];
const rangeDelimiter = '-';
@Component({
selector: 'ds-search-range-filter',
styleUrls: ['./search-range-filter.component.scss'],
templateUrl: './search-range-filter.component.html',
})
@renderFacetFor(FilterType.range)
export class SearchRangeFilterComponent extends SearchFacetFilterComponent implements OnInit {
min = 1950;
max = 2018;
range;
constructor(protected searchService: SearchService,
protected filterService: SearchFilterService,
protected router: Router,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(SELECTED_VALUES) public selectedValues: string[],
@Inject(PLATFORM_ID) private platformId: any,
private route: ActivatedRoute) {
super(searchService, filterService, router, filterConfig, selectedValues);
}
ngOnInit(): void {
super.ngOnInit();
this.min = moment(this.filterConfig.minValue, dateFormats).year() || this.min;
this.max = moment(this.filterConfig.maxValue, dateFormats).year() || this.max;
const iniMin = this.route.snapshot.queryParams[this.filterConfig.paramName + minSuffix] || this.min;
const iniMax = this.route.snapshot.queryParams[this.filterConfig.paramName + maxSuffix] || this.max;
this.range = [iniMin, iniMax];
}
getAddParams(value: string) {
const parts = value.split(rangeDelimiter);
const min = parts.length > 1 ? parts[0].trim() : value;
const max = parts.length > 1 ? parts[1].trim() : value;
return {
[this.filterConfig.paramName + minSuffix]: [min],
[this.filterConfig.paramName + maxSuffix]: [max],
page: 1
};
}
getRemoveParams(value: string) {
return {
[this.filterConfig.paramName + minSuffix]: null,
[this.filterConfig.paramName + maxSuffix]: null,
page: 1
};
}
onSubmit(data: any) {
if (isNotEmpty(data)) {
this.router.navigate([this.getSearchLink()], {
queryParams:
{
[this.filterConfig.paramName + minSuffix]: [data[this.filterConfig.paramName + minSuffix]],
[this.filterConfig.paramName + maxSuffix]: [data[this.filterConfig.paramName + maxSuffix]]
},
queryParamsHandling: 'merge'
});
this.filter = '';
}
}
/**
* TODO when upgrading nouislider, verify that this check is still needed.
*/
shouldShowSlider(): boolean {
return isPlatformBrowser(this.platformId);
}
}

38
src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html Normal file
View File

@@ -0,0 +1,38 @@
<div>
<div class="filters">
<a *ngFor="let value of selectedValues" class="d-block"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
<input type="checkbox" [checked]="true"/>
<span class="filter-value">{{value}}</span>
</a>
<ng-container *ngFor="let page of (filterValues$ | async)">
<ng-container *ngFor="let value of (page | async)?.payload.page; let i=index">
<a *ngIf="!selectedValues.includes(value.value)" class="d-block clearfix"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value)" queryParamsHandling="merge" >
<input type="checkbox" [checked]="false"/>
<span class="filter-value">{{value.value}}</span>
<span class="float-right filter-value-count">
<span class="badge badge-secondary badge-pill">{{value.count}}</span>
</span>
</a>
</ng-container>
</ng-container>
<div class="clearfix toggle-more-filters">
<a class="float-left" *ngIf="!(isLastPage$ | async)"
(click)="showMore()">{{"search.filters.filter.show-more"
| translate}}</a>
<a class="float-right" *ngIf="(currentPage | async) > 1"
(click)="showFirstPageOnly()">{{"search.filters.filter.show-less"
| translate}}</a>
</div>
</div>
<form #form="ngForm" (ngSubmit)="onSubmit(form.value)" class="add-filter"
[action]="getCurrentUrl()">
<input type="text" [(ngModel)]="filter" [name]="filterConfig.paramName" class="form-control"
aria-label="New filter input"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.placeholder'| translate" [ngModelOptions]="{standalone: true}"/>
<input type="submit" class="d-none"/>
</form>
</div>

18
src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.scss Normal file
View File

@@ -0,0 +1,18 @@
@import '../../../../../styles/variables.scss';
@import '../../../../../styles/mixins.scss';
.filters {
margin-top: $spacer/2;
margin-bottom: $spacer/2;
a {
color: $body-color;
&:hover {
text-decoration: none;
}
}
.toggle-more-filters a {
color: $link-color;
text-decoration: underline;
cursor: pointer;
}
}

23
src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.ts Normal file
View File

@@ -0,0 +1,23 @@
import { Component, OnInit } from '@angular/core';
import { FacetValue } from '../../../search-service/facet-value.model';
import { Observable } from 'rxjs/Observable';
import { FilterType } from '../../../search-service/filter-type.model';
import { renderFacetFor } from '../search-filter-type-decorator';
import { SearchFacetFilterComponent } from '../search-facet-filter/search-facet-filter.component';
/**
* This component renders a simple item page.
* The route parameter 'id' is used to request the item it represents.
* All fields of the item that should be displayed, are defined in its template.
*/
@Component({
selector: 'ds-search-text-filter',
styleUrls: ['./search-text-filter.component.scss'],
templateUrl: './search-text-filter.component.html',
})
@renderFacetFor(FilterType.text)
export class SearchTextFilterComponent extends SearchFacetFilterComponent implements OnInit {
currentPage: Observable<number>;
}

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

@@ -24,7 +24,7 @@ describe('SearchFiltersComponent', () => {
/* tslint:enable:no-empty */
};
const searchFilterServiceStub = jasmine.createSpyObj('SearchFilterService', {
getCurrentFilters: Observable.of({})
getCurrentFrontendFilters: Observable.of({})
});
beforeEach(async(() => {

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

@@ -22,7 +22,7 @@ export class SearchFiltersComponent {
clearParams;
constructor(private searchService: SearchService, private filterService: SearchFilterService) {
this.filters = searchService.getConfig();
this.clearParams = filterService.getCurrentFilters().map((filters) => {Object.keys(filters).forEach((f) => filters[f] = null); return filters;});
this.clearParams = filterService.getCurrentFrontendFilters().map((filters) => {Object.keys(filters).forEach((f) => filters[f] = null); return filters;});
}
getSearchLink() {

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

@@ -22,6 +22,11 @@ import { SearchFilterComponent } from './search-filters/search-filter/search-fil
import { SearchFacetFilterComponent } from './search-filters/search-filter/search-facet-filter/search-facet-filter.component';
import { SearchFilterService } from './search-filters/search-filter/search-filter.service';
import { SearchLabelsComponent } from './search-labels/search-labels.component';
import { SearchRangeFilterComponent } from './search-filters/search-filter/search-range-filter/search-range-filter.component';
import { SearchTextFilterComponent } from './search-filters/search-filter/search-text-filter/search-text-filter.component';
import { SearchFacetFilterWrapperComponent } from './search-filters/search-filter/search-facet-filter-wrapper/search-facet-filter-wrapper.component';
import { SearchBooleanFilterComponent } from './search-filters/search-filter/search-boolean-filter/search-boolean-filter.component';
import { SearchHierarchyFilterComponent } from './search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component';
const effects = [
SearchSidebarEffects
@@ -50,7 +55,13 @@ const effects = [
SearchFiltersComponent,
SearchFilterComponent,
SearchFacetFilterComponent,
SearchLabelsComponent
SearchLabelsComponent,
SearchFacetFilterComponent,
SearchFacetFilterWrapperComponent,
SearchRangeFilterComponent,
SearchTextFilterComponent,
SearchHierarchyFilterComponent,
SearchBooleanFilterComponent,
],
providers: [
SearchService,
@@ -64,6 +75,11 @@ const effects = [
ItemSearchResultGridElementComponent,
CollectionSearchResultGridElementComponent,
CommunitySearchResultGridElementComponent,
SearchFacetFilterComponent,
SearchRangeFilterComponent,
SearchTextFilterComponent,
SearchHierarchyFilterComponent,
SearchBooleanFilterComponent,
]
})
export class SearchPageModule {

8
src/app/+search-page/search-service/filter-type.model.ts
View File

@@ -1,6 +1,6 @@
export enum FilterType {
text,
date,
hierarchical,
standard
text = 'text',
range = 'date',
hierarchy = 'hierarchical',
boolean = 'standard'
}

6
src/app/+search-page/search-service/search-filter-config.model.ts
View File

@@ -17,6 +17,12 @@
@autoserialize
isOpenByDefault: boolean;
@autoserialize
maxValue: string;
@autoserialize
minValue: string;
/**
* Name of this configuration that can be used in a url
* @returns Parameter name

1
src/app/app.component.scss
View File

@@ -1,5 +1,6 @@
@import '../styles/variables.scss';
@import '../../node_modules/bootstrap/scss/bootstrap.scss';
@import '../../node_modules/nouislider/distribute/nouislider.min.css';
@import "../../node_modules/font-awesome/scss/font-awesome.scss";
html {

8
src/app/core/metadata/metadata.service.ts
View File

@@ -26,7 +26,7 @@ import { Metadatum } from '../shared/metadatum.model';
import { GLOBAL_CONFIG, GlobalConfig } from '../../../config';
import { BitstreamFormat } from '../shared/bitstream-format.model';
import { hasValue } from '../../shared/empty.util';
import { hasValue, isNotEmpty } from '../../shared/empty.util';
@Injectable()
export class MetadataService {
@@ -269,11 +269,9 @@ export class MetadataService {
private setCitationPdfUrlTag(): void {
if (this.currentObject.value instanceof Item) {
const item = this.currentObject.value as Item;
// NOTE: Observable resolves many times with same data
// taking only two, fist one is empty array
item.getFiles().take(2).subscribe((bitstreams: Bitstream[]) => {
item.getFiles().filter((files) => isNotEmpty(files)).first().subscribe((bitstreams: Bitstream[]) => {
for (const bitstream of bitstreams) {
bitstream.format.take(1)
bitstream.format.first()
.map((rd: RemoteData<BitstreamFormat>) => rd.payload)
.filter((format: BitstreamFormat) => hasValue(format))
.subscribe((format: BitstreamFormat) => {

2
src/app/shared/mocks/mock-active-router.ts
View File

@@ -29,6 +29,6 @@ export class MockActivatedRoute {
// ActivatedRoute.snapshot.params
get snapshot() {
return { params: this.testParams };
return { params: this.testParams, queryParams: this.testParams };
}
}

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

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NouisliderModule } from 'ng2-nouislider';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { TranslateModule } from '@ngx-translate/core';
@@ -54,6 +54,7 @@ import { ClickOutsideDirective } from './utils/click-outside.directive';
import { EmphasizePipe } from './utils/emphasize.pipe';
import { InputSuggestionsComponent } from './input-suggestions/input-suggestions.component';
import { CapitalizePipe } from './utils/capitalize.pipe';
import { MomentModule } from 'angular2-moment';
const MODULES = [
// Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -63,7 +64,9 @@ const MODULES = [
NgxPaginationModule,
ReactiveFormsModule,
RouterModule,
TranslateModule
TranslateModule,
NouisliderModule,
MomentModule
];
const PIPES = [

18
yarn.lock
View File

@@ -425,6 +425,12 @@ angular-idle-preload@2.0.4:
version "2.0.4"
resolved "https://registry.yarnpkg.com/angular-idle-preload/-/angular-idle-preload-2.0.4.tgz#7b177c0f52918c090e5c345480b922297cd59a0d"
angular2-moment@^1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/angular2-moment/-/angular2-moment-1.9.0.tgz#d198a4d9bc825f61de19106ac7ea07a78569f5a1"
dependencies:
moment "^2.19.3"
angular2-template-loader@0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/angular2-template-loader/-/angular2-template-loader-0.6.2.tgz#c0d44e90fff0fac95e8b23f043acda7fd1c51d7c"
@@ -5503,6 +5509,10 @@ module-deps@^4.0.8:
through2 "^2.0.0"
xtend "^4.0.0"
moment@^2.19.3, moment@^2.22.1:
version "2.22.1"
resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.1.tgz#529a2e9bf973f259c9643d237fda84de3a26e8ad"
morgan@1.9.0:
version "1.9.0"
resolved "https://registry.yarnpkg.com/morgan/-/morgan-1.9.0.tgz#d01fa6c65859b76fcf31b3cb53a3821a311d8051"
@@ -5599,6 +5609,10 @@ netmask@~1.0.4:
version "1.0.6"
resolved "https://registry.yarnpkg.com/netmask/-/netmask-1.0.6.tgz#20297e89d86f6f6400f250d9f4f6b4c1945fcd35"
ng2-nouislider@^1.7.11:
version "1.7.11"
resolved "https://registry.yarnpkg.com/ng2-nouislider/-/ng2-nouislider-1.7.11.tgz#b8ba5e3d2ffc23e1e32dfe54dd1726e2b4be316b"
ngrx-store-freeze@^0.2.1:
version "0.2.1"
resolved "https://registry.yarnpkg.com/ngrx-store-freeze/-/ngrx-store-freeze-0.2.1.tgz#04fb29db33cafda0f2d6ea32adeaac4891b1b27b"
@@ -5818,6 +5832,10 @@ normalize-url@^1.4.0:
query-string "^4.1.0"
sort-keys "^1.0.0"
nouislider@^11.0.0:
version "11.1.0"
resolved "https://registry.yarnpkg.com/nouislider/-/nouislider-11.1.0.tgz#1768eb5b854917325d41b96f2dc4eb3757d73381"
npm-run-all@4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.2.tgz#90d62d078792d20669139e718621186656cea056"