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

99 lines
4.0 KiB
HTML

<div class="page-header">
<div *ngIf="pageLabel" class="breadcrumb">{{ pageLabel }}</div>
<div *ngIf="filters$ | async as filters" class="filters">
<ng-content select="[slot=beforeFilters]"></ng-content>
<div
*ngIf="filters.length && searchPosition !== searchPositions.beforeFilters"
class="text-muted"
translate="filters.filter-by"
></div>
<ng-container *ngIf="searchPosition === searchPositions.beforeFilters" [ngTemplateOutlet]="searchBar"></ng-container>
<ng-container *ngFor="let filter of filters; trackBy: trackByLabel">
<iqser-popup-filter
*ngIf="!filter.hide"
[iqserHelpMode]="filterHelpModeKey"
[primaryFiltersSlug]="filter.slug"
></iqser-popup-filter>
</ng-container>
<ng-container *ngFor="let filter$ of filterService.singleFilters">
<iqser-single-filter *ngIf="filter$ | async as filter" [filter]="filter"></iqser-single-filter>
</ng-container>
<ng-container *ngIf="searchPosition === searchPositions.afterFilters" [ngTemplateOutlet]="searchBar"></ng-container>
<div
(click)="resetFilters()"
*ngIf="!hideResetButton && (showResetFilters$ | async) === true"
[iqserHelpMode]="'filter_' + helpModeKey + '_list'"
class="reset-filters"
translate="reset-filters"
></div>
</div>
<div *ngIf="showCloseButton || actionConfigs || buttonConfigs || viewModeSelection" class="actions">
<ng-container *ngIf="searchPosition === searchPositions.withActions" [ngTemplateOutlet]="searchBar"></ng-container>
<ng-container [ngTemplateOutlet]="viewModeSelection"></ng-container>
<ng-container *ngFor="let config of buttonConfigs; trackBy: trackByLabel">
<iqser-icon-button
(action)="config.action($event)"
*ngIf="!config.hide"
[buttonId]="config.label.replace('.', '-')"
[icon]="config.icon"
[iqserHelpMode]="config.helpModeKey"
[label]="config.label | translate"
[overlappingElements]="config.overlappingElements"
[type]="config.type"
></iqser-icon-button>
</ng-container>
<div class="actions">
<ng-container *ngFor="let config of actionConfigs; trackBy: trackByLabel">
<iqser-circle-button
(action)="config.action($event)"
*ngIf="!config.hide"
[buttonId]="config.id"
[disabled]="config.disabled$ && (config.disabled$ | async)"
[icon]="config.icon"
[iqserHelpMode]="config.helpModeKey"
[overlappingElements]="config.overlappingElements"
[tooltipPosition]="'below'"
[tooltip]="config.label"
></iqser-circle-button>
</ng-container>
<!-- Extra custom actions here -->
<ng-content select="[slot=right]"></ng-content>
<iqser-circle-button
[buttonId]="closeButtonId"
(action)="closeAction.emit()"
*ngIf="showCloseButton"
[class.ml-6]="actionConfigs"
[icon]="'iqser:close'"
[iqserHelpMode]="'edit_dossier_in_dossier'"
[overlappingElements]="['USER_MENU']"
[tooltipPosition]="'below'"
[tooltip]="'common.close' | translate"
></iqser-circle-button>
</div>
</div>
</div>
<ng-template #searchBar>
<iqser-input-with-action
(valueChange)="searchService.searchValue = $event"
*ngIf="searchPlaceholder && searchService"
[class.mr-8]="searchPosition === searchPositions.beforeFilters"
[placeholder]="searchPlaceholder"
[value]="searchService.valueChanges$ | async"
[width]="searchWidth"
></iqser-input-with-action>
</ng-template>