100 lines
4.4 KiB
HTML
100 lines
4.4 KiB
HTML
<div class="page-header">
|
|
@if (pageLabel()) {
|
|
<div class="breadcrumb">{{ pageLabel() }}</div>
|
|
}
|
|
|
|
@if (filters$ | async; as filters) {
|
|
<div class="filters">
|
|
<ng-content select="[slot=beforeFilters]"></ng-content>
|
|
@if (filters.length && searchPosition() !== searchPositions.beforeFilters) {
|
|
<div class="text-muted" translate="filters.filter-by"></div>
|
|
}
|
|
@if (searchPosition() === searchPositions.beforeFilters) {
|
|
<ng-container [ngTemplateOutlet]="searchBar"></ng-container>
|
|
}
|
|
@for (filter of filters; track trackByLabel($index, filter)) {
|
|
@if (!filter.hide) {
|
|
<iqser-popup-filter [primaryFiltersSlug]="filter.slug" [attr.help-mode-key]="filterHelpModeKey()"></iqser-popup-filter>
|
|
}
|
|
}
|
|
@for (filter$ of filterService.singleFilters; track filter$) {
|
|
@if (filter$ | async; as filter) {
|
|
<iqser-single-filter [filter]="filter"></iqser-single-filter>
|
|
}
|
|
}
|
|
@if (searchPosition() === searchPositions.afterFilters) {
|
|
<ng-container [ngTemplateOutlet]="searchBar"></ng-container>
|
|
}
|
|
@if (!hideResetButton() && (showResetFilters$ | async) === true) {
|
|
<div
|
|
(click)="resetFilters()"
|
|
[attr.help-mode-key]="'filter_' + helpModeKey() + '_list'"
|
|
class="reset-filters"
|
|
translate="reset-filters"
|
|
></div>
|
|
}
|
|
</div>
|
|
}
|
|
|
|
@if (showCloseButton() || actionConfigs() || buttonConfigs() || viewModeSelection()) {
|
|
<div class="actions">
|
|
@if (searchPosition() === searchPositions.withActions) {
|
|
<ng-container [ngTemplateOutlet]="searchBar"></ng-container>
|
|
}
|
|
<ng-container [ngTemplateOutlet]="viewModeSelection()"></ng-container>
|
|
@for (config of buttonConfigs(); track trackByLabel($index, config)) {
|
|
@if (!config.hide) {
|
|
<iqser-icon-button
|
|
(action)="config.action($event)"
|
|
[buttonId]="(config.label | translate).replace('.', '-')"
|
|
[icon]="config.icon"
|
|
[label]="config.label | translate"
|
|
[type]="config.type"
|
|
[attr.help-mode-key]="config.helpModeKey"
|
|
></iqser-icon-button>
|
|
}
|
|
}
|
|
<div class="actions">
|
|
@for (config of actionConfigs(); track trackByLabel($index, config)) {
|
|
@if (!config.hide) {
|
|
<iqser-circle-button
|
|
(action)="config.action($event)"
|
|
[buttonId]="config.id"
|
|
[disabled]="config.disabled"
|
|
[icon]="config.icon"
|
|
[tooltip]="config.label | translate"
|
|
[attr.help-mode-key]="config.helpModeKey"
|
|
[iqserDisableStopPropagation]="config.disableStopPropagation"
|
|
></iqser-circle-button>
|
|
}
|
|
}
|
|
<!-- Extra custom actions here -->
|
|
<ng-content select="[slot=right]"></ng-content>
|
|
@if (showCloseButton()) {
|
|
<iqser-circle-button
|
|
buttonId="close-view-btn"
|
|
(action)="closeAction.emit()"
|
|
[class.ml-6]="actionConfigs()"
|
|
[icon]="'iqser:close'"
|
|
[attr.help-mode-key]="'close_dossier'"
|
|
[tooltip]="'common.close' | translate"
|
|
></iqser-circle-button>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<ng-template #searchBar>
|
|
@if (searchPlaceholder() && searchService) {
|
|
<iqser-input-with-action
|
|
[inputId]="searchInputId()"
|
|
(valueChange)="searchService.searchValue = $event"
|
|
[class.mr-8]="searchPosition() === searchPositions.beforeFilters"
|
|
[placeholder]="searchPlaceholder()"
|
|
[value]="searchService.valueChanges$ | async"
|
|
[width]="searchWidth()"
|
|
></iqser-input-with-action>
|
|
}
|
|
</ng-template>
|