MaDgIK
/
connect-admin
13
0
Fork 0
Code Issues Pull Requests Projects Releases 9 Wiki Activity

Add search input for communites and RIS - development only - work in progress

This commit is contained in:
Alex Martzios 2021-11-29 18:02:01 +02:00
parent eaed74b858
commit fffd6e1afc
3 changed files with 63 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/openaireLibrary

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

63
src/app/pages/manage-communities/manage-communities.component.ts
View File

@ -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,6 +27,14 @@ 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 *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">
@ -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()
}
}

3
src/app/pages/manage-communities/manage-communities.module.ts
View File

@ -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],