RED-9504: use translate pipe & clean imports.
This commit is contained in:
Nicoleta Panaghiu
parent
7edde2a01f
commit
f685955f8f
@ -1,20 +1,20 @@
|
||||
<div class="page-header">
|
||||
@if (pageLabel) {
|
||||
<div class="breadcrumb">{{ pageLabel }}</div>
|
||||
@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) {
|
||||
@if (filters.length && searchPosition() !== searchPositions.beforeFilters) {
|
||||
<div class="text-muted" translate="filters.filter-by"></div>
|
||||
}
|
||||
@if (searchPosition === searchPositions.beforeFilters) {
|
||||
@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>
|
||||
<iqser-popup-filter [primaryFiltersSlug]="filter.slug" [attr.help-mode-key]="filterHelpModeKey()"></iqser-popup-filter>
|
||||
}
|
||||
}
|
||||
@for (filter$ of filterService.singleFilters; track filter$) {
|
||||
@ -22,13 +22,13 @@
|
||||
<iqser-single-filter [filter]="filter"></iqser-single-filter>
|
||||
}
|
||||
}
|
||||
@if (searchPosition === searchPositions.afterFilters) {
|
||||
@if (searchPosition() === searchPositions.afterFilters) {
|
||||
<ng-container [ngTemplateOutlet]="searchBar"></ng-container>
|
||||
}
|
||||
@if (!hideResetButton && (showResetFilters$ | async) === true) {
|
||||
@if (!hideResetButton() && (showResetFilters$ | async) === true) {
|
||||
<div
|
||||
(click)="resetFilters()"
|
||||
[attr.help-mode-key]="'filter_' + helpModeKey + '_list'"
|
||||
[attr.help-mode-key]="'filter_' + helpModeKey() + '_list'"
|
||||
class="reset-filters"
|
||||
translate="reset-filters"
|
||||
></div>
|
||||
@ -36,17 +36,17 @@
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showCloseButton || actionConfigs || buttonConfigs || viewModeSelection) {
|
||||
@if (showCloseButton() || actionConfigs() || buttonConfigs() || viewModeSelection()) {
|
||||
<div class="actions">
|
||||
@if (searchPosition === searchPositions.withActions) {
|
||||
@if (searchPosition() === searchPositions.withActions) {
|
||||
<ng-container [ngTemplateOutlet]="searchBar"></ng-container>
|
||||
}
|
||||
<ng-container [ngTemplateOutlet]="viewModeSelection"></ng-container>
|
||||
@for (config of buttonConfigs; track trackByLabel($index, config)) {
|
||||
<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.replace('.', '-')"
|
||||
[buttonId]="(config.label | translate).replace('.', '-')"
|
||||
[icon]="config.icon"
|
||||
[label]="config.label | translate"
|
||||
[type]="config.type"
|
||||
@ -55,25 +55,25 @@
|
||||
}
|
||||
}
|
||||
<div class="actions">
|
||||
@for (config of actionConfigs; track trackByLabel($index, config)) {
|
||||
@for (config of actionConfigs(); track trackByLabel($index, config)) {
|
||||
@if (!config.hide) {
|
||||
<iqser-circle-button
|
||||
(action)="config.action($event)"
|
||||
[buttonId]="config.id"
|
||||
[disabled]="config.disabled$ && (config.disabled$ | async)"
|
||||
[icon]="config.icon"
|
||||
[tooltip]="config.label"
|
||||
[tooltip]="config.label | translate"
|
||||
[attr.help-mode-key]="config.helpModeKey"
|
||||
></iqser-circle-button>
|
||||
}
|
||||
}
|
||||
<!-- Extra custom actions here -->
|
||||
<ng-content select="[slot=right]"></ng-content>
|
||||
@if (showCloseButton) {
|
||||
@if (showCloseButton()) {
|
||||
<iqser-circle-button
|
||||
buttonId="close-view-btn"
|
||||
(action)="closeAction.emit()"
|
||||
[class.ml-6]="actionConfigs"
|
||||
[class.ml-6]="actionConfigs()"
|
||||
[icon]="'iqser:close'"
|
||||
[attr.help-mode-key]="'close_dossier'"
|
||||
[tooltip]="'common.close' | translate"
|
||||
@ -85,14 +85,14 @@
|
||||
</div>
|
||||
|
||||
<ng-template #searchBar>
|
||||
@if (searchPlaceholder && searchService) {
|
||||
@if (searchPlaceholder() && searchService) {
|
||||
<iqser-input-with-action
|
||||
[inputId]="searchInputId"
|
||||
[inputId]="searchInputId()"
|
||||
(valueChange)="searchService.searchValue = $event"
|
||||
[class.mr-8]="searchPosition === searchPositions.beforeFilters"
|
||||
[placeholder]="searchPlaceholder"
|
||||
[class.mr-8]="searchPosition() === searchPositions.beforeFilters"
|
||||
[placeholder]="searchPlaceholder()"
|
||||
[value]="searchService.valueChanges$ | async"
|
||||
[width]="searchWidth"
|
||||
[width]="searchWidth()"
|
||||
></iqser-input-with-action>
|
||||
}
|
||||
</ng-template>
|
||||
|
||||
@ -1,19 +1,19 @@
|
||||
import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
|
||||
import { ChangeDetectionStrategy, Component, EventEmitter, inject, Input, Output, TemplateRef } from '@angular/core';
|
||||
import { ChangeDetectionStrategy, Component, computed, inject, input, output, TemplateRef } from '@angular/core';
|
||||
import { TranslateModule } from '@ngx-translate/core';
|
||||
import { combineLatest, Observable, of } from 'rxjs';
|
||||
import { distinctUntilChanged, map } from 'rxjs/operators';
|
||||
import { CircleButtonComponent } from '../../buttons/circle-button/circle-button.component';
|
||||
import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component';
|
||||
import { IconButtonTypes } from '../../buttons/types/icon-button.type';
|
||||
import { FilterService } from '../../filtering/filter.service';
|
||||
import { IqserFiltersModule } from '../../filtering/filters.module';
|
||||
import { PopupFilterComponent } from '../../filtering/popup-filter/popup-filter.component';
|
||||
import { CircleButtonComponent } from '../../buttons';
|
||||
import { IconButtonComponent } from '../../buttons';
|
||||
import { IconButtonTypes } from '../../buttons';
|
||||
import { FilterService } from '../../filtering';
|
||||
import { IqserFiltersModule } from '../../filtering';
|
||||
import { PopupFilterComponent } from '../../filtering';
|
||||
import { InputWithActionComponent } from '../../inputs/input-with-action/input-with-action.component';
|
||||
import { SearchService } from '../../search/search.service';
|
||||
import { filterEach } from '../../utils/operators';
|
||||
import { List } from '../../utils/types/iqser-types';
|
||||
import { IListable } from '../models/listable';
|
||||
import { SearchService } from '../../search';
|
||||
import { filterEach } from '../../utils';
|
||||
import { List } from '../../utils';
|
||||
import { IListable } from '../models';
|
||||
import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models';
|
||||
|
||||
@Component({
|
||||
@ -36,28 +36,29 @@ import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './m
|
||||
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 filterService = inject(FilterService, { optional: true });
|
||||
readonly searchService = inject<SearchService<T>>(SearchService<T>, { optional: true });
|
||||
|
||||
readonly pageLabel = input<string>();
|
||||
readonly searchInputId = input<string>();
|
||||
readonly showCloseButton = input(false);
|
||||
readonly hideResetButton = input(false);
|
||||
readonly actionConfigs = input<List<ActionConfig>>();
|
||||
readonly buttonConfigs = input<List<ButtonConfig>>();
|
||||
readonly viewModeSelection = input<TemplateRef<unknown>>();
|
||||
readonly searchPlaceholder = input<string>();
|
||||
readonly searchWidth = input<number | 'full'>();
|
||||
readonly helpModeKey = input<'dossier' | 'document'>();
|
||||
readonly searchPosition = input<SearchPosition>(SearchPositions.afterFilters);
|
||||
readonly closeAction = output();
|
||||
|
||||
readonly filterHelpModeKey = computed(() =>
|
||||
this.helpModeKey() ? (this.helpModeKey() === 'dossier' ? 'filter_dossier_list' : 'filter_documents') : '',
|
||||
);
|
||||
|
||||
readonly filters$ = this.filterService?.filterGroups$.pipe(filterEach(f => !!f.icon));
|
||||
readonly showResetFilters$ = this.#showResetFilters$;
|
||||
|
||||
get filterHelpModeKey() {
|
||||
return this.helpModeKey ? (this.helpModeKey === 'dossier' ? 'filter_dossier_list' : 'filter_documents') : '';
|
||||
}
|
||||
|
||||
get #showResetFilters$(): Observable<boolean> {
|
||||
if (!this.filterService) {
|
||||
return of(false);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user