share only last emitted value, fix disabled filter
This commit is contained in:
parent
5a232048f2
commit
127c47576b
@ -19,7 +19,7 @@ export class FilterService {
|
|||||||
this.filterGroups$ = this._refresh$.pipe(
|
this.filterGroups$ = this._refresh$.pipe(
|
||||||
startWith(''),
|
startWith(''),
|
||||||
switchMap(() => this._filterGroups$.asObservable()),
|
switchMap(() => this._filterGroups$.asObservable()),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
|
|
||||||
this.showResetFilters$ = this._showResetFilters$;
|
this.showResetFilters$ = this._showResetFilters$;
|
||||||
@ -34,7 +34,7 @@ export class FilterService {
|
|||||||
map(toFlatFilters),
|
map(toFlatFilters),
|
||||||
map(f => !!f.find(el => el.checked)),
|
map(f => !!f.find(el => el.checked)),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -99,7 +99,7 @@ export class FilterService {
|
|||||||
getGroup$(slug: string): Observable<IFilterGroup | undefined> {
|
getGroup$(slug: string): Observable<IFilterGroup | undefined> {
|
||||||
return this.filterGroups$.pipe(
|
return this.filterGroups$.pipe(
|
||||||
get(group => group.slug === slug),
|
get(group => group.slug === slug),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +1,8 @@
|
|||||||
<ng-container *ngIf="primaryFilterGroup$ | async as primaryGroup">
|
<ng-container *ngIf="primaryFilterGroup$ | async as primaryGroup">
|
||||||
<ng-container *ngIf="primaryGroup.icon" [ngSwitch]="(primaryFilters$ | async)?.length > 0">
|
<ng-container *ngIf="primaryGroup.icon">
|
||||||
<iqser-icon-button
|
<iqser-icon-button
|
||||||
*ngSwitchCase="false"
|
|
||||||
[icon]="primaryGroup.icon"
|
|
||||||
[label]="primaryGroup.label || ('filter-menu.label' | translate)"
|
|
||||||
[disabled]="true"
|
|
||||||
></iqser-icon-button>
|
|
||||||
|
|
||||||
<iqser-icon-button
|
|
||||||
*ngSwitchCase="true"
|
|
||||||
[attr.aria-expanded]="expanded$ | async"
|
[attr.aria-expanded]="expanded$ | async"
|
||||||
|
[disabled]="primaryFiltersDisabled$ | async"
|
||||||
[icon]="primaryGroup.icon"
|
[icon]="primaryGroup.icon"
|
||||||
[label]="primaryGroup.label || ('filter-menu.label' | translate)"
|
[label]="primaryGroup.label || ('filter-menu.label' | translate)"
|
||||||
[matMenuTriggerFor]="filterMenu"
|
[matMenuTriggerFor]="filterMenu"
|
||||||
@ -17,18 +10,10 @@
|
|||||||
></iqser-icon-button>
|
></iqser-icon-button>
|
||||||
</ng-container>
|
</ng-container>
|
||||||
|
|
||||||
<ng-container *ngIf="!primaryGroup.icon" [ngSwitch]="(primaryFilters$ | async)?.length > 0">
|
<ng-container *ngIf="!primaryGroup.icon">
|
||||||
<iqser-chevron-button
|
<iqser-chevron-button
|
||||||
*ngSwitchCase="false"
|
|
||||||
[attr.aria-expanded]="expanded$ | async"
|
|
||||||
[label]="primaryGroup.label || ('filter-menu.label' | translate)"
|
|
||||||
[showDot]="hasActiveFilters$ | async"
|
|
||||||
[disabled]="true"
|
|
||||||
></iqser-chevron-button>
|
|
||||||
|
|
||||||
<iqser-chevron-button
|
|
||||||
*ngSwitchCase="true"
|
|
||||||
[attr.aria-expanded]="expanded$ | async"
|
[attr.aria-expanded]="expanded$ | async"
|
||||||
|
[disabled]="primaryFiltersDisabled$ | async"
|
||||||
[label]="primaryGroup.label || ('filter-menu.label' | translate)"
|
[label]="primaryGroup.label || ('filter-menu.label' | translate)"
|
||||||
[matMenuTriggerFor]="filterMenu"
|
[matMenuTriggerFor]="filterMenu"
|
||||||
[showDot]="hasActiveFilters$ | async"
|
[showDot]="hasActiveFilters$ | async"
|
||||||
|
|||||||
@ -14,7 +14,7 @@ const areExpandable = (nestedFilter: INestedFilter) => !!nestedFilter?.children?
|
|||||||
const atLeastOneIsExpandable = pipe(
|
const atLeastOneIsExpandable = pipe(
|
||||||
map<IFilterGroup | undefined, boolean>(group => !!group?.filters.some(areExpandable)),
|
map<IFilterGroup | undefined, boolean>(group => !!group?.filters.some(areExpandable)),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -47,6 +47,7 @@ export class PopupFilterComponent implements OnInit {
|
|||||||
primaryFilterGroup$!: Observable<IFilterGroup | undefined>;
|
primaryFilterGroup$!: Observable<IFilterGroup | undefined>;
|
||||||
secondaryFilterGroup$!: Observable<IFilterGroup | undefined>;
|
secondaryFilterGroup$!: Observable<IFilterGroup | undefined>;
|
||||||
primaryFilters$!: Observable<IFilter[] | undefined>;
|
primaryFilters$!: Observable<IFilter[] | undefined>;
|
||||||
|
primaryFiltersDisabled$!: Observable<boolean>;
|
||||||
|
|
||||||
constructor(readonly filterService: FilterService, readonly searchService: SearchService<Filter>) {}
|
constructor(readonly filterService: FilterService, readonly searchService: SearchService<Filter>) {}
|
||||||
|
|
||||||
@ -55,15 +56,33 @@ export class PopupFilterComponent implements OnInit {
|
|||||||
map(([primary, secondary]) => [...(primary?.filters || []), ...(secondary?.filters || [])]),
|
map(([primary, secondary]) => [...(primary?.filters || []), ...(secondary?.filters || [])]),
|
||||||
any(f => f.checked || !!f.indeterminate),
|
any(f => f.checked || !!f.indeterminate),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
|
shareReplay(1),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private get _primaryFilters$(): Observable<IFilter[]> {
|
||||||
|
return combineLatest([this.primaryFilterGroup$, this.searchService.valueChanges$]).pipe(
|
||||||
|
map(([group]) => this.searchService.searchIn(group?.filters ?? [])),
|
||||||
|
shareReplay(1),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
private get _primaryFiltersDisabled$(): Observable<boolean> {
|
||||||
|
return combineLatest([this.primaryFilterGroup$, this.primaryFilters$, this.searchService.valueChanges$]).pipe(
|
||||||
|
map(([group, filters, value]) => [!!group?.filterceptionPlaceholder, filters?.length === 0, value === '']),
|
||||||
|
map(([hasFilterSearch, noFilters, searchIsEmpty]) => noFilters && (!hasFilterSearch || (hasFilterSearch && searchIsEmpty))),
|
||||||
|
distinctUntilChanged(),
|
||||||
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
ngOnInit(): void {
|
||||||
this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug).pipe(shareReplay(2));
|
this.primaryFilterGroup$ = this.filterService.getGroup$(this.primaryFiltersSlug).pipe(shareReplay(1));
|
||||||
this.primaryFilters$ = this._primaryFilters$;
|
this.primaryFilters$ = this._primaryFilters$;
|
||||||
this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug).pipe(shareReplay(3));
|
this.secondaryFilterGroup$ = this.filterService.getGroup$(this.secondaryFiltersSlug).pipe(shareReplay(1));
|
||||||
|
|
||||||
this.hasActiveFilters$ = this._hasActiveFilters$;
|
this.hasActiveFilters$ = this._hasActiveFilters$;
|
||||||
|
this.primaryFiltersDisabled$ = this._primaryFiltersDisabled$;
|
||||||
this.atLeastOneFilterIsExpandable$ = atLeastOneIsExpandable(this.primaryFilterGroup$);
|
this.atLeastOneFilterIsExpandable$ = atLeastOneIsExpandable(this.primaryFilterGroup$);
|
||||||
this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$);
|
this.atLeastOneSecondaryFilterIsExpandable$ = atLeastOneIsExpandable(this.secondaryFilterGroup$);
|
||||||
}
|
}
|
||||||
@ -120,10 +139,4 @@ export class PopupFilterComponent implements OnInit {
|
|||||||
});
|
});
|
||||||
this.filterService.refresh();
|
this.filterService.refresh();
|
||||||
}
|
}
|
||||||
|
|
||||||
private get _primaryFilters$(): Observable<IFilter[]> {
|
|
||||||
return combineLatest([this.primaryFilterGroup$, this.searchService.valueChanges$]).pipe(
|
|
||||||
map(([group]) => this.searchService.searchIn(group?.filters ?? [])),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -48,13 +48,13 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
|
|||||||
private get _sortedDisplayedEntities$(): Observable<readonly T[]> {
|
private get _sortedDisplayedEntities$(): Observable<readonly T[]> {
|
||||||
const sort = (entities: T[]) => this.sortingService.defaultSort(entities);
|
const sort = (entities: T[]) => this.sortingService.defaultSort(entities);
|
||||||
const sortedEntities = () => this.listingService.displayed$.pipe(map(sort));
|
const sortedEntities = () => this.listingService.displayed$.pipe(map(sort));
|
||||||
return this.sortingService.sortingOption$.pipe(switchMap(sortedEntities), distinctUntilChanged(), shareReplay());
|
return this.sortingService.sortingOption$.pipe(switchMap(sortedEntities), distinctUntilChanged(), shareReplay(1));
|
||||||
}
|
}
|
||||||
|
|
||||||
private get _noMatch$(): Observable<boolean> {
|
private get _noMatch$(): Observable<boolean> {
|
||||||
return combineLatest([this.entitiesService.allLength$, this.listingService.displayedLength$]).pipe(
|
return combineLatest([this.entitiesService.allLength$, this.listingService.displayedLength$]).pipe(
|
||||||
map(([hasEntities, hasDisplayedEntities]) => !!hasEntities && !hasDisplayedEntities),
|
map(([hasEntities, hasDisplayedEntities]) => !!hasEntities && !hasDisplayedEntities),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -62,7 +62,7 @@ export abstract class ListingComponent<T extends IListable> extends AutoUnsubscr
|
|||||||
private get _noContent$(): Observable<boolean> {
|
private get _noContent$(): Observable<boolean> {
|
||||||
return combineLatest([this._noMatch$, this.entitiesService.noData$]).pipe(
|
return combineLatest([this._noMatch$, this.entitiesService.noData$]).pipe(
|
||||||
map(([noMatch, noData]) => noMatch || noData),
|
map(([noMatch, noData]) => noMatch || noData),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -30,8 +30,8 @@ export class EntitiesService<E extends IListable, I = E> extends GenericService<
|
|||||||
@Optional() @Inject(ENTITY_PATH) protected readonly _defaultModelPath = '',
|
@Optional() @Inject(ENTITY_PATH) protected readonly _defaultModelPath = '',
|
||||||
) {
|
) {
|
||||||
super(_injector, _defaultModelPath);
|
super(_injector, _defaultModelPath);
|
||||||
this.all$ = this._all$.asObservable().pipe(distinctUntilChanged(), shareReplay());
|
this.all$ = this._all$.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
|
||||||
this.allLength$ = this._all$.pipe(getLength, distinctUntilChanged(), shareReplay());
|
this.allLength$ = this._all$.pipe(getLength, distinctUntilChanged(), shareReplay(1));
|
||||||
this.noData$ = this._noData$;
|
this.noData$ = this._noData$;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -28,14 +28,14 @@ export class ListingService<E extends IListable> extends AutoUnsubscribe {
|
|||||||
super();
|
super();
|
||||||
|
|
||||||
this.displayed$ = this._getDisplayed$;
|
this.displayed$ = this._getDisplayed$;
|
||||||
this.displayedLength$ = this.displayed$.pipe(getLength, distinctUntilChanged(), shareReplay());
|
this.displayedLength$ = this.displayed$.pipe(getLength, distinctUntilChanged(), shareReplay(1));
|
||||||
|
|
||||||
this.selected$ = this._selected$.asObservable().pipe(shareReplay());
|
this.selected$ = this._selected$.asObservable().pipe(shareReplay(1));
|
||||||
this.selectedEntities$ = this._selected$.asObservable().pipe(
|
this.selectedEntities$ = this._selected$.asObservable().pipe(
|
||||||
map(() => this.selected),
|
map(() => this.selected),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
this.selectedLength$ = this._selected$.pipe(getLength, distinctUntilChanged(), shareReplay());
|
this.selectedLength$ = this._selected$.pipe(getLength, distinctUntilChanged(), shareReplay(1));
|
||||||
|
|
||||||
this.areAllSelected$ = this._areAllSelected$;
|
this.areAllSelected$ = this._areAllSelected$;
|
||||||
this.areSomeSelected$ = this._areSomeSelected$;
|
this.areSomeSelected$ = this._areSomeSelected$;
|
||||||
@ -66,7 +66,7 @@ export class ListingService<E extends IListable> extends AutoUnsubscribe {
|
|||||||
this._displayed = displayed;
|
this._displayed = displayed;
|
||||||
}),
|
}),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -74,7 +74,7 @@ export class ListingService<E extends IListable> extends AutoUnsubscribe {
|
|||||||
return combineLatest([this.displayedLength$, this.selectedLength$]).pipe(
|
return combineLatest([this.displayedLength$, this.selectedLength$]).pipe(
|
||||||
map(([displayedLength, selectedLength]) => !!displayedLength && displayedLength === selectedLength),
|
map(([displayedLength, selectedLength]) => !!displayedLength && displayedLength === selectedLength),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -82,7 +82,7 @@ export class ListingService<E extends IListable> extends AutoUnsubscribe {
|
|||||||
return this.selectedLength$.pipe(
|
return this.selectedLength$.pipe(
|
||||||
map(length => !!length),
|
map(length => !!length),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -90,7 +90,7 @@ export class ListingService<E extends IListable> extends AutoUnsubscribe {
|
|||||||
return combineLatest([this.areAllSelected$, this.areSomeSelected$]).pipe(
|
return combineLatest([this.areAllSelected$, this.areSomeSelected$]).pipe(
|
||||||
map(([allAreSelected, someAreSelected]) => !allAreSelected && someAreSelected),
|
map(([allAreSelected, someAreSelected]) => !allAreSelected && someAreSelected),
|
||||||
distinctUntilChanged(),
|
distinctUntilChanged(),
|
||||||
shareReplay(),
|
shareReplay(1),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@ import { distinctUntilChanged, shareReplay } from 'rxjs/operators';
|
|||||||
export class SearchService<T extends IListable> {
|
export class SearchService<T extends IListable> {
|
||||||
skip = false;
|
skip = false;
|
||||||
private readonly _query$ = new BehaviorSubject('');
|
private readonly _query$ = new BehaviorSubject('');
|
||||||
readonly valueChanges$ = this._query$.asObservable().pipe(distinctUntilChanged(), shareReplay());
|
readonly valueChanges$ = this._query$.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
|
||||||
|
|
||||||
get searchValue(): string {
|
get searchValue(): string {
|
||||||
return this._query$.getValue();
|
return this._query$.getValue();
|
||||||
|
|||||||
@ -13,7 +13,7 @@ export class SortingService<T extends IListable> {
|
|||||||
column: 'searchKey',
|
column: 'searchKey',
|
||||||
order: SortingOrders.asc,
|
order: SortingOrders.asc,
|
||||||
});
|
});
|
||||||
readonly sortingOption$ = this._sortingOption$.asObservable().pipe(distinctUntilChanged(), shareReplay());
|
readonly sortingOption$ = this._sortingOption$.asObservable().pipe(distinctUntilChanged(), shareReplay(1));
|
||||||
|
|
||||||
get sortingOption(): SortingOption<T> | undefined {
|
get sortingOption(): SortingOption<T> | undefined {
|
||||||
return this._sortingOption$.getValue();
|
return this._sortingOption$.getValue();
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user