66 lines
2.4 KiB
TypeScript
66 lines
2.4 KiB
TypeScript
import { ChangeDetectionStrategy, Component, EventEmitter, Input, Optional, Output, TemplateRef } from '@angular/core';
|
|
import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models';
|
|
import { distinctUntilChanged, map } from 'rxjs/operators';
|
|
import { combineLatest, Observable, of } from 'rxjs';
|
|
import { IListable } from '../models';
|
|
import { IconButtonTypes } from '../../buttons';
|
|
import { SearchService } from '../../search';
|
|
import { FilterService } from '../../filtering';
|
|
import { filterEach, List } from '../../utils';
|
|
|
|
@Component({
|
|
selector: 'iqser-page-header',
|
|
templateUrl: './page-header.component.html',
|
|
styleUrls: ['./page-header.component.scss'],
|
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
})
|
|
export class PageHeaderComponent<T extends IListable> {
|
|
readonly searchPositions = SearchPositions;
|
|
readonly iconButtonTypes = IconButtonTypes;
|
|
|
|
@Input() pageLabel?: string;
|
|
@Input() searchInputId?: string;
|
|
@Input() showCloseButton = false;
|
|
@Input() hideResetButton = false;
|
|
@Input() actionConfigs?: List<ActionConfig>;
|
|
@Input() buttonConfigs?: List<ButtonConfig>;
|
|
@Input() viewModeSelection?: TemplateRef<unknown>;
|
|
@Input() searchPlaceholder?: string;
|
|
@Input() searchWidth?: number | 'full';
|
|
@Input() helpModeKey?: 'dossier' | 'document';
|
|
@Input() searchPosition: SearchPosition = SearchPositions.afterFilters;
|
|
@Output() readonly closeAction = new EventEmitter();
|
|
|
|
readonly filters$ = this.filterService?.filterGroups$.pipe(filterEach(f => !!f.icon));
|
|
readonly showResetFilters$ = this.#showResetFilters$;
|
|
|
|
constructor(
|
|
@Optional() readonly filterService: FilterService,
|
|
@Optional() readonly searchService: SearchService<T>,
|
|
) {}
|
|
|
|
get filterHelpModeKey() {
|
|
return this.helpModeKey ? `filter_${this.helpModeKey}_list` : '';
|
|
}
|
|
|
|
get #showResetFilters$(): Observable<boolean> {
|
|
if (!this.filterService) {
|
|
return of(false);
|
|
}
|
|
|
|
return combineLatest([this.filterService.showResetFilters$, this.searchService.valueChanges$]).pipe(
|
|
map(([showResetFilters, searchValue]) => showResetFilters || !!searchValue),
|
|
distinctUntilChanged(),
|
|
);
|
|
}
|
|
|
|
resetFilters(): void {
|
|
this.filterService.reset();
|
|
this.searchService.reset();
|
|
}
|
|
|
|
trackByLabel<K extends { label?: string }>(_index: number, item: K): string | undefined {
|
|
return item.label;
|
|
}
|
|
}
|