Add search input for stakeholders and default stakeholders

src/app/manageStakeholders/manageStakeholders.component.html

@@ -7,6 +7,14 @@
       <li [class.uk-active]="tab === 'profiles'"><a routerLink="./" fragment="profiles"><span
           class="title">Profiles</span></a></li>
     </ul>
+		<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 #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
+				placeholder="Search"
+				[selected]="communitySearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"
+				[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>
     <!--<div class="uk-grid uk-margin-medium" uk-grid>
       <div *ngIf="filters" class="uk-width-2-3@m uk-width-1-1 uk-child-width-1-3@m uk-child-width-1-1" uk-grid>
         <div>

src/app/manageStakeholders/manageStakeholders.component.ts

@@ -13,6 +13,8 @@ import {Session} from "../openaireLibrary/login/utils/helper.class";
 import {EditStakeholderComponent} from "../general/edit-stakeholder/edit-stakeholder.component";
 import {properties} from "../../environments/environment";
 import {ActivatedRoute} from "@angular/router";
+import {SearchInputComponent} from "../openaireLibrary/sharedComponents/search-input/search-input.component";
+import {SearchUtilsClass} from '../openaireLibrary/searchPages/searchUtils/searchUtils.class';
 
 type Tab = 'all' | 'templates'| 'profiles';
 
@@ -34,6 +36,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   public stakeholder: Stakeholder;
   public index: number;
   public user = null;
+	public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
   /**
    *  Filtered Stakeholders
    */
@@ -59,6 +62,12 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   @ViewChild('editStakeholderComponent', { static: true }) editStakeholderComponent: EditStakeholderComponent;
   
   tab: Tab = 'all';
+
+	// Search
+	@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
+	filterForm: FormGroup;
+	private searchText: string = '';
+  public keyword: string = '';
   
   constructor(private stakeholderService: StakeholderService,
               private userManagementService: UserManagementService,
@@ -68,6 +77,17 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
   }
   
   ngOnInit(): void {
+		this.communitySearchUtils.keyword = "";
+
+    this.filterForm = this.fb.group({
+      keyword: [''],
+    });
+
+		this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
+      this.searchText = value.toLowerCase();
+			this.applyFilters();
+    }));
+
     this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
       if (this.isTab(fragment)) {
         this.tab = fragment;
@@ -280,5 +300,19 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
       default:
         return false;
     }
+  }
+
+	public applyFilters() {
+    this.displayDefaultStakeholders = this.defaultStakeholders.filter(stakeholder => stakeholder.alias.toLowerCase().includes(this.searchText) || stakeholder.name.toLowerCase().includes(this.searchText) || stakeholder.description?.toLowerCase().includes(this.searchText));
+		this.displayStakeholders = this.stakeholders.filter(stakeholder => stakeholder.alias.toLowerCase().includes(this.searchText) || stakeholder.name.toLowerCase().includes(this.searchText) || stakeholder.description?.toLowerCase().includes(this.searchText));
+  }
+
+	public onSearchClose() {
+    this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;
+  }
+
+  public resetInput() {
+    this.communitySearchUtils.keyword = null;
+    this.searchInputComponent.reset()
   }
 }

src/app/manageStakeholders/manageStakeholders.module.ts

@@ -14,6 +14,7 @@ import {IconsService} from "../openaireLibrary/utils/icons/icons.service";
 import {add, bullet, earth, group, lock, search} from "../openaireLibrary/utils/icons/icons";
 import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
 import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
+import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
 
 @NgModule({
   declarations: [ManageStakeholdersComponent],
@@ -28,7 +29,8 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
     EditStakeholderModule,
     IconsModule,
     PageContentModule,
-    LogoUrlPipeModule
+    LogoUrlPipeModule,
+		SearchInputModule
   ],
   providers: [
     PreviousRouteRecorder,

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 1fbb461faa26047e350ab3319684f7ab62154c3e
+Subproject commit 2eb06717dd681898ef47da0f5da39a9005df3878