D-Net

import { Component, ViewChild, OnInit, ViewEncapsulation, Input } from '@angular/core';

import { ActivatedRoute } from "@angular/router";

import {RemoveContentProvidersComponent} from './remove-content-providers.component';

import {AddContentProvidersComponent} from './add-content-providers.component';

@Component({

    selector: 'manage-content-providers',

    template: `

      <div id="manage-content-providers">

        <div class="menubar uk-margin-bottom ">

          <a *ngIf="!toggle" (click)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage" class="uk-button uk-button-primary uk-float-right">{{toggleLinkMessage}}</a>

          <div class="manage-content-providers-title uk-text-large">{{pageTitle}}</div>

        </div>

        <div class="toggle-usage">

          <remove-content-providers (communityContentProvidersChanged)="communityContentProvidersChanged($event)"></remove-content-providers>

          <fab (clicked)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage"></fab>

        </div>

        <div class="toggle-usage" hidden>

          <add-content-providers [(communityContentProviders)]="communityContentProviders"></add-content-providers>

        </div>

      </div>

    `

})

export class ManageContentProvidersComponent implements OnInit {

  private community: string = '';

  @Input() communityContentProviders =[];

  @ViewChild (RemoveContentProvidersComponent) removeContentProvidersComponent : RemoveContentProvidersComponent ;

  @ViewChild (AddContentProvidersComponent) addContentProvidersComponent : AddContentProvidersComponent ;

  public warningMessage = "";

  public infoMessage = "";

  public toggle: boolean = true;

  public updateCommunityContentProvidersOnToggle: boolean = false;

  public pageTitle: string = "Manage content providers";

  public toggleLinkMessage: string = "Manage content providers";

  ngOnInit() {

    this.route.queryParams.subscribe(params => {

      if(params['communityId']) {

        this.community = params['communityId'];

      }

    });

  }

  constructor(private route: ActivatedRoute) {}

  public ngOnDestroy() {}

  public updateCommunityContentProviders() {

    this.toggle = !this.toggle;

    if(this.toggle) {

      this.pageTitle = "Manage content providers";

      //this.toggleLinkMessage = "Missing content providers?";

      this.removeContentProvidersComponent._getCommunityContentProviders();

      this.addContentProvidersComponent.undo = {};

    } else {

      this.updateCommunityContentProvidersOnToggle = false;

      this.pageTitle = "Search content providers";

      //this.toggleLinkMessage = "Manage content providers";

    }

  }

  public communityContentProvidersChanged($event) {

    this.communityContentProviders = $event.value;

  }

}