Marmelator/common-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RED-9504: use translate pipe & clean imports.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2024-08-02 11:33:53 +03:00
parent 28acee573d
commit 0fa39cf900
2 changed files with 51 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/lib/listing/page-header/page-header.component.html
View File

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

57
src/lib/listing/page-header/page-header.component.ts
View File

@ -1,19 +1,19 @@
import { AsyncPipe, NgTemplateOutlet } from '@angular/common'; 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 { TranslateModule } from '@ngx-translate/core';
import { combineLatest, Observable, of } from 'rxjs'; import { combineLatest, Observable, of } from 'rxjs';
import { distinctUntilChanged, map } from 'rxjs/operators'; import { distinctUntilChanged, map } from 'rxjs/operators';
import { CircleButtonComponent } from '../../buttons/circle-button/circle-button.component'; import { CircleButtonComponent } from '../../buttons';
import { IconButtonComponent } from '../../buttons/icon-button/icon-button.component'; import { IconButtonComponent } from '../../buttons';
import { IconButtonTypes } from '../../buttons/types/icon-button.type'; import { IconButtonTypes } from '../../buttons';
import { FilterService } from '../../filtering/filter.service'; import { FilterService } from '../../filtering';
import { IqserFiltersModule } from '../../filtering/filters.module'; import { IqserFiltersModule } from '../../filtering';
import { PopupFilterComponent } from '../../filtering/popup-filter/popup-filter.component'; import { PopupFilterComponent } from '../../filtering';
import { InputWithActionComponent } from '../../inputs/input-with-action/input-with-action.component'; import { InputWithActionComponent } from '../../inputs/input-with-action/input-with-action.component';
import { SearchService } from '../../search/search.service'; import { SearchService } from '../../search';
import { filterEach } from '../../utils/operators'; import { filterEach } from '../../utils';
import { List } from '../../utils/types/iqser-types'; import { List } from '../../utils';
import { IListable } from '../models/listable'; import { IListable } from '../models';
import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models'; import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './models';
@Component({ @Component({
@ -36,28 +36,29 @@ import { ActionConfig, ButtonConfig, SearchPosition, SearchPositions } from './m
export class PageHeaderComponent<T extends IListable> { export class PageHeaderComponent<T extends IListable> {
readonly searchPositions = SearchPositions; readonly searchPositions = SearchPositions;
readonly iconButtonTypes = IconButtonTypes; 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 filterService = inject(FilterService, { optional: true });
readonly searchService = inject<SearchService<T>>(SearchService<T>, { 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 filters$ = this.filterService?.filterGroups$.pipe(filterEach(f => !!f.icon));
readonly showResetFilters$ = this.#showResetFilters$; readonly showResetFilters$ = this.#showResetFilters$;
get filterHelpModeKey() {
return this.helpModeKey ? (this.helpModeKey === 'dossier' ? 'filter_dossier_list' : 'filter_documents') : '';
}
get #showResetFilters$(): Observable<boolean> { get #showResetFilters$(): Observable<boolean> {
if (!this.filterService) { if (!this.filterService) {
return of(false); return of(false);