D-Net

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 = [];

            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;

    }

  }

}