[Admin | Trunk]: Merge from NewUI branch

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

angular.json

@@ -21,11 +21,11 @@
               "src/robots.txt"
             ],
             "styles": [
-              "src/styles.css",
               "src/material.scss",
               "node_modules/datatables.net-dt/css/jquery.dataTables.css",
               "node_modules/interactiveminingv3/assets/css/interactive-mining.css",
-              "node_modules/interactiveminingv3/assets/css/animations.css"
+              "node_modules/interactiveminingv3/assets/css/animations.css",
+              "src/styles.css"
             ],
             "scripts": [
               "node_modules/jquery/dist/jquery.js",

interactivemining.sh

@@ -1 +0,0 @@
-npm install --no-save ./interactiveminingv3.tgz

package.json

@@ -4,13 +4,15 @@
   "license": "MIT",
   "scripts": {
     "ng": "ng",
+    "clean-install": "rm -rf node_modules; npm install; npm run mining",
+    "mining": "./interactivemining-install.sh",
     "start": "ng serve  --host 0.0.0.0 --disable-host-check --port=5000",
     "build": "ng build --prod; npm run after-build-clean",
     "build-beta": "ng build --configuration=beta; npm run after-build-clean",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e",
-    "after-build-clean": "rm -rf dist/assets/common-assets/.svn/ dist/assets/connect-assets/.svn/"
+    "after-build-clean": "rm -rf dist/assets/common-assets/.svn/ dist/assets/connect-assets/.svn/ dist/assets/dashboard-theme/.svn/"
   },
   "private": true,
   "dependencies": {

src/app/app.component.html

@@ -1,30 +1,15 @@
-<navbar *ngIf="properties && showMenu && header" portal="connect-admin" logoPath="assets/imgs/" [onlyTop]="false"
+<div *ngIf="loading == true">
-        [header]="header" [userMenu]="true" [user]="user" [userMenuItems]="userMenuItems" [menuItems]="menuItems"
+  <loading [full]="true"></loading>
-        [properties]="properties"></navbar>
+</div>
-
+<div *ngIf="loading == false">
-<div id="wrapper" class="uk-section  uk-padding-remove">
+  <div class="sidebar_main_swipe" [class.sidebar_main_active]="open && hasSidebar"
-  <div class="uk-grid-collapse" uk-height-viewport="expand: true" uk-grid>
+       [class.sidebar_mini]="!open && hasSidebar">
-    <sidebar *ngIf="showSidebar && this.router.url.split('?')[0]!= '/customize-layout'"
+    <div *ngIf="hasHeader" style="right: 0; top: 0; position: fixed; width: 100%; z-index:981;">
-             [menuItems]="sideMenuItems"
+      <navbar *ngIf="properties" [properties]="properties" portal="connect-admin" [header]="menuHeader"
-             class="uk-width-1-5 uk-light sidebar "></sidebar>
+              [userMenuItems]=userMenuItems [menuItems]="menuItems" [user]="user" [offCanvasFlip]="true"></navbar>
-    <div class="uk-width-expand uk-overflow-auto"
-         [ngClass]="(!wellcome)?('uk-container uk-container-large  uk-padding' + (this.router.url.split('?')[0]!=
-         '/customize-layout'?'':' uk-padding-remove-top uk-padding-remove-bottom')):''"
-         [ngStyle]="{height: (!wellcome)?'85vh':'90vh'}">
-
-      <router-outlet></router-outlet>
     </div>
-    <!--
+    <dashboard-sidebar *ngIf="hasSidebar" [headerUrl]="headerUrl" [items]="sideBarItems" [headerLogoUrl]="headerLogoUrl" [specialMenuItem]="specialSideBarMenuItem"></dashboard-sidebar>
-      <feedback *ngIf= "properties" portalName="Admin" [feedbackQuestionaire]=properties.feedbackQuestionaire></feedback>
+    <router-outlet></router-outlet>
-    -->
   </div>
 </div>
-<!--cookie-law *ngIf= "isClient" position="bottom">
-    OpenAIRE uses cookies in order to function properly.<br>
-    Cookies are small pieces of data that websites store in your browser to allow us to give you the best browsing experience possible.
-    By using the OpenAIRE portal you accept our use of cookies. <a href="//ec.europa.eu/ipg/basics/legal/cookies/index_en.htm" target="_blank"> Read more <span class="uk-icon">
-    <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-right" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg>
-    </span></a>
-</cookie-law-->
-<!-- <bottom *ngIf= "isClient"></bottom> -->
 

src/app/app.component.spec.ts

@@ -1,32 +0,0 @@
-import { TestBed, async } from '@angular/core/testing';
-
-import { AppComponent } from './app.component';
-
-describe('AppComponent', () => {
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
-  }));
-
-  it('should create the app', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app).toBeTruthy();
-  }));
-
-  it(`should have as title 'app'`, async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('app');
-  }));
-
-  it('should render title in a h1 tag', async(() => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
-  }));
-});

src/app/app.component.ts

@@ -1,414 +1,226 @@
-/**
+import {ChangeDetectorRef, Component, HostListener, OnInit} from '@angular/core';
- * Created by stefania on 3/21/16.
+import {MenuItem, RootMenuItem} from './openaireLibrary/sharedComponents/menu';
- */
+import {ActivatedRoute, NavigationEnd, Params, Router} from '@angular/router';
-
-import {Component, OnInit} from '@angular/core';
-import {MenuItem, RootMenuItem, SideMenuItem} from './openaireLibrary/sharedComponents/menu';
-import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
-import {EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
-import {CommunitiesService} from './openaireLibrary/connect/communities/communities.service';
 import {EnvProperties} from './openaireLibrary/utils/properties/env-properties';
 import {Session, User} from './openaireLibrary/login/utils/helper.class';
-import {HelperFunctions} from './openaireLibrary/utils/HelperFunctions.class';
 import {UserManagementService} from './openaireLibrary/services/user-management.service';
-import {ConnectHelper} from "./openaireLibrary/connect/connectHelper";
 import {Header} from './openaireLibrary/sharedComponents/navigationBar.component';
-
+import {LayoutService} from "./openaireLibrary/dashboard/sharedComponents/sidebar/layout.service";
-declare var UIkit: any;
+import {properties} from "../environments/environment";
+import {BehaviorSubject, Subscriber} from "rxjs";
+import {CommunityInfo} from "./openaireLibrary/connect/community/communityInfo";
+import {CommunityService} from "./openaireLibrary/connect/community/community.service";
+import {arrow_left} from "./openaireLibrary/utils/icons/icons";
+import {SmoothScroll} from "./openaireLibrary/utils/smooth-scroll";
 
 @Component({
-  selector: 'app',
+  selector: 'app-root',
   templateUrl: './app.component.html',
 })
-
 export class AppComponent implements OnInit {
-  title = 'Metadata Registry Service';
+  title = 'Research Community Dashboard | Administrator';
-  userMenuItems: MenuItem[] = [];
+  properties: EnvProperties = properties;
-
-  menuItems: RootMenuItem [] = [];
-  sideMenuItems: SideMenuItem[] = [];
-  logInUrl = null;
-  logOutUrl = null;
-  community: { id: string, name: string, logoUrl: string } = null;
-  communityId = '';
-  communityType = null;
-  properties: EnvProperties = null;
-  isPortalAdministrator = false;
-  showSidebar: boolean;
-  wellcome = false;
-  showMenu: boolean = false;
   user: User;
-  logoPath: string = 'assets/common-assets/';
+  params: BehaviorSubject<Params> = new BehaviorSubject<Params>(null);
-  header: Header;
+  hasSidebar: boolean = false;
-
+  hasHeader: boolean = false;
+  hasAdminMenu: boolean = false;
+  isFrontPage: boolean = false;
+  isDashboard: boolean = false;
+  sideBarItems: MenuItem[] = [];
+  specialSideBarMenuItem: MenuItem = null;
+  menuItems: RootMenuItem[] = [];
+  menuHeader: Header = {
+    route: "/",
+    url: null,
+    title: "Default menu header",
+    logoUrl: null,
+    logoSmallUrl: null,
+    position: 'center',
+    badge: false,
+    stickyAnimation: false
+  };
+  userMenuItems: MenuItem[] = [];
+  loading: boolean = true;
+  paramsResolved: boolean = false;
+  innerWidth;
+  public community: CommunityInfo = null;
+  private subscriptions: any[] = [];
+  headerLogoUrl: string;
+  headerUrl: string;
+  
   constructor(private route: ActivatedRoute,
-              private propertiesService: EnvironmentSpecificService,
+              private communityService: CommunityService,
-              private _communitiesService: CommunitiesService,
+              private router: Router,
-              public router: Router,
+              private cdr: ChangeDetectorRef,
+              private smoothScroll: SmoothScroll,
+              private layoutService: LayoutService,
               private userManagementService: UserManagementService) {
-    this.router.events.forEach((event) => {
+    this.subscriptions.push(this.router.events.subscribe(event => {
-      if (event instanceof NavigationStart) {
+      if (event instanceof NavigationEnd) {
-        HelperFunctions.scroll();
+        let r = this.route;
-        this.wellcome = event.url === '/';
+        let params = r.snapshot.params;
+        while (r.firstChild && !params['community']) {
+          r = r.firstChild;
+          params = r.snapshot.params
+        }
+        this.paramsResolved = true;
+        this.params.next(params);
+      }
+    }));
+  }
+  
+  ngOnInit() {
+    if (typeof document !== 'undefined' && window) {
+      this.innerWidth = window.innerWidth;
+    }
+    this.subscriptions.push(this.layoutService.hasSidebar.subscribe(hasSidebar => {
+      this.hasSidebar = hasSidebar;
+      this.cdr.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutService.hasHeader.subscribe(hasHeader => {
+      this.hasHeader = hasHeader;
+      this.cdr.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutService.hasAdminMenu.subscribe(hasAdminMenu => {
+      this.hasAdminMenu = hasAdminMenu;
+      this.cdr.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutService.isFrontPage.subscribe(isFrontPage => {
+      this.isFrontPage = isFrontPage;
+      this.cdr.detectChanges();
+    }));
+    this.subscriptions.push(this.layoutService.isDashboard.subscribe(isDashboard => {
+      this.isDashboard = isDashboard;
+      this.cdr.detectChanges();
+    }));
+    this.layoutService.setSmallScreen((this.innerWidth && this.innerWidth < 1219));
+    this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
+    this.subscriptions.push(this.params.subscribe(params => {
+      if (this.paramsResolved) {
+        this.loading = true;
+        if (params && params['community']) {
+          if (!this.community || this.community.communityId !== params['community']) {
+            this.subscriptions.push(this.communityService.getCommunity(params['community']).subscribe(community => {
+              if (community) {
+                this.community = community;
+                this.buildMenu();
+                this.loading = false;
+              } else {
+                this.community = null;
+                this.buildMenu();
+                this.loading = false;
+              }
+            }));
+          } else {
+            this.buildMenu();
+            this.loading = false;
+          }
+        } else {
+          this.communityService.setCommunity(null);
+          this.layoutService.setOpen(!(this.innerWidth && this.innerWidth < 1219));
+          this.community = null;
+          this.buildMenu();
+          this.loading = false;
+        }
+      }
+    }));
+    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
+      this.user = user;
+      if (this.user) {
+        localStorage.setItem('user_id', this.user.id);
+        localStorage.setItem('mining_backend_address', this.properties.miningBackendURL);
+        localStorage.setItem('isCommunityManager', Session.isCommunityCurator(this.user) + '');
+        this.buildMenu();
+      }
+    }));
+  }
+  
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if (this.layoutService.isSmallScreen && event.target.innerWidth > 1219) {
+      this.layoutService.setSmallScreen(false);
+    } else if (!this.layoutService.isSmallScreen && event.target.innerWidth < 1219) {
+      this.layoutService.setSmallScreen(true);
+      this.layoutService.setOpen(false);
+    }
+  }
+  
+  public ngOnDestroy() {
+    this.subscriptions.forEach(value => {
+      if (value instanceof Subscriber) {
+        value.unsubscribe();
       }
     });
+    this.communityService.clearSubscriptions();
+    this.userManagementService.clearSubscriptions();
+    this.layoutService.clearSubscriptions();
+    this.smoothScroll.clearSubscriptions();
   }
-
+  
-  ngOnInit() {
+  public get open() {
-    this.propertiesService.loadEnvironment()
+    return this.layoutService.open;
-      .then(es => {
-        this.propertiesService.setEnvProperties(es);
-        this.properties = this.propertiesService.envSpecific;
-        this.logInUrl = this.properties.loginUrl;
-        this.logOutUrl = this.properties.logoutUrl;
-        this.showSidebar = false;
-        this.showMenu = false;
-        this.userManagementService.getUserInfo().subscribe(user => {
-          this.user = user;
-          if (this.user) {
-            localStorage.setItem('user_id', this.user.id);
-            localStorage.setItem('mining_backend_address', this.properties.miningBackendURL);
-            localStorage.setItem('isCommunityManager', Session.isCommunityCurator(this.user) + '');
-
-            this.isPortalAdministrator = Session.isPortalAdministrator(this.user);
-          }
-          this._communitiesService.updateCommunities(this.properties, this.properties.communityAPI + 'communities');
-          this.route.queryParams.subscribe(params => {
-            this.communityId = (params['communityId']) ? params['communityId'] : '';
-            ConnectHelper.setPortalTypeFromPid(this.communityId);
-
-            this.communityType = null;
-            this.menuItems = [];
-            this.userMenuItems = [];
-            this._communitiesService.getCommunitiesState().subscribe(
-              communities => {
-                //  this.community = community;
-                if (!communities || communities.length === 0) {
-                  return;
-                }
-                this.userMenuItems = [];
-                let countCommunities = 0;
-                let index_managerOfCommunity = null;
-                for (let i = 0; i < communities.length; i++) {
-                  const com = communities[i];
-                  if (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user)) {
-                    this.userMenuItems.push(new MenuItem('manage' + com.communityId, 'Manage ' + ((com.shortTitle) ? com.shortTitle : com.title), '', '/dashboard', false, [], [], {communityId: com.communityId}));
-                  } else {
-                    for (const manager of com.managers) {
-                      if (this.user && manager == this.user.email) {
-                        countCommunities++;
-                        index_managerOfCommunity = i;
-                        this.userMenuItems.push(new MenuItem('manage' + com.communityId, 'Manage ' + ((com.shortTitle) ? com.shortTitle : com.title), '', '/dashboard', false, [], [], {communityId: com.communityId}));
-                        break;
-                      }
-                    }
-                  }
-                  if (com.communityId === this.communityId) {
-                    this.community = {
-                      id: com.communityId,
-                      name: (com.shortTitle) ? com.shortTitle : com.title,
-                      logoUrl: com.logoUrl
-                    };
-                    this.header = {
-                      url: 'https://' + (this.properties.environment == 'beta' ? 'beta.' : '') + this.community.id + '.openaire.eu',
-                      title: this.community.name,
-                      logoUrl: this.community.logoUrl,
-                      logoSmallUrl: this.community.logoUrl,
-                      position: 'left',
-                      badge: true
-                    };
-                    this.communityType = com.type;
-                    this.menuItems = [
-                      {
-                        rootItem: new MenuItem('dashboard', 'Overview', '/dashboard', '/dashboard', false, [], null, {communityId: com.communityId}),
-                        items: []
-                      }
-                    ];
-                  } else if (countCommunities === 1 && index_managerOfCommunity != null) {
-                    this.community = {
-                      id: communities[index_managerOfCommunity].communityId,
-                      name: (communities[index_managerOfCommunity].shortTitle) ? communities[index_managerOfCommunity].shortTitle : com.title,
-                      logoUrl: communities[index_managerOfCommunity].logoUrl
-                    };
-                    this.header = {
-                      url: 'https://' + (this.properties.environment == 'beta' ? 'beta.' : '') + this.community.id + '.openaire.eu',
-                      title: this.community.name,
-                      logoUrl: this.community.logoUrl,
-                      logoSmallUrl: this.community.logoUrl,
-                      position: 'left',
-                      badge: true
-                    };
-                    this.menuItems = [
-                      {
-                        rootItem: new MenuItem('dashboard', 'Overview', '/dashboard', '/dashboard', false, [], null, {communityId: communities[index_managerOfCommunity].communityId}),
-                        items: []
-                      }
-                    ];
-                  }
-                }
-                if (!this.communityId || this.communityId === '') {
-                  this.header = {
-                    route: "/",
-                    url: null,
-                    title: 'connect-admin',
-                    logoUrl: this.logoPath + 'logo-large-connect.png',
-                    logoSmallUrl:this.logoPath + 'logo-small-connect.png',
-                    position:'left',
-                    badge:true
-                  };
-                  this.community = null;
-                }
-                if (this.communityId) {
-                  this.userMenuItems.push(new MenuItem('manage-user-notifications', 'Manage notification settings', '', '/manage-user-notifications', false, [], [], {communityId: this.communityId}));
-                  this.userMenuItems.push(new MenuItem('personal', 'Manage Personal Info', '', '/personal', false, [], [], {communityId: this.communityId}));
-                  this.userMenuItems.push(new MenuItem('', 'Support', 'https://openaire-connect.d4science.org/group/openaire-connect-gateway/explore?siteId=172366611', '', false, [], [], {}));
-                }
-                this.showMenu = true;
-                this.buildSideBar();
-              },
-              error => {
-                if ((this.communityId && this.communityId !== '') || window.location.pathname === '/') {
-                  UIkit.notification({
-                    message: '<strong>System error retrieving communities.<strong>',
-                    status: 'warning',
-                    timeout: 3000,
-                    pos: 'top-center'
-                  });
-                }
-              }
-            );
-          });
-        });
-      });
   }
-
+  
-  private buildSideBar() {
+  private buildMenu() {
-    this.sideMenuItems = [];
+    this.menuItems = [];
-    this.showSidebar = false;
+    this.userMenuItems = [];
-    if ((!this.communityId || this.communityId == '') && this.isPortalAdministrator) {
+    this.sideBarItems = [];
-      const adminTools: SideMenuItem = {
+    if (this.user) {
-        rootItem: new MenuItem('adminTools', 'Admin Tools', '',
+      if (this.isCurator()) {
-          '', false, [], [], null),
+        this.userMenuItems.push(new MenuItem("", "Manage communities",
-        items: [],
+          "", "/", false, [], [], {}));
-        ukIcon: 'desktop'
-      };
-      adminTools.items.push({
-          rootItem: new MenuItem('communities', 'Communities', '/communities',
-            '/communities', false, [], [], null),
-          items: []
-        }
-      );
-      adminTools.items.push({
-          rootItem: new MenuItem('classes', 'Classes', '/classes',
-            '/classes', false, [], [], null),
-          items: []
-        }
-      );
-      adminTools.items.push({
-          rootItem: new MenuItem('pages', 'Pages', '/pages',
-            '/pages', false, [], [], null),
-          items: []
-        }
-      );
-      adminTools.items.push({
-          rootItem: new MenuItem('entities', 'Entities', '/entities',
-            '/entities', false, [], [], null),
-          items: []
-        }
-      );
-      this.sideMenuItems.push(adminTools);
-      this.sideMenuItems.push({
-        rootItem: new MenuItem('communities', 'Manage Communities', '/',
-          '/', false, [], [], null),
-        items: [],
-        ukIcon: 'cog'
-      });
-      this.sideMenuItems.push({
-        rootItem: new MenuItem('communities', 'Explore', '',
-          '/dashboard', false, [], [], {communityId: 'openaire'}),
-        items: [],
-        ukIcon: 'cog'
-      });
-      this.sideMenuItems.push({
-        rootItem: new MenuItem('communities', 'Connect', '',
-          '/dashboard', false, [], [], {communityId: 'connect'}),
-        items: [],
-        ukIcon: 'cog'
-      });
-    } else if (this.communityId && this.communityId !== '') {
-      this.sideMenuItems.push({
-        rootItem: new MenuItem('overview', 'Overview', '/dashboard',
-          '/dashboard', false, [], [], {communityId: this.communityId}),
-        items: [],
-        ukIcon: 'home'
-      });
-      if (this.isPortalAdministrator) {
-        const adminTools: SideMenuItem = {
-          rootItem: new MenuItem('adminTools', 'Admin Tools', '/communities',
-            '/communities', false, [], [], null),
-          items: [],
-          ukIcon: 'desktop'
-        };
-        this.sideMenuItems.push(adminTools);
       }
-      if (this.communityId !== 'openaire' && this.communityId !== 'connect') {
+      if (Session.isPortalAdministrator(this.user)) {
-        const community: SideMenuItem = {
+        this.userMenuItems.push(new MenuItem("adminOptions", "Super Admin options", "", "/admin-tools/portals", false, [], [], {}));
-          rootItem: new MenuItem('community', 'Community', '',
+        this.userMenuItems.push(new MenuItem("connectOptions", "Connect portal options", "", "/connect/admin-tools/pages", false, [], [], {}));
-            '', false, [], [], null),
+        this.userMenuItems.push(new MenuItem("exploreOptions", "Explore portal options", "", "/openaire/admin-tools/pages", false, [], [], {}));
-          items: [],
+  
-          ukIcon: 'album'
-        };
-        community.items.push({
-          rootItem: new MenuItem('communityProfile', 'Community Profile', '/community-edit-form',
-            '/community-edit-form', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-        community.items.push({
-          rootItem: new MenuItem('communityAffiliations', 'Organizations', '/organizations',
-            '/organizations', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-        /*community.items.push({
-          rootItem: new MenuItem('layout', 'Customize Layout', '/customize-layout',
-            '/customize-layout', false, [], [], {communityId: this.communityId}),
-          items: []
-        });*/
-        this.sideMenuItems.push(community);
-        const communityContent: SideMenuItem = {
-          rootItem: new MenuItem('communityContent', 'Community Content', '',
-            '', false, [], [], null),
-          items: [],
-          ukIcon: 'list'
-        };
-        communityContent.items.push({
-            rootItem: new MenuItem('projects', 'Projects', '/manage-projects',
-              '/manage-projects', false, [], [], {communityId: this.communityId}),
-            items: []
-          }
-        );
-        communityContent.items.push({
-          rootItem: new MenuItem('contentProviders', 'Content providers', '/manage-content-providers',
-            '/manage-content-providers', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-        if (this.communityType && this.communityType != 'ri') {
-          communityContent.items.push({
-            rootItem: new MenuItem('subjects', 'Subjects', '/manage-subjects',
-              '/manage-subjects', false, [], [], {communityId: this.communityId}),
-            items: []
-          });
-        }
-        communityContent.items.push({
-          rootItem: new MenuItem('zenodoCommunities', 'Zenodo communities', '/manage-zenodo-communities',
-            '/manage-zenodo-communities', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-        this.sideMenuItems.push(communityContent);
-      }
-      const entities: SideMenuItem = {
-        rootItem: new MenuItem('entitiesPages', 'Entities & pages', '',
-          '', false, [], [], null),
-        items: [],
-        ukIcon: 'world'
-      };
-      entities.items.push({
-        rootItem: new MenuItem('entities', 'Activate Entities', '/entities',
-          '/entities', false, [], [], {communityId: this.communityId}),
-        items: []
-      });
-      const pages: MenuItem[] = [];
-      pages.push(new MenuItem('search', 'Search', '/pages',
-        '/pages', false, [], [], {communityId: this.communityId, type: 'search'}));
-      pages.push(new MenuItem('link', 'Link', '/pages',
-        '/pages', false, [], [], {communityId: this.communityId, type: 'link'}));
-      pages.push(new MenuItem('share', 'Share', '/pages',
-        '/pages', false, [], [], {communityId: this.communityId, type: 'share'}));
-      pages.push(new MenuItem('landing', 'Landing', '/pages',
-        '/pages', false, [], [], {communityId: this.communityId, type: 'landing'}));
-      // pages.push(new MenuItem('html', 'HTML', '/pages',
-      //   '/pages', false, [], [], {communityId: this.communityId, type: 'html'}));
-      pages.push(new MenuItem('other', 'Other', '/pages',
-        '/pages', false, [], [], {communityId: this.communityId, type: 'other'}));
-      entities.items.push({
-        rootItem: new MenuItem('pages', 'Pages', '/pages',
-          '/pages', false, [], [], {communityId: this.communityId}),
-        items: pages
-      });
-      this.sideMenuItems.push(entities);
-      const help: SideMenuItem = {
-        rootItem: new MenuItem('help', 'Help Texts', '',
-          '', false, [], [], null),
-        items: [],
-        ukIcon: 'file-edit'
-      };
-      help.items.push({
-        rootItem: new MenuItem('pages', 'Page Help Texts', '/pageContents',
-          '/pageContents', false, [], [], {communityId: this.communityId}),
-        items: []
-      });
-      if (this.communityId === 'openaire' || this.communityId === 'connect') {
-        help.items.push({
-          rootItem: new MenuItem('classes', 'Class Help Texts', '/classContents',
-            '/classContents', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-      }
-      this.sideMenuItems.push(help);
-      if (this.communityId !== 'openaire' && this.communityId !== 'connect') {
-        const stats: SideMenuItem = {
-          rootItem: new MenuItem('stats', 'Statistics & Charts', '/stats',
-            '/stats', false, [], [], {communityId: this.communityId}),
-          items: [],
-          ukIcon: 'image'
-        };
-        this.sideMenuItems.push(stats);
-        const claims: SideMenuItem = {
-          rootItem: new MenuItem('claims', 'Links', '/claims',
-            '/claims', false, [], [], {communityId: this.communityId}),
-          items: [],
-          ukIcon: 'link'
-        };
-        this.sideMenuItems.push(claims);
-        if (this.communityType && this.communityType === 'ri') {
-          const mining: SideMenuItem = {
-            rootItem: new MenuItem('mining', 'Text Mining Rules', '/mining/manage-profiles',
-              '/mining/manage-profiles', false, [], [], {communityId: this.communityId}),
-            items: [],
-            ukIcon: 'settings'
-          };
-          this.sideMenuItems.push(mining);
-        }
-        const users: SideMenuItem = {
-          rootItem: new MenuItem('users', 'Users', '',
-            '', false, [], [], null),
-          items: [],
-          ukIcon: 'user'
-        };
-        users.items.push({
-          rootItem: new MenuItem('invite', 'Invite to Subscribe', 'https://beta.' + this.communityId + '.openaire.eu/invite',
-            '', false, [], [], null),
-          items: []
-        });
-        users.items.push({
-          rootItem: new MenuItem('subscribers', 'Subscribers', '/manage-subscribers',
-            '/manage-subscribers', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-        users.items.push({
-          rootItem: new MenuItem('personalInfo', 'Personal Info', '/personal',
-            '/personal', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-        users.items.push({
-          rootItem: new MenuItem('notifications', 'Notification settings', '/manage-user-notifications',
-            '/manage-user-notifications', false, [], [], {communityId: this.communityId}),
-          items: []
-        });
-        this.sideMenuItems.push(users);
       }
+      this.userMenuItems.push(new MenuItem("", "User information", "", "/user-info", false, [], [], {}));
     }
-    if (this.sideMenuItems.length > 0) {
+    if (this.community) {
-      this.showSidebar = true;
+      this.headerLogoUrl = this.community.logoUrl;
+      this.headerUrl = 'https://' + ((properties.environment !== 'production')?'beta.':'') + this.community.communityId + '.openaire.eu';
+      this.menuHeader = {
+        route: "/" + this.community.communityId,
+        url: null,
+        title: 'Admin - ' + this.community.shortTitle,
+        logoUrl: null,
+        logoSmallUrl: null,
+        position: 'center',
+        badge: false,
+        stickyAnimation: false
+      };
+      this.sideBarItems.push(new MenuItem("community", "Community Info", "", "/" + this.community.communityId, false, [], [], {}, null, null, null, "/" + this.community.communityId + "/info"));
+      this.sideBarItems.push(new MenuItem("users", "Users", "", "/" + this.community.communityId + "/users", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/users"));
+      this.sideBarItems.push(new MenuItem("admin-tools", "Pages & Entities", "", "/" + this.community.communityId + "/admin-tools/pages", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/admin-tools"));
+      this.sideBarItems.push(new MenuItem("customization", "Customization", "", "/" + this.community.communityId + "/customize-layout", false, [], [], {}));
+      if (this.community.type === 'ri') {
+        this.sideBarItems.push(new MenuItem("mining", "Mining", "", "/" + this.community.communityId + "/mining/manage-profiles", false, [], [], {}, null, null, null, "/" + this.community.communityId + "/mining"));
+      }
+      this.specialSideBarMenuItem = new MenuItem("back", "Manage communities", "", "/", false, [], null, {});
+      this.specialSideBarMenuItem.icon = '<span class="uk-icon-button small uk-icon uk-button-secondary">' + arrow_left.data + '</span>';
+      this.specialSideBarMenuItem.customClass = 'uk-text-uppercase uk-text-bold uk-text-secondary';
+    } else {
+      this.headerLogoUrl = null;
+      this.headerUrl = 'https://' + ((properties.environment !== 'production')?'beta.':'') + 'connect.openaire.eu';
+      this.menuHeader = {
+        route: null,
+        url: null,
+        title: 'Admin - Research Community Dashboard',
+        logoUrl: null,
+        logoSmallUrl: null,
+        position: 'center',
+        badge: false,
+        stickyAnimation: false
+      };
+      this.sideBarItems.push(new MenuItem("communities", "Manage Communities", "", "/", false, [], [], {}));
+      this.specialSideBarMenuItem = null;
     }
   }
+  
+  private isCurator() {
+    return this.user && (Session.isPortalAdministrator(this.user) || Session.isCommunityCurator(this.user) || Session.isKindOfCommunityManager(this.user));
+  }
 }

src/app/app.module.ts

@@ -1,65 +1,59 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import {BrowserModule} from '@angular/platform-browser';
-import { HttpClientModule } from '@angular/common/http';
+import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
-import { AppComponent } from './app.component';
+import {AppComponent} from './app.component';
-import { AppRoutingModule} from './app.routing';
+import {AppRoutingModule} from './app.routing';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import {ReactiveFormsModule} from '@angular/forms';
-
-import { HelpContentService } from './services/help-content.service';
-
 import {NavigationBarModule} from './openaireLibrary/sharedComponents/navigationBar.module';
-import { CookieLawModule } from './openaireLibrary/sharedComponents/cookie-law/cookie-law.module';
-
 import {BottomModule} from './openaireLibrary/sharedComponents/bottom.module';
-import { ConnectAdminLoginGuard} from './openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
+import {ConnectAdminLoginGuard} from './openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-import { EnvironmentSpecificResolver} from './openaireLibrary/utils/properties/environmentSpecificResolver';
-import { EnvironmentSpecificService} from './openaireLibrary/utils/properties/environment-specific.service';
-
-import {CommunitiesService} from './openaireLibrary/connect/communities/communities.service';
-import {CommunityErrorPageComponent} from './openaireLibrary/connect/communityGuard/communityErrorPage.component';
 import {IsCommunity} from './openaireLibrary/connect/communityGuard/isCommunity.guard';
 import {AdminErrorPageComponent} from './pages/error/errorPage.component';
 import {ErrorModule} from './openaireLibrary/error/error.module';
 import {TitleCasePipe} from '@angular/common';
-
-import {AlertModalModule} from './openaireLibrary/utils/modal/alertModal.module';
-import {FABModule} from './utils/fabModule.module';
-import {SafeHtmlPipeModule} from './openaireLibrary/utils/pipes/safeHTMLPipe.module';
 import {InteractiveMiningModule} from 'interactiveminingv3';
 import {CommunityService} from './openaireLibrary/connect/community/community.service';
 import {SubscribeService} from './openaireLibrary/utils/subscribe/subscribe.service';
 import {ConnectRIGuard} from './openaireLibrary/connect/communityGuard/connectRIGuard.guard';
-import {SideBarModule} from "./openaireLibrary/sharedComponents/sidebar/sideBar.module";
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {CommunityErrorModule} from './openaireLibrary/connect/communityGuard/communityError.module';
+import {LoadingModule} from "./openaireLibrary/utils/loading/loading.module";
+import {SideBarModule} from "./openaireLibrary/dashboard/sharedComponents/sidebar/sideBar.module";
+import {SharedModule} from "./openaireLibrary/shared/shared.module";
+import {ErrorInterceptorService} from "./openaireLibrary/error-interceptor.service";
+import {DEFAULT_TIMEOUT, TimeoutInterceptor} from "./openaireLibrary/timeout-interceptor.service";
+import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
+import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
 
 @NgModule({
-    imports: [
+  imports: [
-        AppRoutingModule,
+    AppRoutingModule,
-        BrowserModule,
+    BrowserModule,
-        HttpClientModule,
+    HttpClientModule,
-        FormsModule,
+    ReactiveFormsModule,
-        ReactiveFormsModule,
+    BottomModule, NavigationBarModule,
-        BottomModule, NavigationBarModule, CookieLawModule,
+    ErrorModule,
-        ErrorModule,
+    SharedModule,
-        AlertModalModule, SafeHtmlPipeModule, FABModule,
+    InteractiveMiningModule,
-        InteractiveMiningModule,
+    BrowserAnimationsModule, LoadingModule, SideBarModule
-        SideBarModule,
+  ],
-        BrowserAnimationsModule, CommunityErrorModule
+  declarations: [
-    ],
+    AppComponent,
-    declarations: [
+    AdminErrorPageComponent
-        AppComponent,
+  ],
-        // CommunityErrorPageComponent,
+  providers: [
-        AdminErrorPageComponent
+    SubscribeService,
-    ],
+    ConnectAdminLoginGuard, AdminLoginGuard, LoginGuard,
-    providers: [
+    IsCommunity, ConnectRIGuard, TitleCasePipe,
-        HelpContentService, CommunityService, SubscribeService,
+    {
-        ConnectAdminLoginGuard,
+      provide: HTTP_INTERCEPTORS,
-        EnvironmentSpecificResolver, EnvironmentSpecificService,
+      useClass: ErrorInterceptorService,
-        IsCommunity, ConnectRIGuard, CommunitiesService, TitleCasePipe
+      multi: true
-
+    },
-    ],
+    [{provide: HTTP_INTERCEPTORS, useClass: TimeoutInterceptor, multi: true}],
-    bootstrap: [ AppComponent ]
+    [{provide: DEFAULT_TIMEOUT, useValue: 30000}]
+  ],
+  bootstrap: [AppComponent]
 })
 
-export class AppModule { }
+export class AppModule {
+}

src/app/app.routing.ts

@@ -1,176 +1,70 @@
-/**
+import {NgModule} from '@angular/core';
- * Created by stefania on 9/16/16.
+import {PreloadAllModules, RouterModule, Routes} from '@angular/router';
- */
-import { NgModule} from '@angular/core';
-import { Routes, RouterModule} from '@angular/router';
 import {IsCommunity} from './openaireLibrary/connect/communityGuard/isCommunity.guard';
 import {ConnectAdminLoginGuard} from './openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-import {ConnectRIGuard} from './openaireLibrary/connect/communityGuard/connectRIGuard.guard';
-
-import {EnvironmentSpecificResolver} from './openaireLibrary/utils/properties/environmentSpecificResolver';
-
-import {CommunityErrorPageComponent} from './openaireLibrary/connect/communityGuard/communityErrorPage.component';
 import {AdminErrorPageComponent} from './pages/error/errorPage.component';
+import {AdminLoginGuard} from "./openaireLibrary/login/adminLoginGuard.guard";
+import {LoginGuard} from "./openaireLibrary/login/loginGuard.guard";
 
-const appRoutes: Routes = [
+const routes: Routes = [
     {
         path: '',
-        loadChildren: './pages/wellcome/wellcome.module#WellcomeModule',
+        loadChildren: './pages/manage-communities/manage-communities.module#ManageCommunitiesModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver }
+        canActivateChild: [LoginGuard]
-    },
-    {
-        path: 'dashboard',
-        loadChildren: './pages/dashboard/dashboard.module#DashboardModule',
-        resolve: {envSpecific: EnvironmentSpecificResolver}
-    },
-    {
-        path: 'manage-user-notifications',
-        loadChildren: './pages/usernotifications/manage-user-notifications.module#ManageUserNotificationsModule',
-        resolve: {envSpecific: EnvironmentSpecificResolver}
-    },
-    {
-        path: 'personal',
-        loadChildren: './pages/curator/curator.module#CuratorModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-      path: 'organizations',
-      loadChildren: './pages/affiliations/affiliations.module#AffiliationsModule',
-      resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'communities',
-        loadChildren: './pages/community/communities.module#CommunitiesModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'community-edit-form',
-        loadChildren: './pages/community/community-edit-form/community-edit-form.module#CommunityEditFormModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'manage-zenodo-communities',
-        loadChildren: './pages/zenodo-communities/zenodo-communities.module#ZenodoCommunitiesModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'manage-subscribers',
-        loadChildren: './pages/subscribers/manage-subscribers.module#ManageSubscribersModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'manage-subjects',
-        loadChildren: './pages/subjects/subjects-edit-form/subjects-edit-form.module#SubjectsEditFormModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'entities',
-        loadChildren: './pages/entity/entities.module#EntitiesModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'classes',
-        loadChildren: './pages/divId/divIds.module#DivIdsModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'pages',
-        loadChildren: './pages/page/pages.module#PagesModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'pageContents',
-        loadChildren: './pages/helpcontent/page-help-contents.module#PageHelpContentsModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'pageContents/new',
-        loadChildren: './pages/helpcontent/new-page-help-content.module#NewPageHelpContentModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'pageContents/edit',
-        loadChildren: './pages/helpcontent/edit-page-help-content.module#EditPageHelpContentModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'classContents',
-        loadChildren: './pages/divhelpcontent/div-help-contents.module#DivHelpContentsModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'classContents/new',
-        loadChildren: './pages/divhelpcontent/new-div-help-content.module#NewDivHelpContentModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'classContents/edit',
-        loadChildren: './pages/divhelpcontent/edit-div-help-content.module#EditDivHelpContentModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'htmlPageContent/edit',
-        loadChildren: './pages/htmlpagecontent/edit-html-page-content.module#EditHtmlPageContentModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },
-    {
-        path: 'claims',
-        loadChildren: './pages/claims/claims.module#ClaimsModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
     },
     {
         path: 'reload',
         loadChildren: './reload/libReload.module#LibReloadModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
+        data: {hasSidebar: false, hasHeader: false}
     },
     {
         path: 'user-info',
         loadChildren: './login/libUser.module#LibUserModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
+        data: {hasSidebar: false}
+    },
+    {   path: 'error',
+        pathMatch: 'full',
+        component: AdminErrorPageComponent,
+        data: {hasSidebar: false}
     },
     {
-        path: 'stats',
+        path: 'connect/admin-tools',
-        loadChildren: './pages/stats/stats.module#StatsModule',
+        loadChildren: './pages/admin-tools/admin-tools-routing.module#AdminToolsRoutingModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
+        canActivateChild: [AdminLoginGuard],
+        data: {portal: 'connect'}
     },
     {
-        path: 'manage-projects',
+        path: 'openaire/admin-tools',
-        loadChildren: './pages/community/projects/communityProjects.module#CommunityProjectsModule',
+        loadChildren: './pages/admin-tools/admin-tools-routing.module#AdminToolsRoutingModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
+        canActivateChild: [AdminLoginGuard],
+        data: {portal: 'openaire'}
     },
     {
-        path: 'manage-content-providers',
+        path: 'admin-tools',
-        loadChildren: './pages/community/content-providers/communityContentProviders.module#CommunityContentProvidersModule',
+        loadChildren: './pages/admin-tools/portal-admin-tools-routing.module#PortalAdminToolsRoutingModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
+        canActivateChild: [AdminLoginGuard]
-    },
-    /*{
-        path: 'customize-layout',
-        loadChildren: './pages/customization/customization.module#CustomizationModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
-    },*/
-    {
-        path: 'manage-content-providers/criteria',
-        loadChildren: './pages/community/content-providers/criteria/criteria.module#CriteriaModule',
-        resolve: { envSpecific: EnvironmentSpecificResolver  }
     },
     {
-        path: 'mining',
+        path: ':community', redirectTo: '/:community/info/profile', pathMatch: 'full'
-        loadChildren: './pages/mining/mining.module#MiningModule',
-        canLoad: [IsCommunity, ConnectAdminLoginGuard, ConnectRIGuard]
     },
     {
-        path: 'errorcommunity',
+        path: ':community',
-        component: CommunityErrorPageComponent
+        loadChildren: './pages/community-routing.module#CommunityRoutingModule',
+        canActivateChild: [IsCommunity, ConnectAdminLoginGuard]
     },
     {   path: '**',
         pathMatch: 'full',
         component: AdminErrorPageComponent
     }
 
- ];
+];
 
 @NgModule({
-    imports: [ RouterModule.forRoot(appRoutes) ],
+    imports: [RouterModule.forRoot(routes, {
+        preloadingStrategy: PreloadAllModules,
+        onSameUrlNavigation: "reload",
+        relativeLinkResolution: 'corrected'
+    })],
     exports: [ RouterModule ]
 })
 export class AppRoutingModule {}

src/app/pages/admin-tools/admin-tools-routing.module.ts

@@ -0,0 +1,41 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {
+        path: 'entities',
+        loadChildren: '../../openaireLibrary/dashboard/entity/entities.module#EntitiesModule',
+        pathMatch: 'full'
+      },
+      {
+        path: 'classContents',
+        loadChildren: '../../openaireLibrary/dashboard/divhelpcontent/class-help-contents.module#ClassHelpContentsModule',
+        pathMatch: 'full'
+      },
+      {
+        path: 'classContents/edit',
+        loadChildren: '../../openaireLibrary/dashboard/divhelpcontent/class-help-content-form.module#ClassHelpContentFormModule',
+        pathMatch: 'full'
+      },
+      {
+        path: 'helptexts',
+        loadChildren: '../../openaireLibrary/dashboard/helpTexts/page-help-contents.module#PageHelpContentsModule',
+        pathMatch: 'full'
+      },
+      {
+        path: 'helptexts/edit',
+        loadChildren: '../../openaireLibrary/dashboard/helpTexts/page-help-content-form.module#PageHelpContentFormModule',
+        pathMatch: 'full'
+      },
+      {
+        path: 'pages',
+        loadChildren: '../../openaireLibrary/dashboard/page/pages.module#PagesModule',
+        pathMatch: 'full'
+      }
+    ])
+  ]
+})
+export class AdminToolsRoutingModule {
+}

src/app/pages/admin-tools/portal-admin-tools-routing.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from "@angular/core";
+import {RouterModule} from "@angular/router";
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {path: '', loadChildren: './admin-tools-routing.module#AdminToolsRoutingModule'},
+    {path: 'portals', loadChildren: '../../openaireLibrary/dashboard/portal/portals.module#PortalsModule'},
+    {path: 'classes', loadChildren: '../../openaireLibrary/dashboard/divId/divIds.module#DivIdsModule'}
+  ])]
+})
+export class PortalAdminToolsRoutingModule {
+
+}

src/app/pages/affiliations/affiliations-routing.module.ts

@@ -1,13 +1,11 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {AffiliationsComponent} from './affiliations.component';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
 
 @NgModule({
   imports: [
     RouterModule.forChild([
-      { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: AffiliationsComponent}
+      { path: '', component: AffiliationsComponent}
     ])
   ]
 })

src/app/pages/affiliations/affiliations.component.html

@@ -1,135 +1,83 @@
-<ng-template #card let-organization="organization">
+<div page-content>
-  <div class="uk-card-media-top affiliation-logo uk-padding-small">
+  <div header>
-    <img *ngIf= "organization.logo_url != null && organization.logo_url != '' " class="uk-text-center"
+    <community-info tab="organizations"></community-info>
-         src="{{urlPrefix(organization.logo_url) + organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">
+    <div class="uk-flex uk-flex-right@m uk-flex-center uk-margin-small-top">
-    <span  *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">
+      <a *ngIf="!organizationsEnabled" (click)="enableAffiliations()" class="uk-flex uk-flex-middle uk-text-uppercase uk-margin-right">
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
+        <button class="large uk-icon-button uk-button-secondary">
-          </span>
+          <icon name="preview"></icon>
-  </div>
+        </button>
-</ng-template>
+        <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
-
+          Enable Organizations Page
-<ng-template #affiliations_list>
+        </button>
-  <div class="uk-margin uk-flex uk-flex-middle" uk-grid>
-    <h4 class="uk-width-2-5">
-      <span *ngIf="curatorAffiliations">My Affiliations</span>
-      <span *ngIf="!curatorAffiliations">Related Organizations</span>
-    </h4>
-    <div class="uk-width-expand">
-      <button class="uk-button portal-button uk-align-right" (click)="initAffiliation()">
-        <span uk-icon="plus"></span>
-        <span *ngIf="curatorAffiliations">Add new Affiliation</span>
-        <span *ngIf="!curatorAffiliations">Add new Organization</span>
-      </button>
-    </div>
-
-    <div *ngIf="!curatorAffiliations && organizationsPageId" class="uk-width-1-1 uk-margin">
-      Do you need to add more information about the Related Organizations? Click
-<!--      classContentId: ,-->
-<!--      /edit-->
-      <a [queryParams]="{communityId: communityId, pageId: organizationsPageId}" routerLink="/pageContents"
-         routerLinkActive="router-link-active">
-        here
       </a>
-      .
+      <a (click)="editAffiliationOpen()" class="uk-flex uk-flex-middle uk-text-uppercase">
-      <div *ngIf="!organizationsEnabled" class="uk-alert uk-alert-warning" role="alert">
+        <button class="large uk-icon-button uk-button-secondary">
-            <span class="uk-margin-small-right uk-icon" uk-icon="warning">
+          <icon name="add"></icon>
-            </span>
+        </button>
-        Community's Organizations page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
+        <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
+          Add New Organization
+        </button>
+      </a>
+    </div>
+  </div>
+  <div inner>
+    <div *ngIf="loading" class="uk-position-center">
+      <loading></loading>
+    </div>
+    <div *ngIf="!loading && affiliations">
+      <div *ngIf="affiliations.length == 0"
+           class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
+        <div>No organizations found</div>
+      </div>
+      <div *ngIf="affiliations.length > 0">
+        <no-load-paging (pageChange)="updatePage($event)" [page]="page" [totalResults]="affiliations.length"
+                        [pageSize]="pageSize" [type]="'supporting organization' + (affiliations.length > 1?'s':'')">
+        </no-load-paging>
+        <div class="uk-margin-medium">
+          <div *ngFor="let affiliation of currentPage; let i=index"
+               class="uk-card uk-card-default uk-card-body uk-text-small uk-margin-bottom">
+            <div class="uk-grid uk-grid-divider uk-flex-middle" uk-grid>
+              <div class="uk-width-expand@m uk-width-1-1 uk-grid uk-flex-middle" uk-grid>
+                <div class="uk-width-small">
+                  <img [src]="affiliation.logo_url | urlPrefix">
+                </div>
+                <div class="uk-width-auto">
+                  <h6>{{affiliation.name}}</h6>
+                  URL: <a [href]="affiliation.website_url | urlPrefix"  target="_blank">{{affiliation.website_url}}</a>
+                </div>
+              </div>
+              <div class="uk-width-auto@m uk-width-1-1">
+                <div class="uk-width-1-1 uk-flex uk-flex-center">
+                  <div class="uk-padding-small uk-padding-remove-horizontal">
+                    <a (click)="editAffiliationOpen(getIndex(i))" class="uk-button action uk-flex uk-flex-middle">
+                      <icon name="edit"></icon>
+                      <span class="uk-margin-small-left">Edit Organization</span>
+                    </a>
+                    <a (click)="deleteAffiliationOpen(getIndex(i))" class="uk-button action uk-flex uk-flex-middle uk-margin-small-top">
+                      <icon name="remove" ratio="0.9"></icon>
+                      <span class="uk-margin-small-left">Delete Organization</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <no-load-paging (pageChange)="updatePage($event)" [page]="page" [totalResults]="affiliations.length"
+                        [pageSize]="pageSize" [type]="'supporting organization' + (affiliations.length > 1?'s':'')">
+        </no-load-paging>
       </div>
     </div>
   </div>
-
-  <ul [class]="'uk-list uk-list-divider uk-margin' + (curatorAffiliations ? ' uk-height-max-large uk-overflow-auto' : '')"
-      uk-height-match="target: > li > div > .uk-card; row: false">
-    <li *ngFor="let result of affiliations; let i=index"
-        class="uk-animation-fade uk-height-small uk-flex uk-flex-middle" uk-grid>
-      <div class="uk-width-1-5">
-        <a *ngIf="result.website_url" target="_blank" [href]="urlPrefix(result.website_url) + result.website_url"
-           class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">
-          <ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>
-        </a>
-        <span *ngIf="!result.website_url"
-              class="affiliation-content uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center">
-              <ng-container *ngTemplateOutlet="card; context: { organization: result, fullView: true}"></ng-container>
-            </span>
-      </div>
-      <div class="uk-width-3-5">
-        <h5 title="{{result.name}}">{{_format(result.name)}}</h5>
-        <a href="{{urlPrefix(affiliation.website_url) + result.website_url}}" title="{{result.website_url}}" class="uk-margin-auto-top" target="_blank">{{_format(result.website_url)}}</a>
-      </div>
-      <div class="uk-width-1-5">
-        <button class="uk-icon-button uk-icon uk-button-secondary uk-margin-small-right uk-margin-small-bottom" title="Edit" uk-icon="pencil" (click)="chooseAffiliation(i, 'edit')"></button>
-        <button class="uk-icon-button uk-icon uk-button-danger uk-margin-small-bottom" title="Remove" uk-icon="minus" (click)="chooseAffiliation(i)"></button>
-      </div>
-    </li>
-  </ul>
-</ng-template>
-
-<div *ngIf="!curatorAffiliations">
-<!--  <div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Edit Community Affiliations</div>-->
-  <div class="uk-flex" uk-grid>
-    <div *ngIf="showLoading" class="uk-align-center uk-animation-fade uk-width-1-2" role="alert">
-      <span class="loading-gif uk-align-center"></span>
-    </div>
-    <div *ngIf="!showLoading" class="uk-padding-large">
-      <div *ngIf="message" [class]="'uk-animation-fade uk-alert uk-alert-' + messageType" role="alert">
-        {{message}}
-      </div>
-      <ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>
-    </div>
-  </div>
 </div>
-<div *ngIf="curatorAffiliations">
+<modal-alert #affiliationModal [okDisabled]="affiliationFb && affiliationFb.invalid" (alertOutput)="editAffiliation()">
-  <ng-container *ngTemplateOutlet="affiliations_list;"></ng-container>
+  <form *ngIf="affiliationFb" [formGroup]="affiliationFb">
-</div>
+    <div class="uk-grid uk-padding uk-padding-remove-horizontal uk-child-width-1-1" uk-grid>
-
+      <div dashboard-input label="Name" placeholder="Write organization's name" [formInput]="affiliationFb.get('name')"></div>
-<modal-alert #affiliationModal [okDisabled]="isEmptyAffiliation()" (alertOutput)="addAffiliation()">
+      <div dashboard-input label="Logo URL" type="logoURL" placeholder="Write your organization's logo URL" [formInput]="affiliationFb.get('logo_url')"></div>
-  <table class="uk-align-center">
+      <div dashboard-input label="Website URL" type="URL" placeholder="Write your organization's website URL" [formInput]="affiliationFb.get('website_url')"></div>
-    <tbody class="uk-table">
+    </div>
-    <tr>
+  </form>
-      <td for="name" class="uk-text-bold uk-text-right">
-        Name
-        <span class="uk-text-danger uk-text-bold">
-            *
-          </span>
-        :
-      </td>
-      <td class="uk-text-left">
-        <input  type="text"
-                class="form-control uk-input uk-width-medium@l uk-width-medium@m" id="afname"
-                [(ngModel)]="affiliation.name" required>
-      </td>
-    </tr>
-    <tr>
-      <td for="name" class="uk-text-bold uk-text-right">
-        Logo Url
-        <span class="uk-text-danger uk-text-bold">
-            *
-          </span>
-        :
-      </td>
-      <td class="uk-text-left">
-        <input  type="text"
-                class="form-control uk-input" id="logourl"
-                [(ngModel)]="affiliation.logo_url" required>
-      </td>
-    </tr>
-    <tr>
-      <td for="name" class="uk-text-bold uk-text-right">
-        Website Url
-        <span class="uk-text-danger uk-text-bold">
-            *
-          </span>
-        :
-      </td>
-      <td class="uk-text-left">
-        <input  type="text"
-                class="form-control uk-input" id="websiteurl"
-                [(ngModel)]="affiliation.website_url" required>
-      </td>
-    </tr>
-    </tbody>
-  </table>
 </modal-alert>
 <modal-alert #removeAffiliationModal (alertOutput)="removeAffiliation()">
 </modal-alert>

src/app/pages/affiliations/affiliations.component.ts

@@ -1,288 +1,210 @@
-import {Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
-
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
 import {Affiliation} from '../../openaireLibrary/utils/entities/CuratorInfo';
-import {HelperFunctions} from '../../openaireLibrary/utils/HelperFunctions.class';
 import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
-import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
 import {AffiliationService} from "../../openaireLibrary/connect/affiliations/affiliation.service";
 import {HelpContentService} from "../../services/help-content.service";
 import {Title} from '@angular/platform-browser';
 import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
+import {properties} from "../../../environments/environment";
+import {Page} from "../../openaireLibrary/utils/entities/adminTool/page";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {Subscription} from "rxjs";
+import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
+
+declare var UIkit;
 
 @Component({
   selector: 'affiliations',
   templateUrl: './affiliations.component.html',
 })
-
+export class AffiliationsComponent implements OnInit, OnDestroy {
-export class AffiliationsComponent implements OnInit {
+  public loading = true;
-
+  public properties: EnvProperties = properties;
+  public index = 0;
+  public affiliations: Affiliation[];
+  public affiliationFb: FormGroup;
+  public communityId: string;
+  public organizationsPage: Page;
+  public page: number = 1;
+  public pageSize: number = 10;
+  private subs: any[] = [];
   @ViewChild('affiliationModal') affiliationModal: AlertModal;
   @ViewChild('removeAffiliationModal') removeAffiliationModal: AlertModal;
-  public showLoading = false;
+  
-  public message = '';
+  constructor(private route: ActivatedRoute,
-  public messageType = '';
+              private router: Router,
-
-  public affiliation: Affiliation = new Affiliation();
-  public properties: EnvProperties = null;
-
-  private index = 0;
-  private maxCharacters = 70;
-
-  @Input() hasChanged: boolean = false;
-  @Input() curatorAffiliations: boolean = false;
-  @Input() public affiliations: Affiliation[] = [];
-  @Output() affiliationsChange: EventEmitter<boolean> = new EventEmitter();
-  @Output() resetCuratorMessages: EventEmitter<boolean> = new EventEmitter();
-  public communityId: string;
-  public organizationsPageId: string;
-  public organizationsEnabled = false;
-
-  constructor(private element: ElementRef,
-              private route: ActivatedRoute,
-              private _router: Router,
               private title: Title,
+              private fb: FormBuilder,
+              private communityService: CommunityService,
               private affiliationService: AffiliationService,
-              private _helpContentService: HelpContentService) {
+              private helpContentService: HelpContentService) {
   }
-
+  
-
+  
   ngOnInit() {
-    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+    this.loading = true;
-      this.properties = data.envSpecific;
+    this.subs.push(this.route.params.subscribe(params => {
-      if(!this.curatorAffiliations) {
+      this.communityId = params['community'];
-        this.title.setTitle('Administration Dashboard | Related Organizations');
+      this.title.setTitle(this.communityId.toUpperCase() + ' | Organizations');
-      }
+      this.getAffiliations();
-      if (!Session.isLoggedIn()) {
+      this.organizationsPageStatus();
-        this._router.navigate(['/user-info'], {
+    }));
-          queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
-        });
-      } else {
-        this.showLoading = true;
-        this.message = '';
-
-        this.route.queryParams.subscribe(
-          communityId => {
-            this.communityId = communityId['communityId'];
-
-            if(!this.curatorAffiliations) {
-              this.getAffiliations();
-            }
-            this.organizationsPageStatus();
-          }
-        );
-      }
-    });
   }
-
+  
+  ngOnDestroy() {
+    this.subs.forEach(sub => {
+      if (sub instanceof Subscription) {
+        sub.unsubscribe();
+      }
+    })
+  }
+  
   getAffiliations() {
+    this.loading = true;
     this.affiliationService.initAffiliations(this.communityId);
     this.affiliationService.affiliations.subscribe(
       affiliations => {
         this.affiliations = affiliations;
-        this.getOrganizationsPageId();
+        this.loading = false;
-        //this.showLoading = false;
       },
       error => {
-        console.error("Affiliations Component: Error getting affiliations for community with id: "+this.communityId, error);
+        console.error("Affiliations Component: Error getting affiliations for community with id: " + this.communityId, error);
-        this.showLoading = false;
+        this.loading = false;
       }
     );
   }
-
+  
-  getOrganizationsPageId() {
+  public get organizationsEnabled(): boolean {
-    this._helpContentService.getCommunityPageByRoute("/organizations", this.properties.adminToolsAPIURL, this.communityId).subscribe(
+    return !this.organizationsPage || this.organizationsPage.isEnabled;
-      page => {
-        if(page) {
-          this.organizationsPageId = page._id;
-        }
-        this.showLoading = false;
-      },
-      error => {
-        console.error("Affiliations Component: Error getting page with route '/organizations' for community with id: "+this.communityId, error);
-        this.showLoading = false;
-      }
-    );
   }
-
+  
-  initAffiliation(affiliation: Affiliation = null) {
+  editAffiliationOpen(index: number = -1) {
-    this.resetMessages();
+    let affiliation: Affiliation;
-
+    this.index = index;
-    if (affiliation) {
+    if (index === -1) {
-      this.affiliation = {...affiliation};
+      affiliation = new Affiliation();
-      if(!this.curatorAffiliations) {
+      affiliation.communityId = this.communityId;
-        this.affiliation.communityId = affiliation.communityId;
+      this.affiliationModal.alertTitle = 'Add Organization';
-        this.affiliation.id = affiliation.id;
+      this.affiliationModal.okButtonText = 'Add';
-      }
-      if(this.curatorAffiliations) {
-        this.affiliationModal.okButtonText = 'OK';
-      } else {
-        this.affiliationModal.okButtonText = 'Save Affiliation';
-      }
     } else {
-      this.index = -1;
+      affiliation = this.affiliations[this.index];
-      this.affiliation = new Affiliation();
+      this.affiliationModal.alertTitle = 'Edit Organization';
-      if(!this.curatorAffiliations) {
+      this.affiliationModal.okButtonText = 'Update';
-        this.affiliation.communityId = this.communityId;
-      }
     }
+    this.affiliationFb = this.fb.group({
+      communityId: this.fb.control(affiliation.communityId, Validators.required),
+      id: this.fb.control(affiliation.id),
+      name: this.fb.control(affiliation.name, Validators.required),
+      logo_url: this.fb.control(affiliation.logo_url, [Validators.required, StringUtils.urlValidator()]),
+      website_url: this.fb.control(affiliation.website_url, [Validators.required, StringUtils.urlValidator()])
+    });
     this.affiliationModal.okButtonLeft = false;
-    if(this.curatorAffiliations) {
+    this.affiliationModal.cancelButtonText = 'Cancel';
-      this.affiliationModal.okButtonText = 'OK';
-    } else {
-      this.affiliationModal.okButtonText = 'Save Affiliation';
-    }
     this.affiliationModal.open();
   }
-
+  
-  public chooseAffiliation(index: number, action: string = 'delete') {
+  deleteAffiliationOpen(index: number) {
-    this.resetMessages();
     this.index = index;
-    const affiliation: Affiliation = this.affiliations[index];
+    let affiliation: Affiliation = this.affiliations[index];
-    if (action === 'delete') {
+    this.removeAffiliationModal.alertTitle = 'Delete Organization';
-      this.removeAffiliationModal.message = 'Do you want to remove ' +
+    this.removeAffiliationModal.message = 'Do you want to remove <b>' +
-        affiliation.name +  ' from your Affiliations?';
+      affiliation.name + '</b> from Organizations?';
-      this.removeAffiliationModal.okButtonText = 'Yes';
+    this.removeAffiliationModal.okButtonText = 'Yes';
-      this.removeAffiliationModal.cancelButtonText = 'No';
+    this.removeAffiliationModal.cancelButtonText = 'No';
-      this.removeAffiliationModal.open();
+    this.removeAffiliationModal.open();
-    } else if (action === 'edit') {
-      this.initAffiliation(affiliation);
-    }
   }
-
+  
-  updateCommunityAffiliations(index: number) {
+  get currentPage(): Affiliation[] {
-    if (!Session.isLoggedIn()) {
+    if (this.affiliations) {
-      this._router.navigate(['/user-info'], {
+      return this.affiliations.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
-        queryParams:
-          {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
-      });
     } else {
-      HelperFunctions.scroll();
+      return [];
-
-        this.showLoading = true;
-
-        this.affiliationService.updateAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
-          this.affiliation).subscribe((affiliation) => {
-            if (affiliation) {
-              if (index === -1) {
-                this.affiliations.push(affiliation);
-              } else {
-                this.affiliations[index] = affiliation;
-              }
-              if(this.affiliation.id) {
-                this.handleUpdateSuccess('Your organization has been updated successfully!');
-              } else {
-                this.handleUpdateSuccess('Your organization has been saved successfully!');
-              }
-            }
-          },
-          error => {
-            if(this.affiliation.id) {
-              this.handleUpdateError('Your organization could not be updated. Try again later!', error);
-            } else {
-              this.handleUpdateError('Organization could not be saved. Try again later!', error);
-            }
-          });
     }
   }
-
+  
-  addAffiliation() {
+  getIndex(index: number): number {
-    if (!this.isEmptyAffiliation()) {
+    return (this.page - 1)*this.pageSize + index;
-          if (!this.curatorAffiliations) {
+  }
-            this.updateCommunityAffiliations(this.index);
+  
+  public updatePage(event) {
+    this.page = event.value;
+  }
+  
+  editAffiliation() {
+    this.loading = true;
+    this.affiliationService.updateAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
+      this.affiliationFb.value).subscribe((affiliation) => {
+        if (affiliation) {
+          if (this.index === -1) {
+            this.affiliations.push(affiliation);
+            this.page = Math.ceil(this.affiliations.length/this.pageSize);
           } else {
-            if (this.index === -1) {
+            this.affiliations[this.index] = affiliation;
-              this.affiliations.push(this.affiliation);
-            } else {
-              this.affiliations[this.index] = this.affiliation;
-            }
           }
-          this.change();
+          if (affiliation.id) {
-    }
+            this.handleUpdateSuccess('Your organization has been updated successfully!');
+          } else {
+            this.handleUpdateSuccess('Your organization has been saved successfully!');
+          }
+        }
+      },
+      error => {
+        this.handleUpdateError('An error has been occurred. Try again later!');
+      });
   }
-
+  
   removeAffiliation() {
-    if(!this.curatorAffiliations) {
+    this.loading = true;
-      HelperFunctions.scroll();
+    this.affiliationService.deleteAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
-
+      this.affiliations[this.index].id).subscribe((deleteOK) => {
-      this.showLoading = true;
+        this.affiliations.splice(this.index, 1);
-      this.affiliationService.deleteAffiliation(this.properties.communityAPI + this.communityId + '/organizations',
+        if (this.currentPage.length === 0) {
-        this.affiliations[this.index].id).subscribe((deleteOK) => {
+          this.page = 1;
-          this.affiliations.splice(this.index, 1);
-          this.handleUpdateSuccess('Organization has been deleted');
-        },
-        error => {
-          this.handleUpdateError('Organization could not be deleted. Try again later!', error);
         }
-      );
+        this.handleUpdateSuccess('Organization has been deleted');
-    } else {
+      },
-      this.affiliations.splice(this.index, 1);
+      error => {
-      this.change();
+        this.handleUpdateError('An error has been occurred. Try again later!');
-    }
+      });
   }
-
+  
   private organizationsPageStatus() {
-    this._helpContentService.getCommunityFull(this.communityId, this.properties.adminToolsAPIURL).subscribe((community) => {
+    this.helpContentService.getCommunityPagesByRoute(this.communityId, '/organizations', this.properties.adminToolsAPIURL).subscribe((page) => {
-      for(let page of community.pages) {
+      this.organizationsPage = page;
-        if(page['route'] === '/organizations') {
-          this.organizationsEnabled = page['isEnabled'];
-          return;
-        }
-      }
-      this.organizationsEnabled = false;
     })
   }
-
+  
-  private change() {
+  handleUpdateError(message: string) {
-    this.hasChanged = true;
+    UIkit.notification(message, {
-    if(this.curatorAffiliations) {
+      status: 'danger',
-      this.affiliationsChange.emit(this.hasChanged);
+      timeout: 6000,
-    }
+      pos: 'bottom-right'
+    });
+    this.loading = false;
   }
-
+  
-  private resetMessages() {
-    this.message = '';
-    if(this.curatorAffiliations) {
-      this.resetCuratorMessages.emit(true);
-    }
-  }
-
-  handleUpdateError(message: string, error) {
-    this.resetMessages();
-    this.message = message;
-    this.messageType = "warning";
-    console.log('Server responded: ', error);
-
-    this.showLoading = false;
-  }
-
   handleUpdateSuccess(message) {
-    this.resetMessages();
+    UIkit.notification(message, {
-    this.message = message;
+      status: 'success',
-    this.messageType = "success";
+      timeout: 6000,
-    this.showLoading = false;
+      pos: 'bottom-right'
+    });
+    this.loading = false;
   }
-
+  
-  isEmptyAffiliation(): boolean {
+  enableAffiliations() {
-    return ((!this.affiliation.name || this.affiliation.name === '') ||
+    this.helpContentService.togglePages(this.communityId, [this.organizationsPage._id], true, this.properties.adminToolsAPIURL).subscribe(() => {
-      (!this.affiliation.logo_url || this.affiliation.logo_url === '') ||
+      this.organizationsPage.isEnabled = true;
-      (!this.affiliation.website_url || this.affiliation.website_url === ''));
+      UIkit.notification('Organizations Page has been <b>enabled successfully</b>', {
+        status: 'success',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
+    }, error => {
+      this.handleUpdateError('An error has been occurred. Try again later!');
+    });
   }
-
-  _format(name: string){
-    if(name) {
-      return (((name).length > this.maxCharacters) ? (name.substring(0, (this.maxCharacters - ('...').length)) + '...') : name);
-    } else {
-      return null;
-    }
-  }
-
-  public urlPrefix(url: string): string {
-    return StringUtils.urlPrefix(url);
-  }
-
 }

src/app/pages/affiliations/affiliations.module.ts

@@ -1,31 +1,44 @@
 import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 
 import {AffiliationsComponent} from './affiliations.component';
 
 import {AffiliationsRoutingModule} from './affiliations-routing.module';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
 import {AffiliationService} from '../../openaireLibrary/connect/affiliations/affiliation.service';
 import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
 import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
+import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
+import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
+import {CommunityInfoModule} from "../community-info/community-info.module";
+import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
+import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
+import {add, edit, preview, remove} from "../../openaireLibrary/utils/icons/icons";
+import {NoLoadPaging} from "../../openaireLibrary/searchPages/searchUtils/no-load-paging.module";
+import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
+import {UrlPrefixModule} from "../../openaireLibrary/utils/pipes/url-prefix.module";
+import {HelpContentService} from "../../services/help-content.service";
 
 @NgModule({
   imports: [
     AffiliationsRoutingModule, CommonModule, FormsModule, RouterModule,
-    AlertModalModule
+    AlertModalModule, ReactiveFormsModule, InputModule, PageContentModule, CommunityInfoModule, IconsModule, NoLoadPaging, LoadingModule, UrlPrefixModule
   ],
   declarations: [
     AffiliationsComponent
   ],
   providers: [
-    AffiliationService, UtilitiesService, IsCommunity, ConnectAdminLoginGuard
+    AffiliationService, UtilitiesService, HelpContentService
   ],
   exports: [
     AffiliationsComponent
   ]
 })
 
-export class AffiliationsModule { }
+export class AffiliationsModule {
+  
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([add, preview, edit, remove])
+  }
+}

src/app/pages/claims/claims-routing.module.ts

@@ -1,13 +1,11 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
 import {ClaimsComponent} from './claims.component';
 
 @NgModule({
     imports: [
         RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ClaimsComponent}
+            { path: '',  component: ClaimsComponent}
         ])
     ]
 })

src/app/pages/claims/claims.component.ts

@@ -1,33 +1,48 @@
-
+import {Component, OnInit} from '@angular/core';
-import { Component, ViewChild, OnInit } from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
-import { ActivatedRoute } from '@angular/router';
+import {properties} from '../../../environments/environment';
-import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {Subscriber} from 'rxjs';
+import {Title} from "@angular/platform-browser";
 
 @Component({
-    selector: 'claims',
+  selector: 'claims',
-    template: `    <claims-admin fetchBy="Context" [fetchId]=communityPid [isConnect]="true" [claimsInfoURL]=claimsInfoURL [externalPortalUrl]="externalPortalUrl">
+  template: `
-    </claims-admin>`,
+    <div page-content class="admin-pages">
+      <div header>
+        <users-tabs tab="claims"></users-tabs>
+      </div>
+      <div inner>
+        <claims-admin fetchBy="Context" [fetchId]=communityId [isConnect]="true" [claimsInfoURL]=claimsInfoURL
+                      [externalPortalUrl]="externalPortalUrl">
+        </claims-admin>
+      </div>
+    </div>
+  `,
 })
 
 export class ClaimsComponent implements OnInit {
-
+  communityId: string;
-    communityPid:string;
+  claimsInfoURL: string;
-    claimsInfoURL:string;
+  externalPortalUrl = '';
-    externalPortalUrl:string ="";
+  sub;
-
+  
-    ngOnInit() {
+  constructor(private route: ActivatedRoute,
-
+              private title: Title) {
-            this.route.queryParams.subscribe(params => {
+  }
-              this.communityPid = params['communityId'];
+  
-
+  ngOnInit() {
-             });
+    this.sub = this.route.params.subscribe(params => {
-             this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+      this.communityId = params['community'];
-                    this.claimsInfoURL = data.envSpecific.claimsInformationLink;
+      this.title.setTitle(this.communityId.toUpperCase() + ' | Manage Links');
-                    console.log(this.claimsInfoURL);
+      this.claimsInfoURL = properties.claimsInformationLink;
-                    this.externalPortalUrl = "https://"+(data.envSpecific.environment =='beta'?'beta.':'')+((this.communityPid == "openaire")?"explore":this.communityPid)+".openaire.eu"
+      this.externalPortalUrl = 'https://' + (properties.environment == 'beta' ? 'beta.' : '') + ((this.communityId == 'openaire') ? 'explore' : this.communityId) + '.openaire.eu';
-            });
+    });
+    
+  }
+  
+  ngOnDestroy() {
+    if (this.sub instanceof Subscriber) {
+      this.sub.unsubscribe();
     }
-
+  }
-    constructor(private route: ActivatedRoute) {}
-
 }

src/app/pages/claims/claims.module.ts

@@ -2,9 +2,11 @@ import { NgModule } from '@angular/core';
 import {ClaimsAdminModule} from '../../openaireLibrary/claims/claimsAdmin/claimsAdmin.module';
 import {ClaimsComponent} from './claims.component';
 import {ClaimsRoutingModule} from './claims-routing.module';
+import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
+import {UsersTabsModule} from '../users/users-tabs.module';
 @NgModule({
     imports: [
-        ClaimsAdminModule, ClaimsRoutingModule
+        ClaimsAdminModule, ClaimsRoutingModule, PageContentModule, UsersTabsModule, PageContentModule
     ],
     declarations: [ClaimsComponent],
     exports: [ClaimsComponent]

src/app/pages/community-info/community-info-routing.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {ConnectCommunityGuard} from "../../openaireLibrary/connect/communityGuard/connectCommunityGuard.guard";
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {path: '', redirectTo: 'profile', pathMatch: 'full'},
+      {path: 'profile', loadChildren: './profile/profile.module#ProfileModule'},
+      {path: 'organizations', loadChildren: '../affiliations/affiliations.module#AffiliationsModule'},
+      {path: 'projects', loadChildren: '../projects/communityProjects.module#CommunityProjectsModule'},
+      {path: 'content-providers', loadChildren: '../content-providers/communityContentProviders.module#CommunityContentProvidersModule'},
+      {path: 'content-providers/:provider', loadChildren: '../content-providers/criteria/criteria.module#CriteriaModule'},
+      {path: 'zenodo-communities', loadChildren: '../zenodo-communities/zenodo-communities.module#ZenodoCommunitiesModule'},
+      {path: 'subjects', canActivateChild: [ConnectCommunityGuard], loadChildren: '../subjects/subjects-edit-form/subjects-edit-form.module#SubjectsEditFormModule'},
+    ])
+  ],
+  providers: [ConnectCommunityGuard]
+})
+export class CommunityInfoRoutingModule {
+}

src/app/pages/community-info/community-info.component.ts

@@ -0,0 +1,40 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {CommunityInfo} from '../../openaireLibrary/connect/community/communityInfo';
+import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
+import {Subscription} from 'rxjs';
+
+@Component({
+  selector: 'community-info',
+  template: `
+    <ul *ngIf="community" class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab>
+      <li [class.uk-active]="tab === 'profile'"><a  routerLink="../profile"><span class="title">Profile</span></a></li>
+      <li [class.uk-active]="tab === 'organizations'"><a  routerLink="../organizations"><span class="title">Organizations</span></a></li>
+      <li [class.uk-active]="tab === 'projects'"><a  routerLink="../projects"><span class="title">Projects</span></a></li>
+      <li [class.uk-active]="tab === 'content-providers'"><a  routerLink="../content-providers"><span class="title">Content Providers</span></a></li>
+      <li *ngIf="community.type !='ri'" [class.uk-active]="tab === 'subjects'"><a  routerLink="../subjects"><span class="title">Subjects</span></a></li>
+      <li [class.uk-active]="tab === 'zenodo-communities'"><a  routerLink="../zenodo-communities"><span class="title">Zenodo Communities</span></a></li>
+    </ul>
+  `
+})
+export class CommunityInfoComponent implements OnInit {
+  @Input()
+  public type: string;
+  @Input()
+  public tab: "profile"| "organizations" | "projects" | "content-providers" | "subjects" | "zenodo-communities" = 'profile';
+  public community: CommunityInfo;
+  private sub;
+
+  constructor(private communityService: CommunityService) {
+  }
+
+  ngOnInit() {
+    this.sub =this.communityService.getCommunityAsObservable().subscribe(community => {
+      this.community = community;
+    });
+  }
+  ngOnDestroy() {
+     if (this.sub instanceof Subscription) {
+       this.sub.unsubscribe();
+    }
+  }
+}

src/app/pages/community-info/community-info.module.ts

@@ -0,0 +1,14 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from "@angular/router";
+import {CommonModule} from "@angular/common";
+import {CommunityInfoComponent} from "./community-info.component";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule
+  ],
+  declarations: [CommunityInfoComponent],
+  exports: [CommunityInfoComponent]
+})
+export class CommunityInfoModule {
+}

src/app/pages/community-info/profile/edit-community/edit-community.component.css

@@ -0,0 +1,10 @@
+.uk-border-circle {
+  width: 100px;
+  height: 100px;
+  position: relative;
+}
+
+.uk-border-circle > img {
+  max-width: 64px;
+  max-height: 64px;
+}

src/app/pages/community-info/profile/edit-community/edit-community.component.ts

@@ -0,0 +1,318 @@
+import {Component, Input} from "@angular/core";
+import {FormBuilder, FormGroup, Validators} from "@angular/forms";
+import {EnvProperties} from "../../../../openaireLibrary/utils/properties/env-properties";
+import {properties} from "../../../../../environments/environment";
+import {CommunityInfo} from "../../../../openaireLibrary/connect/community/communityInfo";
+import {Session, User} from "../../../../openaireLibrary/login/utils/helper.class";
+import {CommunityService} from "../../../../openaireLibrary/connect/community/community.service";
+import {UtilitiesService} from "../../../../openaireLibrary/services/utilities.service";
+import {UserManagementService} from "../../../../openaireLibrary/services/user-management.service";
+import {StringUtils} from "../../../../openaireLibrary/utils/string-utils.class";
+import {Subscription} from "rxjs";
+import {Option} from "../../../../openaireLibrary/sharedComponents/input/input.component";
+
+declare var UIkit;
+
+@Component({
+  selector: 'edit-community',
+  template: `
+    <div [ngStyle]="{'max-height': maxHeight}"
+         [class.uk-padding-small]="!paddingLarge" [class.uk-padding-large]="paddingLarge"
+         class="uk-overflow-auto uk-padding-remove-bottom">
+      <form *ngIf="communityFb" [formGroup]="communityFb">
+        <div class="uk-grid" [class.uk-margin-small-bottom]="!paddingLarge"
+             [class.uk-margin-large-bottom]="paddingLarge" uk-grid uk-height-match=".uk-form-hint">
+          <div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('name')" label="Name"
+               placeholder="Write a name..."
+               hint="Name of the community profile."></div>
+          <div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('shortName')"
+               hint="Short name of the community."
+               label="Short Name" placeholder="Write an acronym..."></div>
+<!--          <div dashboard-input class="uk-width-1-1" [type]="'textarea'" placeholder="Write a description..."-->
+<!--                hint="The description of the community."-->
+<!--                [rows]="4" [formInput]="communityFb.get('description')" label="Description"></div>-->
+
+          <div class="uk-width-1-1">
+            <div class="uk-text-bold uk-form-label uk-margin-small-bottom">Description</div>
+            <div class="uk-margin-bottom uk-form-hint">The description of the community</div>
+                 <ckeditor [readonly]="false"
+                           debounce="500"
+                           [formControl]="communityFb.get('description')"
+                           [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', 
+                                      removeButtons:  'Save,NewPage,DocProps,Preview,Print,' +
+                                                      'Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,' +
+                                                      'CreateDiv,Flash,PageBreak,' +
+                                                      'Subscript,Superscript,Anchor,Smiley,Iframe,Styles,Font,About,Language',
+                                      extraPlugins: 'divarea'}">
+                 </ckeditor>
+          </div>             
+  
+          <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
+          <div dashboard-input class="uk-width-1-1" type="logoURL" [hideControl]="communityFb.get('isUpload').value" flex="top"
+               hint="Upload or link the logo of the community." [placeholder]="'Write link to the logo'"
+               [formInput]="communityFb.get('logoUrl')" label="Logo">
+            <div *ngIf="!communityFb.get('isUpload').value" class="uk-width-2-5@l uk-width-1-1" style="margin-top: 7px;">
+              <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
+                <div class="uk-width-3-4@l uk-width-1-1 uk-flex uk-flex-center">
+                  <button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
+                          (click)="file.click()">
+                    <icon name="cloud_upload" [flex]="true"></icon>
+                    <span class="uk-margin-small-left">Upload a file</span>
+                  </button>
+                </div>
+                <div class="uk-text-center uk-text-bold uk-width-expand">
+                  OR
+                </div>
+              </div>
+            </div>
+            <div *ngIf="communityFb.get('isUpload').value" class="uk-width-1-1 uk-flex uk-flex-middle">
+              <div class="uk-card uk-card-default uk-text-center uk-border-circle">
+                <img class="uk-position-center" [src]="photo">
+              </div>
+              <div class="uk-margin-left">
+                <button (click)="remove()" class="uk-button-secondary outlined uk-icon-button">
+                  <icon name="remove"></icon>
+                </button>
+              </div>
+              <div class="uk-margin-small-left">
+                <button class="uk-button-secondary uk-icon-button" (click)="file.click()">
+                  <icon name="edit"></icon>
+                </button>
+              </div>
+            </div>
+          </div>
+          <div *ngIf="uploadError" class="uk-text-danger uk-width-1-1">{{uploadError}}</div>
+          <div dashboard-input class="uk-width-1-1" [formInput]="communityFb.get('status')"
+               hint="Set the visibility status for your community's profile." type="select" [options]="statuses"
+               label="Status" placeholder="Choose a status"></div>
+        </div>
+      </form>
+    </div>`,
+  styleUrls: ['edit-community.component.css']
+})
+export class EditCommunityComponent {
+  @Input()
+  public maxHeight = 'none';
+  @Input()
+  public paddingLarge: boolean = false;
+  public communityFb: FormGroup;
+  public statuses: Option[] = [
+    {label: 'Visible', value: 'all'},
+    {label: 'Visible to managers', value: 'manager'},
+    {label: 'Hidden', value: 'hidden'}
+  ]
+  public community: CommunityInfo;
+  public isNew: boolean;
+  public properties: EnvProperties = properties
+  ;
+  private subscriptions: any[] = [];
+  /**
+   * Photo upload
+   * */
+  public file: File;
+  public photo: string | ArrayBuffer;
+  public uploadError: string;
+  public deleteCurrentPhoto: boolean = false;
+  private maxsize: number = 200 * 1024;
+  user: User;
+  
+  constructor(private fb: FormBuilder,
+              private communityService: CommunityService,
+              private utilsService: UtilitiesService,
+              private userManagementService: UserManagementService) {
+  }
+  
+  ngOnDestroy() {
+    this.reset();
+  }
+  
+  public init(community: CommunityInfo, isNew: boolean = false) {
+    this.reset();
+    this.deleteCurrentPhoto = false;
+    this.community = community;
+    this.isNew = isNew;
+    this.subscriptions.push(this.userManagementService.getUserInfo().subscribe(user => {
+        this.user = user;
+        this.communityFb = this.fb.group({
+          communityId: this.fb.control(this.community.communityId),
+          name: this.fb.control(this.community.title, Validators.required),
+          shortName: this.fb.control(this.community.shortTitle, Validators.required),
+          description: this.fb.control(this.community.description),
+          status: this.fb.control(this.community.status),
+          managers: this.fb.control(this.community.managers),
+          isUpload: this.fb.control(this.community.isUpload),
+          logoUrl: this.fb.control(this.community.logoUrl)
+        });
+        if (this.community.isUpload) {
+          this.communityFb.get('logoUrl').clearValidators();
+          this.communityFb.get('logoUrl').updateValueAndValidity();
+        } else {
+          this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]);
+          this.communityFb.get('logoUrl').updateValueAndValidity();
+        }
+        this.subscriptions.push(this.communityFb.get('isUpload').valueChanges.subscribe(value => {
+          if (value == true) {
+            this.communityFb.get('logoUrl').clearValidators();
+            this.communityFb.updateValueAndValidity();
+          } else {
+            this.communityFb.get('logoUrl').setValidators([StringUtils.urlValidator()]);
+            this.communityFb.updateValueAndValidity();
+          }
+        }));
+        this.initPhoto();
+        if (!isNew) {
+          if (!this.isAdmin) {
+            setTimeout(() => {
+              this.communityFb.get('shortName').disable();
+            }, 0);
+          }
+        }
+      }
+    ));
+  }
+  
+  public get isAdmin() {
+    return Session.isPortalAdministrator(this.user);
+  }
+  
+  public get disabled(): boolean {
+    return (this.communityFb && this.communityFb.invalid) ||
+      (this.communityFb && this.communityFb.pristine && !this.isNew && !this.file) ||
+      (this.uploadError && this.uploadError.length > 0);
+  }
+  
+  public get dirty(): boolean {
+    return this.communityFb && this.communityFb.dirty;
+  }
+  
+  reset() {
+    this.uploadError = null;
+    this.communityFb = null;
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
+  public save(callback: Function, errorCallback: Function = null) {
+    if (this.file) {
+      this.communityFb.get('shortName').enable();
+      this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityFb.value.communityId), this.file).subscribe(res => {
+        this.deletePhoto();
+        this.removePhoto();
+        this.communityFb.get('logoUrl').setValue(res.filename);
+        this.saveCommunity(callback, errorCallback);
+      }, error => {
+        this.uploadError = "An error has been occurred during upload your image. Try again later";
+        this.saveCommunity(callback, errorCallback);
+      }));
+    } else if (this.deleteCurrentPhoto) {
+      this.deletePhoto();
+      this.saveCommunity(callback, errorCallback);
+    } else {
+      this.saveCommunity(callback, errorCallback);
+    }
+  }
+  
+  public saveCommunity(callback: Function, errorCallback: Function = null) {
+    if (this.isNew) {
+      this.removePhoto();
+      this.subscriptions.push(this.communityService.updateCommunity(
+        this.properties.communityAPI + this.community.communityId, this.communityFb.value).subscribe(() => {
+        this.communityService.getCommunity(this.community.communityId, true).subscribe(community => {
+          UIkit.notification(community.shortTitle + ' has been <b>successfully created</b>', {
+            status: 'success',
+            timeout: 6000,
+            pos: 'bottom-right'
+          });
+          callback(community);
+        });
+      }, error => {
+        UIkit.notification('An error has occurred. Please try again later', {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+        if (errorCallback) {
+          errorCallback(error)
+        }
+      }));
+    } else {
+      this.subscriptions.push(this.communityService.updateCommunity(this.properties.communityAPI + this.community.communityId, this.communityFb.value).subscribe(() => {
+        this.communityService.getCommunity(this.community.communityId, true).subscribe(community => {
+          UIkit.notification(community.shortTitle + ' has been <b>successfully saved</b>', {
+            status: 'success',
+            timeout: 6000,
+            pos: 'bottom-right'
+          });
+          callback(community);
+        });
+      }, error => {
+        UIkit.notification('An error has occurred. Please try again later', {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+      }));
+    }
+  }
+  
+  fileChangeEvent(event) {
+    if (event.target.files && event.target.files[0]) {
+      this.file = event.target.files[0];
+      if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
+        this.uploadError = 'You must choose a file with type: image/png or image/jpeg!';
+        this.communityFb.get('isUpload').setValue(false);
+        this.communityFb.get('isUpload').markAsDirty();
+        this.removePhoto();
+      } else if (this.file.size > this.maxsize) {
+        this.uploadError = 'File exceeds size\'s limit! Maximum resolution is 256x256 pixels.';
+        this.communityFb.get('isUpload').setValue(false);
+        this.communityFb.get('isUpload').markAsDirty();
+        this.removePhoto();
+      } else {
+        this.uploadError = null;
+        const reader = new FileReader();
+        reader.readAsDataURL(this.file);
+        reader.onload = () => {
+          this.photo = reader.result;
+          this.communityFb.get('isUpload').setValue(true);
+          this.communityFb.get('isUpload').markAsDirty();
+        };
+      }
+    }
+  }
+  
+  initPhoto() {
+    if (this.communityFb.value.isUpload) {
+      this.photo = this.properties.utilsService + "/download/" + this.communityFb.get('logoUrl').value;
+    }
+  }
+  
+  removePhoto() {
+    if (this.file) {
+      if (typeof document != 'undefined') {
+        (<HTMLInputElement>document.getElementById("photo")).value = "";
+      }
+      this.initPhoto();
+      this.file = null;
+    }
+  }
+  
+  remove() {
+    this.communityFb.get('isUpload').setValue(false);
+    this.communityFb.get('isUpload').markAsDirty();
+    this.removePhoto();
+    this.communityFb.get('logoUrl').setValue(null);
+    if (this.community.isUpload) {
+      this.deleteCurrentPhoto = true;
+    }
+  }
+  
+  public deletePhoto() {
+    if (this.community.logoUrl) {
+      this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.community.logoUrl).subscribe());
+    }
+  }
+}

src/app/pages/community-info/profile/edit-community/edit-community.module.ts

@@ -0,0 +1,24 @@
+import {NgModule} from "@angular/core";
+import {EditCommunityComponent} from "./edit-community.component";
+import {CommonModule} from "@angular/common";
+import {ReactiveFormsModule} from "@angular/forms";
+import {CKEditorModule} from 'ng2-ckeditor';
+// import { CKEditorModule } from 'ckeditor4-angular';
+import {InputModule} from "../../../../openaireLibrary/sharedComponents/input/input.module";
+import {IconsModule} from "../../../../openaireLibrary/utils/icons/icons.module";
+import {IconsService} from "../../../../openaireLibrary/utils/icons/icons.service";
+import {cloud_upload, edit, remove} from "../../../../openaireLibrary/utils/icons/icons";
+
+@NgModule({
+  imports: [CommonModule, ReactiveFormsModule, InputModule, IconsModule
+    , CKEditorModule
+  ],
+  declarations: [EditCommunityComponent],
+  exports: [EditCommunityComponent]
+})
+export class EditCommunityModule {
+  
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([remove, edit, cloud_upload])
+  }
+}

src/app/pages/community-info/profile/profile.component.ts

@@ -0,0 +1,101 @@
+import {Component, OnDestroy, OnInit, ViewChild} from "@angular/core";
+import {CommunityInfo} from "../../../openaireLibrary/connect/community/communityInfo";
+import {EnvProperties} from "../../../openaireLibrary/utils/properties/env-properties";
+import {properties} from "../../../../environments/environment";
+import {EditCommunityComponent} from "./edit-community/edit-community.component";
+import {CommunityService} from "../../../openaireLibrary/connect/community/community.service";
+import {Title} from "@angular/platform-browser";
+import {Subscription} from "rxjs";
+
+@Component({
+  selector: 'community-profile',
+  template: `
+    <div page-content>
+      <div header>
+        <community-info tab="profile"></community-info>
+      </div>
+      <div inner>
+        <div class="uk-card-header">
+          <div class="uk-flex uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
+            <div>
+              <div class="uk-text-small title">
+                Manage Community Profile
+              </div>
+              <div>
+                <span *ngIf="community" class="uk-text-bold">{{community.shortTitle}}</span>
+                <span *ngIf="editCommunityComponent.dirty && !loading"> (unsaved changes)</span>
+              </div>
+            </div>
+            <div class="uk-text-right@m uk-text-center">
+              <button class="uk-button uk-button-secondary outlined uk-margin-right"
+                      (click)="reset()"
+                      [disabled]="loading || !editCommunityComponent.dirty">Reset
+              </button>
+              <button class="uk-button uk-button-secondary"
+                      (click)="save()"
+                      [disabled]="loading || editCommunityComponent.disabled">Save
+              </button>
+            </div>
+          </div>
+        </div>
+        <div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
+          <div [class.hidden]="loading">
+            <edit-community #editCommunityComponent [maxHeight]="'60vh'" [paddingLarge]="true"></edit-community>
+          </div>
+          <div *ngIf="loading" class="uk-position-center">
+            <loading></loading>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+})
+export class ProfileComponent implements OnInit, OnDestroy {
+  
+  public community: CommunityInfo;
+  public properties: EnvProperties = properties;
+  public loading: boolean = false;
+  private subscriptions: any[] = [];
+  @ViewChild('editCommunityComponent') editCommunityComponent: EditCommunityComponent;
+  
+  constructor(private communityService: CommunityService,
+              private title: Title) {
+  }
+  
+  ngOnInit() {
+    this.loading = true;
+    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
+      this.community = community;
+      if (this.community) {
+        this.title.setTitle(this.community.communityId.toUpperCase() + " | Profile");
+        setTimeout(() => {
+          this.reset();
+          this.loading = false;
+        }, 200);
+      }
+    }));
+  }
+  
+  public reset() {
+    this.editCommunityComponent.init(this.community);
+  }
+  
+  public save() {
+    this.loading = true;
+    this.editCommunityComponent.save((community) => {
+      this.community = community;
+      this.reset();
+      this.loading = false;
+    }, (error) => {
+      this.loading = false;
+    });
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+}

src/app/pages/community-info/profile/profile.module.ts

@@ -0,0 +1,27 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from "@angular/router";
+import {CommonModule} from "@angular/common";
+import {PageContentModule} from "../../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
+import {ProfileComponent} from "./profile.component";
+import {EditCommunityModule} from "./edit-community/edit-community.module";
+import {LoadingModule} from "../../../openaireLibrary/utils/loading/loading.module";
+import {CommunityInfoModule} from "../community-info.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forChild([
+      {
+        path: '', component: ProfileComponent
+      }
+    ]),
+    PageContentModule,
+    EditCommunityModule,
+    LoadingModule,
+    CommunityInfoModule,
+  ],
+  declarations: [ProfileComponent],
+  exports: [ProfileComponent]
+})
+export class ProfileModule {
+}

src/app/pages/community-routing.module.ts

@@ -0,0 +1,37 @@
+import {NgModule} from "@angular/core";
+import {RouterModule} from "@angular/router";
+import {ConnectRIGuard} from "../openaireLibrary/connect/communityGuard/connectRIGuard.guard";
+
+@NgModule({
+  imports: [RouterModule.forChild([
+    {
+      path: 'info',
+      loadChildren: './community-info/community-info-routing.module#CommunityInfoRoutingModule',
+    },
+    {
+      path: 'users',
+      loadChildren: './users/users-routing.module#UsersRoutingModule'
+    },
+    {
+      path: 'mining',
+      loadChildren: './mining/mining.module#MiningModule',
+      canActivateChild: [ConnectRIGuard]
+    },
+    {
+      path: 'admin-tools',
+      loadChildren: './admin-tools/admin-tools-routing.module#AdminToolsRoutingModule',
+      data: {
+        param: 'community'
+      }
+    },
+    {
+      path: 'stats',
+      loadChildren: './stats/stats.module#StatsModule'
+    },
+    {
+      path: 'customize-layout',
+      loadChildren: './customization/customization.module#CustomizationModule',
+    }
+  ])]
+})
+export class CommunityRoutingModule {}

src/app/pages/community/communities-routing.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {CommunitiesComponent} from './communities.component';
-import {AdminLoginGuard} from '../../openaireLibrary/login/adminLoginGuard.guard';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: '', canActivate: [AdminLoginGuard], component: CommunitiesComponent}
-    ])
-  ]
-})
-export class CommunitiesRoutingModule { }

src/app/pages/community/communities.component.html

@@ -1,112 +0,0 @@
-<div id="communities">
-        <div class="menubar ">
-            <div class="community-title uk-text-large">Communities</div>
-            <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
-              <a class="uk-alert-close" uk-close></a>
-              {{updateErrorMessage}}
-            </div>
-            <form target="BSFormPanel_Admin_1" class="search">
-                <!-- <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Community name..." type="text" class="uk-input uk-width-medium"/>
-                <button class="uk-button" type="submit">Search</button> -->
-                <input type="text" class="uk-input uk-width-medium" placeholder="Community name, type..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword" >
-                <button (click)="filterBySearch(keyword)"  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>
-            </form>
-            <!-- <a (click)="showModal()" class="uk-button uk-button-primary uk-float-right"><i></i> New Community </a> -->
-        </div>
-
-        <div class="content-wrapper" id="contentWrapper">
-            <div>
-                <div class="contentPanel">
-                    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top" role="alert">{{errorMessage}}</div>
-                    <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
-
-                    <div *ngIf="!errorMessage && !showLoading" class="page-controls">
-                        <div class="  filters ">
-                            <div class="show-options uk-float-right">
-                              <button class="uk-button" type="button">Bulk Actions</button>
-                              <div uk-dropdown="mode: click">
-                                <ul class="uk-nav uk-navbar-dropdown-nav"
-                                    [attr.uk-tooltip]="getSelectedCommunities().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-                                    title="Select at least one community">
-                                    <li><a [class]="getSelectedCommunities().length == 0 ? 'uk-disabled' : ''" (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
-                                </ul>
-                              </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div *ngIf="!errorMessage && !showLoading">
-                        <div class="gwt-HTML">
-                            <div class="users-list">  <!--"row" class removed"-->
-                                <div class="col-md-12">
-                                  <table class="uk-table uk-table-striped">
-                                    <thead>
-                                        <tr>
-                                            <th><input id="allCommunityCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
-                                            <th>Name</th>
-                                            <th>Type</th>
-                                            <th>Actions</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody >
-                                        <tr *ngFor="let check of checkboxes; let i=index">
-                                            <td><input id="{{check.community._id}}" class="checkBox" type="checkbox"
-                                                                                name="communitiescb[]" value="{{check.community._id}}" [(ngModel)]="check.checked">
-                                            </td>
-                                            <td>
-                                                <div class="name" href="#">{{check.community.name}}</div>
-                                            </td>
-                                            <td>
-                                              <div class="type" href="#">{{check.community.type}}</div>
-                                            </td>
-                                            <td>
-                                                <div class="actions" href="#">
-                                                    <input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editCommunity(i)">
-                                                    <input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteCommunity(check.community._id)">
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-
-                                    <div *ngIf="checkboxes.length==0" class="col-md-12">
-                                        <div class="uk-alert-warning" uk-alert>No communities found</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- <fab (clicked)="showModal()"></fab> -->
-        <fab (clicked)="newCommunity()"></fab>
-</div>
-<!-- <modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Community'" [formGroup]="formGroup" [type]="'community'"
-            [isModalShown]="isModalShown" (emmitObject)="communitySavedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
-    <community-form [group]="formGroup"></community-form>
-</modal-form>
-
-<modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Community'" [formGroup]="formGroup" [type]="'community'"
-            [isModalShown]="isModalShown" (emmitObject)="communityUpdatedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
-    <community-form [group]="formGroup"></community-form>
-</modal-form> -->
-
-<modal-alert #AlertModalSaveCommunity (alertOutput)="communitySaveConfirmed($event)">
-  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
-  <community-form [group]="formGroup"></community-form>
-</modal-alert>
-
-<modal-alert #AlertModalUpdateCommunity (alertOutput)="communityUpdateConfirmed($event)">
-  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
-  <community-form [group]="formGroup"></community-form>
-</modal-alert>
-
-<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteCommunities($event)">
-    Are you sure you want to delete the selected community(-ies)?
-</delete-confirmation-dialog> -->
-<modal-alert #AlertModalDeleteCommunities (alertOutput)="confirmedDeleteCommunities($event)"></modal-alert>

src/app/pages/community/communities.component.ts

@@ -1,289 +0,0 @@
-/**
- * Created by stefania on 7/13/17.
- */
-import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
-import { HelpContentService } from '../../services/help-content.service';
-import { FormGroup } from '@angular/forms';
-import { CommunityFormComponent } from './community-form.component';
-import { CheckPortal, Portal } from '../../domain/portal';
-import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
-
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
-import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
-import {Title} from '@angular/platform-browser';
-import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
-
-@Component({
-    selector: 'communities',
-    templateUrl: './communities.component.html',
-})
-
-export class CommunitiesComponent implements OnInit {
-
-    // @ViewChild(ModalFormComponent)
-    // @ViewChild('saveModal')
-    // public modal:ModalFormComponent;
-    //
-    // @ViewChild('updateModal')
-    // public updateModal:ModalFormComponent;
-
-    // @ViewChild('deleteConfirmationModal')
-    // public deleteConfirmationModal : DeleteConfirmationDialogComponent;
-    @ViewChild('AlertModalSaveCommunity') alertModalSaveCommunity;
-    @ViewChild('AlertModalUpdateCommunity') alertModalUpdateCommunity;
-    @ViewChild('AlertModalDeleteCommunities') alertModalDeleteCommunities;
-    private selectedCommunities: string[] = [];
-
-    @ViewChild(CommunityFormComponent)
-    public formComponent: CommunityFormComponent;
-
-    public checkboxes: CheckPortal[] = [];
-
-    public communities: Portal[] = [];
-
-    // public errorMessage: string;
-
-    public formGroup: FormGroup;
-
-    private searchText: RegExp = new RegExp('');
-    public  keyword = '';
-
-    public properties: EnvProperties = null;
-
-    public showLoading = true;
-    public errorMessage = '';
-    public updateErrorMessage = '';
-    public modalErrorMessage = '';
-
-    ngOnInit() {
-        this.formGroup = this.formComponent.form;
-
-        this.route.data
-          .subscribe((data: { envSpecific: EnvProperties }) => {
-            HelperFunctions.scroll();
-            this.title.setTitle('Administration Dashboard | Communities');
-            this.properties = data.envSpecific;
-             this.getCommunities();
-          });
-    }
-
-    constructor(private element: ElementRef, private route: ActivatedRoute,
-                private title: Title,
-                private _router: Router, private _helpContentService: HelpContentService,
-                private _clearCacheService: ClearCacheService) {}
-
-
-    getCommunities() {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], {
-            queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        this.showLoading = true;
-        this.updateErrorMessage = '';
-        this.errorMessage = '';
-
-
-        this._helpContentService.getCommunitiesFull( this.properties.adminToolsAPIURL).subscribe(
-            communities => {
-                this.communities = communities;
-                communities.forEach(_ => {
-                  this.checkboxes.push(<CheckPortal>{community : _, checked : false});
-                });
-                this.showLoading = false;
-        },
-        error => this.handleError('System error retrieving communities', error));
-      }
-    }
-
-    // public showModal():void {
-    //     this.modal.showModal();
-    // }
-
-    public toggleCheckBoxes(event) {
-        this.checkboxes.forEach(_ => _.checked = event.target.checked);
-    }
-
-    public applyCheck(flag: boolean) {
-        this.checkboxes.forEach(_ => _.checked = flag);
-    }
-
-    public getSelectedCommunities(): string[] {
-        return this.checkboxes.filter(community => community.checked === true).
-        map(checkedCommunity => checkedCommunity.community).map(res => res._id);
-    }
-
-    private deleteCommunitiesFromArray(ids: string[]): void {
-        for (let id of ids) {
-            let i = this.checkboxes.findIndex(_ => _.community._id === id);
-            this.checkboxes.splice(i, 1);
-        }
-    }
-
-    public confirmDeleteCommunity(id: string) {
-        // this.deleteConfirmationModal.ids = [id];
-        // this.deleteConfirmationModal.showModal();
-        this.selectedCommunities = [id];
-        this.confirmModalOpen();
-    }
-
-    public confirmDeleteSelectedCommunities() {
-        // this.deleteConfirmationModal.ids = this.getSelectedCommunities();
-        // this.deleteConfirmationModal.showModal();
-        this.selectedCommunities = this.getSelectedCommunities();
-        this.confirmModalOpen();
-    }
-
-    private confirmModalOpen() {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], {
-            queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        this.alertModalDeleteCommunities.cancelButton = true;
-        this.alertModalDeleteCommunities.okButton = true;
-        this.alertModalDeleteCommunities.alertTitle = 'Delete Confirmation';
-        this.alertModalDeleteCommunities.message = 'Are you sure you want to delete the selected community(-ies)?';
-        this.alertModalDeleteCommunities.okButtonText = 'Yes';
-        this.alertModalDeleteCommunities.open();
-      }
-    }
-
-    public confirmedDeleteCommunities(data: any) {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], {
-            queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        this.showLoading = true;
-        this.updateErrorMessage = '';
-
-        this._helpContentService.deleteCommunities(this.selectedCommunities, this.properties.adminToolsAPIURL).
-        subscribe(
-            _ => {
-              this.deleteCommunitiesFromArray(this.selectedCommunities);
-              this.showLoading = false;
-              this._clearCacheService.clearCache("communities deleted");
-            },
-            error => this.handleUpdateError('System error deleting the selected communities', error)
-        );
-      }
-    }
-
-    public editCommunity(i: number) {
-        const community: Portal = this.checkboxes[i].community;
-        this.formGroup.patchValue(community);
-        this.formGroup.controls['type'].disable();
-        // this.updateModal.showModal();
-        this.modalErrorMessage = '';
-        this.communitiesModalOpen(this.alertModalUpdateCommunity, 'Update', 'Update Community');
-    }
-
-    public newCommunity() {
-      this.formGroup.controls['type'].enable();
-      this.formComponent.reset();
-      this.modalErrorMessage = '';
-      this.communitiesModalOpen(this.alertModalSaveCommunity, 'Save', 'Add a new Community');
-    }
-
-    private communitiesModalOpen(modal: any, title: string, yesBtn: string) {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], {
-            queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        modal.cancelButton = true;
-        modal.okButton = true;
-        modal.alertTitle = title;
-        modal.okButtonText = yesBtn;
-        modal.open();
-      }
-    }
-
-    public communitySaveConfirmed(data: any) {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], {
-            queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        if (!this.formGroup.valid) {
-          this.communitiesModalOpen(this.alertModalSaveCommunity, 'Save', 'Add a new Community');
-          this.modalErrorMessage = 'Please fill in all required fields marked with *';
-        } else {
-          this.modalErrorMessage = '';
-          this._helpContentService.saveCommunity(<Portal> this.formGroup.value,
-              this.properties.adminToolsAPIURL).subscribe(
-              community => {
-                this.communitySavedSuccessfully(community);
-                this._clearCacheService.clearCache("community saved");
-              },
-              error => this.handleUpdateError('System error creating community', error)
-          );
-        }
-      }
-    }
-
-    public communityUpdateConfirmed(data: any) {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], {
-            queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        if (!this.formGroup.valid) {
-          this.communitiesModalOpen(this.alertModalUpdateCommunity, 'Update', 'Update Community');
-          this.modalErrorMessage = 'Please fill in all required fields marked with *';
-        } else {
-          this.formGroup.controls['type'].enable();
-          this._helpContentService.updateCommunity(<Portal> this.formGroup.value,
-              this.properties.adminToolsAPIURL).subscribe(
-              community => {
-                this.communityUpdatedSuccessfully(community);
-                this._clearCacheService.clearCache("community updated");
-              },
-              error => this.handleUpdateError('System error updating community', error)
-          );
-        }
-      }
-    }
-
-    public communitySavedSuccessfully(community: Portal) {
-        this.checkboxes.push(<CheckPortal>{community : community, checked : false});
-        this.applyCheck(false);
-    }
-
-    public communityUpdatedSuccessfully(community: Portal) {
-        this.checkboxes.find(checkItem => checkItem.community._id === community._id).community = community;
-        this.applyCheck(false);
-    }
-
-    public filterBySearch(text: string) {
-        this.searchText = new RegExp(text, 'i');
-        this.applyFilter();
-    }
-
-    public applyFilter() {
-        this.checkboxes = [];
-        this.communities.filter(item => this.filterCommunities(item)).forEach(
-            _ => this.checkboxes.push(<CheckPortal>{community: _, checked: false})
-        );
-    }
-
-    public filterCommunities(community: Portal): boolean {
-        const textFlag = this.searchText.toString() === '' || (community.name || community.type).match(this.searchText) != null;
-        return textFlag;
-    }
-
-    handleUpdateError(message: string, error) {
-        if (error == null) {
-            this.formComponent.reset();
-        } else {
-          this.updateErrorMessage = message;
-          console.log('Server responded: ' + error);
-        }
-
-        this.showLoading = false;
-    }
-
-    handleError(message: string, error) {
-        this.errorMessage = message;
-        console.log('Server responded: ' + error);
-
-        this.showLoading = false;
-    }
-}

src/app/pages/community/communities.module.ts

@@ -1,22 +0,0 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {CommunitiesComponent} from './communities.component';
-import {CommunityFormComponent} from './community-form.component';
-import {CommunitiesRoutingModule} from './communities-routing.module';
-import {RouterModule} from '@angular/router';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {FABModule} from '../../utils/fabModule.module';
-import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
-import {AdminLoginGuard} from '../../openaireLibrary/login/adminLoginGuard.guard';
-
-@NgModule({
-  imports: [
-    CommonModule, FormsModule, FABModule,  AlertModalModule,
-    ReactiveFormsModule,
-    CommunitiesRoutingModule, RouterModule
-  ],
-  declarations: [CommunitiesComponent, CommunityFormComponent],
-  providers: [AdminLoginGuard],
-  exports: [CommunitiesComponent]
-})
-export class CommunitiesModule { }

src/app/pages/community/community-edit-form/community-edit-form-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {CommunityEditFormComponent} from './community-edit-form.component';
-import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-
-@NgModule({
-    imports: [
-        RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CommunityEditFormComponent}
-        ])
-    ]
-})
-export class CommunityEditFormRoutingModule { }

src/app/pages/community/community-edit-form/community-edit-form.component.html

@@ -1,117 +0,0 @@
-<div id="community-edit-form " class=" uk-card uk-card-default uk-padding">
-  <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Manage community profile</div>
-
-
-
-    <div>
-      <!-- <div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
-      <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-      <div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
-      <div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div> -->
-      <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert"><span class="loading-gif uk-align-center"></span></div>
-        <table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-width-1-1">
-          <tbody class="uk-table uk-align-center">
-              <tr>
-                  <td for="name" class="uk-text-bold uk-width-1-2@xl uk-width-1-3@m uk-width-expand@s uk-text-right">Name <span class="uk-text-danger uk-text-bold">*</span> :</td>
-                  <td class="uk-text-left uk-width-expand">
-                      <div *ngIf="community.title == '' " class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>
-                      <input *ngIf="community.title != null" placeholder={{community.title}} type="text"
-                              class="form-control uk-input uk-width-large@l uk-width-medium@s" id="name"
-                              required [(ngModel)] = "community.title" (input)="change()"></td>
-              </tr>
-              <tr>
-                  <td for="shortName" class="uk-text-bold uk-text-right">Short Name:</td>
-                  <td class="uk-text-left">
-                      <input *ngIf="community.shortTitle != null" placeholder={{community.shortTitle}} type="text"
-                              class="form-control uk-input uk-width-large@l uk-width-medium@s" id="shortName"
-                              [(ngModel)] = "community.shortTitle" (input)="change()" disabled></td>
-              </tr>
-              <tr>
-                  <td for="description" class="uk-text-bold uk-text-right">Description:</td>
-                  <td class="uk-text-left">
-                      <textarea *ngIf="community.description != null" placeholder={{community.description}} type="text"
-                                class="form-control uk-textarea uk-width-large@l uk-width-medium@s" rows="6" id="description"
-                                [(ngModel)] = "community.description" (input)="change()">
-                      </textarea></td>
-              </tr>
-              <tr>
-                  <td for="logoUrl" class="uk-text-bold uk-text-right">Logo Url:</td>
-                  <td class="uk-text-left">
-                      <input *ngIf="community.logoUrl != null" placeholder={{community.logoUrl}} type="text"
-                          class="form-control uk-input uk-width-large@l uk-width-medium@s" id="logoUrl"
-                          [(ngModel)] = "community.logoUrl" (input)="change()"></td>
-              </tr>
-              <tr>
-                  <td for="status" class="uk-text-bold uk-text-right">Status:</td>
-                  <td class="uk-text-left uk-margin">
-                      <select class="form-control uk-select uk-width-large@l uk-width-medium@s" id="status"
-                              [(ngModel)] = "community.status" (input)="change()">
-                          <option value="all">Visible</option>
-                          <option value="manager">Visible to managers</option>
-                          <option value="hidden">Hidden</option>
-                      </select></td>
-              </tr>
-              <tr>
-                  <td for="managers" class="uk-text-bold uk-text-right">Managers:</td>
-                  <td class="uk-text-left">
-                    <div *ngIf="community.managers != null">
-                      <div *ngFor='let manager of community.managers, let i = index; trackBy:trackByFn'>
-                          <div *ngIf="!validEmail(community.managers[i]) && community.managers[i] != '' "
-                              class="uk-width-large uk-text-danger uk-text-small uk-margin-top"> Please add a valid email. </div>
-                          <input placeholder="Type managers" type="text" class="form-control uk-input uk-width-large@l uk-width-medium@s"
-                                                      id="{{'manager'+i}}" name="{{'manager'+i}}" [(ngModel)] = "community.managers[i]" (input)="change()">
-                          <!-- <img type="uk-image" src="assets/imgs/delete-icon.png" height="25" width="25" title="Remove" onmouseover="" style="cursor: pointer;" (click)="removeManager(i)"/> -->
-<!--                          red_background_color red_color-->
-                          <a class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Remove" (click)="removeManager(i); change()"></a>
-<!--                          green_background_color green_color-->
-                          <a *ngIf="i == community.managers.length - 1" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add" (click)="addManager()"></a>
-                      </div>
-<!--                        green_background_color green_color-->
-                      <a *ngIf="community.managers.length == 0" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add" (click)="addManager()"></a>
-                    <!-- <img type="uk-image" src="assets/imgs/add-icon.png" height="25" width="25" title="Add" onmouseover="" style="cursor: pointer;" (click)="addManager()"/> -->
-                  </div>
-                  </td>
-              </tr>
-              <!-- <tr>
-                  <td for="subjects" class="uk-text-bold uk-text-right">Subjects:</td>
-                  <td class="uk-text-left">
-                    <div *ngIf="community.subjects != null">
-                      <div *ngFor='let subject of community.subjects; let i = index; trackBy:trackByFn'>
-                          <input placeholder="Type subjects" type="text" class="form-control uk-input uk-width-large@l uk-width-medium@s"
-                                                     id="{{'subject'+i}}" name="{{'subject'+i}}" [(ngModel)] = "community.subjects[i]" (input)="change()">
-                          <a class="uk-icon-button remove red_background_color red_color" uk-icon="close" title="Remove" (click)="removeSubject(i)"></a>
-                          <a *ngIf="i == community.subjects.length - 1" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addSubject()"></a>
-                      </div>
-                      <a *ngIf="community.subjects.length == 0" class="uk-icon-button add green_background_color green_color" uk-icon="plus" title="Add" (click)="addSubject()"></a>
-                    </div>
-                  </td>
-              </tr> -->
-              <tr>
-                <td class="uk-text-right"></td>
-                <td><div class="uk-padding uk-padding-remove-top uk-padding-remove-bottom uk-text-danger uk-text-bold">* Required fields</div>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-
-          <div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
-          <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-          <div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
-          <div *ngIf="successfulResetMessage" class="uk-alert uk-alert-warning" role="alert">{{successfulResetMessage}}</div>
-
-          <table *ngIf="communityId != null && community != null && !showLoading && !errorMessage" class="uk-width-1-1">
-            <tbody class="uk-table uk-align-center">
-              <tr>
-                <td class="uk-width-2-3@xl uk-width-1-2@m uk-width-1-2@s uk-text-right"></td>
-                <td class="uk-text-left">
-                    <div class="uk-grid-margin uk-first-column uk-align-center uk-text-left uk-padding uk-padding-remove-top uk-padding-remove-bottom">
-                        <button *ngIf="hasChanged" class="uk-button uk-button-primary" (click)="updateCommunity()">Save</button>
-                        <button *ngIf="!hasChanged" class="uk-button uk-button-default" disabled>Save</button>
-                        <button class="uk-button" (click)="resetForm(communityId)">Reset</button>
-                    </div>
-                </td>
-              </tr>
-          </tbody>
-        </table>
-  </div>
-</div>

src/app/pages/community/community-edit-form/community-edit-form.component.ts

@@ -1,352 +0,0 @@
-import {Component, OnInit, Input, ElementRef} from '@angular/core';
-import {FormGroup, FormBuilder, Validators} from '@angular/forms';
-import {ActivatedRoute, Router} from '@angular/router';
-
-import {HelpContentService} from '../../../services/help-content.service';
-import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
-import {SubscribeService} from '../../../openaireLibrary/utils/subscribe/subscribe.service';
-import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
-
-import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
-import {Email} from '../../../openaireLibrary/utils/email/email';
-import {Composer} from '../../../openaireLibrary/utils/email/composer';
-import {Validator} from '../../../openaireLibrary/utils/email/validator';
-
-import {Session} from '../../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
-import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
-import {Title} from '@angular/platform-browser';
-
-@Component({
-    selector: 'community-edit-form',
-    templateUrl: './community-edit-form.component.html',
-})
-
-export class CommunityEditFormComponent implements OnInit{
-
-    @Input('group')
-    myForm: FormGroup;
-
-    public showLoading = true;
-    public errorMessage  = '';
-    public updateErrorMessage = '';
-
-    public successfulSaveMessage = '';
-    public successfulResetMessage = '';
-
-    public hasChanged = false;
-
-    public res = [];
-
-    params: any;
-
-    public communityId = null;
-    public community = null;
-    public firstVersionOfManagers: string[];
-    public newManagersToSubscribe: string[];
-
-    public email: Email;
-
-    public emailToInform: Email;
-
-    public note = '';
-
-    public properties: EnvProperties = null;
-
-    constructor (private element: ElementRef,
-                 private title: Title,
-                 private route: ActivatedRoute,
-                 private _router: Router,
-                 public _fb: FormBuilder,
-                 private _helpContentService: HelpContentService,
-                 private _communityService: CommunityService,
-                 private _subscribeService: SubscribeService,
-                 private _emailService: EmailService) { }
-
-
-    ngOnInit() {
-        this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
-            this.properties = data.envSpecific;
-            this.route.queryParams.subscribe(
-              communityId => {
-                HelperFunctions.scroll();
-                this.title.setTitle('Administration Dashboard | Community Profile');
-                this.communityId = communityId['communityId'];
-
-                    this.email = {body: '', subject: '', recipients: []};
-                    this.emailToInform = {body: '', subject: '', recipients: []};
-
-                    if (!Session.isLoggedIn()) {
-                      this._router.navigate(['/user-info'], {
-                          queryParams: { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-                    } else {
-                      if (this.communityId != null && this.communityId !== '') {
-                          this.showLoading = true;
-                          this.updateErrorMessage = '';
-                          this.errorMessage = '';
-
-                          this._communityService.getCommunity(this.properties,
-                              this.properties.communityAPI + this.communityId).subscribe (
-                            community => {
-                                  this.community = community;
-                                  this.params = {community: encodeURIComponent(
-                                      '"' + community.queryId + '"')};
-                                  this.firstVersionOfManagers = community.managers.slice();
-                                  this.showLoading = false;
-                            },
-                            error => this.handleError('System error retrieving community profile', error)
-                          );
-                      }
-                    }
-             });
-        });
-    }
-
-    public addManager() {
-            this.community.managers.push('');
-    }
-
-    public removeManager(i: any) {
-            this.community.managers.splice(i, 1);
-    }
-
-    // public addSubject() {
-    //         this.community.subjects.push("");
-    // }
-    //
-    // public removeSubject(i : any) {
-    //         this.community.subjects.splice(i,1);
-    // }
-
-    public resetForm(communityId: string) {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], { queryParams:
-                { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        if (communityId != null && communityId !== '') {
-            this.showLoading = true;
-            this.updateErrorMessage = '';
-            this.errorMessage = '';
-
-            this._communityService.getCommunity(this.properties,
-                this.properties.communityAPI + communityId).subscribe (
-              community => {
-                    this.community = community;
-                    this.params = {community: encodeURIComponent(
-                        '"' + community.queryId + '"')};
-                    this.showLoading = false;
-                    this.handleSuccessfulReset('Form reset!');
-              },
-              error => this.handleError('System error retrieving community profile', error)
-            );
-        }
-        this.resetChange();
-      }
-    }
-
-    public validEmail(email: string): boolean {
-        return Validator.emailValidator(email);
-    }
-
-    public updateCommunity() {
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], { queryParams:
-                { 'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl':  this._router.url} });
-      } else {
-        if (this.communityId != null && this.communityId !== '') {
-            const community = this.parseUpdatedCommunity();
-
-            if (!Validator.hasValidEmails(community['managers']) || !this.hasFilled(community['name'])) {
-                return;
-            } else {
-                this.showLoading = true;
-                const newManagers = this.getNewManagers();
-                this._communityService.updateCommunity(
-                    this.properties.communityAPI + this.communityId, community).subscribe(
-
-                    community => {
-                        if (newManagers !== null) {
-                            this.sendMailToNewManagers(newManagers);
-                            this.informOldManagersForTheNewOnes();
-                            for (let i = 0; i < newManagers.length; i++) {
-                                this._subscribeService.subscribeToCommunityByEmail(this.properties, this.communityId, newManagers[i]).subscribe(
-                                    res => {
-                                        // console.log(res);
-                                    }
-                                );
-                                this._subscribeService.getCommunitySubscribers
-                                (this.properties, this.communityId).subscribe(
-                                    res => {
-                                        // console.log(res);
-                                    }
-                                );
-                            }
-                        }
-                        this.handleSuccessfulSave('Community saved!');
-                    },
-                    error => {
-                        this.handleUpdateError('System error updating community profile', error);
-                    },
-                    () => { this.firstVersionOfManagers = this.community['managers'].slice(); }
-                );
-                this._router.navigate(['/community-edit-form'], {
-                    queryParams: { 'communityId': this.communityId}});
-            }
-        }
-        this.resetChange();
-      }
-    }
-
-
-    private parseUpdatedCommunity(): {} {
-        const community = {};
-
-        community['name'] = this.community.title;
-        community['shortName'] = this.community.shortTitle;
-        community['status'] = this.community.status;
-        community['description'] = this.community.description;
-        community['logoUrl'] = this.community.logoUrl;
-
-        community['managers'] = new Array<string>();
-        this.community.managers = this.getNonEmptyItems(this.community.managers);
-        community['managers'] = this.community.managers;
-
-        return community;
-    }
-
-    private getNewManagers(): Array<string> {
-
-        let newManagers = null;
-        for (let i = 0; i < this.community['managers'].length; i++) {
-            if (!this.firstVersionOfManagers.includes(this.community['managers'][i])) {
-                if(newManagers ===  null) {
-                    newManagers = new Array<string>();
-                }
-                newManagers.push(this.community['managers'][i]);
-            }
-        }
-        return newManagers;
-    }
-
-    private sendMailToNewManagers(managers: any) {
-        this._emailService.sendEmail(this.properties,
-                                     Composer.composeEmailForNewManager(this.communityId,
-                                         this.community.title, managers, this.properties.admins[0])).subscribe(
-              res => {
-                // console.log("The email has been sent successfully!")
-              },
-              error => console.log(error)
-        );
-    }
-
-    private informOldManagersForTheNewOnes() {
-        this._emailService.notifyForNewManagers(
-            this.properties, this.communityId,
-                                     Composer.composeEmailToInformOldManagersForTheNewOnes(this.community.title, this.communityId,
-                                                                                           this.firstVersionOfManagers,
-                                                                                           this.community.managers, this.properties.admins[0])).subscribe(
-              res => {
-                // console.log("The email has been sent successfully!")
-              },
-              error => console.log(error)
-        );
-    }
-
-    private subscribeNewManagers(newManagers: string[]): boolean {
-        return true;
-    }
-
-    private getNonEmptyItems(data: string[]): string[] {
-        const length = data.length;
-        const arrayNonEmpty = new Array<string>();
-
-        let j = 0;
-        for (let i = 0; i < length; i++) {
-            if (this.isEmpty(data[i])) {
-                 // console.log(data[i]);
-            } else if (this.isNonEmpty(data[i])) {
-                 arrayNonEmpty[j] = data[i];
-                 j++;
-                 // console.log(data[i]);
-            }
-        }
-        return arrayNonEmpty;
-    }
-
-    private hasFilled(data: any): boolean {
-        if (this.isNonEmpty(data) && !this.isEmpty(data)) {
-            return true;
-        }
-        return false;
-    }
-
-    private isEmpty(data: string): boolean {
-        if (data !== undefined && !data.replace(/\s/g, '').length) {
-            return true;
-        } else {
-            return false;
-
-        }
-    }
-
-    private isNonEmpty(data: string): boolean {
-        if (data !== undefined && data != null) {
-            return true;
-        } else {
-            return false;
-
-}
-    }
-
-    private change() {
-        this.hasChanged = true;
-        this.successfulSaveMessage = '';
-        this.successfulResetMessage = '';
-    }
-
-    private resetChange() {
-        this.hasChanged = false;
-    }
-
-    public get form() {
-        return this._fb.group({
-            _id : '',
-            name : ['', Validators.required]
-        });
-    }
-
-    public reset() {
-        this.myForm.patchValue({
-            name : '',
-            _id : ''
-        });
-    }
-
-    handleUpdateError(message: string, error) {
-        this.updateErrorMessage = message;
-        console.log('Server responded: ' + error);
-
-        this.showLoading = false;
-    }
-
-    handleError(message: string, error) {
-        this.errorMessage = message;
-        console.log('Server responded: ' + error);
-
-        this.showLoading = false;
-    }
-
-    handleSuccessfulSave(message) {
-        this.showLoading = false;
-        this.successfulSaveMessage = message;
-    }
-
-    handleSuccessfulReset(message) {
-        this.showLoading = false;
-        this.successfulResetMessage = message;
-    }
-
-    trackByFn(index: any, item: any) {
-        return index;
-    }
-}

src/app/pages/community/community-edit-form/community-edit-form.module.ts

@@ -1,29 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-
-import {CommunityEditFormComponent} from './community-edit-form.component';
-
-import {CommunityService} from '../../../openaireLibrary/connect/community/community.service';
-import {EmailService} from '../../../openaireLibrary/utils/email/email.service';
-import {CommunityEditFormRoutingModule} from './community-edit-form-routing.module';
-import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-
-@NgModule({
-  imports: [
-    CommunityEditFormRoutingModule, CommonModule, FormsModule, RouterModule
-  ],
-  declarations: [
-    CommunityEditFormComponent
-  ],
-  providers: [
-    CommunityService, EmailService, IsCommunity, ConnectAdminLoginGuard
-  ],
-  exports: [
-    CommunityEditFormComponent
-  ]
-})
-
-export class CommunityEditFormModule { }

src/app/pages/community/community-form.component.html

@@ -1,20 +0,0 @@
-<form [formGroup]="myForm">
-  <div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.name.dirty}">
-      <label for="portalNameTag">*Portal Name</label>
-      <input type="text" class="form-control" formControlName="name" id="portalNameTag" placeholder="Portal Name">
-  </div>
-  <div class="form-group" [ngClass]="{'has-error':!myForm.controls.type.valid && myForm.controls.type.dirty}">
-    <label for="portalTypeTag">*Portal Type</label>
-    <select formControlName="type" id="portalTypeTag" class="form-control uk-select">
-      <option [value]="'explore'">OpenAIRE Explore Portal</option>
-      <option [value]="'connect'">OpenAIRE Connect Portal</option>
-      <option [value]="'monitor'">OpenAIRE Monitor Portal</option>
-      <option [value]="'community'">OpenAIRE Community Gateway</option>
-    </select>
-  </div>
-  <div class="form-group" [ngClass]="{'has-error':!myForm.controls.pid.valid && myForm.controls.pid.dirty}">
-      <label for="communityPidTag">*Portal persistent id</label>
-      <input type="text" class="uk-input uk-width-medium uk-margin-small-left" formControlName="pid" id="communityPidTag" placeholder="Portal Pid">
-  </div>
-  <input type="hidden" formControlName="_id">
-</form>

src/app/pages/community/community-form.component.ts

@@ -1,44 +0,0 @@
-import {Component, OnInit, Input} from '@angular/core';
-import {FormGroup, FormBuilder, Validators} from "@angular/forms";
-
-@Component({
-    selector: 'community-form',
-    templateUrl: './community-form.component.html',
-})
-
-export class CommunityFormComponent implements OnInit{
-
-    @Input('group')
-    myForm: FormGroup;
-
-    public errorMessage: string;
-
-    constructor(public _fb: FormBuilder) {}
-
-    ngOnInit(): void {}
-
-    public get form() {
-      return this._fb.group({
-        _id: '',
-        pid: ['', Validators.required],
-        name: ['', Validators.required],
-        type: ['', Validators.required]
-      });
-    }
-
-    public reset() {
-      this.myForm.patchValue({
-        name : '',
-        _id : '',
-        pid: '',
-        type: ''
-      });
-    }
-
-    handleError(message: string, error) {
-      if(error == null) {
-        this.reset();
-      }
-      this.errorMessage = message + ' (Server responded: ' + error + ')';
-    }
-}

src/app/pages/community/content-providers/add-content-providers.component.html

@@ -1,130 +0,0 @@
-<div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>
-  <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 content providers in OpenAIRE..." aria-describedby="sizing-addon2"  [(ngModel)]="openaireSearchUtils.keyword"  name="keyword" >
-        <button (click)="keywordChanged(openaireSearchUtils.keyword)"  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>
-
-<div *ngIf="openaireSearchUtils.status != errorCodes.LOADING" class="uk-alert uk-alert-primary">
-  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-  Newly added content providers will be linked to your community on the next run of our algorithms.
-</div>
-
-<errorMessages [status]="[openaireSearchUtils.status]" [type]="'OpenAIRE content providers'"></errorMessages>
-<div *ngIf="openaireSearchUtils.status != errorCodes.LOADING" class="uk-alert uk-alert-primary">
-  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-  If you cannot find a content provider relevant to your community, probably it is not OpenAIRE compliant.
-   Feel free to contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing content provider' + '&body=' + body" target="_top">feedback@openaire.eu</a>) to let us know and we'll try to get the provider on board!
-</div>
-
-<div *ngIf="openaireSearchUtils.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">
-      {{openaireSearchUtils.totalResults | number}} content providers, page {{openaireSearchUtils.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 [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
-    </span>
-  </div>
-</div>
-
-<ul *ngIf="(openaireSearchUtils.page <= pagingLimit)" [class]="'uk-list uk-list-divider  uk-margin '+custom_class">
- <!-- <errorMessages [status]="[status]" [type]="'results'"></errorMessages> -->
-
-   <li *ngFor="let result of openaireContentProviders" class="uk-animation-fade">
-       <h6 class="uk-grid" uk-grid>
-           <span class="uk-width-5-6">
-             <a target="_blank" [href]="properties.baseOpenaireLink+'/search/dataprovider?datasourceId='+result.id">
-               <span *ngIf="result['title'].name">
-                 <span [innerHTML]="result['title'].name"></span>
-               </span>
-               <span *ngIf="!result['title'].name">
-                 [no title available]
-              </span>
-               <span class="custom-external custom-icon space"></span>
-             </a>
-           </span>
-
-           <span class="uk-width-1-6 uk-text-center">
-<!--               green_background_color green_color-->
-             <a *ngIf="!inCommunity(result)" (click)="addContentProvider(result)" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add"></a>
-
-             <span *ngIf="inCommunity(result)" class="uk-label uk-label-success">Added</span>
-<!--               red_background_color red_color-->
-             <a *ngIf="undo[result.id]" (click)="removeContentProvider(undo[result.id], result.id)" class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Undo"></a>
-
-          </span>
-       </h6>
-
-       <span *ngIf="result['type'] != undefined && result['type'] != ''" class="uk-label custom-label label-blue label-dataprovider" title="Type"> {{result['type']}}</span>
-       <span *ngIf="result['compatibility'] != undefined && result['compatibility'] != ''" class="uk-label custom-label  label-compatibility" title="Compatibility">{{result.compatibility}}</span>
-       <div *ngIf="result.startYear && result.endYear"> Start year: {{result.startYear}} - End year: {{result.endYear}}</div>
-
-       <div *ngIf="result['organizations'] != undefined && result['organizations'].length > 0">
-           <span> Organization: </span>
-           <span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
-               <a *ngIf="organization.id" target="_blank"
-                  [href]="properties.baseOpenaireLink+'/search/organization?organizationId='+organization.id">
-                 <span>{{organization.name}}</span>
-                 <span class="custom-external custom-icon space"></span>
-               </a>
-             <span
-                   *ngIf="!organization.id">
-                       {{organization.name}}</span><span
-
-                   *ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
-           </span>
-           <span *ngIf="result['organizations'].length > 10">...</span>
-       </div>
-
-       <div *ngIf="result['countries'] && result['countries'].length > 0">
-           Country: <span *ngFor="let country of  result['countries'].slice(0,10) let i = index">{{country}}{{(i < ( result['countries'].slice(0,10).length-1))?", ":""}}{{(i ==  result['countries'].slice(0,10).length-1 &&  result['countries'].length > 10)?"...":""}}</span>
-       </div>
-       <div *ngIf="result['websiteURL'] != undefined && result['websiteURL'] != ''">
-           <span>Website URL: </span>
-           <span>
-               <a href="{{result['websiteURL']}}" target="_blank">
-                 <span>{{result['websiteURL']}}</span>
-                 <span class="custom-external custom-icon space"></span>
-               </a>
-           </span>
-       </div>
-
-       <div *ngIf="result['OAIPMHURL'] != undefined && result['OAIPMHURL'] != ''">
-           <span>OAI-PMH URL: </span>
-           <span>
-               <a href="{{result['OAIPMHURL']}}" target="_blank">
-                 <span>{{result['OAIPMHURL']}}</span>
-                 <span class="custom-external custom-icon space"></span>
-               </a>
-           </span>
-       </div>
-
-       <!-- <div *ngIf="result['subjects'] && result['subjects'].length > 0">
-           Subject: <span *ngFor="let subject of  result['subjects'].slice(0,10) let i = index">{{subject}}{{(i < ( result['subjects'].slice(0,10).length-1))?", ":""}}{{(i ==  result['subjects'].slice(0,10).length-1 &&  result['subjects'].length > 10)?"...":""}}</span>
-       </div> -->
-   </li>
-</ul>
-
-<div [class]="openaireSearchUtils.page > pagingLimit ? 'search-results' : ''" *ngIf="(openaireSearchUtils.page >= pagingLimit) && (openaireSearchUtils.totalResults > resultsPerPage*pagingLimit)">
-    <p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
-</div>
-
-<div *ngIf="openaireSearchUtils.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">
-      {{openaireSearchUtils.totalResults | number}} content providers, page {{openaireSearchUtils.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 [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
-    </span>
-  </div>
-</div>

src/app/pages/community/content-providers/add-content-providers.component.ts

@@ -1,218 +0,0 @@
-import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-import {SearchResult}     from '../../../openaireLibrary/utils/entities/searchResult';
-import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
-import {SearchFields, FieldDetails} from '../../../openaireLibrary/utils/properties/searchFields';
-import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
-import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
-import {SearchDataprovidersService} from '../../../openaireLibrary/services/searchDataproviders.service';
-import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
-import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
-import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
-import {Session} from '../../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
-
-@Component({
-    selector: 'add-content-providers',
-    templateUrl: './add-content-providers.component.html',
-})
-
-export class AddContentProvidersComponent implements OnInit {
-  @Input() communityContentProviders = [];
-
-  private community: string = '';
-
-  public openaireContentProviders = [];
-  public undo = {};
-  public queryParameters: string = "";
-
-  public disableForms: boolean = false;
-
-  public warningMessage = "";
-  public infoMessage = "";
-
-  public rowsOnPage:number  = 10;
-
-  public routerHelper:RouterHelper = new RouterHelper();
-  public errorCodes: ErrorCodes;
-  public openaireSearchUtils:SearchUtilsClass = new SearchUtilsClass();
-  public properties:EnvProperties = null;
-  public pagingLimit:number = 0;
-  public resultsPerPage: number = 0;
-
-  public subResults: any; subAdd: any; subRemove: any;
-  public body:string = "Send from page";
-
-  ngOnInit() {
-      this.route.data
-        .subscribe((data: { envSpecific: EnvProperties }) => {
-           this.properties = data.envSpecific;
-           this.pagingLimit = data.envSpecific.pagingLimit;
-           this.resultsPerPage =data.envSpecific.resultsPerPage;
-
-           this.route.queryParams.subscribe(params => {
-             this.community = params['communityId'];
-             this._getOpenaireContentProviders("", 1, 10);
-
-              var referrer = null;
-              if (typeof location !== 'undefined') {
-                referrer = location.href;
-              }
-              this.body = "[Please write your message here]";
-              this.body = StringUtils.URIEncode(this.body);
-           });
-        });
-  }
-
-  constructor(private route: ActivatedRoute, private _router: Router, private _searchContentProvidersService: SearchDataprovidersService, private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService) {
-    this.errorCodes = new ErrorCodes();
-    this.openaireSearchUtils.status = this.errorCodes.LOADING;
-  }
-
-  public ngOnDestroy() {
-    if(this.subResults){
-      this.subResults.unsubscribe();
-    }
-    if(this.subAdd) {
-      this.subAdd.unsubscribe();
-    }
-    if(this.subRemove) {
-      this.subRemove.unsubscribe();
-    }
-  }
-
-  public addContentProvider(contenProvider: SearchResult) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.subAdd = this._manageCommunityContentProvidersService.addContentProvider(this.properties, this.community, contenProvider).subscribe(
-        data => {
-          this.undo[contenProvider.id] = data.id;
-        },
-        err => {
-          console.log(err.status);
-        }/*,
-        () => {
-          console.info("completed ADD");
-        }*/
-      );
-    }
-  }
-
-  public removeContentProvider(contentProviderId: string, communityContentProviderId: string) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.subRemove = this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community, contentProviderId).subscribe(
-        data => {
-          //console.info(data);
-        },
-        err => {
-          console.log(err);
-        },
-        () => {
-          this.undo[communityContentProviderId] = "";
-        }
-      )
-    }
-  }
-
-  public inCommunity(contentProvider: any): any {
-    for(let communityContentProvider of this.communityContentProviders) {
-      if(communityContentProvider.openaireId == contentProvider.id) {
-        return true;
-      }
-    }
-
-    if(this.undo[contentProvider.id]) {
-      return true;
-    }
-    return false;
-  }
-
-  private _getOpenaireContentProviders(parameters:string, page: number, size: number){
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      if(page > this.pagingLimit) {
-        size=0;
-      }
-
-      if(this.openaireSearchUtils.status == this.errorCodes.LOADING) {
-        this.openaireSearchUtils.status = this.errorCodes.LOADING;
-
-        this.disableForms = true;
-        this.openaireContentProviders = [];
-        this.openaireSearchUtils.totalResults = 0;
-
-        this.subResults = this._searchContentProvidersService.searchDataproviders(parameters, null, page, size, [], this.properties).subscribe(
-          data => {
-              this.undo = {};
-              this.openaireSearchUtils.totalResults = data[0];
-              this.openaireContentProviders = data[1];
-
-              this.openaireSearchUtils.status = this.errorCodes.DONE;
-              if(this.openaireSearchUtils.totalResults == 0 ){
-                this.openaireSearchUtils.status = this.errorCodes.NONE;
-              }
-
-              this.disableForms = false;
-
-              if(this.openaireSearchUtils.status == this.errorCodes.DONE) {
-                // Page out of limit!!!
-                let totalPages:any = this.openaireSearchUtils.totalResults/(this.openaireSearchUtils.size);
-                if(!(Number.isInteger(totalPages))) {
-                    totalPages = (parseInt(totalPages, 10) + 1);
-                }
-                if(totalPages < page) {
-                  this.openaireSearchUtils.totalResults = 0;
-                  this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND;
-                }
-              }
-          },
-          err => {
-              console.log(err);
-               //TODO check erros (service not available, bad request)
-              if(err.status == '404') {
-                this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND;
-              } else if(err.status == '500') {
-                this.openaireSearchUtils.status = this.errorCodes.ERROR;
-              } else {
-                this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE;
-              }
-
-              this.disableForms = false;
-          }
-        );
-      }
-    }
-  }
-
-  totalPages(): number {
-    let totalPages:any = this.openaireSearchUtils.totalResults/(this.rowsOnPage);
-    if(!(Number.isInteger(totalPages))) {
-        totalPages = (parseInt(totalPages, 10) + 1);
-    }
-    return totalPages;
-  }
-
-  keywordChanged(keyword) {
-    this.openaireSearchUtils.keyword = keyword;
-    this.buildQueryParameters();
-    this.goTo(1);
-  }
-
-  buildQueryParameters() {
-    this.queryParameters = "";
-
-    if(this.openaireSearchUtils.keyword) {
-      this.queryParameters = "q="+StringUtils.URIEncode(this.openaireSearchUtils.keyword);
-    }
-  }
-
-  goTo(page:number = 1){
-    this.openaireSearchUtils.page=page;
-    this.openaireSearchUtils.status = this.errorCodes.LOADING;
-    this._getOpenaireContentProviders(this.queryParameters, page, 10);
-  }
-}

src/app/pages/community/content-providers/communityContentProviders-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-import {ManageContentProvidersComponent} from './manage-content-providers.component';
-
-@NgModule({
-    imports: [
-        RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ManageContentProvidersComponent}
-        ])
-    ]
-})
-export class CommunityContentProvidersRoutingModule { }

src/app/pages/community/content-providers/communityContentProviders.module.ts

@@ -1,55 +0,0 @@
-import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-import { EnvironmentSpecificResolver } from '../../../openaireLibrary/utils/properties/environmentSpecificResolver';
-import { EnvironmentSpecificService } from '../../../openaireLibrary/utils/properties/environment-specific.service';
-
-import { DataTablesModule } from 'angular-datatables';
-import { ManageContentProvidersComponent } from './manage-content-providers.component';
-import { ManageCommunityContentProvidersService } from '../../../services/manageContentProviders.service';
-import {SearchDataprovidersServiceModule} from '../../../openaireLibrary/connect/contentProviders/searchDataprovidersService.module';
-
-import { RemoveContentProvidersComponent } from './remove-content-providers.component';
-import { AddContentProvidersComponent } from './add-content-providers.component';
-import { SearchDataprovidersService } from '../../../openaireLibrary/services/searchDataproviders.service';
-import { PagingModule } from '../../../openaireLibrary/utils/paging.module';
-import { SearchPagingModule } from '../../../openaireLibrary/searchPages/searchUtils/searchPaging.module';
-
-import {ErrorMessagesModule} from '../../../openaireLibrary/utils/errorMessages.module';
-import {AlertModalModule} from '../../../openaireLibrary/utils/modal/alertModal.module';
-import {FABModule} from '../../../utils/fabModule.module';
-import {CommonModule} from '@angular/common';
-import {CommunityContentProvidersRoutingModule} from './communityContentProviders-routing.module';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        HttpClientModule,
-        FormsModule,
-        FormsModule,
-        ReactiveFormsModule,
-        RouterModule,
-        DataTablesModule,
-        PagingModule, SearchPagingModule,
-        ErrorMessagesModule,
-        AlertModalModule,
-        SearchDataprovidersServiceModule,
-        FABModule,
-        CommunityContentProvidersRoutingModule
-    ],
-    declarations: [
-        ManageContentProvidersComponent,
-        RemoveContentProvidersComponent,
-        AddContentProvidersComponent
-    ],
-    providers: [
-        ManageCommunityContentProvidersService,
-        SearchDataprovidersService,
-        EnvironmentSpecificResolver, EnvironmentSpecificService
-    ],
-    exports: [ManageContentProvidersComponent]
-})
-
-export class CommunityContentProvidersModule { }

src/app/pages/community/content-providers/criteria/criteria-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {IsCommunity} from '../../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-import {CriteriaComponent} from './criteria.component';
-
-@NgModule({
-    imports: [
-        RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CriteriaComponent}
-        ])
-    ]
-})
-export class CriteriaRoutingModule { }

src/app/pages/community/content-providers/criteria/criteria.component.html

@@ -1,108 +0,0 @@
-<div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
-  <span class="loading-gif uk-align-center"></span>
-</div>
-<div *ngIf="dataProvider" class="uk-padding uk-padding-remove-bottom">
-  <div class="uk-flex uk-flex-middle" uk-grid>
-    <div class="uk-flex uk-flex-middle uk-width-4-5">
-      <a class="uk-icon uk-margin-right" uk-icon="icon: arrow-left; ratio: 2"
-         routerLink="/manage-content-providers" [queryParams]="{communityId: community}"></a>
-      <div class="uk-width-expand">
-        <span>Criteria for</span><br>
-        <span class="uk-text-large uk-text-bold">{{dataProvider.officialname}}</span>
-      </div>
-    </div>
-    <div class="uk-width-expand uk-text-right">
-      <button class="uk-button uk-width-1-2@l uk-button-danger"
-              (click)="save()">Save</button>
-    </div>
-  </div>
-  <div class="uk-alert uk-alert-primary uk-flex uk-flex-middle uk-margin-medium-top">
-    <span class="uk-icon uk-margin-small-right" uk-icon="info"></span>
-    <div class="uk-width-expand">
-      If no criteria are specified, all research results of this content provider will be included in your community.
-    </div>
-  </div>
-  <div class="uk-margin-top uk-margin-bottom">
-    <span>Add criteria to limit research results.</span><br>
-    <span>Results which satisfy any of the above criteria will be included in your community.</span>
-  </div>
-  <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-  <div *ngIf="criteria.length === 0"
-       class="uk-padding uk-position-relative">
-    <div class="uk-position-center">
-      No criteria are specified
-    </div>
-  </div>
-  <div *ngIf="criteria.controls.length > 0" [formGroup]="selectioncriteria">
-    <div formArrayName="criteria">
-      <div class="uk-margin-top" *ngFor="let criterion of criteria.controls; let i=index" [formGroupName]="i">
-        <span class="uk-text-uppercase uk-text-large uk-margin-small-bottom">Criterion {{i + 1}}</span><br>
-        <div class="uk-padding" style="border: solid 1px;" formArrayName="constraint">
-          <div class="uk-flex uk-flex-middle uk-grid-small uk-margin-small-bottom" uk-grid>
-            <div class="uk-width-1-5">
-              <label class="uk-text-uppercase uk-text-muted">Constraint Field</label>
-            </div>
-            <div class="uk-width-1-5">
-              <label class="uk-text-uppercase uk-text-muted">Operator</label>
-            </div>
-            <div class="uk-width-2-5">
-              <label class="uk-text-uppercase uk-text-muted">Term</label>
-            </div>
-          </div>
-          <div *ngFor="let constraint of getConstraint(i).controls; let j=index"
-               [formGroupName]="j" class="uk-margin-bottom">
-            <div class="uk-flex uk-flex-middle uk-grid-small" uk-grid>
-              <div class="uk-width-1-5">
-                <select formControlName="field" class="form-control uk-select"
-                        [class.uk-text-muted]="constraint.get('field').value === ''"
-                        [class.uk-form-danger]="constraint.get('field').status === 'INVALID'">
-                  <option [value]="''" disabled selected hidden>Select a field...</option>
-                  <option [value]="'title'">title</option>
-                  <option [value]="'author'">author's name</option>
-                  <option [value]="'author ORCID'">author's ORCID</option>
-                  <option [value]="'contributor'">contributor</option>
-                  <option [value]="'description'">description</option>
-                </select>
-              </div>
-              <div class="uk-width-1-5">
-                <select formControlName="verb" class="form-control uk-select"
-                        [class.uk-form-danger]="constraint.get('verb').status === 'INVALID'">
-                  <option [value]="'contains'">contains</option>
-                  <option [value]="'equals'">equals</option>
-                  <option [value]="'not_contains'">not contains</option>
-                  <option [value]="'not_equals'">not equals</option>
-                </select>
-              </div>
-              <div class="uk-width-2-5">
-                <input type="text" class="uk-input" formControlName="value" placeholder="Type term..."
-                       [class.uk-form-danger]="constraint.get('value').status === 'INVALID'">
-              </div>
-              <div class="uk-width-1-6">
-                <span *ngIf="getConstraint(i).length > j + 1">AND</span>
-              </div>
-              <div class="uk-width-expand" *ngIf="getConstraint(i).length > 1">
-                <button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
-                        uk-icon="minus" (click)="removeConstraint(i, j)"></button>
-              </div>
-              <div class="uk-width-expand" *ngIf="getConstraint(i).length === 1">
-                <button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
-                        uk-icon="minus" (click)="removeConstraint(i, j)"
-                        uk-tooltip="title: By removing this constraint, the criterion will be removed too."></button>
-              </div>
-            </div>
-          </div>
-          <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-right">
-            <button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
-                    (click)="addConstraint(i)" uk-icon="plus"></button>
-            <span class="uk-text-uppercase clickable" (click)="addConstraint(i)">Add Constraint</span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="uk-margin-top uk-flex uk-flex-middle">
-    <button class="uk-icon-button uk-button-danger uk-icon uk-margin-small-right"
-            (click)="addCriteria()" uk-icon="plus"></button>
-    <span class="uk-text-uppercase clickable" (click)="addCriteria()">Add Criterion</span>
-  </div>
-</div>

src/app/pages/community/content-providers/criteria/criteria.component.ts

@@ -1,138 +0,0 @@
-import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-import {HelperFunctions} from '../../../../openaireLibrary/utils/HelperFunctions.class';
-import {SearchCommunityDataprovidersService} from '../../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
-import {EnvProperties} from '../../../../openaireLibrary/utils/properties/env-properties';
-import {ContentProvider} from '../../../../openaireLibrary/utils/entities/contentProvider';
-import {FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
-import {ManageCommunityContentProvidersService} from '../../../../services/manageContentProviders.service';
-import {Title} from '@angular/platform-browser';
-
-@Component({
-  selector: 'criteria',
-  templateUrl: './criteria.component.html'
-})
-
-export class CriteriaComponent implements OnInit {
-  public community: string = '';
-  public openaireId: string = '';
-  public dataProvider: ContentProvider = null;
-  public selectioncriteria: FormGroup;
-  private properties: EnvProperties;
-  showLoading = true;
-  public errorMessage: string;
-
-  constructor(private route: ActivatedRoute, private _router: Router,
-              private title: Title,
-              private searchCommunityDataprovidersService: SearchCommunityDataprovidersService,
-              private manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
-              private fb: FormBuilder) {
-  }
-
-  ngOnInit() {
-    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
-      this.properties = data.envSpecific;
-      this.route.queryParams.subscribe(params => {
-        if (params['communityId']) {
-          this.community = params['communityId'];
-        }
-        if (params['openaireId']) {
-          this.openaireId = params['openaireId'];
-        }
-        this.title.setTitle('Administration Dashboard | Criteria');
-        this.searchCommunityDataprovidersService.searchDataproviders(this.properties, this.community).subscribe(dataProviders => {
-          dataProviders.forEach(dataProvider => {
-            if (dataProvider.openaireId == this.openaireId) {
-              this.dataProvider = dataProvider;
-            }
-          });
-          if (!this.dataProvider) {
-            this._router.navigate(['manage-content-providers'],
-              {queryParams: {'communityId': this.community}});
-          }
-          this.buildForm();
-          this.showLoading = false;
-        });
-        HelperFunctions.scroll();
-      });
-    });
-  }
-
-  public ngOnDestroy() {
-  }
-
-  buildForm() {
-    this.selectioncriteria = this.fb.group({
-      criteria: this.fb.array([])
-    });
-    let selectionCriteria = this.dataProvider.selectioncriteria;
-    if (selectionCriteria) {
-      selectionCriteria.criteria.forEach(criterion => {
-        let constraintArray: FormArray = this.fb.array([]);
-        criterion.constraint.forEach(constraint => {
-          constraintArray.push(this.fb.group({
-            field: this.fb.control(constraint.field, Validators.required),
-            verb: this.fb.control(constraint.verb, Validators.required),
-            value: this.fb.control(constraint.value, Validators.required)
-          }));
-        });
-        this.criteria.push(this.fb.group({
-          constraint: constraintArray
-        }));
-      });
-    }
-  }
-
-  public get criteria(): FormArray {
-    return this.selectioncriteria.get('criteria') as FormArray;
-  }
-
-  public getConstraint(i: number): FormArray {
-    return this.criteria.at(i).get('constraint') as FormArray;
-  }
-
-  public addCriteria() {
-    let constraintArray: FormArray = this.fb.array([
-      this.fb.group({
-        field: this.fb.control('', Validators.required),
-        verb: this.fb.control('contains', Validators.required),
-        value: this.fb.control('', Validators.required)
-      })
-    ]);
-    this.criteria.push(this.fb.group({
-      constraint: constraintArray
-    }));
-  }
-
-  public addConstraint(i: number) {
-    let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
-    constraintArray.push(this.fb.group({
-      field: this.fb.control('', Validators.required),
-      verb: this.fb.control('contains', Validators.required),
-      value: this.fb.control('', Validators.required)
-    }));
-  }
-
-  public removeConstraint(i: number, j: number) {
-    let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
-    constraintArray.removeAt(j);
-    if (constraintArray.length === 0) {
-      this.criteria.removeAt(i);
-    }
-  }
-
-  save() {
-    this.errorMessage = null;
-    if (this.selectioncriteria.status === 'VALID') {
-      this.dataProvider.selectioncriteria = this.selectioncriteria.value;
-      this.manageCommunityContentProvidersService.
-      saveContentProvider(this.properties, this.dataProvider).subscribe( () => {
-        this._router.navigate(['manage-content-providers'], {
-          queryParams: {communityId: this.dataProvider.communityId}
-        });
-      });
-    } else {
-      this.errorMessage = 'Please fill all fields of each constraint or remove all constraints with empty fields.';
-    }
-  }
-}

src/app/pages/community/content-providers/criteria/criteria.module.ts

@@ -1,32 +0,0 @@
-import {NgModule} from '@angular/core';
-
-import {EnvironmentSpecificResolver} from '../../../../openaireLibrary/utils/properties/environmentSpecificResolver';
-import {EnvironmentSpecificService} from '../../../../openaireLibrary/utils/properties/environment-specific.service';
-import {CommonModule} from '@angular/common';
-import {CriteriaComponent} from './criteria.component';
-import {CriteriaRoutingModule} from './criteria-routing.module';
-import {SearchCommunityDataprovidersService} from '../../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
-import {RouterModule} from '@angular/router';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {ManageCommunityContentProvidersService} from '../../../../services/manageContentProviders.service';
-
-@NgModule({
-  imports: [
-    CommonModule,
-    CriteriaRoutingModule,
-    RouterModule,
-    FormsModule,
-    ReactiveFormsModule,
-  ],
-    declarations: [
-        CriteriaComponent
-    ],
-    providers: [
-        SearchCommunityDataprovidersService,
-        ManageCommunityContentProvidersService,
-        EnvironmentSpecificResolver, EnvironmentSpecificService
-    ],
-    exports: [CriteriaComponent]
-})
-
-export class CriteriaModule { }

src/app/pages/community/content-providers/manage-content-providers.component.ts

@@ -1,87 +0,0 @@
-import { Component, ViewChild, OnInit, ViewEncapsulation, Input, ElementRef } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-
-import {RemoveContentProvidersComponent} from './remove-content-providers.component';
-import {AddContentProvidersComponent} from './add-content-providers.component';
-
-import {Session} from '../../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
-import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
-import {Title} from '@angular/platform-browser';
-
-@Component({
-    selector: 'manage-content-providers',
-    template: `
-      <div id="manage-content-providers">
-        <div class="menubar uk-margin-bottom ">
-          <a *ngIf="!toggle" (click)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage" class="uk-button uk-button-primary uk-float-right">{{toggleLinkMessage}}</a>
-          <div class="manage-content-providers-title uk-text-large">{{pageTitle}}</div>
-        </div>
-
-        <div class="toggle-usage">
-          <remove-content-providers (communityContentProvidersChanged)="communityContentProvidersChanged($event)"></remove-content-providers>
-          <fab (clicked)="updateCommunityContentProviders()" uk-toggle="target: .toggle-usage"></fab>
-        </div>
-        <div class="toggle-usage" hidden>
-          <add-content-providers [(communityContentProviders)]="communityContentProviders"></add-content-providers>
-        </div>
-      </div>
-    `
-})
-
-export class ManageContentProvidersComponent implements OnInit {
-  private community: string = '';
-
-  @Input() communityContentProviders =[];
-  @ViewChild (RemoveContentProvidersComponent) removeContentProvidersComponent : RemoveContentProvidersComponent ;
-  @ViewChild (AddContentProvidersComponent) addContentProvidersComponent : AddContentProvidersComponent ;
-
-  public warningMessage = "";
-  public infoMessage = "";
-
-  public toggle: boolean = true;
-  public updateCommunityContentProvidersOnToggle: boolean = false;
-  public pageTitle: string = "Manage content providers";
-  public toggleLinkMessage: string = "Manage content providers";
-
-  ngOnInit() {
-    this.route.queryParams.subscribe(params => {
-      if(params['communityId']) {
-        this.community = params['communityId'];
-        this.title.setTitle('Administration Dashboard | Content Providers');
-      }
-      HelperFunctions.scroll();
-    });
-  }
-
-  constructor(private element: ElementRef,
-              private title: Title,
-              private route: ActivatedRoute, private _router: Router) {}
-
-  public ngOnDestroy() {}
-
-  public updateCommunityContentProviders() {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      HelperFunctions.scroll();
-
-      this.toggle = !this.toggle;
-      if(this.toggle) {
-        this.pageTitle = "Manage content providers";
-        //this.toggleLinkMessage = "Missing content providers?";
-
-        this.removeContentProvidersComponent._getCommunityContentProviders();
-        this.addContentProvidersComponent.undo = {};
-      } else {
-        this.updateCommunityContentProvidersOnToggle = false;
-        this.pageTitle = "Search content providers";
-        //this.toggleLinkMessage = "Manage content providers";
-      }
-    }
-  }
-
-  public communityContentProvidersChanged($event) {
-    this.communityContentProviders = $event.value;
-  }
-}

src/app/pages/community/content-providers/remove-content-providers.component.html

@@ -1,99 +0,0 @@
-<div class="uk-child-width-expand@s uk-text-center uk-margin-bottom" uk-grid>
-  <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 content providers..."
-               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>
-<div class="uk-alert uk-alert-primary uk-margin-top-large">
-  <div><span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-    All the research results collected from the content providers specified here will be automatically linked to your
-    community dashboard.
-  </div>
-
-</div>
-<errorMessages [status]="[communitySearchUtils.status]" [type]="'community Content Providers'"></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}} content providers, 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">Name</th>
-        <th class="uk-text-center">Official Name</th>
-        <th class="uk-text-center" *ngIf="properties.environment !== 'production'">Criteria</th>
-        <th class="uk-text-center">Action</th>
-      </tr>
-      </thead>
-      <tbody>
-      <tr class="uk-table-middle" *ngFor="let result of communityContentProviders">
-        <td class="uk-text-center uk-width-1-4">
-          <a target="_blank"
-             [href]="communityUrl+'/search/dataprovider?datasourceId=' +result.openaireId">
-            <span *ngIf="result.name">{{result.name}}</span>
-            <span *ngIf="!result.name">[no name available]</span>
-            <span class="custom-external custom-icon space"></span>
-          </a>
-        </td>
-        <td class="uk-text-center uk-width-1-4">
-          <span *ngIf="result.officialname">{{result.officialname}}</span>
-          <span *ngIf="!result.officialname">-</span>
-        </td>
-        <td class="uk-text-center uk-width-1-4" *ngIf="properties.environment !== 'production'">
-          <input title="Edit" src="assets/imgs/icn_edit.png"
-                 (click)="goToCriteria(result.openaireId)"
-                 class="edit uk-margin-small-right" type="image">
-          <span (click)="goToCriteria(result.openaireId)"
-                class="clickable">{{getCriteriaLabel(result.selectioncriteria)}}</span>
-        </td>
-        <td class="uk-text-center uk-width-1-4">
-          <!--              red_background_color red_color-->
-          <a (click)="removeContentProvider(result)" class="uk-icon-button remove uk-button-danger"
-             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}} content providers, 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)="confirmedDeleteContentProvider($event)"></modal-alert>

src/app/pages/community/content-providers/remove-content-providers.component.ts

@@ -1,329 +0,0 @@
-import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-import { Subject } from 'rxjs';
-import { DataTableDirective } from 'angular-datatables';
-
-import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
-import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
-import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
-import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
-import {SearchCommunityDataprovidersService} from '../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
-import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
-import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
-
-import {Session} from '../../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
-import {SelectionCriteria} from '../../../openaireLibrary/utils/entities/contentProvider';
-import {CriteriaComponent} from './criteria/criteria.component';
-
-@Component({
-    selector: 'remove-content-providers',
-    templateUrl: './remove-content-providers.component.html',
-    styles: [`
-      #dpTable_info, #dpTable_paginate,  #dpTable_length,  #dpTable_filter{
-        display: none;
-      }
-
-      `],
-    encapsulation: ViewEncapsulation.None // this used in order styles to work
-})
-
-export class RemoveContentProvidersComponent implements OnInit {
-  public routerHelper:RouterHelper = new RouterHelper();
-
-  private community: string = '';
-  public communityUrl: string = "https://beta.explore.openaire.eu";
-
-  private errorCodes: ErrorCodes;
-
-  @Output() communityContentProvidersChanged  = new EventEmitter();
-  public communityContentProviders = [];
-  public communitySearchUtils:SearchUtilsClass = new SearchUtilsClass();
-
-  public sub: any; public subResults: any; subRemove: any;
-  properties:EnvProperties;
-
-  public disableForms: boolean = false;
-
-  dtOptions: DataTables.Settings = {};
-  showTable = false; filteringAdded = false;
-  @ViewChild(DataTableDirective) datatableElement: DataTableDirective;
-  dtTrigger: Subject<any> = new Subject(); //necessary
-
-  public rowsOnPage:number  = 10;
-
-  public queryParameters: string = "";
-
-  public query = '';
-  public selectedContentProviders=[] ;
-  public elementRef;
-
-  public contentProviders:string[];
-  private triggered: boolean = false;
-
-  private selectedCommunityContentProvider: any;
-
-  @ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;
-
-  ngOnInit() {
-    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
-        this.properties = data.envSpecific;
-      });
-
-    this.route.queryParams.subscribe(params => {
-      if(params['communityId']) {
-        this.community = params['communityId'];
-        this.communityUrl = "https://beta."+this.community+".openaire.eu";
-
-        this._getCommunityContentProviders();
-      }
-    });
-
-    this.dtOptions = {
-      "pageLength": this.rowsOnPage,
-      "language": {
-          "search": "",
-          "searchPlaceholder": "Search content providers..."
-        }
-    };
-
-    this.communitySearchUtils.keyword = "";
-  }
-
-  constructor(private route: ActivatedRoute, private _router: Router,
-              private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
-              private _searchCommunityContentProvidersService: SearchCommunityDataprovidersService) {
-    this.errorCodes = new ErrorCodes();
-    this.communitySearchUtils.status = this.errorCodes.LOADING;
-  }
-
-  public ngOnDestroy() {
-    if(this.sub){
-      this.sub.unsubscribe();
-    }
-    if(this.subResults){
-      this.subResults.unsubscribe();
-    }
-    if(this.subRemove){
-      this.subRemove.unsubscribe();
-    }
-
-    $.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.communitySearchUtils.keyword)) {
-         return true;
-       }
-       return false;
-     });
-
-     //console.info("ngAfterViewInit");
-  }
-
-  public getCriteriaLabel(selectionCriteria: SelectionCriteria): string {
-    if(selectionCriteria && selectionCriteria.criteria.length > 0) {
-      return (selectionCriteria.criteria.length === 1)?'1 criterion':(selectionCriteria.criteria.length + ' criteria')
-    } else {
-      return 'no criteria';
-    }
-  }
-
-  filterData(row: any, query: string) {
-    let returnValue: boolean = false;
-
-    if(query) {
-      for(var i=0; i <2; 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.communitySearchUtils.page=page;
-
-      var table = $('#dpTable').DataTable();
-      table.page( page - 1  ).draw( false );
-
-      var info = table.page.info();
-      this.communitySearchUtils.totalResults = info.recordsDisplay;
-  }
-
-  totalPages(): number {
-      let totalPages:any = this.communitySearchUtils.totalResults/(this.rowsOnPage);
-      if(!(Number.isInteger(totalPages))) {
-          totalPages = (parseInt(totalPages, 10) + 1);
-      }
-      return totalPages;
-  }
-
-  public confirmedDeleteContentProvider(data : any) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.subRemove = this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community, this.selectedCommunityContentProvider.id).subscribe(
-        data => {
-          //console.info(data);
-        },
-        err => {
-          console.log(err);
-        },
-        () => {
-          let index = this.communityContentProviders.indexOf(this.selectedCommunityContentProvider);
-          this.communityContentProviders.splice(index, 1);
-
-          this.communitySearchUtils.totalResults--;
-          this.communitySearchUtils.page=1;
-
-          this.rerender();
-        }
-      )
-    }
-  }
-
-  public removeContentProvider(communityContentProvider: any) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.selectedCommunityContentProvider = communityContentProvider;
-      this.alertModalDeleteCommunity.cancelButton = true;
-      this.alertModalDeleteCommunity.okButton = true;
-      this.alertModalDeleteCommunity.alertTitle = "Remove content provider?";
-      let title = "";
-      if(communityContentProvider.name) {
-        title = communityContentProvider.name;
-      }
-      if(communityContentProvider.name && communityContentProvider.acronym) {
-        title += " (";
-      }
-      if(communityContentProvider.acronym) {
-        title += communityContentProvider.acronym;
-      }
-      if(communityContentProvider.name && communityContentProvider.acronym) {
-        title += ") ";
-      }
-      this.alertModalDeleteCommunity.message = "Content Provider";
-      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 _getCommunityContentProviders(){
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.communitySearchUtils.status = this.errorCodes.LOADING;
-      this.disableForms = true;
-      this.communityContentProviders = [];
-      this.communitySearchUtils.totalResults = 0;
-      this.communitySearchUtils.page=1;
-      this.communitySearchUtils.keyword = "";
-
-      this.subResults = this._searchCommunityContentProvidersService.searchDataproviders(this.properties, this.community).subscribe(
-          data => {
-            //console.info("search Content Providers [total communityContentProviders:"+data.length+"]");
-            this.communityContentProviders = data;
-
-            this.communitySearchUtils.totalResults = data.length;
-            this.communitySearchUtils.status = this.errorCodes.DONE;
-            // if(this.communitySearchUtils.totalResults == 0 ){
-            //   this.communitySearchUtils.status = this.errorCodes.NONE;
-            // }
-            this.disableForms = false;
-            if(!this.triggered) {
-              this.triggerInitialLoad();
-            } else {
-              var table = $('#dpTable').DataTable();
-              table.clear();
-
-              this.rerender();
-            }
-
-            this.communityContentProvidersChanged.emit({
-                value: this.communityContentProviders,
-            });
-          },
-          err => {
-            console.log(err);
-             //TODO check erros (service not available, bad request)
-
-            if(err.status == '404') {
-              this.communitySearchUtils.status = this.errorCodes.NOT_FOUND;
-            } else if(err.status == '500') {
-              this.communitySearchUtils.status = this.errorCodes.ERROR;
-            } else {
-              this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;
-            }
-
-            this.disableForms = false;
-            if(!this.triggered) {
-              this.triggerInitialLoad();
-            } else {
-              var table = $('#dpTable').DataTable();
-              table.clear();
-
-              this.rerender();
-            }
-          }
-      );
-    }
-  }
-
-  goToCriteria(openaireId: string) {
-    this._router.navigate(['criteria'], {
-      queryParams: {
-        communityId: this.community,
-        openaireId: openaireId
-      },
-      relativeTo: this.route
-    })
-  }
-}

src/app/pages/community/projects/add-projects.component.html

@@ -1,132 +0,0 @@
-<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)]="selectedFunderId" name="select_funder"  >
-         <option  value="0" (click)="funderChanged('0','Select funder:')">Select funder:</option>
-         <option *ngFor="let  funder of funders"  [value]="funder.id" (click)="funderChanged(funder.id,funder.name)">{{(funder.name.split("||").length > 0)?(funder.name.split("||")[0]+" ("+funder.name.split("||")[1]+")"):(funder.name)}}</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="Project name or ID" aria-describedby="sizing-addon2"  [(ngModel)]="openaireSearchUtils.keyword"  name="keyword" >
-        <button (click)="keywordChanged(openaireSearchUtils.keyword)"  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>
-
-<div *ngIf="openaireSearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">
-  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-Newly added projects will be linked to your community on the next run of our algorithms.
-<!-- <div> If you cannot find a funder that is relevant for your community, please contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing Funder' + '&body=' + body" target="_top">feedback@openaire.eu</a>) and we'll try to get the funder on board!</div> -->
-
-
-</div>
-<div *ngIf="openaireSearchUtils.status == errorCodes.DONE" class="uk-alert uk-alert-primary">
-  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-If you cannot find a funder that is relevant for your community, please contact us (<a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing Funder' + '&body=' + body" target="_top">feedback@openaire.eu</a>) and we'll try to get the funder on board!
-
-
-</div>
-
-<errorMessages [status]="[openaireSearchUtils.status]" [type]="'OpenAIRE projects'"></errorMessages>
-<div *ngIf="openaireSearchUtils.status == errorCodes.NONE" class="uk-alert uk-alert-primary">
-  <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-   If you wish to suggest a new funder to include or report a missing project, please contact us via
-   <a [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ community + '] report missing project' + '&body=' + body" target="_top">feedback@openaire.eu</a>.
-</div>
-
-<div *ngIf="openaireSearchUtils.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">
-      {{openaireSearchUtils.totalResults | number}} projects, page {{openaireSearchUtils.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 [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
-    </span>
-  </div>
-</div>
-
-<ul *ngIf="(openaireSearchUtils.page <= pagingLimit)" [class]="'uk-list uk-list-divider  uk-margin '+custom_class">
- <!-- <errorMessages [status]="[status]" [type]="'results'"></errorMessages> -->
-
-   <li *ngFor="let result of openaireProjects" class="uk-animation-fade">
-       <h6 class="uk-grid" uk-grid>
-           <span class="uk-width-5-6">
-             <a target="_blank" [href]="properties.baseOpenaireLink+'/search/project?projectId='+result.id">
-               <span *ngIf="result['title'].name || result.acronym">
-                 <span *ngIf="result.acronym">{{result.acronym}}</span>
-                 <span *ngIf="result.acronym && result['title'].name">-</span>
-                 <span [innerHTML]="result['title'].name"></span>
-                 <span *ngIf="result.code">({{result.code}})</span>
-               </span>
-               <span *ngIf="!result['title'].name && !result.acronym">
-                 [no title available]
-                 <span *ngIf="result.code">({{result.code}})</span>
-              </span>
-               <span class="custom-external custom-icon space"></span>
-             </a>
-           </span>
-
-           <span class="uk-width-1-6 uk-text-center">
-             <!-- <a *ngIf="!inCommunity(result)" (click)="addProject(result)" class="uk-icon-button"><svg height="20" icon="plus" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect height="17" width="1" x="9" y="1"></rect><rect height="1" width="17" x="1" y="9"></rect></svg></a> -->
-<!--               green_background_color green_color-->
-             <a *ngIf="!inCommunity(result)" (click)="addProject(result)" class="uk-icon-button add uk-button-primary" uk-icon="plus" title="Add"></a>
-
-             <span *ngIf="inCommunity(result)" class="uk-label uk-label-success">Added</span>
-             <!-- <svg *ngIf="inCommunity(result)" class="added" src="assets/imgs/check-icon.png" title="Added" width="20" type="image" height="20"></svg> -->
-
-             <!-- <button *ngIf="undo[result.id]" class="uk-button uk-button-danger uk-button-small" (click)="removeProject(result.id)">Undo</button> -->
-             <!-- <input *ngIf="undo[result.id]" (click)="removeProject(result.id)" class="remove" src="assets/imgs/x-icon.png" title="Undo" width="20" type="image" height="20"> -->
-             <!-- <a *ngIf="undo[result.id]" (click)="removeProject(result.id)" class="remove red_colour"><svg height="20" icon="close" ratio="1" viewBox="0 0 20 20" width="20" xmlns="http://www.w3.org/2000/svg"><rect height="17" width="1" x="9" y="1"></rect><rect height="1" width="17" x="1" y="9"></rect></svg></a> -->
-<!--               red_background_color red_color-->
-             <a *ngIf="undo[result.id]" (click)="removeProject(undo[result.id], result.id)" class="uk-icon-button remove uk-button-danger" uk-icon="close" title="Undo"></a>
-
-          </span>
-       </h6>
-       <span *ngIf="result.title && result.title.accessMode" [class]="'uk-label custom-label  label-'+ result.title.accessMode " title="Access Mode">{{result.title.accessMode}}</span>
-       <span *ngIf="result.funderShortname" class="uk-label custom-label label-funder " title="Funder">{{result.funderShortname}}</span>
-       <span *ngIf="result.title  && result.title.sc39" class="uk-label custom-label label-sc39 " title="Special Clause 39">Special Clause 39</span>
-
-       <div *ngIf="result.startYear && result.endYear"> Start year: {{result.startYear}} - End year: {{result.endYear}}</div>
-       <div *ngIf="result['organizations'] != undefined && result['organizations'].length > 0">
-           <span> Organization: </span>
-           <span *ngFor="let organization of result['organizations'].slice(0,10) let i=index">
-               <a *ngIf="organization.id" target="_blank"
-                  [href]="properties.baseOpenaireLink+'/search/organization?organizationId='+organization.id">
-                    <span>{{organization.name}}</span>
-                    <span class="custom-external custom-icon space"></span>
-               </a>
-             <span
-                   *ngIf="!organization.id">
-                       {{organization.name}}</span><span
-
-                   *ngIf="(i < result['organizations'].length-1) && (i < 9)">,</span>
-           </span>
-           <span *ngIf="result['organizations'].length > 10">...</span>
-       </div>
-   </li>
-</ul>
-
-<div [class]="openaireSearchUtils.page > pagingLimit ? 'search-results' : ''" *ngIf="(openaireSearchUtils.page >= pagingLimit) && (openaireSearchUtils.totalResults > resultsPerPage*pagingLimit)">
-    <p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>
-</div>
-
-<div *ngIf="openaireSearchUtils.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">
-      {{openaireSearchUtils.totalResults | number}} projects, page {{openaireSearchUtils.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 [limitPaging]=true [currentPage]="openaireSearchUtils.page" [totalResults]="openaireSearchUtils.totalResults" [size]="rowsOnPage" (pageChange)="goTo($event.value)"></paging-no-load>
-    </span>
-  </div>
-</div>

src/app/pages/community/projects/add-projects.component.ts

@@ -1,260 +0,0 @@
-import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-//import { Subject } from 'rxjs/Subject';
-import {SearchResult}     from '../../../openaireLibrary/utils/entities/searchResult';
-import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
-import {SearchFields, FieldDetails} from '../../../openaireLibrary/utils/properties/searchFields';
-import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
-import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
-import {SearchProjectsService} from '../../../openaireLibrary/services/searchProjects.service';
-import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
-import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
-import {ManageCommunityProjectsService} from '../../../services/manageProjects.service';
-
-import {Session} from '../../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
-
-@Component({
-    selector: 'add-projects',
-    templateUrl: './add-projects.component.html',
-})
-
-export class AddProjectsComponent implements OnInit {
-  @Input() communityProjects = [];
-  //@Output() communityProjectsChanged  = new EventEmitter();
-
-  private community: string = '';
-
-  public openaireProjects = [];
-  public undo = {};
-  public queryParameters: string = "";
-
-  public funders:string[];
-  public selectedFunderId:string ="0";
-  selectedFunderName:string ="Select funder:";
-
-  public disableForms: boolean = false;
-
-  public warningMessage = "";
-  public infoMessage = "";
-
-  public rowsOnPage:number  = 10;
-
-  public routerHelper:RouterHelper = new RouterHelper();
-  public errorCodes: ErrorCodes;
-  public openaireSearchUtils:SearchUtilsClass = new SearchUtilsClass();
-  public properties:EnvProperties = null;
-  public pagingLimit:number = 0;
-  public resultsPerPage: number = 0;
-
-  public subFunders: any; public subResults: any; subAdd: any; subRemove: any;
-  public body:string = "Send from page";
-
-  ngOnInit() {
-      this.route.data
-        .subscribe((data: { envSpecific: EnvProperties }) => {
-           this.properties = data.envSpecific;
-           this.pagingLimit = data.envSpecific.pagingLimit;
-           this.resultsPerPage =data.envSpecific.resultsPerPage;
-
-           this.route.queryParams.subscribe(params => {
-             this.community = params['communityId'];
-             this.getFunders();
-             this._getOpenaireProjects("", 1, 10);
-
-             var referrer = null;
-             if (typeof location !== 'undefined') {
-               referrer = location.href;
-             }
-             this.body = "[Please write your message here]";
-             this.body = StringUtils.URIEncode(this.body);
-           });
-        });
-  }
-
-  constructor(private route: ActivatedRoute, private _router: Router, private _searchProjectsService: SearchProjectsService, private _manageCommunityProjectsService: ManageCommunityProjectsService) {
-    this.errorCodes = new ErrorCodes();
-    this.openaireSearchUtils.status = this.errorCodes.LOADING;
-  }
-
-  public ngOnDestroy() {
-    if(this.subFunders){
-      this.subFunders.unsubscribe();
-    }
-    if(this.subResults){
-      this.subResults.unsubscribe();
-    }
-    if(this.subAdd) {
-      this.subAdd.unsubscribe();
-    }
-    if(this.subRemove) {
-      this.subRemove.unsubscribe();
-    }
-  }
-
-  public addProject(project: SearchResult) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.subAdd = this._manageCommunityProjectsService.addProject(this.properties, this.community, project).subscribe(
-        data => {
-          this.undo[project.id] = data.id;
-        },
-        err => {
-          console.log(err.status);
-        }/*,
-        () => {
-          console.info("completed ADD");
-        }*/
-      );
-    }
-  }
-
-  public removeProject(projectId: string, communityProjectId: string) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.subRemove = this._manageCommunityProjectsService.removeProject(this.properties, this.community, projectId).subscribe(
-        data => {
-          //console.info(data);
-        },
-        err => {
-          console.log(err);
-        },
-        () => {
-          this.undo[communityProjectId] = "";
-        }
-      )
-    }
-  }
-
-  public inCommunity(project: any): any {
-    for(let communityProject of this.communityProjects) {
-      if(communityProject.openaireId == project.id) {
-        return true;
-      } else if(project.code == communityProject.grantId && project.funderShortname == communityProject.funder) {
-        return true;
-      }
-    }
-
-    if(this.undo[project.id]) {
-      return true;
-    }
-    return false;
-  }
-
-  getFunders ()  {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.subFunders = this._searchProjectsService.getFunders(this.properties).subscribe(
-        data => {
-          this.funders = data[1];
-        },
-        err => console.log(err)
-      );
-    }
-  }
-
-  private _getOpenaireProjects(parameters:string, page: number, size: number){
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      if(page > this.pagingLimit) {
-        size=0;
-      }
-
-      if(this.openaireSearchUtils.status == this.errorCodes.LOADING) {
-        this.openaireSearchUtils.status = this.errorCodes.LOADING;
-
-        this.disableForms = true;
-        this.openaireProjects = [];
-        this.openaireSearchUtils.totalResults = 0;
-
-        this.subResults = this._searchProjectsService.searchProjects(parameters, null, page, size, [], this.properties).subscribe(
-          data => {
-              this.undo = {};
-              //console.info("total openaire projects = "+data[0]);
-              this.openaireSearchUtils.totalResults = data[0];
-              this.openaireProjects = data[1];
-
-              //this.searchPage.checkSelectedFilters(this.filters);
-
-              this.openaireSearchUtils.status = this.errorCodes.DONE;
-              if(this.openaireSearchUtils.totalResults == 0 ){
-                this.openaireSearchUtils.status = this.errorCodes.NONE;
-              }
-
-              this.disableForms = false;
-
-              if(this.openaireSearchUtils.status == this.errorCodes.DONE) {
-                // Page out of limit!!!
-                let totalPages:any = this.openaireSearchUtils.totalResults/(this.openaireSearchUtils.size);
-                if(!(Number.isInteger(totalPages))) {
-                    totalPages = (parseInt(totalPages, 10) + 1);
-                }
-                if(totalPages < page) {
-                  this.openaireSearchUtils.totalResults = 0;
-                  this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND;
-                }
-              }
-          },
-          err => {
-              console.log(err);
-               //TODO check erros (service not available, bad request)
-              if(err.status == '404') {
-                this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND;
-              } else if(err.status == '500') {
-                this.openaireSearchUtils.status = this.errorCodes.ERROR;
-              } else {
-                this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE;
-              }
-
-              this.disableForms = false;
-          }
-        );
-      }
-    }
-  }
-
-  totalPages(): number {
-    let totalPages:any = this.openaireSearchUtils.totalResults/(this.rowsOnPage);
-    if(!(Number.isInteger(totalPages))) {
-        totalPages = (parseInt(totalPages, 10) + 1);
-    }
-    return totalPages;
-  }
-
-  keywordChanged(keyword) {
-    this.openaireSearchUtils.keyword = keyword;
-    this.buildQueryParameters();
-    this.goTo(1);
-  }
-
-  funderChanged(funderId:string, funderName:string){
-    this.selectedFunderId = funderId;
-    this.selectedFunderName = funderName;
-
-    this.buildQueryParameters();
-    this.goTo(1);
-  }
-
-  buildQueryParameters() {
-    this.queryParameters = "";
-
-    if(this.openaireSearchUtils.keyword) {
-      this.queryParameters = "q="+StringUtils.URIEncode(this.openaireSearchUtils.keyword);
-    }
-
-    if(this.selectedFunderId != "0") {
-      this.queryParameters += this.queryParameters ? "&" : "";
-      this.queryParameters += "fq=funder exact " + '"'+StringUtils.URIEncode(this.selectedFunderId)+ '"';
-    }
-  }
-
-  goTo(page:number = 1){
-    this.openaireSearchUtils.page=page;
-    this.openaireSearchUtils.status = this.errorCodes.LOADING;
-    this._getOpenaireProjects(this.queryParameters, page, 10);
-  }
-}

src/app/pages/community/projects/communityProjects-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {IsCommunity} from '../../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-import {ManageProjectsComponent} from './manage-projects.component';
-
-@NgModule({
-    imports: [
-        RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: ManageProjectsComponent}
-        ])
-    ]
-})
-export class CommunityProjectsRoutingModule { }

src/app/pages/community/projects/communityProjects.module.ts

@@ -1,55 +0,0 @@
-import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { RouterModule } from '@angular/router';
-
-
-import { EnvironmentSpecificResolver } from '../../../openaireLibrary/utils/properties/environmentSpecificResolver';
-import { EnvironmentSpecificService } from '../../../openaireLibrary/utils/properties/environment-specific.service';
-
-import { DataTablesModule } from 'angular-datatables';
-import { ManageProjectsComponent } from './manage-projects.component';
-import { ManageCommunityProjectsService } from '../../../services/manageProjects.service';
-import { SearchProjectsServiceModule } from '../../../openaireLibrary/connect/projects/searchProjectsService.module';
-
-import { RemoveProjectsComponent } from './remove-projects.component';
-import { AddProjectsComponent } from './add-projects.component';
-import { SearchProjectsService } from '../../../openaireLibrary/services/searchProjects.service';
-import { PagingModule } from '../../../openaireLibrary/utils/paging.module';
-import { SearchPagingModule } from '../../../openaireLibrary/searchPages/searchUtils/searchPaging.module';
-
-import {ErrorMessagesModule} from '../../../openaireLibrary/utils/errorMessages.module';
-import {AlertModalModule} from '../../../openaireLibrary/utils/modal/alertModal.module';
-import {FABModule} from '../../../utils/fabModule.module';
-import {CommonModule} from '@angular/common';
-import {CommunityProjectsRoutingModule} from './communityProjects-routing.module';
-
-@NgModule({
-    imports: [
-        CommonModule,
-        HttpClientModule,
-        FormsModule,
-        ReactiveFormsModule,
-        RouterModule,
-        DataTablesModule,
-        PagingModule, SearchPagingModule,
-        ErrorMessagesModule,
-        AlertModalModule,
-        SearchProjectsServiceModule,
-        FABModule,
-        CommunityProjectsRoutingModule
-    ],
-    declarations: [
-        ManageProjectsComponent,
-        RemoveProjectsComponent,
-        AddProjectsComponent
-    ],
-    providers: [
-        ManageCommunityProjectsService,
-        SearchProjectsService,
-        EnvironmentSpecificResolver, EnvironmentSpecificService
-    ],
-    exports: [ManageProjectsComponent]
-})
-
-export class CommunityProjectsModule { }

src/app/pages/community/projects/manage-projects.component.ts

@@ -1,93 +0,0 @@
-import { Component, ViewChild, OnInit, ViewEncapsulation, Input, ElementRef } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-
-import {RemoveProjectsComponent} from './remove-projects.component';
-import {AddProjectsComponent} from './add-projects.component';
-
-import {Session} from '../../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
-import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
-import {Title} from '@angular/platform-browser';
-
-@Component({
-    selector: 'manage-projects',
-    template: `
-      <div id="manage-projects">
-        <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">
-          <remove-projects (communityProjectsChanged)="communityProjectsChanged($event)"></remove-projects>
-          <fab (clicked)="updateCommunityProjects()" uk-toggle="target: .toggle-usage"></fab>
-        </div>
-        <div class="toggle-usage" hidden>
-          <!-- (updateCommunityProjects)="updateCommunityProjects($event)" -->
-          <add-projects [(communityProjects)]="communityProjects"></add-projects>
-        </div>
-      </div>
-    `
-})
-
-export class ManageProjectsComponent implements OnInit {
-  private community: string = '';
-
-  @Input() communityProjects =[];
-  @ViewChild (RemoveProjectsComponent) removeProjectsComponent : RemoveProjectsComponent ;
-  @ViewChild (AddProjectsComponent) addProjectsComponent : AddProjectsComponent ;
-
-  public warningMessage = "";
-  public infoMessage = "";
-
-  public toggle: boolean = true;
-  public updateCommunityProjectsOnToggle: boolean = false;
-  public pageTitle: string = "Manage projects";
-  public toggleLinkMessage: string = "Manage projects";
-
-  ngOnInit() {
-    this.route.queryParams.subscribe(params => {
-      if(params['communityId']) {
-        this.community = params['communityId'];
-        this.title.setTitle('Administration Dashboard | Projects');
-      }
-    });
-  }
-
-  constructor(private element: ElementRef,
-              private title: Title,
-              private route: ActivatedRoute, private _router: Router) {}
-
-  public ngOnDestroy() {}
-
-  public updateCommunityProjects() {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      HelperFunctions.scroll();
-
-      this.toggle = !this.toggle;
-      if(this.toggle) {
-        this.pageTitle = "Manage projects";
-        // this.toggleLinkMessage = "Missing projects?";
-
-        //if(this.updateCommunityProjectsOnToggle) {
-          this.removeProjectsComponent._getCommunityProjects();
-          this.addProjectsComponent.undo = {};
-        //}
-      } else {
-        this.updateCommunityProjectsOnToggle = false;
-        this.pageTitle = "Search projects";
-        //this.toggleLinkMessage = "Manage projects";
-      }
-    }
-  }
-
-  public communityProjectsChanged($event) {
-    this.communityProjects = $event.value;
-  }
-
-  // public updateCommunityProjects($event) {
-  //   this.updateCommunityProjectsOnToggle = true;
-  // }
-}

src/app/pages/community/projects/remove-projects.component.html

@@ -1,99 +0,0 @@
-  <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.status == errorCodes.DONE" class="uk-alert uk-alert-primary">
-    <span class="uk-margin-small-right uk-icon" uk-icon="warning"></span>
-  All the research results linked to the projects specified here will be automatically linked to your community dashboard.  
-  </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>
-
-<!-- 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 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>
-                <span class="custom-external custom-icon space"></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">
-<!--              red_background_color red_color-->
-              <a (click)="removeProject(result)" class="uk-icon-button remove uk-button-danger" 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/community/projects/remove-projects.component.ts

@@ -1,349 +0,0 @@
-import { Component, ViewChild, OnInit, ViewEncapsulation, Input, Output, EventEmitter } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-import { Subject } from 'rxjs';
-import { DataTableDirective } from 'angular-datatables';
-
-import {ErrorCodes} from '../../../openaireLibrary/utils/properties/errorCodes';
-import {SearchUtilsClass } from '../../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
-import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
-import {ManageCommunityProjectsService} from '../../../services/manageProjects.service';
-import {SearchCommunityProjectsService} from '../../../openaireLibrary/connect/projects/searchProjects.service';
-import {RouterHelper} from '../../../openaireLibrary/utils/routerHelper.class';
-import {DOI, StringUtils} from '../../../openaireLibrary/utils/string-utils.class';
-
-import {Session} from '../../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../../openaireLibrary/login/utils/guardHelper.class';
-
-@Component({
-    selector: 'remove-projects',
-    templateUrl: './remove-projects.component.html',
-    styles: [`
-      #dpTable_info, #dpTable_paginate,  #dpTable_length,  #dpTable_filter{
-        display: none;
-      }
-
-      `],
-    encapsulation: ViewEncapsulation.None // this used in order styles to work
-})
-
-export class RemoveProjectsComponent implements OnInit {
-  public routerHelper:RouterHelper = new RouterHelper();
-
-  private community: string = '';
-  private communityUrl = "https://beta.explore.openaire.eu";
-
-  public errorCodes: ErrorCodes;
-
-  @Output() communityProjectsChanged  = new EventEmitter();
-  public communityProjects = [];
-  public communitySearchUtils:SearchUtilsClass = new SearchUtilsClass();
-
-  public sub: any; public subResults: any; subRemove: any;
-  properties:EnvProperties;
-
-  public disableForms: boolean = false;
-
-  dtOptions: DataTables.Settings = {};
-  showTable = false; filteringAdded = false;
-  @ViewChild(DataTableDirective) datatableElement: DataTableDirective;
-  dtTrigger: Subject<any> = new Subject(); //necessary
-
-  public rowsOnPage:number  = 10;
-
-  public queryParameters: string = "";
-
-  public query = '';
-  public selectedProjects=[] ;
-  public elementRef;
-
-  public funders:Set<string>;
-  public selectedFunder:string ="";
-  //@Output() projectSelected = new EventEmitter();
-  //@Input() public properties:EnvProperties;
-
-  public projects:string[];
-  private triggered: boolean = false;
-
-  private selectedCommunityProject: any;
-
-  @ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;
-
-  ngOnInit() {
-    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
-        this.properties = data.envSpecific;
-      });
-
-    this.route.queryParams.subscribe(params => {
-      if(params['communityId']) {
-        this.community = params['communityId'];
-        this.communityUrl = "https://beta."+this.community+".openaire.eu";
-
-        this._getCommunityProjects();
-        //this.getFunders();
-        //this._getOpenaireProjects("", 1, 10);
-      }
-    });
-
-    this.dtOptions = {
-      // "paging": true,
-      // "searching": true,
-      // "lengthChange": false,
-      "pageLength": this.rowsOnPage,
-      "language": {
-          "search": "",
-          "searchPlaceholder": "Search projects..."
-        }
-    };
-
-    this.communitySearchUtils.keyword = "";
-  }
-
-  constructor(private route: ActivatedRoute, private _router: Router, private _manageCommunityProjectsService: ManageCommunityProjectsService, private _searchCommunityProjectsService: SearchCommunityProjectsService) {
-    this.errorCodes = new ErrorCodes();
-    this.communitySearchUtils.status = this.errorCodes.LOADING;
-  }
-
-  public ngOnDestroy() {
-    if(this.sub){
-      this.sub.unsubscribe();
-    }
-    if(this.subResults){
-      this.subResults.unsubscribe();
-    }
-    if(this.subRemove){
-      this.subRemove.unsubscribe();
-    }
-
-    $.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.communitySearchUtils.keyword, this.selectedFunder)) {
-         return true;
-       }
-       return false;
-     });
-
-     //console.info("ngAfterViewInit");
-  }
-
-  filterData(row: any, query: string, selectedFunder: 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;
-      }
-    }
-
-    if(selectedFunder){
-      return this.filterQuery(row[2], selectedFunder);
-    }
-
-    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();
-  }
-
-  public inCommunity(result: any): any {
-    let found = false;
-    for(let project of this.communityProjects) {
-      if(project.opeaireId == result.id) {
-        return true;
-      } else if(result['title'].name.search("("+project.grantId+")") != -1 && result.funderShortname == project.funder) {
-        return true;
-      }
-    }
-    return found;
-
-  }
-
-  goTo(page:number = 1){
-      this.communitySearchUtils.page=page;
-
-      var table = $('#dpTable').DataTable();
-      table.page( page - 1  ).draw( false );
-
-      var info = table.page.info();
-      this.communitySearchUtils.totalResults = info.recordsDisplay;
-  }
-
-  totalPages(): number {
-      let totalPages:any = this.communitySearchUtils.totalResults/(this.rowsOnPage);
-      if(!(Number.isInteger(totalPages))) {
-          totalPages = (parseInt(totalPages, 10) + 1);
-      }
-      return totalPages;
-  }
-
-  public confirmedDeleteProject(data : any) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.subRemove = this._manageCommunityProjectsService.removeProject(this.properties, this.community, this.selectedCommunityProject.id).subscribe(
-        data => {
-          //console.info(data);
-        },
-        err => {
-          console.log(err);
-        },
-        () => {
-          let index = this.communityProjects.indexOf(this.selectedCommunityProject);
-          this.communityProjects.splice(index, 1);
-
-          this.communitySearchUtils.totalResults--;
-          this.communitySearchUtils.page=1;
-
-          this.rerender();
-        }
-      )
-    }
-  }
-
-  public removeProject(communityProject: any) {
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.selectedCommunityProject = communityProject;
-      this.alertModalDeleteCommunity.cancelButton = true;
-      this.alertModalDeleteCommunity.okButton = true;
-      this.alertModalDeleteCommunity.alertTitle = "Remove project?";
-      let title = "";
-      if(communityProject.name) {
-        title = communityProject.name;
-      }
-      if(communityProject.name && communityProject.acronym) {
-        title += " (";
-      }
-      if(communityProject.acronym) {
-        title += communityProject.acronym;
-      }
-      if(communityProject.name && communityProject.acronym) {
-        title += ")";
-      }
-      this.alertModalDeleteCommunity.message = "Project";
-      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 _getCommunityProjects(){
-    if(!Session.isLoggedIn()){
-      this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-    } else {
-      this.communitySearchUtils.status = this.errorCodes.LOADING;
-      this.disableForms = true;
-      this.communityProjects = [];
-      this.communitySearchUtils.totalResults = 0;
-      this.communitySearchUtils.page=1;
-      this.communitySearchUtils.keyword = "";
-      this.selectedFunder = "";
-
-      this.subResults = this._searchCommunityProjectsService.searchProjects(this.properties, this.community).subscribe(
-          data => {
-            //console.info("search Projects [total communityProjects:"+data.length+"]");
-            this.communityProjects = data;
-
-            this.communitySearchUtils.totalResults = data.length;
-            this.communitySearchUtils.status = this.errorCodes.DONE;
-            // if(this.communitySearchUtils.totalResults == 0 ){
-            //   this.communitySearchUtils.status = this.errorCodes.NONE;
-            // }
-            this.disableForms = false;
-            if(!this.triggered) {
-              this.triggerInitialLoad();
-            } else {
-              var table = $('#dpTable').DataTable();
-              table.clear();
-
-              this.rerender();
-            }
-
-            this.communityProjectsChanged.emit({
-                value: this.communityProjects,
-            });
-
-            this.createFunderFilter();
-          },
-          err => {
-            console.log(err);
-             //TODO check erros (service not available, bad request)
-
-            if(err.status == '404') {
-              this.communitySearchUtils.status = this.errorCodes.NOT_FOUND;
-            } else if(err.status == '500') {
-              this.communitySearchUtils.status = this.errorCodes.ERROR;
-            } else {
-              this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;
-            }
-
-            this.disableForms = false;
-            if(!this.triggered) {
-              this.triggerInitialLoad();
-            } else {
-              var table = $('#dpTable').DataTable();
-              table.clear();
-
-              this.rerender();
-            }
-          }
-      );
-    }
-  }
-
-  private createFunderFilter(): Set<String> {
-    this.funders = new Set<string>();
-    let i;
-    for(i=0; i<this.communityProjects.length; i++) {
-      let funder = this.communityProjects[i].funder;
-      if(funder && !this.funders.has(funder)) {
-        this.funders.add(funder);
-      }
-    }
-    return this.funders;
-  }
-}

src/app/pages/content-providers/add-content-providers.component.html

@@ -0,0 +1,78 @@
+<div class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid uk-margin-medium-bottom" uk-grid>
+  <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
+       placeholder="Search Content Providers"
+       [selected]="openaireSearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"
+       [bordered]="true" colorClass="uk-text-secondary"
+       class="uk-width-1-2@l uk-width-1-2@m uk-width-1-1"></div>
+</div>
+
+<div id="manage-content-providers">
+  <div *ngIf="openaireSearchUtils.status == errorCodes.LOADING" class="uk-position-large-top">
+    <loading></loading>
+  </div>
+  <div *ngIf="openaireSearchUtils.totalResults == 0"
+       class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
+    <div>
+      <div *ngIf="openaireSearchUtils.status == errorCodes.NONE">No OpenAIRE content providers available</div>
+      <div *ngIf="openaireSearchUtils.status == errorCodes.ERROR">An Error Occurred. No OpenAIRE content providers found</div>
+      <div *ngIf="openaireSearchUtils.status == errorCodes.NOT_AVAILABLE">Service temporarily unavailable. Please try again later.</div>
+      <div *ngIf="openaireSearchUtils.status == errorCodes.NOT_FOUND">No OpenAIRE content providers found</div>
+    </div>
+  </div>
+<!--  <errorMessages [status]="[openaireSearchUtils.status]" [type]="'OpenAIRE content providers'"></errorMessages>-->
+
+  <ng-container *ngIf="openaireSearchUtils.totalResults > 0">
+    <no-load-paging [type]="'Content Providers'"
+                    [page]="openaireSearchUtils.page" [pageSize]="resultsPerPage" (pageChange)="goTo($event.value)"
+                    [totalResults]="openaireSearchUtils.totalResults">
+    </no-load-paging>
+
+    <ul class="uk-list search-results uk-margin-medium-top uk-margin-medium-bottom">
+      <li *ngFor="let result of openaireContentProviders" class="uk-animation-fade">
+        <div class="uk-card uk-card-default uk-card-hover uk-text-small uk-margin-bottom">
+          <div class="uk-grid uk-grid-divider uk-padding-small" uk-grid>
+            <div class="uk-width-expand@m uk-width-1-1">
+              <result-preview [properties]="properties" [showOrganizations]="true"
+                              [showSubjects]="true" [result]="getResultPreview(result)"
+                              [externalUrl]="contentProviderUrl">
+              </result-preview>
+            </div>
+            <div class="uk-width-auto@m uk-width-1-1">
+              <div class="uk-flex uk-flex-middle uk-flex-center uk-flex-column uk-height-1-1">
+                <div class="uk-padding-small uk-padding-remove-horizontal">
+
+                  <div [class.hide-element]="!getCommunityContentProvider(result)">
+                    <a (click)="removeContentProvider(result)" class="uk-button action uk-flex uk-flex-middle">
+                      <icon name="remove_circle_outline"></icon>
+                      <span class="uk-margin-small-left">Remove content provider</span>
+                    </a>
+                  </div>
+
+                  <div [class.hide-element]="getCommunityContentProvider(result)">
+                    <a (click)="addContentProvider(result)" class="uk-button action uk-flex uk-flex-middle"
+                       uk-tooltip="title:<div class='uk-padding-small'><div class='uk-margin-bottom uk-text-bold'>Add new content provider </div><div>Newly added content providers will be linked to your community on the next run of our algorithms.</div></div>">
+                      <div class="uk-text-success">
+                        <icon name="add"></icon>
+                      </div>
+                      <span class="uk-margin-small-left">Add content provider</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+
+  <!--  <div [class]="openaireSearchUtils.page > pagingLimit ? 'search-results' : ''"-->
+  <!--       *ngIf="(openaireSearchUtils.page >= pagingLimit) && (openaireSearchUtils.totalResults > resultsPerPage*pagingLimit)">-->
+  <!--    <p class="uk-alert-warning" uk-alert>For more results please try a new, more specific query</p>-->
+  <!--  </div>-->
+
+    <no-load-paging [type]="'Content Providers'"
+                    [page]="openaireSearchUtils.page" [pageSize]="resultsPerPage" (pageChange)="goTo($event.value)"
+                    [totalResults]="openaireSearchUtils.totalResults">
+    </no-load-paging>
+  </ng-container>
+</div>

src/app/pages/content-providers/add-content-providers.component.ts

@@ -0,0 +1,299 @@
+import {Component, OnInit, Input, Output, EventEmitter, ViewChild} from '@angular/core';
+import { ActivatedRoute, Router } from "@angular/router";
+import {SearchResult}     from '../../openaireLibrary/utils/entities/searchResult';
+import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';
+import {SearchUtilsClass } from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {SearchDataprovidersService} from '../../openaireLibrary/services/searchDataproviders.service';
+import {RouterHelper} from '../../openaireLibrary/utils/routerHelper.class';
+import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
+import {ManageCommunityContentProvidersService} from '../../services/manageContentProviders.service';
+import {Session} from '../../openaireLibrary/login/utils/helper.class';
+import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
+import {properties} from "../../../environments/environment";
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {SearchInputComponent} from "../../openaireLibrary/sharedComponents/search-input/search-input.component";
+import {Subscriber} from "rxjs";
+import {debounceTime, distinctUntilChanged} from "rxjs/operators";
+import {ResultPreview} from "../../openaireLibrary/utils/result-preview/result-preview";
+
+declare var UIkit;
+
+@Component({
+    selector: 'add-content-providers',
+    templateUrl: './add-content-providers.component.html',
+})
+
+export class AddContentProvidersComponent implements OnInit {
+  private subscriptions: any[] = [];
+  public subResults: any;
+
+  private community: string = '';
+
+  public routerHelper: RouterHelper = new RouterHelper();
+  public properties: EnvProperties = properties;
+  public errorCodes: ErrorCodes;
+  public openaireSearchUtils: SearchUtilsClass = new SearchUtilsClass();
+  @Output() communityContentProvidersChanged = new EventEmitter();
+  @Input() communityContentProviders = [];
+  public openaireContentProviders = [];
+  public queryParameters: string = "";
+
+  // public pagingLimit: number = properties.pagingLimit;
+  public resultsPerPage: number = properties.resultsPerPage;
+
+  filterForm: FormGroup;
+  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
+
+  private contentProviderUrl: string = "https://" + ((properties.environment == "beta" || properties.environment == "development") ? "beta." : "") + "explore.openaire.eu" + properties.searchLinkToDataProvider;
+  public body: string = "Send from page";
+
+  @Output() toggleView: EventEmitter<any> = new EventEmitter();
+
+  constructor(private route: ActivatedRoute, private _router: Router,
+              private _searchContentProvidersService: SearchDataprovidersService,
+              private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
+              private _fb: FormBuilder) {
+    this.errorCodes = new ErrorCodes();
+    this.openaireSearchUtils.status = this.errorCodes.LOADING;
+  }
+
+  ngOnInit() {
+    this.subscriptions.push(this.route.params.subscribe(params => {
+      this.openaireSearchUtils.status = this.errorCodes.LOADING;
+
+      this.community = params['community'];
+      // this.contentProviderUrl = "https://" + ((this.properties.environment == "beta" || this.properties.environment == "development") ? "beta." : "")
+      //   + this.community + ".openaire.eu" + this.properties.searchLinkToDataProvider;
+
+      this._getOpenaireContentProviders("", 1, this.resultsPerPage);
+
+      this.body = "[Please write your message here]";
+      this.body = StringUtils.URIEncode(this.body);
+    }));
+
+    this.openaireSearchUtils.keyword = "";
+
+    this.filterForm = this._fb.group({
+      keyword: [''],
+    });
+
+    this.subscriptions.push(this.filterForm.get('keyword').valueChanges
+      .pipe(debounceTime(1000), distinctUntilChanged())
+      .subscribe(value => {
+        this.keywordChanged(value);
+      })
+    );
+  }
+
+  public ngOnDestroy() {
+    this.subscriptions.forEach(sub => {
+      if (sub instanceof Subscriber) {
+        sub.unsubscribe();
+      }
+    });
+
+    if(this.subResults){
+      this.subResults.unsubscribe();
+    }
+  }
+
+  public addContentProvider(contenProvider: SearchResult) {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {
+          "errorCode": LoginErrorCodes.NOT_VALID,
+          "redirectUrl": this._router.url
+        }
+      });
+    } else {
+      this.subscriptions.push(this._manageCommunityContentProvidersService.addContentProvider(this.properties, this.community, contenProvider).subscribe(
+        data => {
+          this.communityContentProviders.push(data);
+          UIkit.notification('Content Provider successfully added!', {
+            status: 'success',
+            timeout: 6000,
+            pos: 'bottom-right'
+          });
+          this.communityContentProvidersChanged.emit({
+            value: this.communityContentProviders,
+          });
+        },
+        err => {
+          this.handleError('An error has been occurred. Try again later!');
+          console.error(err.status);
+        }
+      ));
+    }
+  }
+
+  public removeContentProvider(contentProvider) {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {
+          "errorCode": LoginErrorCodes.NOT_VALID,
+          "redirectUrl": this._router.url
+        }
+      });
+    } else {
+      let communityContentProvider = this.getCommunityContentProvider(contentProvider);
+      let contentProviderId: string = communityContentProvider['id'];
+      this.subscriptions.push(this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.community, contentProviderId).subscribe(
+        data => {
+          let index = this.communityContentProviders.indexOf(communityContentProvider);
+          this.communityContentProviders.splice(index, 1);
+          UIkit.notification('Content Provider successfully removed!', {
+            status: 'success',
+            timeout: 6000,
+            pos: 'bottom-right'
+          });
+          this.communityContentProvidersChanged.emit({
+            value: this.communityContentProviders,
+          });
+        },
+        err => {
+          this.handleError('An error has been occurred. Try again later!');
+          console.error(err);
+        }
+      ));
+    }
+  }
+
+  public getCommunityContentProvider(contentProvider: any): string {
+    let index: number = 0;
+    for (let communityContentProvider of this.communityContentProviders) {
+      if (communityContentProvider.openaireId == contentProvider.id) {
+        return communityContentProvider;
+      }
+      index++;
+    }
+    return "";
+  }
+
+  public getResultPreview(result: SearchResult): ResultPreview {
+    return ResultPreview.searchResultConvert(result, "dataprovider");
+  }
+
+  // public inCommunity(contentProvider: any): any {
+  //   for(let communityContentProvider of this.communityContentProviders) {
+  //     if(communityContentProvider.openaireId == contentProvider.id) {
+  //       return true;
+  //     }
+  //   }
+  //
+  //   if(this.undo[contentProvider.id]) {
+  //     return true;
+  //   }
+  //   return false;
+  // }
+
+  private _getOpenaireContentProviders(parameters: string, page: number, size: number) {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {
+          "errorCode": LoginErrorCodes.NOT_VALID,
+          "redirectUrl": this._router.url
+        }
+      });
+    } else {
+      // if (page > this.pagingLimit) {
+      //   size = 0;
+      // }
+
+      if (this.openaireSearchUtils.status == this.errorCodes.LOADING) {
+        this.openaireSearchUtils.status = this.errorCodes.LOADING;
+
+        this.openaireContentProviders = [];
+        this.openaireSearchUtils.totalResults = 0;
+
+        if(this.subResults){
+          this.subResults.unsubscribe();
+        }
+        this.subResults = this._searchContentProvidersService.searchDataproviders(parameters, null, page, size, [], this.properties).subscribe(
+          data => {
+            this.openaireSearchUtils.totalResults = data[0];
+            this.openaireContentProviders = data[1];
+
+            //this.searchPage.checkSelectedFilters(this.filters);
+            this.openaireSearchUtils.status = this.errorCodes.DONE;
+            if (this.openaireSearchUtils.totalResults == 0) {
+              this.openaireSearchUtils.status = this.errorCodes.NONE;
+            }
+
+            // if (this.openaireSearchUtils.status == this.errorCodes.DONE) {
+            //   // Page out of limit!!!
+            //   let totalPages: any = this.openaireSearchUtils.totalResults / (this.openaireSearchUtils.size);
+            //   if (!(Number.isInteger(totalPages))) {
+            //     totalPages = (parseInt(totalPages, 10) + 1);
+            //   }
+            //   if (totalPages < page) {
+            //     this.openaireSearchUtils.totalResults = 0;
+            //     this.openaireSearchUtils.status = this.errorCodes.OUT_OF_BOUND;
+            //   }
+            // }
+          },
+          err => {
+            console.error(err);
+            //TODO check erros (service not available, bad request)
+            if (err.status == '404') {
+              this.openaireSearchUtils.status = this.errorCodes.NOT_FOUND;
+            } else if (err.status == '500') {
+              this.openaireSearchUtils.status = this.errorCodes.ERROR;
+            } else {
+              this.openaireSearchUtils.status = this.errorCodes.NOT_AVAILABLE;
+            }
+          }
+        );
+      }
+    }
+  }
+
+  totalPages(): number {
+    let totalPages: any = this.openaireSearchUtils.totalResults / (this.resultsPerPage);
+    if (!(Number.isInteger(totalPages))) {
+      totalPages = (parseInt(totalPages, 10) + 1);
+    }
+    return totalPages;
+  }
+
+  keywordChanged(keyword) {
+    this.openaireSearchUtils.keyword = keyword;
+    this.buildQueryParameters();
+    this.goTo(1);
+  }
+
+  buildQueryParameters() {
+    this.queryParameters = "";
+
+    if (this.openaireSearchUtils.keyword) {
+      this.queryParameters = "q=" + StringUtils.URIEncode(this.openaireSearchUtils.keyword);
+    }
+  }
+
+  goTo(page: number = 1) {
+    this.openaireSearchUtils.page = page;
+    this.openaireSearchUtils.status = this.errorCodes.LOADING;
+    this._getOpenaireContentProviders(this.queryParameters, page, this.resultsPerPage);
+  }
+
+  back() {
+    this.toggleView.emit(null);
+  }
+
+  public onSearchClose() {
+    this.openaireSearchUtils.keyword = this.filterForm.get('keyword').value;
+  }
+
+  public resetInput() {
+    this.openaireSearchUtils.keyword = null;
+    this.searchInputComponent.reset()
+  }
+
+  handleError(message: string) {
+    UIkit.notification(message, {
+      status: 'danger',
+      timeout: 6000,
+      pos: 'bottom-right'
+    });
+  }
+}

src/app/pages/content-providers/communityContentProviders.module.ts

@@ -0,0 +1,68 @@
+import {NgModule} from '@angular/core';
+import {HttpClientModule} from '@angular/common/http';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+
+import {PagingModule} from '../../openaireLibrary/utils/paging.module';
+import {SearchPagingModule} from '../../openaireLibrary/searchPages/searchUtils/searchPaging.module';
+
+import {ErrorMessagesModule} from '../../openaireLibrary/utils/errorMessages.module';
+import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
+import {CommonModule} from '@angular/common';
+import {PageContentModule} from "../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
+import {CommunityInfoModule} from "../community-info/community-info.module";
+import {InputModule} from "../../openaireLibrary/sharedComponents/input/input.module";
+import {SearchInputModule} from "../../openaireLibrary/sharedComponents/search-input/search-input.module";
+import {NoLoadPaging} from "../../openaireLibrary/searchPages/searchUtils/no-load-paging.module";
+import {LoadingModule} from "../../openaireLibrary/utils/loading/loading.module";
+import {IconsModule} from "../../openaireLibrary/utils/icons/icons.module";
+import {IconsService} from "../../openaireLibrary/utils/icons/icons.service";
+import {add, arrow_left, close, edit, remove_circle_outline} from "../../openaireLibrary/utils/icons/icons";
+import {FullScreenModalModule} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.module";
+import {ResultPreviewModule} from "../../openaireLibrary/utils/result-preview/result-preview.module";
+import {SearchDataprovidersServiceModule} from "../../openaireLibrary/connect/contentProviders/searchDataprovidersService.module";
+import {ManageContentProvidersComponent} from "./manage-content-providers.component";
+import {RemoveContentProvidersComponent} from "./remove-content-providers.component";
+import {AddContentProvidersComponent} from "./add-content-providers.component";
+import {ManageCommunityContentProvidersService} from "../../services/manageContentProviders.service";
+import {SearchDataprovidersService} from "../../openaireLibrary/services/searchDataproviders.service";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    HttpClientModule,
+    FormsModule,
+    ReactiveFormsModule,
+    RouterModule,
+    PagingModule, SearchPagingModule,
+    ErrorMessagesModule,
+    AlertModalModule,
+    SearchDataprovidersServiceModule,
+    PageContentModule,
+    CommunityInfoModule,
+    InputModule,
+    SearchInputModule,
+    RouterModule.forChild([
+      {
+        path: '', component: ManageContentProvidersComponent
+      }
+    ]),
+    NoLoadPaging, LoadingModule, IconsModule, FullScreenModalModule, ResultPreviewModule
+  ],
+  declarations: [
+    ManageContentProvidersComponent,
+    RemoveContentProvidersComponent,
+    AddContentProvidersComponent
+  ],
+  providers: [
+    ManageCommunityContentProvidersService,
+    SearchDataprovidersService
+  ],
+  exports: [ManageContentProvidersComponent]
+})
+
+export class CommunityContentProvidersModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([remove_circle_outline, add, edit, close, arrow_left]);
+  }
+}

src/app/pages/content-providers/criteria-utils.ts

@@ -0,0 +1,18 @@
+import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
+
+export class CriteriaUtils {
+  public static readonly fields: Option[] = [
+    {value: 'title', label: 'Title'},
+    {value: 'author', label: 'Author\'s name'},
+    {value: 'author ORCID', label: 'Author\'s ORCID'},
+    {value: 'contributor', label: 'Contributor'},
+    {value: 'description', label: 'Description'}
+  ]
+  
+  public static readonly verbs: Option[] = [
+    {value: 'contains', label: 'contains'},
+    {value: 'equals', label: 'equals'},
+    {value: 'not_contains', label: 'not contains'},
+    {value: 'not_equals', label: 'not equals'}
+  ]
+}

src/app/pages/content-providers/criteria/criteria-routing.module.ts

@@ -0,0 +1,13 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CriteriaComponent} from './criteria.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      {path: '', component: CriteriaComponent}
+    ])
+  ]
+})
+export class CriteriaRoutingModule {
+}

src/app/pages/content-providers/criteria/criteria.component.css

@@ -0,0 +1,6 @@
+.criterion {
+  border: rgba(26,26,26,0.5) solid 1px;
+  border-radius: 4px;
+  max-height: 400px;
+  overflow: auto;
+}

src/app/pages/content-providers/criteria/criteria.component.html

@@ -0,0 +1,170 @@
+<div page-content>
+  <div header>
+    <div class="uk-margin-top">
+      <a routerLink="../" class="uk-text-secondary uk-text-uppercase uk-text-bold uk-text-small">
+         <span class="uk-icon-button uk-icon small uk-button-secondary">
+            <icon name="arrow_left"></icon>
+         </span>
+        <span class="space">
+          Go back to Content Providers
+        </span>
+      </a>
+    </div>
+  </div>
+  <div inner>
+    <div class="uk-card-header">
+      <div class="uk-flex uk-flex-middle uk-child-width-1-1 uk-child-width-1-2@m uk-grid" uk-grid>
+        <div>
+          <div class="uk-text-small uk-text-muted">Filters for</div>
+          <div>
+            <span *ngIf="dataProvider" class="uk-text-bold">{{dataProvider.officialname}}</span>
+            <span *ngIf="dirty"> (unsaved changes)</span>
+          </div>
+        </div>
+        <div class="  uk-flex uk-flex-right">
+          <button (click)="reset()" [disabled]="loading  || !dirty"
+                  class="uk-button uk-button-secondary outlined uk-margin-small-right">Reset
+          </button>
+          <button (click)="save()" class="uk-button uk-button-secondary uk-margin-small-right"
+                  [disabled]="loading || !dirty || selectionCriteria.invalid ">Save
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="uk-card uk-card-default uk-position-relative" style="min-height: 60vh">
+      <div *ngIf="!loading" class="uk-padding-large uk-padding-remove-bottom uk-overflow-auto"
+           style="max-height: 60vh;">
+        <div *ngIf="criteria.length == 0" class="uk-padding-large uk-text-center uk-text-bold">
+          <div *ngIf="dataProvider">No filters for {{dataProvider.officialname}}.</div>
+          <div>If no filters are specified, all research results of this content provider will be included in your
+            community.
+          </div>
+        </div>
+        <form *ngIf="criteria.length > 0" [formGroup]="selectionCriteria">
+          <div formArrayName="criteria" class="uk-margin-bottom">
+            <no-load-paging (pageChange)="page = $event.value" [page]="page" [totalResults]="criteria.length" [pageSize]="pageSize" [type]="'filter' + (criteria.length > 1?'s':'')">
+            </no-load-paging>
+            <div class="uk-margin-top" *ngFor="let criterion of currentPage; let i=index" [formGroupName]="getIndex(i).toString()">
+              <h6 class="uk-text-bold uk-form-label uk-margin-small-bottom">Filter {{getIndex(i) + 1}}</h6>
+              <div class="uk-padding criterion" formArrayName="constraint">
+                <div class="uk-flex uk-flex-middle uk-grid-small uk-margin-small-bottom uk-visible@l" uk-grid>
+                  <div style="width: 50px"></div>
+                  <div class="uk-width-1-4">
+                    <label class="uk-text-uppercase uk-text-bold">Field</label>
+                  </div>
+                  <div class="uk-width-1-4">
+                    <label class="uk-text-uppercase uk-text-bold">Operator</label>
+                  </div>
+                  <div class="uk-width-1-4">
+                    <label class="uk-text-uppercase uk-text-bold">Term</label>
+                  </div>
+                  <div class="uk-width-expand uk-text-truncate">
+                    <label class="uk-text-bold uk-text-uppercase">Match Case</label>
+                  </div>
+                </div>
+                <div *ngFor="let constraint of getConstraint(getIndex(i)).controls; let j=index" [formGroupName]="j.toString()"
+                     class="uk-margin-bottom uk-hidden@l">
+                  <div class="uk-flex uk-flex-middle uk-grid-small uk-margin-medium-bottom" uk-grid>
+                    <div class="uk-flex uk-flex-center uk-width-1-1">
+                      <span *ngIf="j > 0">AND</span>
+                    </div>
+                    <div class="uk-flex uk-flex-right uk-width-1-1">
+                      <a class="uk-link-heading" (click)="removeConstraint(getIndex(i), j)">
+                        <icon name="close"
+                              [attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
+                      </a>
+                    </div>
+                    <div class="uk-width-1-1" dashboard-input type="select" placeholder="Select a field"
+                         [options]="fields" [formInput]="constraint.get('field')">
+                      <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Field:</label>
+                    </div>
+                    <div class="uk-width-1-1" dashboard-input type="select" placeholder="Select an operator"
+                         [options]="verbs" [formInput]="constraint.get('verb')">
+                      <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Operator:</label>
+                    </div>
+                    <div class="uk-width-1-1" dashboard-input placeholder="Write a term"
+                         [formInput]="constraint.get('value')">
+                      <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Term:</label>
+                    </div>
+                    <div class="uk-width-1-1">
+                      <div class="uk-grid" uk-grid>
+                        <label class="uk-text-uppercase uk-text-bold uk-width-1-3 uk-text-truncate">Match Case</label>
+                        <div class="uk-width-expand">
+                          <mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''"
+                                            [attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
+                                            ('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
+                                            (change)="caseSensitive($event, constraint)"></mat-slide-toggle>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div *ngFor="let constraint of getConstraint(getIndex(i)).controls; let j=index"
+                     [formGroupName]="j.toString()" class="uk-margin-bottom uk-visible@l">
+                  <div class="uk-flex uk-flex-middle uk-grid-small" uk-grid>
+                    <div class="uk-flex uk-flex-center" style="width: 50px">
+                      <span *ngIf="j > 0">AND</span>
+                    </div>
+                    <div class="uk-width-1-4" dashboard-input type="select" placeholder="Select a field"
+                         [options]="fields" [formInput]="constraint.get('field')"></div>
+                    <div class="uk-width-1-4" dashboard-input type="select" placeholder="Select an operator"
+                         [options]="verbs" [formInput]="constraint.get('verb')"></div>
+                    <div class="uk-width-1-4" dashboard-input placeholder="Write a term"
+                         [formInput]="constraint.get('value')"></div>
+                    <div class="uk-width-expand">
+                      <mat-slide-toggle [checked]="constraint.get('verb_suffix').value === ''" class="uk-margin-left"
+                                        [attr.uk-tooltip]="(constraint.get('verb_suffix').value === ''?('Only \'\'' + constraint.get('value').value + '\'\' matches'):
+                                            ('Both \'\'' + constraint.get('value').value.toUpperCase() + '\'\' and \'\'' + constraint.get('value').value.toLowerCase() + '\'\' match'))"
+                                        (change)="caseSensitive($event, constraint)"></mat-slide-toggle>
+                    </div>
+                    <div class="uk-flex uk-flex-center">
+                      <a class="uk-link-heading" (click)="removeConstraint(getIndex(i), j)">
+                        <icon name="close"
+                              [attr.uk-tooltip]="(getConstraint(getIndex(i)).length === 1?'By removing this constraint, the filter will be removed too':null)"></icon>
+                      </a>
+                    </div>
+                  </div>
+                </div>
+                <div class="uk-margin-top uk-width-1-1 uk-flex uk-flex-center uk-hidden@l">
+                  <a (click)="addConstraint(getIndex(i))" class="uk-flex uk-flex-middle uk-text-uppercase">
+                    <button class="large uk-icon-button uk-button-secondary">
+                      <icon name="add"></icon>
+                    </button>
+                    <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
+                      Add Constraint
+                    </button>
+                  </a>
+                </div>
+                <div class="uk-flex uk-flex-middle uk-grid-small uk-visible@l" uk-grid>
+                  <div style="width: 50px"></div>
+                  <a (click)="addConstraint(getIndex(i))" class="uk-flex uk-flex-middle uk-text-uppercase">
+                    <button class="large uk-icon-button uk-button-secondary">
+                      <icon name="add"></icon>
+                    </button>
+                    <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
+                      Add Constraint
+                    </button>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </form>
+        <div class="uk-flex uk-flex-center uk-margin-large-bottom">
+          <a (click)="addCriteria()" class="uk-flex uk-flex-middle uk-text-uppercase"
+             uk-tooltip="<div class='uk-padding-small'>Add filter to limit research results.<br>Results which satisfy any of the selected filters will be included in your community.</div>">
+            <button class="large uk-icon-button uk-button-secondary">
+              <icon name="add"></icon>
+            </button>
+            <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">
+              Add filter
+            </button>
+          </a>
+        </div>
+      </div>
+      <div *ngIf="loading" class="uk-position-center">
+        <loading></loading>
+      </div>
+    </div>
+  </div>
+</div>

src/app/pages/content-providers/criteria/criteria.component.ts

@@ -0,0 +1,257 @@
+import {ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from '@angular/router';
+import {SearchCommunityDataprovidersService} from '../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
+import {EnvProperties} from '../../../openaireLibrary/utils/properties/env-properties';
+import {
+  Constraint,
+  ContentProvider,
+  Criteria,
+  SelectionCriteria
+} from '../../../openaireLibrary/utils/entities/contentProvider';
+import {AbstractControl, FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
+import {Title} from '@angular/platform-browser';
+import {properties} from "../../../../environments/environment";
+import {Subscription} from "rxjs";
+import {Option} from "../../../openaireLibrary/sharedComponents/input/input.component";
+import {MatSlideToggleChange} from "@angular/material/slide-toggle";
+import {HelperFunctions} from "../../../openaireLibrary/utils/HelperFunctions.class";
+import {CriteriaUtils} from "../criteria-utils";
+
+declare var UIkit;
+
+@Component({
+  selector: 'criteria',
+  templateUrl: './criteria.component.html',
+  styleUrls: ['criteria.component.css'],
+})
+export class CriteriaComponent implements OnInit, OnDestroy {
+  public community: string = '';
+  public openaireId: string = '';
+  public dataProvider: ContentProvider = null;
+  public selectionCriteria: FormGroup;
+  public properties: EnvProperties = properties;
+  public fields: Option[] = CriteriaUtils.fields;
+  public verbs: Option[] = CriteriaUtils.verbs;
+  public loading = true;
+  /** Paging */
+  public page: number = 1;
+  public pageSize: number = 5;
+  private subs: any[] = [];
+  
+  constructor(private route: ActivatedRoute, private router: Router,
+              private title: Title,
+              private searchCommunityDataprovidersService: SearchCommunityDataprovidersService,
+              private manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
+              private cdr: ChangeDetectorRef,
+              private fb: FormBuilder) {
+  }
+  
+  ngOnInit() {
+    this.subs.push(this.route.params.subscribe(params => {
+      this.community = params['community'];
+      this.route.params.subscribe(params => {
+        if (params['provider']) {
+          this.openaireId = params['provider'];
+        }
+        this.searchCommunityDataprovidersService.searchDataproviders(this.properties, this.community).subscribe(dataProviders => {
+          dataProviders.forEach(dataProvider => {
+            if (dataProvider.openaireId == this.openaireId) {
+              this.dataProvider = dataProvider;
+              this.title.setTitle(this.community.toUpperCase() + ' | Criteria for ' + this.dataProvider.officialname);
+            }
+          });
+          if (!this.dataProvider) {
+            this.navigateToError();
+          } else {
+            this.reset();
+            this.loading = false;
+          }
+        });
+      });
+    }));
+  }
+  
+  public ngOnDestroy() {
+    this.subs.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    })
+  }
+  
+  private navigateToError() {
+    this.router.navigate(['/error'], {queryParams: {'page': this.properties.baseLink + this.router.url}});
+  }
+  
+  reset() {
+    this.page = 1;
+    if (this.dataProvider) {
+      this.selectionCriteria = this.fb.group({
+        criteria: this.fb.array([])
+      });
+      let selectionCriteria = this.dataProvider.selectioncriteria;
+      if (selectionCriteria) {
+        selectionCriteria.criteria.forEach(criterion => {
+          let constraintArray: FormArray = this.fb.array([]);
+          criterion.constraint.forEach(constraint => {
+            constraintArray.push(this.fb.group({
+              field: this.fb.control(constraint.field, Validators.required),
+              verb: this.fb.control(this.removeSuffix(constraint.verb), Validators.required),
+              value: this.fb.control(constraint.value, Validators.required),
+              verb_suffix: this.fb.control(this.getSuffix(constraint.verb))
+            }));
+          });
+          this.criteria.push(this.fb.group({
+            constraint: constraintArray
+          }));
+        });
+      }
+    }
+  }
+  
+  get currentPage(): AbstractControl[] {
+    if (this.criteria) {
+      return this.criteria.controls.slice((this.page - 1) * this.pageSize, this.page * this.pageSize);
+    } else {
+      return [];
+    }
+  }
+  
+  getIndex(index: number): number {
+    return (this.page - 1)*this.pageSize + index;
+  }
+  
+  public get criteria(): FormArray {
+    return this.selectionCriteria.get('criteria') as FormArray;
+  }
+  
+  public getConstraint(i: number): FormArray {
+    return this.criteria.at(i).get('constraint') as FormArray;
+  }
+  
+  public addCriteria() {
+    let constraintArray: FormArray = this.fb.array([
+      this.fb.group({
+        field: this.fb.control('', Validators.required),
+        verb: this.fb.control('contains', Validators.required),
+        value: this.fb.control('', Validators.required),
+        verb_suffix: this.fb.control('_caseinsensitive')
+      })
+    ]);
+    this.criteria.push(this.fb.group({
+      constraint: constraintArray
+    }));
+    this.page = Math.ceil(this.criteria.length/this.pageSize);
+    this.cdr.detectChanges();
+  }
+  
+  public addConstraint(i: number) {
+    let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
+    constraintArray.push(this.fb.group({
+      field: this.fb.control('', Validators.required),
+      verb: this.fb.control('contains', Validators.required),
+      value: this.fb.control('', Validators.required),
+      verb_suffix: this.fb.control('_caseinsensitive')
+    }));
+    this.cdr.detectChanges();
+  }
+  
+  public removeConstraint(i: number, j: number) {
+    let constraintArray: FormArray = this.criteria.at(i).get('constraint') as FormArray;
+    constraintArray.removeAt(j);
+    if (constraintArray.length === 0) {
+      this.criteria.removeAt(i);
+      if (this.currentPage.length === 0) {
+        this.page = 1;
+      }
+    }
+    this.cdr.detectChanges();
+  }
+  
+  get dataProviderCriteria(): Criteria[] {
+    return (this.dataProvider && this.dataProvider.selectioncriteria && this.dataProvider.selectioncriteria.criteria)?this.dataProvider.selectioncriteria.criteria:[];
+  }
+
+  get dirty() {
+    if(!this.dataProvider || !this.criteria) {
+      return false;
+    } else if(this.criteria.length !== this.dataProviderCriteria.length) {
+      return true;
+    } else {
+      return this.dataProviderCriteria.filter((criterion, i) => {
+        if(criterion.constraint.length !== this.getConstraint(i).length) {
+          return true;
+        } else {
+          let temp = this.getConstraint(i).value;
+          return criterion.constraint.filter((constraint, j) => {
+            return constraint.field !== temp[j].field || constraint.verb !== (temp[j].verb + temp[j].verb_suffix) || constraint.value !== temp[j].value;
+          }).length > 0;
+        }
+      }).length > 0;
+    }
+  }
+  
+  save() {
+    if (this.selectionCriteria.valid) {
+      this.loading = true;
+      this.dataProvider.selectioncriteria = this.parseForm(this.selectionCriteria.value);
+      this.manageCommunityContentProvidersService.saveContentProvider(this.properties, this.dataProvider).subscribe(() => {
+        this.reset();
+        this.loading = false;
+        UIkit.notification('Filters has been <b>successfully updated</b>', {
+          status: 'success',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+      }, error => {
+        UIkit.notification('An error has been occurred. Try again later!', {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+      });
+    } else {
+      UIkit.notification('An error has been occurred. Try again later!', {
+        status: 'danger',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
+    }
+  }
+  
+  caseSensitive(event: MatSlideToggleChange, constraint: AbstractControl) {
+    if(event.checked) {
+      constraint.get('verb_suffix').setValue('');
+    } else {
+      constraint.get('verb_suffix').setValue('_caseinsensitive');
+    }
+  }
+  
+  removeSuffix(verb: string) {
+    return verb.replace('_caseinsensitive', '');
+  }
+  
+  getSuffix(verb: string) {
+    if(verb.includes('_caseinsensitive')) {
+      return '_caseinsensitive';
+    } else {
+      return '';
+    }
+  }
+  
+  parseForm(formValue): SelectionCriteria {
+    let value = HelperFunctions.copy(formValue);
+    let selectionCriteria: SelectionCriteria = new SelectionCriteria();
+    selectionCriteria.criteria = [];
+    value.criteria.forEach(criterion => {
+      let criteria = new Criteria();
+      criteria.constraint = [];
+      criterion.constraint.forEach(constraint => {
+        criteria.constraint.push(new Constraint(constraint.verb + constraint.verb_suffix, constraint.field, constraint.value));
+      });
+      selectionCriteria.criteria.push(criteria);
+    })
+    return selectionCriteria;
+  }
+}

src/app/pages/content-providers/criteria/criteria.module.ts

@@ -0,0 +1,48 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CriteriaComponent} from './criteria.component';
+import {CriteriaRoutingModule} from './criteria-routing.module';
+import {SearchCommunityDataprovidersService} from '../../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
+import {RouterModule} from '@angular/router';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ManageCommunityContentProvidersService} from '../../../services/manageContentProviders.service';
+import {PageContentModule} from "../../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module";
+import {IconsModule} from "../../../openaireLibrary/utils/icons/icons.module";
+import {IconsService} from "../../../openaireLibrary/utils/icons/icons.service";
+import {add, arrow_left, close} from "../../../openaireLibrary/utils/icons/icons";
+import {LoadingModule} from "../../../openaireLibrary/utils/loading/loading.module";
+import {InputModule} from "../../../openaireLibrary/sharedComponents/input/input.module";
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {ScrollingModule} from "@angular/cdk/scrolling";
+import {NoLoadPaging} from "../../../openaireLibrary/searchPages/searchUtils/no-load-paging.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CriteriaRoutingModule,
+    RouterModule,
+    FormsModule,
+    ReactiveFormsModule,
+    PageContentModule,
+    IconsModule,
+    LoadingModule,
+    InputModule,
+    MatSlideToggleModule,
+    ScrollingModule,
+    NoLoadPaging,
+  ],
+    declarations: [
+        CriteriaComponent
+    ],
+    providers: [
+        SearchCommunityDataprovidersService,
+        ManageCommunityContentProvidersService
+    ],
+    exports: [CriteriaComponent]
+})
+
+export class CriteriaModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([arrow_left, add, close])
+  }
+}

src/app/pages/content-providers/manage-content-providers.component.ts

@@ -0,0 +1,111 @@
+import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+
+import {RemoveContentProvidersComponent} from './remove-content-providers.component';
+
+import {Session} from '../../openaireLibrary/login/utils/helper.class';
+import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
+import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
+import {Title} from '@angular/platform-browser';
+import {FullScreenModalComponent} from "../../openaireLibrary/utils/modal/full-screen-modal/full-screen-modal.component";
+import {StringUtils} from "../../openaireLibrary/utils/string-utils.class";
+import {EnvProperties} from "../../openaireLibrary/utils/properties/env-properties";
+import {properties} from "../../../environments/environment";
+import {Subscriber} from "rxjs";
+
+@Component({
+  selector: 'manage-content-providers',
+  template: `
+    <remove-content-providers (toggleView)="toggleAction()" [communityContentProviders]="communityContentProviders"
+                     [showLoading]="showLoadingInRemove"
+                     (communityContentProvidersChanged)="communityContentProvidersChanged($event)" [toggle]="toggle">
+    </remove-content-providers>
+    <fs-modal #fsModal (cancelEmitter)="toggleAction()">
+      <div actions class="uk-flex uk-flex-middle uk-height-1-1">
+        <span class="uk-button uk-text-secondary" uk-icon="icon: info; ratio: 1.3"></span>
+        <div *ngIf="communityId" uk-drop="mode: hover">
+          <div class="uk-card uk-card-body uk-card-default">
+            If you cannot find a content provider relevant to your community, probably it is not OpenAIRE compliant.
+            Feel free to contact us
+            (<a
+            [href]="'mailto:' + properties.feedbackmailForMissingEntities +'?Subject=[OpenAIRE Connect - '+ communityId + '] report missing Funder' + '&body=' + body"
+            target="_top">{{properties.feedbackmailForMissingEntities}}</a>)
+            to let us know and we'll try to get the provider on board!
+          </div>
+        </div>
+      </div>
+
+      <add-content-providers [communityContentProviders]="communityContentProviders"
+                    (communityContentProvidersChanged)="communityContentProvidersChanged($event)"></add-content-providers>
+    </fs-modal>
+  `
+})
+
+export class ManageContentProvidersComponent implements OnInit {
+  @Input() communityContentProviders = [];
+  @ViewChild(RemoveContentProvidersComponent) removeContentProvidersComponent: RemoveContentProvidersComponent;
+  @ViewChild('fsModal') fullscreen: FullScreenModalComponent;
+
+  public toggle: boolean = false;
+
+  private subscriptions: any[] = [];
+
+  public showLoadingInRemove: boolean = true;
+
+  public body: string = "Send from page";
+  public properties: EnvProperties = properties;
+  public communityId: string = "";
+
+  constructor(private element: ElementRef,
+              private title: Title,
+              private route: ActivatedRoute, private _router: Router) {
+  }
+
+  ngOnInit() {
+    this.subscriptions.push(this.route.params.subscribe(params => {
+      this.communityId = params['community'];
+
+      if (this.communityId) {
+        this.title.setTitle(this.communityId.toUpperCase() + ' | Content Providers');
+        this.body = "[Please write your message here]";
+        this.body = StringUtils.URIEncode(this.body);
+      }
+    }));
+
+    this.fullscreen.title = "Search and Add Content Providers";
+    this.fullscreen.okButtonText = "Done";
+    this.fullscreen.okButton = true;
+  }
+
+  public ngOnDestroy() {
+    this.subscriptions.forEach(sub => {
+      if (sub instanceof Subscriber) {
+        sub.unsubscribe();
+      }
+    });
+  }
+
+  public toggleAction() {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
+      });
+    } else {
+      HelperFunctions.scroll();
+
+      this.toggle = !this.toggle;
+      if (this.toggle) {
+        this.fullscreen.open();
+      }
+    }
+  }
+
+  public communityContentProvidersChanged($event) {
+    this.communityContentProviders = $event.value;
+    this.showLoadingInRemove = false;
+
+    if (this.toggle) {
+      this.removeContentProvidersComponent.applyFilters();
+    }
+  }
+}

src/app/pages/content-providers/remove-content-providers.component.html

@@ -0,0 +1,150 @@
+<div page-content>
+  <div header>
+    <community-info tab="content-providers"></community-info>
+    <div [class.uk-invisible]="showLoading"
+         class="uk-width-1-1 uk-flex uk-flex-right@m uk-flex-center uk-flex-wrap uk-flex-middle uk-grid" uk-grid>
+      <div class="uk-flex-last@m">
+        <a class="uk-text-uppercase uk-flex uk-flex-middle" (click)="addNew()"
+           [attr.uk-tooltip]="(toggle? 'cls: uk-invisible; ' : 'cls: uk-active; ') +
+                'title: <div class=\'uk-padding-small\'><div class=\'uk-margin-bottom uk-text-bold\'> Search and add more Content Providers</div><div>The research results collected from the content providers specified here will be automatically linked to your community dashboard.</div></div>'">
+          <button class="uk-icon-button large uk-button-secondary">
+            <icon name="add"></icon>
+          </button>
+          <button class="uk-button uk-button-link uk-margin-small-left uk-text-secondary">Add new content provider
+          </button>
+        </a>
+      </div>
+      <div #searchInputComponent search-input [control]="filterForm.controls.keyword" [showSearch]="false"
+           placeholder="Search Content Providers"
+           [selected]="communitySearchUtils.keyword" (closeEmitter)="onSearchClose()" (resetEmitter)="resetInput()"
+           [bordered]="true" colorClass="uk-text-secondary"
+           class="uk-width-1-3@xl uk-width-2-5@l uk-width-1-2@m uk-width-1-1"></div>
+    </div>
+  </div>
+  <div inner>
+    <div *ngIf="showLoading" class="uk-margin-large-top">
+      <loading></loading>
+    </div>
+    <div *ngIf="!showLoading">
+      <div>
+        <!--        <div class="uk-grid uk-flex uk-flex-middle uk-margin-medium-bottom" uk-grid>-->
+        <!--          <div *ngIf="previewCommunityContentProviders.length > 0"-->
+        <!--               class="uk-width-expand@m uk-width-1-1">-->
+        <!--            <div class="uk-flex-middle uk-flex-right@m uk-flex-center uk-grid">-->
+        <!--              <span class="">Sort by: </span>-->
+        <!--              <div class="uk-width-medium uk-padding-remove uk-margin-small-left" dashboard-input-->
+        <!--                   [formInput]="filterForm.get('sort')"-->
+        <!--                   type="select"-->
+        <!--                   [options]="sortOptions">-->
+        <!--              </div>-->
+        <!--            </div>-->
+        <!--          </div>-->
+        <!--        </div>-->
+        <no-load-paging *ngIf="previewCommunityContentProviders.length > 0" [type]="'content providers'"
+                        (pageChange)="updatePage($event)"
+                        [page]="page" [pageSize]="resultsPerPage"
+                        [totalResults]="previewCommunityContentProviders.length">
+        </no-load-paging>
+        <div class="uk-margin-medium-top uk-margin-medium-bottom">
+          <div *ngIf="previewCommunityContentProviders.length == 0"
+               class="uk-card uk-card-default uk-padding-large uk-text-center uk-margin-bottom uk-text-bold">
+            <div>No content providers for {{name}}</div>
+          </div>
+
+          <div class="uk-card uk-card-default uk-text-small uk-margin-bottom"
+               *ngFor="let item of previewCommunityContentProviders.slice((page - 1)*resultsPerPage, page*resultsPerPage)">
+            <div class="uk-grid uk-grid-divider uk-padding" uk-grid>
+              <div class="uk-width-expand@m uk-width-1-1">
+                <div class="uk-padding-small uk-padding-remove-horizontal">
+                  <!--                  <h6 *ngIf="item.name || item.officialname || item.openaireId || item.selectioncriteria"-->
+                  <!--                      class="uk-margin-small-bottom">-->
+                  <!--                    <a *ngIf="item.openaireId"-->
+                  <!--                       target="_blank"-->
+                  <!--                       [href]="contentProviderUrl+item.openaireId">-->
+                  <!--                      <span *ngIf="item.name">{{item.name}}</span>-->
+                  <!--                      <span *ngIf="!item.name && item.officialname">{{item.officialname}}</span>-->
+                  <!--                      <span *ngIf="!item.name && !item.officialname">[no title available]</span>-->
+                  <!--                      <span class="custom-external custom-icon space"></span>-->
+                  <!--                    </a>-->
+                  <!--                    <span *ngIf="!item.openaireId">-->
+                  <!--                      <span *ngIf="item.name">{{item.name}}</span>-->
+                  <!--                      <span *ngIf="!item.name && item.officialname">{{item.officialname}}</span>-->
+                  <!--                      <span *ngIf="!item.name && !item.officialname">[no title available]</span>-->
+                  <!--                    </span>-->
+                  <!--                  </h6>-->
+                  <!--                  <h6 *ngIf="item.name || item.officialname || item.openaireId || item.selectioncriteria"-->
+                  <!--                      class="uk-margin-small-bottom">-->
+                  <!--                    <a *ngIf="item.openaireId"-->
+                  <!--                       target="_blank"-->
+                  <!--                       [href]="contentProviderUrl+item.openaireId">-->
+                  <!--                      <span *ngIf="item.name">{{item.name}}</span>-->
+                  <!--                      <span *ngIf="!item.name">[no title available]</span>-->
+                  <!--                      <span class="custom-external custom-icon space"></span>-->
+                  <!--                    </a>-->
+                  <!--                    <span *ngIf="!item.openaireId">-->
+                  <!--                      <span *ngIf="item.name">{{item.name}}</span>-->
+                  <!--                      <span *ngIf="!item.name">[no title available]</span>-->
+                  <!--                    </span>-->
+                  <!--                  </h6>-->
+                  <h6 class="uk-margin-small-bottom">
+                    <a *ngIf="item.openaireId"
+                       target="_blank"
+                       [href]="contentProviderUrl+item.openaireId">
+                      <span *ngIf="item.officialname">{{item.officialname}}</span>
+                      <span *ngIf="!item.officialname && item.name">{{item.name}}</span>
+                      <span *ngIf="!item.officialname && !item.name">[no title available]</span>
+                      <span class="custom-external custom-icon space"></span>
+                    </a>
+                    <span *ngIf="!item.openaireId">
+                      <span *ngIf="item.officialname">{{item.officialname}}</span>
+                      <span *ngIf="!item.officialname && item.name">{{item.name}}</span>
+                      <span *ngIf="!item.officialname && !item.name">[no title available]</span>
+                    </span>
+                  </h6>
+                  <!--                  <div *ngIf="item.name && item.officialname" class="uk-margin-small-bottom">-->
+                  <!--                  <div *ngIf="item.officialname" class="uk-margin-small-bottom">-->
+                  <!--                    <span class="title">Official Name: </span>-->
+                  <!--                    <span>{{item.officialname}}</span>-->
+                  <!--                  </div>-->
+                  <div *ngIf="item.selectioncriteria?.criteria?.length > 0" class="uk-margin-small-bottom">
+                    <div class="title uk-margin-small-bottom">Filters</div>
+                    <div [innerHTML]="getFiltersAsText(item.selectioncriteria.criteria)"></div>
+                    <a *ngIf="item.selectioncriteria.criteria.length > 3" class="uk-link uk-margin-top" [routerLink]="'./' + item.openaireId">View all {{item.selectioncriteria.criteria.length}} filters</a>
+                  </div>
+                </div>
+              </div>
+              <div class="uk-width-auto@m uk-width-1-1">
+                <div class="uk-flex uk-flex-middle uk-flex-center uk-flex-column uk-height-1-1">
+                  <div class="uk-padding-small uk-padding-remove-horizontal">
+                    <a (click)="goToCriteria(item.openaireId)" class="uk-button action uk-flex uk-flex-middle">
+                      <icon name="edit"></icon>
+                      <span *ngIf="item.selectioncriteria?.criteria?.length > 0" class="uk-margin-small-left"
+                            uk-tooltip="<div class='uk-padding-small'>Edit filters to limit research results.<br>Results which satisfy any of the selected filters will be included in your community.</div>">
+                        Edit filters
+                      </span>
+                      <span *ngIf="!(item.selectioncriteria?.criteria?.length > 0)" class="uk-margin-small-left"
+                            uk-tooltip="<div class='uk-padding-small'>Add filter to limit research results.<br>Results which satisfy any of the selected filters will be included in your community.</div>">
+                        Add filters
+                      </span>
+                    </a>
+                    <a (click)="removeContentProvider(item)"
+                       class="uk-button action uk-flex uk-flex-middle uk-margin-small-top">
+                      <icon name="remove_circle_outline"></icon>
+                      <span class="uk-margin-small-left">Remove content provider</span>
+                    </a>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <no-load-paging *ngIf="previewCommunityContentProviders.length > 0" [type]="'content providers'"
+                        (pageChange)="updatePage($event)"
+                        [page]="page" [pageSize]="resultsPerPage"
+                        [totalResults]="previewCommunityContentProviders.length">
+        </no-load-paging>
+      </div>
+    </div>
+    <modal-alert #AlertModalDeleteCommunity (alertOutput)="confirmedDeleteContentProvider($event)"></modal-alert>
+  </div>
+</div>

src/app/pages/content-providers/remove-content-providers.component.ts

@@ -0,0 +1,386 @@
+import {Component, EventEmitter, Input, OnInit, Output, ViewChild} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {Subscriber} from 'rxjs';
+
+import {ErrorCodes} from '../../openaireLibrary/utils/properties/errorCodes';
+import {SearchUtilsClass} from '../../openaireLibrary/searchPages/searchUtils/searchUtils.class';
+import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
+import {ManageCommunityContentProvidersService} from '../../services/manageContentProviders.service';
+import {SearchCommunityDataprovidersService} from '../../openaireLibrary/connect/contentProviders/searchDataproviders.service';
+import {RouterHelper} from '../../openaireLibrary/utils/routerHelper.class';
+
+import {Session} from '../../openaireLibrary/login/utils/helper.class';
+import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
+import {Criteria, SelectionCriteria} from '../../openaireLibrary/utils/entities/contentProvider';
+import {properties} from "../../../environments/environment";
+import {SearchInputComponent} from "../../openaireLibrary/sharedComponents/search-input/search-input.component";
+import {FormBuilder, FormGroup} from "@angular/forms";
+import {Option} from "../../openaireLibrary/sharedComponents/input/input.component";
+import {CommunityService} from "../../openaireLibrary/connect/community/community.service";
+import {CriteriaUtils} from "./criteria-utils";
+
+declare var UIkit;
+
+@Component({
+  selector: 'remove-content-providers',
+  templateUrl: './remove-content-providers.component.html'
+})
+export class RemoveContentProvidersComponent implements OnInit {
+  public portal: string;
+  public name: string;
+  public routerHelper: RouterHelper = new RouterHelper();
+  public contentProviderUrl = "https://" + ((properties.environment == "beta" || properties.environment == "development") ? "beta." : "") + "explore.openaire.eu" + properties.searchLinkToDataProvider;
+  public previewCommunityContentProviders = [];
+  public communitySearchUtils: SearchUtilsClass = new SearchUtilsClass();
+  public errorCodes: ErrorCodes;
+  @Input() public showLoading: boolean = true;
+  @Input() public communityContentProviders = [];
+  @Output() communityContentProvidersChanged = new EventEmitter();
+  private properties: EnvProperties = properties;
+  private subscriptions: any[] = [];
+  private selectedCommunityContentProvider: any;
+  @ViewChild('AlertModalDeleteCommunity') alertModalDeleteCommunity;
+  /** Criteria */
+  private fields = CriteriaUtils.fields;
+  private verbs = CriteriaUtils.verbs;
+  /** Paging */
+  page: number = 1;
+  resultsPerPage: number = properties.resultsPerPage;
+  /** Search */
+  @ViewChild('searchInputComponent') searchInputComponent: SearchInputComponent;
+  filterForm: FormGroup;
+  private searchText: RegExp = new RegExp('');
+  public keyword: string = '';
+  sortOptions: Option[] = [
+    {label: "Name ", value: {sort: "name", descending: false}},
+    {label: "Official Name ", value: {sort: "officialname", descending: false}}
+  ];
+
+  @Output() toggleView: EventEmitter<any> = new EventEmitter();
+  @Input() public toggle: boolean = true;
+
+  constructor(private route: ActivatedRoute, private _router: Router,
+              private _fb: FormBuilder, private communityService: CommunityService,
+              private _manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
+              private _searchCommunityContentProvidersService: SearchCommunityDataprovidersService) {
+    this.errorCodes = new ErrorCodes();
+    this.communitySearchUtils.status = this.errorCodes.LOADING;
+  }
+
+  ngOnInit() {
+    this.communitySearchUtils.keyword = "";
+
+    this.filterForm = this._fb.group({
+      keyword: [''],
+      // sort: this._fb.control(this.sortOptions[0].value)
+    });
+
+    this.subscriptions.push(this.filterForm.get('keyword').valueChanges.subscribe(value => {
+      this.searchText = new RegExp(value, 'i');
+      this.page = 1;
+      this.applyFilters();
+    }));
+
+    // this.subscriptions.push(this.filterForm.get('sort').valueChanges.subscribe(value => {
+    //   this.page = 1;
+    //   this.sort();
+    // }));
+
+    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(community => {
+      if (community) {
+        this.portal = community.communityId;
+        this.name = community.shortTitle;
+        this.contentProviderUrl = "https://"
+          + ((this.properties.environment == "beta" || this.properties.environment == "development") ? "beta." : "")
+          + this.portal + ".openaire.eu" + this.properties.searchLinkToDataProvider;
+
+        this.keyword = '';
+        this._getCommunityContentProviders();
+      }
+    }));
+  }
+
+  public ngOnDestroy() {
+    this.subscriptions.forEach(sub => {
+      if (sub instanceof Subscriber) {
+        sub.unsubscribe();
+      }
+    });
+  }
+
+  public getCriteriaLabel(selectionCriteria: SelectionCriteria): string {
+    if (selectionCriteria && selectionCriteria.criteria.length > 0) {
+      return (selectionCriteria.criteria.length === 1) ? '1 criterion' : (selectionCriteria.criteria.length + ' criteria')
+    } else {
+      return 'no criteria';
+    }
+  }
+
+  // filterData(row: any, query: string) {
+  //   let returnValue: boolean = false;
+  //
+  //   if(query) {
+  //     for(var i=0; i <2; 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;
+  //   }
+  // }
+
+  public inCommunity(result: any): any {
+    let found = false;
+    for (let contentProvider of this.communityContentProviders) {
+      if (contentProvider.opeaireId == result.id) {
+        return true;
+      }
+    }
+    return found;
+
+  }
+
+  totalPages(): number {
+    let totalPages: any = this.communitySearchUtils.totalResults / (this.resultsPerPage);
+    if (!(Number.isInteger(totalPages))) {
+      totalPages = (parseInt(totalPages, 10) + 1);
+    }
+    return totalPages;
+  }
+  
+  getFiltersAsText(criteria: Criteria[]): string {
+    let text = criteria.slice(0,3).map((criterion, index) => (index + 1) + ". " + criterion.constraint.map(constraint => {
+      let field = this.fields.find(field => field.value === constraint.field).label;
+      let matchCase = false;
+      if(!constraint.verb.includes('_caseinsensitive')) {
+        matchCase = true;
+      }
+      let verb = this.verbs.find(verb => verb.value === constraint.verb.replace("_caseinsensitive", "")).label;
+      let value = '"' + constraint.value + '"' + (matchCase?" (Match case)":"");
+      return field + " " + verb + " " + value;
+    }).join(" <b>and</b> "));
+    return text.join("<br>");
+  }
+
+  // goTo(page:number = 1){
+  //     this.communitySearchUtils.page=page;
+  //
+  //     var table = $('#dpTable').DataTable();
+  //     table.page( page - 1  ).draw( false );
+  //
+  //     var info = table.page.info();
+  //     this.communitySearchUtils.totalResults = info.recordsDisplay;
+  // }
+
+  public confirmedDeleteContentProvider(data: any) {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {
+          "errorCode": LoginErrorCodes.NOT_VALID,
+          "redirectUrl": this._router.url
+        }
+      });
+    } else {
+      this.subscriptions.push(this._manageCommunityContentProvidersService.removeContentProvider(this.properties, this.portal, this.selectedCommunityContentProvider.id).subscribe(
+        data => {
+          let index = this.communityContentProviders.indexOf(this.selectedCommunityContentProvider);
+          this.communityContentProviders.splice(index, 1);
+
+          this.applyFilters();
+
+          UIkit.notification('Content Provider successfully removed!', {
+            status: 'success',
+            timeout: 6000,
+            pos: 'bottom-right'
+          });
+
+          this.communityContentProvidersChanged.emit({
+            value: this.communityContentProviders,
+          });
+
+          this.communitySearchUtils.totalResults--;
+          this.communitySearchUtils.page = 1;
+        },
+        err => {
+          this.handleError('An error has been occurred. Try again later!');
+          console.error(err);
+        }
+      ));
+    }
+  }
+
+  public removeContentProvider(communityContentProvider: any) {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {
+          "errorCode": LoginErrorCodes.NOT_VALID,
+          "redirectUrl": this._router.url
+        }
+      });
+    } else {
+      this.selectedCommunityContentProvider = communityContentProvider;
+      this.alertModalDeleteCommunity.cancelButton = true;
+      this.alertModalDeleteCommunity.okButton = true;
+      this.alertModalDeleteCommunity.alertTitle = "Remove content provider?";
+      let title = "";
+      if (communityContentProvider.name) {
+        title = communityContentProvider.name;
+      }
+      if (communityContentProvider.name && communityContentProvider.acronym) {
+        title += " (";
+      }
+      if (communityContentProvider.acronym) {
+        title += communityContentProvider.acronym;
+      }
+      if (communityContentProvider.name && communityContentProvider.acronym) {
+        title += ")";
+      }
+      this.alertModalDeleteCommunity.message = "Content Provider";
+      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 _getCommunityContentProviders() {
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {
+          "errorCode": LoginErrorCodes.NOT_VALID,
+          "redirectUrl": this._router.url
+        }
+      });
+    } else {
+      this.communitySearchUtils.status = this.errorCodes.LOADING;
+      this.communityContentProviders = [];
+      this.communitySearchUtils.totalResults = 0;
+      this.communitySearchUtils.page = 1;
+      this.communitySearchUtils.keyword = "";
+
+      this.subscriptions.push(this._searchCommunityContentProvidersService.searchDataproviders(this.properties, this.portal).subscribe(
+        data => {
+          this.communityContentProviders = data;
+          this.previewCommunityContentProviders = this.communityContentProviders;
+          // this.sort();
+
+          this.communitySearchUtils.totalResults = data.length;
+          this.communitySearchUtils.status = this.errorCodes.DONE;
+
+          this.communityContentProvidersChanged.emit({
+            value: this.communityContentProviders,
+          });
+
+          this.showLoading = false;
+        },
+        err => {
+          console.error(err);
+          //TODO check erros (service not available, bad request)
+
+          if (err.status == '404') {
+            this.communitySearchUtils.status = this.errorCodes.NOT_FOUND;
+          } else if (err.status == '500') {
+            this.communitySearchUtils.status = this.errorCodes.ERROR;
+          } else {
+            this.communitySearchUtils.status = this.errorCodes.NOT_AVAILABLE;
+          }
+
+          this.showLoading = false;
+        }
+      ));
+    }
+  }
+
+  public updatePage($event) {
+    this.page = $event.value;
+  }
+
+  addNew() {
+    this.toggleView.emit(null);
+  }
+
+  public applyFilters() {
+    this.previewCommunityContentProviders = this.communityContentProviders.filter(contentProvider => {
+      return this.filterCommunityContentProviderByKeyword(contentProvider);
+    });
+
+    // check paging here!!!
+    if (this.previewCommunityContentProviders.slice((this.page - 1) * this.resultsPerPage, this.page * this.resultsPerPage).length == 0) {
+      this.page = 1;
+    }
+
+    // this.sort();
+  }
+
+  public filterCommunityContentProviderByKeyword(contentProvider): boolean {
+    const textFlag = this.searchText.toString() === ''
+      || (contentProvider.name + " " + contentProvider.officialname).match(this.searchText) != null;
+    return textFlag;
+  }
+
+  private sort() {
+    let sortOption: { sort: string, descending: boolean } = this.filterForm.get('sort').value;
+
+    this.previewCommunityContentProviders.sort((left, right): number => {
+      if (sortOption.sort == "name") {
+        if (left.name > right.name) {
+          return sortOption.descending ? -1 : 1;
+        } else if (left.name < right.name) {
+          return sortOption.descending ? 1 : -1;
+        }
+      } else if (sortOption.sort == "officialname") {
+        if (left.officialname > right.officialname) {
+          return sortOption.descending ? -1 : 1;
+        } else if (left.officialname < right.officialname) {
+          return sortOption.descending ? 1 : -1;
+        }
+      }
+
+      return 0;
+    });
+  }
+
+  public onSearchClose() {
+    this.communitySearchUtils.keyword = this.filterForm.get('keyword').value;
+  }
+
+  public resetInput() {
+    this.communitySearchUtils.keyword = null;
+    this.searchInputComponent.reset()
+  }
+
+  handleError(message: string) {
+    UIkit.notification(message, {
+      status: 'danger',
+      timeout: 6000,
+      pos: 'bottom-right'
+    });
+  }
+
+  goToCriteria(openaireId: string) {
+    this._router.navigate([openaireId], {
+      queryParams: {
+        // community: this.portal,
+        // provider: openaireId
+      },
+      relativeTo: this.route
+    })
+  }
+}

src/app/pages/curator/curator-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {CuratorComponent} from './curator.component';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-
-@NgModule({
-    imports: [
-        RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CuratorComponent}
-        ])
-    ]
-})
-export class CuratorRoutingModule { }

src/app/pages/curator/curator.component.html

@@ -1,119 +0,0 @@
-<ng-template #buttons>
-  <!--<a class="portal-link uk-margin-small-right" (click)="privacy()">Privacy policy statement</a>-->
-  <button class="uk-button uk-margin-small-right" (click)="resetMessages(); resetForm()">Cancel</button>
-  <button *ngIf="enabled && (hasChanged || affiliationsChanged)" class="uk-button uk-button-primary" (click)="resetMessages(); updateCurator()">Save</button>
-  <button *ngIf="!enabled || (!hasChanged && !affiliationsChanged)" class="uk-button uk-button-default" disabled>Save</button>
-</ng-template>
-<div class="uk-padding uk-padding-remove-top uk-text-large uk-text-center uk-width">Manage Personal Info</div>
-<div class="uk-margin-large-bottom uk-flex uk-grid-divider" uk-grid>
-  <div *ngIf="showLoading" class="uk-animation-fade uk-width-1-1" role="alert">
-    <span class="loading-gif uk-align-center"></span>
-  </div>
-  <div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-1 uk-margin-left">
-    <div class="uk-alert uk-alert-primary uk-flex uk-flex-middle">
-      <span class="uk-icon uk-margin-small-right" uk-icon="info"></span>
-      <div>
-        Your personal info will be visible in the Curators' page of your Community Gateway.
-        Read <a (click)="privacy()">privacy policy statement</a>.<br>
-        <span *ngIf="!newCurator && !curatorsEnabled">
-          Curators' page is disabled. Please enable it <a routerLink="/pages" routerLinkActive="router-link-active" [queryParams]="{communityId: communityId, type: 'other'}">here</a>.
-        </span>
-      </div>
-    </div>
-  </div>
-  <table *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s uk-align-center">
-    <tbody class="uk-table uk-align-center">
-      <tr *ngIf="curator.name != null">
-        <td for="name" class="uk-text-bold uk-text-right">
-          Name
-          <span class="uk-text-danger uk-text-bold">
-            *
-          </span>
-          :
-        </td>
-        <td class="uk-text-left uk-width-1-1">
-          <div *ngIf="!curator.name || curator.name === ''" class=" uk-text-danger uk-text-small style=display:none"> Please add name. </div>
-          <input  type="text"
-                  class="form-control uk-input" id="name"
-                  [(ngModel)]="curator.name" (input)="resetMessages(); onNameChange()" #name="ngModel" required>
-        </td>
-      </tr>
-      <tr *ngIf="photo != null">
-        <td for="photo" class="uk-text-bold uk-align-right">Photo:</td>
-        <td class="uk-text-left">
-          <div class="uk-flex uk-flex-middle" uk-grid>
-            <div class="uk-width-auto@l">
-              <img class="uk-border-circle curator-photo" src="{{photo}}" alt="Curator Photo">
-            </div>
-            <div class="uk-width-expand@l uk-grid-margin-small" uk-grid>
-              <div uk-form-custom class="uk-width-auto">
-                <input id="photo" type="file"  (change)="fileChangeEvent($event)" (input)="resetMessages(); change()"/>
-                <button class="uk-button  portal-button" type="button" tabindex="-1">
-                  Upload a photo
-                </button>
-              </div>
-              <div *ngIf="photo !== 'assets/common-assets/curator-default.png'" class="uk-width-auto">
-                <button class="uk-button uk-button-danger" type="button" (click)="resetMessages(); removePhotoModal.open()">
-                  Remove
-                </button>
-              </div>
-            </div>
-          </div>
-          <div class="uk-margin-small-top uk-text-warning">
-            Maximum photo resolution is 256x256 pixels.
-          </div>
-        </td>
-      </tr>
-      <tr *ngIf="curator.bio != null">
-        <td for="bio" class="uk-text-bold uk-text-right">Biography:</td>
-        <td class="uk-text-left">
-          <textarea placeholder={{curator.bio}} type="text"
-                    class="form-control uk-textarea" rows="6"
-                    id="bio"
-                    [(ngModel)]="curator.bio"
-                    (input)="resetMessages(); change()">
-          </textarea>
-        </td>
-      </tr>
-      <tr *ngIf="curator.bio != null">
-        <td class="uk-text-right"></td>
-        <td class="uk-text-left">
-        <div class="uk-text-danger uk-text-bold">
-          * Required fields
-        </div>
-        </td>
-      </tr>
-      <tr>
-        <td class="uk-text-right"></td>
-        <td>
-          <div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
-          <div *ngIf="successfulSaveMessage" class="uk-alert uk-alert-success" role="alert">{{successfulSaveMessage}}</div>
-      </tr>
-    </tbody>
-  </table>
-  <div *ngIf="curatorId != null && curator != null && !showLoading" class="uk-width-1-2@m uk-width-1-1@s">
-    <affiliations [curatorAffiliations]="true" [affiliations]="curator.affiliations"
-                  (affiliationsChange)="affiliationsChanged = $event"
-                  (resetCuratorMessages)="resetMessages();">
-    </affiliations>
-  </div>
-</div>
-<div class="uk-float-right uk-flex uk-flex-middle uk-visible@m" style="z-index: 100; bottom: 45px; position: fixed; right: 45px;">
-  <ng-container *ngTemplateOutlet="buttons"></ng-container>
-</div>
-<div class="uk-float-right uk-margin-bottom uk-hidden@m">
-  <ng-container *ngTemplateOutlet="buttons"></ng-container>
-</div>
-<modal-alert #removePhotoModal  (alertOutput)="removePhoto()">
-  Your photo will be removed after you save your data. Are you sure you want to proceed?
-</modal-alert>
-<modal-alert #privacyStatement  (alertOutput)="privacyStatement.cancel()">
-  <div class="">
-    Your personal data and photo are processed by OpenAIRE in conformity with personal data protection legal framework.
-    They  will be stored safely in our system for as long as OpenAIRE exists. Since you press the  "save" button,
-    you give us the consent to make them public in your Community Gateway to let users know who is
-    configuring the platform. You always have the right to exercise your rights and ask for access,
-    rectification, erasure and restriction of your data. Please contact <a href="mailto:rcd-helpdesk@openaire.eu">rcd-helpdesk@openaire.eu</a> if
-    you have any inquiries.
-  </div>
-</modal-alert>

src/app/pages/curator/curator.component.ts

@@ -1,268 +0,0 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {ActivatedRoute, Router} from '@angular/router';
-
-import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
-
-import {Session, User} from '../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
-import {CuratorService} from '../../openaireLibrary/connect/curators/curator.service';
-import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
-import {HelperFunctions} from '../../openaireLibrary/utils/HelperFunctions.class';
-import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
-import {HelpContentService} from '../../services/help-content.service';
-import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
-import {UserManagementService} from '../../openaireLibrary/services/user-management.service';
-import {Title} from '@angular/platform-browser';
-
-@Component({
-  selector: 'curator',
-  templateUrl: './curator.component.html',
-})
-
-export class CuratorComponent implements OnInit {
-
-  public showLoading = true;
-  public updateErrorMessage = '';
-  public successfulSaveMessage = '';
-
-  public curatorsEnabled = false;
-  public newCurator = false;
-
-  public communityId = null;
-
-  public affiliationsChanged = false;
-  public hasChanged = false;
-  public curatorId = null;
-  public curator: Curator = null;
-  public photo: any = null;
-  public properties: EnvProperties = null;
-  public user: User;
-
-  private file: File = null;
-  private maxsize: number = 200 * 1024;
-  public enabled = true;
-  private deletePhoto = false;
-
-  @ViewChild('privacyStatement') privacyStatement: AlertModal;
-
-  constructor(private element: ElementRef,
-              private route: ActivatedRoute,
-              private _router: Router,
-              private title: Title,
-              private curatorService: CuratorService,
-              private utilitiesService: UtilitiesService,
-              private helpContentService: HelpContentService,
-              private userManagementService: UserManagementService) {
-  }
-
-
-  ngOnInit() {
-    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
-      this.properties = data.envSpecific;
-      if (!Session.isLoggedIn()) {
-        this._router.navigate(['/user-info'], {
-          queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
-        });
-      } else {
-        this.route.queryParams.subscribe((params) => {
-          this.communityId = params['communityId'];
-          this.title.setTitle('Administration Dashboard | Personal Info');
-          this.showLoading = true;
-          this.updateErrorMessage = '';
-          this.userManagementService.getUserInfo().subscribe(user => {
-            this.user = user;
-            if(this.user) {
-              this.curatorId = this.user.id;
-              this.getCurator();
-            }
-          });
-        });
-      }
-    });
-
-  }
-
-  public getCurator() {
-    this.curatorService.getCurator(this.properties, this.curatorId).subscribe(
-      curator => {
-        if (curator && Object.keys(curator).length > 0) {
-          this.curator = curator;
-          this.curator.email = this.user.email;
-          if (this.curator.photo && this.curator.photo !== '') {
-            this.photo = this.properties.utilsService + '/download/' + this.curator.photo;
-          } else {
-            this.photo = 'assets/common-assets/curator-default.png';
-          }
-          this.curatorsPageStatus();
-          this.showLoading = false;
-          HelperFunctions.scroll();
-        } else {
-          this.newCurator = true;
-          this.curator = new Curator();
-          this.curator._id = this.curatorId;
-          this.curator.email = this.user.email;
-          this.curator.name = this.user.fullname;
-          this.curator.affiliations = [];
-          this.curator.bio = '';
-          this.curator.photo = null;
-          this.photo = 'assets/common-assets/curator-default.png';
-          this.showLoading = false;
-          HelperFunctions.scroll();
-        }
-      },
-      error => {
-      }
-    );
-  }
-
-
-  public resetForm() {
-    if (!Session.isLoggedIn()) {
-      this._router.navigate(['/user-info'], {
-        queryParams:
-          {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
-      });
-    } else {
-      if (this.curatorId != null && this.curatorId !== '') {
-        this.showLoading = true;
-        this.updateErrorMessage = '';
-        this.getCurator();
-      }
-      this.resetChange();
-    }
-  }
-
-  private curatorsPageStatus() {
-    this.curatorsEnabled = false;
-    this.helpContentService.getCommunityFull(this.communityId, this.properties.adminToolsAPIURL).subscribe((community) => {
-      for (let page of community.pages) {
-        if (page['route'] === '/curators') {
-          this.curatorsEnabled = page['isEnabled'];
-          return;
-        }
-      }
-    });
-  }
-
-  private change() {
-    this.hasChanged = true;
-    this.affiliationsChanged = true;
-  }
-
-  private resetChange() {
-    this.hasChanged = false;
-    this.affiliationsChanged = false;
-  }
-
-  public resetMessages() {
-    this.successfulSaveMessage = '';
-    this.updateErrorMessage = '';
-  }
-
-  handleUpdateError(message: string, error) {
-    this.resetMessages();
-    this.updateErrorMessage = message;
-    console.log('Server responded: ' + error);
-
-    this.showLoading = false;
-  }
-
-  handleSuccessfulSave(message) {
-    this.resetMessages();
-    this.showLoading = false;
-    HelperFunctions.scroll();
-    this.successfulSaveMessage = message;
-  }
-
-  fileChangeEvent(event) {
-    this.showLoading = true;
-    if (event.target.files && event.target.files[0]) {
-      this.file = event.target.files[0];
-      if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
-        this.handleUpdateError('You must choose a file with type: image/png or image/jpeg!', null);
-        this.file = null;
-      } else if (this.file.size > this.maxsize) {
-        this.handleUpdateError('File exceeds size\'s limit! Maximum resolution is 256x256 pixels.', null);
-        this.file = null;
-      } else {
-        this.updateErrorMessage = '';
-        const reader = new FileReader();
-        reader.readAsDataURL(this.file);
-        reader.onload = () => {
-          this.photo = reader.result;
-          this.showLoading = false;
-          HelperFunctions.scroll();
-        };
-      }
-    }
-  }
-
-  saveCurator() {
-    this.curatorService.updateCurator(this.properties, this.curator).subscribe((curator) => {
-        if (curator) {
-          this.handleSuccessfulSave('Your data has been saved successfully!');
-          this.newCurator = false;
-          this.file = null;
-          this.deletePhoto = false;
-          this.resetChange();
-        }
-      },
-      error => {
-        this.handleUpdateError('An error has occurred. Try again later!', error);
-        this.resetChange();
-      });
-  }
-
-
-  updateCurator() {
-    if (!Session.isLoggedIn()) {
-      this._router.navigate(['/user-info'], {
-        queryParams:
-          {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
-      });
-    } else {
-      if ((this.hasChanged || this.affiliationsChanged) && this.curator && this.curator.name && this.curator.name !== '') {
-        this.showLoading = true;
-        if (this.file) {
-          this.utilitiesService.uploadPhoto(this.properties.utilsService + '/upload/' + this.curator._id, this.file).subscribe((res) => {
-              if (this.curator.photo && this.curator.photo !== '') {
-                this.utilitiesService.deletePhoto(this.properties.utilsService + '/delete/' + this.curator.photo).subscribe();
-              }
-              this.curator.photo = res.filename;
-              this.saveCurator();
-            }, error => {
-              this.handleUpdateError('An error has occurred during photo uploading.', error);
-            }
-          );
-        } else {
-          if (this.deletePhoto) {
-            if(this.curator.photo && this.curator.photo != '') {
-              this.utilitiesService.deletePhoto(this.properties.utilsService + '/delete/' + this.curator.photo).subscribe();
-              this.curator.photo = '';
-            }
-          }
-          this.saveCurator();
-        }
-      }
-    }
-  }
-
-  onNameChange() {
-    this.hasChanged = true;
-    this.enabled = !(!this.curator.name || this.curator.name === '');
-  }
-
-  removePhoto() {
-    this.deletePhoto = true;
-    this.hasChanged = true;
-    this.file = null;
-    this.photo = 'assets/common-assets/curator-default.png';
-  }
-
-  privacy() {
-    this.privacyStatement.cancelButton = false;
-    this.privacyStatement.okButtonText = 'Close';
-    this.privacyStatement.alertTitle = 'Privacy policy statement';
-    this.privacyStatement.open();
-  }
-}

src/app/pages/curator/curator.module.ts

@@ -1,32 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
-import {RouterModule} from '@angular/router';
-
-import {CuratorComponent} from './curator.component';
-
-import {CuratorRoutingModule} from './curator-routing.module';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-import {CuratorService} from '../../openaireLibrary/connect/curators/curator.service';
-import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
-import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
-import {AffiliationsModule} from "../affiliations/affiliations.module";
-
-@NgModule({
-  imports: [
-    CuratorRoutingModule, CommonModule, FormsModule, RouterModule,
-    AlertModalModule, AffiliationsModule
-  ],
-  declarations: [
-    CuratorComponent
-  ],
-  providers: [
-    CuratorService, UtilitiesService, IsCommunity, ConnectAdminLoginGuard
-  ],
-  exports: [
-    CuratorComponent
-  ]
-})
-
-export class CuratorModule { }

src/app/pages/customization/Border.component.ts

@@ -4,32 +4,41 @@ import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
 @Component({
   selector: 'border',
   template: `
-    <div class="uk-grid uk-margin-remove">
+    <div class="uk-grid uk-child-width-1-2" >
-      <div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Radius:</div>
+      <div class="uk-margin-remove">
-      <div class="uk-width-2-3 uk-padding-remove-left">
+        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border radius (px)</div>
-        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0"  />
+  <!--      <div class="uk-margin-bottom uk-form-hint ">hint</div>-->
+        <div class="input-box">
+           <input class="uk-input " [(ngModel)]="radius" (ngModelChange)="borderChanged()" type="number" min="0"  />
+        </div>
       </div>
-    </div>
+      <div class="uk-margin-remove">
-    <div class="uk-grid uk-margin-remove">
+        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border width (px)</div>
-      <div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Width:</div>
+        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
-      <div class="uk-width-2-3 uk-padding-remove-left">
+        <div class="input-box">
-        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0" />
+          <input class="uk-input  " [(ngModel)]="width" (ngModelChange)="borderChanged()" type="number" min="0"  />
+        </div>
       </div>
-    </div>
+      <div class="uk-margin-small-top">
-    <div class="uk-grid uk-margin-remove">
+        <div class="uk-text-bold uk-form-label uk-margin-small-bottom"> Border style</div>
-      <div class="uk-width-1-3 uk-margin-small-top uk-padding-remove-left"> Style:</div>
+        <!--      <div class="uk-margin-bottom uk-form-hint "> hint</div>-->
-      <div class="uk-width-2-3 uk-padding-remove-left">
+        <div class="input-box ">
-<!--        <input class="uk-input uk-width-small uk-margin-small-left" [(ngModel)]="style" (ngModelChange)="borderChanged()"/>-->
+          <mat-form-field class="uk-width-1-1">
-
+            <mat-select class=""  [(ngModel)]="style" name="{{'select_type_'}}"
-        <select [(ngModel)]="style" name="{{'select_type_'}}"
+                        (ngModelChange)="borderChanged()"
-                class="uk-select uk-width-small" (ngModelChange)="borderChanged()">
+                        [disableOptionCentering]="true"
-          <option [value]="'solid'" >solid</option>
+                        panelClass="">
-          <option [value]="'dotted'" >dotted</option>
+              <mat-option [value]="'solid'" >solid</mat-option>
-          <option [value]="'dashed'" >dashed</option>
+              <mat-option [value]="'dotted'" >dotted</mat-option>
-        </select>
+              <mat-option [value]="'dashed'" >dashed</mat-option>
 
+            </mat-select>
+          </mat-form-field>
+        </div>
       </div>
     </div>
+    
+   
   `
 })
 

src/app/pages/customization/Color.component.ts

@@ -1,17 +1,19 @@
 import {Component, EventEmitter, Input, OnInit, Output,} from '@angular/core';
+import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
 
 
 @Component({
   selector: 'color',
   template: `
-    <div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker'">
+    <div [class]="(addMargin?'uk-margin-small-top':'') + ' colorPicker uk-flex uk-flex-middle'">
-      <div class="uk-grid uk-flex uk-flex-middle uk-remove-margin">
+      <div class=" uk-flex">
-        <div class="uk-width-2-3"> {{label}}:</div>
+        <div class="">
-        <div class="uk-width-1-3 uk-padding-remove-left">
+          <input id="colorPickerInput" class="uk-margin-small-left uk-width-small "  color-picker [colorPicker]="color"   [style.background]="color"
-          <input class="uk-margin-small-left uk-width-small "  color-picker [colorPicker]="color"   [style.background]="color"
                  (colorPickerChange)="color=$event; colorChanged();"/>
         </div>
+        <div class="uk-margin-small-left"> {{label}}</div>
       </div>
+      <span class="uk-text-warning uk-text-small uk-margin-small-left" *ngIf="warningForContrast(color)">Contrast ratio may be too low.</span>
     </div>
   `
 })
@@ -21,7 +23,10 @@ export class ColorComponent implements OnInit {
   @Input() label = 'Color';
   @Input() addMargin: boolean = false;
   @Output() colorChange = new EventEmitter();
-
+  @Input() light:boolean;
+  public warningForContrast(color:string){
+    return (this.light &&  CustomizationOptions.isForLightBackground(color)) || (!this.light && !CustomizationOptions.isForLightBackground(color));
+  }
 
   constructor() {
   }

src/app/pages/customization/background.component.ts

@@ -0,0 +1,149 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
+import {properties} from '../../../environments/environment';
+import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
+import {Subscription} from 'rxjs';
+
+declare var UIkit;
+
+@Component({
+  selector: 'background',
+  template: `
+    <color [color]="background.color"
+           [label]="label" [light]="light"
+           (colorChange)=
+             " background.color = $event;"></color>
+    <div *ngIf="upload" >
+    <input #file id="photo" type="file" class="uk-hidden" (change)="fileChangeEvent($event)"/>
+    <div *ngIf="!background.imageFile" class=" uk-width-1-1" 
+                     style="margin-top: 7px;">
+                  <div class="uk-grid uk-flex uk-flex-middle" uk-grid>
+                    <div class=" uk-width-1-1 uk-flex uk-flex-center">
+                      <button class="uk-button uk-button-secondary uk-flex uk-flex-middle uk-flex-wrap"
+                              (click)="file.click()">
+                        <icon name="cloud_upload" [flex]="true"></icon>
+                        <span class="uk-margin-small-left">Upload a file</span>
+                      </button>
+                    </div>
+                     
+                  </div>
+                </div>
+                <div *ngIf="background.imageFile" class="uk-width-1-1 uk-flex uk-flex-middle">
+                  <div class="uk-card uk-card-default uk-text-center ">
+                    <img class="" [src]="background.imageFile.indexOf('data:')==-1?(properties.utilsService + '/download/'+background.imageFile):background.imageFile">
+                  </div>
+                  <div class="uk-margin-left">
+                    <button (click)="removePhoto()" uk-tooltip="Remove" class="uk-button-secondary outlined uk-icon-button">
+                      <icon name="remove"></icon>
+                    </button>
+                  </div>
+                  <div class="uk-margin-small-left">
+                    <button class="uk-button-secondary uk-icon-button" (click)="file.click()" uk-tooltip="Edit">
+                      <icon name="edit"></icon>
+                    </button>
+                  </div>
+                </div>
+    </div>
+  `
+})
+
+export class BackgroundComponent implements OnInit {
+  @Input() label:string = "";
+  @Input() background;
+  @Input() oldBackground;
+  @Input() light:boolean;
+  @Input() upload:boolean = false;
+  @Input() communityId:string = "";
+
+  public file: File;
+  // public photo: string | ArrayBuffer;
+  private maxsize: number = 200 * 1024;
+  properties;
+  private subscriptions: any[] = [];
+
+  constructor(private utilsService: UtilitiesService) {
+  }
+
+
+  ngOnInit() {
+    this.properties = properties;
+  }
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+
+  removePhoto() {
+
+      if (typeof document != 'undefined') {
+        (<HTMLInputElement>document.getElementById("photo")).value = "";
+      }
+      // this.initPhoto();
+    console.log(this.background.imageFile + " " + this.oldBackground.imageFile)
+      if(this.background.imageFile != this.oldBackground.imageFile){
+        this.deletePhoto();
+      }
+      this.background.imageFile = null;
+      this.file = null;
+
+  }
+
+
+
+  public deletePhoto() {
+    console.log("deletePhoto")
+    if (this.background.imageFile) {
+      console.log("deletePhoto@@")
+      this.subscriptions.push(this.utilsService.deletePhoto(properties.utilsService + '/delete/stakeholder/' +this.background.imageFile).subscribe());
+    }
+  }
+
+  fileChangeEvent(event) {
+    if (event.target.files && event.target.files[0]) {
+      this.file = event.target.files[0];
+      if (this.file.type !== 'image/png' && this.file.type !== 'image/jpeg') {
+        UIkit.notification('You must choose a file with type: image/png or image/jpeg!', {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+        this.removePhoto();
+      } else if (this.file.size > this.maxsize) {
+         UIkit.notification('File exceeds size\'s limit ('+this.maxsize/1024+'KB)!  ', {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+        this.removePhoto();
+      } else {
+        /*const reader = new FileReader();
+        reader.readAsDataURL(this.file);
+        reader.onload = () => {
+          this.background.imageFile = reader.result;
+
+        };*/
+        this.save();
+      }
+    }
+  }
+
+  public save() {
+    if (this.file) {
+      this.subscriptions.push(this.utilsService.uploadPhoto(this.properties.utilsService + "/upload/stakeholder/" + encodeURIComponent(this.communityId+"-"+this.label), this.file).subscribe(res => {
+        this.deletePhoto();
+        this.removePhoto();
+        this.background.imageFile = res.filename;
+
+      }, error => {
+         UIkit.notification("An error has been occurred during upload your image. Try again later", {
+          status: 'danger',
+          timeout: 6000,
+          pos: 'bottom-right'
+        });
+      }));
+    }
+  }
+}

src/app/pages/customization/customization-routing.module.ts

@@ -1,13 +1,11 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {CustomizationComponent} from './customization.component';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
 
 @NgModule({
     imports: [
         RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: CustomizationComponent}
+            { path: '', component: CustomizationComponent}
         ])
     ]
 })

src/app/pages/customization/customization.component.html

@@ -1,675 +1,214 @@
 <ng-template #applyResetButtons>
-  <div class="uk-margin-small">
+<!--  <div class="uk-margin-small">-->
-    <button class="uk-button uk-button-small uk-button-primary"
+  <button class="uk-float-right uk-button uk-margin-left uk-button-secondary "
+          [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
+          [title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
+          (click)="saveLayout()">
+    Publish
+  </button>
+    <button class="uk-float-right uk-button uk-margin-left uk-button-secondary outlined" [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
             (click)="resetLayout()">
-      <span class="uk-icon"><svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+
-                                 data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
+      <span>Reset all</span>
-                                                          d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-        fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg></span>
-      <span> Reset</span>
     </button>
-    <button class="uk-button uk-button-small uk-button-primary uk-float-right"
+
-            [disabled]="!hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
-            [title]="(hasChanges(draftCustomizationOptions, appliedCustomizationOptions)?'Apply changes to preview on the right':'No changes to apply')"
-            (click)="applyLayout();">Apply
-    </button>
-  </div>
 </ng-template>
 
-
+<div page-content class="admin-pages">
-<div class="uk-grid uk-height-1-1">
+  <div header>
-  <div class="uk-width-1-5 uk-background-muted customizationMenuPanel uk-padding-small ">
-    <div *ngIf="menuSelected == 'main'" class=" ">
-      <div class="uk-background-primary uk-padding-small uk-light">
-        <a class="uk-margin-right uk-link " (click)="exit();">
-          <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                     data-svg="close"><path fill="none" stroke="#000" stroke-width="1.06"
-                                                            d="M16,16 L4,4"></path><path fill="none" stroke="#000"
-                                                                                         stroke-width="1.06"
-                                                                                         d="M16,4 L4,16"></path></svg></span>
-        </a>
-        <span> Customization</span>
-      </div>
-      <div class="uk-margin-small-top uk-alert uk-text-small uk-grid uk-margin-small-left uk-padding-small">
-        <div class="uk-padding-remove">Download the saved customization settings and upload a customization file:</div>
-        <div class="uk-width-1-2 uk-padding-remove"><a
-          (click)="downloadCustomization()" class="uk-link"
-        ><span
-          uk-icon="icon: download; ratio:0.7"></span>Download </a>
-        </div>
-        <div class="js-upload uk-width-1-2 uk-text-right  uk-float-right" uk-form-custom
-        >
-          <input id="exampleInputFile" class="uk-width-medium" type="file" (change)="fileChangeEvent($event)"/>
-          <span class="uk-link " style=""><span uk-icon="icon: upload; ratio:0.7"></span>Upload </span>
-        </div>
-      </div>
-      <div>{{errorMessage}}</div>
-      <div class="">
-        <div class="uk-h5 uk-margin-small-top">
-          Style
-
-        </div>
-        <div class="uk-padding-small customizationMenuItems">
-          <ul class="uk-list uk-list-divider">
-            <li><a (click)="menuSelected = 'backgrounds'">Backgrounds</a></li>
-            <li><a (click)="menuSelected = 'fonts'">Fonts</a></li>
-            <li><a (click)="menuSelected = 'elements'">Elements</a></li>
-            <li><a (click)="menuSelected = 'identity'">Identity</a></li>
-            <li><a (click)="menuSelected = 'buttons'">Buttons</a></li>
-          </ul>
-        </div>
-
-        <div class="uk-h5 uk-margin-small-top">
-          View
-
-        </div>
-        <div class="uk-padding-small customizationMenuItems">
-          <a [href]="previewUrl" target="_blank">Preview page</a>
-        </div>
-        <div class="uk-h5 uk-margin-small-top">
-
-          Go to
-
-        </div>
-        <div class="uk-padding-small customizationMenuItems">
-          <a [href]="getCommunityUrl()" target="_blank">Community Page</a>
-
-        </div>
-      </div>
-    </div>
-    <div *ngIf="menuSelected == 'backgrounds'" class="  ">
-      <div class="uk-background-primary uk-padding-small uk-light">
-        <a class="uk-margin-right uk-link " (click)="back();">
-          <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                     data-svg="arrow-left"><polyline fill="none" stroke="#000"
-                                                                     points="10 14 5 9.5 10 5"></polyline><line
-            fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span>
-        </a>
-        <span> Backgrounds</span>
-      </div>
-      <ng-container
-        *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
-
-      <div class="uk-alert  uk-text-small uk-padding-small">
-        <span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="info"><path
-          d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
-          fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
-        Set the banner background color and which fonts to be used (for dark or light background).
-      </div>
-      <div class="uk-padding-small customizationMenuItems uk-margin-small">
-        <ul uk-accordion>
-          <li class="uk-open">
-            <a class="uk-accordion-title" href="#">Banners </a>
-
-            <div class="uk-accordion-content uk-margin-remove-top">
-
-
-              <!--              <div>Appereance</div>-->
-              <color [color]="draftCustomizationOptions.panel.background.color" label="Background color"
-                     (colorChange)=
-                       " draftCustomizationOptions.panel.background.color = $event;"></color>
-              <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">BUTTONS & LINKS</div>
-              <div class=" uk-grid-small uk-child-width-auto uk-grid">
-                <label><input [value]="true"
-                              [(ngModel)]="draftCustomizationOptions.panel.onDarkBackground" name="true"
-                              type="radio"/>
-                  for dark background</label>
-                <label><input [value]="false"
-                              [(ngModel)]="draftCustomizationOptions.panel.onDarkBackground" name="false"
-                              type="radio"/> for light background</label>
-              </div>
-              <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                <span class="uk-icon uk-link " (click)="resetBackgrounds()">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                     data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                              d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                  fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-              </span>
-              </div>
-              <div class="uk-padding-small uk-text-center"
-                   [style.background-color]="draftCustomizationOptions.panel.background.color">
-                <div [style.color]="draftCustomizationOptions.panel.title.color"
-                     [style.font-family]="draftCustomizationOptions.panel.title.family"
-                     [style.font-size]="draftCustomizationOptions.panel.title.size+'px'"
-                     [style.font-weight]="draftCustomizationOptions.panel.title.weight">Banner Big Text
-                </div>
-                <div [style.color]="draftCustomizationOptions.panel.fonts.color"
-                     [style.font-family]="draftCustomizationOptions.panel.fonts.family"
-                     [style.font-size]="draftCustomizationOptions.panel.fonts.size+'px'"
-                     [style.font-weight]="draftCustomizationOptions.panel.fonts.weight">Banner Small Text
-                </div>
-                <div *ngIf="draftCustomizationOptions.panel.onDarkBackground">
-                  <a class="" [style]="linkDarkBackgroundPreview"
-                     (mouseover)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.onHover.color);"
-                     (mouseout)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);">Link</a>
-                  <br>
-                  <a class="uk-button" [style]="buttonDarkBackgroundPreview"
-                     (mouseover)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground.onHover, draftCustomizationOptions.buttons.darkBackground);"
-                     (mouseout)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);">Button</a>
-
-                </div>
-                <div *ngIf="!draftCustomizationOptions.panel.onDarkBackground">
-
-                  <a class="" [style]="linkLightBackgroundPreview"
-                     (mouseover)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground,
-                       draftCustomizationOptions.links.lightBackground.onHover.color);"
-                     (mouseout)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);">Link</a>
-                  <br>
-                  <a class="uk-button" [style]="buttonLightBackgroundPreview"
-                     (mouseover)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground.onHover, draftCustomizationOptions.buttons.lightBackground);"
-                     (mouseout)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);">
-                    Button</a>
-
-                </div>
-
-
-              </div>
-
-            </div>
-          </li>
-        </ul>
-
-
-      </div>
-
-
-    </div>
-
-    <div *ngIf="menuSelected == 'fonts'" class="  ">
-      <div class="uk-background-primary uk-padding-small uk-light">
-        <a class="uk-margin-right uk-link " (click)="back();">
-        <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="arrow-left"><polyline fill="none" stroke="#000"
-                                                                   points="10 14 5 9.5 10 5"></polyline><line
-          fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span>
-        </a>
-        <span> Fonts</span>
-      </div>
-      <ng-container
-        *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
-      <div class="uk-alert  uk-text-small uk-padding-small">
-        <span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="info"><path
-          d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
-          fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
-        Customize the banner fonts, and the links for dark and light background
-      </div>
-      <div class="uk-padding-small customizationMenuItems uk-margin-small">
-        <ul uk-accordion>
-          <li class="uk-open">
-            <a class="uk-accordion-title" href="#">Banner Big Text</a>
-            <div class="uk-accordion-content uk-margin-remove-top">
-
-              <font-size [font]="draftCustomizationOptions.panel.title.family"
-                         [size]="draftCustomizationOptions.panel.title.size"
-                         [weight]="draftCustomizationOptions.panel.title.weight"
-                         (fontChange)="draftCustomizationOptions.panel.title.family=$event.font;
-                         draftCustomizationOptions.panel.title.size=$event.size;
-                         draftCustomizationOptions.panel.title.weight=$event.weight"></font-size>
-              <color [color]="draftCustomizationOptions.panel.title.color"
-                     (colorChange)=
-                       " draftCustomizationOptions.panel.title.color = $event;" [addMargin]="true"></color>
-              <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                <span class="uk-icon uk-link " (click)="resetFontsBig()">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                     data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                              d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                  fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-              </span>
-              </div>
-              <div class="uk-padding-small uk-text-center"
-                   [style.background-color]="draftCustomizationOptions.panel.background.color">
-                <div [style.color]="draftCustomizationOptions.panel.title.color"
-                     [style.font-family]="draftCustomizationOptions.panel.title.family"
-                     [style.font-size]="draftCustomizationOptions.panel.title.size+'px'"
-                     [style.font-weight]="draftCustomizationOptions.panel.title.weight">Banner Big Text
-                </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="uk-padding-small customizationMenuItems uk-margin-small">
-        <ul uk-accordion>
-          <li>
-            <a class="uk-accordion-title" href="#">Banner Small Text</a>
-            <div class="uk-accordion-content uk-margin-remove-top">
-
-
-              <font-size [font]="draftCustomizationOptions.panel.fonts.family"
-                         [size]="draftCustomizationOptions.panel.fonts.size"
-                         [weight]="draftCustomizationOptions.panel.fonts.weight"
-                         (fontChange)="draftCustomizationOptions.panel.fonts.family=$event.font;
-                         draftCustomizationOptions.panel.fonts.size=$event.size;
-                         draftCustomizationOptions.panel.fonts.weight=$event.weight"
-              ></font-size>
-              <color [color]="draftCustomizationOptions.panel.fonts.color"
-                     (colorChange)=
-                       " draftCustomizationOptions.panel.fonts.color = $event;" [addMargin]="true"></color>
-              <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                <span class="uk-icon uk-link " (click)="resetFontsSmall()">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                     data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                              d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                  fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-              </span>
-              </div>
-              <div class="uk-padding-small uk-text-center"
-                   [style.background-color]="draftCustomizationOptions.panel.background.color">
-                <div [style.color]="draftCustomizationOptions.panel.fonts.color"
-                     [style.font-family]="draftCustomizationOptions.panel.fonts.family"
-                     [style.font-size]="draftCustomizationOptions.panel.fonts.size+'px'"
-                     [style.font-weight]="draftCustomizationOptions.panel.fonts.weight">Banner Small Text
-                </div>
-              </div>
-
-            </div>
-          </li>
-        </ul>
-      </div>
-      <div class="uk-padding-small customizationMenuItems uk-margin-small">
-        <ul uk-accordion>
-          <li>
-            <a class="uk-accordion-title" href="#">Links</a>
-            <div class="uk-accordion-content uk-margin-remove-top">
-
-              <ul class="uk-tab" uk-switcher>
-                <li><a href="#">On dark <br>background</a></li>
-                <li><a href="#">On light <br>background</a></li>
-              </ul>
-
-              <ul class="uk-switcher uk-margin">
-                <li>
-                  <font-size [font]="draftCustomizationOptions.links.darkBackground.family"
-                             [size]="draftCustomizationOptions.links.darkBackground.size"
-                             [weight]="draftCustomizationOptions.links.darkBackground.weight"
-                             (fontChange)="draftCustomizationOptions.links.darkBackground.family=$event.font;
-                             draftCustomizationOptions.links.darkBackground.size=$event.size;
-                             draftCustomizationOptions.links.darkBackground.weight=$event.weight; linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);"
-                  ></font-size>
-                  <!--                  <div>Appereance</div>-->
-                  <color [color]="draftCustomizationOptions.links.darkBackground.color" (colorChange)=
-                    " draftCustomizationOptions.links.darkBackground.color = $event; linkDarkBackgroundPreview =
-                    changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color)"></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
-                  <color [color]="draftCustomizationOptions.links.darkBackground.onHover.color" (colorChange)=
-                    " draftCustomizationOptions.links.darkBackground.onHover.color = $event;"></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                    <span class="uk-icon uk-link " (click)="resetFontsLinksDark();">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                     data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                              d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                  fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-              </span>
-                  </div>
-                  <div class="uk-padding-small uk-text-center uk-background-primary ">
-                    <a class="" [style]="linkDarkBackgroundPreview"
-                       (mouseover)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.onHover.color);"
-                       (mouseout)="linkDarkBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.darkBackground, draftCustomizationOptions.links.darkBackground.color);">Link</a>
-                  </div>
-
-                </li>
-                <li>
-                  <!--                  <div>Appereance</div>-->
-                  <color [color]="draftCustomizationOptions.links.lightBackground.color" (colorChange)=
-                    " draftCustomizationOptions.links.lightBackground.color = $event; linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);"></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
-                  <color [color]="draftCustomizationOptions.links.lightBackground.onHover.color" (colorChange)=
-                    " draftCustomizationOptions.links.lightBackground.onHover.color = $event;"></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                    <span class="uk-icon uk-link " (click)="resetFontsLinksLight();">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                     data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                              d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                  fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-              </span>
-                  </div>
-                  <div class="uk-padding-small uk-text-center ">
-                    <a class="" [style]="linkLightBackgroundPreview"
-                       (mouseover)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground,
-                       draftCustomizationOptions.links.lightBackground.onHover.color);"
-                       (mouseout)="linkLightBackgroundPreview=changeFontsStyle(draftCustomizationOptions.links.lightBackground, draftCustomizationOptions.links.lightBackground.color);">Link</a>
-                  </div>
-                </li>
-              </ul>
-
-            </div>
-          </li>
-        </ul>
-      </div>
-
-    </div>
-
-    <div *ngIf="menuSelected == 'elements'" class="  ">
-      <div class="uk-background-primary uk-padding-small uk-light">
-        <a class="uk-margin-right uk-link " (click)="back();">
-        <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="arrow-left"><polyline fill="none" stroke="#000"
-                                                                   points="10 14 5 9.5 10 5"></polyline><line
-          fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span></a>
-        <span> Elements</span>
-      </div>
-      <ng-container
-        *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
-      <div class="uk-alert  uk-text-small uk-padding-small">
-        <span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="info"><path
-          d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
-          fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
-        Customize the layout of dashboard elements.
-      </div>
-      <div class="uk-padding-small customizationMenuItems uk-margin-small">
-        <ul uk-accordion>
-          <li class="uk-open">
-            <a class="uk-accordion-title" href="#"> Subject tags & Statistics cubes</a>
-            <div class="uk-accordion-content uk-margin-remove-top">
-              <!--              <div>Appereance</div>-->
-              <color [color]="draftCustomizationOptions.panel.panelElements.backgroundColor" (colorChange)=
-                " draftCustomizationOptions.panel.panelElements.backgroundColor= $event;"
-                     label="Background Color"></color>
-              <div class="uk-margin-small-top">FONTS</div>
-              <color [color]="draftCustomizationOptions.panel.panelElements.color" (colorChange)=
-                " draftCustomizationOptions.panel.panelElements.color= $event;"></color>
-              <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                <span class="uk-icon uk-link " (click)="resetElements()">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                     data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                              d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                  fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-              </span>
-              </div>
-              <div class="uk-padding-small uk-text-center"
-                   [style.background-color]="draftCustomizationOptions.panel.background.color">
-                <div class="uk-card uk-padding-small uk-margin-auto" style="width:100px; height:100px"
-                     [style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor"
-                     [style.color]="draftCustomizationOptions.panel.panelElements.color">Statistics cube
-                </div>
-                <div class="uk-label uk-margin-top"
-                     [style.background-color]="draftCustomizationOptions.panel.panelElements.backgroundColor"
-                     [style.color]="draftCustomizationOptions.panel.panelElements.color">Subject tag
-                </div>
-              </div>
-
-            </div>
-          </li>
-        </ul>
-      </div>
-
-
-    </div>
-
-    <div *ngIf="menuSelected == 'identity'" class="  ">
-      <div class="uk-background-primary uk-padding-small uk-light">
-        <a class="uk-margin-right uk-link " (click)="back();">
-        <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="arrow-left"><polyline fill="none" stroke="#000"
-                                                                   points="10 14 5 9.5 10 5"></polyline><line
-          fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span></a>
-        <span> Identity</span>
-      </div>
-      <ng-container
-        *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
-      <div class="uk-alert  uk-text-small uk-padding-small">
-        <span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="info"><path
-          d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
-          fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
-        Identity colors are used in several spots in your community Dashboard. Check the <b>quick look</b> section!
-      </div>
-      <div class="uk-padding-small customizationMenuItems uk-margin-small">
-        <ul uk-accordion>
-          <li class="uk-open">
-            <a class="uk-accordion-title" href="#"> Identity Colors</a>
-            <div class="uk-accordion-content uk-margin-remove-top">
-              <!--              <div>Primary color</div>-->
-              <color [color]="draftCustomizationOptions.mainColor" (colorChange)=
-                " draftCustomizationOptions.mainColor= $event;" label="Primary color"></color>
-              <!--              <div class="uk-margin-small-top">Secondary color</div>-->
-              <color [color]="draftCustomizationOptions.secondaryColor" (colorChange)=
-                " draftCustomizationOptions.secondaryColor= $event;" label="Secondary color"></color>
-
-              <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                <span class="uk-icon uk-link " (click)="resetIdentity(); ">
-                <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                     data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                              d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                  fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-              </span>
-              </div>
-              <div style="border-style: solid; border-width: 2px; border-radius: 6px;" class="uk-padding-small"
-                   [style.border-color]="draftCustomizationOptions.mainColor">
-
-                <ul class="uk-pagination uk-flex-center" uk-margin="">
-                  <li class="uk-first-column"><a><span class="uk-icon uk-pagination-previous"
-                                                       uk-pagination-previous="">
-                <svg [style.color]="draftCustomizationOptions.mainColor" data-svg="pagination-previous" height="12"
-                     viewBox="0 0 7 12" width="7"
-                     xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="6 1 1 6 6 11" stroke="#000"
-                                                                  stroke-width="1.2"></polyline></svg></span></a></li>
-                  <li><a [style.color]="(hoveredText ==
-                                  'page-1'?draftCustomizationOptions.mainColor:'inherit')"
-                         (mouseover)="hoveredText ='page-1'" (mouseout)="hoveredText =''">1</a></li>
-
-                  <li><a class="uk-active" [style.background-color]="draftCustomizationOptions.mainColor"
-                         [style.color]="'white'">2</a></li>
-                  <li><a [style.color]="(hoveredText ==
-                                  'page-3'?draftCustomizationOptions.mainColor:'inherit')"
-                         (mouseover)="hoveredText ='page-3'" (mouseout)="hoveredText =''">3</a></li>
-                  <li><a><span
-                    class="uk-icon uk-pagination-next" uk-pagination-next=""><svg
-                    [style.color]="draftCustomizationOptions.mainColor"
-                    data-svg="pagination-next" height="12" viewBox="0 0 7 12" width="7"
-                    xmlns="http://www.w3.org/2000/svg"><polyline fill="none" points="1 1 6 6 1 11" stroke="#000"
-                                                                 stroke-width="1.2"></polyline></svg></span></a></li>
-                </ul>
-                <hr [style.border-color]="draftCustomizationOptions.mainColor">
-                <ul class="uk-accordion" uk-accordion="">
-                  <li class=""><a class="uk-accordion-title"
-                                  [style.border-color]="draftCustomizationOptions.mainColor"
-                                  [style.color]="(hoveredText ==
-                                  'accordion-1'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
-                                  (mouseover)="hoveredText ='accordion-1'" (mouseout)="hoveredText =''">Item
-                    1</a>
-                    <div aria-hidden="true" class="uk-accordion-content" hidden="">
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
-                    </div>
-                  </li>
-                  <li><a class="uk-accordion-title"
-                         [style.border-color]="draftCustomizationOptions.mainColor" [style.color]="(hoveredText ==
-                                  'accordion-2'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
-                         (mouseover)="hoveredText ='accordion-2'" (mouseout)="hoveredText =''">Item
-                    2</a>
-                    <div aria-hidden="false" class="uk-accordion-content">
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
-                    </div>
-                  </li>
-                  <li><a class="uk-accordion-title"
-                         [style.border-color]="draftCustomizationOptions.mainColor" [style.color]="(hoveredText ==
-                                  'accordion-3'?draftCustomizationOptions.secondaryColor:draftCustomizationOptions.mainColor)"
-                         (mouseover)="hoveredText ='accordion-3'" (mouseout)="hoveredText =''">Item 3</a>
-                    <div aria-hidden="true" class="uk-accordion-content" hidden="">
-                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
-                    </div>
-                  </li>
-                </ul>
-                <hr [style.border-color]="draftCustomizationOptions.mainColor">
-                <ul class="uk-tab">
-                  <li class="uk-active"><a [style.border-color]="draftCustomizationOptions.mainColor"
-                                           [style.color]="draftCustomizationOptions.mainColor">Active</a></li>
-                  <li><a [style.border-color]="(hoveredText ==
-                                  'tab-2'?draftCustomizationOptions.secondaryColor:'')"
-                         [style.color]="(hoveredText ==
-                                  'tab-2'?draftCustomizationOptions.secondaryColor:'inherit')"
-                         (mouseover)="hoveredText ='tab-2'" (mouseout)="hoveredText =''">Item</a></li>
-
-                </ul>
-                <div [style.color]="draftCustomizationOptions.mainColor">Text in primary
-                  color
-                </div>
-                <div [style.color]="draftCustomizationOptions.secondaryColor">Text in secondary
-                  color
-                </div>
-              </div>
-            </div>
-          </li>
-        </ul>
-      </div>
-
-
-    </div>
-    <div *ngIf="menuSelected == 'buttons'" class="  ">
-      <div class="uk-background-primary uk-padding-small uk-light">
-        <a class="uk-margin-right uk-link " (click)="back();">
-        <span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="arrow-left"><polyline fill="none" stroke="#000"
-                                                                   points="10 14 5 9.5 10 5"></polyline><line
-          fill="none" stroke="#000" x1="16" y1="9.5" x2="5" y2="9.52"></line></svg></span></a>
-        <span> Buttons</span>
-      </div>
-      <ng-container
-        *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
-      <div class="uk-alert  uk-text-small uk-padding-small">
-        <span class="uk-icon"><svg width="14" height="14" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                                   data-svg="info"><path
-          d="M12.13,11.59 C11.97,12.84 10.35,14.12 9.1,14.16 C6.17,14.2 9.89,9.46 8.74,8.37 C9.3,8.16 10.62,7.83 10.62,8.81 C10.62,9.63 10.12,10.55 9.88,11.32 C8.66,15.16 12.13,11.15 12.14,11.18 C12.16,11.21 12.16,11.35 12.13,11.59 C12.08,11.95 12.16,11.35 12.13,11.59 L12.13,11.59 Z M11.56,5.67 C11.56,6.67 9.36,7.15 9.36,6.03 C9.36,5 11.56,4.54 11.56,5.67 L11.56,5.67 Z"></path><circle
-          fill="none" stroke="#000" stroke-width="1.1" cx="10" cy="10" r="9"></circle></svg></span>
-        Customize the buttons for dark and light backgrounds
-      </div>
-      <div class="uk-padding-small customizationMenuItems uk-margin-small">
-        <ul uk-accordion>
-          <li class="uk-open">
-            <a class="uk-accordion-title" href="#">Buttons</a>
-            <div class="uk-accordion-content uk-margin-remove-top">
-
-              <ul class="uk-tab" uk-switcher>
-                <li><a href="#">On dark <br>background</a></li>
-                <li><a href="#">On light <br>background</a></li>
-              </ul>
-
-              <ul class="uk-switcher uk-margin">
-                <li>
-                  <border [style]="draftCustomizationOptions.buttons.darkBackground.borderStyle" [width]=
-                    "draftCustomizationOptions.buttons.darkBackground.borderWidth" [radius]=
-                            "draftCustomizationOptions.buttons.darkBackground.borderRadius" (borderChange)=
-                            " draftCustomizationOptions.buttons.darkBackground.borderStyle = $event.style;
-                    draftCustomizationOptions.buttons.darkBackground.borderRadius = $event.radius;
-                    draftCustomizationOptions.buttons.darkBackground.borderWidth = $event.width; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"></border>
-                  <color [color]="draftCustomizationOptions.buttons.darkBackground.color" (colorChange)=
-                    " draftCustomizationOptions.buttons.darkBackground.color = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
-                         label="Fonts Color"
-                         [addMargin]="true"></color>
-                  <color [color]="draftCustomizationOptions.buttons.darkBackground.backgroundColor" (colorChange)=
-                    " draftCustomizationOptions.buttons.darkBackground.backgroundColor = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
-                         label="Background Color" [addMargin]="true"></color>
-                  <color [color]="draftCustomizationOptions.buttons.darkBackground.borderColor" (colorChange)=
-                    " draftCustomizationOptions.buttons.darkBackground.borderColor = $event; buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);"
-                         label="Border Color"
-                         [addMargin]="true"
-                  ></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
-                  <color [color]="draftCustomizationOptions.buttons.darkBackground.onHover.color" (colorChange)=
-                    " draftCustomizationOptions.buttons.darkBackground.onHover.color = $event;" label="Fonts Color"
-                  ></color>
-                  <color [color]="draftCustomizationOptions.buttons.darkBackground.onHover.backgroundColor"
-                         (colorChange)=
-                           " draftCustomizationOptions.buttons.darkBackground.onHover.backgroundColor = $event;"
-                         label="Background Color" [addMargin]="true"></color>
-                  <color [color]="draftCustomizationOptions.buttons.darkBackground.onHover.borderColor" (colorChange)=
-                    " draftCustomizationOptions.buttons.darkBackground.onHover.borderColor = $event;"
-                         label="Border Color" [addMargin]="true"></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                    <span class="uk-icon uk-link " (click)="resetButtonsDark();">
-                    <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                         data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                                  d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                      fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-                    </span>
-                  </div>
-                  <div class="uk-background-primary uk-padding-small uk-text-center">
-                    <a class="uk-button" [style]="buttonDarkBackgroundPreview"
-                       (mouseover)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground.onHover, draftCustomizationOptions.buttons.darkBackground);"
-                       (mouseout)="buttonDarkBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.darkBackground);">Button</a>
-                  </div>
-                  <!--                  style="{color:green;} :hover { color: red; }"-->
-                </li>
-                <li>
-                  <border [style]="draftCustomizationOptions.buttons.lightBackground.borderStyle" [width]=
-                    "draftCustomizationOptions.buttons.lightBackground.borderWidth" [radius]=
-                            "draftCustomizationOptions.buttons.lightBackground.borderRadius" (borderChange)=
-                            " draftCustomizationOptions.buttons.lightBackground.borderStyle = $event.style;
-                    draftCustomizationOptions.buttons.lightBackground.borderRadius = $event.radius;
-                    draftCustomizationOptions.buttons.lightBackground.borderWidth = $event.width;
-                    buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground); "></border>
-                  <color [color]="draftCustomizationOptions.buttons.lightBackground.color" (colorChange)=
-                    " draftCustomizationOptions.buttons.lightBackground.color = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
-                         label="Fonts Color"
-                         [addMargin]="true"></color>
-                  <color [color]="draftCustomizationOptions.buttons.lightBackground.backgroundColor" (colorChange)=
-                    " draftCustomizationOptions.buttons.lightBackground.backgroundColor = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
-                         label="Background Color" [addMargin]="true"></color>
-                  <color [color]="draftCustomizationOptions.buttons.lightBackground.borderColor" (colorChange)=
-                    " draftCustomizationOptions.buttons.lightBackground.borderColor = $event; buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);"
-                         label="Border Color"
-                         [addMargin]="true"
-                  ></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">ON HOVER</div>
-                  <color [color]="draftCustomizationOptions.buttons.lightBackground.onHover.color" (colorChange)=
-                    " draftCustomizationOptions.buttons.lightBackground.onHover.color = $event; " label="Fonts Color"
-                  ></color>
-                  <color [color]="draftCustomizationOptions.buttons.lightBackground.onHover.backgroundColor"
-                         (colorChange)=
-                           " draftCustomizationOptions.buttons.lightBackground.onHover.backgroundColor = $event;"
-                         label="Background Color" [addMargin]="true"></color>
-                  <color [color]="draftCustomizationOptions.buttons.lightBackground.onHover.borderColor"
-                         (colorChange)=
-                           " draftCustomizationOptions.buttons.lightBackground.onHover.borderColor = $event;"
-                         label="Border Color" [addMargin]="true"></color>
-                  <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">QUICK LOOK
-                    <span class="uk-icon uk-link " (click)="resetButtonsLight();">
-                    <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                         data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
-                                                  d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
-                      fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
-                    </span>
-                  </div>
-                  <div class=" uk-padding-small uk-text-center">
-                    <a class="uk-button" [style]="buttonLightBackgroundPreview"
-                       (mouseover)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground.onHover, draftCustomizationOptions.buttons.lightBackground);"
-                       (mouseout)="buttonLightBackgroundPreview=changeStyle(draftCustomizationOptions.buttons.lightBackground);">
-                      Button</a>
-                  </div>
-                </li>
-              </ul>
-            </div>
-          </li>
-        </ul>
-      </div>
-
-
-    </div>
-    <div *ngIf="successfulSaveMessage.length > 0" class="uk-alert uk-alert-primary">{{successfulSaveMessage}}</div>
-    <div *ngIf="errorMessage.length > 0" class="uk-alert uk-alert-danger">{{errorMessage}}</div>
-    <button class="uk-button  uk-margin uk-button-primary uk-button-small uk-align-right"
-            [disabled]="!hasChanges(publishedCustomizationOptions, draftCustomizationOptions)"
-            [title]="(hasChanges(publishedCustomizationOptions, draftCustomizationOptions)?'Save changes':'No changes to save')"
-            (click)="saveLayout()">
-      Publish
-    </button>
   </div>
-  <div class="uk-width-4-5 uk-padding-remove-left">
+  <div inner>
-    <!-- sandbox="allow-scripts allow-same-origin" -->
+<div class="" >
-        <iframe *ngIf="previewUrl" [src]="previewUrl" class="" width="100%" height="100%" ></iframe>
+  <div *ngIf="draftCustomizationOptions" class="uk-card-default uk-card">
+    <div class = "uk-card-header" style="z-index: 2"  uk-sticky="offset:100">
+      <div class = " uk-margin-small-top uk-margin-small-bottom">
+
+        <ng-container
+          *ngTemplateOutlet="applyResetButtons ; context: { }"></ng-container>
+        <div>Customization <span *ngIf="hasChanges(publishedCustomizationOptions, draftCustomizationOptions)">(Unsaved changes)</span></div>
+      </div>
+    </div>
+    <div class="uk-padding">
+    <ul class="uk-tab customTabs admin uk-flex uk-flex-center uk-flex-left@m" uk-tab >
+      <li [class.uk-active]="menuSelected === 'identity'"
+          uk-tooltip="title:<div class='uk-padding-small uk-width-large'><b>Identity colors</b> are used in several places in your community Dashboard and they are the default colors used for the backgrounds and buttons.</div>"
+      ><a
+        (click)="menuSelected = 'identity'" ><span class="title">Identity</span></a></li>
+      <li [class.uk-active]="menuSelected === 'backgrounds'"><a (click)="menuSelected = 'backgrounds'"><span
+        class="title">Backgrounds & buttons
+      </span></a></li>
+
+    </ul>
+
+    <div *ngIf="menuSelected == 'backgrounds'" class=" uk-padding-small ">
+      <div class="customizationMenuItems uk-margin-small">
+        <div class="uk-grid">
+          <div class="uk-width-2-3@m uk-width-1-1@s">
+            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold"> Quick look
+              <!--<span class="uk-icon uk-link " (click)="resetBackgrounds()">
+              <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
+                   data-svg="refresh"><path fill="none" stroke="#000" stroke-width="1.1"
+                                            d="M17.08,11.15 C17.09,11.31 17.1,11.47 17.1,11.64 C17.1,15.53 13.94,18.69 10.05,18.69 C6.16,18.68 3,15.53 3,11.63 C3,7.74 6.16,4.58 10.05,4.58 C10.9,4.58 11.71,4.73 12.46,5"></path><polyline
+                fill="none" stroke="#000" points="9.9 2 12.79 4.89 9.79 7.9"></polyline></svg>
+            </span>-->
+            </div>
+            <quick-look-backgrounds [darkBackgroundColor]="draftCustomizationOptions.backgrounds.dark.color "
+                                    [lightBackgroundColor]="draftCustomizationOptions.backgrounds.light.color "
+                                    [primaryColor]="draftCustomizationOptions.identity.mainColor"
+                                    [secondaryColor]="draftCustomizationOptions.identity.secondaryColor"
+                                    [buttonsOnDark]="draftCustomizationOptions.buttons.darkBackground"
+                                    [buttonsOnLight]="draftCustomizationOptions.buttons.lightBackground"
+            ></quick-look-backgrounds>
+
+          </div>
+          <div class="uk-width-1-3@m uk-width-1-1@s">
+
+            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold" >Backgrounds & Buttons
+              <a *ngIf="(hasChanges(publishedCustomizationOptions.backgrounds, draftCustomizationOptions.backgrounds)
+              || hasChanges(publishedCustomizationOptions.buttons, draftCustomizationOptions.buttons) )
+              && draftCustomizationOptions.backgroundsAndButtonsIsCustom"
+                 (click)="resetBackgroundsAndButtonsToPublished();" class="uk-margin-small-left"
+                 uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
+                 >  <icon name="reset"></icon></a>
+            </div>
+
+            <div class="uk-margin-top">
+              <span>Custom style </span>
+              <span >
+              <mat-slide-toggle class="uk-margin-large-left"
+                                [checked]="draftCustomizationOptions.backgroundsAndButtonsIsCustom"
+                                (change)="draftCustomizationOptions.backgroundsAndButtonsIsCustom=!draftCustomizationOptions.backgroundsAndButtonsIsCustom;
+                                draftCustomizationOptions.backgroundsAndButtonsIsCustom?'':this.resetBackgroundsAndButtonsToDefault();  "
+                                [attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
+                    (draftCustomizationOptions.backgroundsAndButtonsIsCustom?'Change to default values produced based on the identity colors':'Customize options for background and buttons')+'</div>'"
+              >
+              </mat-slide-toggle>
+              </span>
+            </div>
+            <div *ngIf="!draftCustomizationOptions.backgroundsAndButtonsIsCustom" class="uk-margin-top uk-text-small"
+                 style="font-style: italic">
+              Backgrounds and buttons are set in the default values.
+            </div>
+
+            <div *ngIf="draftCustomizationOptions.backgroundsAndButtonsIsCustom" class=" uk-margin-large-top">
+              <div class="uk-margin-small-bottom uk-text-uppercase">Background Colors</div>
+              <background label="Dark" [background]="draftCustomizationOptions.backgrounds.dark"
+                          [light]="false"></background>
+              <background label="Light" [background]="draftCustomizationOptions.backgrounds.light"
+                          [light]="true"></background>
+              <background label="Form" [background]="draftCustomizationOptions.backgrounds.form"
+                          [light]="true" [upload]="properties.environment == 'development'"
+                          [oldBackground]="publishedCustomizationOptions.backgrounds.form" [communityId]="communityId"></background>
+
+              <div class="uk-margin-large-top uk-text-uppercase">Buttons </div>
+              <ul   class="uk-tab" uk-switcher>
+                <li><a href="#">On dark background</a></li>
+                <li><a href="#">On light background</a></li>
+              </ul>
+              <ul class="uk-switcher uk-margin">
+                <li>
+                  <customize-buttons
+                    [buttons]="draftCustomizationOptions.buttons.darkBackground"  [light]="true"
+                  ></customize-buttons>
+                </li>
+                <li>
+                  <customize-buttons
+                    [buttons]="draftCustomizationOptions.buttons.lightBackground"  [light]="false"
+                  ></customize-buttons>
+                </li>
+              </ul>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+    </div>
+
+
+    <div *ngIf="menuSelected == 'identity'" class=" uk-padding-small ">
+      <div class=" customizationMenuItems uk-margin-small">
+
+        <div class="uk-grid">
+          <div class="uk-width-2-3@m uk-width-1-1@s">
+            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Quick look
+            </div>
+            <div style="border-radius: 6px;" class="uk-alert uk-padding-small">
+              <quick-look [primaryColor]="draftCustomizationOptions.identity.mainColor"
+                          [secondaryColor]="draftCustomizationOptions.identity.secondaryColor" preview="identity"></quick-look>
+            </div>
+          </div>
+          <div class="uk-width-1-3@m uk-width-1-1@s">
+
+            <div class="uk-margin-top uk-margin-small-bottom uk-text-bold" > Identity
+              <a *ngIf="hasChanges(publishedCustomizationOptions.identity, draftCustomizationOptions.identity) &&
+              draftCustomizationOptions.identityIsCustom" class="uk-margin-small-left"
+                 uk-tooltip="title:<div class='uk-padding-small uk-width-large'>Reset to previously saved options</div>"
+               (click)="resetIdentityToPublished();">  <icon name="reset"></icon></a></div>
+
+            <div class="uk-margin-top">
+              <div class="">
+                <span>Custom style</span>
+                <mat-slide-toggle class="uk-margin-large-left"
+                                  [checked]="draftCustomizationOptions.identityIsCustom"
+                                  (change)="draftCustomizationOptions.identityIsCustom =
+                                  !draftCustomizationOptions.identityIsCustom;
+                                  draftCustomizationOptions.identityIsCustom?'':this.resetIdentityToDefault();"
+                                  [attr.uk-tooltip]="'title:<div class=\'uk-padding-small uk-width-large\'>' +
+                  (draftCustomizationOptions.identityIsCustom?'Change to default identity values':'Customize identity colors')+'</div>'"
+                                  >
+                </mat-slide-toggle>
+              </div>
+              <div *ngIf="!draftCustomizationOptions.identityIsCustom" class="uk-margin-top uk-text-small"
+                   style="font-style: italic">
+                Identity is set in the default values.
+              </div>
+            </div>
+            <div *ngIf="draftCustomizationOptions.identityIsCustom" class=" uk-margin-large-top">
+              <div class=" uk-margin-small-bottom uk-text-uppercase uk-margin-small-left">Colors</div>
+              <color [color]="draftCustomizationOptions.identity.mainColor" [light]="false" (colorChange)=
+                " draftCustomizationOptions.identity.mainColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()"
+                     label="Primary"></color>
+              <color [color]="draftCustomizationOptions.identity.secondaryColor" [light]="false" (colorChange)=
+                " draftCustomizationOptions.identity.secondaryColor= $event; updateBackgroundsAndButtonsBasedOnIdentity()" label="Secondary"></color>
+            </div>
+
+          </div>
+
+      </div>
+
+
+      </div>
+    </div>
+
+    <div class=" uk-padding-small ">
+      <div class="uk-margin-top uk-margin-small-bottom uk-text-bold">Preview</div>
+      <div
+           class="uk-margin-medium-top uk-position-relative uk-width-1-1 uk-flex uk-flex-center">
+        <div *ngIf="hasChanges(draftCustomizationOptions, appliedCustomizationOptions)"
+             class="  uk-width-1-1  refresh-indicator"  >
+          <div class="uk-position-relative uk-height-1-1">
+            <div class="uk-position-center uk-text-center clickable uk-h3" style="color:white"
+                 (click)="applyLayout()">
+              <div>
+                <icon name="refresh" ratio="2.5"></icon>
+              </div>
+              <div class="uk-margin-medium-top">Style has been changed.</div>
+              <div class="uk-margin-top"> Click to refresh the view.</div>
+            </div>
+          </div>
+        </div>
+        <iframe *ngIf="previewUrl" [src]="previewUrl" class="uk-width-1-1 "
+        ></iframe>
+
+      </div>
+
+    </div>
+    </div>
   </div>
 
 </div>
-<modal-alert #backAlert (alertOutput)="resetToAppliedOptions()">
+  </div>
-  <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
+</div>
-  <div> Are you sure that you want to proceed?</div>
-</modal-alert>
 
-<modal-alert #exitAlert (alertOutput)="exitCustomization()">
-  <div class="uk-text-bold uk-h5">If you leave that Page without applying or publishing, changes will be lost.</div>
-  <div> Are you sure that you want to proceed?</div>
-</modal-alert>
 

src/app/pages/customization/customization.component.ts

@@ -1,83 +1,109 @@
-import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
+import {Component, ElementRef, OnInit} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 
 import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
 
 import {Session} from '../../openaireLibrary/login/utils/helper.class';
 import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
-import {Curator} from '../../openaireLibrary/utils/entities/CuratorInfo';
 import {DomSanitizer, Title} from '@angular/platform-browser';
-import {CustomizationOptions} from '../../openaireLibrary/connect/community/CustomizationOptions';
+import {CustomizationOptions, Layout} from '../../openaireLibrary/connect/community/CustomizationOptions';
 import {StringUtils} from '../../openaireLibrary/utils/string-utils.class';
 import {LayoutService} from '../../openaireLibrary/services/layout.service';
-import {AlertModal} from '../../openaireLibrary/utils/modal/alert';
+import {properties} from '../../../environments/environment';
+import {UtilitiesService} from '../../openaireLibrary/services/utilities.service';
+import {Subscription} from 'rxjs';
+
+declare var UIkit;
 
 @Component({
   selector: 'customization',
   templateUrl: './customization.component.html',
+  styles:[`
+  .refresh-indicator {
+    background-color: rgba(0, 0, 0, 0.50);
+    border-radius: 4px;
+    position: absolute;
+    color: white;
+  }
+  iframe, .refresh-indicator{
+      height:900px;
+  }
+  `]
 })
 
 export class CustomizationComponent implements OnInit {
 
-  menuSelected = 'main';
+  menuSelected = 'identity';
   color = 'white';
+  defaultCustomizationOptions:CustomizationOptions = new CustomizationOptions();
+  publishedLayout: Layout = null;
   publishedCustomizationOptions: CustomizationOptions = null;
   draftCustomizationOptions: CustomizationOptions = null;
   appliedCustomizationOptions: CustomizationOptions = null;
   previewUrl = null;
   previewCustomization = null;
-  buttonDarkBackgroundPreview;
+
-  buttonLightBackgroundPreview;
+
-  linkDarkBackgroundPreview;
-  linkLightBackgroundPreview;
-  hoveredText;
   public showLoading = true;
-  public errorMessage = '';
-  public successfulSaveMessage = '';
 
 
   public communityId = null;
 
   public properties: EnvProperties = null;
+  private subscriptions: any[] = [];
 
   public enabled = true;
-  @ViewChild('backAlert') backAlert: AlertModal;
-  @ViewChild('exitAlert') exitAlert: AlertModal;
 
   constructor(private element: ElementRef,
               private route: ActivatedRoute,
               private _router: Router,
               private title: Title,
               private sanitizer: DomSanitizer,
-              private layoutService: LayoutService) {
+              private layoutService: LayoutService,
+              private utilsService: UtilitiesService) {
   }
 
+  ngOnDestroy() {
+    this.deleteDraftImages();
 
-  ngOnInit() {
+  }
-    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
+  cleanUp(){
-      this.properties = data.envSpecific;
+    this.subscriptions.forEach(subscription => {
-      if (!Session.isLoggedIn()) {
+      if (subscription instanceof Subscription) {
-        this._router.navigate(['/user-info'], {
+        subscription.unsubscribe();
-          queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
-        });
-      } else {
-        this.route.queryParams.subscribe((params) => {
-          this.communityId = params['communityId'];
-          this.title.setTitle('Administration Dashboard | Customization');
-          this.showLoading = true;
-          this.errorMessage = '';
-          this.successfulSaveMessage = '';
-          this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
-            this.publishedCustomizationOptions = (layout?layout:new CustomizationOptions());
-            this.initializeCustomizationOptions(true);
-          }, error => {
-            this.publishedCustomizationOptions = new CustomizationOptions();
-            this.initializeCustomizationOptions(true);
-            this.errorMessage = "An error occured fetching customizations options"
-          });
-        });
       }
     });
+  }
+  ngOnInit() {
+    this.properties = properties;
+    if (!Session.isLoggedIn()) {
+      this._router.navigate(['/user-info'], {
+        queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
+      });
+    } else {
+      this.subscriptions.push(this.route.params.subscribe((params) => {
+        this.communityId = params['community'];
+        if(this.communityId == "covid-19"){
+          this.defaultCustomizationOptions= new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
+        }
+        this.title.setTitle('Administration Dashboard | Customization');
+        this.showLoading = true;
+        this.subscriptions.push(this.layoutService.getLayout(this.properties, this.communityId).subscribe(layout => {
+         this.publishedLayout = (layout?layout:new Layout(this.communityId,this.defaultCustomizationOptions));
+         this.publishedCustomizationOptions = (layout?CustomizationOptions.checkForObsoleteVersion(layout.layoutOptions,this.communityId):Object.assign({},this.defaultCustomizationOptions));
+         this.initializeCustomizationOptions(true);
+        }, error => {
+          this.publishedCustomizationOptions = new CustomizationOptions(CustomizationOptions.getIdentity(this.communityId).mainColor,CustomizationOptions.getIdentity(this.communityId).secondaryColor);
+          this.initializeCustomizationOptions(true);
+           UIkit.notification("An error occured fetching customizations options", {
+             status: 'danger',
+             timeout: 6000,
+             pos: 'bottom-right'
+           });
+        }));
+      }));
+    }
+
 
   }
   hasChanges(object1,object2):boolean{
@@ -89,28 +115,54 @@ export class CustomizationComponent implements OnInit {
         queryParams: {'errorCode': LoginErrorCodes.NOT_VALID, 'redirectUrl': this._router.url}
       });
     }
-    this.layoutService.saveLayout(this.properties, this.communityId, this.draftCustomizationOptions).subscribe(layout => {
+    this.publishedLayout.layoutOptions = this.draftCustomizationOptions;
-      this.publishedCustomizationOptions = layout;
+    this.subscriptions.push(this.layoutService.saveLayout(this.properties, this.communityId, this.publishedLayout).subscribe(layout => {
+      this.deleteOldImages();
+      this.publishedLayout = layout;
+      this.publishedCustomizationOptions = layout.layoutOptions;
       this.initializeCustomizationOptions(JSON.stringify(this.publishedCustomizationOptions) != this.previewCustomization);
-      this.successfulSaveMessage = "Customization Options saved!"
+      UIkit.notification("Customizations was succesfully saved!", {
+        status: 'success',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
     }, error => {
-      this.errorMessage = "An error occured on save"
-    });
-  }
 
+      UIkit.notification("An error occured on save", {
+        status: 'danger',
+        timeout: 6000,
+        pos: 'bottom-right'
+      });
+    }));
+  }
+  private deleteOldImages( ) {
+    if( this.publishedCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
+       this.deleteImage(this.publishedCustomizationOptions.backgrounds.form.imageFile)
+    }
+  }
+  private deleteDraftImages( ) {
+    console.log("delete drafr images")
+    if( this.draftCustomizationOptions.backgrounds.form.imageFile && this.draftCustomizationOptions.backgrounds.form.imageFile !=this.publishedCustomizationOptions.backgrounds.form.imageFile){
+      this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + this.draftCustomizationOptions.backgrounds.form.imageFile).subscribe(
+        re => {
+          console.log("delete!!!!!!!!")
+          this.cleanUp()
+        }
+      ));
+    }else{
+      this.cleanUp()
+    }
+  }
+  private deleteImage( filename:string) {
+    this.subscriptions.push(this.utilsService.deletePhoto(this.properties.utilsService + '/delete/stakeholder/' + filename).subscribe());
+  }
   initializeCustomizationOptions(updatePreviewUrl) {
     this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
     this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
-
     if(updatePreviewUrl){
       this.previewUrl = this.getCommunityUrlSatinized(JSON.stringify(this.appliedCustomizationOptions));
     }
 
-
-    this.buttonDarkBackgroundPreview = this.changeStyle(this.draftCustomizationOptions.buttons.darkBackground);
-    this.buttonLightBackgroundPreview = this.changeStyle(this.draftCustomizationOptions.buttons.lightBackground);
-    this.linkDarkBackgroundPreview = this.changeFontsStyle(this.draftCustomizationOptions.links.darkBackground, this.draftCustomizationOptions.links.darkBackground.color);
-    this.linkLightBackgroundPreview = this.changeStyle(this.draftCustomizationOptions.links.lightBackground, this.draftCustomizationOptions.links.lightBackground.color);
   }
 
   applyLayout() {
@@ -121,288 +173,68 @@ export class CustomizationComponent implements OnInit {
   }
 
   resetLayout() {
-
-    if (this.menuSelected == 'backgrounds') {
-      this.resetBackgrounds();
-    } else if (this.menuSelected == 'fonts') {
-      this.resetFonts();
-    } else if (this.menuSelected == 'elements') {
-      this.resetElements();
-    } else if (this.menuSelected == 'buttons') {
-      this.resetButtons();
-    } else if (this.menuSelected == 'identity') {
-      this.resetIdentity();
-    } else {
-      this.draftCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
-
-      this.appliedCustomizationOptions = this.copyObject(this.publishedCustomizationOptions);
-    }
-    // console.log(JSON.stringify(this.appliedCustomizationOptions))
-    // console.log(this.previewCustomization)
     this.initializeCustomizationOptions(JSON.stringify(this.appliedCustomizationOptions) != this.previewCustomization);
+  }
+  resetBackgroundsTo(backgrounds) {
+    this.draftCustomizationOptions.backgrounds.dark.color = backgrounds.dark.color;
+    this.draftCustomizationOptions.backgrounds.light.color = backgrounds.light.color;
+    this.draftCustomizationOptions.backgrounds.form.color = backgrounds.form.color;
 
   }
 
-  resetBackgrounds() {
+  resetBackgroundsAndButtonsTo(c:CustomizationOptions){
-    this.draftCustomizationOptions.panel.onDarkBackground = this.publishedCustomizationOptions.panel.onDarkBackground;
+    this.resetBackgroundsTo(c.backgrounds);
-    this.draftCustomizationOptions.panel.background.color = this.publishedCustomizationOptions.panel.background.color;
+    this.resetButtonsTo(c.buttons);
-
+   }
-    this.appliedCustomizationOptions.panel.onDarkBackground = this.publishedCustomizationOptions.panel.onDarkBackground;
+  resetBackgroundsAndButtonsToPublished(){
-    this.appliedCustomizationOptions.panel.background.color = this.publishedCustomizationOptions.panel.background.color;
+    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
+  }
+  resetBackgroundsAndButtonsToDefault(){
+    this.resetBackgroundsAndButtonsTo(this.publishedCustomizationOptions);
+    this.updateBackgroundsAndButtonsBasedOnIdentity();
   }
 
-  resetFonts() {
+  resetButtonsTo(buttonsToRevert) {
-    this.resetFontsBig();
+    this.draftCustomizationOptions.buttons= this.copyObject(buttonsToRevert);
-    this.resetFontsSmall();
-    this.resetFontsLinksDark();
-    this.resetFontsLinksLight();
-
   }
 
-  resetFontsBig() {
+  resetIdentityTo( original:CustomizationOptions) {
-    this.draftCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
+    this.draftCustomizationOptions.identity.mainColor = this.copyObject(original.identity.mainColor);
-
+    this.draftCustomizationOptions.identity.secondaryColor = this.copyObject(original.identity.secondaryColor);
-    this.appliedCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
   }
-
+  resetIdentityToPublished() {
-  resetFontsSmall() {
+    this.resetIdentityTo( this.publishedCustomizationOptions);
-    this.draftCustomizationOptions.panel.fonts = this.copyObject(this.publishedCustomizationOptions.panel.fonts);
+    this.updateBackgroundsAndButtonsBasedOnIdentity()
-
+  }
-    this.appliedCustomizationOptions.panel.fonts = this.copyObject(this.publishedCustomizationOptions.panel.fonts);
+  resetIdentityToDefault() {
-
+    this.resetIdentityTo( this.defaultCustomizationOptions);
+    this.draftCustomizationOptions.identityIsCustom = false;
+    this.updateBackgroundsAndButtonsBasedOnIdentity()
 
   }
-
+  updateBackgroundsAndButtonsBasedOnIdentity(){
-  resetFontsLinksDark() {
+    if(!this.draftCustomizationOptions.backgroundsAndButtonsIsCustom){
-    this.draftCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground);
+      let tmp =   new CustomizationOptions(this.draftCustomizationOptions.identity.mainColor, this.draftCustomizationOptions.identity.secondaryColor);
-
+      this.resetBackgroundsAndButtonsTo(tmp);
-    this.appliedCustomizationOptions.links.darkBackground = this.copyObject(this.publishedCustomizationOptions.links.darkBackground);
-
-    this.linkDarkBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.darkBackground, this.publishedCustomizationOptions.links.darkBackground.color);
-  }
-
-  resetFontsLinksLight() {
-    this.draftCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
-    this.draftCustomizationOptions.links.lightBackground = this.copyObject(this.publishedCustomizationOptions.links.lightBackground);
-
-    this.appliedCustomizationOptions.panel.title = this.copyObject(this.publishedCustomizationOptions.panel.title);
-    this.appliedCustomizationOptions.links.lightBackground = this.copyObject(this.publishedCustomizationOptions.links.lightBackground);
-
-    this.linkLightBackgroundPreview=this.changeFontsStyle(this.publishedCustomizationOptions.links.lightBackground, this.publishedCustomizationOptions.links.lightBackground.color);
-  }
-
-  resetElements() {
-    this.draftCustomizationOptions.panel.panelElements = this.copyObject(this.publishedCustomizationOptions.panel.panelElements);
-
-    this.appliedCustomizationOptions.panel.panelElements = this.copyObject(this.publishedCustomizationOptions.panel.panelElements);
-  }
-
-  resetButtons() {
-    this.resetButtonsDark();
-    this.resetButtonsLight();
-  }
-
-  resetButtonsDark() {
-    this.draftCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground);
-
-    this.appliedCustomizationOptions.buttons.darkBackground = this.copyObject(this.publishedCustomizationOptions.buttons.darkBackground);
-
-    this.buttonDarkBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.darkBackground);
-  }
-
-  resetButtonsLight() {
-    this.draftCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground);
-
-    this.appliedCustomizationOptions.buttons.lightBackground = this.copyObject(this.publishedCustomizationOptions.buttons.lightBackground);
-
-    this.buttonLightBackgroundPreview=this.changeStyle(this.publishedCustomizationOptions.buttons.lightBackground);
-  }
-
-  resetIdentity() {
-    this.draftCustomizationOptions.mainColor = this.publishedCustomizationOptions.mainColor;
-    this.draftCustomizationOptions.secondaryColor = this.publishedCustomizationOptions.secondaryColor;
-
-    this.appliedCustomizationOptions.mainColor = this.publishedCustomizationOptions.mainColor;
-    this.appliedCustomizationOptions.secondaryColor = this.publishedCustomizationOptions.secondaryColor;
-  }
-
-  changeStyle(colorOptions, borderOptions = null) {
-    let style = '';
-    if (!borderOptions) {
-      borderOptions = colorOptions;
     }
-    if (colorOptions.color) {
-      style = style.concat('; color:' + colorOptions.color);
-    }
-    if (colorOptions.backgroundColor) {
-      style = style.concat( '; background-color:' + colorOptions.backgroundColor);
-    }
-    if (colorOptions.borderColor) {
-      style = style.concat('; border-color:' + colorOptions.borderColor);
-    }
-    if (borderOptions.borderStyle) {
-      style = style.concat('; border-style:' + borderOptions.borderStyle);
-    }
-    if (borderOptions.borderWidth) {
-      style = style.concat( '; border-width:' + borderOptions.borderWidth + 'px');
-    }
-    if (borderOptions.borderRadius) {
-      style = style.concat('; border-radius:' + borderOptions.borderRadius + 'px');
-    }
-
-    return this.sanitizer.bypassSecurityTrustStyle(style);
   }
-
-
-  changeFontsStyle(options, color = null) {
-    let style = '';
-
-
-    if (options.family) {
-      style = style.concat('; font-family:' + options.family);
-    }
-
-    if (options.size) {
-      style = style.concat('; font-size:' + options.size + 'px');
-    }
-
-    if (options.weight) {
-      style = style.concat('; font-weight:' + options.weight);
-    }
-
-    if (color) {
-      style = style.concat('; color:' + color);
-    }
-
-    return this.sanitizer.bypassSecurityTrustStyle(style);
-  }
-
   getCommunityUrlSatinized(layout: string) {
     return this.sanitizer.bypassSecurityTrustResourceUrl(this.getCommunityUrlNewLayout(layout));
   }
   getCommunityUrl() {
+/*    if(this.properties.environment == "development") {
+      return 'http://spitoo.di.uoa.gr:4200';
+    }*/
     return 'https://'+ (this.properties.environment == 'production'?'':'beta.')+this.communityId+'.openaire.eu';
   }
 
   getCommunityUrlNewLayout(layout: string) {
     this.previewCustomization = layout;
-      return this.getCommunityUrl()+'/?' + 'layout=' + StringUtils.URIEncode(layout);
+      return this.getCommunityUrl()+'/preview/?' + 'layout=' + StringUtils.URIEncode(layout);
   }
 
   copyObject(obj) {
     return JSON.parse(JSON.stringify(obj));
   }
 
-  back() {
-    if (JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions) ||
-      JSON.stringify(this.draftCustomizationOptions) == JSON.stringify(this.appliedCustomizationOptions)) {
-      this.menuSelected = 'main';
-    } else {
-      this.backAlert.okButtonText = 'Yes';
-      this.backAlert.cancelButtonText = 'No';
-      this.backAlert.alertTitle = '';
-      this.backAlert.okButtonLeft = true;
-      this.backAlert.open();
-    }
-
-  }
-
-  resetToAppliedOptions() {
-    this.draftCustomizationOptions = this.copyObject(this.appliedCustomizationOptions);
-    this.menuSelected = 'main';
-  }
-
-  exit() {
-    if (JSON.stringify(this.appliedCustomizationOptions) == JSON.stringify(this.publishedCustomizationOptions)) {
-      this.exitCustomization();
-    } else {
-      this.exitAlert.okButtonText = 'Yes';
-      this.exitAlert.cancelButtonText = 'No';
-      this.exitAlert.alertTitle = '';
-      this.exitAlert.okButtonLeft = true;
-      this.exitAlert.open();
-    }
-
-  }
-
-  exitCustomization() {
-    this._router.navigate(['/dashboard'], {
-      queryParams: {'communityId': this.communityId}
-    });
-  }
-  downloadCustomization(){
-    this.errorMessage = "";
-    let options= JSON.parse(JSON.stringify(this.publishedCustomizationOptions));
-    delete options['_id'];
-    console.info("Here!" +JSON.stringify(options));
-    if(typeof document !== 'undefined') {
-      let dataStr = JSON.stringify(options);
-      let dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
-
-      let exportFileDefaultName = 'layoutOptions.json';
-
-      let linkElement = document.createElement('a');
-      linkElement.setAttribute('href', dataUri);
-      linkElement.setAttribute('download', exportFileDefaultName);
-      linkElement.click();
-    }
-  }
-  fileChangeEvent(fileInput: any) {
-    this.errorMessage = "";
-     let filesToUpload = <Array<File>>fileInput.target.files;
-
-
-      if (filesToUpload.length == 0) {
-        this.errorMessage = "There is no selected file to upload.";
-        return;
-      } else {
-        if (filesToUpload[0].name.indexOf(".json") == -1 ||
-          (filesToUpload[0].type != "application/json" )) {
-          this.errorMessage = "No valid file type. The required type is json "+filesToUpload[0].type;
-          return;
-        }
-      }
-
-      this.makeFileRequest(this.properties.utilsService + '/upload?type=json', [], filesToUpload).then((result) => {
-       let layout:CustomizationOptions = JSON.parse(result.toString());
-        if( layout && layout.panel && layout.links && layout.buttons && layout.box){
-          this.draftCustomizationOptions = layout;
-          //put the same id to not have any difference
-          if(this.publishedCustomizationOptions['_id']){
-            this.draftCustomizationOptions['_id'] = this.publishedCustomizationOptions['_id'];
-          }
-        }else{
-          this.errorMessage = "No valid file";
-        }
-
-      }, (error) => {
-        this.errorMessage = "No valid file";
-      });
-    }
-
-
-  makeFileRequest(url: string, params: Array<string>, files: Array<File>) {
-    return new Promise((resolve, reject) => {
-      const formData: any = new FormData();
-      const xhr = new XMLHttpRequest();
-      for (let i = 0; i < files.length; i++) {
-        formData.append("uploads[]", files[i], files[i].name);
-      }
-      xhr.onreadystatechange = function () {
-        if (xhr.readyState == 4) {
-          if (xhr.status == 200) {
-            resolve(xhr.response);
-          } else {
-            reject(xhr.response);
-          }
-        }
-      }
-      xhr.open("POST", url, true);
-      xhr.send(formData);
-    });
-  }
-
-
-
-
 }

src/app/pages/customization/customization.module.ts

@@ -12,15 +12,24 @@ import {ColorComponent} from './Color.component';
 import {BorderComponent} from './Border.component';
 import {LayoutService} from '../../openaireLibrary/services/layout.service';
 import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
+import {PageContentModule} from '../../openaireLibrary/dashboard/sharedComponents/page-content/page-content.module';
+import {QuickLookComponent} from './quickLook.component';
+import {QuickLookBackgroundsComponent} from './quickLook-backgrounds.component';
+import {QuickLookButtonsComponent} from './quickLook-buttons.component';
+import {MatFormFieldModule, MatSelectModule, MatSlideToggleModule} from '@angular/material';
+import {CustomizeButtonsComponent} from './customize-buttons.component';
+import {IconsModule} from '../../openaireLibrary/utils/icons/icons.module';
+import {IconsService} from '../../openaireLibrary/utils/icons/icons.service';
+import {refresh, reset} from '../../openaireLibrary/utils/icons/icons';
+import {BackgroundComponent} from './background.component';
+import {InputModule} from '../../openaireLibrary/sharedComponents/input/input.module';
 
-// import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-// import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
 @NgModule({
   imports: [
-    CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule
+    CustomizationRoutingModule, CommonModule, FormsModule, RouterModule, ColorPickerModule, AlertModalModule, PageContentModule, MatFormFieldModule, MatSelectModule, MatSlideToggleModule, IconsModule, InputModule
   ],
   declarations: [
-    CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent
+    CustomizationComponent, FontSizeComponent, ColorComponent, BorderComponent, QuickLookComponent, QuickLookBackgroundsComponent, QuickLookButtonsComponent, CustomizeButtonsComponent, BackgroundComponent
   ],
   providers: [
     LayoutService
@@ -30,4 +39,7 @@ import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.mod
   ]
 })
 export class CustomizationModule {
+  constructor(private iconsService: IconsService) {
+    this.iconsService.registerIcons([reset, refresh]);
+  }
 }

src/app/pages/customization/customize-buttons.component.ts

@@ -0,0 +1,62 @@
+import {Component, Input} from '@angular/core';
+import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';
+
+
+@Component({
+  selector: 'customize-buttons',
+  template: `
+ 
+      <div class="">
+        <border [style]="buttons.borderStyle" [width]=
+          "buttons.borderWidth" [radius]=
+                  "buttons.borderRadius" (borderChange)=
+                  " buttons.borderStyle = $event.style;
+                        buttons.borderRadius = $event.radius;
+                        buttons.borderWidth = $event.width; "></border>
+        <div class="uk-grid uk-child-width-1-2 uk-margin-top" >
+          <div class="">
+            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors</div>
+            <color [color]="buttons.color" (colorChange)=
+              " buttons.color = $event; "
+                   label="Fonts"  [light]="!light"
+                   ></color>
+            <color [color]="buttons.backgroundColor" (colorChange)=
+              " buttons.backgroundColor = $event; " [light]="light"
+                   label="Background" ></color>
+            <color [color]="buttons.borderColor" (colorChange)=
+              " buttons.borderColor = $event; " [light]="light"
+                   label="Border"
+                   
+            ></color>
+          </div>
+          <div>
+            <div class=" uk-margin-small-bottom uk-text-bold uk-margin-small-left">Colors on hover</div>
+            <div class="">
+            <color [color]="buttons.onHover.color" (colorChange)=
+              " buttons.onHover.color = $event;" label="Fonts" [light]="!light"
+            ></color>
+            <color [color]="buttons.onHover.backgroundColor"
+                   (colorChange)=
+                     " buttons.onHover.backgroundColor = $event;" [light]="light"
+                   label="Background" ></color>
+            <color [color]="buttons.onHover.borderColor" (colorChange)=
+              " buttons.onHover.borderColor = $event;" [light]="light"
+                   label="Border" ></color>
+            </div>
+              </div>
+          </div>
+      </div>
+     
+      
+`,
+  styles:[` `]
+
+})
+
+export class CustomizeButtonsComponent {
+  @Input() buttons:ButtonsCustomization;
+  @Input() light:boolean;
+  constructor() {
+  }
+
+}

src/app/pages/customization/quickLook-backgrounds.component.ts

@@ -0,0 +1,63 @@
+import {Component, HostBinding, Input} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';
+
+
+@Component({
+  selector: 'quick-look-backgrounds',
+  template: `
+    <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Dark background</div>
+
+    <div class="uk-padding-small uk-text-center darkBackground uk-height-medium uk-light uk-flex uk-flex-center uk-flex-middle"  >
+      <div>
+        <h1 >Heading</h1>
+        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
+        <a class="">Link</a>
+        <quick-look-buttons
+           [buttons]="buttonsOnDark"  
+        ></quick-look-buttons>
+      </div>
+    </div>
+    
+    <div class="uk-margin-top">
+
+      <div class="uk-margin-top uk-margin-small-bottom uk-text-bold uk-text-large">Light background</div>
+      <div class="uk-padding-small uk-text-center  uk-width-1-1 uk-height-medium lightBackground uk-flex uk-flex-center uk-flex-middle" >
+        <div>
+          <h1 >Heading</h1>
+          <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent mollis velit ornare, auctor lectus at, rutrum magna. Aenean vehicula elementum lacinia.</div>
+          <a class="portal-link">Link</a>
+          <br>
+          <quick-look-buttons
+            [buttons]="buttonsOnLight" ></quick-look-buttons>
+        </div>
+      </div>
+    </div>
+  `,
+  styles:[`
+    .darkBackground{
+        background-color: var(--background-dark-color);
+    }
+    .lightBackground{
+        background-color: var(--background-low-color);
+    } 
+  `]
+
+})
+
+export class QuickLookBackgroundsComponent {
+  @Input() primaryColor;
+  @Input() secondaryColor;
+  @Input() darkBackgroundColor;
+  @Input() lightBackgroundColor;
+  @Input() buttonsOnDark:ButtonsCustomization;
+  @Input() buttonsOnLight:ButtonsCustomization;
+  constructor(   private sanitizer: DomSanitizer) {
+  }
+
+  @HostBinding("attr.style")
+  public get valueAsStyle(): any {
+    return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor};  --portal-dark-color: ${this.secondaryColor};  
+    --background-dark-color: ${this.darkBackgroundColor};    --background-low-color: ${this.lightBackgroundColor};`);
+  }
+}

src/app/pages/customization/quickLook-buttons.component.ts

@@ -0,0 +1,58 @@
+import {Component, HostBinding, Input} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+import {ButtonsCustomization} from '../../openaireLibrary/connect/community/CustomizationOptions';
+
+
+@Component({
+  selector: 'quick-look-buttons',
+  template: `
+     
+    <div>
+      <a class="uk-button preview-button" >Button</a>
+    </div>
+    
+       
+`,
+  styles:[`
+ .preview-button {
+     color: var(--color);
+     background-color: var(--background-color);
+     border-color: var(--border-color);
+     border-style: var(--border-style);
+     border-width: var(--border-width);
+     border-radius: var(--border-radius);
+ }
+ .preview-button:hover {
+     color: var(--color-hover);
+     background-color: var(--background-color-hover);
+     border-color: var(--border-color-hover);
+ 
+ }
+ 
+  `]
+
+})
+
+export class QuickLookButtonsComponent {
+  @Input() buttons:ButtonsCustomization;
+
+  @HostBinding("attr.style")
+  public get valueAsStyle(): any {
+    return this.sanitizer.bypassSecurityTrustStyle(`
+    --color: ${this.buttons.color};
+    --background-color: ${this.buttons.backgroundColor};
+    --border-color: ${this.buttons.borderColor};
+    --border-style: ${this.buttons.borderStyle};
+    --border-width: ${this.buttons.borderWidth + 'px'};
+    --border-radius: ${this.buttons.borderRadius + 'px'}; 
+     --color-hover: ${this.buttons.onHover.color};
+    --background-color-hover: ${this.buttons.onHover.backgroundColor};
+    --border-color-hover: ${this.buttons.onHover.borderColor};
+    `);
+  }
+  constructor(   private sanitizer: DomSanitizer) {
+  }
+
+
+
+}

src/app/pages/customization/quickLook.component.ts

@@ -0,0 +1,88 @@
+import {Component, HostBinding, Input} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
+
+
+@Component({
+  selector: 'quick-look',
+  template: `
+   <div *ngIf="preview=='identity'">
+    <ul class="uk-pagination uk-flex-center" uk-margin="">
+      <li class="uk-first-column"><a><span class="uk-icon uk-pagination-previous" uk-pagination-previous=""></span></a></li>
+      <li><a >1</a></li>
+      <li><a class="uk-active" >2</a></li>
+      <li><a>3</a></li>
+      <li><a><span
+        class="uk-icon uk-pagination-next" uk-pagination-next=""> </span></a></li>
+    </ul>
+    <hr>
+    <ul class="uk-tab">
+      <li class="uk-active"><a >Active</a></li>
+      <li><a>Item</a></li>
+    </ul>
+    <div class="portal-color">Text in primary
+      color
+    </div>
+    <div class="portal-secondary-color">Text in secondary
+      color
+    </div>
+    <div >
+      <a class="link1">Link 1</a>
+    </div>
+    <div >
+      <a class="portal-link">Link 2</a>
+    </div>
+   </div>
+    
+    
+  `,
+  styles:[`
+      /*Override inside this component*/
+/*      :host {
+          --portal-main-color: #fe3c52;
+          --portal-dark-color: #b40238;
+          --new:#fe3c52;
+ 
+      }*/
+      /*
+      overrides root
+      ::ng-deep :root {
+          --portal-main-color: #fe3c52;
+          --portal-dark-color: #b40238;
+          --new:#fe3c52;      
+      }*/
+   .uk-pagination li a.uk-active{
+       background-color: var(--portal-main-color);
+       color:white;
+   }
+    .uk-pagination li a, .uk-tab li a{
+        text-decoration: none;
+    }
+    a.link1{
+        color: var(--portal-main-color);
+    }
+    a.link1:hover{
+        color: var(--portal-dark-color);
+    }
+    .uk-tab li.uk-active a{
+        color: var(--portal-main-color)  !important;
+        border-color:var(--portal-main-color) !important;
+    }
+ 
+  `]
+
+})
+
+export class QuickLookComponent {
+  @Input() primaryColor;
+  @Input() secondaryColor;
+  @Input() preview :"identity"|"backgrounds"|"buttons" = "identity";
+
+  constructor(   private sanitizer: DomSanitizer) {
+  }
+
+  @HostBinding("attr.style")
+  public get valueAsStyle(): any {
+    return this.sanitizer.bypassSecurityTrustStyle(`--portal-main-color: ${this.primaryColor};  --portal-dark-color: ${this.secondaryColor};`);
+  }
+
+}

src/app/pages/dashboard/dashboard-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {DashboardComponent} from './dashboard.component';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-
-@NgModule({
-  imports: [
-    RouterModule.forChild([
-      { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: DashboardComponent}
-    ])
-  ]
-})
-export class DashboardRoutingModule { }

src/app/pages/dashboard/dashboard.component.html

@@ -1,117 +0,0 @@
-<div id="dashboard" class="uk-margin-large-bottom">
-    <div id="content">
-
-        <div class="content-wrapper">
-            <div class="uk-child-width-1-3@m uk-grid-small uk-grid-margin uk-margin-top" uk-grid="" uk-height-match=".target">
-                  <div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
-                    <h4 class="uk-card-title">
-                        <span class="uk-margin-small-right uk-icon" uk-icon="album"></span>
-                        Profile
-                    </h4>
-                    <div class="target uk-margin">
-                      Edit community information, change logo url, add community managers or organizations related to
-                      community <span *ngIf="properties.environment == 'development'"> and customize css layout</span>.
-                    </div>
-                    <div>
-                      <a routerLink="/community-edit-form"  [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Community Profile</a><br>
-                      <a routerLink="/organizations"  [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Organizations</a><br>
-                      <!--<a routerLink="/customize-layout"
-                         [queryParams]="{communityId: this.communityId}"
-                          class="uk-button uk-button-text">Customize Layout</a>-->
-                    </div>
-                  </div>
-                  <div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
-                      <h4 class="uk-card-title">
-                        <span class="uk-margin-small-right uk-icon" uk-icon="list"></span>
-                        Content
-                      </h4>
-                      <div class="target uk-margin">
-                        Manage projects, content providers{{(communityType && communityType != 'ri')?', subjects':''}} and zenodo communities that are related to the research community.
-                      </div>
-                      <div>
-                        <a routerLink="/manage-projects" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Projects</a> <br>
-                        <a routerLink="/manage-content-providers" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Content providers</a> <br>
-                        <a routerLink="/manage-zenodo-communities" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Zenodo communities</a> <br>
-                        <a *ngIf="communityType && communityType != 'ri'" routerLink="/manage-subjects" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Subjects</a> <br>
-                      </div>
-                    </div>
-                  <div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
-                    <h4 class="uk-card-title">
-                      <span class="uk-margin-small-right uk-icon" uk-icon="image"></span>
-                      Statistics &amp; Charts
-                    </h4>
-                    <div class="target uk-margin">
-                      Manage statistical numbers & charts that will be displayed in the community overview and graph analysis views.
-                    </div>
-                    <div>
-                      <a routerLink="/stats"  [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Statistics &amp; charts</a>
-                    </div>
-                  </div>
-                <div *ngIf="communityId != 'openaire' && this.communityId !== 'connect'" class="uk-card uk-card-default uk-card-body uk-card-hover">
-                  <h4 class="uk-card-title">
-                      <span class="uk-margin-small-right uk-icon" uk-icon="link"></span>
-                      Links
-                  </h4>
-                  <div class="target uk-margin">
-                      Manage user claims related to the research community.
-                  </div>
-                  <div>
-                    <a routerLink="/claims"  [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Links</a>
-                  </div>
-                </div>
-                <div class="uk-card uk-card-default uk-card-body uk-card-hover">
-                  <h4 class="uk-card-title">
-                    <span class="uk-margin-small-right uk-icon" uk-icon="file-edit"></span>
-                    Help texts
-                  </h4>
-                  <div class="target uk-margin">
-                     Add or edit help text in research community pages.
-                  </div>
-                  <div>
-                    <a routerLink="/pageContents" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Help texts in pages</a><br>
-                    <a *ngIf="communityId === 'openaire' || communityId === 'connect'"
-                       routerLink="/classContents" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Help texts in classes</a>
-                  </div>
-                  </div>
-                <div   *ngIf="communityType && communityType == 'ri' && communityId!='openaire' && this.communityId !== 'connect'"  class="uk-card uk-card-default uk-card-body uk-card-hover">
-                  <h4 class="uk-card-title">
-                      <span class="uk-margin-small-right uk-icon" uk-icon="settings"></span>
-                      Text mining rules
-                  </h4>
-                  <div class="target uk-margin">
-                     Manage text mining rules, test the rules and see the results, save and load mining profiles.
-                  </div>
-                  <div>
-                    <a routerLink="/mining/manage-profiles"  [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">Text mining rules</a>
-                  </div>
-                </div>
-                <div   *ngIf="communityId!='openaire' && this.communityId !== 'connect'"  class="uk-card uk-card-default uk-card-body uk-card-hover">
-                  <h4 class="uk-card-title">
-                    <span class="uk-margin-small-right uk-icon" uk-icon="user"></span>
-                    Users
-                  </h4>
-                  <div class="target uk-margin">
-                    Invite more users to subscribe, manage community subscribers, your personal info and notification settings.
-                  </div>
-                  <div>
-                     <a [href]="'https://beta.'+this.communityId+'.openaire.eu/invite'" target="_blank" class="uk-button uk-button-text">
-                       <span>Invite to subscribe </span>
-                     </a>
-                     <br>
-                     <a routerLink="/manage-subscribers" routerLinkActive="active" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">
-                         <span>Subscribers</span>
-                     </a>
-                     <br>
-                     <a routerLink="/personal" routerLinkActive="active" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">
-                       <span>Personal Info </span>
-                     </a>
-                     <br>
-                     <a routerLink="/manage-user-notifications" routerLinkActive="active" [queryParams]="{communityId: this.communityId}" class="uk-button uk-button-text">
-                         <span>Notification settings </span>
-                     </a>
-                  </div>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>

src/app/pages/dashboard/dashboard.component.ts

@@ -1,48 +0,0 @@
-/**
- * Created by stefania on 3/21/16.
- */
-
-import {Component, ElementRef, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
-import {CommunityService} from '../../openaireLibrary/connect/community/community.service';
-import {EnvProperties} from '../../openaireLibrary/utils/properties/env-properties';
-import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
-import {Title} from '@angular/platform-browser';
-import {ConnectHelper} from "../../openaireLibrary/connect/connectHelper";
-
-@Component({
-    selector: 'dashboard',
-    templateUrl: 'dashboard.component.html',
-})
-export class DashboardComponent implements OnInit {
-  communityId: string = null;
-  communityType = null;
-  properties: EnvProperties;
-
-  constructor( private element: ElementRef,
-               private  route: ActivatedRoute,
-               private title: Title,
-               private _communityService: CommunityService) {}
-
-  ngOnInit() {
-    this.route.data.subscribe((data: { envSpecific: EnvProperties }) => {
-        this.title.setTitle('Administration Dashboard | Overview');
-        this.properties = data.envSpecific;
-        this.route.queryParams.subscribe(data => {
-          HelperFunctions.scroll();
-          this.communityId = ((data['communityId']) ? data['communityId'] : data['community']);
-          ConnectHelper.setPortalTypeFromPid(this.communityId);
-
-          this._communityService.getCommunity(this.properties, this.properties.communityAPI + this.communityId).subscribe (
-            community => {
-                this.communityType = community.type;
-            },
-            error => {
-              console.error('Server responded: ' + error);
-            }
-          );
-        });
-    });
-
-  }
-}

src/app/pages/dashboard/dashboard.module.ts

@@ -1,17 +0,0 @@
-import { NgModule } from '@angular/core';
-import {DashboardRoutingModule} from './dashboard-routing.module';
-import {RouterModule} from '@angular/router';
-import {DashboardComponent} from './dashboard.component';
-import {CommonModule} from '@angular/common';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-
-@NgModule({
-  imports: [
-    CommonModule, DashboardRoutingModule, RouterModule
-  ],
-  declarations: [DashboardComponent],
-  providers: [IsCommunity, ConnectAdminLoginGuard],
-  exports: [DashboardComponent]
-})
-export class DashboardModule { }

src/app/pages/divId/divId-form.component.html

@@ -1,68 +0,0 @@
-<form [formGroup]="myForm">
-  <div class="form-group" [ngClass]="{'has-error':!myForm.controls.name.valid && myForm.controls.name.dirty}">
-      <label for="divIdNameTag">*Class Name</label>
-      <input type="text" class="form-control" formControlName="name" id="divIdNameTag" placeholder="Class Name">
-  </div>
-
-  <div [ngClass]="{'has-error':!myForm.controls.portalType.valid && myForm.controls.portalType.dirty}" class="form-group uk-grid-small uk-margin-medium-bottom" uk-grid>
-    <label class="uk-width-1-1 uk-margin-small-bottom">
-      *Class exists in:
-    </label>
-    <label class="uk-width-1-1 radio uk-margin-large-left">
-      <span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE portal</span>
-      <!--        <input tabindex="0" type="checkbox" formControlName="openaire">-->
-      <input type="radio" value="explore" formControlName="portalType">
-    </label>
-    <label class="uk-width-1-1 radio uk-margin-large-left">
-      <span class="uk-margin-small-right" style="font-weight: normal;">OpenAIRE Connect portal</span>
-      <!--        <input tabindex="0" type="checkbox" formControlName="connect">-->
-      <input type="radio" value="connect" formControlName="portalType">
-    </label>
-    <label class="uk-width-1-1 radio uk-margin-large-left">
-      <span class="uk-margin-small-right" style="font-weight: normal;">Communities' Gateway</span>
-      <!--        <input tabindex="0" type="checkbox" formControlName="communities">-->
-      <input type="radio" value="community" formControlName="portalType">
-    </label>
-    <div class="uk-text-small">If portal changes, selected pages will be lost</div>
-  </div>
-
-  <div formArrayName="pages" [class]="(!myForm.controls.portalType.value ? 'uk-disabled' : '') + ' form-group'"
-       [ngClass]="{'has-error':!myForm.controls.pages.valid && myForm.controls.pages.dirty}">
-    <label for="pageNameTag">Page Name (*at least 1)</label>
-    <div id="pageNameTag">
-      <pre class="card card-block card-header"><span *ngFor="let page of myForm.controls.pages.value; let i=index">{{page.name}}<span *ngIf="i<(myForm.controls.pages.value.length-1)">, </span></span></pre>
-
-      <button type="button" class="uk-button-small" (click)="toggle()">Add / Remove pages</button>
-
-      <ng-container *ngIf="!myForm.value.isCollapsed">
-        <div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-        <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
-
-        <!-- <div *ngFor="let page of availablePages">
-          <span>
-            <span *ngIf="indexOfPageInForm(page._id) >= 0" class="activated" >
-                <input (click)="togglePage(false, page)" class="deactivate" src="assets/imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
-            </span>
-            <span *ngIf="indexOfPageInForm(page._id) < 0" class="deactivated" >
-                <input (click)="togglePage(true, page)" class="activate" src="assets/imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
-            </span>
-            {{page.name}}
-          </span>
-        </div> -->
-
-        <div *ngFor="let page of getKeys(allPagesFiltered)">
-            <span>
-              <span *ngIf="allPagesFiltered.get(page)" class="activated" >
-                  <input (click)="togglePage(false, page)" class="deactivate" src="assets/imgs/delete-icon.png" title="Disable" width="20" type="image" height="20">
-              </span>
-              <span *ngIf="!allPagesFiltered.get(page)" class="deactivated" >
-                  <input (click)="togglePage(true, page)" class="activate" src="assets/imgs/add-icon.png" title="Enable" width="20" type="image" height="20">
-              </span>
-              {{page.name}}
-            </span>
-        </div>
-      </ng-container>
-    </div>
-  </div>
-  <input type="hidden" formControlName="_id">
-</form>

src/app/pages/divId/divId-form.component.ts

@@ -1,235 +0,0 @@
-import {Component, OnInit, Input} from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-import {FormGroup, FormArray, FormBuilder, Validators, FormControl} from "@angular/forms";
-import { HelpContentService } from "../../services/help-content.service";
-import { Page } from "../../domain/page";
-import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
-
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
-import {Subscription} from "rxjs";
-
-@Component({
-    selector: 'divId-form',
-    templateUrl: './divId-form.component.html',
-})
-
-export class DivIdFormComponent implements OnInit{
-    @Input('group')
-    myForm: FormGroup;
-    @Input('pageId')
-    pageId: string;
-    @Input('formPages')
-    formPages: Page[] = [];
-
-    public allPages : Page[] = [];
-    public allPagesFiltered: Map<Page, boolean> = new Map<Page, boolean>();
-    private gotPages: boolean = false;
-
-    public properties:EnvProperties = null;
-
-    public showLoading: boolean = false;
-    public errorMessage: string = '';
-    selectedCommunityPid = null;
-
-    private sub: Subscription = null;
-
-    constructor(private route: ActivatedRoute, private _router: Router, public _fb: FormBuilder, private _helpContentService: HelpContentService){}
-
-    ngOnInit(): void {
-      this.route.data
-        .subscribe((data: { envSpecific: EnvProperties }) => {
-           this.properties = data.envSpecific;
-           // this.route.queryParams.subscribe(params => {
-           //   this.selectedCommunityPid = params['communityId'];
-           // });
-         });
-
-      this. sub = this.myForm.get('portalType').valueChanges.subscribe(portalType => {
-        let pages = this.myForm.get('pages').value;
-        //pages = pages.filter(page => page.portalType == portalType);
-        //this.setPages(pages);
-
-        pages.forEach((page, i) => {
-          if(page.portalType != portalType) {
-            this.pages.removeAt(i);
-          }
-        });
-
-        this.allPagesFiltered.clear();
-        this.allPages.filter(page => page.portalType == portalType).forEach(page => {
-          this.allPagesFiltered.set(page, false);
-        })
-        //this.myForm.value.pages = [];
-      });
-    }
-
-    ngOnDestroy() {
-      if(this.sub) {
-        this.sub.unsubscribe();
-      }
-    }
-
-    public getKeys( map) {
-      return Array.from(map.keys());
-    }
-
-    getPages(includedPages: Set<String>) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        this.showLoading = true;
-        this.errorMessage = "";
-
-        this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe(
-          pages => {
-            this.allPages = pages;
-            let self = this;
-            pages = pages.filter(page => page.portalType == self.myForm.get('portalType').value);
-            for(let page of pages) {
-              if(includedPages.has(page._id)) {
-                this.allPagesFiltered.set(page, true);
-              } else {
-                this.allPagesFiltered.set(page, false);
-              }
-            }
-            this.showLoading = false;
-          },
-          error => this.handleError('System error retrieving pages', error)
-        );
-      }
-    }
-
-    public toggle() {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        this.myForm.value.isCollapsed = !this.myForm.value.isCollapsed;
-  ///////
-        if(!this.myForm.value.isCollapsed) {
-          let includedPages: Set<String> = new Set<String>();
-          for(let pageName of this.myForm.value.pages) {
-            includedPages.add(pageName._id);
-          }
-
-          let allPages = this.allPagesFiltered;
-
-          let self = this;
-          allPages.forEach(function (status, page, map) {
-            if(includedPages.has(page._id)) {
-              self.allPagesFiltered.set(page, true);
-            } else {
-              self.allPagesFiltered.set(page, false);
-            }
-          });
-
-
-          if(!this.gotPages) {
-            this.gotPages = true;
-            this.getPages(includedPages);
-          }
-        }
-      }
-/////
-    }
-
-    public get form() {
-      return this._fb.group({
-        _id: '',
-        name : ['', Validators.required],
-        pages: this._fb.array([], Validators.required),
-        portalType: ['', Validators.required],
-        isCollapsed: [true]
-      });
-    }
-
-    public reset() {
-      this.myForm.patchValue({
-        _id : '',
-        name : '',
-        portalType: '',
-        pages: [],
-        isCollapsed: [true]
-      });
-
-      this.formPages = [];
-    }
-
-    public get pages(): FormArray {
-      return this.myForm.get('pages') as FormArray;
-    };
-
-    setPages(pages: Page[]) {
-      //const pageFormArray = this._fb.array(pages);
-      //this.myForm.setControl('pages', pageFormArray);
-
-      //const pageFGs = pages.map(page => this._fb.group(page));
-      //if(pages && pages.length > 0) {
-      //   const pageCtrls = pages.map(page => this._fb.control(page));
-      //   const pageFormArray = this._fb.array(pageCtrls);
-      //   this.myForm.setControl('pages', pageFormArray);
-      //}
-
-      while (this.pages.length !== 0) {
-        this.pages.removeAt(0)
-      }
-      pages.forEach(page => {
-        //array.push(new FormControl(page));
-        this.pages.push(this._fb.control(page));
-      });
-    }
-
-    indexOfPageInForm(pageId: string): number {
-      let index: number = -1;
-      for(let i=0; i<this.formPages.length; i++) {
-        if(this.formPages[i]._id == pageId) {
-          index = i;
-          break;
-        }
-      }
-      return index;
-    }
-
-    public togglePage(status : boolean, page: Page) {
-      /*let index: number = this.indexOfPageInForm(page._id);
-
-      if(status && index<0) {
-        this.formPages.push(page);
-        this.myForm.value.pages.push(page._id);
-      } else if(!status){
-        if(index >= 0) {
-          this.formPages.splice(index, 1);
-          this.myForm.value.pages.splice(index, 1);
-        }
-      }*/
-
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        let index: number = -1;
-        for(let i=0; i<this.myForm.get('pages').value.length; i++) {
-          if(this.myForm.get('pages').value[i]._id == page._id) {
-            index = i;
-            break;
-          }
-        }
-
-        this.allPagesFiltered.set(page, status);
-
-        if(status && index<0) {
-          this.pages.push(this._fb.control(page));
-        } else  if(!status){
-          if(index >= 0) {
-            this.pages.removeAt(index);
-          }
-        }
-      }
-    }
-
-    handleError(message: string, error) {
-        this.errorMessage = message;
-        console.log('Server responded: ' + error);
-
-        this.showLoading = false;
-    }
-}

src/app/pages/divId/divIds-routing.module.ts

@@ -1,13 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {DivIdsComponent} from './divIds.component';
-import {AdminLoginGuard} from "../../openaireLibrary/login/adminLoginGuard.guard";
-
-@NgModule({
-    imports: [
-        RouterModule.forChild([
-            { path: '', canActivate: [AdminLoginGuard], component: DivIdsComponent}
-        ])
-    ]
-})
-export class DivIdsRoutingModule { }

src/app/pages/divId/divIds.component.html

@@ -1,131 +0,0 @@
-<div id="divIds">
-        <div class="menubar ">
-            <div class="divId-title uk-text-large">Predefined classes for contents</div>
-            <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
-              <a class="uk-alert-close" uk-close></a>
-              {{updateErrorMessage}}
-            </div>
-            <form target="BSFormPanel_Admin_1" class="search">
-                <!-- <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Class name..." type="text" class="uk-input uk-width-medium"/>
-                <button class="uk-button" type="submit">Search</button> -->
-                <input type="text" class="uk-input uk-width-medium" placeholder="Class name, portal type..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword" >
-                <button (click)="filterBySearch(keyword)"  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>
-            </form>
-            <!-- <a (click)="showModal()" class="uk-button uk-button-primary uk-float-right"><i></i> New Class </a> -->
-        </div>
-
-        <div class="content-wrapper" id="contentWrapper">
-            <div>
-                <div class="contentPanel">
-                    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top" role="alert">{{errorMessage}}</div>
-                    <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
-
-                    <div *ngIf="!errorMessage && !showLoading" class="page-controls">
-                        <div class="  filters ">
-                            <div class="show-options uk-float-right">
-                              <button class="uk-button" type="button">Bulk Actions</button>
-                              <div uk-dropdown="mode: click">
-                                <ul class="uk-nav uk-navbar-dropdown-nav"
-                                    [attr.uk-tooltip]="getSelectedDivIds().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-                                    title="Select at least one class">
-                                    <li><a [class]="getSelectedDivIds().length == 0 ? 'uk-disabled' : ''" (click)="confirmDeleteSelectedCommunities()"><i></i> Delete </a></li>
-                                </ul>
-                              </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div *ngIf="!errorMessage && !showLoading">
-                        <div class="gwt-HTML">
-                            <div class="users-list"> <!--"row" class removed"-->
-                                <div class="col-md-12">
-                                  <!-- <div class="filters marginBottom20">
-                                      <div class="links form-group form-inline">
-                                          <span>Filter by community:</span>
-                                          <select class="uk-select uk-width-medium" (change)="filterByCommunity($event)">
-                                              <option *ngFor="let community of communities" value="{{community.pid}}">{{community.name}}</option>
-                                          </select>
-                                      </div>
-                                  </div> -->
-                                  <table class="uk-table uk-table-striped">
-                                    <thead>
-                                        <tr>
-                                            <th><input id="allDivIdCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
-                                            <th>Name</th>
-                                            <!-- <th>Community</th> -->
-                                            <th>Page</th>
-                                            <th>Portal Type</th>
-                                            <th>Actions</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody >
-                                        <tr *ngFor="let check of checkboxes; let i=index">
-                                            <td><input id="{{check.divId._id}}" class="checkBox" type="checkbox"
-                                                                                name="divIdscb[]" value="{{check.divId._id}}" [(ngModel)]="check.checked">
-                                            </td>
-                                            <td>
-                                                <div class="name" href="#">{{check.divId.name}}</div>
-                                            </td>
-                                            <!-- <td>
-                                                <div class="community" href="#">{{check.divId.community.name}}</div>
-                                            </td> -->
-                                            <td>
-                                                <!-- <div class="page" href="#">{{check.divId.page.name}}</div> -->
-                                                <div class="pages" href="#">
-                                                  <span *ngFor="let page of check.divId.pages let i=index">{{page.name}}<span *ngIf="i<(check.divId.pages.length-1)">, </span></span>
-                                                </div>
-                                            </td>
-                                            <td>
-                                              <div class="portalType" href="#">{{check.divId.portalType}}</div>
-                                            </td>
-                                            <td>
-                                                <div class="actions" href="#">
-                                                    <input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editDivId(i)">
-                                                    <input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteDivId(check.divId._id)">
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-
-                                    <div *ngIf="checkboxes.length==0" class="col-md-12">
-                                        <div class="uk-alert-warning" uk-alert>No classes found</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <!-- <fab (clicked)="showModal()"></fab> -->
-        <fab (clicked)="newDivId()"></fab>
-</div>
-<!-- <modal-form #saveModal [saveText]="'Save'" [titleText]="'Add a new Class'" [formGroup]="formGroup" [type]="'divId'"
-            [isModalShown]="isModalShown" (emmitObject)="divIdSavedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
-    <divId-form [group]="formGroup"></divId-form>
-</modal-form>
-
-<modal-form #updateModal [saveText]="'Update'" [titleText]="'Update Class'" [formGroup]="formGroup" [type]="'divId'"
-            [isModalShown]="isModalShown" (emmitObject)="divIdUpdatedSuccessfully($event)" (emmitError)="handleUpdateError($event)">
-    <divId-form [group]="formGroup" [formPages]="formPages"></divId-form>
-</modal-form> -->
-
-<modal-alert #AlertModalSaveDivId (alertOutput)="divIdSaveConfirmed($event)">
-  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
-  <divId-form [group]="formGroup" [formPages]="formPages"></divId-form>
-</modal-alert>
-
-<modal-alert #AlertModalUpdateDivId (alertOutput)="divIdUpdateConfirmed($event)">
-  <div *ngIf="modalErrorMessage" class="uk-alert-danger" uk-alert aria-hidden="true">{{ modalErrorMessage }}</div>
-  <divId-form [group]="formGroup" [formPages]="formPages"></divId-form>
-</modal-alert>
-
-<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteDivIds($event)">
-    Are you sure you want to delete the selected class(-es)?
-</delete-confirmation-dialog> -->
-<modal-alert #AlertModalDeleteDivIds (alertOutput)="confirmedDeleteDivIds($event)"></modal-alert>

src/app/pages/divId/divIds.component.ts

@@ -1,292 +0,0 @@
-import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-import { HelpContentService } from "../../services/help-content.service";
-import { FormGroup } from "@angular/forms";
-import { DivIdFormComponent } from "./divId-form.component";
-import { CheckDivId, DivId } from "../../domain/divId";
-//import { Community } from "../../domain/community";
-import { Page } from "../../domain/page";
-import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
-
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
-import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
-import {Title} from '@angular/platform-browser';
-import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
-
-@Component({
-    selector: 'divIds',
-    templateUrl: './divIds.component.html',
-})
-
-export class DivIdsComponent implements OnInit {
-
-    // @ViewChild(ModalFormComponent)
-    // @ViewChild('saveModal')
-    // public modal:ModalFormComponent;
-    //
-    // @ViewChild('updateModal')
-    // public updateModal:ModalFormComponent;
-
-    // @ViewChild('deleteConfirmationModal')
-    // public deleteConfirmationModal : DeleteConfirmationDialogComponent;
-    @ViewChild('AlertModalSaveDivId') alertModalSaveDivId;
-    @ViewChild('AlertModalUpdateDivId') alertModalUpdateDivId;
-    @ViewChild('AlertModalDeleteDivIds') alertModalDeleteDivIds;
-    private selectedDivIds: string[] = [];
-
-    @ViewChild(DivIdFormComponent)
-    public formComponent : DivIdFormComponent;
-
-    public checkboxes : CheckDivId[] = [];
-
-    public divIds : DivId[] = [];
-
-    //public errorMessage: string;
-
-    public formGroup : FormGroup;
-
-    private searchText : RegExp = new RegExp('');
-    public  keyword: string = "";
-
-    public pages: Page[] = [];
-    public properties:EnvProperties = null;
-    public formPages: Page[] = [];
-
-    public showLoading: boolean = true;
-    public errorMessage: string = '';
-    public updateErrorMessage: string = '';
-    public modalErrorMessage: string = '';
-
-    ngOnInit() {
-      this.route.data
-        .subscribe((data: { envSpecific: EnvProperties }) => {
-          HelperFunctions.scroll();
-           this.title.setTitle('Administration Dashboard | Classes');
-           this.properties = data.envSpecific;
-           this.formGroup = this.formComponent.form;
-
-           this.getDivIds();
-      });
-    }
-
-    constructor(private element: ElementRef, private route: ActivatedRoute,
-                private _router: Router, private title: Title,
-                private _helpContentService: HelpContentService,
-                private _clearCacheService: ClearCacheService) {}
-
-    getDivIds() {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        this.showLoading = true;
-        this.updateErrorMessage = "";
-        this.errorMessage = "";
-
-        this._helpContentService.getAllDivIdsFull(this.properties.adminToolsAPIURL).subscribe(
-            divIds => {
-                this.divIds = divIds;
-                this.checkboxes = [];
-
-                let self = this;
-                divIds.forEach(_ => {
-                    self.checkboxes.push(<CheckDivId>{divId : _, checked : false});
-                });
-
-                this.showLoading = false;
-        },
-        error => this.handleError('System error retrieving classes', error));
-      }
-    }
-
-    // public showModal():void {
-    //     this.modal.showModal();
-    // }
-
-    public toggleCheckBoxes(event) {
-        this.checkboxes.forEach(_ => _.checked = event.target.checked);
-    }
-
-    public applyCheck(flag : boolean) {
-        this.checkboxes.forEach(_ => _.checked = flag);
-    }
-
-    public getSelectedDivIds() : string[] {
-        return this.checkboxes.filter(divId => divId.checked == true).map(checkedDivId => checkedDivId.divId).map(res => res._id);
-    }
-
-    private deleteDivIdsFromArray(ids : string[]) : void {
-        for(let id of ids) {
-            let i = this.checkboxes.findIndex(_ => _.divId._id == id);
-            this.checkboxes.splice(i, 1);
-        }
-    }
-
-    public confirmDeleteDivId(id : string) {
-        //this.deleteConfirmationModal.ids = [id];
-        //this.deleteConfirmationModal.showModal();
-        this.selectedDivIds = [id];
-        this.confirmModalOpen();
-    }
-
-    public confirmDeleteSelectedDivIds() {
-        //this.deleteConfirmationModal.ids = this.getSelectedDivIds();
-        //this.deleteConfirmationModal.showModal();
-        this.selectedDivIds = this.getSelectedDivIds();
-        this.confirmModalOpen();
-    }
-
-    private confirmModalOpen() {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        this.alertModalDeleteDivIds.cancelButton = true;
-        this.alertModalDeleteDivIds.okButton = true;
-        this.alertModalDeleteDivIds.alertTitle = "Delete Confirmation";
-        this.alertModalDeleteDivIds.message = "Are you sure you want to delete the selected class(es)?";
-        this.alertModalDeleteDivIds.okButtonText = "Yes";
-        this.alertModalDeleteDivIds.open();
-      }
-    }
-
-    public confirmedDeleteDivIds(data: any) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        this.showLoading = true;
-        this.updateErrorMessage = "";
-
-        this._helpContentService.deleteDivIds(this.selectedDivIds, this.properties.adminToolsAPIURL).subscribe(
-           _ => {
-             this.deleteDivIdsFromArray(this.selectedDivIds);
-             this.showLoading = false;
-             this._clearCacheService.clearCache("classes deleted");
-           },
-           error => this.handleUpdateError('System error deleting the selected classes', error)
-        );
-      }
-    }
-
-    public editDivId(i : number) {
-        let divId : DivId = this.checkboxes[i].divId;
-        this.formPages = <Page[]>divId.pages;
-
-        /*let pageIds: string[] = [];
-        let index = 0;
-        for(let page of <Page[]>divId.pages) {
-          pageIds[index] = page._id;
-          index++;
-        }*/
-
-        this.formGroup.patchValue(divId);
-        this.formComponent.setPages(divId.pages as Page[]);//pageIds);
-        this.formGroup.controls['portalType'].disable();
-
-        //this.updateModal.showModal();
-        this.divIdsModalOpen(this.alertModalUpdateDivId, "Update", "Update Class");
-    }
-
-    public newDivId() {
-        this.formGroup.controls['portalType'].enable();
-        this.formComponent.reset();
-        this.modalErrorMessage = "";
-        this.divIdsModalOpen(this.alertModalSaveDivId, "Save", "Add a new Class");
-    }
-
-    private divIdsModalOpen(modal: any, title: string, yesBtn: string) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        modal.cancelButton = true;
-        modal.okButton = true;
-        modal.alertTitle = title;
-        modal.okButtonText = yesBtn;
-        modal.open();
-      }
-    }
-
-    public divIdSaveConfirmed(data: any) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        if(!this.formGroup.valid) {
-          this.divIdsModalOpen(this.alertModalSaveDivId, "Save", "Add a new Class");
-          this.modalErrorMessage = "Please fill in all required fields marked with *";
-        } else {
-          this.modalErrorMessage = "";
-          this._helpContentService.saveDivId(<DivId> this.formGroup.value, this.properties.adminToolsAPIURL).subscribe(
-              divId => {
-                this.divIdSavedSuccessfully(divId);
-                this._clearCacheService.clearCache("class saved");
-              },
-              error => this.handleUpdateError("System error creating class", error)
-          );
-        }
-      }
-    }
-
-    public divIdUpdateConfirmed(data: any) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        if(!this.formGroup.valid) {
-          this.divIdsModalOpen(this.alertModalUpdateDivId, "Update", "Update Class");
-          this.modalErrorMessage = "Please fill in all required fields marked with *";
-        } else {
-          this.formGroup.controls['portalType'].enable();
-          this._helpContentService.updateDivId(<DivId> this.formGroup.value, this.properties.adminToolsAPIURL).subscribe(
-              divId => {
-                this.divIdUpdatedSuccessfully(divId);
-                this._clearCacheService.clearCache("class updated");
-              },
-              error => this.handleUpdateError("System error updating class", error)
-          );
-        }
-      }
-    }
-
-    public divIdSavedSuccessfully(divId: DivId) {
-        this.checkboxes.push(<CheckDivId>{divId : divId, checked : false});
-        this.applyCheck(false);
-    }
-
-    public divIdUpdatedSuccessfully(divId : DivId) {
-        this.checkboxes.find(checkItem => checkItem.divId._id==divId._id).divId = divId;
-        this.applyCheck(false);
-    }
-
-    public filterBySearch(text : string) {
-        this.searchText = new RegExp(text,'i');
-        this.applyFilter();
-    }
-
-    public applyFilter() {
-        this.checkboxes = [];
-        this.divIds.filter(item => this.filterDivIds(item)).forEach(
-            _ => this.checkboxes.push(<CheckDivId>{divId: _, checked: false})
-        );
-    }
-
-    public filterDivIds(divId : DivId) : boolean {
-        let textFlag = this.searchText.toString() == '' || (divId.name + ' ' + divId.portalType).match(this.searchText) != null;
-        return textFlag;
-    }
-
-    handleUpdateError(message: string, error) {
-        if(error == null) {
-            this.formComponent.reset();
-        } else {
-          this.updateErrorMessage = message;
-          console.log('Server responded: ' +error);
-        }
-
-        this.showLoading = false;
-    }
-
-    handleError(message: string, error) {
-        this.errorMessage = message;
-        console.log('Server responded: ' + error);
-
-        this.showLoading = false;
-    }
-}

src/app/pages/divId/divIds.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {FABModule} from '../../utils/fabModule.module';
-import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
-import {DivIdsComponent} from './divIds.component';
-import {DivIdFormComponent} from './divId-form.component';
-import {DivIdsRoutingModule} from './divIds-routing.module';
-import {AdminLoginGuard} from "../../openaireLibrary/login/adminLoginGuard.guard";
-
-@NgModule({
-    imports: [
-        CommonModule,  RouterModule, FormsModule, FABModule,
-        AlertModalModule, ReactiveFormsModule, DivIdsRoutingModule
-    ],
-    declarations: [DivIdsComponent, DivIdFormComponent],
-    providers: [AdminLoginGuard],
-    exports: [DivIdsComponent]
-})
-export class DivIdsModule { }

src/app/pages/divhelpcontent/div-help-content-form.component.html

@@ -1,56 +0,0 @@
-<div *ngIf="updateErrorMessage" class="uk-alert uk-alert-danger" role="alert">{{updateErrorMessage}}</div>
-<div *ngIf="errorMessage" class="uk-alert uk-alert-danger" role="alert">{{errorMessage}}</div>
-<div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
-<div class="uk-alert uk-alert-primary uk-margin-top-large">
-     <span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
-    Create or edit help text
-    <div class="uk-text-small">
-      Select the class to be displayed, add the content and click active to make it visible to dashboard
-    </div>
-
-  </div>
-<form *ngIf="!errorMessage && !showLoading" [formGroup]="myForm">
-    <div class="form-group">
-        <div class="uk-margin-bottom" *ngIf="selectedDiv">Class content displayed in page(s): <span *ngFor="let page of selectedDiv.pages let i=index">{{page.name}}<span *ngIf="i<(selectedDiv.pages.length-1)">, </span></span></div>
-
-      <div *ngIf="showPageSelect && !editMode" class="form-group">
-        <label for="pageTag">Select Page</label>
-          <select id="pageTag" (change)="pageSelected($event)" [value]="pageId ? pageId : ''">
-              <option *ngIf="!pageId"></option>
-              <option *ngFor="let page of availablePages" [value]="page._id">{{page.name}}</option>
-          </select>
-      </div>
-
-      <div *ngIf="pageId || selectedDiv" class="form-group">
-        <label for="divTag">Select Class</label>
-        <select formControlName="divId" id="divTag" class="form-control">
-            <!-- <option *ngIf="selectedDiv" [value]="selectedDiv._id">{{selectedDiv.name}}</option> -->
-            <option *ngFor="let div of availableDivs" [value]="div._id" (click)="divIdSelected(div)">{{div.name}}</option>
-        </select>
-      </div>
-
-    </div>
-    <div class="form-group" [ngClass]="{'has-error':!myForm.controls.content.valid && myForm.controls.content.dirty}">
-        <label>Content</label>
-        <div>
-            <!-- [config]="{allowedContent: true,extraAllowedContent : '*(*)'}"> -->
-            <ckeditor
-                    [readonly]="false"
-                    debounce="500"
-                    formControlName="content"
-                    [config]="{ extraAllowedContent: '* [uk-*](*) ; span', disallowedContent: 'script; *[on*]', removeButtons: 'Save,NewPage,DocProps,Preview,Print',
-                                extraPlugins: 'divarea'}">
-            </ckeditor>
-        </div>
-    </div>
-    <div class="form-group">
-        <label>Select Status</label>
-        <label class="checkbox">
-            <span style="font-weight: normal;">Active</span>
-            <input tabindex="0" type="checkbox" formControlName="isActive">
-
-        </label>
-    </div>
-    <input type="hidden" formControlName="_id">
-</form>
-<!-- <div *ngIf="selectedDiv"><span *ngFor="let page of selectedDiv.pages">{{page.name}} </span></div> -->

src/app/pages/divhelpcontent/div-help-content-form.component.ts

@@ -1,161 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { ActivatedRoute, Router } from "@angular/router";
-import { FormGroup, FormBuilder, Validators } from "@angular/forms";
-import { Page } from "../../domain/page";
-import { DivId } from "../../domain/divId";
-import { HelpContentService } from "../../services/help-content.service";
-import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
-
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
-
-@Component({
-    selector: 'div-content-form',
-    templateUrl: './div-help-content-form.component.html',
-})
-
-export class DivContentFormComponent implements OnInit{
-
-    @Input('group')
-    myForm: FormGroup;
-    @Input('communityPid')
-    communityPid: string;
-    @Input('pageId')
-    pageId: string;
-    @Input('editMode')
-    editMode: boolean = false;
-
-    //public divIdName: string = '';
-
-    private communityId: string = '';
-
-    showPageSelect: boolean = true;
-    selectedDiv: DivId;
-
-    private availablePages : Page[] = [];
-    private availableDivs : DivId[] = [];
-
-    private ckeditorContent : string;
-
-    public properties:EnvProperties = null;
-
-    public showLoading: boolean = true;
-    public errorMessage: string = '';
-    @Input() updateErrorMessage: string = '';
-
-    constructor(private route: ActivatedRoute, private _router: Router, private _fb: FormBuilder, private _helpContentService: HelpContentService){}
-
-    ngOnInit() {
-      this.myForm = this.form;
-      this.route.data
-        .subscribe((data: { envSpecific: EnvProperties }) => {
-           this.properties = data.envSpecific;
-           this.route.queryParams.subscribe(params => {
-
-             if(!Session.isLoggedIn()){
-               this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-             } else {
-               if(this.pageId) {
-                 this.showPageSelect = false;
-                 this.getDivs(this.pageId);
-               } else {
-                 if(!this.editMode) {
-                   this._helpContentService.getCommunityPagesWithDivId(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
-                     pages => {
-                       this.availablePages = pages;
-                       this.showLoading = false;
-                     },
-                     error => this.handleError('System error retrieving pages', error));
-                   }
-              }
-
-              this.getCommunity(this.communityPid);
-            }
-           });
-        });
-
-    }
-
-    public pageSelected(event) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        this.getDivs(event.target.value);
-      }
-    }
-
-    public divIdSelected(div: DivId) {
-      this.selectedDiv = div;
-    }
-
-    public getCommunity(communityPid: string) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        this.showLoading = true;
-        this.errorMessage = '';
-
-        this._helpContentService.getCommunity(this.communityPid, this.properties.adminToolsAPIURL).subscribe(
-          community => {
-            this.communityId = community._id;
-
-            this.myForm.patchValue({
-              community: this.communityId
-            });
-            this.showLoading = false;
-          },
-          error => this.handleError('System error retrieving community', error)
-        );
-      }
-    }
-
-    public getDivs(pageId: string) {
-      if(!Session.isLoggedIn()){
-        this._router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this._router.url} });
-      } else {
-        //this.showLoading = true;
-        this.errorMessage = '';
-
-        this._helpContentService.getDivIdsFullByPortal(pageId, this.properties.adminToolsAPIURL, this.communityPid).subscribe(
-            divs => {
-              this.availableDivs = divs;
-              this.pageId = pageId;
-
-              this.showLoading = false;
-            },
-            error => this.handleError('System error retrieving pages', error));
-      }
-    }
-
-    // public selectedDiv(event) {
-    //   console.info(event.target.value);
-    // }
-
-    public get form() {
-        return this._fb.group({
-            divId: ['', Validators.required],
-            content: ['', Validators.required],
-            isActive: true,
-            portal: this.communityPid,
-            _id : '',
-        });
-    }
-
-    public reset() {
-        this.myForm.patchValue({
-          divId: '',
-          content: '',
-          isActive: true,
-          portal: this.communityPid,
-          _id : ''
-        });
-        this.myForm.markAsPristine();
-    }
-
-    handleError(message: string, error) {
-        this.errorMessage = message;
-        console.log('Server responded: ' + error);
-
-        this.showLoading = false;
-    }
-}

src/app/pages/divhelpcontent/div-help-content-form.module.ts

@@ -1,21 +0,0 @@
-import { NgModule } from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {FABModule} from '../../utils/fabModule.module';
-import {AlertModalModule} from '../../openaireLibrary/utils/modal/alertModal.module';
-import {SafeHtmlPipeModule} from '../../openaireLibrary/utils/pipes/safeHTMLPipe.module';
-import {DivContentFormComponent} from './div-help-content-form.component';
-import {CKEditorModule} from 'ng2-ckeditor';
-
-@NgModule({
-    imports: [
-        CommonModule, FormsModule,
-        FABModule, SafeHtmlPipeModule, CKEditorModule,
-        AlertModalModule, ReactiveFormsModule
-    ],
-    declarations: [
-        DivContentFormComponent
-    ],
-    exports: [DivContentFormComponent]
-})
-export class DivHelpContentFormModule { }

src/app/pages/divhelpcontent/div-help-contents-routing.module.ts

@@ -1,14 +0,0 @@
-import { NgModule } from '@angular/core';
-import {RouterModule} from '@angular/router';
-import {IsCommunity} from '../../openaireLibrary/connect/communityGuard/isCommunity.guard';
-import {ConnectAdminLoginGuard} from '../../openaireLibrary/connect/communityGuard/connectAdminLoginGuard.guard';
-import {DivHelpContentsComponent} from './div-help-contents.component';
-
-@NgModule({
-    imports: [
-        RouterModule.forChild([
-            { path: '', canActivate: [IsCommunity, ConnectAdminLoginGuard], component: DivHelpContentsComponent}
-        ])
-    ]
-})
-export class DivHelpContentsRoutingModule { }

src/app/pages/divhelpcontent/div-help-contents.component.html

@@ -1,155 +0,0 @@
-<div id="divHelpContents">
-
-        <div class="menubar ">
-
-            <div *ngIf="!selectedPageId" class="divHelpContent-title uk-text-large">Class help texts</div>
-            <div *ngIf="selectedPageId && page" class="divHelpContent-title uk-text-large">Class help texts of page '{{page.name}}'</div>
-
-            <div *ngIf="updateErrorMessage" class="uk-alert-danger" uk-alert>
-              <a class="uk-alert-close" uk-close></a>
-              {{updateErrorMessage}}
-            </div>
-
-            <div *ngIf="!errorMessage && !showLoading" class="page-controls">
-                <div class="  filters ">
-                    <div class="show-options uk-float-right">
-                      <button class="uk-button" type="button">Bulk Actions</button>
-                      <div uk-dropdown="mode: click">
-                        <ul class="uk-nav uk-navbar-dropdown-nav"
-                            [attr.uk-tooltip]="getSelectedDivHelpContents().length == 0 ? 'pos:left; cls: uk-active' : 'cls: uk-invisible'"
-                            title="Select at least one help text">
-                          <li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="toggleDivHelpContents(true,getSelectedDivHelpContents())"><i></i> Activate </a></li>
-                          <li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="toggleDivHelpContents(false,getSelectedDivHelpContents())"><i></i> Deactivate </a></li>
-                          <li><a [class]="getSelectedDivHelpContents().length == 0 ? 'uk-disabled' : ''" (click)="confirmDeleteSelectedDivHelpContents()"><i></i> Delete </a></li>
-                        </ul>
-                      </div>
-                    </div>
-                </div>
-            </div>
-            <!-- <a *ngIf="!selectedPageId" [queryParams]="{communityId: selectedCommunityPid}" routerLink="/classContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New help text </a> -->
-            <!-- <a *ngIf="selectedPageId" [queryParams]="{communityId: selectedCommunityPid, pageId: selectedPageId}" routerLink="/classContents/new" class="uk-button uk-button-primary uk-float-right"><i></i> New class help text </a> -->
-            <div class="uk-grid uk-margin-bottom">
-            <form target="BSFormPanel_Admin_1" class="search">
-                <!-- <input #inputstring (keyup.enter)="filterBySearch(inputstring.value)" placeholder="Class Help text..." type="text" class="uk-input uk-width-medium"/>
-                <button class="uk-button" type="submit">Search</button> -->
-                <input type="text" class="uk-input uk-width-medium" placeholder="Class name, content..." aria-describedby="sizing-addon2"  [(ngModel)]="keyword"  name="keyword" >
-                <button (click)="filterBySearch(keyword)"  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>
-            </form>
-            <div *ngIf="!selectedPageId" class="filters marginBottom20">
-                <div class="links form-group form-inline">
-                    <span>Filter by page:</span>
-                    <select class="uk-select uk-width-medium" (change)="filterByPage($event)">
-                        <option value="">-- none selected --</option>
-                        <option *ngFor="let page of pages" value="{{page._id}}">{{page.name}}</option>
-                    </select>
-                </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="content-wrapper" id="contentWrapper">
-            <div>
-                <div class="contentPanel">
-                    <div *ngIf="errorMessage" class="uk-alert uk-alert-danger  uk-margin-large-top" role="alert">{{errorMessage}}</div>
-                    <div [style.display]="showLoading ? 'inline' : 'none'" class="uk-animation-fade uk-margin-large-top  uk-width-1-1" role="alert"><img class="uk-align-center loading-gif"></div>
-
-                    <div *ngIf="!errorMessage && !showLoading">
-                        <div class="gwt-HTML">
-                            <div class="users-list"> <!--"row" class removed"-->
-                                <div class="col-md-12">
-
-                                  <!-- <div *ngIf="!selectedPageId" class="filters marginBottom20">
-                                      <div class="links form-group form-inline">
-                                          <span>Filter by community:</span>
-                                          <select class="uk-select uk-width-medium" (change)="filterByCommunity($event)">
-                                              <option *ngFor="let community of communities" value="{{community.pid}}">{{community.name}}</option>
-                                          </select>
-                                      </div>
-                                  </div> -->
-                                  <div class="uk-alert uk-alert-primary uk-margin-top-large">
-                                       <span class="uk-margin-small-right uk-icon" uk-icon="info"></span>
-                                      Enable or disable help text to show or hide it from the dashboard
-
-                                    </div>
-
-                                  <ul uk-tab class="links">
-                                      <li [ngClass]="{'uk-active' : filters.active==null}" (click)="displayAllDivHelpContents()">
-                                          <a>All class help texts <span class="uk-badge">{{counter.all | number}}</span></a>
-                                      </li>
-                                      <li [ngClass]="{'uk-active' : filters.active==true}" (click)="displayActiveDivHelpContents()">
-                                          <a>Active <span class="uk-badge">{{counter.active | number}}</span></a>
-                                      </li>
-                                      <li [ngClass]="{'uk-active' : filters.active==false}" (click)="displayInactiveDivHelpContents()">
-                                          <a>Inactive <span class="uk-badge">{{counter.inactive | number}}</span></a>
-                                      </li>
-                                  </ul>
-
-                                  <table class="uk-table uk-table-striped">
-                                    <thead>
-                                        <tr>
-                                            <th><input id="allDivHelpContentsCheckbox" type="checkbox" (change)="toggleCheckBoxes($event)"></th>
-                                            <th *ngIf="!selectedPageId">Page</th>
-                                            <!--th *ngIf="!selectedPageId">Community</th-->
-                                            <th>Class</th>
-                                            <th>Content</th>
-                                            <th>Change status</th>
-                                            <th>Actions</th>
-                                        </tr>
-                                    </thead>
-                                    <tbody >
-                                        <tr *ngFor="let check of checkboxes; let i=index">
-                                            <td><input id="{{check.divHelpContent._id}}" class="checkBox" type="checkbox"
-                                                                                name="entitiescb[]" value="{{check.divHelpContent._id}}" [(ngModel)]="check.checked">
-                                            </td>
-                                            <td *ngIf="!selectedPageId">
-                                                <!-- <div class="page" href="#">{{check.divHelpContent.divId.page.name}}</div> -->
-                                                <div class="pages" href="#">
-                                                  <span *ngFor="let page of check.divHelpContent.divId.pages let i=index">{{page.name}}<span *ngIf="i<(check.divHelpContent.divId.pages.length-1)">, </span></span>
-                                                </div>
-                                            </td>
-                                            <!--td *ngIf="!selectedPageId">
-                                                <div class="community" href="#">{{check.divHelpContent.community.name}}</div>
-                                            </td-->
-                                            <td>
-                                                <div class="divId" href="#">{{check.divHelpContent.divId.name}}</div>
-                                            </td>
-                                            <td>
-<!--                                              <div class="content" [innerHTML]="check.divHelpContent.content | safeHtml"></div>-->
-                                              <div class="content">{{check.divHelpContent.content}}</div>
-                                            </td>
-                                            <td>
-                                              <mat-slide-toggle [checked]="check.divHelpContent.isActive"
-                                                                (change)="($event.source.checked = check.divHelpContent.isActive);toggleDivHelpContents(!check.divHelpContent.isActive,[check.divHelpContent._id])"></mat-slide-toggle>
-                                            </td>
-                                            <td>
-                                                <div class="actions" href="#">
-                                                    <input title="Edit" src="assets/imgs/icn_edit.png" class="edit uk-margin-small-right" type="image" (click)="editDivHelpContent(check.divHelpContent._id)">
-                                                    <input title="Delete" src="assets/imgs/icn_trash.png" class="delete" type="image" (click)="confirmDeleteDivHelpContent(check.divHelpContent._id)">
-                                                </div>
-                                            </td>
-                                        </tr>
-                                    </tbody>
-                                </table>
-
-                                    <div *ngIf="checkboxes.length==0" class="col-md-12">
-                                        <div class="uk-alert-warning" uk-alert>No class help texts found</div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                        <a *ngIf="selectedPageId && page" [queryParams]="{type: page.type, communityId: selectedCommunityPid}" routerLink="/pages">Go back to {{page.type}} pages</a>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <fab (clicked)="newClassContent()"></fab>
-</div>
-
-<!-- <delete-confirmation-dialog #deleteConfirmationModal [isModalShown]="isModalShown" (emmitObject)="confirmedDeleteDivHelpContents($event)">
-    Are you sure you want to delete the selected help text(s)?
-</delete-confirmation-dialog> -->
-<modal-alert #AlertModalDeleteDivHelpContents (alertOutput)="confirmedDeleteDivHelpContents($event)"></modal-alert>

src/app/pages/divhelpcontent/div-help-contents.component.ts

@@ -1,368 +0,0 @@
-import { Component, ViewChild, OnInit, ElementRef } from '@angular/core';
-import { Router, ActivatedRoute } from "@angular/router";
-import { FormGroup } from "@angular/forms";
-import { HelpContentService } from "../../services/help-content.service";
-import { DivHelpContent, CheckDivHelpContent, DivHelpContentFilterOptions } from "../../domain/div-help-content";
-import { Page } from "../../domain/page";
-import { Portal } from "../../domain/portal";
-import { DivId } from "../../domain/divId";
-import { EnvProperties } from '../../openaireLibrary/utils/properties/env-properties';
-import {SafeHtmlPipe} from '../../openaireLibrary/utils/pipes/safeHTML.pipe';
-
-import {Session} from '../../openaireLibrary/login/utils/helper.class';
-import {LoginErrorCodes} from '../../openaireLibrary/login/utils/guardHelper.class';
-import {HelperFunctions} from "../../openaireLibrary/utils/HelperFunctions.class";
-import {PageHelpContent} from "../../domain/page-help-content";
-import {Title} from '@angular/platform-browser';
-import {ClearCacheService} from "../../openaireLibrary/services/clear-cache.service";
-
-@Component({
-    selector: 'div-help-contents',
-    templateUrl: './div-help-contents.component.html',
-})
-
-export class DivHelpContentsComponent implements OnInit {
-    // @ViewChild('deleteConfirmationModal')
-    // public deleteConfirmationModal : DeleteConfirmationDialogComponent;
-    @ViewChild('AlertModalDeleteDivHelpContents') alertModalDeleteDivHelpContents;
-    private selectedDivContents: string[] = [];
-
-    public checkboxes : CheckDivHelpContent[] = [];
-
-    public divHelpContents : DivHelpContent[] = [];
-
-    //public errorMessage: string;
-
-    public formGroup : FormGroup;
-
-    public pages: Page[];
-
-    public checkboxAll : boolean = false;
-
-    public filters : DivHelpContentFilterOptions = {id : '', active : null, text : new RegExp('')};
-    public keyword: string = "";
-
-    public counter = {all : 0, active : 0, inactive : 0};
-
-    public communities: Portal[] = [];
-
-    public selectedCommunityPid: string;
-
-    public selectedPageId: string;
-
-    public community: Portal;
-
-    public page: Page;
-    public properties:EnvProperties = null;
-
-    public showLoading: boolean = true;
-    public errorMessage: string = '';
-    public updateErrorMessage: string = '';
-
-    ngOnInit() {
-      this.route.data
-        .subscribe((data: { envSpecific: EnvProperties }) => {
-           this.properties = data.envSpecific;
-
-           this.route.queryParams.subscribe(params => {
-             HelperFunctions.scroll();
-             this.title.setTitle('Administration Dashboard | Class Help Texts');
-             this.selectedCommunityPid = params['communityId'];
-             this.selectedPageId = params['pageId'];
-
-             if(this.selectedCommunityPid && this.selectedPageId) {
-               this.getPage(this.selectedPageId);
-             } else if(this.selectedCommunityPid){
-               this.selectedPageId = "";
-               this.getPages(this.selectedCommunityPid);
-             }
-           });
-        });
-    }
-
-    constructor(private element: ElementRef, private route: ActivatedRoute,
-                private title: Title,
-                private _helpService: HelpContentService, private router : Router,
-                private _clearCacheService: ClearCacheService) {}
-
-    getPage(pageId: string) {
-      if(!Session.isLoggedIn()){
-        this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this.router.url} });
-      } else {
-        this.showLoading = true;
-        this.updateErrorMessage = "";
-        this.errorMessage = "";
-        this._helpService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
-            page => {
-              // if( (this.selectedCommunityPid == 'openaire' && !page.openaire)
-              //   || (this.selectedCommunityPid == 'connect' && !page.connect)
-              //   || (this.selectedCommunityPid != 'openaire' && this.selectedCommunityPid != 'connect' && !page.communities)) {
-              if(this.properties.adminToolsPortalType != page.portalType) {
-                this.router.navigate(['/classContents'], { queryParams: { "communityId": this.selectedCommunityPid} });
-              } else {
-                this.page = page;
-                this.getDivHelpContents(this.selectedCommunityPid);
-              }
-            },
-            error => this.handleError('System error retrieving page', error));
-      }
-    }
-
-    getPages(community_pid: string) {
-      if(!Session.isLoggedIn()){
-        this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this.router.url} });
-      } else {
-        this.showLoading = true;
-        this.updateErrorMessage = "";
-        this.errorMessage = "";
-
-        this._helpService.getCommunityPagesWithDivId(community_pid, this.properties.adminToolsAPIURL).subscribe(
-        //this._helpService.getPagesWithDivIds(community_pid, this.properties.adminToolsAPIURL).subscribe(
-            pages => {
-              this.pages = pages;
-              this.getDivHelpContents(this.selectedCommunityPid);
-            },
-            error => this.handleError('System error retrieving pages', error));
-      }
-    }
-
-    public countDivHelpContents() {
-        this.counter = {all : 0, active : 0, inactive : 0};
-        let filter = Object.assign({},this.filters);
-        filter.active = null;
-        this.divHelpContents.forEach(_ => {
-            if(this.filterDivHelpContent(_,filter)){
-                if (_.isActive==true) this.counter.active++;
-                else this.counter.inactive++
-            }
-        });
-        this.counter.all = this.counter.active + this.counter.inactive;
-    }
-
-    getDivHelpContents(community_pid: string) {
-      if(!Session.isLoggedIn()){
-        this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this.router.url} });
-      } else {
-        this._helpService.getCommunityDivHelpContents(community_pid, this.properties.adminToolsAPIURL).subscribe(
-            divHelpContents => {
-                this.divHelpContents = divHelpContents as Array<DivHelpContent>;
-                this.counter.all = this.divHelpContents.length;
-                this.checkboxes = [];
-
-                for (let i = this.divHelpContents.length - 1; i >= 0; i -= 1) {
-                //for (let i = 0; i < this.divHelpContents.length; i++) {
-                  let divId: DivId = this.divHelpContents[i].divId as DivId;
-                  let pages: Page[] =  divId.pages as Page[];
-                  const pageIds = pages.map(x => x._id);
-
-                  if(!this.selectedPageId || pageIds.includes(this.selectedPageId)) {
-                    this.cutContent(this.divHelpContents[i]);
-                    this.checkboxes.unshift(<CheckDivHelpContent>{divHelpContent : this.divHelpContents[i], checked : false});
-                  } else {
-                    this.divHelpContents.splice(i, 1);
-                  }
-                }
-
-                this.countDivHelpContents();
-
-                this.showLoading = false;
-            },
-            error => this.handleError('System error retrieving page contents', error));
-      }
-    }
-
-    public toggleCheckBoxes(event) {
-        this.checkboxes.forEach(_ => _.checked = event.target.checked);
-        this.checkboxAll = event.target.checked;
-    }
-
-    public applyCheck(flag : boolean) {
-        this.checkboxes.forEach(_ => _.checked = flag);
-        this.checkboxAll = false;
-    }
-
-    public getSelectedDivHelpContents() : string[] {
-        return this.checkboxes.filter(divHelpContent => divHelpContent.checked == true)
-            .map(checkedDivHelpContent => checkedDivHelpContent.divHelpContent).map(res => res._id);
-    }
-
-    public confirmDeleteDivHelpContent(id : string) {
-        //this.deleteConfirmationModal.ids = [id];
-        //this.deleteConfirmationModal.showModal();
-        this.selectedDivContents = [id];
-        this.confirmModalOpen();
-    }
-
-    public confirmDeleteSelectedDivHelpContents() {
-        //this.deleteConfirmationModal.ids = this.getSelectedDivHelpContents();
-        //this.deleteConfirmationModal.showModal();
-        this.selectedDivContents = this.getSelectedDivHelpContents();
-        this.confirmModalOpen();
-    }
-
-    private confirmModalOpen() {
-      if(!Session.isLoggedIn()){
-        this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this.router.url} });
-      } else {
-        this.alertModalDeleteDivHelpContents.cancelButton = true;
-        this.alertModalDeleteDivHelpContents.okButton = true;
-        this.alertModalDeleteDivHelpContents.alertTitle = "Delete Confirmation";
-        this.alertModalDeleteDivHelpContents.message = "Are you sure you want to delete the help text(s)?";
-        this.alertModalDeleteDivHelpContents.okButtonText = "Yes";
-        this.alertModalDeleteDivHelpContents.open();
-      }
-    }
-
-    public confirmedDeleteDivHelpContents(data: any) {
-      if(!Session.isLoggedIn()){
-        this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this.router.url} });
-      } else {
-        this.showLoading = true;
-        this.updateErrorMessage = "";
-
-        this._helpService.deleteDivHelpContents(this.selectedDivContents, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
-            _ => {
-              this.deleteDivHelpContentsFromArray(this.selectedDivContents);
-              this.showLoading = false;
-              this._clearCacheService.clearCache("class help contents deleted");
-            },
-            error => this.handleUpdateError('System error deleting the selected class content(s)', error)
-        );
-      }
-    }
-
-    private deleteDivHelpContentsFromArray(ids : string[]) : void {
-        for(let id of ids) {
-            let iqc = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);
-            let iq = this.divHelpContents.findIndex(_ => _._id == id);
-            this.checkboxes.splice(iqc, 1);
-            this.divHelpContents.splice(iqc, 1);
-        }
-        this.countDivHelpContents();
-    }
-
-    public editDivHelpContent(id : string) {
-        //this.router.navigate(['/pageContents/edit/', _id]);
-        if(this.selectedPageId) {
-          this.router.navigate( ['/classContents/edit/'], { queryParams: { "classContentId": id, "communityId": this.selectedCommunityPid, "pageId": this.selectedPageId  } } );
-        } else {
-          this.router.navigate( ['/classContents/edit/'], { queryParams: { "classContentId": id, "communityId": this.selectedCommunityPid } } );
-        }
-    }
-
-    public toggleDivHelpContents(status : boolean, ids : string[]) {
-      if(!Session.isLoggedIn()){
-        this.router.navigate(['/user-info'], { queryParams: { "errorCode": LoginErrorCodes.NOT_VALID, "redirectUrl":  this.router.url} });
-      } else {
-        this.updateErrorMessage = "";
-
-        this._helpService.toggleDivHelpContents(ids,status, this.properties.adminToolsAPIURL, this.selectedCommunityPid).subscribe(
-            () => {
-                for(let id of ids) {
-                    let i = this.checkboxes.findIndex(_ => _.divHelpContent._id == id);
-                    this.checkboxes[i].divHelpContent.isActive=status;
-                }
-                this.countDivHelpContents();
-                this.applyCheck(false);
-                this._clearCacheService.clearCache("class help contents toggled (status: "+status+")");
-            },
-            error => this.handleUpdateError('System error changing the status of the selected page content(s)', error)
-        );
-      }
-    }
-
-    public divHelpContentSavedSuccessfully(divHelpContent: DivHelpContent) {
-        this.cutContent(divHelpContent);
-        this.checkboxes.push(<CheckDivHelpContent>{divHelpContent : divHelpContent, checked : false});
-        this.divHelpContents.push(divHelpContent);
-        this.applyCheck(false);
-        this.countDivHelpContents();
-    }
-
-    public divHelpContentUpdatedSuccessfully(divHelpContent : DivHelpContent) {
-        this.checkboxes.find(checkItem => checkItem.divHelpContent._id==divHelpContent._id).divHelpContent = divHelpContent;
-        let index = this.divHelpContents.findIndex(checkItem => checkItem._id==divHelpContent._id);
-        this.divHelpContents[index] = divHelpContent;
-        this.applyCheck(false);
-        this.countDivHelpContents();
-    }
-
-
-    public filterDivHelpContent(divHelpContent : DivHelpContent, filters : DivHelpContentFilterOptions) : boolean {
-        let divId: DivId = divHelpContent.divId as DivId;
-        let pages: Page[] = <Page[]>divId.pages;
-        let pageIds: string[] = pages.map(x => x._id);
-
-        let idFlag = filters.id == '' || /*(<Page[]>divId.pages)._id == filters.id*/ pageIds.includes(filters.id);
-        let activeFlag = filters.active == null || divHelpContent.isActive == filters.active;
-        let textFlag = filters.text.toString() == '' || (divHelpContent.content).match(filters.text) != null
-          || ((<DivId>divHelpContent.divId).name).match(filters.text) != null;
-        return idFlag && activeFlag && textFlag;
-    }
-
-    public cutContent(divHelpContent: DivHelpContent) {
-      divHelpContent.content = divHelpContent.content.replace(/<[^>]*>/g, '');
-      divHelpContent.content = divHelpContent.content.replace(/(\r\n|\n|\r| +(?= ))|\s\s+/gm," ");
-      if(divHelpContent.content.length > 200) {
-        divHelpContent.content = divHelpContent.content.substr(0, 200) + "...";
-      }
-    }
-
-    public applyFilter() {
-        this.checkboxes = [];
-        this.divHelpContents.filter(item => this.filterDivHelpContent(item,this.filters)).forEach(
-            _ => {
-              this.cutContent(_);
-              this.checkboxes.push(<CheckDivHelpContent>{divHelpContent: _, checked: false})
-            }
-        );
-        this.countDivHelpContents();
-    }
-
-    public filterByPage(event: any) {
-        this.filters.id = event.target.value;
-        this.applyFilter();
-    }
-
-    public displayAllDivHelpContents() {
-        this.filters.active = null;
-        this.applyFilter();
-    }
-
-    public displayActiveDivHelpContents() {
-        this.filters.active = true;
-        this.applyFilter();
-    }
-
-    public filterBySearch(text : string) {
-        this.filters.text = new RegExp(text, "i");
-        this.applyFilter();
-    }
-
-    public displayInactiveDivHelpContents() {
-        this.filters.active = false;
-        this.applyFilter();
-    }
-
-    handleError(message: string, error) {
-        this.errorMessage = message;
-        console.log('Server responded: ' + error);
-
-        this.showLoading = false;
-    }
-
-    handleUpdateError(message: string, error) {
-        this.updateErrorMessage = message;
-        console.log('Server responded: ' +error);
-
-        this.showLoading = false;
-    }
-
-    public newClassContent() {
-      if(this.selectedPageId) {
-        this.router.navigate( ['/classContents/new'], { queryParams: {communityId: this.selectedCommunityPid, pageId: this.selectedPageId} } );
-      } else {
-        this.router.navigate( ['/classContents/new'], { queryParams: {communityId: this.selectedCommunityPid} } );
-      }
-    }
-}