From c4ef411c916a22a55fe5afd66f4a3c9bd6efbf58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adina=20=C8=9Aeudan?= <adina@devplant.ro>
Date: Fri, 19 Mar 2021 00:19:42 +0200
Subject: [PATCH] Reset search field

---
 apps/red-ui/src/app/app.module.ts             |  4 ++-
 .../search-input/search-input.component.html  |  7 ++++++
 .../search-input/search-input.component.scss  |  3 +++
 .../search-input/search-input.component.ts    | 25 +++++++++++++++++++
 .../assign-owner-dialog.component.html        | 19 ++++++--------
 .../assign-owner-dialog.component.scss        |  6 -----
 .../dictionary-listing-screen.component.html  | 14 +----------
 .../rule-sets-listing-screen.component.html   | 13 +---------
 .../user-listing-screen.component.html        |  7 +-----
 .../project-listing-screen.component.html     |  7 +-----
 .../project-overview-screen.component.html    |  9 +++----
 11 files changed, 52 insertions(+), 62 deletions(-)
 create mode 100644 apps/red-ui/src/app/components/search-input/search-input.component.html
 create mode 100644 apps/red-ui/src/app/components/search-input/search-input.component.scss
 create mode 100644 apps/red-ui/src/app/components/search-input/search-input.component.ts

diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts
index 12327ce3e..ac4295fd6 100644
--- a/apps/red-ui/src/app/app.module.ts
+++ b/apps/red-ui/src/app/app.module.ts
@@ -118,6 +118,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { ForceRedactionDialogComponent } from './dialogs/force-redaction-dialog/force-redaction-dialog.component';
 import { AuditScreenComponent } from './screens/admin/audit-screen/audit-screen.component';
 import { PaginationComponent } from './components/pagination/pagination.component';
+import { SearchInputComponent } from './components/search-input/search-input.component';
 
 export function HttpLoaderFactory(httpClient: HttpClient) {
     return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json');
@@ -390,7 +391,8 @@ const matImports = [
         ComboChartComponent,
         ComboSeriesVerticalComponent,
         AuditScreenComponent,
-        PaginationComponent
+        PaginationComponent,
+        SearchInputComponent
     ],
     imports: [
         BrowserModule,
diff --git a/apps/red-ui/src/app/components/search-input/search-input.component.html b/apps/red-ui/src/app/components/search-input/search-input.component.html
new file mode 100644
index 000000000..aff28b9a6
--- /dev/null
+++ b/apps/red-ui/src/app/components/search-input/search-input.component.html
@@ -0,0 +1,7 @@
+<form [formGroup]="form">
+    <div class="red-input-group" [style.width]="width + 'px'" [style.max-width]="width + 'px'">
+        <input [placeholder]="placeholder | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
+        <mat-icon *ngIf="!hasContent" class="icon-right" svgIcon="red:search"></mat-icon>
+        <mat-icon *ngIf="hasContent" class="icon-right pointer" svgIcon="red:close" (click)="clearContent()"></mat-icon>
+    </div>
+</form>
diff --git a/apps/red-ui/src/app/components/search-input/search-input.component.scss b/apps/red-ui/src/app/components/search-input/search-input.component.scss
new file mode 100644
index 000000000..7f26ddcb5
--- /dev/null
+++ b/apps/red-ui/src/app/components/search-input/search-input.component.scss
@@ -0,0 +1,3 @@
+:host {
+    display: block;
+}
diff --git a/apps/red-ui/src/app/components/search-input/search-input.component.ts b/apps/red-ui/src/app/components/search-input/search-input.component.ts
new file mode 100644
index 000000000..4b79e8da3
--- /dev/null
+++ b/apps/red-ui/src/app/components/search-input/search-input.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup } from '@angular/forms';
+
+@Component({
+    selector: 'redaction-search-input',
+    templateUrl: './search-input.component.html',
+    styleUrls: ['./search-input.component.scss']
+})
+export class SearchInputComponent implements OnInit {
+    @Input() form: FormGroup;
+    @Input() placeholder: string;
+    @Input() width = 250;
+
+    constructor() {}
+
+    ngOnInit(): void {}
+
+    public get hasContent() {
+        return !!this.form.get('query').value.length;
+    }
+
+    public clearContent() {
+        this.form.patchValue({ query: '' });
+    }
+}
diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
index 9631d7918..2d3ee5428 100644
--- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
+++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
@@ -26,18 +26,13 @@
 
                 <pre *ngIf="selectedUserList.length === 0" class="info" [innerHTML]="'assign-' + data.type + '-owner.dialog.no-members' | translate"></pre>
 
-                <form [formGroup]="searchForm">
-                    <div class="red-input-group search-container">
-                        <input
-                            [placeholder]="'assign-' + data.type + '-owner.dialog.search' | translate"
-                            formControlName="query"
-                            name="query"
-                            type="text"
-                            class="with-icon mt-0"
-                        />
-                        <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
-                    </div>
-                </form>
+                <redaction-search-input
+                    [width]="560"
+                    [form]="searchForm"
+                    [placeholder]="'assign-' + data.type + '-owner.dialog.search' | translate"
+                    class="search-container"
+                ></redaction-search-input>
+
                 <div class="members-list">
                     <div *ngFor="let userId of multiUsersSelectOptions" [class.selected]="isMemberSelected(userId)" (click)="toggleSelected(userId)">
                         <redaction-initials-avatar [userId]="userId" [withName]="true" size="large"></redaction-initials-avatar>
diff --git a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
index ca9aa7cb3..2d19c30e2 100644
--- a/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
+++ b/apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
@@ -5,13 +5,7 @@
 }
 
 .search-container {
-    width: 560px;
     margin-top: 16px;
-
-    input {
-        width: 100%;
-        max-width: 100%;
-    }
 }
 
 .members-list {
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
index d56e2703f..558ca32e0 100644
--- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html
@@ -43,19 +43,7 @@
                     </span>
 
                     <div class="dictionary-actions-container">
-                        <form [formGroup]="searchForm">
-                            <div class="red-input-group w-250">
-                                <input
-                                    [placeholder]="'dictionary-listing.search' | translate"
-                                    formControlName="query"
-                                    name="query"
-                                    type="text"
-                                    class="with-icon mt-0"
-                                />
-                                <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
-                            </div>
-                        </form>
-
+                        <redaction-search-input [form]="searchForm" [placeholder]="'dictionary-listing.search'"></redaction-search-input>
                         <div class="actions">
                             <redaction-icon-button
                                 *ngIf="permissionsService.isAdmin()"
diff --git a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html
index 2ab32fd3c..6349d3a84 100644
--- a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.html
@@ -3,18 +3,7 @@
         <redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
 
         <div class="actions">
-            <form [formGroup]="searchForm">
-                <div class="red-input-group w-250">
-                    <input
-                        [placeholder]="'project-templates-listing.search' | translate"
-                        formControlName="query"
-                        name="query"
-                        type="text"
-                        class="with-icon mt-0"
-                    />
-                    <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
-                </div>
-            </form>
+            <redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
 
             <redaction-icon-button
                 *ngIf="permissionsService.isAdmin()"
diff --git a/apps/red-ui/src/app/screens/admin/user-listing-screen/user-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/user-listing-screen/user-listing-screen.component.html
index 05fbf6c7b..3d60e39bf 100644
--- a/apps/red-ui/src/app/screens/admin/user-listing-screen/user-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/admin/user-listing-screen/user-listing-screen.component.html
@@ -2,12 +2,7 @@
     <div class="page-header">
         <redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
 
-        <form [formGroup]="searchForm">
-            <div class="red-input-group">
-                <input [placeholder]="'dictionary-listing.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
-                <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
-            </div>
-        </form>
+        <redaction-search-input [form]="searchForm" [placeholder]="'user-listing.search'"></redaction-search-input>
 
         <div class="actions">
             <redaction-circle-button
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
index 60f9b796a..7d0bd5174 100644
--- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html
@@ -32,12 +32,7 @@
                 [filters]="ruleSetFilters"
                 [icon]="'red:template'"
             ></redaction-filter>
-            <form [formGroup]="searchForm">
-                <div class="red-input-group w-250">
-                    <input [placeholder]="'project-listing.search' | translate" class="with-icon mt-0" formControlName="query" name="query" type="text" />
-                    <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
-                </div>
-            </form>
+            <redaction-search-input [form]="searchForm" [placeholder]="'project-listing.search'"></redaction-search-input>
             <div class="reset-filters" *ngIf="hasActiveFilters" (click)="resetFilters()" translate="reset-filters"></div>
         </div>
         <redaction-icon-button
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
index 871bb552a..69677b03e 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html
@@ -24,12 +24,9 @@
                 [filters]="needsWorkFilters"
                 [icon]="'red:needs-work'"
             ></redaction-filter>
-            <form [formGroup]="searchForm">
-                <div class="red-input-group w-250">
-                    <input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
-                    <mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
-                </div>
-            </form>
+
+            <redaction-search-input [form]="searchForm" [placeholder]="'project-overview.search'"></redaction-search-input>
+
             <div class="reset-filters" *ngIf="hasActiveFilters" (click)="resetFilters()" translate="reset-filters"></div>
         </div>