Add search input for stakeholders and default stakeholders
This commit is contained in:
parent
f8290a54b8
commit
e2e43c6825
|
@ -7,6 +7,14 @@
|
||||||
<li [class.uk-active]="tab === 'profiles'"><a routerLink="./" fragment="profiles"><span
|
<li [class.uk-active]="tab === 'profiles'"><a routerLink="./" fragment="profiles"><span
|
||||||
class="title">Profiles</span></a></li>
|
class="title">Profiles</span></a></li>
|
||||||
</ul>
|
</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 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 *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>
|
<div>
|
||||||
|
|
|
@ -13,6 +13,8 @@ import {Session} from "../openaireLibrary/login/utils/helper.class";
|
||||||
import {EditStakeholderComponent} from "../general/edit-stakeholder/edit-stakeholder.component";
|
import {EditStakeholderComponent} from "../general/edit-stakeholder/edit-stakeholder.component";
|
||||||
import {properties} from "../../environments/environment";
|
import {properties} from "../../environments/environment";
|
||||||
import {ActivatedRoute} from "@angular/router";
|
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';
|
type Tab = 'all' | 'templates'| 'profiles';
|
||||||
|
|
||||||
|
@ -34,6 +36,7 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
public stakeholder: Stakeholder;
|
public stakeholder: Stakeholder;
|
||||||
public index: number;
|
public index: number;
|
||||||
public user = null;
|
public user = null;
|
||||||
|
public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
|
||||||
/**
|
/**
|
||||||
* Filtered Stakeholders
|
* Filtered Stakeholders
|
||||||
*/
|
*/
|
||||||
|
@ -59,6 +62,12 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
@ViewChild('editStakeholderComponent', { static: true }) editStakeholderComponent: EditStakeholderComponent;
|
@ViewChild('editStakeholderComponent', { static: true }) editStakeholderComponent: EditStakeholderComponent;
|
||||||
|
|
||||||
tab: Tab = 'all';
|
tab: Tab = 'all';
|
||||||
|
|
||||||
|
// Search
|
||||||
|
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
||||||
|
filterForm: FormGroup;
|
||||||
|
private searchText: string = '';
|
||||||
|
public keyword: string = '';
|
||||||
|
|
||||||
constructor(private stakeholderService: StakeholderService,
|
constructor(private stakeholderService: StakeholderService,
|
||||||
private userManagementService: UserManagementService,
|
private userManagementService: UserManagementService,
|
||||||
|
@ -68,6 +77,17 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
}
|
}
|
||||||
|
|
||||||
ngOnInit(): void {
|
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) => {
|
this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
|
||||||
if (this.isTab(fragment)) {
|
if (this.isTab(fragment)) {
|
||||||
this.tab = fragment;
|
this.tab = fragment;
|
||||||
|
@ -280,5 +300,19 @@ export class ManageStakeholdersComponent implements OnInit, OnDestroy {
|
||||||
default:
|
default:
|
||||||
return false;
|
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()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 {add, bullet, earth, group, lock, search} from "../openaireLibrary/utils/icons/icons";
|
||||||
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
|
import {PageContentModule} from "../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
|
||||||
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
|
import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.module";
|
||||||
|
import {SearchInputModule} from "../openaireLibrary/sharedComponents/search-input/search-input.module";
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
declarations: [ManageStakeholdersComponent],
|
declarations: [ManageStakeholdersComponent],
|
||||||
|
@ -28,7 +29,8 @@ import {LogoUrlPipeModule} from "../openaireLibrary/utils/pipes/logoUrlPipe.modu
|
||||||
EditStakeholderModule,
|
EditStakeholderModule,
|
||||||
IconsModule,
|
IconsModule,
|
||||||
PageContentModule,
|
PageContentModule,
|
||||||
LogoUrlPipeModule
|
LogoUrlPipeModule,
|
||||||
|
SearchInputModule
|
||||||
],
|
],
|
||||||
providers: [
|
providers: [
|
||||||
PreviousRouteRecorder,
|
PreviousRouteRecorder,
|
||||||
|
|
|
@ -1 +1 @@
|
||||||
Subproject commit 1fbb461faa26047e350ab3319684f7ab62154c3e
|
Subproject commit 2eb06717dd681898ef47da0f5da39a9005df3878
|
Loading…
Reference in New Issue