diff --git a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
index 576ba1b05b..74abbd8e93 100644
--- a/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-boolean-filter/search-boolean-filter.component.html
@@ -6,8 +6,9 @@
{{value}}
-
-
+
+
>>> = [];
- filterValues$: BehaviorSubject = new BehaviorSubject(this.filterValues);
+ filterValues$: Subject>>>;
currentPage: Observable;
isLastPage$: BehaviorSubject = new BehaviorSubject(false);
filter: string;
pageChange = false;
- sub: Subscription;
+ private subs: Subscription[] = [];
filterSearchResults: Observable = Observable.of([]);
selectedValues: Observable;
+ private collapseNextUpdate = true;
+ animationState = 'loading';
constructor(protected searchService: SearchService,
protected filterService: SearchFilterService,
+ protected rdbs: RemoteDataBuildService,
protected router: Router,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig) {
}
ngOnInit(): void {
+ this.filterValues$ = new BehaviorSubject(new RemoteData(true, false, undefined, undefined, undefined));
this.currentPage = this.getCurrentPage().distinctUntilChanged();
this.selectedValues = this.filterService.getSelectedValuesForFilter(this.filterConfig);
const searchOptions = this.filterService.getSearchOptions().distinctUntilChanged();
- searchOptions.subscribe((options) => this.updateFilterValueList(options));
+ this.subs.push(searchOptions.subscribe((options) => this.updateFilterValueList(options)));
+
const facetValues = Observable.combineLatest(searchOptions, this.currentPage, (options, page) => {
return {values: this.searchService.getFacetValuesFor(this.filterConfig, page, options), page: page};
});
- facetValues.subscribe((facetOutcome) => {
+
+
+
+ this.subs.push(facetValues.subscribe((facetOutcome) => {
const newValues$ = facetOutcome.values;
- if (facetOutcome.page > 1) {
- this.filterValues = [...this.filterValues, newValues$];
- } else {
- this.filterValues = [newValues$]
+ if (this.collapseNextUpdate) {
+ this.showFirstPageOnly();
+ facetOutcome.page = 1;
+ this.collapseNextUpdate = false;
+ }
+ if (facetOutcome.page === 1) {
+ this.filterValues = [];
}
- this.filterValues$.next(this.filterValues);
- newValues$.first().subscribe((rd) => {
+ this.filterValues = [...this.filterValues, newValues$];
+
+ this.subs.push(this.rdbs.aggregate(this.filterValues).subscribe((rd: RemoteData>>) => {
+ this.animationState = 'ready';
+ this.filterValues$.next(rd);
+ }));
+ this.subs.push(newValues$.first().subscribe((rd) => {
this.isLastPage$.next(hasNoValue(rd.payload.next))
- });
- });
+ }));
+ }));
+
}
updateFilterValueList(options: SearchOptions) {
- // this.unsubscribe();
- this.showFirstPageOnly();
+ // this.showFirstPageOnly();
+ this.animationState = 'loading';
+ this.collapseNextUpdate = true;
this.filter = '';
}
@@ -138,13 +159,9 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
}
ngOnDestroy(): void {
- this.unsubscribe();
- }
-
- unsubscribe(): void {
- if (hasValue(this.sub)) {
- this.sub.unsubscribe();
- }
+ this.subs
+ .filter((sub) => hasValue(sub))
+ .forEach((sub) => sub.unsubscribe());
}
findSuggestions(data): void {
@@ -171,3 +188,9 @@ export class SearchFacetFilterComponent implements OnInit, OnDestroy {
return new EmphasizePipe().transform(facet.value, query) + ' (' + facet.count + ')';
}
}
+
+export const facetLoad = trigger('facetLoad', [
+ state('ready', style({ opacity: 1 })),
+ state('loading', style({ opacity: 0 })),
+ transition('loading <=> ready', animate(100)),
+]);
diff --git a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
index fab11fa8e1..812f543716 100644
--- a/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-hierarchy-filter/search-hierarchy-filter.component.html
@@ -6,8 +6,9 @@
{{value}}
-
-
+
+
diff --git a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
index 04cc12bd29..e04628fc38 100644
--- a/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
+++ b/src/app/+search-page/search-filters/search-filter/search-range-filter/search-range-filter.component.ts
@@ -1,8 +1,12 @@
import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, OnInit, PLATFORM_ID } from '@angular/core';
+import { RemoteDataBuildService } from '../../../../core/cache/builders/remote-data-build.service';
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 {
+ facetLoad,
+ SearchFacetFilterComponent
+} from '../search-facet-filter/search-facet-filter.component';
import { SearchFilterConfig } from '../../../search-service/search-filter-config.model';
import { FILTER_CONFIG, SearchFilterService } from '../search-filter.service';
import { SearchService } from '../../../search-service/search.service';
@@ -24,6 +28,7 @@ const rangeDelimiter = '-';
selector: 'ds-search-range-filter',
styleUrls: ['./search-range-filter.component.scss'],
templateUrl: './search-range-filter.component.html',
+ animations: [facetLoad]
})
@renderFacetFor(FilterType.range)
@@ -35,10 +40,11 @@ export class SearchRangeFilterComponent extends SearchFacetFilterComponent imple
constructor(protected searchService: SearchService,
protected filterService: SearchFilterService,
protected router: Router,
+ protected rdbs: RemoteDataBuildService,
@Inject(FILTER_CONFIG) public filterConfig: SearchFilterConfig,
@Inject(PLATFORM_ID) private platformId: any,
private route: ActivatedRoute) {
- super(searchService, filterService, router, filterConfig);
+ super(searchService, filterService, rdbs, router, filterConfig);
}
ngOnInit(): void {
diff --git a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
index fab11fa8e1..fcc2393b93 100644
--- a/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
+++ b/src/app/+search-page/search-filters/search-filter/search-text-filter/search-text-filter.component.html
@@ -6,18 +6,22 @@
{{value}}
-
-
+
+