|
|
|
|
@ -18,57 +18,63 @@ type Tab = 'all' | 'communities' | 'ris';
|
|
|
|
|
@Component({
|
|
|
|
|
selector: 'manage-communities',
|
|
|
|
|
template: `
|
|
|
|
|
<div page-content [id]="tab">
|
|
|
|
|
<div page-content [id]="tab" (stickyEmitter)="stickyPageHeader = $event">
|
|
|
|
|
<div header>
|
|
|
|
|
<ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
|
|
|
|
|
<div class="uk-flex uk-flex-middle uk-margin-top info" [class.uk-active]="stickyPageHeader">
|
|
|
|
|
<div>
|
|
|
|
|
<div class="uk-margin-remove uk-text-background uk-text-bold uk-h6">
|
|
|
|
|
Admin Dashboard - Manage Research Community Dasbhoards
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ul class="uk-tab uk-margin-top" uk-tab>
|
|
|
|
|
<li [class.uk-active]="tab === 'all'"><a routerLink="./"><span class="title">All</span></a></li>
|
|
|
|
|
<li [class.uk-active]="tab === 'communities'"><a routerLink="./" fragment="communities"><span class="title">Research Communities</span></a>
|
|
|
|
|
</li>
|
|
|
|
|
<li [class.uk-active]="tab === 'ris'"><a routerLink="./" fragment="ris"><span class="title">Research Initiatives</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>
|
|
|
|
|
</div>
|
|
|
|
|
<div inner>
|
|
|
|
|
<div class="uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-margin-top">
|
|
|
|
|
<div search-input [searchControl]="filterForm.get('keyword')" [expandable]="true"
|
|
|
|
|
placeholder="Search Communities" searchInputClass="outer"
|
|
|
|
|
class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1 uk-flex uk-flex-right"></div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
|
|
|
|
|
<loading></loading>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="!loading">
|
|
|
|
|
<div *ngIf="tab != 'ris' && communities.length > 0">
|
|
|
|
|
<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]="filteredCommunities" let-community let-i="index">
|
|
|
|
|
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
|
|
|
|
|
</ng-template>
|
|
|
|
|
<div *ngIf="!loading" uk-height-match="target: .titleContainer; row: false">
|
|
|
|
|
<div uk-height-match="target: .logoContainer; row: false">
|
|
|
|
|
<div *ngIf="tab != 'ris' && communities.length > 0" class="uk-section">
|
|
|
|
|
<h4>Research Communities</h4>
|
|
|
|
|
<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>
|
|
|
|
|
<ng-template ngFor [ngForOf]="filteredCommunities" let-community let-i="index">
|
|
|
|
|
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="filteredCommunities.length == 0"
|
|
|
|
|
class="uk-card uk-card-default uk-card-no-height uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
|
|
|
|
No communities found
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="filteredCommunities.length == 0" class="uk-card uk-card-default uk-card-no-height uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
|
|
|
|
No communities found
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="noResults" class="message">
|
|
|
|
|
<h4 class="uk-text-center">
|
|
|
|
|
No communities to manage yet
|
|
|
|
|
</h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="tab != 'communities' && ris.length > 0" [class.uk-margin-large-top]="tab === 'all'">
|
|
|
|
|
<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]="filteredRis" let-community let-i="index">
|
|
|
|
|
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
|
|
|
|
|
</ng-template>
|
|
|
|
|
<div *ngIf="noResults" class="message">
|
|
|
|
|
<h4 class="uk-text-center">
|
|
|
|
|
No communities to manage yet
|
|
|
|
|
</h4>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="tab != 'communities' && ris.length > 0" [class.uk-margin-large-top]="tab === 'all'" class="uk-section">
|
|
|
|
|
<h4>Research Initiatives</h4>
|
|
|
|
|
<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>
|
|
|
|
|
<ng-template ngFor [ngForOf]="filteredRis" let-community let-i="index">
|
|
|
|
|
<ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
|
|
|
|
|
</ng-template>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="filteredRis.length == 0"
|
|
|
|
|
class="uk-card uk-card-default uk-card-no-height uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
|
|
|
|
No initiatives found
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="filteredRis.length == 0" class="uk-card uk-card-default uk-card-no-height uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
|
|
|
|
|
No initiatives found
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
@ -76,66 +82,70 @@ type Tab = 'all' | 'communities' | 'ris';
|
|
|
|
|
<ng-template #communityBox let-community="community">
|
|
|
|
|
<div *ngIf="community">
|
|
|
|
|
<div class="uk-card uk-card-default uk-card-body uk-position-relative">
|
|
|
|
|
<a class="uk-display-block uk-text-center uk-card-title" [routerLink]="community.communityId">
|
|
|
|
|
<div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
|
|
|
|
|
<span class=" color">
|
|
|
|
|
<icon [name]="community.status == 'all'?'earth':(community.status == 'manager'?'group':'lock')"></icon>
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
|
|
<div class="uk-position-top-right uk-margin-small-right uk-margin-small-top">
|
|
|
|
|
<div class="uk-flex uk-flex-middle">
|
|
|
|
|
<icon [flex]="true" [name]="community.status == 'all'?'earth':(community.status == 'manager'?'restricted':'incognito')" ratio="0.6"></icon>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="name uk-width-2-3@l">
|
|
|
|
|
{{community.shortTitle}}
|
|
|
|
|
</div>
|
|
|
|
|
<a class="uk-display-block uk-text-center uk-link-reset" [routerLink]="community.communityId">
|
|
|
|
|
<div class="titleContainer uk-h6 uk-margin-remove-bottom uk-margin-top multi-line-ellipsis lines-2">
|
|
|
|
|
<p *ngIf="community.shortTitle" class="uk-margin-remove">
|
|
|
|
|
{{community.shortTitle}}
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div *ngIf="community.logoUrl" class="logo uk-margin-top uk-margin-bottom">
|
|
|
|
|
<img [src]="community | logoUrl | urlPrefix">
|
|
|
|
|
<div class="logoContainer uk-margin-top uk-flex uk-flex-column uk-flex-center uk-flex-middle">
|
|
|
|
|
<img *ngIf="community.logoUrl; else elseBlock" [src]="community | logoUrl" class="uk-blend-multiply"
|
|
|
|
|
style="max-height: 80px;">
|
|
|
|
|
<ng-template #elseBlock>
|
|
|
|
|
<img src="assets/common-assets/placeholder.png" alt="OpenAIRE placeholder logo"
|
|
|
|
|
class="uk-blend-multiply" style="max-height: 80px;">
|
|
|
|
|
</ng-template>
|
|
|
|
|
</div>
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</ng-template>
|
|
|
|
|
`,
|
|
|
|
|
styleUrls: ['manage-communities.component.css']
|
|
|
|
|
`
|
|
|
|
|
})
|
|
|
|
|
export class ManageCommunitiesComponent implements OnInit, OnDestroy {
|
|
|
|
|
public properties: EnvProperties = properties;
|
|
|
|
|
public communities: CommunityInfo[] = [];
|
|
|
|
|
public filteredCommunities: CommunityInfo[] = [];
|
|
|
|
|
public filteredCommunities: CommunityInfo[] = [];
|
|
|
|
|
public ris: CommunityInfo[] = [];
|
|
|
|
|
public filteredRis: CommunityInfo[] = [];
|
|
|
|
|
public filteredRis: CommunityInfo[] = [];
|
|
|
|
|
public loading: boolean;
|
|
|
|
|
public user: User;
|
|
|
|
|
public stickyPageHeader: boolean = false;
|
|
|
|
|
public tab: Tab = "all";
|
|
|
|
|
private subscriptions: any[] = [];
|
|
|
|
|
public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
|
|
|
|
|
public errorCodes: ErrorCodes;
|
|
|
|
|
|
|
|
|
|
// Search
|
|
|
|
|
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
|
|
|
|
filterForm: FormGroup;
|
|
|
|
|
private searchText: string = '';
|
|
|
|
|
public keyword: string = '';
|
|
|
|
|
public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
|
|
|
|
|
public errorCodes: ErrorCodes;
|
|
|
|
|
// Search
|
|
|
|
|
@ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
|
|
|
|
|
filterForm: FormGroup;
|
|
|
|
|
private searchText: string = '';
|
|
|
|
|
|
|
|
|
|
constructor(private route: ActivatedRoute,
|
|
|
|
|
private _fb: FormBuilder,
|
|
|
|
|
constructor(private route: ActivatedRoute,
|
|
|
|
|
private _fb: FormBuilder,
|
|
|
|
|
private communitiesService: CommunitiesService,
|
|
|
|
|
private title: Title,
|
|
|
|
|
private userManagementService: UserManagementService) {
|
|
|
|
|
this.errorCodes = new ErrorCodes();
|
|
|
|
|
this.errorCodes = new ErrorCodes();
|
|
|
|
|
this.communitySearchUtils.status = this.errorCodes.LOADING;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
this.communitySearchUtils.keyword = "";
|
|
|
|
|
|
|
|
|
|
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.filterForm.get('keyword').valueChanges.subscribe(value => {
|
|
|
|
|
this.searchText = value ? value.toLowerCase() : '';
|
|
|
|
|
this.applyFilters();
|
|
|
|
|
}));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
this.loading = true;
|
|
|
|
|
this.title.setTitle('Administrator Dashboard | Manage Communities');
|
|
|
|
|
this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
|
|
|
|
|
@ -151,22 +161,21 @@ 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.filteredCommunities = [];
|
|
|
|
|
this.ris = [];
|
|
|
|
|
this.filteredRis = [];
|
|
|
|
|
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);
|
|
|
|
|
this.filteredCommunities.push(community);
|
|
|
|
|
} else {
|
|
|
|
|
this.ris.push(community);
|
|
|
|
|
this.filteredRis.push(community);
|
|
|
|
|
this.filteredRis.push(community);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
this.loading = false;
|
|
|
|
|
this.keyword = '';
|
|
|
|
|
}));
|
|
|
|
|
}
|
|
|
|
|
}));
|
|
|
|
|
@ -198,16 +207,16 @@ export class ManageCommunitiesComponent implements OnInit, OnDestroy {
|
|
|
|
|
return false;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public applyFilters() {
|
|
|
|
|
|
|
|
|
|
public applyFilters() {
|
|
|
|
|
this.filteredCommunities = this.communities.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText) || community.communityId.toLowerCase().includes(this.searchText));
|
|
|
|
|
this.filteredRis = this.ris.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText) || community.communityId.toLowerCase().includes(this.searchText));
|
|
|
|
|
this.filteredRis = this.ris.filter(community => community.shortTitle.toLowerCase().includes(this.searchText) || community.title.toLowerCase().includes(this.searchText) || community.communityId.toLowerCase().includes(this.searchText));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
public onSearchClose() {
|
|
|
|
|
|
|
|
|
|
public onSearchClose() {
|
|
|
|
|
this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
public resetInput() {
|
|
|
|
|
this.communitySearchUtils.keyword = null;
|
|
|
|
|
this.searchInputComponent.reset()
|
|
|
|
|
|
