connect-admin/src/app/pages/manage-communities/manage-communities.component.ts

import {Component, OnDestroy, OnInit} 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';
import {CommunitiesService} from '../../openaireLibrary/connect/communities/communities.service';
import {CommunityInfo} from '../../openaireLibrary/connect/community/communityInfo';
import {UserManagementService} from '../../openaireLibrary/services/user-management.service';
import {Title} from '@angular/platform-browser';
import {properties} from "../../../environments/environment";
import {Subscription} from "rxjs";

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

@Component({
  selector: 'manage-communities',
  template: `
    <div page-content [id]="tab">
      <div header>
        <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" 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>
      <div inner>
        <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]="communities" let-community let-i="index">
                <ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
              </ng-template>
            </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]="ris" let-community let-i="index">
                <ng-container *ngTemplateOutlet="communityBox; context: {community:community}"></ng-container>
              </ng-template>
            </div>
          </div>
        </div>
      </div>
    </div>
    <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>
            <div class="name uk-width-2-3@l">
              {{community.shortTitle}}
            </div>
            <div *ngIf="community.logoUrl" class="logo uk-margin-top uk-margin-bottom">
              <img [src]="community | logoUrl | urlPrefix">
            </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 ris: CommunityInfo[] = [];
  public loading: boolean;
  public user: User;
  public tab: Tab = "all";
  private subscriptions: any[] = [];
  
  constructor(private  route: ActivatedRoute,
              private communitiesService: CommunitiesService,
              private title: Title,
              private userManagementService: UserManagementService) {
  }
  
  ngOnInit() {
    this.loading = true;
    this.title.setTitle('Administrator Dashboard | Manage Communities');
    this.subscriptions.push(this.route.fragment.subscribe((fragment: Tab) => {
      if (this.isTab(fragment)) {
        this.tab = fragment;
      } else {
        this.tab = 'all';
      }
    }));
    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
      this.user = user;
      if (this.user) {
        this.subscriptions.push(this.communitiesService.getCommunities(this.properties, this.properties.communityAPI + 'communities').subscribe(
          communities => {
            this.communities = [];
            this.ris = [];
            console.log(communities);
            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);
                } else {
                  this.ris.push(community);
                }
              }
            })
            this.loading = false;
          }));
      }
    }));
  }
  
  ngOnDestroy() {
    this.subscriptions.forEach(subscription => {
      if (subscription instanceof Subscription) {
        subscription.unsubscribe();
      }
    });
  }
  
  public get noResults(): boolean {
    return (this.tab === "all" && this.communities.length === 0 && this.ris.length === 0) ||
      (this.tab === "communities" && this.communities.length === 0) ||
      (this.tab === "ris" && this.ris.length === 0);
  }
  
  private isTab(tab: Tab): boolean {
    switch (tab) {
      case "all":
        return true;
      case "communities":
        return true;
      case "ris":
        return true;
      default:
        return false;
    }
  }
}