dashboard/plugins/components/gateway-information/plugin-gateway-information.component.html

@@ -217,7 +217,7 @@
         <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.other > 0 && isEntityEnabled('orp')
          && isRouteEnabled(searchLinkToResults) &&
          isVisible('other')">
-          <icon [name]="'integration_instructions'" [type]="'outlined'" [ratio]="2" [flex]="true"
+          <icon [name]="'apps'" [type]="'outlined'" [ratio]="2" [flex]="true"
                 [customClass]="'uk-margin-small-right uk-text-secondary'"></icon>
           <a [queryParams]="getParamsForSearchLink('other')" [routerLink]="properties.searchLinkToAdvancedResults"
              class="uk-link-reset uk-flex uk-flex-column">

dashboard/plugins/components/graph-info/plugin-graph-info.component.html

@@ -0,0 +1,40 @@
+<div class="uk-background-muted">
+  <div class="uk-position-relative">
+    <div class="uk-section uk-section-large">
+      <div class="uk-container">
+        <div class="uk-grid uk-child-width-1-2@m" uk-grid>
+          <div>
+            <div style="max-width: 550px;">
+              <h2>{{pluginObject.title}}</h2>
+              <div class="">
+                {{pluginObject.paragraph1}}
+
+              </div>
+            </div>
+          </div>
+          <div></div>
+          <img class="uk-visible@m uk-height-1-1 uk-position-top-right"
+               src="assets/common-assets/common/graph-nodes.svg" alt="Graph nodes" loading="lazy">
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="uk-section uk-padding-remove-top">
+    <div class="uk-container">
+      <div class="uk-width-1-2@m uk-margin-auto uk-margin-small-top uk-text-center" style="max-width: 600px;">
+        <div>
+          {{pluginObject.paragraph2}}
+        </div>
+        <div class="uk-margin-top">
+          {{pluginObject.contributeLine}}
+        </div>
+        <div class="uk-margin-top">
+          <a [href]="pluginObject.url.url" [target]="pluginObject.url.target"
+             class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text">
+            {{pluginObject.url.linkText}}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

dashboard/plugins/components/graph-info/plugin-graph-info.component.ts

@@ -0,0 +1,26 @@
+import {Component} from '@angular/core';
+import {PluginBaseComponent, PluginBaseInfo, PluginURL} from "../../utils/base-plugin.component";
+
+export class PluginGraphInfo extends PluginBaseInfo{
+  title:string ="How? It's about open data and collaboration"
+  paragraph1:string = `Gateway is built on the OpenAIRE Graph, one of the largest open scholarly record collections worldwide. Conceived as a public and transparent good, populated out of data sources trusted by scientists, the OpenAIRE Graph brings discovery, monitoring, and assessment of science back in the hands of the scientific community. `;
+  paragraph2:string = "Within a constantly emerging scholarly communication environment, the OpenAIRE Graph is a moving target, continuously integrating new sources, new types or research objects, and embedding access measures. We therefore welcome the community to work with us to improve all its aspects: its coverage (geographic and thematic), quality (disambiguation and semantics) and access (APIs). ";
+  contributeLine:string = "Find information about the OpenAIRE Graph, how to test it and contribute to improving it. ";
+  url:PluginURL= new PluginURL("https://www.openaire.eu/blogs/the-openaire-research-graph","Learn more. Contribute")
+
+  compare(oldObject): any {
+    let newObj=   super.compare(oldObject);
+    console.log(newObj)
+    return newObj;
+  }
+}
+@Component({
+  selector: 'plugin-graph-info',
+  templateUrl: 'plugin-graph-info.component.html'
+})
+export class PluginGraphInfoComponent extends PluginBaseComponent<PluginGraphInfo>{
+  constructor() {
+    super();
+  }
+
+}

dashboard/plugins/components/graph-info/plugin-graph-info.form.component.ts

@@ -0,0 +1,52 @@
+import {Component} from '@angular/core';
+import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
+import {PluginGraphInfo} from "./plugin-graph-info.component";
+
+@Component({
+  selector: 'plugin-graph-info-form',
+  template: `
+    <div *ngIf="pluginObject" class="uk-padding-xsmall">
+      <plugin-field-edit [value]="pluginObject.title"
+                         type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
+      <div class="uk-margin-top">
+        <plugin-field-edit [value]="pluginObject.paragraph1"
+                           type="textarea" field="paragraph1" (changed)="valueChanged($event)"></plugin-field-edit>
+      </div>
+      <div class="uk-margin-top">
+        <plugin-field-edit [value]="pluginObject.paragraph2" class="uk-margin-xsmall-top"
+                           type="textarea" field="paragraph2" (changed)="valueChanged($event)"></plugin-field-edit>
+      </div>
+      <div class="uk-margin-top">
+        <plugin-field-edit [value]="pluginObject.contributeLine" class="uk-margin-xsmall-top"
+                           type="text" field="contributeLine" (changed)="valueChanged($event)"></plugin-field-edit>
+      </div>
+      <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link</div>
+      <div class="uk-margin-small-top">
+        <plugin-field-edit [value]=" pluginObject.url.url"
+                           type="text" field="url"
+                           (changed)="urlValueChanged($event)"></plugin-field-edit>
+      </div>
+      <div class="uk-margin-top">
+        <plugin-field-edit [value]="  pluginObject.url.linkText"
+                           type="text" field="linkText" placeholder="Link text"
+                           (changed)="urlValueChanged($event)"></plugin-field-edit>
+      </div>
+    </div>
+  `,
+
+
+})
+export class PluginGraphInfoFormComponent extends PluginBaseFormComponent<PluginGraphInfo> {
+  constructor() {
+    super()
+
+  }
+
+  urlValueChanged($event: PluginEditEvent) {
+
+    this.pluginObject.url[$event.field] = $event.value;
+    $event.value = this.pluginObject.url;
+    this.valuesChanged.emit({field: "url", value: $event.value, type: 'parent'})
+  }
+
+}

dashboard/plugins/components/graph-info/plugin-graph-info.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {FormsModule} from '@angular/forms';
+import {PluginsService} from "../../../../services/plugins.service";
+import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
+import {InputModule} from "../../../../sharedComponents/input/input.module";
+import {PluginGraphInfoComponent} from "./plugin-graph-info.component";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, FormsModule, PluginFieldEditModule, InputModule
+  ],
+  providers: [
+    PluginsService
+  ],
+  declarations: [PluginGraphInfoComponent],
+  exports: [PluginGraphInfoComponent]
+})
+export class PluginGraphInfoModule {
+
+}

dashboard/plugins/plugins-form/pluginsForm-routing.module.ts

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

dashboard/plugins/plugins-form/pluginsForm.component.html

@@ -0,0 +1,107 @@
+<div class="uk-flex">
+  <aside id="sidebar_main" class="uk-sticky" uk-sticky="start: 0; end: .sidebar_main_swipe">
+    <div sidebar-content>
+      <div  class="back">
+        <a *ngIf="!editSubmenuOpen" (click)="editView = false; selectedTemplate = null; selectedPlugin = null;"
+           class="uk-flex uk-flex-middle uk-flex-center">
+          <div class="uk-width-auto">
+            <icon name="west" ratio="1.3"
+                  [flex]="true"></icon>
+          </div>
+          <span class="uk-text-small">Plugins list</span>
+        </a>
+        <div *ngIf="editSubmenuOpen" class="back uk-margin-bottom">
+          <a (click)="editSubmenuOpen = false" class="uk-flex uk-flex-middle uk-flex-center">
+            <div class="uk-width-auto">
+              <icon name="west" ratio="1.3"
+                    [flex]="true"></icon>
+            </div>
+            <span class="uk-text-small">Plugin Options</span>
+          </a>
+
+        </div>
+        <div *ngIf="templateForm" class="uk-width-auto uk-margin-top uk-margin-left">
+          <button class="uk-button uk-button-default uk-margin-right"
+                  (click)="reset()" [class.uk-disabled]="!templateForm.dirty"
+                  [disabled]="!templateForm.dirty || showLoading">Reset
+          </button>
+          <button class="uk-button uk-button-primary"
+                  [class.uk-disabled]="templateForm.invalid || !templateForm.dirty || templateForm.disabled"
+                  (click)="saveConfirmed(index)"
+                  [disabled]="templateForm.invalid ||!templateForm.dirty || templateForm.disabled || showLoading">Save
+          </button>
+        </div>
+      </div>
+      <div class="menu_section uk-margin-top uk-margin-left">
+
+
+          <form *ngIf="!selectTemplateView" [formGroup]="templateForm" >
+            <div *ngIf="!editSubmenuOpen" class="uk-text-small uk-margin-small-left">Enable
+              <mat-slide-toggle [checked]="templateForm.get('active').value"
+                                (change)="templateForm.get('active').setValue($event.checked); templateForm.markAsDirty()"></mat-slide-toggle>
+            </div>
+            <plugin-wrapper-form [pluginTemplate]="selectedTemplate" [plugin]="this.templateForm.getRawValue()"
+                                 (changed)="pluginFieldChanged($event)"
+                                 [pluginObject]="this.selectedPlugin.object"
+                                 [editSubmenuOpen]="editSubmenuOpen" ></plugin-wrapper-form>
+            <ng-container *ngIf="selectedTemplate || selectedPlugin">
+              <div *ngIf="attrFormArray.controls.length > 0"
+                   class="uk-heading-divider  uk-text-small uk-width-1-1 uk-margin-bottom uk-text-meta">
+                <div class="uk-grid">
+                  <div>Plugin settings</div>
+                </div>
+              </div>
+              <div *ngFor="let attrForm of attrFormArray.controls; let i=index"
+                   class="uk-width-1-1 uk-grid uk-child-width-1-2 uk-margin-top" uk-grid>
+                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'text'" input
+                     [formInput]="attrForm.get('value')"
+                     [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="text"></div>
+                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'URL'" input
+                     [formInput]="attrForm.get('value')"
+                     [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="URL"
+                     [validators]="urlValidator"></div>
+                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'boolean'" input
+                     [formInput]="attrForm.get('value')"
+                     [placeholder]="selectedTemplate.settings[attrForm.get('key').value].name" type="select"
+                     [options]="[{label: 'yes', value:true}, {label: 'no', value:false}]"></div>
+                <div *ngIf="this.selectedTemplate.settings[attrForm.get('key').value].type == 'HTML'"
+                     class="uk-width-1-1">
+                  <label>
+                    {{selectedTemplate.settings[attrForm.get('key').value].name}}:
+                  </label>
+                  <ckeditor [readonly]="false"
+                            debounce="500"
+                            [formControl]="attrForm.get('value')"
+                            [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>
+              </div>
+
+            </ng-container>
+          </form>
+      </div>
+    </div>
+  </aside>
+
+  <div page-content class="uk-width-1-1">
+    <div inner>
+      <div> <!--class="uk-section uk-section-small uk-position-relative" style="min-height: 60vh">-->
+
+        <div *ngIf="showLoading" class="uk-position-center">
+          <loading></loading>
+        </div>
+        <ng-container *ngIf="editView">
+          <plugin-wrapper *ngIf="this.templateForm" [pluginTemplate]="selectedTemplate"
+                          [plugin]="this.templateForm.getRawValue()"
+                          [pluginObject]="this.selectedPlugin.object"
+                          class="uk-width-1-1"></plugin-wrapper>
+        </ng-container>
+      </div>
+    </div>
+  </div>
+</div>

dashboard/plugins/plugins-form/pluginsForm.component.ts

@@ -0,0 +1,421 @@
+import {Component, ElementRef, OnInit} from '@angular/core';
+import {ActivatedRoute, Router} from "@angular/router";
+import {HelpContentService} from "../../../services/help-content.service";
+import {
+  FormArray,
+  FormGroup,
+  UntypedFormArray,
+  UntypedFormBuilder,
+  UntypedFormGroup,
+  ValidatorFn,
+  Validators
+} from "@angular/forms";
+import {Page} from "../../../utils/entities/adminTool/page";
+import {EnvProperties} from '../../../utils/properties/env-properties';
+import {HelperFunctions} from "../../../utils/HelperFunctions.class";
+import {Subscriber} from "rxjs";
+import {properties} from "../../../../../environments/environment";
+import {PortalUtils} from "../../portal/portalHelper";
+import {Option} from "../../../sharedComponents/input/input.component";
+import {Title} from "@angular/platform-browser";
+import {ClearCacheService} from "../../../services/clear-cache.service";
+import {NotificationHandler} from "../../../utils/notification-handler";
+import {PluginsService} from "../../../services/plugins.service";
+import {Plugin} from "../../../utils/entities/adminTool/plugin";
+import {StringUtils} from "../../../utils/string-utils.class";
+import {Portal} from "../../../utils/entities/adminTool/portal";
+import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
+import {PluginUtils} from "../utils/pluginUtils";
+import {CommunityService} from "../../../connect/community/community.service";
+import {CommunityInfo} from "../../../connect/community/communityInfo";
+import {PluginEditEvent} from "../utils/base-plugin.form.component";
+
+@Component({
+  selector: 'plugins-form',
+  templateUrl: './pluginsForm.component.html',
+})
+export class PluginsFormComponent implements OnInit {
+  private selectedId: string;
+  public pluginsByPlacement: Map<string,{plugin:Plugin, template:PluginTemplate}[]> = new Map();
+  public plugins: Plugin[] = [];
+  public pluginTemplates: PluginTemplate[] = [];
+  public selectedTemplate: PluginTemplate = null;
+  public selectedPlugin: Plugin = null;
+  public editView = false;
+  public selectTemplateView = false;
+  public templateForm: UntypedFormGroup;
+  public pagesCtrl: UntypedFormArray;
+  urlValidator: ValidatorFn = StringUtils.urlValidator;
+  private searchText: RegExp = new RegExp('');
+  public keyword: string = "";
+  public properties: EnvProperties = properties;
+  public formPages: Page[] = [];
+  public showLoading: boolean = true;
+  private subscriptions: any[] = [];
+  public allPages: Option[] = [];
+  public pluginUtils = new PluginUtils();
+  selectedCommunityPid = null;
+  public portalUtils: PortalUtils = new PortalUtils();
+  private index: number;
+  public portal: string;
+  public selectedPageId: string;
+  public community: Portal;
+  public page: Page;
+  public templateView = false;
+  public templateCode:string = null;
+  public template;
+  public selectedPlacementView = "all";
+  communityInfo:CommunityInfo = null;
+  editSubmenuOpen = false;
+  constructor(private element: ElementRef, private route: ActivatedRoute, private _router: Router,
+              private communityService: CommunityService,
+              private title: Title, private _helpContentService: HelpContentService,
+              private _pluginsService: PluginsService, private _fb: UntypedFormBuilder,
+              private _clearCacheService: ClearCacheService) {
+  }
+
+  ngOnInit() {
+    this.title.setTitle('Administrator Dashboard | Plugins');
+    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
+      community => {
+        this.communityInfo = community;
+      }));
+    this.subscriptions.push(this.route.params.subscribe(params => {
+
+      this.portal = (this.route.snapshot.data.portal) ? this.route.snapshot.data.portal : this.route.snapshot.params[this.route.snapshot.data.param];
+      this.selectedCommunityPid = params.community;
+
+      this.subscriptions.push(this.route.queryParams.subscribe(params => {
+        HelperFunctions.scroll();
+        this.selectedPageId = params['pageId'];
+        if (this.portal && this.selectedPageId) {
+          this.getPage(this.selectedPageId);
+        }
+        if (!this.selectedPageId && !this.templateView) {
+          this._router.navigate(['../pages'], {relativeTo: this.route});
+        }
+      }));
+    }));
+
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(value => {
+      if (value instanceof Subscriber) {
+        value.unsubscribe();
+      } else if (value instanceof Function) {
+        value();
+      }
+    });
+  }
+
+  getTemplateById(id) {
+    for (let template of this.pluginTemplates) {
+      if (template._id == id) {
+        return template;
+      }
+    }
+    return null;
+  }
+
+  getPage(pageId: string) {
+    this.showLoading = true;
+    this.subscriptions.push(this._helpContentService.getPageByPortal(pageId, this.properties.adminToolsAPIURL, this.portal).subscribe(
+      page => {
+        if (this.properties.adminToolsPortalType != page.portalType) {
+          this._router.navigate(['./pageContents']);
+        } else {
+          this.page = page;
+          this.getPagePlugins();
+        }
+      },
+      error => this.handleError('System error retrieving page', error)));
+  }
+
+  getPagePlugins() {
+    this.showLoading = true;
+    this.subscriptions.push(this._pluginsService.getPluginTemplatesByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe(
+      templates => {
+        this.pluginTemplates = templates;
+
+        this.subscriptions.push(this._pluginsService.getPluginsByPage(this.properties.adminToolsAPIURL, this.selectedCommunityPid, this.selectedPageId).subscribe(
+          plugins => {
+            this.plugins = plugins;
+            this.pluginsByPlacement = new Map();
+            for(let pos of this.pluginUtils.placementsOptions){
+              this.pluginsByPlacement.set(pos.value,[]);
+            }
+            let self = this;
+            this.pluginTemplates.forEach(_ => {
+              let plugin:Plugin = null;
+              for(let pl of plugins){
+                if (pl.templateId == _._id){
+                  plugin = pl;
+                }
+              }
+              if(!plugin){
+                plugin = new Plugin(this.selectedPageId, this.selectedCommunityPid,_);
+                this.plugins.push(plugin);
+              }
+              plugin.object = PluginUtils.initializeObjectAndCompare(_.code,plugin.object)
+              this.pluginsByPlacement.get(plugin.placement).push({plugin: plugin, template: _ });
+            });
+            for(let placement of this.pluginUtils.placementsOptions){
+              this.pluginsByPlacement.get(placement.value).sort(function (a, b) {
+                return a.plugin.order - b.plugin.order;
+              })
+            }
+            this.showLoading = false;
+          },
+          error => this.handleError('System error retrieving plugins', error)));
+
+      },
+      error => this.handleError('System error retrieving templates', error)));
+  }
+
+  public edit(plugin:Plugin, template:PluginTemplate, placement, index) {
+    this.editView = true;
+    this.selectedPlugin = JSON.parse(JSON.stringify(plugin)); // deep copy object with nested objects
+    this.selectedTemplate = template;
+    this.index = index;
+    this.pagesCtrl = this._fb.array([], Validators.required);
+    this.templateForm = this._fb.group({
+      _id: this._fb.control(plugin._id),
+      pid: this._fb.control(this.selectedCommunityPid),
+      page: this._fb.control(plugin.page),
+      templateCode: this._fb.control(plugin.templateCode, Validators.required),
+      templateId: this._fb.control(plugin.templateId, Validators.required),
+      placement: this._fb.control(plugin.placement),
+      order: this._fb.control(plugin.order),
+      active: this._fb.control(plugin.active),
+      values: this._fb.array([]),
+    });
+
+    if (template.settings) {
+      for (let attrKey of Object.keys(template.settings)) {
+        (this.templateForm.get("values") as FormArray).push(this._fb.group({
+            'key': this._fb.control(attrKey),
+            'value': this._fb.control(plugin.settingsValues[attrKey]?plugin.settingsValues[attrKey]:template.settings[attrKey].value)
+          }
+        ));
+      }
+    }
+  }
+
+  public newPluginSelectTemplate() {
+    this.selectedPlugin = null;
+    this.editView = true;
+    if(!this.templateView) {
+      this.selectedTemplate = null;
+      this.selectTemplateView = true;
+    }else{
+      this.newPlugin( Object.assign({}, this.template));
+    }
+  }
+
+  public newPlugin(template) {
+    this.selectedTemplate = template;
+    this.templateForm = this._fb.group({
+      _id: this._fb.control(null),
+      pid: this._fb.control(this.selectedCommunityPid),
+      page: this._fb.control(this.selectedPageId),
+      code: this._fb.control(this.selectedTemplate.code, Validators.required),
+      placement: this._fb.control(this.selectedTemplate.placement),
+      order: this._fb.control(""),
+      active: this._fb.control(false),
+      isPriorTo: this._fb.control(false),
+      values: this._fb.array([]),
+      object: this._fb.control({})
+    });
+    for (let attrKey of Object.keys(this.selectedTemplate.settings)) {
+      (this.templateForm.get("values") as FormArray).push(this._fb.group({
+        key: this._fb.control(attrKey),
+        value: this._fb.control(this.selectedTemplate.settings[attrKey].value ? this.selectedTemplate.settings[attrKey].value : ""),
+      }));
+
+    }
+    this.selectTemplateView = false;
+
+  }
+
+  public saveConfirmed(index) {
+    this.showLoading = true;
+    let plugin: Plugin = <Plugin>this.templateForm.getRawValue();
+    plugin.object = this.selectedPlugin.object;
+    plugin.settingsValues = new Map<string, string>();
+    for (let fields of this.templateForm.getRawValue().values) {
+      plugin.settingsValues[fields.key] = fields.value;
+    }
+    let update = (plugin._id) ? true : false;
+    this.savePlugin(plugin,update, this.index)
+  }
+  public savePlugin(plugin, update, index){
+    this.subscriptions.push(this._pluginsService.savePlugin(plugin, this.properties.adminToolsAPIURL).subscribe(
+      saved => {
+        this.savedSuccessfully(saved, update, index);
+        this.editView = false;
+        this.selectTemplateView = false;
+        this.selectedTemplate = null;
+        this.selectedPlugin = null;
+      },
+      error => this.handleUpdateError("System error creating template", error)
+    ));
+  }
+
+  public savedSuccessfully(plugin: Plugin, update: boolean, index) {
+    console.log(plugin.placement, index, update)
+    if (update) {
+      this.pluginsByPlacement.get(plugin.placement)[index].plugin = plugin;
+    } else {
+      this.plugins.push(plugin);
+    }
+    this.showLoading = false;
+  }
+
+  public filterPlugins(plugin: Plugin, template: PluginTemplate): boolean {
+    let values =[];
+    for(let key of this.getKeys(plugin.settingsValues)){
+      values.push(plugin.settingsValues[key]);
+    }
+    return this.searchText.toString() == '' || (plugin.templateCode + ' ' +values.join(' ') +   (template?(template.name + ' ' +template.description):'')).match(this.searchText) != null;
+  }
+
+
+  handleUpdateError(message: string, error = null) {
+    if (error) {
+      console.log('Server responded: ' + error);
+    }
+    NotificationHandler.rise(message, 'danger');
+    this.showLoading = false;
+  }
+
+  handleError(message: string, error = null) {
+    if (error) {
+      console.log('Server responded: ' + error);
+    }
+    NotificationHandler.rise(message, 'danger');
+    this.showLoading = false;
+  }
+
+  getPages() {
+    this.showLoading = true;
+    this.subscriptions.push(this._helpContentService.getAllPages(this.properties.adminToolsAPIURL).subscribe(
+      pages => {
+        this.allPages = [];
+        pages.forEach(page => {
+          this.allPages.push({
+            label: page.name + " [" + page.portalType + "]",
+            value: page
+          });
+        });
+        this.showLoading = false;
+      },
+      error => this.handleError('System error retrieving pages', error)
+    ));
+  }
+
+  get attrFormArray() {
+
+    return this.templateForm.get("values") as FormArray;
+
+  }
+
+  attributeTypeChanged(form) {
+    let type = form.get("value").get("type");
+    form.get("value").setValue("");
+    if (type == "boolean") {
+      form.get("value").setValue(false);
+    }
+  }
+
+  public getPagesAsString(pageIds): string {
+
+    let pages = [];
+    for (let id of pageIds) {
+      pages.push(this.allPages.filter(option => option.value._id == id).map((option => option.value.name)));
+
+    }
+    return pages.join(", ");
+  }
+
+  public getPageById(pageId) {
+    for (let option of this.allPages) {
+      if (option.value._id == pageId) {
+        return option.value;
+      }
+    }
+    return pageId;
+  }
+
+  getKeys(obj) {
+    return obj?Object.keys(obj):[];
+  }
+
+  reset() {
+    if (this.selectedPlugin) {
+
+      this.edit(this.pluginsByPlacement.get(this.selectedTemplate.placement)[this.index].plugin, this.selectedTemplate, this.selectedTemplate.placement, this.index)
+    } else {
+      this.newPlugin(this.selectedTemplate)
+    }
+  }
+
+
+  public togglePlugin(status: boolean, id: string,i, placement) {
+    this.index = i;
+    this.selectedTemplate = this.pluginsByPlacement.get(placement)[i].template;
+    if(id) {
+      this.subscriptions.push(this._pluginsService.togglePages(id, status, this.properties.adminToolsAPIURL).subscribe(
+        () => {
+
+          this.pluginsByPlacement.get(placement)[i].plugin.active = status;
+          this._clearCacheService.clearCache("Plugin's status changed");
+          this._clearCacheService.purgeBrowserCache("Plugin's status changed", this.portal);
+        },
+        error => this.handleUpdateError('System error changing the status of Plugin', error)
+      ));
+    }else{
+      let plugin = this.pluginsByPlacement.get(placement)[i].plugin;
+      plugin.active = status;
+      this.savePlugin(plugin, true, i);
+    }
+  }
+  pluginFieldChanged($event:PluginEditEvent){
+    if($event.type == "open-submenu"){
+      this.editSubmenuOpen = true;
+      return;
+    }
+    if($event.type == "close-submenu"){
+
+      this.editSubmenuOpen = false;
+      return;
+    }
+    this.selectedPlugin.object[$event.field]=$event.value;
+    this.templateForm.markAsDirty();
+  }
+
+  public swap(pluginToMoveUp, pluginToMoveDown, placement ){
+    this.showLoading = true;
+    let moveUpGroup = this.pluginsByPlacement.get(placement)[pluginToMoveUp];
+    let moveDownGroup = this.pluginsByPlacement.get(placement)[pluginToMoveDown];
+    this.pluginsByPlacement.get(placement)[pluginToMoveUp] = moveDownGroup;
+    this.pluginsByPlacement.get(placement)[pluginToMoveDown] = moveUpGroup;
+    this.move(moveUpGroup.plugin,true, pluginToMoveDown, placement);
+    this.move(moveDownGroup.plugin,false, pluginToMoveUp, placement);
+    this.showLoading = false;
+  }
+  public move(plugin: Plugin, up:boolean, index, placement) {
+    if(plugin._id) {
+      this.subscriptions.push(this._pluginsService.updatePluginOrder(plugin, this.properties.adminToolsAPIURL, up ? -1 : 1).subscribe(
+        saved => {
+        this.pluginsByPlacement.get(placement)[index].plugin = saved;
+        },
+        error => this.handleUpdateError("System error creating template", error)
+      ));
+    }else{
+
+      plugin.order = plugin.order + (up ? -1 : 1)
+      this.savePlugin(plugin, true, index);
+    }
+  }
+}

dashboard/plugins/plugins-form/pluginsForm.module.ts

@@ -0,0 +1,41 @@
+import {NgModule} from '@angular/core';
+import {RouterModule} from '@angular/router';
+import {CommonModule} from '@angular/common';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {AdminToolServiceModule} from "../../../services/adminToolService.module";
+import {InputModule} from "../../../sharedComponents/input/input.module";
+
+
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatCheckboxModule} from "@angular/material/checkbox";
+import {MatFormFieldModule} from "@angular/material/form-field";
+
+
+import {MatChipsModule} from '@angular/material/chips';
+import {AdminTabsModule} from "../../sharedComponents/admin-tabs/admin-tabs.module";
+import {PageContentModule} from "../../sharedComponents/page-content/page-content.module";
+import {SearchInputModule} from "../../../sharedComponents/search-input/search-input.module";
+import {IconsModule} from "../../../utils/icons/icons.module";
+import {LoadingModule} from "../../../utils/loading/loading.module";
+import {PluginsService} from "../../../services/plugins.service";
+import {CKEditorModule} from "ng2-ckeditor";
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {PluginWrapperModule} from "../wrapper/plugin-wrapper.module";
+import {SideBarModule} from "../../sharedComponents/sidebar/sideBar.module";
+import {PluginEditWrapperModule} from "../wrapper/plugin-edit-wrapper.module";
+import {PluginsFormComponent} from "./pluginsForm.component";
+import {PluginsFormRoutingModule} from "./pluginsForm-routing.module";
+
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, FormsModule,
+     ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
+    MatCheckboxModule, AdminTabsModule, PageContentModule, PluginsFormRoutingModule, SearchInputModule, IconsModule, LoadingModule, CKEditorModule,
+    MatSlideToggleModule, PluginWrapperModule, SideBarModule, PluginEditWrapperModule
+  ],
+  providers:[PluginsService],
+  declarations: [PluginsFormComponent],
+    exports: [PluginsFormComponent]
+})
+export class PluginsFormModule {}

dashboard/plugins/utils/plugin-field-edit.component.ts

@@ -19,6 +19,7 @@ import {PluginEditEvent} from "./base-plugin.form.component";
                [ngModel]="getSelectedPages().length ==checkboxes.length"/>-->
         <input  *ngIf="type == 'checkbox'" [(ngModel)]="value" [checked]="value" (ngModelChange)="updateObject($event)"   type="checkbox"   class="uk-checkbox">
         <div  *ngIf="type == 'text'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="text"  (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
+        <div  *ngIf="type == 'textarea'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea"  (valueChange)="updateObject($event)" inputClass=" border-bottom "></div>
         <!--<div  *ngIf="type == 'URL'" input [value]="value" [placeholder]="name" type="URL" ></div>
         <div  *ngIf="type == 'HTML'"  class="uk-width-1-1">
           <ckeditor  [readonly]="false"

dashboard/plugins/utils/pluginUtils.ts

@@ -9,6 +9,7 @@ import {PluginHowToUse} from "../components/how-to-use/plugin-how-to-use.compone
 import {PluginSearchDepositLink} from "../components/search-deposit-link/plugin-search-deposit-link.component";
 import {PluginOrganizations} from "../components/organizations/plugin-organizations.component";
 import {PluginSuggestedRepositories} from "../components/suggested-repositories/plugin-suggested-repositories.component";
+import {PluginGraphInfo} from "../components/graph-info/plugin-graph-info.component";
 
 export class PluginUtils{
   public attrTypeOptions: Option[] = [
@@ -18,7 +19,7 @@ export class PluginUtils{
     {label:"URL", value:"URL"},
   ];
 
-  public availablePluginCodes: Option[] = [
+  public availablePluginCodesOptions: Option[] = [
     {label:"OpenAIRE products", value:"openaire-products"},
     {label:"Discover by subcommunity", value:"discover-by-subcommunity"},
     {label:"Gateway information", value:"gateway-information"},
@@ -32,8 +33,8 @@ export class PluginUtils{
     {label:"Graph info", value:"graph-info"},
     {label:"Social", value:"social"},
     {label:"Contact us", value:"organizations"},
-
+  ];
-
+  public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "fos-sdgs", "graph-info", "social", "organizations"
   ];
   public placementsOptions: Option[] = [
     {label:"Right", value:"right"},
@@ -78,6 +79,9 @@ export class PluginUtils{
       case 'organizations': {
         return (new PluginOrganizations()).compare(oldObject);
       }
+      case 'graph-info': {
+        return (new PluginGraphInfo()).compare(oldObject);
+      }
       default: {
         return (new PluginBaseInfo()).compare(oldObject);
       }

dashboard/plugins/wrapper/plugin-edit-wrapper.component.ts

@@ -2,12 +2,15 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {Plugin} from "../../../utils/entities/adminTool/plugin";
 import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
 import {PluginEditEvent} from "../utils/base-plugin.form.component";
+import {PluginUtils} from "../utils/pluginUtils";
 
 @Component({
   selector: 'plugin-wrapper-form',
   template: `
         <div class="uk-margin-small-right uk-margin-top" *ngIf="pluginObject">
-        <ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
+          <ng-container *ngIf="pluginTemplate.code  && pluginUtils.availablePluginCodes.indexOf(pluginTemplate.code) != -1; else noplugin">
+
+          <ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
           <plugin-openaire-products-form [pluginTemplate]="pluginTemplate" [plugin]="plugin" [pluginObject]="pluginObject" (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-openaire-products-form>
         </ng-container>
         <ng-container *ngIf="pluginTemplate.code == 'discover-by-subcommunity'">
@@ -34,6 +37,15 @@ import {PluginEditEvent} from "../utils/base-plugin.form.component";
           <ng-container *ngIf="pluginTemplate.code == 'organizations'">
             <plugin-organizations-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-organizations-form>
           </ng-container>
+          <ng-container *ngIf="pluginTemplate.code == 'graph-info'">
+            <plugin-graph-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-graph-info-form>
+          </ng-container>
+        </ng-container>
+          <ng-template #noplugin>
+            <div   class="uk-text-muted uk-text-center">
+              No plugin available
+            </div>
+          </ng-template>
         </div>
       
   `,
@@ -47,6 +59,7 @@ export class PluginEditWrapperComponent implements OnInit {
   @Input() pluginObject;
   @Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter();
   @Input() editSubmenuOpen;
+  pluginUtils = new PluginUtils();
 
   ngOnInit(): void {
   }

dashboard/plugins/wrapper/plugin-edit-wrapper.module.ts

@@ -14,13 +14,14 @@ import {PluginOrganizationsFormComponent} from "../components/organizations/plug
 import {IconsModule} from "../../../utils/icons/icons.module";
 import {PluginHowToUseFormComponent} from "../components/how-to-use/plugin-how-to-use.form.component";
 import {PluginSuggestedRepositoriesFormComponent} from "../components/suggested-repositories/plugin-suggested-repositories.form.component";
+import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-graph-info.form.component";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
   ],
   declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent,
-    PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent],
+    PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent],
   exports: [PluginEditWrapperComponent]
 
 })

dashboard/plugins/wrapper/plugin-wrapper.component.ts

@@ -1,12 +1,13 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {Plugin} from "../../../utils/entities/adminTool/plugin";
 import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
+import {PluginUtils} from "../utils/pluginUtils";
 
 @Component({
   selector: 'plugin-wrapper',
   template: `
     <ng-container *ngIf="pluginTemplate && pluginObject">
-      <div>
+      <div *ngIf="pluginTemplate.code  && pluginUtils.availablePluginCodes.indexOf(pluginTemplate.code) != -1; else noplugin">
         <ng-container *ngIf="pluginTemplate.code == 'openaire-products'">
           <plugin-openaire-products [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  ></plugin-openaire-products>
         </ng-container>
@@ -34,7 +35,15 @@ import {PluginTemplate} from "../../../utils/entities/adminTool/pluginTemplate";
         <ng-container *ngIf="pluginTemplate.code == 'organizations'">
           <plugin-organizations [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  ></plugin-organizations>
         </ng-container>
+        <ng-container *ngIf="pluginTemplate.code == 'graph-info'">
+          <plugin-graph-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  ></plugin-graph-info>
+        </ng-container>
       </div>
+      <ng-template #noplugin>
+        <div   class="uk-text-muted uk-text-center">
+          No plugin available
+        </div>
+      </ng-template>
     </ng-container>
   `
 })
@@ -42,7 +51,7 @@ export class PluginWrapperComponent implements OnInit {
   @Input() plugin:Plugin;
   @Input() pluginObject;
   @Input() pluginTemplate:PluginTemplate;
-
+  pluginUtils = new PluginUtils();
   ngOnInit(): void {
 
   }

dashboard/plugins/wrapper/plugin-wrapper.module.ts

@@ -12,12 +12,13 @@ import {PluginHowToUseModule} from '../components/how-to-use/plugin-how-to-use.m
 import {PluginSuggestedRepositoriesModule} from '../components/suggested-repositories/plugin-suggested-repositories.module';
 import {PluginFeaturedDatasetsModule} from '../components/featured-datasets/plugin-featured-datasets.module';
 import {PluginOrganizationsModule} from "../components/organizations/plugin-organizations.module";
+import {PluginGraphInfoModule} from "../components/graph-info/plugin-graph-info.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
     PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginLearnAndConnectModule,
-    PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule
+    PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule
   ],
   declarations: [PluginWrapperComponent],
   exports: [PluginWrapperComponent]