zenodo communities:

add-zenodo-communities
		complete searching in zenodo API
		add button for save a zenodo community
	manage-zenodo-communities
		fetch and display selected communities from CNR API (datatables: initial rendering is not properly working)
		remove button
	general page that toggles the above views

	


git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-admin-portal/trunk@53905 d315682c-612b-4755-9ff5-7f18f6832af3

package.json

@@ -4,7 +4,7 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve  --host 0.0.0.0 --disable-host-check",
+    "start": "ng serve  --host 0.0.0.0 --disable-host-check --port=5000",
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",

src/app/app.component.html

@@ -30,6 +30,16 @@
                       <span>Profile</span>
                   </a>
               </li>
+              <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> 
 
             </ul>
          </li>
@@ -53,21 +63,12 @@
                       <span>Manage subjects</span>
                   </a>
               </li>
-              <!-- <li>
+              <li>
                   <a routerLink="/manage-zenodo-communities" routerLinkActive="active" [queryParams]="{communityId: this.communityId}">
                       <span>Manage zenodo communities</span>
                   </a>
               </li>
-              <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> -->
             </ul>
          </li>
          <li *ngIf="isPortalAdministrator" class="uk-nav-header uk-parent">

src/app/app.module.ts

@@ -49,7 +49,7 @@ import { CookieLawModule } from './openaireLibrary/sharedComponents/cookie-law/c
 import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
 import {FeedbackModule} from './openaireLibrary/sharedComponents/feedback/feedback.module';
 import {CommunityEditFormModule} from './pages/community/community-edit-form/community-edit-form.module';
-import {ManageZenodoCommunitiesModule} from './pages/zenodo-communities/manage-zenodo-communities.module';
+import {ZenodoCommunitiesModule} from './pages/zenodo-communities/zenodo-communities.module';
 import {ManageSubscribersModule} from './pages/subscribers/manage-subscribers.module';
 import {SubjectsEditFormModule} from './pages/subjects/subjects-edit-form/subjects-edit-form.module';
 import { LoginGuard} from './openaireLibrary/login/loginGuard.guard';
@@ -100,7 +100,7 @@ import {ManageUserNotificationsModule} from './pages/usernotifications/manage-us
         CommunityProjectsModule,
         CommunityContentProvidersModule,
         CommunityEditFormModule,
-        ManageZenodoCommunitiesModule,
+        ZenodoCommunitiesModule,
         ManageSubscribersModule,
         SubjectsEditFormModule,
         DataTablesModule,

src/app/app.routing.ts

@@ -6,7 +6,7 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { DashboardComponent } from "./dashboard.component";
 import { CommunitiesComponent } from './pages/community/communities.component';
-import { ManageZenodoCommunitiesComponent } from "./pages/zenodo-communities/manage-zenodo-communities.component";
+import { ZenodoCommunitiesComponent } from "./pages/zenodo-communities/zenodo-communities.component";
 import { ManageSubscribersComponent } from "./pages/subscribers/manage-subscribers.component";
 import { CommunityEditFormComponent } from "./pages/community/community-edit-form/community-edit-form.component";
 import { SubjectsEditFormComponent } from "./pages/subjects/subjects-edit-form/subjects-edit-form.component";
@@ -74,7 +74,7 @@ const appRoutes: Routes = [
     },
     {
       path: 'manage-zenodo-communities',
-      component: ManageZenodoCommunitiesComponent,
+      component: ZenodoCommunitiesComponent,
       canActivate: [IsCommunity,ConnectAdminLoginGuard],resolve: { envSpecific: EnvironmentSpecificResolver  }
     },
     {

src/app/pages/zenodo-communities/add-zenodo-communities.component.html

@@ -0,0 +1,71 @@
+<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>

src/app/pages/zenodo-communities/add-zenodo-communities.component.ts

@@ -0,0 +1,173 @@
+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;
+      }
+}

src/app/pages/zenodo-communities/manage-zenodo-communities.component.html

@@ -1,9 +1,8 @@
-<div id="manage-zenodo-communities" class=" uk-card uk-card-default uk-padding">
+<div id="manage-zenodo-communities" class="uk-padding">
-  <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width">Manage zenodo communities</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 zenodo communities" aria-describedby="sizing-addon2"  [(ngModel)]="zenodoCommunitySearchUtils.keyword" name="keyword" >
-        <button (click)="search()"  type="submit" class=" uk-button">
+        <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
@@ -11,64 +10,88 @@
       </div>
     </form>
 
+    <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>
     <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}}
+          {{zenodoCommunitySearchUtils.totalResults | number}} projects, 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>
+          <paging-no-load [currentPage]="zenodoCommunitySearchUtils.page" [totalResults]="zenodoCommunitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value, false)"></paging-no-load>
         </span>
       </div>
     </div>
 
-    <table class="uk-table uk-table-responsive uk-table-divider">
+    <div class="custom-dataTable-content">
-      <!-- <thead>
+      <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">Zenodo Communities</th>
+              <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> -->
+          </thead>
-      <!-- <paging-no-load [currentPage]=1 [totalResults]="zenodoCommunitySearchUtils.totalResults" [size]="10" (pageChange)="goTo($event.value)"></paging-no-load>       -->
           <tbody>
-          <tr *ngFor="let item of zenodoCommunities;" >
+            <tr class="uk-table-middle" *ngFor="let item of selectedCommunities">
-              <td>
+              <td class="uk-text-center uk-width-1-4">
-                <article class="uk-comment">
+                <a class="custom-external" target="_blank" href="{{item.link}}">
-                  <header 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="">
-                          <!-- <span *ngIf="!item.logoUrl">[no image available]</span> -->
-                        </a>
-                      </div>
-                      <div class="uk-width-expand">
-                          <h4 class="uk-comment-title uk-margin-remove"><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></h4>
+                  <span *ngIf="!item.title">[no name available]</span>
-                          <ul class="uk-comment-meta uk-subnav uk-subnav-divider uk-margin-remove-top">
+                </a>
-                              <li>last update: {{item.date | date:'yyyy/MM/dd'}}</li>
+              </td>
-                              <!-- <li><a href="#">Reply</a></li> -->
+              <td class="uk-text-center uk-width-1-4">
-                          </ul>
+                <div class="  ">
+                  {{item.date | date:'yyyy/MM/dd'}}
                 </div>
-                  </header>
+              </td>
-                  <div class="uk-comment-body uk-text-justify">
+              <!-- <td class="uk-text-center uk-width-1-4">
-                      <p *ngIf="item.description">{{item.description}}</p>
+                <span *ngIf="result.funder">{{result.funder}}</span>
-                      <p *ngIf="!item.description">[no description available]</p>
+                <span *ngIf="!result.funder">-</span>
-                  </div>
+              </td> -->
-                </article>
+
+              <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>
-
-    <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>
+<modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteCommunity($event)"></modal-alert>

src/app/pages/zenodo-communities/manage-zenodo-communities.component.ts

@@ -1,114 +1,309 @@
-import {Component, OnInit, Input}                        from '@angular/core';
+import {Component, OnInit, Input, ViewChild}                        from '@angular/core';
 import {SimpleChanges, OnChanges}                        from '@angular/core';
 import {FormGroup, FormArray, FormBuilder, Validators}   from '@angular/forms';
 import {ActivatedRoute, Router}                          from '@angular/router';
+import { Subject } from 'rxjs/Subject';
+
+import { DataTableDirective } from 'angular-datatables';
 
 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 {ManageZenodoCommunitiesService}                  from './manage-zenodo-communities.service';
+import {ZenodoCommunitiesService} from '../../openaireLibrary/connect/zenodoCommunities/zenodo-communities.service';
-import {ZenodoCommunityInfo}                             from './zenodoCommunity/zenodoCommunityInfo';
+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: 'manage-zenodo-communities',
     templateUrl: './manage-zenodo-communities.component.html',
+    styles: [`
+      #dpTable_info, #dpTable_paginate,  #dpTable_length,  #dpTable_filter{
+        display: none;
+      }
+
+      `]
 })
 
 export class ManageZenodoCommunitiesComponent implements OnInit {
-
+    @Input() properties:EnvProperties = null;
-    public zenodoCommunities = null;
+    @Input() communityId = null;
-    public totalZenodoCommunities = null;
-    public properties:EnvProperties = null;
-    public communityId = null;
 
     public zenodoCommunitySearchUtils:SearchUtilsClass = new SearchUtilsClass();
 
     private errorCodes: ErrorCodes;
     public rowsOnPage = 10;
+    @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;
     constructor (private route: ActivatedRoute,
                  private _router: Router,
                  public _fb: FormBuilder,
                  private _helpContentService: HelpContentService,
-                 private _manageΖenodoCommunitieService: ManageZenodoCommunitiesService) {
+                 private _ΖenodoCommunitieService: ZenodoCommunitiesService,
+               private _manageZenodoCommunitiesService: ManageZenodoCommunitiesService) {
 
        this.errorCodes = new ErrorCodes();
        this.zenodoCommunitySearchUtils.status = this.errorCodes.LOADING;
+       this.zenodoCommunitySearchUtils.totalResults = this.selectedCommunities.length;
     }
 
     ngOnInit() {
-        this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+
-        this.properties = data.envSpecific;
+        // this.route.queryParams.subscribe(
-        this.route.queryParams.subscribe(
+        //     communityId => {
-            communityId => {
+        //         this.communityId = communityId['communityId'];
-                this.communityId = communityId['communityId'];
+        //         if(!Session.isLoggedIn()){
-                if(!Session.isLoggedIn()){
+        //           console.info(this._router.url);
-                  console.info(this._router.url);
+        //           this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-                  this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
+        //         } else {
-                } else {
+        //           if (this.communityId != null && this.communityId != '') {
-                  if (this.communityId != null && this.communityId != '') {
+        //               this._ΖenodoCommunitieService.getZenodoCommunities(this.properties, this.properties.zenodoCommunities+"?page="+this.zenodoCommunitySearchUtils.page+"&size="+this.rowsOnPage).subscribe(
-                      this._manageΖenodoCommunitieService.getZenodoCommunities(this.properties, this.properties.zenodoCommunities+"?page="+this.zenodoCommunitySearchUtils.page+"&size="+this.rowsOnPage).subscribe(
+        //                   zenodoCommunities  => {
-                          zenodoCommunities  => {
+        //                            this.zenodoCommunities = zenodoCommunities;
-                                   this.zenodoCommunities = zenodoCommunities;
+        //                            console.log(zenodoCommunities);
-                                   console.log(zenodoCommunities);
+        //                            console.log(this.zenodoCommunitySearchUtils.page);
-                                   console.log(this.zenodoCommunitySearchUtils.page);
+        //               });
-                      });
+        //               this._ΖenodoCommunitieService.getTotalZenodoCommunities(this.properties, this.properties.zenodoCommunities).subscribe(
-                      this._manageΖenodoCommunitieService.getTotalZenodoCommunities(this.properties, this.properties.zenodoCommunities).subscribe(
+        //                   totalZenodoCommunities => {
-                          totalZenodoCommunities => {
+        //                       this.totalZenodoCommunities = totalZenodoCommunities;
-                              this.totalZenodoCommunities = totalZenodoCommunities;
+        //                       this.zenodoCommunitySearchUtils.totalResults = totalZenodoCommunities;
-                              this.zenodoCommunitySearchUtils.totalResults = totalZenodoCommunities;
+        //                       console.log(totalZenodoCommunities);
-                              console.log(totalZenodoCommunities);
+        //               });
-                      });
+        //           }
-                  }
+        //         }
-                }
+        //     });
-            });
-        });
 
         this.zenodoCommunitySearchUtils.keyword = "";
+        this.dtOptions = {
+          // "paging": true,
+          // "searching": true,
+          // "lengthChange": false,
+          "pageLength": this.rowsOnPage,
+          "language": {
+              "search": "",
+              "searchPlaceholder": "Search projects..."
             } 
 
-    public search() {
+        };
-      if(!Session.isLoggedIn()){
+        if(!this.triggered) {
-        console.info(this._router.url);
+          this.triggerInitialLoad();
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
         } else {
-        this.zenodoCommunitySearchUtils.page = 1;
+          var table = $('#dpTable').DataTable();
-        if (this.communityId != null && this.communityId != '') {
+          table.clear();
-            this._manageΖenodoCommunitieService.getZenodoCommunities(this.properties, this.properties.zenodoCommunities+"?q="+this.zenodoCommunitySearchUtils.keyword+"&page="+this.zenodoCommunitySearchUtils.page+"&size="+this.rowsOnPage).subscribe(
+
-                zenodoCommunities  => {
+          this.rerender();
-                         this.zenodoCommunities = zenodoCommunities;
+        }
-                         console.log(zenodoCommunities);
+
+
+     }
+
+     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;
            }
          }
 
-    public goTo(page:number = 1) {
+         if(!returnValue) {
-      if(!Session.isLoggedIn()){
+           return false;
-        console.info(this._router.url);
+         }
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
+       }
+
+       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;
-        console.log("Page is: "+page);
+
-        this._manageΖenodoCommunitieService.getZenodoCommunities(this.properties, this.properties.zenodoCommunities+"?page="+this.zenodoCommunitySearchUtils.page+"&size="+this.rowsOnPage).subscribe(
+         var table = $('#dpTable').DataTable();
-            zenodoCommunities  => {
+         table.page( page - 1  ).draw( false );
-                     this.zenodoCommunities = zenodoCommunities;
+
-                     console.log(zenodoCommunities);
+         var info = table.page.info();
-                     console.log(this.zenodoCommunitySearchUtils.page);
+         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();
+      //     }
+      //   )
+      // }
+      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 + " "+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");
+          }
+        )
       }
     }
 
-    totalPages(): number {
+    public removeCommunity( comm) {
-      let totalPages:any = this.zenodoCommunitySearchUtils.totalResults/(this.rowsOnPage);
+      if(!Session.isLoggedIn()){
-      if(!(Number.isInteger(totalPages))) {
+        console.info(this._router.url);
-          totalPages = (parseInt(totalPages, 10) + 1);
+        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
+      } else {
+        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;
         }
-      return totalPages;
+
+
+        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");
+    //       }
+    //     )
+    //   }
+    // }
+
+}

src/app/pages/zenodo-communities/manage-zenodo-communities.module.ts

@@ -1,26 +0,0 @@
-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 {ManageZenodoCommunitiesService} from './manage-zenodo-communities.service';
-
-@NgModule({
-  imports:[
-    CommonModule, FormsModule, RouterModule,
-    PagingModule
-  ],
-  declarations:[
-    ManageZenodoCommunitiesComponent
-   ],
-  providers:[
-    ManageZenodoCommunitiesService
-   ],
-  exports: [
-    ManageZenodoCommunitiesComponent
-   ]
-})
-
-export class ManageZenodoCommunitiesModule { }

src/app/pages/zenodo-communities/manage-zenodo-communities.service.ts

@@ -1,44 +0,0 @@
-import {Injectable}                 from '@angular/core';
-import {Http, Response}             from '@angular/http';
-import {Headers, RequestOptions}    from '@angular/http';
-import {Observable}                 from 'rxjs/Rx';
-
-import {ZenodoCommunityInfo}        from './zenodoCommunity/zenodoCommunityInfo';
-import {EnvProperties}              from '../../openaireLibrary/utils/properties/env-properties';
-
-@Injectable()
-export class ManageZenodoCommunitiesService {
-
-    constructor(private http:Http) {
-    }
-
-    getZenodoCommunities(properties:EnvProperties, url: string) {
-            return this.http.get((properties.useCache)? (properties.cacheUrl+encodeURIComponent(url)) : url)
-                            .map(res => <any> res.json()).map(res => this.parseZenodoCommunities(res.hits.hits));
-    }
-
-    parseZenodoCommunities(data: any): ZenodoCommunityInfo[] {
-        let zenodoCommunities: ZenodoCommunityInfo[] = [];
-
-        for (let i=0; i<data.length; i++) {
-            let resData = data[i];
-            var result: ZenodoCommunityInfo = new ZenodoCommunityInfo();
-
-            result['title'] = resData.title;
-            result['id'] = resData.id;
-            result['description'] = resData.description;
-            result['link'] = resData.links.html;
-            result['logoUrl'] = resData.logo_url;
-            result['date'] = resData.updated;
-            result['page'] = resData.page;
-
-            zenodoCommunities.push(result);
-        }
-        return zenodoCommunities;
-    }
-
-    getTotalZenodoCommunities(properties:EnvProperties, url: string) {
-            return this.http.get((properties.useCache)? (properties.cacheUrl+encodeURIComponent(url)) : url)
-                            .map(res => <any> res.json()).map(res => res.hits.total);
-    }
-}

src/app/pages/zenodo-communities/remove-projects.component.html

@@ -0,0 +1,94 @@
+  <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> -->

src/app/pages/zenodo-communities/zenodo-communities.component.ts

@@ -0,0 +1,150 @@
+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;
+  // }
+}

src/app/pages/zenodo-communities/zenodo-communities.module.ts

@@ -0,0 +1,34 @@
+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 { }

src/app/pages/zenodo-communities/zenodoCommunity/zenodoCommunityInfo.ts

@@ -1,9 +0,0 @@
-export class ZenodoCommunityInfo {
-  title: string;
-  id: string;
-  description: string;
-  link: string;
-  logoUrl: string;
-  date: Date;
-  page: string;
-}

src/app/services/manageZenodoCommunities.service.ts

@@ -0,0 +1,43 @@
+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())
+    }
+
+
+
+
+}