From 981b59095c97f5c1106e8371ef8e6e5dcad85a20 Mon Sep 17 00:00:00 2001
From: Suzana Dirla <suzana@dirla.ro>
Date: Thu, 14 Jun 2018 16:26:25 +0300
Subject: [PATCH] [ACA-1449][ACA-1448] Show searched term on the extended
 search input (#411)

* [ACA-1449][ACA-1448] Show searched term on the extended search input

* [ACA-1449][ACA-1448] fix test
---
 .../search-input/search-input.component.html  | 25 +++++++---
 .../search-input/search-input.component.scss  | 18 +++++++
 .../search-input.component.spec.ts            |  4 +-
 .../search-input/search-input.component.ts    | 49 +++++++++++++++++--
 4 files changed, 82 insertions(+), 14 deletions(-)

diff --git a/src/app/components/search-input/search-input.component.html b/src/app/components/search-input/search-input.component.html
index 2d892668d..f37d847a3 100644
--- a/src/app/components/search-input/search-input.component.html
+++ b/src/app/components/search-input/search-input.component.html
@@ -1,8 +1,17 @@
-<adf-search-control
-    [highlight]="true"
-    (optionClicked)="onItemClicked($event)"
-    [expandable]="!onSearchResults"
-    [liveSearchEnabled]="!onSearchResults"
-    (submit)="onSearchSubmit($event)"
-    (searchChange)="onSearchChange($event)">
-</adf-search-control>
+<div class="adf-search-control-wrapper">
+    <button mat-icon-button
+            *ngIf="onSearchResults"
+            id="adf-search-button"
+            class="adf-search-button"
+            [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
+        <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+    </button>
+    <adf-search-control #searchControl
+        [highlight]="true"
+        (optionClicked)="onItemClicked($event)"
+        [expandable]="!onSearchResults"
+        [liveSearchEnabled]="!onSearchResults"
+        (submit)="onSearchSubmit($event)"
+        (searchChange)="onSearchChange($event)">
+    </adf-search-control>
+</div>
diff --git a/src/app/components/search-input/search-input.component.scss b/src/app/components/search-input/search-input.component.scss
index 01065f775..de837ebb5 100644
--- a/src/app/components/search-input/search-input.component.scss
+++ b/src/app/components/search-input/search-input.component.scss
@@ -8,3 +8,21 @@
 adf-search-control {
     color: $alfresco-white;
 }
+
+.adf-search-control-wrapper {
+    display: flex;
+    box-sizing: border-box;
+    padding: 0;
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    white-space: nowrap;
+
+    .adf-search-button {
+        left: -15px;
+        margin-left: 13px;
+        align-items: flex-start;
+        font: 400 11px system-ui;
+        color: #fff;
+    }
+}
diff --git a/src/app/components/search-input/search-input.component.spec.ts b/src/app/components/search-input/search-input.component.spec.ts
index 640ed4ac6..62d7101c9 100644
--- a/src/app/components/search-input/search-input.component.spec.ts
+++ b/src/app/components/search-input/search-input.component.spec.ts
@@ -29,6 +29,7 @@ import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 
 import { SearchInputComponent } from './search-input.component';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('SearchInputComponent', () => {
     let fixture;
@@ -38,7 +39,8 @@ describe('SearchInputComponent', () => {
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
-                RouterTestingModule
+                RouterTestingModule,
+                TranslateModule.forRoot()
             ],
             declarations: [
                 SearchInputComponent
diff --git a/src/app/components/search-input/search-input.component.ts b/src/app/components/search-input/search-input.component.ts
index e6893912e..31ed8d222 100644
--- a/src/app/components/search-input/search-input.component.ts
+++ b/src/app/components/search-input/search-input.component.ts
@@ -23,23 +23,62 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component } from '@angular/core';
-import { Router } from '@angular/router';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import {
+    NavigationEnd, PRIMARY_OUTLET, Router, RouterEvent, UrlSegment, UrlSegmentGroup,
+    UrlTree
+} from '@angular/router';
 import { MinimalNodeEntity } from 'alfresco-js-api';
+import { SearchControlComponent } from '@alfresco/adf-content-services';
 
 @Component({
     selector: 'app-search-input',
     templateUrl: 'search-input.component.html',
     styleUrls: ['search-input.component.scss']
 })
-export class SearchInputComponent {
+export class SearchInputComponent implements OnInit {
 
     hasOneChange = false;
     hasNewChange = false;
     navigationTimer: any;
 
-    constructor(
-        private router: Router) {
+    @ViewChild('searchControl')
+    searchControl: SearchControlComponent;
+
+    constructor(private router: Router) {
+        this.router.events.filter(e => e instanceof RouterEvent).subscribe(event => {
+            if (event instanceof NavigationEnd) {
+                this.showInputValue();
+            }
+        });
+    }
+
+    ngOnInit() {
+        this.showInputValue();
+    }
+
+    showInputValue() {
+        if (this.onSearchResults) {
+
+            let searchedWord = null;
+            const urlTree: UrlTree = this.router.parseUrl(this.router.url);
+            const urlSegmentGroup: UrlSegmentGroup = urlTree.root.children[PRIMARY_OUTLET];
+
+            if (urlSegmentGroup) {
+                const urlSegments: UrlSegment[] = urlSegmentGroup.segments;
+                searchedWord = urlSegments[0].parameters['q'];
+            }
+
+            this.searchControl.searchTerm = searchedWord;
+            this.searchControl.subscriptAnimationState = 'no-animation';
+
+        } else {
+            if (this.searchControl.subscriptAnimationState === 'no-animation') {
+                this.searchControl.subscriptAnimationState = 'active';
+                this.searchControl.searchTerm = '';
+                this.searchControl.toggleSearchBar();
+            }
+        }
     }
 
     onItemClicked(node: MinimalNodeEntity) {