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

clean up of selected values

Browse Source
This commit is contained in:
lotte
2018-07-20 14:32:07 +02:00
parent dedf62dfa6
commit 6e28bcd0bc
9 changed files with 102 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,16 @@
<div>
<div class="filters py-2">
<a *ngFor="let value of selectedValues" class="d-flex flex-row"
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
<span class="filter-value pl-1">{{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-flex flex-row"
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value)" queryParamsHandling="merge">
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">

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

@@ -2,7 +2,7 @@ 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 { FILTER_CONFIG } from '../search-filter.service';
import { Observable } from 'rxjs/Observable';
@Component({
@@ -18,15 +18,12 @@ export class SearchFacetFilterWrapperComponent implements OnInit {
}
ngOnInit(): void {
this.selectedValues.subscribe((values) => {
this.objectInjector = Injector.create({
providers: [
{ provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] },
{ provide: SELECTED_VALUES, useFactory: () => (values), deps: [] }],
{ provide: FILTER_CONFIG, useFactory: () => (this.filterConfig), deps: [] }
],
parent: this.injector
});
});
}
getSearchFilter(): string {

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

@@ -1,17 +1,9 @@
import {
Component,
ElementRef,
Inject,
OnDestroy,
OnInit, QueryList,
ViewChild,
ViewChildren
} from '@angular/core';
import { Component, Inject, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
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 { FILTER_CONFIG, SearchFilterService, SELECTED_VALUES } from '../search-filter.service';
import { FILTER_CONFIG, SearchFilterService } 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';
@@ -20,6 +12,7 @@ import { SearchOptions } from '../../../search-options.model';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Subscription } from 'rxjs/Subscription';
import { EmphasizePipe } from '../../../../shared/utils/emphasize.pipe';
import { tap } from 'rxjs/operators';
/**
* This component renders a simple item page.
@@ -32,7 +25,7 @@ import { EmphasizePipe } from '../../../../shared/utils/emphasize.pipe';
template: ``,
})
export class SearchFacetFilterComponent implements OnInit, OnDestroy {
export class SearchFacetFilterComponent implements OnInit, OnDestroy, OnChanges {
filterValues: Array<Observable<RemoteData<PaginatedList<FacetValue>>>> = [];
filterValues$: BehaviorSubject<any> = new BehaviorSubject(this.filterValues);
currentPage: Observable<number>;
@@ -41,27 +34,33 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
pageChange = false;
sub: Subscription;
filterSearchResults: Observable<any[]> = Observable.of([]);
selectedValues: Observable<string[]>;
constructor(protected searchService: SearchService,
protected filterService: SearchFilterService,
protected router: Router,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(SELECTED_VALUES) public selectedValues: string[]) {
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig) {
}
ngOnInit(): void {
this.currentPage = this.getCurrentPage();
this.selectedValues = this.filterService.getSelectedValuesForFilter(this.filterConfig);
this.filterService.getSearchOptions().distinctUntilChanged().subscribe((options) => this.updateFilterValueList(options));
}
updateFilterValueList(options: SearchOptions) {
this.unsubscribe();
this.showFirstPageOnly();
this.sub = this.currentPage.distinctUntilChanged().map((page) => {
return this.searchService.getFacetValuesFor(this.filterConfig, page, options);
let page;
this.sub = this.currentPage.distinctUntilChanged().map((p) => {
page = p;
return this.searchService.getFacetValuesFor(this.filterConfig, p, options).pipe(tap((rd) => {if (this.filterConfig.paramName === 'f.author') console.log(rd.isLoading, rd.hasSucceeded, rd.payload)}));
}).subscribe((newValues$) => {
if (page > 1) {
this.filterValues = [...this.filterValues, newValues$];
} else {
this.filterValues = [newValues$]
}
this.filterValues$.next(this.filterValues);
newValues$.first().subscribe((rd) => this.isLastPage$.next(hasNoValue(rd.payload.next)));
});
@@ -81,7 +80,7 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
}
showFirstPageOnly() {
this.filterValues = [];
// this.filterValues = [];
this.filterService.resetPage(this.filterConfig.name);
}
@@ -94,16 +93,19 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
}
onSubmit(data: any) {
this.selectedValues.first().subscribe((selectedValues) => {
if (isNotEmpty(data)) {
this.router.navigate([this.getSearchLink()], {
queryParams:
{ [this.filterConfig.paramName]: [...this.selectedValues, data] },
{ [this.filterConfig.paramName]: [...selectedValues, data] },
queryParamsHandling: 'merge'
});
this.filter = '';
}
this.filterSearchResults = Observable.of([]);
}
)
}
onClick(data: any) {
this.filter = data;
@@ -113,18 +115,22 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
return hasValue(o);
}
getRemoveParams(value: string) {
getRemoveParams(value: string): Observable<any> {
return this.selectedValues.map((selectedValues) => {
return {
[this.filterConfig.paramName]: this.selectedValues.filter((v) => v !== value),
[this.filterConfig.paramName]: selectedValues.filter((v) => v !== value),
page: 1
};
});
}
getAddParams(value: string) {
getAddParams(value: string): Observable<any> {
return this.selectedValues.map((selectedValues) => {
return {
[this.filterConfig.paramName]: [...this.selectedValues, value],
[this.filterConfig.paramName]: [...selectedValues, value],
page: 1
};
});
}
ngOnDestroy(): void {
@@ -161,4 +167,8 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
return new EmphasizePipe().transform(facet.value, query) + ' (' + facet.count + ')';
}
ngOnChanges(changes: SimpleChanges): void {
console.log(changes);
}
}

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

@@ -2,6 +2,6 @@
<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-wrapper [filterConfig]="filter" [selectedValues]="getSelectedValues()"></ds-search-facet-filter-wrapper>
<ds-search-facet-filter-wrapper [filterConfig]="filter"></ds-search-facet-filter-wrapper>
</div>
</div>

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

@@ -1,21 +1,21 @@
import { Injectable, InjectionToken } from '@angular/core';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { distinctUntilChanged, map } from 'rxjs/operators';
import { SearchFiltersState, SearchFilterState } from './search-filter.reducer';
import { createSelector, MemoizedSelector, Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import {
SearchFilterCollapseAction,
SearchFilterDecrementPageAction, SearchFilterExpandAction,
SearchFilterDecrementPageAction,
SearchFilterExpandAction,
SearchFilterIncrementPageAction,
SearchFilterInitialCollapseAction,
SearchFilterInitialExpandAction, SearchFilterResetPageAction,
SearchFilterInitialExpandAction,
SearchFilterResetPageAction,
SearchFilterToggleAction
} from './search-filter.actions';
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/services/route.service';
import ObjectExpression from 'rollup/dist/typings/ast/nodes/ObjectExpression';
import { SortDirection, SortOptions } from '../../../core/cache/models/sort-options.model';
import { PaginationComponentOptions } from '../../../shared/pagination/pagination-component-options.model';
import { SearchOptions } from '../../search-options.model';
@@ -25,7 +25,6 @@ import { ActivatedRoute, Params } from '@angular/router';
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 {

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

@@ -1,16 +1,16 @@
<div>
<div class="filters py-2">
<a *ngFor="let value of selectedValues" class="d-flex flex-row"
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
<span class="filter-value pl-1">{{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-flex flex-row"
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value)" queryParamsHandling="merge" >
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">

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

@@ -25,9 +25,9 @@
</ng-container>
<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-flex flex-row"
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value)" queryParamsHandling="merge">
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge">
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">
<span class="badge badge-secondary badge-pill">{{value.count}}</span>

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

@@ -1,14 +1,14 @@
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnChanges, OnInit, PLATFORM_ID } from '@angular/core';
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 { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
import { SearchService } from '../../../search-service/search.service';
import { ActivatedRoute, Router } from '@angular/router';
import * as moment from 'moment';
import { Observable } from 'rxjs/Observable';
/**
* This component renders a simple item page.
@@ -31,14 +31,14 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
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);
super(searchService, filterService, router, filterConfig);
}
ngOnInit(): void {
@@ -51,39 +51,28 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
}
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 {
return Observable.of(
{
[this.filterConfig.paramName + minSuffix]: [min],
[this.filterConfig.paramName + maxSuffix]: [max],
page: 1
};
});
}
getRemoveParams(value: string) {
return {
return Observable.of(
{
[this.filterConfig.paramName + minSuffix]: null,
[this.filterConfig.paramName + maxSuffix]: null,
page: 1
};
}
);
}
getRemoveMaxParam() {
return {
[this.filterConfig.paramName + maxSuffix]: null,
page: 1
};
}
getRemoveMinParam() {
return {
[this.filterConfig.paramName + minSuffix]: null,
page: 1
};
}
onSubmit() {
const newMin = this.range[0] !== this.min ? [this.range[0]] : null;

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

@@ -1,16 +1,16 @@
<div>
<div class="filters py-2">
<a *ngFor="let value of selectedValues" class="d-flex flex-row"
<a *ngFor="let value of (selectedValues | async)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getRemoveParams(value)" queryParamsHandling="merge">
[queryParams]="getRemoveParams(value) | async" queryParamsHandling="merge">
<input type="checkbox" [checked]="true" class="my-1 align-self-stretch"/>
<span class="filter-value pl-1">{{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-flex flex-row"
<a *ngIf="!(selectedValues | async).includes(value.value)" class="d-flex flex-row"
[routerLink]="[getSearchLink()]"
[queryParams]="getAddParams(value.value)" queryParamsHandling="merge" >
[queryParams]="getAddParams(value.value) | async" queryParamsHandling="merge" >
<input type="checkbox" [checked]="false" class="my-1 align-self-stretch"/>
<span class="filter-value px-1">{{value.value}}</span>
<span class="float-right filter-value-count ml-auto">