Translation rework: Quick filter, input with action

apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.html

@@ -4,37 +4,25 @@
     <div class="dialog-content">
         <div class="sub-header">
             <div class="left">
-                <div class="info">
-                    <span translate="file-attributes-csv-import.file"> </span> {{ csvFile.name }}
-                </div>
+                <div class="info"><span translate="file-attributes-csv-import.file"> </span> {{ csvFile.name }}</div>
                 <div class="large-label">
-                    {{
-                        'file-attributes-csv-import.total-rows'
-                            | translate: { rows: parseResult?.data?.length }
-                    }}
+                    {{ 'file-attributes-csv-import.total-rows' | translate: { rows: parseResult?.data?.length } }}
                 </div>
             </div>
             <div class="right">
                 <form (submit)="changedParseConfig && readFile()" [formGroup]="baseConfigForm">
                     <div class="red-input-group required w-250">
                         <mat-form-field floatLabel="always">
-                            <mat-label>{{
-                                'file-attributes-csv-import.key-column' | translate
-                            }}</mat-label>
+                            <mat-label>{{ 'file-attributes-csv-import.key-column' | translate }}</mat-label>
                             <input
                                 [matAutocomplete]="auto"
-                                [placeholder]="
-                                    'file-attributes-csv-import.key-column-placeholder' | translate
-                                "
+                                [placeholder]="'file-attributes-csv-import.key-column-placeholder' | translate"
                                 formControlName="filenameMappingColumnHeaderName"
                                 matInput
                                 type="text"
                             />
                             <mat-autocomplete #auto="matAutocomplete" autoActiveFirstOption>
-                                <mat-option
-                                    *ngFor="let field of filteredKeyOptions | async"
-                                    [value]="field"
-                                >
+                                <mat-option *ngFor="let field of filteredKeyOptions | async" [value]="field">
                                     {{ field }}
                                 </mat-option>
                             </mat-autocomplete>
@@ -44,9 +32,7 @@
                     <div class="red-input-group required w-110">
                         <label translate="file-attributes-csv-import.delimiter"></label>
                         <input
-                            [placeholder]="
-                                'file-attributes-csv-import.delimiter-placeholder' | translate
-                            "
+                            [placeholder]="'file-attributes-csv-import.delimiter-placeholder' | translate"
                             formControlName="delimiter"
                             name="delimiter"
                             type="text"
@@ -56,9 +42,7 @@
                     <div class="red-input-group required w-160">
                         <label translate="file-attributes-csv-import.encoding"></label>
                         <input
-                            [placeholder]="
-                                'file-attributes-csv-import.encoding-placeholder' | translate
-                            "
+                            [placeholder]="'file-attributes-csv-import.encoding-placeholder' | translate"
                             formControlName="encoding"
                             name="encoding"
                             type="text"
@@ -78,12 +62,10 @@
                 <div class="csv-part-header">
                     <div>
                         <span class="all-caps-label">{{
-                            'file-attributes-csv-import.available'
-                                | translate: { value: parseResult?.meta?.fields.length }
+                            'file-attributes-csv-import.available' | translate: { value: parseResult?.meta?.fields.length }
                         }}</span>
                         <span class="all-caps-label">{{
-                            'file-attributes-csv-import.selected'
-                                | translate: { value: activeFields.length }
+                            'file-attributes-csv-import.selected' | translate: { value: activeFields.length }
                         }}</span>
                     </div>
                     <div class="actions">
@@ -109,7 +91,7 @@
                 <div *ngIf="isSearchOpen" class="search-input-container">
                     <redaction-input-with-action
                         [form]="searchForm"
-                        placeholder="file-attributes-csv-import.search.placeholder"
+                        [placeholder]="'file-attributes-csv-import.search.placeholder' | translate"
                         type="search"
                         width="full"
                     ></redaction-input-with-action>
@@ -127,12 +109,8 @@
                                 {{ field.csvColumn }}
                             </div>
                             <div class="secondary">
-                                <div class="entry-count small-label">
-                                    {{ getEntries(field.csvColumn) }} entries
-                                </div>
-                                <div class="sample small-label">
-                                    Sample: {{ getSample(field.csvColumn) }}
-                                </div>
+                                <div class="entry-count small-label">{{ getEntries(field.csvColumn) }} entries</div>
+                                <div class="sample small-label">Sample: {{ getSample(field.csvColumn) }}</div>
                             </div>
                         </div>
                     </div>
@@ -146,10 +124,7 @@
             >
                 <div class="csv-part-header">
                     <div class="all-caps-label">
-                        {{
-                            'file-attributes-csv-import.csv-column' +
-                                (previewExpanded ? '' : '-preview') | translate
-                        }}
+                        {{ 'file-attributes-csv-import.csv-column' + (previewExpanded ? '' : '-preview') | translate }}
                     </div>
                     <redaction-circle-button
                         (click)="previewExpanded = !previewExpanded"
@@ -157,16 +132,9 @@
                     ></redaction-circle-button>
                 </div>
                 <div [class.hidden]="!previewExpanded" class="csv-part-content">
-                    <div
-                        *ngIf="!hoveredColumn"
-                        class="no-column-data"
-                        translate="file-attributes-csv-import.no-hovered-column"
-                    ></div>
+                    <div *ngIf="!hoveredColumn" class="no-column-data" translate="file-attributes-csv-import.no-hovered-column"></div>
                     <div *ngIf="hoveredColumn && !columnSample.length" class="no-column-data">
-                        {{
-                            'file-attributes-csv-import.no-sample-data-for'
-                                | translate: { column: hoveredColumn }
-                        }}
+                        {{ 'file-attributes-csv-import.no-sample-data-for' | translate: { column: hoveredColumn } }}
                     </div>
                     <div *ngFor="let row of columnSample">
                         {{ row }}
@@ -184,12 +152,7 @@
     </div>
 
     <div class="dialog-actions">
-        <button
-            (click)="save()"
-            [disabled]="changedParseConfig || baseConfigForm.invalid"
-            color="primary"
-            mat-flat-button
-        >
+        <button (click)="save()" [disabled]="changedParseConfig || baseConfigForm.invalid" color="primary" mat-flat-button>
             {{ 'file-attributes-csv-import.save.label' | translate }}
         </button>
 
@@ -198,9 +161,5 @@
         </div>
     </div>
 
-    <redaction-circle-button
-        class="dialog-close"
-        icon="red:close"
-        mat-dialog-close
-    ></redaction-circle-button>
+    <redaction-circle-button class="dialog-close" icon="red:close" mat-dialog-close></redaction-circle-button>
 </section>

apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html

@@ -44,7 +44,7 @@
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
                         [form]="searchForm"
-                        placeholder="dictionary-listing.search"
+                        [placeholder]="'dictionary-listing.search' | translate"
                         type="search"
                     ></redaction-input-with-action>
                     <div class="actions">

apps/red-ui/src/app/modules/admin/screens/dossier-attributes-listing/dossier-attributes-listing-screen.component.html

@@ -44,7 +44,7 @@
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
                         [form]="searchForm"
-                        placeholder="dossier-attributes-listing.search"
+                        [placeholder]="'dossier-attributes-listing.search' | translate"
                         type="search"
                     ></redaction-input-with-action>
 

apps/red-ui/src/app/modules/admin/screens/dossier-template-listing/dossier-templates-listing-screen.component.html

@@ -44,7 +44,7 @@
                     <div class="actions flex-1">
                         <redaction-input-with-action
                             [form]="searchForm"
-                            placeholder="dossier-templates-listing.search"
+                            [placeholder]="'dossier-templates-listing.search' | translate"
                             type="search"
                         ></redaction-input-with-action>
 

apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html

@@ -45,7 +45,7 @@
                 <div class="attributes-actions-container">
                     <redaction-input-with-action
                         [form]="searchForm"
-                        placeholder="file-attributes-listing.search"
+                        [placeholder]="'file-attributes-listing.search' | translate"
                         type="search"
                     ></redaction-input-with-action>
                     <input #fileInput (change)="importCSV($event.target['files'])" accept=".csv" class="csv-input" type="file" />

apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html

@@ -10,7 +10,7 @@
             <div class="actions">
                 <redaction-input-with-action
                     [form]="searchForm"
-                    placeholder="user-listing.search"
+                    [placeholder]="'user-listing.search' | translate"
                     type="search"
                 ></redaction-input-with-action>
                 <redaction-icon-button

apps/red-ui/src/app/modules/dossier/components/comments/comments.component.html

@@ -22,15 +22,11 @@
     (action)="addComment()"
     *ngIf="permissionsService.canAddComment()"
     [form]="commentForm"
+    [placeholder]="'comments.add-comment' | translate"
     autocomplete="off"
     icon="red:collapse"
-    placeholder="comments.add-comment"
     type="action"
     width="full"
 ></redaction-input-with-action>
 
-<div
-    (click)="toggleExpandComments($event)"
-    class="all-caps-label pointer hide-comments"
-    translate="comments.hide-comments"
-></div>
+<div (click)="toggleExpandComments($event)" class="all-caps-label pointer hide-comments" translate="comments.hide-comments"></div>

apps/red-ui/src/app/modules/dossier/components/page-exclusion/page-exclusion.component.html

@@ -2,20 +2,17 @@
     <redaction-input-with-action
         (action)="excludePagesRange()"
         [form]="excludePagesForm"
+        [hint]="'file-preview.tabs.exclude-pages.hint' | translate"
+        [placeholder]="'file-preview.tabs.exclude-pages.input-placeholder' | translate"
         autocomplete="off"
-        hint="file-preview.tabs.exclude-pages.hint"
         icon="red:check"
-        placeholder="file-preview.tabs.exclude-pages.input-placeholder"
         type="action"
         width="full"
     ></redaction-input-with-action>
 </div>
 
 <div *ngIf="excludedPagesRanges.length" class="all-caps-label-container">
-    <div
-        class="all-caps-label"
-        translate="file-preview.tabs.exclude-pages.removed-from-redaction"
-    ></div>
+    <div class="all-caps-label" translate="file-preview.tabs.exclude-pages.removed-from-redaction"></div>
 </div>
 
 <div class="ranges" redactionHasScrollbar>
@@ -23,9 +20,7 @@
         <ng-container *ngIf="range.startPage === range.endPage">
             {{ range.startPage }}
         </ng-container>
-        <ng-container *ngIf="range.startPage !== range.endPage">
-            {{ range.startPage }}-{{ range.endPage }}
-        </ng-container>
+        <ng-container *ngIf="range.startPage !== range.endPage"> {{ range.startPage }}-{{ range.endPage }} </ng-container>
         <redaction-circle-button
             (action)="includePagesRange(range)"
             *ngIf="permissionsService.canExcludePages()"

apps/red-ui/src/app/modules/dossier/components/team-members-manager/team-members-manager.component.html

@@ -20,11 +20,7 @@
         [unremovableMembers]="[selectedOwnerId]"
     ></redaction-team-members>
 
-    <pre
-        *ngIf="selectedApproversList.length === 0"
-        [innerHTML]="'assign-dossier-owner.dialog.no-approvers' | translate"
-        class="info"
-    ></pre>
+    <pre *ngIf="selectedApproversList.length === 0" [innerHTML]="'assign-dossier-owner.dialog.no-approvers' | translate" class="info"></pre>
 
     <div class="all-caps-label mt-16" translate="assign-dossier-owner.dialog.reviewers"></div>
     <redaction-team-members
@@ -37,17 +33,13 @@
         [unremovableMembers]="[selectedOwnerId]"
     ></redaction-team-members>
 
-    <pre
-        *ngIf="selectedReviewersList.length === 0"
-        [innerHTML]="'assign-dossier-owner.dialog.no-reviewers' | translate"
-        class="info"
-    ></pre>
+    <pre *ngIf="selectedReviewersList.length === 0" [innerHTML]="'assign-dossier-owner.dialog.no-reviewers' | translate" class="info"></pre>
 
     <redaction-input-with-action
         [form]="searchForm"
+        [placeholder]="'assign-dossier-owner.dialog.search' | translate"
         [width]="560"
         class="search-container"
-        placeholder="assign-dossier-owner.dialog.search"
         type="search"
     ></redaction-input-with-action>
 
@@ -57,21 +49,10 @@
             *ngFor="let userId of membersSelectOptions"
             [class.selected]="isMemberSelected(userId)"
         >
-            <redaction-initials-avatar
-                [userId]="userId"
-                [withName]="true"
-                size="large"
-            ></redaction-initials-avatar>
+            <redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>
             <div class="actions">
-                <div
-                    (click)="toggleApprover(userId, $event)"
-                    *ngIf="!isOwner(userId)"
-                    class="make-approver"
-                >
-                    <redaction-round-checkbox
-                        [active]="isApprover(userId)"
-                        class="mr-8"
-                    ></redaction-round-checkbox>
+                <div (click)="toggleApprover(userId, $event)" *ngIf="!isOwner(userId)" class="make-approver">
+                    <redaction-round-checkbox [active]="isApprover(userId)" class="mr-8"></redaction-round-checkbox>
                     <span translate="assign-dossier-owner.dialog.make-approver"></span>
                 </div>
                 <mat-icon *ngIf="!isOwner(userId)" svgIcon="red:check"></mat-icon>

apps/red-ui/src/app/modules/shared/components/filters/popup-filter/model/filter.model.ts

@@ -1,7 +1,6 @@
 export interface FilterModel {
     key: string;
     label?: string;
-    labelParams?: object;
     icon?: string;
     checked?: boolean;
     indeterminate?: boolean;

apps/red-ui/src/app/modules/shared/components/filters/quick-filters/quick-filters.component.html

@@ -4,5 +4,5 @@
     [class.active]="filter.checked"
     class="quick-filter"
 >
-    {{ filter.label | translate: filter.labelParams }}
+    {{ filter.label }}
 </div>

apps/red-ui/src/app/modules/shared/components/input-with-action/input-with-action.component.html

@@ -3,19 +3,15 @@
         <input
             [formControlName]="formControlName"
             [name]="formControlName"
-            [placeholder]="placeholder | translate"
+            [placeholder]="placeholder"
             class="with-icon mt-0"
             type="text"
         />
 
-        <span *ngIf="hint" [translate]="hint" class="hint"></span>
+        <span *ngIf="hint" class="hint">{{ hint }}</span>
 
         <!--        Search-->
-        <mat-icon
-            *ngIf="type === 'search' && !hasContent"
-            class="icon-right"
-            svgIcon="red:search"
-        ></mat-icon>
+        <mat-icon *ngIf="type === 'search' && !hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
 
         <redaction-circle-button
             (action)="clearContent()"