Add search input for communites and RIS - development only - work in progress
This commit is contained in:
parent
eaed74b858
commit
fffd6e1afc
|
|
@ -1 +1 @@
|
|||
Subproject commit 1fbb461faa26047e350ab3319684f7ab62154c3e
|
||||
Subproject commit 2eb06717dd681898ef47da0f5da39a9005df3878
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, OnDestroy, OnInit} from '@angular/core';
|
||||
import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
|
||||
import {Session, User} from '../../openaireLibrary/login/utils/helper.class';
|
||||
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
|
||||
import {ActivatedRoute} from '@angular/router';
|
||||
|
|
@ -8,6 +8,10 @@ import {UserManagementService} from '../../openaireLibrary/services/user-managem
|
|||
import {Title} from '@angular/platform-browser';
|
||||
import {properties} from "../../../environments/environment";
|
||||
import {Subscription} from "rxjs";
|
||||
import {SearchInputComponent} from '../../openaireLibrary/sharedComponents/search-input/search-input.component';
|
||||
import {FormBuilder, FormGroup} from '@angular/forms';
|
||||
import {SearchUtilsClass} from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
|
||||
import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';
|
||||
|
||||
type Tab = 'all' | 'communities' | 'ris';
|
||||
|
||||
|
|
@ -23,7 +27,15 @@ type Tab = 'all' | 'communities' | 'ris';
|
|||
<li [class.uk-active]="tab === 'ris'"><a routerLink="./" fragment="ris"><span class="title">Research Initiatives</span></a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div *ngIf="properties.environment == 'development'" 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>
|
||||
<div inner>
|
||||
<div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
|
||||
<loading></loading>
|
||||
|
|
@ -33,7 +45,7 @@ type Tab = 'all' | 'communities' | 'ris';
|
|||
<h6 class="uk-text-bold">Research Communities</h6>
|
||||
<div class="uk-grid uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m uk-grid-match" uk-grid
|
||||
uk-height-match="target: .name;">
|
||||
<ng-template ngFor [ngForOf]="communities" let-community let-i="index">
|
||||
<ng-template ngFor [ngForOf]="filteredCommunities" let-community let-i="index">
|
||||
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
|
@ -47,7 +59,7 @@ type Tab = 'all' | 'communities' | 'ris';
|
|||
<h6 class="uk-text-bold">Research Initiatives</h6>
|
||||
<div class="uk-grid uk-grid-match uk-child-width-1-4@xl uk-child-width-1-3@l uk-child-width-1-2@m" uk-grid
|
||||
uk-height-match="target: .name;">
|
||||
<ng-template ngFor [ngForOf]="ris" let-community let-i="index">
|
||||
<ng-template ngFor [ngForOf]="filteredRis" let-community let-i="index">
|
||||
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
|
@ -81,19 +93,44 @@ type Tab = 'all' | 'communities' | 'ris';
|
|||
export class ManageCommunitiesComponent implements OnInit, OnDestroy {
|
||||
public properties: EnvProperties = properties;
|
||||
public communities: CommunityInfo[] = [];
|
||||
public filteredCommunities: CommunityInfo[] = [];
|
||||
public ris: CommunityInfo[] = [];
|
||||
public filteredRis: CommunityInfo[] = [];
|
||||
public loading: boolean;
|
||||
public user: User;
|
||||
public tab: Tab = "all";
|
||||
private subscriptions: any[] = [];
|
||||
public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
|
||||
public errorCodes: ErrorCodes;
|
||||
|
||||
// Search
|
||||
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
||||
filterForm: FormGroup;
|
||||
// private searchText: RegExp = new RegExp('');
|
||||
private searchText: string = '';
|
||||
public keyword: string = '';
|
||||
|
||||
constructor(private route: ActivatedRoute,
|
||||
private _fb: FormBuilder,
|
||||
private communitiesService: CommunitiesService,
|
||||
private title: Title,
|
||||
private userManagementService: UserManagementService) {
|
||||
this.errorCodes = new ErrorCodes();
|
||||
this.communitySearchUtils.status = this.errorCodes.LOADING;
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
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.loading = true;
|
||||
this.title.setTitle('Administrator Dashboard | Manage Communities');
|
||||
this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
|
||||
|
|
@ -109,18 +146,22 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy {
|
|||
this.subscriptions.push(this.communitiesService.getCommunities(this.properties, this.properties.communityAPI + 'communities').subscribe(
|
||||
communities => {
|
||||
this.communities = [];
|
||||
this.filteredCommunities = [];
|
||||
this.ris = [];
|
||||
console.log(communities);
|
||||
this.filteredRis = [];
|
||||
communities.forEach(community => {
|
||||
if (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isManager('community', community.communityId, this.user)) {
|
||||
if (community.type === 'community') {
|
||||
this.communities.push(community);
|
||||
this.filteredCommunities.push(community);
|
||||
} else {
|
||||
this.ris.push(community);
|
||||
this.filteredRis.push(community);
|
||||
}
|
||||
}
|
||||
})
|
||||
this.loading = false;
|
||||
this.keyword = '';
|
||||
}));
|
||||
}
|
||||
}));
|
||||
|
|
@ -151,5 +192,19 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy {
|
|||
default:
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
public applyFilters() {
|
||||
this.filteredCommunities = this.communities.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText));
|
||||
this.filteredRis = this.ris.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText));
|
||||
}
|
||||
|
||||
public onSearchClose() {
|
||||
this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;
|
||||
}
|
||||
|
||||
public resetInput() {
|
||||
this.communitySearchUtils.keyword = null;
|
||||
this.searchInputComponent.reset()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,10 +12,11 @@ import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module';
|
|||
import {IconsService} from '../../openaireLibrary/utils/icons/icons.service';
|
||||
import {earth, group, lock} from '../../openaireLibrary/utils/icons/icons';
|
||||
import {LogoUrlPipeModule} from "../../openaireLibrary/utils/pipes/logoUrlPipe.module";
|
||||
import {SearchInputModule} from '../../openaireLibrary/sharedComponents/search-input/search-input.module';
|
||||
|
||||
@NgModule({
|
||||
imports: [
|
||||
CommonModule, ManageCommunitiesRoutingModule, RouterModule, PageContentModule, LoadingModule, UrlPrefixModule, IconsModule, LogoUrlPipeModule
|
||||
CommonModule, ManageCommunitiesRoutingModule, RouterModule, PageContentModule, LoadingModule, UrlPrefixModule, IconsModule, LogoUrlPipeModule, SearchInputModule
|
||||
],
|
||||
declarations: [ManageCommunitiesComponent],
|
||||
providers: [LoginGuard, CommunitiesService],
|
||||
|
|
|
|||
Loading…
Reference in New Issue