Project

General

Profile

1
import {Component, OnDestroy, OnInit} from '@angular/core';
2
import {Session, User} from '../../openaireLibrary/login/utils/helper.class';
3
import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
4
import {ActivatedRoute} from '@angular/router';
5
import {CommunitiesService} from '../../openaireLibrary/connect/communities/communities.service';
6
import {CommunityInfo} from '../../openaireLibrary/connect/community/communityInfo';
7
import {UserManagementService} from '../../openaireLibrary/services/user-management.service';
8
import {Title} from '@angular/platform-browser';
9
import {properties} from "../../../environments/environment";
10
import {Subscription} from "rxjs";
11

    
12
type Tab = 'all' | 'communities' | 'ris';
13

    
14
@Component({
15
  selector: 'manage-communities',
16
  template: `
17
    <div page-content [id]="tab">
18
      <div header>
19
        <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
20
          <li [class.uk-active]="tab === 'all'"><a routerLink="./"><span class="title">All</span></a></li>
21
          <li [class.uk-active]="tab === 'communities'"><a routerLink="./" fragment="communities"><span class="title">Research Communities</span></a>
22
          </li>
23
          <li [class.uk-active]="tab === 'ris'"><a routerLink="./" fragment="ris"><span class="title">Research Initiatives</span></a>
24
          </li>
25
        </ul>
26
      </div>
27
      <div inner>
28
        <div *ngIf="loading" class="uk-margin-medium-top uk-padding-large">
29
          <loading></loading>
30
        </div>
31
        <div *ngIf="!loading">
32
          <div *ngIf="tab != 'ris' && communities.length > 0" class="uk-margin-medium-top">
33
            <h6 class="uk-text-bold">Research Communities</h6>
34
            <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
35
                 uk-height-match="target: .name;">
36
              <ng-template ngFor [ngForOf]="communities" let-community let-i="index">
37
                <ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
38
              </ng-template>
39
            </div>
40
          </div>
41
          <div *ngIf="noResults" class="message">
42
            <h4 class="uk-text-center">
43
              No communities to manage yet
44
            </h4>
45
          </div>
46
          <div *ngIf="tab != 'communities' && ris.length > 0" [class.uk-margin-large-top]="tab === 'all'">
47
            <h6 class="uk-text-bold">Research Initiatives</h6>
48
            <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
49
                 uk-height-match="target: .name;">
50
              <ng-template ngFor [ngForOf]="ris" let-community let-i="index">
51
                <ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
52
              </ng-template>
53
            </div>
54
          </div>
55
        </div>
56
      </div>
57
    </div>
58
    <ng-template #communityBox let-community="community">
59
      <div *ngIf="community">
60
        <div class="uk-card uk-card-default uk-card-body uk-position-relative">
61
          <a class="uk-display-block uk-text-center uk-card-title" [routerLink]="community.communityId">
62
            <div class="uk-position-top-left uk-margin-small-left uk-margin-small-top clickable visibility">
63
              <span class=" color">
64
                <icon [name]="community.status == 'all'?'earth':(community.status == 'manager'?'group':'lock')"></icon>
65
              </span>
66
              
67
            </div>
68
            <div class="name uk-width-2-3@l">
69
              {{community.shortTitle}}
70
            </div>
71
            <div *ngIf="community.logoUrl" class="logo uk-margin-top uk-margin-bottom">
72
              <img [src]="community.logoUrl | urlPrefix">
73
            </div>
74
          </a>
75
        </div>
76
      </div>
77
    </ng-template>
78
  `,
79
  styleUrls: ['manage-communities.component.css']
80
})
81
export class ManageCommunitiesComponent implements OnInit, OnDestroy {
82
  public properties: EnvProperties = properties;
83
  public communities: CommunityInfo[] = [];
84
  public ris: CommunityInfo[] = [];
85
  public loading: boolean;
86
  public user: User;
87
  public tab: Tab = "all";
88
  private subscriptions: any[] = [];
89
  
90
  constructor(private  route: ActivatedRoute,
91
              private communitiesService: CommunitiesService,
92
              private title: Title,
93
              private userManagementService: UserManagementService) {
94
  }
95
  
96
  ngOnInit() {
97
    this.loading = true;
98
    this.title.setTitle('Administrator Dashboard | Manage Communities');
99
    this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
100
      if (this.isTab(fragment)) {
101
        this.tab = fragment;
102
      } else {
103
        this.tab = 'all';
104
      }
105
    }));
106
    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
107
      this.user = user;
108
      if (this.user) {
109
        this.subscriptions.push(this.communitiesService.getCommunities(this.properties, this.properties.communityAPI + 'communities').subscribe(
110
          communities => {
111
            this.communities = [];
112
            this.ris = [];
113
            communities.forEach(community => {
114
              if (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isManager('community', community.communityId, this.user)) {
115
                if (community.type === 'community') {
116
                  this.communities.push(community);
117
                } else {
118
                  this.ris.push(community);
119
                }
120
              }
121
            })
122
            this.loading = false;
123
          }));
124
      }
125
    }));
126
  }
127
  
128
  ngOnDestroy() {
129
    this.subscriptions.forEach(subscription => {
130
      if (subscription instanceof Subscription) {
131
        subscription.unsubscribe();
132
      }
133
    });
134
  }
135
  
136
  public get noResults(): boolean {
137
    return (this.tab === "all" && this.communities.length === 0 && this.ris.length === 0) ||
138
      (this.tab === "communities" && this.communities.length === 0) ||
139
      (this.tab === "ris" && this.ris.length === 0);
140
  }
141
  
142
  private isTab(tab: Tab): boolean {
143
    switch (tab) {
144
      case "all":
145
        return true;
146
      case "communities":
147
        return true;
148
      case "ris":
149
        return true;
150
      default:
151
        return false;
152
    }
153
  }
154
}
(3-3/4)