From 0fa39cf9003658087e23e4809966a6e22b22c03e Mon Sep 17 00:00:00 2001
From: Nicoleta Panaghiu <nicoleta.panaghiu.ext@knecon.com>
Date: Fri, 2 Aug 2024 11:33:53 +0300
Subject: [PATCH] RED-9504: use translate pipe & clean imports.

---
 .../page-header/page-header.component.html    | 44 +++++++-------
 .../page-header/page-header.component.ts      | 57 ++++++++++---------
 2 files changed, 51 insertions(+), 50 deletions(-)

diff --git a/src/lib/listing/page-header/page-header.component.html b/src/lib/listing/page-header/page-header.component.html
index b34ceb4..e566969 100644
--- a/src/lib/listing/page-header/page-header.component.html
+++ b/src/lib/listing/page-header/page-header.component.html
@@ -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>
diff --git a/src/lib/listing/page-header/page-header.component.ts b/src/lib/listing/page-header/page-header.component.ts
index 623e2da..183b260 100644
--- a/src/lib/listing/page-header/page-header.component.ts
+++ b/src/lib/listing/page-header/page-header.component.ts
@@ -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);