D-Net

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

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

import {RemoveProjectsComponent} from './remove-projects.component';

import {AddProjectsComponent} from './add-projects.component';

@Component({

    selector: 'manage-projects',

    template: `

      <div id="manage-projects">

        <div class="menubar ">

          <div class="manage-projects-title uk-article-title">{{pageTitle}}</div>

        </div>

        <div class="uk-card uk-card-default uk-card-body uk-margin-bottom" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; bottom: #bottom">

          {{toggleMessage}}

          <a (click)="updateCommunityProjects()" uk-toggle="target: .toggle-usage">{{toggleLinkMessage}}</a>

          <!-- <button class="uk-button" type="button" uk-toggle="target: .toggle-usage">Add More</button> -->

        </div>

        <div class="toggle-usage">

          <remove-projects (communityProjectsChanged)="communityProjectsChanged($event)"></remove-projects>

        </div>

      <!-- {{communityProjects.length}} -->

        <div class="toggle-usage" hidden>

          <!-- (updateCommunityProjects)="updateCommunityProjects($event)" -->

          <add-projects [(communityProjects)]="communityProjects"></add-projects>

        </div>

      </div>

    `

})

export class ManageProjectsComponent implements OnInit {

  private community: string = '';

  @Input() communityProjects =[];

  @ViewChild (RemoveProjectsComponent) removeProjectsComponent : RemoveProjectsComponent ;

  @ViewChild (AddProjectsComponent) addProjectsComponent : AddProjectsComponent ;

  public warningMessage = "";

  public infoMessage = "";

  public toggle: boolean = true;

  public updateCommunityProjectsOnToggle: boolean = false;

  public pageTitle: string = "Manage the projects of your community";

  public toggleMessage: string = "Do you want to add more projects to your community?";

  public toggleLinkMessage: string = "Find and Add them!";

  ngOnInit() {

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

      if(params['communityId']) {

        this.community = params['communityId'];

      }

    });

  }

  constructor(private route: ActivatedRoute) {}

  public ngOnDestroy() {}

  public updateCommunityProjects() {

    this.toggle = !this.toggle;

    console.info(this.toggle);

    if(this.toggle) {

      this.pageTitle = "Manage the projects of your community";

      this.toggleMessage = "Do you want to add more projects to your community?";

      this.toggleLinkMessage = "Find and Add them!";

      //if(this.updateCommunityProjectsOnToggle) {

        this.removeProjectsComponent._getCommunityProjects();

        this.addProjectsComponent.undo = {};

      //}

    } else {

      this.updateCommunityProjectsOnToggle = false;

      this.pageTitle = "Add more projects to your community";

      this.toggleMessage = "Do you want to manage projects of your community?";

      this.toggleLinkMessage = "Manage them!";

    }

  }

  public communityProjectsChanged($event) {

    this.communityProjects = $event.value;

  }

  // public updateCommunityProjects($event) {

  //   this.updateCommunityProjectsOnToggle = true;

  // }

}