From a5a57976dd779b335e1a1deb1a7c5851b820da43 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Tue, 2 Feb 2021 12:29:18 +0000
Subject: [PATCH] [Library | Trunk]: Change search input on admin-tools pages

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@60341 d315682c-612b-4755-9ff5-7f18f6832af3
---
 dashboard/divId/divIds.component.html               |  5 +++--
 dashboard/divId/divIds.component.ts                 | 13 ++++++++++++-
 dashboard/entity/entities.component.html            |  5 +++--
 dashboard/entity/entities.component.ts              | 12 ++++++++++++
 dashboard/page/pages.component.html                 |  5 +++--
 dashboard/page/pages.component.ts                   | 12 ++++++++++++
 dashboard/portal/portals.component.html             |  5 +++--
 dashboard/portal/portals.component.ts               | 12 ++++++++++++
 .../search-input/search-input.component.css         |  2 +-
 .../search-input/search-input.component.ts          |  7 +++++--
 10 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/dashboard/divId/divIds.component.html b/dashboard/divId/divIds.component.html
index b319873e..0834f6bc 100644
--- a/dashboard/divId/divIds.component.html
+++ b/dashboard/divId/divIds.component.html
@@ -14,8 +14,9 @@
         </ul>
       </div>
       <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
-        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search class"
+             [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
+             [bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
         <div class="show-options">
           <button class="uk-button uk-button-secondary">Bulk Actions</button>
           <div uk-dropdown="mode: click">
diff --git a/dashboard/divId/divIds.component.ts b/dashboard/divId/divIds.component.ts
index cdf5cc63..ce59b747 100644
--- a/dashboard/divId/divIds.component.ts
+++ b/dashboard/divId/divIds.component.ts
@@ -14,6 +14,7 @@ import {properties} from "../../../../environments/environment";
 import {PortalUtils} from "../portal/portalHelper";
 import {AlertModal} from "../../utils/modal/alert";
 import {Option} from "../../sharedComponents/input/input.component";
+import {SearchInputComponent} from "../../sharedComponents/search-input/search-input.component";
 
 declare var UIkit;
 
@@ -46,7 +47,8 @@ export class DivIdsComponent implements OnInit {
   selectedCommunityPid = null;
   public portalUtils:PortalUtils = new PortalUtils();
   private index: number;
-  
+  public selectedKeyword: string;
+  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
   
   ngOnInit() {
     this.filterForm =  this._fb.group({
@@ -350,4 +352,13 @@ export class DivIdsComponent implements OnInit {
       error => this.handleError('System error retrieving pages', error)
     ));
   }
+  
+  public onSearchClose() {
+    this.selectedKeyword = this.filterForm.get('keyword').value;
+  }
+  
+  public reset() {
+    this.selectedKeyword = null;
+    this.searchInputComponent.reset()
+  }
 }
diff --git a/dashboard/entity/entities.component.html b/dashboard/entity/entities.component.html
index 2a789e3b..f93d59d9 100644
--- a/dashboard/entity/entities.component.html
+++ b/dashboard/entity/entities.component.html
@@ -14,8 +14,9 @@
         </ul>
       </div>
       <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
-        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity"
+             [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
+             [bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
         <div class="show-options">
           <button class="uk-button uk-button-secondary">Bulk Actions</button>
           <div uk-dropdown="mode: click">
diff --git a/dashboard/entity/entities.component.ts b/dashboard/entity/entities.component.ts
index 5d2fe518..f5879b5d 100644
--- a/dashboard/entity/entities.component.ts
+++ b/dashboard/entity/entities.component.ts
@@ -12,6 +12,7 @@ import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
 import {ConnectHelper} from "../../connect/connectHelper";
 import {AlertModal} from "../../utils/modal/alert";
+import {SearchInputComponent} from "../../sharedComponents/search-input/search-input.component";
 
 declare var UIkit;
 
@@ -50,6 +51,8 @@ export class EntitiesComponent implements OnInit {
   public filterForm: FormGroup;
   private subscriptions: any[] = [];
   private index: number;
+  public selectedKeyword: string;
+  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
   
   constructor(private element: ElementRef, private route: ActivatedRoute,
               private _router: Router,
@@ -377,4 +380,13 @@ export class EntitiesComponent implements OnInit {
       );
     }
   }
+  
+  public onSearchClose() {
+    this.selectedKeyword = this.filterForm.get('keyword').value;
+  }
+  
+  public reset() {
+    this.selectedKeyword = null;
+    this.searchInputComponent.reset()
+  }
 }
diff --git a/dashboard/page/pages.component.html b/dashboard/page/pages.component.html
index 1dd11094..d33aa857 100644
--- a/dashboard/page/pages.component.html
+++ b/dashboard/page/pages.component.html
@@ -12,8 +12,9 @@
         </ul>
       </div>
       <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
-        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
+             [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
+             [bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
         <div class="show-options">
           <button class="uk-button uk-button-secondary">Bulk Actions</button>
           <div uk-dropdown="mode: click">
diff --git a/dashboard/page/pages.component.ts b/dashboard/page/pages.component.ts
index a5a86b78..d246a2b5 100644
--- a/dashboard/page/pages.component.ts
+++ b/dashboard/page/pages.component.ts
@@ -14,6 +14,7 @@ import {properties} from "../../../../environments/environment";
 import {ConnectHelper} from "../../connect/connectHelper";
 import {Option} from "../../sharedComponents/input/input.component";
 import {AlertModal} from "../../utils/modal/alert";
+import {SearchInputComponent} from "../../sharedComponents/search-input/search-input.component";
 
 declare var UIkit;
 
@@ -63,6 +64,8 @@ export class PagesComponent implements OnInit {
   private subscriptions: any[] = [];
   public portalUtils: PortalUtils = new PortalUtils();
   private index: number;
+  public selectedKeyword: string;
+  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
   
   constructor(private element: ElementRef, private route: ActivatedRoute,
               private _router: Router, private _helpContentService: HelpContentService,
@@ -501,4 +504,13 @@ export class PagesComponent implements OnInit {
   public capitalizeFirstLetter(str: string) {
     return str.charAt(0).toUpperCase() + str.slice(1);
   }
+  
+  public onSearchClose() {
+    this.selectedKeyword = this.filterForm.get('keyword').value;
+  }
+  
+  public reset() {
+    this.selectedKeyword = null;
+    this.searchInputComponent.reset()
+  }
 }
diff --git a/dashboard/portal/portals.component.html b/dashboard/portal/portals.component.html
index 7e3e2ddf..0232b33d 100644
--- a/dashboard/portal/portals.component.html
+++ b/dashboard/portal/portals.component.html
@@ -14,8 +14,9 @@
         </ul>
       </div>
       <div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
-        <div search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search portal"
+             [selected]="selectedKeyword" (closeEmitter)="onSearchClose()" (resetEmitter)="reset()"
+             [bordered]="true" colorClass="uk-text-secondary" class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
         <div class="show-options">
           <button class="uk-button uk-button-secondary">Bulk Actions</button>
           <div uk-dropdown="mode: click">
diff --git a/dashboard/portal/portals.component.ts b/dashboard/portal/portals.component.ts
index 0e06cebd..e2895f0c 100644
--- a/dashboard/portal/portals.component.ts
+++ b/dashboard/portal/portals.component.ts
@@ -12,6 +12,7 @@ import {CheckPortal, Portal} from "../../utils/entities/adminTool/portal";
 import {PortalUtils} from "./portalHelper";
 import {properties} from "../../../../environments/environment";
 import {AlertModal} from "../../utils/modal/alert";
+import {SearchInputComponent} from "../../sharedComponents/search-input/search-input.component";
 
 declare var UIkit;
 
@@ -44,6 +45,8 @@ export class PortalsComponent implements OnInit {
   public modalErrorMessage = '';
   public portalUtils: PortalUtils = new PortalUtils();
   private index: number;
+  public selectedKeyword: string;
+  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
   
   ngOnInit() {
     this.filterForm = this._fb.group({
@@ -326,4 +329,13 @@ export class PortalsComponent implements OnInit {
     console.log('Server responded: ' + error);
     this.showLoading = false;
   }
+  
+  public onSearchClose() {
+    this.selectedKeyword = this.filterForm.get('keyword').value;
+  }
+  
+  public reset() {
+    this.selectedKeyword = null;
+    this.searchInputComponent.reset()
+  }
 }
diff --git a/sharedComponents/search-input/search-input.component.css b/sharedComponents/search-input/search-input.component.css
index 02c139a1..795f11ba 100644
--- a/sharedComponents/search-input/search-input.component.css
+++ b/sharedComponents/search-input/search-input.component.css
@@ -22,7 +22,7 @@ input::placeholder {
     font-size: 14px;
   }
 
-  .search-mobile {
+  .search-input {
     padding-bottom: 5px;
     border-bottom: 2px solid currentColor;
   }
diff --git a/sharedComponents/search-input/search-input.component.ts b/sharedComponents/search-input/search-input.component.ts
index 79f36c30..f2e63083 100644
--- a/sharedComponents/search-input/search-input.component.ts
+++ b/sharedComponents/search-input/search-input.component.ts
@@ -6,8 +6,8 @@ import {MatAutocompleteTrigger} from '@angular/material/autocomplete';
   selector: '[search-input]',
   styleUrls: ['search-input.component.css'],
   template: `
-    <div class="uk-flex uk-flex-middle uk-flex-center search-mobile" [ngClass]="colorClass">
-      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered">
+    <div class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass">
+      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered && showSearch">
         <form (ngSubmit)="search()">
           <input #input type="text" class="uk-width-1-1"
                  [class.uk-animation-slide-right-medium]="showSearch"
@@ -76,6 +76,8 @@ export class SearchInputComponent {
   searchEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
   @Output()
   resetEmitter: EventEmitter<any> = new EventEmitter<any>();
+  @Output()
+  closeEmitter: EventEmitter<any> = new EventEmitter<any>();
   
   toggle() {
     if(!this.selected) {
@@ -90,6 +92,7 @@ export class SearchInputComponent {
   
   closeSearch() {
     this.showSearch = false;
+    this.closeEmitter.emit();
   }
   
   public search(emit = true) {