[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

@@ -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"
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search class"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+             [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">

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()
+  }
 }

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"
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search entity"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+             [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">

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()
+  }
 }

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"
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search page"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+             [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">

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()
+  }
 }

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"
+        <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false" placeholder="Search portal"
-             [bordered]="true" colorClass="uk-text-secondary"></div>
+             [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">

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()
+  }
 }

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;
   }

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 class="uk-flex uk-flex-middle uk-flex-center search-input" [ngClass]="colorClass">
-      <div *ngIf="control" class="uk-width-expand" [class.bordered]="bordered">
+      <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) {