D-Net

import {Injectable} from '@angular/core';

import {Http, Response, Headers, RequestOptions} from '@angular/http';

import {Observable}     from 'rxjs/Observable';

import{EnvProperties} from '../openaireLibrary/utils/properties/env-properties';

import { HttpErrorResponse, HttpResponse } from '@angular/common/http';

import { ErrorObservable } from 'rxjs/observable/ErrorObservable';

import { catchError } from 'rxjs/operators';

@Injectable()

export class  ManageZenodoCommunitiesService {

  constructor(private http: Http ) {}

  removeZCommunity (properties:EnvProperties,communityId: string,id: string):any {

    let headers = new Headers({'Content-Type': 'application/json', 'accept': 'application/json'});

    let options = new RequestOptions({headers: headers, body: id});

    let url = properties.communityAPI+communityId+"/zenodocommunities";

    console.info(url);

    return this.http.delete(url, options)

  }

  addZCommunity(properties:EnvProperties, communityId: string,zenodoid: string) {

      let headers = new Headers({'Content-Type': 'application/json'});

      let options = new RequestOptions({headers: headers});

      let url = properties.communityAPI+communityId+"/zenodocommunities";

      console.info(url);

      var zCommunity: any = {

        "communityId": communityId,

        "zenodoid": zenodoid

      };

       console.info(zCommunity);

      return this.http.post(url, JSON.stringify(zCommunity), options)

                      .map(res => <any> res.json())

    }

}

              <li>

                  <a routerLink="/manage-subscribers" routerLinkActive="active" [queryParams]="{communityId: this.communityId}">

                      <span>Manage subscribers</span>

                  </a>

              </li>

              <li>

                  <a routerLink="/manage-user-notifications" routerLinkActive="active" [queryParams]="{communityId: this.communityId}">

                      <span>Manage user notifications (temporary position)</span>

                  </a>

              </li> 

              <li>

import {ZenodoCommunitiesModule} from './pages/zenodo-communities/zenodo-communities.module';

        ZenodoCommunitiesModule,

import { ZenodoCommunitiesComponent } from "./pages/zenodo-communities/zenodo-communities.component";

      component: ZenodoCommunitiesComponent,

import {NgModule}                   from '@angular/core';

import {CommonModule}               from '@angular/common';

import {FormsModule}                from '@angular/forms';

import {RouterModule}               from '@angular/router';

import {PagingModule}               from '../../openaireLibrary/utils/paging.module';

import {ManageZenodoCommunitiesComponent} from './manage-zenodo-communities.component';

import {AddZenodoCommunitiesComponent} from './add-zenodo-communities.component';

import {ZenodoCommunitiesComponent} from './zenodo-communities.component';

import {FABModule} from '../../utils/fabModule.module';

import { DataTablesModule } from 'angular-datatables';

import { SearchZenodoCommunitiesServiceModule } from '../../openaireLibrary/connect/zenodoCommunities/searchZenodoCommunitiesService.module';

import{ManageZenodoCommunitiesService} from '../../services/manageZenodoCommunities.service';

import{ZenodoCommunitiesServiceModule} from '../../openaireLibrary/connect/zenodoCommunities/zenodo-communitiesService.module';

import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';

@NgModule({

  imports:[

    CommonModule, FormsModule, RouterModule,

    PagingModule, FABModule, DataTablesModule, SearchZenodoCommunitiesServiceModule, ZenodoCommunitiesServiceModule,

    AlertModalModule

  ],

  declarations:[

    ManageZenodoCommunitiesComponent, ZenodoCommunitiesComponent, AddZenodoCommunitiesComponent

   ],

  providers:[

     ManageZenodoCommunitiesService

   ],

  exports: [

    ZenodoCommunitiesComponent

   ]

})

export class ZenodoCommunitiesModule { }

<div id="manage-zenodo-communities" class="uk-padding">

    <form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">

      <div>

        <input type="text" class="uk-input  uk-width-1-2" placeholder="Search zenodo communities" aria-describedby="sizing-addon2"  [(ngModel)]="zenodoCommunitySearchUtils.keyword" name="keyword" >

        <button (click)="goTo(1)"  type="submit" class=" uk-button">

           <span class="uk-icon">

           <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>

           </span>Search

        </button>

      </div>

    </form>

    <div *ngIf="zenodoCommunitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

          {{zenodoCommunitySearchUtils.totalResults | number}} zenodo communities, page {{zenodoCommunitySearchUtils.page | number}} of {{(totalPages()) | number}}

        </span>

        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

          <paging-no-load [currentPage]="zenodoCommunitySearchUtils.page" [totalResults]="zenodoCommunitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value)"></paging-no-load>

        </span>

      </div>

    </div>

    <ul  class="uk-list uk-list-divider  uk-margin">

       <li *ngFor="let item of zenodoCommunities;" class="uk-animation-fade uk-margin-top">

         <div class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>

            <div class="uk-width-auto">

              <a target="_blank" [href]="item.link">

                <img *ngIf="item.logoUrl" class="uk-comment-avatar" src="{{item.logoUrl}}" width="80" height="80" alt="">

              </a>

            </div>

            <div class="uk-width-expand">

                <h4 class="uk-comment-title uk-margin-remove uk-grid">

                  <a class="custom-external uk-width-expand" target="_blank" href="{{item.link}}">

                    <span *ngIf="item.title">{{item.title}}</span>

                    <span *ngIf="!item.title">[no name available]</span>

                  </a>

                <span *ngIf=" masterCommunity && item.id==masterCommunity.id" class="uk-label uk-label-warning">Master zenodo community</span>

                <span class="uk-width-1-6 uk-text-center">

                  <a *ngIf="!inCommunity(item) && !(masterCommunity && item.id==masterCommunity.id)" (click)="addCommunity(item)" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add"></a>

                  <span *ngIf="inCommunity(item)" class="uk-label uk-label-success">Added</span>

                  <!-- <a *ngIf="inCommunity(item)"  (click)="removeCommunity(item)" class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Undo"></a> -->

               </span>

              </h4>

                <div class="uk-comment-meta ">

                     last update: {{item.date | date:'yyyy/MM/dd'}}

                </div>

            </div>

        </div>

        <div class="uk-comment-body uk-text-meta">

            <p *ngIf="item.description">{{item.description}}</p>

         </div>

      </li>

    </ul>

    <div *ngIf="zenodoCommunitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

      <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

        <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

          {{zenodoCommunitySearchUtils.totalResults | number}} zenodo communities, page {{zenodoCommunitySearchUtils.page | number}} of {{(totalPages()) | number}}

        </span>

        <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

          <paging-no-load [currentPage]="zenodoCommunitySearchUtils.page" [totalResults]="zenodoCommunitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value)"></paging-no-load>

        </span>

      </div>

    </div>

</div>

<div id="manage-zenodo-communities" class="uk-padding">

        <button (click)="goTo(1)"  type="submit" class=" uk-button">

    <div *ngIf="masterCommunity" class="uk-animation-fade uk-margin-top uk-background-muted uk-padding-small">

      <div class="uk-text-large"  >Master Zenodo community</div>

      <div class="uk-comment-header uk-grid-medium uk-flex-middle" uk-grid>

         <div class="uk-width-auto">

           <a target="_blank" [href]="masterCommunity.link">

             <img *ngIf="masterCommunity.logoUrl" class="uk-comment-avatar" src="{{masterCommunity.logoUrl}}" width="80" height="80" alt="">

           </a>

         </div>

         <div class="uk-width-expand">

             <h4 class="uk-comment-title uk-margin-remove"><a class="custom-external" target="_blank" href="{{masterCommunity.link}}">

               <span *ngIf="masterCommunity.title">{{masterCommunity.title}}</span>

               <span *ngIf="!masterCommunity.title">[no name available]</span>

             </a>

             <!-- <span *ngIf=" masterCommunity && item.id==masterCommunity.id" class="uk-label uk-label-warning">Master zenodo community</span> -->

             <!-- <span class="uk-width-1-6 uk-text-center">

               <a *ngIf="!inCommunity(item) && !(masterCommunity && item.id==masterCommunity.id)" (click)="addCommunity(item)" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add"></a>

               <span *ngIf="inCommunity(item)" class="uk-label uk-label-success">Added</span>

               <a *ngIf="inCommunity(item)"  (click)="removeCommunity(item.id)" class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Undo"></a>

            </span> -->

           </h4>

             <div class="uk-comment-meta ">

                  last update: {{masterCommunity.date | date:'yyyy/MM/dd'}}

             </div>

         </div>

     </div>

     <div class="uk-comment-body uk-text-meta">

         <p *ngIf="masterCommunity.description">{{masterCommunity.description}}</p>

      </div>

    </div>

          {{zenodoCommunitySearchUtils.totalResults | number}} projects, page {{zenodoCommunitySearchUtils.page | number}} of {{(totalPages()) | number}}

          <paging-no-load [currentPage]="zenodoCommunitySearchUtils.page" [totalResults]="zenodoCommunitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>

    <div class="custom-dataTable-content">

      <div class="uk-overflow-container">

        <table datatable class="uk-table uk-table-striped divider-table" [dtOptions]="dtOptions" id="dpTable"  [dtTrigger]="dtTrigger" dtInstance="dtInstanceCallback">

          <thead>

            <tr>

              <th class="uk-text-center">Name</th>

              <th class="uk-text-center">Last update on</th>

              <!-- <th class="uk-text-center">Funder</th> -->

              <th class="uk-text-center">Action</th>

            </tr>

          </thead>

          <tbody>

            <tr class="uk-table-middle" *ngFor="let item of selectedCommunities">

              <td class="uk-text-center uk-width-1-4">

                <a class="custom-external" target="_blank" href="{{item.link}}">

                  <span *ngIf="item.title">{{item.title}}</span>

                  <span *ngIf="!item.title">[no name available]</span>

                </a>

              <td class="uk-text-center uk-width-1-4">

                <div class="  ">

                  {{item.date | date:'yyyy/MM/dd'}}

                </div>

              </td>

              <!-- <td class="uk-text-center uk-width-1-4">

                <span *ngIf="result.funder">{{result.funder}}</span>

                <span *ngIf="!result.funder">-</span>

              </td> -->

              <td class="uk-text-center uk-width-1-4">

                <a    (click)="removeCommunity(item)" class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Undo"></a>

              </td>

            </tr>

          </tbody>

        </table>

<modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteCommunity($event)"></modal-alert>

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

import {SimpleChanges, OnChanges}                        from '@angular/core';

import {FormGroup, FormArray, FormBuilder, Validators}   from '@angular/forms';

import {ActivatedRoute, Router}                          from '@angular/router';

import {HelpContentService}                              from '../../services/help-content.service';

import {EnvProperties}                                   from '../../openaireLibrary/utils/properties/env-properties';

import {ErrorCodes}                                      from '../../openaireLibrary/utils/properties/errorCodes';

import {SearchUtilsClass}                                from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';

import {ZenodoCommunitiesService} from '../../openaireLibrary/connect/zenodoCommunities/zenodo-communities.service';

import {ZenodoCommunityInfo} from '../../openaireLibrary/connect/zenodoCommunities/zenodoCommunityInfo';

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

import{ManageZenodoCommunitiesService} from '../../services/manageZenodoCommunities.service';

@Component({

    selector: 'add-zenodo-communities',

    templateUrl: './add-zenodo-communities.component.html',

})

export class AddZenodoCommunitiesComponent implements OnInit {

    public zenodoCommunities = null; // zenodo search API results

    public totalZenodoCommunities = null;

    @Input() properties:EnvProperties = null;

    @Input() communityId = null;

    public zenodoCommunitySearchUtils:SearchUtilsClass = new SearchUtilsClass();

    private errorCodes: ErrorCodes;

    public rowsOnPage = 10;

    @Input() masterCommunity = null;

    @Input() selectedCommunities = [];

    constructor (private route: ActivatedRoute,

                 private _router: Router,

                 public _fb: FormBuilder,

                 private _helpContentService: HelpContentService,

                 private _zenodoCommunitieService: ZenodoCommunitiesService,

               private _manageZenodoCommunitiesService: ManageZenodoCommunitiesService) {

       this.errorCodes = new ErrorCodes();

       this.zenodoCommunitySearchUtils.status = this.errorCodes.LOADING;

    }

    ngOnInit() {

      this.zenodoCommunitySearchUtils.keyword = "";

      if(!Session.isLoggedIn()){

        console.info(this._router.url);

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        if (this.communityId != null && this.communityId != '') {

            this._zenodoCommunitieService.getZenodoCommunities(this.properties, this.properties.zenodoCommunities+"?page="+this.zenodoCommunitySearchUtils.page+"&size="+this.rowsOnPage).subscribe(

                result  => {

                         this.zenodoCommunities = result[0];

                         this.totalZenodoCommunities = result[1];

                         this.zenodoCommunitySearchUtils.totalResults = result[1];

                         this.zenodoCommunitySearchUtils.page = 1;

                         this.zenodoCommunitySearchUtils.size =this.rowsOnPage;

            });

        }

      }

    }

    public goTo(page:number = 1) {

      if(!Session.isLoggedIn()){

        console.info(this._router.url);

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        this.zenodoCommunitySearchUtils.page=page;

        this._zenodoCommunitieService.getZenodoCommunities(this.properties,

          this.properties.zenodoCommunities+"?page="+this.zenodoCommunitySearchUtils.page

          +"&size="+this.rowsOnPage

        +((this.zenodoCommunitySearchUtils.keyword)?("&q="+this.zenodoCommunitySearchUtils.keyword):"")

        ).subscribe(

            result  => {

              this.zenodoCommunities = result[0];

              this.totalZenodoCommunities = result[1];

              this.zenodoCommunitySearchUtils.totalResults = result[1];

              this.zenodoCommunitySearchUtils.size =this.rowsOnPage;

        });

      }

    }

    totalPages(): number {

      let totalPages:any = this.zenodoCommunitySearchUtils.totalResults/(this.rowsOnPage);

      if(!(Number.isInteger(totalPages))) {

          totalPages = (parseInt(totalPages, 10) + 1);

      }

      return totalPages;

    }

    public addCommunity(community) {

      if(!Session.isLoggedIn()){

        console.info(this._router.url);

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        this._manageZenodoCommunitiesService.addZCommunity(this.properties, this.communityId, community.id ).subscribe(

          data => {

            console.info("data ADD");

            console.info(data);

            // this.undo[project.id] = data.id;

            community["openaireId"]=data.id;

            this.selectedCommunities.push(community);

          },

          err => {

            console.info("error ADD");

            console.log(err.status);

          },

          () => {

            console.info("completed ADD");

          }

        )

      }

    }

  /*  public removeCommunity( comm) {

      if(!Session.isLoggedIn()){

        console.info(this._router.url);

        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      } else {

        var openaireId = this.getOpenaireId(comm);

        this._manageZenodoCommunitiesService.removeZCommunity(this.properties, this.communityId,openaireId, ).subscribe(

          data => {

        console.log(this.selectedCommunities.length);

            console.info("REMOVE: "+ this.communityId + " "+openaireId);

            console.log(comm);

            var pos = -1;

            for(var i=0;  i< this.selectedCommunities.length;i++) {

              console.info(this.selectedCommunities[i].id+ " "+ this.selectedCommunities[i].openaireId+" "+ comm.id);

              if( this.selectedCommunities[i].id == comm.id) {

                pos= i;

                break;

              }

            }

            console.log(pos);

            if(pos != -1){

              this.selectedCommunities.splice(pos, 1);

            }

            console.log(this.selectedCommunities.length);

          },

          err => {

            console.info("error remove");

            console.log(err.status);

          },

          () => {

            console.info("completed remove");

          }

        )

      }

    }*/

    public inCommunity(community: any): any {

      for(let com of this.selectedCommunities) {

        if(com.id == community.id) {

          return  true;

        }

      }

      return false;

    }

      public getOpenaireId(community: any): string {

        for(let com of this.selectedCommunities) {

          if(com.id == community.id) {

            return  com.openaireId;

          }

        }

        return null;

      }

}

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

import { Subject } from 'rxjs/Subject';

import { DataTableDirective } from 'angular-datatables';

import {ZenodoCommunitiesService} from '../../openaireLibrary/connect/zenodoCommunities/zenodo-communities.service';

import {ZenodoCommunityInfo} from '../../openaireLibrary/connect/zenodoCommunities/zenodoCommunityInfo';

import{ManageZenodoCommunitiesService} from '../../services/manageZenodoCommunities.service';

    styles: [`

      #dpTable_info, #dpTable_paginate,  #dpTable_length,  #dpTable_filter{

        display: none;

      }

      `]

    @Input() properties:EnvProperties = null;

    @Input() communityId = null;

    @Input() masterCommunity = null;

    @Input() selectedCommunities = [];

    @ViewChild(DataTableDirective) datatableElement: DataTableDirective;

    dtTrigger: Subject<any> = new Subject(); //necessary

    dtOptions: DataTables.Settings = {};

    private triggered: boolean = false;

    @ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;

    selectedToDelete = null;

                 private _ΖenodoCommunitieService: ZenodoCommunitiesService,

               private _manageZenodoCommunitiesService: ManageZenodoCommunitiesService) {

       this.zenodoCommunitySearchUtils.totalResults = this.selectedCommunities.length;

        // this.route.queryParams.subscribe(

        //     communityId => {

        //         this.communityId = communityId['communityId'];

        //         if(!Session.isLoggedIn()){

        //           console.info(this._router.url);

        //           this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

        //         } else {

        //           if (this.communityId != null && this.communityId != '') {

        //               this._ΖenodoCommunitieService.getZenodoCommunities(this.properties, this.properties.zenodoCommunities+"?page="+this.zenodoCommunitySearchUtils.page+"&size="+this.rowsOnPage).subscribe(

        //                   zenodoCommunities  => {

        //                            this.zenodoCommunities = zenodoCommunities;

        //                            console.log(zenodoCommunities);

        //                            console.log(this.zenodoCommunitySearchUtils.page);

        //               });

        //               this._ΖenodoCommunitieService.getTotalZenodoCommunities(this.properties, this.properties.zenodoCommunities).subscribe(

        //                   totalZenodoCommunities => {

        //                       this.totalZenodoCommunities = totalZenodoCommunities;

        //                       this.zenodoCommunitySearchUtils.totalResults = totalZenodoCommunities;

        //                       console.log(totalZenodoCommunities);

        //               });

        //           }

        //         }

        //     });

        this.dtOptions = {

          // "paging": true,

          // "searching": true,

          // "lengthChange": false,

          "pageLength": this.rowsOnPage,

          "language": {

              "search": "",

              "searchPlaceholder": "Search projects..."

            } 

        };

        if(!this.triggered) {

          this.triggerInitialLoad();

        } else {

          var table = $('#dpTable').DataTable();

          table.clear();

          this.rerender();

        }

     }

     public ngOnDestroy() {

       $.fn['dataTable'].ext.search.pop();

     }

     rerender(): void {

       this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {

         // Destroy the table first

         dtInstance.destroy();

         // Call the dtTrigger to rerender again

         this.dtTrigger.next();

       });

     }

     ngAfterViewInit(): void {

       $.fn['dataTable'].ext.search.push((settings, data, dataIndex) => {

          if (this.filterData(data, this.zenodoCommunitySearchUtils.keyword )) {

            return true;

          }

          return false;

        });

        console.info("ngAfterViewInit");

     }

     filterData(row: any, query: string) {

       let returnValue: boolean = false;

       if(query) {

         for(var i=0; i <3; i++){

           var r= this.filterQuery(row[i], query);

           if(r) {

             returnValue = true;

             break;

           }

         }

         if(!returnValue) {

           return false;

         }

       }

       return true;

     }

     filterQuery(data, query){

       if(data.toLowerCase().indexOf(query.toLowerCase()) > -1){

         return true;

       }else{

         return false;

       }

     }

     /*

     Trigger a table draw in order to get the initial filtering

     */

     triggerInitialLoad(){

       this.triggered = true;

       console.info("triggerInitialLoad");

       setTimeout(function(){

         var table = (<any>$('#dpTable')).DataTable();

         table.page( 0  ).draw( false );

       }, 500);

       this.dtTrigger.next();

     }

     goTo(page:number = 1){

         this.zenodoCommunitySearchUtils.page=page;

         var table = $('#dpTable').DataTable();

         table.page( page - 1  ).draw( false );

         var info = table.page.info();

         console.info("records: "+info.recordsDisplay);

         this.zenodoCommunitySearchUtils.totalResults = info.recordsDisplay;

     }

    public confirmedDeleteCommunity(data : any) {

      // if(!Session.isLoggedIn()){

      //   console.info(this._router.url);

      //   this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

      // } else {

      //   console.info("REMOVE: "+ this.selectedCommunityProject.id);

      //   this.subRemove = this._manageCommunityProjectsService.removeProject(this.properties, this.community, this.selectedCommunityProject.id).subscribe(

      //     data => {

      //       console.info("data REMOVE");

      //       console.info(data);

      //     },

      //     err => {

      //       console.info("error REMOVE");

      //       console.log(err);

      //     },

      //     () => {

      //       console.info("completed REMOVE");

      //       let index = this.communityProjects.indexOf(this.selectedCommunityProject);

      //       this.communityProjects.splice(index, 1);

      //

      //       this.communitySearchUtils.totalResults--;

      //       this.communitySearchUtils.page=1;

      //

      //       this.rerender();

      //     }

      //   )

      // }

        console.info("REMOVE: "+ this.communityId + " "+this.selectedToDelete.openaireId);

         this._manageZenodoCommunitiesService.removeZCommunity(this.properties, this.communityId,this.selectedToDelete.openaireId ).subscribe(

          data => {

             var pos = -1;

            for(var i=0;  i< this.selectedCommunities.length;i++) {

               if( this.selectedCommunities[i].id == this.selectedToDelete.id) {

                pos= i;

                break;

              }

            }

             if(pos != -1){

              this.selectedCommunities.splice(pos, 1);

            }

            var table = $('#dpTable').DataTable();

            table.clear();

            this.rerender();

          },

          err => {

            console.info("error remove");

            console.log(err.status);

          },

          () => {

            console.info("completed remove");

          }

        )

    public removeCommunity( comm) {

        this.selectedToDelete = comm;

        this.alertModalDeleteCommunity.cancelButton = true;

        this.alertModalDeleteCommunity.okButton = true;

        this.alertModalDeleteCommunity.alertTitle = "Remove zenodo community?";

        let title = "";

        if(comm.title) {

          title = comm.title;

        }

        this.alertModalDeleteCommunity.message = "Zenodo community";

        if(title) {

          this.alertModalDeleteCommunity.message += " '"+title+"' ";

        }

        this.alertModalDeleteCommunity.message += "will be removed from your community. Are you sure?";

        this.alertModalDeleteCommunity.okButtonText = "Yes";

        this.alertModalDeleteCommunity.open();

    // public removeCommunity( comm) {

    //   if(!Session.isLoggedIn()){

    //     console.info(this._router.url);

    //     this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    //   } else {

    //     console.info("REMOVE: "+ this.communityId + " "+comm.openaireId);

    //      this._manageZenodoCommunitiesService.removeZCommunity(this.properties, this.communityId,comm.openaireId ).subscribe(

    //       data => {

    //          var pos = -1;

    //         for(var i=0;  i< this.selectedCommunities.length;i++) {

    //            if( this.selectedCommunities[i].id == comm.id) {

    //             pos= i;

    //             break;

    //           }

    //         }

    //          if(pos != -1){

    //           this.selectedCommunities.splice(pos, 1);

    //         }

    //

    //       },

    //       err => {

    //         console.info("error remove");

    //         console.log(err.status);

    //       },

    //       () => {

    //         console.info("completed remove");

    //       }

    //     )

    //   }

    // }

  <div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>

    <div>

      <form class=" uk-animation uk-card uk-card-default uk-padding" >

        <div>

          <select class="uk-select"  [(ngModel)]="selectedFunder" name="select_funder"  >

           <option  value="" (click)="goTo(1)">Select funder:</option>

           <option *ngFor="let  funder of funders"  [value]="funder" (click)="goTo(1)">{{funder}}</option>

          </select>

        </div>

      </form>

    </div>

    <div>

      <form class="uk-text-center uk-animation uk-card uk-card-default uk-padding">

        <div>

          <input type="text" class="uk-input  uk-width-1-2" placeholder="Search community projects..." aria-describedby="sizing-addon2"  [(ngModel)]="communitySearchUtils.keyword"  name="keyword" >

          <button (click)="goTo(1)"  type="submit" class=" uk-button">

             <span class="uk-icon">

             <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>

             </span>Search

           </button>

        </div>

      </form>

    </div>

  </div>

  <errorMessages [status]="[communitySearchUtils.status]" [type]="'community projects'"></errorMessages>

  <div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

    <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

      <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

        {{communitySearchUtils.totalResults | number}} projects, page {{communitySearchUtils.page | number}} of {{(totalPages()) | number}}

      </span>

      <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

        <paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>

      </span>

    </div>

  </div>

<!-- uk-first-column uk-width-expand -->

  <div class="custom-dataTable-content">

    <div class="uk-overflow-container">

      <table datatable class="uk-table uk-table-striped divider-table" [dtOptions]="dtOptions" id="dpTable"  [dtTrigger]="dtTrigger" dtInstance="dtInstanceCallback">

        <thead>

          <tr>

            <th class="uk-text-center">Project</th>

            <th class="uk-text-center">Grant Id</th>

            <th class="uk-text-center">Funder</th>

            <th class="uk-text-center">Action</th>

          </tr>

        </thead>

        <tbody>

          <tr class="uk-table-middle" *ngFor="let result of communityProjects">

            <td class="uk-text-center uk-width-1-4">

              <a class="custom-external" target="_blank"

                 [href]="communityUrl+'/search/project?' + ((result.openaireId) ? 'projectId='+result.openaireId : 'grantId='+result.grantId+'&funder='+result.funder)">

                <span *ngIf="result.name">{{result.name}}</span>

                <span *ngIf="result.name && result.acronym">(</span><span *ngIf="result.acronym">{{result.acronym}}</span><span *ngIf="result.name && result.acronym">)</span>

                <span *ngIf="!result.name && !result.acronym">[no title available]</span>

              </a>

            </td>

            <td class="uk-text-center uk-width-1-4">

              <span *ngIf="result.grantId">{{result.grantId}}</span>

              <span *ngIf="!result.grantId">-</span>

            </td>

            <td class="uk-text-center uk-width-1-4">

              <span *ngIf="result.funder">{{result.funder}}</span>

              <span *ngIf="!result.funder">-</span>

            </td>

            <td class="uk-text-center uk-width-1-4">

              <a (click)="removeProject(result)" class="uk-icon-button remove red_background_color red_color" uk-icon="icon: close; ratio: 1" title="Remove"></a>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

  </div>

  <div *ngIf="communitySearchUtils.totalResults > 0" class="uk-align-center uk-margin-remove-bottom">

    <div class="searchPaging uk-panel uk-margin-top uk-grid uk-margin-bottom">

      <span class="uk-h6 uk-width-1-1@s uk-width-1-2@m">

        {{communitySearchUtils.totalResults | number}} projects, page {{communitySearchUtils.page | number}} of {{(totalPages()) | number}}

      </span>

      <span class="float-children-right-at-medium margin-small-top-at-small uk-width-1-1@s uk-width-1-2@m">

        <paging-no-load [currentPage]="communitySearchUtils.page" [totalResults]="communitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>

      </span>

    </div>

  </div>

  <modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteProject($event)"></modal-alert>

  <!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteProject($event)">

      Are you sure you want to remove the selected project from your community?

  </delete-confirmation-dialog> -->

<!-- </div> -->

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

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

import {ManageZenodoCommunitiesComponent} from './manage-zenodo-communities.component';

import {AddZenodoCommunitiesComponent} from './add-zenodo-communities.component';

import {Session} from '../../openaireLibrary/login/utils/helper.class';

import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';

import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';

import {ZenodoCommunitiesService} from '../../openaireLibrary/connect/zenodoCommunities/zenodo-communities.service';

import { SearchZenodoCommunitiesService } from '../../openaireLibrary/connect/zenodoCommunities/searchZenodoCommunities.service';

import {CommunityService} from "../../openaireLibrary/connect/community/community.service";

import {CommunityInfo}                                   from '../../openaireLibrary/connect/community/communityInfo';

@Component({

    selector: 'zenodo-communities',

    template: `

      <div id="manage-communities">

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

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

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

        </div>

        <div class="toggle-usage">

           <manage-zenodo-communities [masterCommunity]=masterZenodoCommunity [(selectedCommunities)]=selectedCommunities  [properties]=properties [communityId]=communityId  ></manage-zenodo-communities>

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

        </div>

        <div class="toggle-usage" hidden>

           <add-zenodo-communities [masterCommunity]=masterZenodoCommunity [(selectedCommunities)]=selectedCommunities [properties]=properties [communityId]=communityId ></add-zenodo-communities>

        </div>

      </div>

    `

})

//

export class ZenodoCommunitiesComponent implements OnInit {

  private communityId: string = null;

  private community:CommunityInfo = null;

  @Input() communityProjects =[];

  @ViewChild (ManageZenodoCommunitiesComponent) manageZenodoCommunitiesComponent : ManageZenodoCommunitiesComponent ;

  @ViewChild (AddZenodoCommunitiesComponent) addZenodoCommunitiesComponent : AddZenodoCommunitiesComponent ;

  public warningMessage = "";

  public infoMessage = "";

  public toggle: boolean = true;

  public updateCommunityProjectsOnToggle: boolean = false;

  public pageTitle: string = "Manage zenodo communities";

  public toggleLinkMessage: string = "Manage zenodo communities";

  masterZenodoCommunityId = null;

  masterZenodoCommunity = null;

  public properties:EnvProperties = null;

  selectedCommunityIds = null;//["ecfunded", "zenodo", "lory_hslu", "cs19", "","hbp","dighl", "wind_energy", "lory", "fp7-bmc","fp7postgrantoapilotoutputs","cernopenlab"];

  selectedCommunities = [];

  constructor(private route: ActivatedRoute, private _router: Router, private _ΖenodoCommunitieService: ZenodoCommunitiesService,private _communityService: CommunityService,private _searchZenodoCommunitiesService: SearchZenodoCommunitiesService) {}

    ngOnInit() {

        this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {

        this.properties = data.envSpecific;

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

            if(params['communityId']) {

              this.communityId = params['communityId'];

              if(!Session.isLoggedIn()){

                console.info(this._router.url);

                this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

              } else {

                if (this.communityId != null && this.communityId != '') {

                  //TODO

                    // this.showLoading = true;

                    // this.updateErrorMessage = "";

                    // this.errorMessage = "";

                    this._communityService.getCommunity(this.properties, this.properties.communityAPI+this.communityId).subscribe (

                      community => {

                            this.community = community;

                            this.masterZenodoCommunityId = this.community.zenodoCommunity;

                            console.log

                            if(this.masterZenodoCommunityId){

                              this._ΖenodoCommunitieService.getZenodoCommunityById(this.properties, this.properties.zenodoCommunities+this.masterZenodoCommunityId, null).subscribe(

                                  result  => {

                                           this.masterZenodoCommunity = result;

                              });

                            }

                            // this.showLoading = false;

                      },

                      error => {} //this.handleError('System error retrieving community profile', error)

                    );

                    this._searchZenodoCommunitiesService.searchZCommunities(this.properties,this.communityId).subscribe (

                      result => {

                            this.selectedCommunityIds = result;

                            for(let i=0; i< this.selectedCommunityIds.length; i++){

                              this._ΖenodoCommunitieService.getZenodoCommunityById(this.properties, this.properties.zenodoCommunities+this.selectedCommunityIds[i]["zenodoid"], this.selectedCommunityIds[i]["id"]).subscribe(

                                  result  => {

                                           this.selectedCommunities.push(result);

                              });

                            }

                            // this.showLoading = false;

                      },

                      error => {} //this.handleError('System error retrieving community profile', error)

                    );

//https://dev-openaire.d4science.org/openaire/community/dh-ch/zenodocommunities

                }

              }

            }

          });

        });

}

  public ngOnDestroy() {}

  public updateCommunityProjects() {

    if(!Session.isLoggedIn()){

      console.info(this._router.url);

      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });

    } else {

      this.toggle = !this.toggle;

      if(this.toggle) {

        this.pageTitle = "Manage zenodo communities";

          //TODO

          // this.manageProjectsComponent._getCommunityProjects();

          // this.addProjectsComponent.undo = {};

      } else {

        this.updateCommunityProjectsOnToggle = false;

        this.pageTitle = "Search zenodo communities";

        //this.toggleLinkMessage = "Manage projects";

      }

    }

  }

//TODO

  // public communityProjectsChanged($event) {

  //   this.communityProjects = $event.value;

  // }

  // public updateCommunityProjects($event) {

  //   this.updateCommunityProjectsOnToggle = true;

  // }

}

    "start": "ng serve  --host 0.0.0.0 --disable-host-check --port=5000",