[plugins-functionality | DONE | ADDED ] add generic plugin card info, add search bar plugin, remove separate learn and connect

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

@@ -1,15 +1,17 @@
 import {Component, Input, SimpleChanges} from '@angular/core';
-import {PluginHowToUse} from "./plugin-how-to-use.component";
 import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
+import {PluginCardInfo} from "./plugin-card-info.component";
 
 @Component({
-  selector: 'plugin-how-to-use-form',
+  selector: 'plugin-card-info-form',
   template: `
     <div *ngIf="pluginObject" class="uk-padding-xsmall">
       <ng-container *ngIf="selectedIndex == -1">
         <plugin-field-edit [value]=" pluginObject.title"
                            type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
-
+        <plugin-field-edit [value]=" pluginObject.description"
+                           type="textarea" field="description" (changed)="valueChanged($event)"></plugin-field-edit>
+        <hr class="uk-margin-left">
         <div class="uk-margin-top uk-text-muted">
           Cards:
         </div>
@@ -59,7 +61,14 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
         </div>
         <div class="uk-margin-top">
           <plugin-field-edit [value]="  pluginObject.cardInfoArray[selectedIndex].description"
-                             type="text" field="description"
+                             type="textarea" field="description"
+                             (changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
+        </div>
+        <hr class="uk-margin-left">
+        <div class="uk-margin-top">
+          <a href="https://fonts.google.com/icons" target="_blank" class="uk-text-xsmall uk-float-right">Check icons</a>
+          <plugin-field-edit [value]="  pluginObject.cardInfoArray[selectedIndex].icon"
+                             type="text" field="icon" placeholder="Material icon"
                              (changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
         </div>
         <ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index ">
@@ -82,7 +91,7 @@ import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.
 
 
 })
-export class PluginHowToUseFormComponent extends PluginBaseFormComponent<PluginHowToUse> {
+export class PluginCardInfoFormComponent extends PluginBaseFormComponent<PluginCardInfo> {
   selectedIndex = -1;
   @Input() editSubmenuOpen;
 

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

@@ -1,15 +1,16 @@
-<div class="plugin-how-to-use uk-container uk-container-large uk-section">
+<div *ngIf="pluginObject" class="plugin-how-to-use uk-container uk-container-large uk-section">
   <h3 class="uk-h2 uk-margin-large-bottom">
     {{pluginObject.title}}
   </h3>
+  <p *ngIf="pluginObject.description && pluginObject.description.length > 0"> {{pluginObject.description}}</p>
   <div class="uk-padding" uk-height-match=".title">
     <div class="uk-padding uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-grid-large" uk-grid
          uk-height-match=".description">
       <ng-container *ngFor="let card of pluginObject.cardInfoArray">
         <ng-container *ngIf="card.show">
           <div class="uk-flex uk-flex-column uk-flex-middle">
-            <div class="uk-card uk-card-default uk-card-body">
+            <div *ngIf="card.icon" class="uk-card uk-card-default uk-card-body">
-              <icon [name]="'description'" [type]="'outlined'" [ratio]="3" [flex]="true"></icon>
+              <icon [name]="card.icon" [type]="'outlined'" [ratio]="3" [flex]="true"></icon>
             </div>
             <h5 class="title">
               {{card.title}}

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

@@ -0,0 +1,24 @@
+import {Component} from '@angular/core';
+import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
+export class PluginCardInfo extends PluginBaseInfo{
+  title:string ="Lorem ipsum";
+  description:string = "Lorem ipsum";
+  cardInfoArray: PluginInfoCards[] = [
+    {title: "Card 1", description: "Lorem ipsum", icon:"description", urlsArray:[ new PluginURL("https://exapmle.com","View all")], show:true},
+    {title: "Card 2", description: "Lorem ipsum", icon:"description", urlsArray:[ new PluginURL("https://exapmle.com","")/*,  new PluginURL("","Guide for the managers")*/], show:true},
+    {title: "Card 3", description: "Lorem ipsum", icon:"description", urlsArray:[ new PluginURL("https://exapmle.com","View all")], show:true}
+  ];
+  compare(oldObject){
+   oldObject =  super.compare(oldObject)
+    return oldObject;
+  }
+}
+@Component({
+  selector: 'plugin-card-info',
+  templateUrl: 'plugin-card-info.component.html'
+})
+export class PluginCardInfoComponent extends PluginBaseComponent<PluginCardInfo>{
+  constructor() {
+    super()
+  }
+}

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

@@ -8,17 +8,17 @@ import {NumberRoundModule} from "../../../../utils/pipes/number-round.module";
 import {IconsService} from "../../../../utils/icons/icons.service";
 import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module";
 import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
-import {PluginHowToUseComponent} from './plugin-how-to-use.component';
+import {PluginCardInfoComponent} from "./plugin-card-info.component";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule
   ],
   providers:[PluginsService],
-  declarations: [PluginHowToUseComponent],
+  declarations: [PluginCardInfoComponent],
-  exports: [PluginHowToUseComponent]
+  exports: [PluginCardInfoComponent]
 })
-export class PluginHowToUseModule {
+export class PluginCardInfoModule {
   constructor(private iconsService: IconsService) {
     this.iconsService.registerIcons([])
   }

dashboard/plugins/components/how-to-use/plugin-how-to-use.component.ts

@@ -1,27 +0,0 @@
-import {Component} from '@angular/core';
-import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
-export class PluginHowToUse extends PluginBaseInfo{
-  title:string ="How to use the gateway?";
-  cardInfoArray: PluginInfoCards[] = [
-    {title: "Tutorials", description: "Mini-video tutorials for gateway managers", urlsArray:[ new PluginURL("https://www.youtube.com/playlist?list=PL0c4IRNUxuKcyRUQ_J9BH_EE1amXU6kgp","View all")], show:true},
-    {title: "Guides", description: "Textual guides on gateway functionalities.", urlsArray:[ new PluginURL("https://www.openaire.eu/research-community-gateway-guide","Guide for the users")/*,  new PluginURL("","Guide for the managers")*/], show:true},
-    {title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.", urlsArray:[ new PluginURL("","View all")], show:true}
-  ];
-  compare(oldObject){
-   oldObject =  super.compare(oldObject)
-
-    for(let card of this.cardInfoArray){
-
-    }
-    return oldObject;
-  }
-}
-@Component({
-  selector: 'plugin-how-to-use',
-  templateUrl: 'plugin-how-to-use.component.html'
-})
-export class PluginHowToUseComponent extends PluginBaseComponent<PluginHowToUse>{
-  constructor() {
-    super()
-  }
-}

dashboard/plugins/components/learn-and-connect/plugin-learn-and-connect.component.html

@@ -1,33 +0,0 @@
-<div class="plugin-learn-and-connect uk-container uk-container-large uk-section">
-  <h3 class="uk-h2 uk-margin-large-bottom">
-    {{pluginObject.title}}
-  </h3>
-  <div class="uk-padding" uk-height-match=".title">
-    <div
-         class="uk-padding uk-grid uk-child-width-1-3@m uk-child-width-1-1 uk-grid-large" uk-grid uk-height-match=".description">
-      <ng-container  *ngFor="let card of pluginObject.cardInfoArray">
-        <ng-container *ngIf="card.show">
-      <div
-           class="uk-flex uk-flex-column uk-flex-middle">
-        <div class="uk-card uk-card-default uk-card-body">
-          <icon [name]="'description'" [type]="'outlined'" [ratio]="3" [flex]="true"></icon>
-        </div>
-        <h5 class="title">
-          {{card.title}}
-        </h5>
-        <div class="uk-text-center uk-margin-bottom description">
-          {{card.description}}
-        </div>
-        <a *ngFor="let url of card.urlsArray" [href]="url.url" class="uk-display-inline-block uk-text-uppercase uk-button uk-button-text uk-text-default" [target]="url.target"
-        [class.uk-hidden]="!(url.url && url.url.length > 0)">
-          {{url.linkText}}
-        </a>
-      </div>
-        </ng-container>
-      </ng-container>
-    </div>
-
-      <!-- icon1, title1, description1, link1 -->
-
-  </div>
-</div>

dashboard/plugins/components/learn-and-connect/plugin-learn-and-connect.component.ts

@@ -1,20 +0,0 @@
-import {Component} from '@angular/core';
-import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
-export class PluginLearnAndConnect extends PluginBaseInfo{
-  title:string ="Learn & Connect with Open Science";
-  cardInfoArray:PluginInfoCards[] = [
-    {title: "OS Practices", description: "Open Science best practices for your community, policies and mandates.",
-      urlsArray:[ new PluginURL("","")], show:true},
-    {title: "OS Guides for beginners", description: "New to Open Science? Learn the basics!",urlsArray:[ new PluginURL("https://www.openaire.eu/guides","Learn more")], show:true},
-    {title: "Webinars", description: "Recordings and slides of webinars on different aspects of Open Science.",urlsArray:[ new PluginURL("https://www.openaire.eu/support/webinars","Learn more")], show:true}
-  ];
-}
-@Component({
-  selector: 'plugin-learn-and-connect',
-  templateUrl: 'plugin-learn-and-connect.component.html'
-})
-export class PluginLearnAndConnectComponent extends PluginBaseComponent<PluginLearnAndConnect>{
-  constructor() {
-    super()
-  }
-}

dashboard/plugins/components/learn-and-connect/plugin-learn-and-connect.form.component.ts

@@ -1,124 +0,0 @@
-import {Component, Input, SimpleChanges} from '@angular/core';
-import {PluginLearnAndConnect} from "./plugin-learn-and-connect.component";
-import {PluginBaseFormComponent, PluginEditEvent} from "../../utils/base-plugin.form.component";
-
-@Component({
-  selector: 'plugin-learn-and-connect-form',
-  template: `
-    <div *ngIf="pluginObject" class="uk-padding-xsmall">
-      <ng-container *ngIf="selectedIndex == -1">
-        <plugin-field-edit [value]=" pluginObject.title"
-                           type="text" field="title" (changed)="valueChanged($event)"></plugin-field-edit>
-
-        <div class="uk-margin-top uk-text-muted">
-          Cards:
-        </div>
-
-        <ng-container *ngFor="let card of  pluginObject.cardInfoArray;  let i = index">
-          <div class="uk-grid uk-grid-small uk-margin-xsmall-top">
-            <div *ngIf="selectedIndex != i" class="uk-text-small uk-width-expand">
-              <plugin-field-edit [value]=" pluginObject.cardInfoArray[i].show" type="checkbox" field="cardInfoArray"
-                                 (editClicked)="pluginEditEvent = $event"
-                                 (changed)="cardShowChanged(i,$event)"></plugin-field-edit>
-              {{card.title}}
-            </div>
-
-            <div class="uk-padding-remove-left uk-margin-medium-right">
-              <button
-                  class="uk-button uk-button-link uk-flex uk-flex-middle" (click)="edit(i)">
-                <icon name="edit" [flex]="true"></icon>
-              </button>
-            </div>
-          </div>
-
-        </ng-container>
-      </ng-container>
-      <ng-container *ngIf="selectedIndex > -1">
-        <div *ngIf="editTemplate" class="back uk-margin-bottom">
-          <a (click)="close()" 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 class="uk-margin-top">
-          <plugin-field-edit [value]="pluginObject.cardInfoArray[selectedIndex].title"
-                             type="text" field="title"
-                             (changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
-        </div>
-        <div class="uk-margin-top">
-          <plugin-field-edit [value]="  pluginObject.cardInfoArray[selectedIndex].description"
-                             type="text" field="description"
-                             (changed)="cardValueChanged(selectedIndex, $event)"></plugin-field-edit>
-        </div>
-        <ng-container *ngFor="let cardUrl of pluginObject.cardInfoArray[selectedIndex].urlsArray; let j = index ">
-          <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link #{{j + 1}}</div>
-          <div class="uk-margin-small-top">
-            <plugin-field-edit [value]=" cardUrl.url"
-                               type="text" field="url"
-                               (changed)="cardUrlValueChanged(selectedIndex, j, $event)"></plugin-field-edit>
-          </div>
-          <div class="uk-margin-top">
-            <plugin-field-edit [value]="  cardUrl.linkText"
-                               type="text" field="linkText" placeholder="Link text"
-                               (changed)="cardUrlValueChanged(selectedIndex, j, $event)"></plugin-field-edit>
-          </div>
-        </ng-container>
-      </ng-container>
-    </div>
-
-  `,
-
-
-})
-export class PluginLearnAndConnectFormComponent extends PluginBaseFormComponent<PluginLearnAndConnect> {
-  selectedIndex = -1;
-  @Input() editSubmenuOpen;
-
-  constructor() {
-    super()
-  }
-
-
-  ngOnChanges(changes: SimpleChanges) {
-    if (this.editSubmenuOpen == false && this.selectedIndex > -1) {
-      this.close();
-    }
-  }
-
-  cardShowChanged(i, $event: PluginEditEvent) {
-    this.pluginObject.cardInfoArray[i].show = $event.value;
-    $event.value = this.pluginObject.cardInfoArray;
-    this.valuesChanged.emit({field: $event.field, value: $event.value, type: 'parent'})
-  }
-
-  cardValueChanged(i, $event: PluginEditEvent) {
-    this.pluginObject.cardInfoArray[i][$event.field] = $event.value;
-    $event.value = this.pluginObject.cardInfoArray;
-    this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
-  }
-  cardUrlValueChanged(i, j, $event: PluginEditEvent) {
-    if (this.editTemplate) {
-      this.pluginObject.cardInfoArray[i].urlsArray[j][$event.field] = $event.value;
-      $event.value = this.pluginObject.cardInfoArray;
-    } else {
-      this.pluginObject.cardInfoArray[i].urlsArray[j][$event.field] = $event.value;
-      $event.value = this.pluginObject.cardInfoArray;
-    }
-
-    this.valuesChanged.emit({field: "cardInfoArray", value: $event.value, type: 'parent'})
-  }
-
-  edit(i) {
-    this.selectedIndex = i;
-    this.toggleSubMenu(true);
-  }
-
-  close() {
-    this.selectedIndex = -1;
-    this.toggleSubMenu(false);
-  }
-}

dashboard/plugins/components/learn-and-connect/plugin-learn-and-connect.module.ts

@@ -1,25 +0,0 @@
-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 {IconsModule} from "../../../../utils/icons/icons.module";
-import {NumberRoundModule} from "../../../../utils/pipes/number-round.module";
-import {IconsService} from "../../../../utils/icons/icons.service";
-import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module";
-import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
-import {PluginLearnAndConnectComponent} from './plugin-learn-and-connect.component';
-
-@NgModule({
-  imports: [
-    CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule
-  ],
-  providers:[PluginsService],
-  declarations: [PluginLearnAndConnectComponent],
-  exports: [PluginLearnAndConnectComponent]
-})
-export class PluginLearnAndConnectModule {
-  constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([])
-  }
-}

dashboard/plugins/components/search-bar/plugin-search-bar.component.ts

@@ -0,0 +1,139 @@
+import {ChangeDetectorRef, Component} from '@angular/core';
+import {PluginBaseComponent, PluginBaseInfo, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
+import {OpenaireEntities} from "../../../../utils/properties/searchFields";
+import {properties} from "../../../../../../environments/environment";
+import {CustomizationService} from "../../../../services/customization.service";
+import {CommunityService} from "../../../../connect/community/community.service";
+import {Filter} from "../../../../searchPages/searchUtils/searchHelperClasses.class";
+import {Router} from "@angular/router";
+import {RouterHelper} from "../../../../utils/routerHelper.class";
+export class PluginSearchBar extends PluginBaseInfo{
+  alternativeTitle:string ="";
+  showTitle:boolean = true;
+  showShortTitle:boolean = false;
+
+  compare(oldObject): any {
+    let newObj=   super.compare(oldObject);
+    return newObj;
+  }
+}
+@Component({
+  selector: 'plugin-search-bar',
+  template: `
+    <div *ngIf="!community " class="uk-text-meta uk-text-center">
+      No community info available
+    </div>
+    <div *ngIf="community "   class="generalSearchForm heroBackground"   [class.uk-light]="!this.fontsDarkMode"  [style]="style">
+   
+        <div class="uk-container uk-container-large uk-flex uk-flex-center">
+          <div class="uk-width-2-3@m uk-width-1-2@l uk-margin-large-top uk-margin-large-bottom">
+            <h1 *ngIf="pluginObject.showShortTitle" class="uk-text-center uk-h2 uk-margin-remove">
+              {{community.shortTitle}}
+            </h1>
+            <h1 *ngIf="pluginObject.alternativeTitle.length > 0"
+                class="uk-text-center uk-h2 uk-margin-remove">
+              {{pluginObject.alternativeTitle}}
+            </h1>
+            <div *ngIf="pluginObject.showTitle"
+                 class="uk-text-center uk-margin-top">
+              {{community.title}}
+            </div>
+            
+            <div [class.uk-invisible]="disableSelect" class="uk-margin-medium-top">
+              <advanced-search-input #advanced (searchEmitter)="goTo(true)">
+                <entities-selection class="uk-width-1-3" [simpleView]="true" currentEntity="result" [selectedEntity]="selectedEntity"  
+                                    (selectionChange)="entityChanged($event);advanced.focusNext(input, $event)" (disableSelectEmitter)="disableSelectChange($event)"
+                                    [onChangeNavigate]="false"></entities-selection>
+                <div input #input class="uk-width-expand"  placeholder="Scholary works" [searchable]="true" [hint]="'Search in OpenAIRE'" [(value)]="keyword"></div>
+              </advanced-search-input>
+              <div *ngIf="selectedEntity === 'result' && input.focused" (click)="$event.stopPropagation();advanced.focusNext(input, $event)" class="uk-dropdown uk-display-block uk-margin-small-top uk-width-auto" uk-dropdown="mode: click">
+                <div class="uk-padding-small">
+                  <quick-selections [resultTypes]="resultTypes"></quick-selections>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+  `
+})
+export class PluginSearchBarComponent extends PluginBaseComponent<PluginSearchBar>{
+  disableSelect: boolean = true;
+  openaireEntities= OpenaireEntities;
+
+  selectedEntity = 'result';
+  selectedEntitySimpleUrl;
+  selectedEntityAdvancedUrl;
+  keyword: string = "";
+  // customFilter;
+  placeholderText = "Search by title, author, abstract, DOI, orcid... ";
+  resultTypes: Filter = {
+    values: [],
+    filterId: "type",
+    countSelectedValues: 0,
+    filterType: 'checkbox',
+    originalFilterId: "",
+    valueIsExact: true,
+    title: "Type",
+    filterOperator: "or"
+  };
+  community = null;
+
+  public routerHelper: RouterHelper = new RouterHelper();
+
+  constructor(private communityService: CommunityService,  protected layoutService: CustomizationService, private cdr: ChangeDetectorRef, private _router: Router,) {
+    super()
+
+    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
+      community => {
+        this.community = community;
+        this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
+          community => {
+            this.getLayout(community.communityId);
+
+          }));
+      }
+    ));
+  }
+  ngOnInit() {
+    this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
+      community => {
+        this.getLayout(community.communityId);
+
+      }));
+  }
+
+  goTo(simple: boolean) {
+    let url = (simple) ? this.selectedEntitySimpleUrl : this.selectedEntityAdvancedUrl;
+    let parameterNames = [];
+    let parameterValues = [];
+
+
+    if (this.keyword.length > 0) {
+      parameterNames.push("fv0");
+      parameterValues.push(this.keyword);
+      parameterNames.push("f0");
+      parameterValues.push("q");
+    }
+    this._router.navigate([url], {queryParams: this.routerHelper.createQueryParams(parameterNames, parameterValues)});
+  }
+  disableSelectChange(event: boolean) {
+    this.disableSelect = event;
+    this.cdr.detectChanges();
+  }
+  entityChanged($event) {
+    this.selectedEntity = $event.entity;
+    this.selectedEntitySimpleUrl = $event.simpleUrl;
+    this.selectedEntityAdvancedUrl = $event.advancedUrl;
+    if (this.selectedEntity == 'result') {
+      this.placeholderText = "Search by title, author, abstract, DOI, orcid... ";
+    } else if (this.selectedEntity == 'project') {
+      this.placeholderText = "Search by project title, grant id, funder...";
+    } else if (this.selectedEntity == 'dataprovider') {
+      this.placeholderText = "Search by name...";
+    } else {
+      this.placeholderText = "Search community content";
+    }
+  }
+}

dashboard/plugins/components/search-bar/plugin-search-bar.form.component.ts

@@ -0,0 +1,47 @@
+import {Component} from '@angular/core';
+import {OpenaireEntities} from "../../../../utils/properties/searchFields";
+import {PluginBaseFormComponent} from "../../utils/base-plugin.form.component";
+import {PluginSearchBar} from "./plugin-search-bar.component";
+
+@Component({
+  selector: 'plugin-search-bar-form',
+  template: `
+    <div *ngIf="pluginObject" class="uk-padding-xsmall">
+      <plugin-field-edit [value]="pluginObject.alternativeTitle"
+                         type="text" field="alternativeTitle" placeholder="Alternative title" (changed)="valueChanged($event)"></plugin-field-edit>
+      <div class="uk-margin-top uk-text-meta uk-text-small uk-margin-small-bottom">
+        Show or hide the following information:
+      </div>
+      <div class="uk-grid uk-child-width-1-1 uk-text-small  uk-hr ">
+        <div class="uk-margin-xsmall-bottom uk-margin-xsmall-top">
+          <plugin-field-edit [value]=" pluginObject.showTitle"
+                             type="checkbox" field="showTitle" (editClicked)="pluginEditEvent = $event"
+                             (changed)="valueChanged($event)">
+
+          </plugin-field-edit> Title
+
+        </div>
+        <div class="uk-margin-xsmall-bottom uk-margin-xsmall-top">
+          <plugin-field-edit [value]=" pluginObject.showShortTitle"
+                             type="checkbox" field="showShortTitle" (editClicked)="pluginEditEvent = $event"
+                             (changed)="valueChanged($event)">
+
+          </plugin-field-edit> Short title
+
+        </div>
+
+        <div class="uk-alert uk-alert-warning uk-text-small uk-padding-xsmall  uk-margin-medium-left "> Manage community info  <a routerLink="../../info/profile" target="_blank">here</a>.</div>
+      </div>
+      </div>
+  `,
+
+
+})
+export class PluginSearchBarFormComponent extends PluginBaseFormComponent<PluginSearchBar> {
+  openaireEntities= OpenaireEntities;
+  constructor() {
+    super()
+
+  }
+
+}

dashboard/plugins/components/search-bar/plugin-search-bar.module.ts

@@ -0,0 +1,30 @@
+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 {IconsModule} from "../../../../utils/icons/icons.module";
+import {NumberRoundModule} from "../../../../utils/pipes/number-round.module";
+import {SearchResearchResultsServiceModule} from "../../../../services/searchResearchResultsService.module";
+import {PluginFieldEditModule} from "../../utils/plugin-field-edit.module";
+import {CuratorsModule} from '../../../../connect/components/curators/curators.module';
+import {AdvancedSearchInputModule} from "../../../../sharedComponents/advanced-search-input/advanced-search-input.module";
+import {EntitiesSelectionModule} from "../../../../searchPages/searchUtils/entitiesSelection.module";
+import {QuickSelectionsModule} from "../../../../searchPages/searchUtils/quick-selections.module";
+import {InputModule} from "../../../../sharedComponents/input/input.module";
+import {PluginSearchBarComponent} from "./plugin-search-bar.component";
+
+@NgModule({
+  imports: [
+    CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule,
+    CuratorsModule, AdvancedSearchInputModule, EntitiesSelectionModule, QuickSelectionsModule, InputModule,
+  ],
+  providers: [
+    PluginsService
+  ],
+  declarations: [PluginSearchBarComponent],
+  exports: [PluginSearchBarComponent]
+})
+export class PluginSearchBarModule {
+
+}

dashboard/plugins/plugins.component.html

@@ -244,6 +244,8 @@
                           [plugin]="this.templateForm.getRawValue()"
                           [pluginObject]="this.selectedPlugin.object"
                           class="uk-width-1-1" [previewInAdmin]="true"></plugin-wrapper>
+
+          <div>Reload!</div>
         </ng-container>
       </div>
     </div>

dashboard/plugins/plugins.component.ts

@@ -432,5 +432,6 @@ export class PluginsComponent implements OnInit {
   }
   clearCache(){
     this._clearCacheService.clearCacheInRoute(null, this.selectedCommunityPid,  this.getPageById(this.selectedPageId).route)
+    this._clearCacheService.purgeBrowserCache(null, this.selectedCommunityPid)
   }
 }

dashboard/plugins/utils/base-plugin.component.ts

@@ -52,6 +52,7 @@ export class PluginInfoCards {
   description: string;
   urlsArray: PluginURL[];
   image?: string;
+  icon?:string;
   show: boolean;
 }
 

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

@@ -19,7 +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 == 'textarea'" input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea"  (valueChange)="updateObject($event)" inputClass=" uk-padding-remove  " style="min-height: 100px; margin-left:-30px " class="uk-margin-top"></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

@@ -3,14 +3,14 @@ import {PluginOpenAIREProducts} from "../components/openaireProducts/plugin-open
 import {PluginDiscoverBySubcommunity} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.component";
 import {PluginBaseInfo} from "./base-plugin.component";
 import {PluginGatewayInformation} from "../components/gateway-information/plugin-gateway-information.component";
-import {PluginLearnAndConnect} from "../components/learn-and-connect/plugin-learn-and-connect.component";
 import {PluginFeaturedDatasets} from "../components/featured-datasets/plugin-featured-datasets.component";
-import {PluginHowToUse} from "../components/how-to-use/plugin-how-to-use.component";
 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";
 import {PluginStats} from "../components/stats/plugin-stats.component";
+import {PluginCardInfo} from "../components/card-info/plugin-card-info.component";
+import {PluginSearchBar} from "../components/search-bar/plugin-search-bar.component";
 
 export class PluginUtils{
   public attrTypeOptions: Option[] = [
@@ -32,9 +32,11 @@ export class PluginUtils{
     {label:"Organizations", value:"organizations"},
     {label:"Graph info", value:"graph-info"},
     {label:"Statistics", value:"stats"},
+    {label:"Search Bar", value:"search-bar"},
+    {label:"Card info", value:"card-info"},
+    {label:"Card slides", value:"card-slide"}
   ];
-  public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "graph-info",  "organizations", "stats"
+  public availablePluginCodes: string[] = ["openaire-products", "discover-by-subcommunity", "gateway-information", "search-deposit-link", "learn-and-connect", "how-to-use", "suggested-repositories", "featured-datasets", "organizations", "graph-info",  "organizations", "stats", "search-bar","card-info", "card-slide"];
-  ];
   public placementsOptions: Option[] = [
     {label:"Right", value:"right"},
     {label:"Top", value:"top"},
@@ -63,12 +65,6 @@ export class PluginUtils{
       case 'search-deposit-link': {
         return (new PluginSearchDepositLink()).compare(oldObject);
       }
-      case 'learn-and-connect': {
-        return (new PluginLearnAndConnect()).compare(oldObject);
-      }
-      case 'how-to-use': {
-        return (new PluginHowToUse()).compare(oldObject);
-      }
       case 'suggested-repositories': {
         return (new PluginSuggestedRepositories()).compare(oldObject);
       }
@@ -84,6 +80,18 @@ export class PluginUtils{
       case 'stats': {
         return (new PluginStats()).compare(oldObject);
       }
+      case 'learn-and-connect': {
+        return (new PluginCardInfo()).compare(oldObject);
+      }
+      case 'how-to-use': {
+        return (new PluginCardInfo()).compare(oldObject);
+      }
+      case 'card-info': {
+        return (new PluginCardInfo()).compare(oldObject);
+      }
+      case 'search-bar': {
+        return (new PluginSearchBar()).compare(oldObject);
+      }
       default: {
         return (new PluginBaseInfo()).compare(oldObject);
       }

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

@@ -22,12 +22,6 @@ import {PluginUtils} from "../utils/pluginUtils";
         <ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'">
           <plugin-search-deposit-link-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-search-deposit-link-form>
         </ng-container>
-        <ng-container *ngIf="pluginTemplate.code == 'learn-and-connect'">
-          <plugin-learn-and-connect-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-learn-and-connect-form>
-        </ng-container>
-        <ng-container *ngIf="pluginTemplate.code == 'how-to-use'">
-          <plugin-how-to-use-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"  [editSubmenuOpen]="editSubmenuOpen"></plugin-how-to-use-form>
-        </ng-container>
         <ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'">
           <plugin-suggested-repositories-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-suggested-repositories-form>
         </ng-container>
@@ -43,6 +37,12 @@ import {PluginUtils} from "../utils/pluginUtils";
             <ng-container *ngIf="pluginTemplate.code == 'stats'">
               <plugin-stats-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-stats-form>
             </ng-container>
+            <ng-container *ngIf="pluginTemplate.code == 'search-bar'">
+              <plugin-search-bar-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-search-bar-form>
+            </ng-container>
+            <ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'">
+              <plugin-card-info-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate" [editSubmenuOpen]="editSubmenuOpen"></plugin-card-info-form>
+            </ng-container>
         </ng-container>
           <ng-template #noplugin>
             <div   class="uk-text-muted uk-text-center">

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

@@ -4,7 +4,6 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {PluginEditWrapperComponent} from "./plugin-edit-wrapper.component";
 import {PluginOpenaireProductsFormComponent} from "../components/openaireProducts/plugin-openaire-products.form.component";
-import {PluginLearnAndConnectFormComponent} from "../components/learn-and-connect/plugin-learn-and-connect.form.component";
 import {PluginFieldEditModule} from "../utils/plugin-field-edit.module";
 import {PluginDiscoverBySubcommunityFormComponent} from "../components/discover-by-subcommunity/plugin-discover-by-subcommunity.form.component";
 import {PluginFeaturedDatasetsFormComponent} from "../components/featured-datasets/plugin-featured-datasets.form.component";
@@ -12,17 +11,17 @@ import {PluginGatewayInformationFormComponent} from "../components/gateway-infor
 import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit-link/plugin-search-deposit-link.form.component";
 import {PluginOrganizationsFormComponent} from "../components/organizations/plugin-organizations.form.component";
 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";
 import {PluginStatsFormComponent} from "../components/stats/plugin-stats.form.component";
+import {PluginSearchBarFormComponent} from "../components/search-bar/plugin-search-bar.form.component";
+import {PluginCardInfoFormComponent} from "../components/card-info/plugin-card-info-form.component";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
   ],
-  declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent,
+  declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent, PluginSearchBarFormComponent, PluginCardInfoFormComponent],
-    PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginHowToUseFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent],
   exports: [PluginEditWrapperComponent]
 
 })

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

@@ -20,12 +20,6 @@ import {PluginUtils} from "../utils/pluginUtils";
         <ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'">
           <plugin-search-deposit-link [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  [previewInAdmin]="previewInAdmin" ></plugin-search-deposit-link>
         </ng-container>
-        <ng-container *ngIf="pluginTemplate.code == 'learn-and-connect'">
-          <plugin-learn-and-connect [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  [previewInAdmin]="previewInAdmin" ></plugin-learn-and-connect>
-        </ng-container>
-        <ng-container *ngIf="pluginTemplate.code == 'how-to-use'">
-          <plugin-how-to-use [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  [previewInAdmin]="previewInAdmin" ></plugin-how-to-use>
-        </ng-container>
         <ng-container *ngIf="pluginTemplate.code == 'suggested-repositories'">
           <plugin-suggested-repositories [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  [previewInAdmin]="previewInAdmin" ></plugin-suggested-repositories>
         </ng-container>
@@ -41,6 +35,12 @@ import {PluginUtils} from "../utils/pluginUtils";
         <ng-container *ngIf="pluginTemplate.code == 'stats'">
           <plugin-stats [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"   [previewInAdmin]="previewInAdmin" ></plugin-stats>
         </ng-container>
+        <ng-container *ngIf="pluginTemplate.code == 'search-bar'">
+          <plugin-search-bar [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"   [previewInAdmin]="previewInAdmin" ></plugin-search-bar>
+        </ng-container>
+        <ng-container *ngIf="pluginTemplate.code == 'card-info' || pluginTemplate.code == 'learn-and-connect' || pluginTemplate.code == 'how-to-use'">
+          <plugin-card-info [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"   [previewInAdmin]="previewInAdmin" ></plugin-card-info>
+        </ng-container>
       </div>
       <ng-template #noplugin>
         <div   class="uk-text-muted uk-text-center">

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

@@ -7,19 +7,18 @@ import {PluginOpenaireProductsModule} from "../components/openaireProducts/plugi
 import {PluginDiscoverBySubcommunityModule} from '../components/discover-by-subcommunity/plugin-discover-by-subcommunity.module';
 import {PluginGatewayInformationModule} from '../components/gateway-information/plugin-gateway-information.module';
 import {PluginSearchDepositLinkModule} from '../components/search-deposit-link/plugin-search-deposit-link.module';
-import {PluginLearnAndConnectModule} from '../components/learn-and-connect/plugin-learn-and-connect.module';
-import {PluginHowToUseModule} from '../components/how-to-use/plugin-how-to-use.module';
 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";
 import {PluginStatsModule} from "../components/stats/plugin-stats.module";
+import {PluginSearchBarModule} from "../components/search-bar/plugin-search-bar.module";
+import {PluginCardInfoModule} from "../components/card-info/plugin-card-info.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginOpenaireProductsModule,
-    PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginLearnAndConnectModule,
+    PluginDiscoverBySubcommunityModule, PluginSearchDepositLinkModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule, PluginStatsModule, PluginSearchBarModule, PluginCardInfoModule
-    PluginHowToUseModule, PluginSuggestedRepositoriesModule, PluginFeaturedDatasetsModule, PluginGatewayInformationModule, PluginOrganizationsModule, PluginGraphInfoModule, PluginStatsModule
   ],
   declarations: [PluginWrapperComponent],
   exports: [PluginWrapperComponent]