common-ui/src/lib/listing/page-header/page-header.component.ts

58 lines
2.2 KiB
TypeScript

import { ChangeDetectionStrategy, Component, computed, EventEmitter, Input, Optional, Output, TemplateRef } from '@angular/core';
import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models';
import { IListable } from '../models';
import { IconButtonTypes } from '../../buttons';
import { SearchService } from '../../search';
import { FilterService } from '../../filtering';
import { List } from '../../utils';
import { toSignal } from '@angular/core/rxjs-interop';
@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;
readonly searchValue;
readonly showResetFilters;
constructor(@Optional() readonly filterService: FilterService, @Optional() readonly searchService: SearchService<T>) {
this.filters = computed(() => this.filterService.filterGroups().filter(fG => fG.icon));
this.searchValue = toSignal(this.searchService.valueChanges$);
this.showResetFilters = computed(() => {
return this.filterService.showResetFilters() || this.searchValue();
});
}
get filterHelpModeKey() {
return this.helpModeKey ? `filter_${this.helpModeKey}_list` : '';
}
resetFilters(): void {
this.filterService.reset();
this.searchService.reset();
}
trackByLabel<K extends { label?: string }>(_index: number, item: K): string | undefined {
return item.label;
}
}