[plugins-functionality | WIP] checks in gateway info plugins, form and layout for search-deposit-link

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

@@ -7,6 +7,7 @@
     <div *ngIf="!community " class="uk-text-muted uk-text-center">
       No community info available available
     </div>
+    <ng-container *ngIf="community">
     <div *ngIf="isRouteEnabled('/curators') && isVisible('curators')" class="uk-text-small uk-margin-xsmall-bottom">
       <curators [longView]="false"></curators>
     </div>
@@ -81,10 +82,11 @@
         </div>
       </div>
     </div>
+    </ng-container>
   </div>
 
 </div>
-<div  class="plugin2 uk-flex uk-flex-middle uk-flex-wrap" style="grid-gap: 30px;">
+<div *ngIf="community" class="plugin2 uk-flex uk-flex-middle uk-flex-wrap" style="grid-gap: 30px;">
   <div class="uk-flex uk-flex-middle" *ngIf="resultCounts  && resultCounts.publications > 0 && isEntityEnabled('publication')
          && isRouteEnabled(searchLinkToResults) &&
           isVisible('publications')">

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

@@ -80,7 +80,7 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
     this.subscriptions.push(this.communityService.getCommunityAsObservable().subscribe(
       community => {
         this.community = community;
-        if(community && !ConnectHelper.isPrivate(community, this.user)) {
+        if (community) {
           this.displayedSubjects = community.subjects;
           this.displayedSdg = community.sdg;
           this.displayedFos = community.fos;
@@ -107,9 +107,7 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
             ));
           }
           this.zenodoCommunityIdS = this.community.otherZenodoCommunities;
-        }
+
-      }
-    ));
           // Double check below: is `this.community.communityId` correct? the other way was through @input communityID from ConnectHelper service - domain
           this.subscriptions.push(this.searchCommunityProjectsService.countTotalProjects(this.properties, this.community.communityId).subscribe(
             res => {
@@ -138,6 +136,10 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
             this.resultCounts = res;
           }));
         }
+      }
+    ));
+
+  }
 
 
   isEntityEnabled(entity: string) {
@@ -145,7 +147,7 @@ export class PluginGatewayInformationComponent extends PluginBaseComponent<Plugi
   }
 
   isRouteEnabled(route: string) {
-    return this.portal.pages.some(x => x['route'] == route && x['isEnabled'] === true);
+    return this.portal && this.portal.pages.some(x => x['route'] == route && x['isEnabled'] === true);
   }
 
   buildProjectsTooltip(): string {

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.html

@@ -1,60 +1,38 @@
-<div>plugin-search-deposit-link</div>
+<div *ngIf="pluginObject" #parent class="uk-section  ">
-<!-- add slider component -->
-<div #parent class="uk-section uk-section-secondary connect-dark-logo-background">
   <div class="uk-container uk-container-large uk-margin-large-bottom">
     <div class="uk-width-1-1 uk-margin-medium-bottom">
 <!--      <span class="uk-h6 uk-text-primary">Benefits.</span>-->
       <h2 class="uk-margin-remove-top uk-width-1-2@m">
-        Find the best for your community<span class="uk-text-primary">.</span>
+       {{pluginObject.title}}<!--<span class="uk-text-primary">.</span>-->
       </h2>
     </div>
-    <slider-container [total]="4" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent">
+    <slider-container [total]="activeCards.length" [navigation]="'progress'" [period]="6000" [infinite]="true" [parent]="parent">
       <slider-column type="slider">
         <slider-item type="static">
-          <img class="uk-position-center uk-position-z-index" src="assets/connect-assets/home/tablet.png"
+          <img class="uk-position-center uk-position-z-index" [src]="'https://' + (properties.environment == 'production'?'':'beta.')
+          + 'connect.openaire.eu/assets/connect-assets/home/tablet.png'"
                alt="ipad" loading="lazy">
         </slider-item>
-        <slider-item type="slide" [start]="0">
+        <ng-container *ngFor="let card of pluginObject.cardInfoArray; let i = index">
-          <img src="assets/connect-assets/home/1.png" alt="ipad" loading="lazy">
+          <ng-container *ngIf="card.show">
-        </slider-item>
+            <slider-item type="slide" [start]="i">
-        <slider-item type="slide" [start]="1">
+              <img [src]="card.image" [alt]="card.tag" loading="lazy">
-          <img src="assets/connect-assets/home/2.png" alt="ipad" loading="lazy">
-        </slider-item>
-        <slider-item type="slide" [start]="2">
-          <img src="assets/connect-assets/home/3.png" alt="ipad" loading="lazy">
-        </slider-item>
-        <slider-item type="slide" [start]="3">
-          <img src="assets/connect-assets/home/4.png" alt="ipad" loading="lazy">
             </slider-item>
+          </ng-container>
+        </ng-container>
       </slider-column>
       <slider-column type="nav" class="slider-nav">
-        <slider-nav-item [start]="0">
+        <ng-container *ngFor="let card of activeCards; let i = index">
+          <ng-container *ngIf="card.show">
+            <slider-nav-item [start]="i">
+              <div class="uk-text-primary">{{card.tag}}</div>
               <h5 class="uk-margin-remove">
-            <i class="uk-text-primary">Find a repository </i>
+                {{card.title}}
-            <span>to deposit your {{entities.RESULT | lowercase}}</span>
-            <span class="uk-text-primary">.</span>
-          </h5>
-        </slider-nav-item>
-        <slider-nav-item [start]="1">
-          <h5 class="uk-margin-remove">
-            <i class="uk-text-primary">Link your {{entities.RESULT | lowercase}} </i>
-            <span>with your community, funding, and other {{entities.RESULTS | lowercase}}</span>
-            <span class="uk-text-primary">.</span>
-          </h5>
-        </slider-nav-item>
-        <slider-nav-item [start]="2">
-          <h5 class="uk-margin-remove">
-            <span>View community's </span>
-            <i class="uk-text-primary">overview at a glance.</i>
-          </h5>
-        </slider-nav-item>
-        <slider-nav-item [start]="3">
-          <h5 class="uk-margin-remove">
-            <i class="uk-text-primary">Search & browse </i>
-            <span>your community's {{entities.RESULTS | lowercase}}</span>
-            <span class="uk-text-primary">.</span>
               </h5>
+              <div>{{card.description}}</div>
             </slider-nav-item>
+          </ng-container>
+        </ng-container>
       </slider-column>
     </slider-container>
   </div>

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.less

@@ -0,0 +1,3 @@
+//slider-column slider-nav-item .uk-active{
+//  border-left: solid 2px @primary-color;
+//}

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.component.ts

@@ -1,13 +1,30 @@
 import {Component} from '@angular/core';
-import {PluginBaseComponent} from "../../utils/base-plugin.component";
+import {PluginBaseComponent, PluginInfoCards, PluginURL} from "../../utils/base-plugin.component";
 import {OpenaireEntities} from "../../../../utils/properties/searchFields";
+import {properties} from "../../../../../../environments/environment";
 export class PluginSearchDepositLink{
   title:string ="Search, link and deposit your research in one place.";
-  description: string = "Lorem ipsum";
+  // description: string = "Lorem ipsum";
+  cardInfoArray: PluginInfoCards[] = [
+    {tag: "SEARCH & BROWSE", title: "Discover research products in your community.", description:
+        "A view of the OpenAIRE Graph, configured by experts of your research community, who want to help you out with the data and literature deluge.",
+      urls:[ new PluginURL("/search/find/research-outcomes","Start searching", null, true)],
+      image:'https://' + (properties.environment == 'production'?'':'beta.')
+        + 'connect.openaire.eu/assets/connect-assets/home/4.png',show:true},
+    {tag: "DEPOSIT YOUR RESEARCH OUTCOME", title: "Publish your research in Open Access.", description:""
+      , urls:[ new PluginURL("/participate/deposit/learn-how","Start searching", null, true)],
+      image:'https://' + (properties.environment == 'production'?'':'beta.')
+        + 'connect.openaire.eu/assets/connect-assets/home/1.png',show:true},
+    {tag: "LINK YOUR RESEARCH", title: "Contribute to your community.", description:""
+      , urls:[ new PluginURL("/participate/claim","Start searching", null, true)],
+      image:'https://' + (properties.environment == 'production'?'':'beta.')
+        + 'connect.openaire.eu/assets/connect-assets/home/2.png',show:true},
+    ];
 }
 @Component({
   selector: 'plugin-search-deposit-link',
-  templateUrl: 'plugin-search-deposit-link.component.html'
+  templateUrl: 'plugin-search-deposit-link.component.html',
+  styleUrls:[`plugin-search-deposit-link.component.less`]
 })
 export class PluginSearchDepositLinkComponent extends PluginBaseComponent<PluginSearchDepositLink>{
   entities= OpenaireEntities;
@@ -15,4 +32,8 @@ export class PluginSearchDepositLinkComponent extends PluginBaseComponent<Plugin
   constructor() {
     super()
   }
+
+  get activeCards(){
+    return this.pluginObject.cardInfoArray.filter( card => card.show);
+  }
 }

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.form.component.ts

@@ -0,0 +1,54 @@
+import {Component} from '@angular/core';
+import {PluginBaseComponent, PluginEditEvent} from "../../utils/base-plugin.component";
+import {HttpClient} from "@angular/common/http";
+import {PluginSearchDepositLink} from "./plugin-search-deposit-link.component";
+
+@Component({
+  selector: 'plugin-search-deposit-link-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 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   class="uk-text-small uk-width-3-4">{{card.tag}}</div>
+                
+                    <div class=" uk-width-auto">
+                      <plugin-field-edit  [value]=" pluginObject.cardInfoArray[i].show"
+                                         type="boolean" field="cardInfoArray"  (editClicked)="pluginEditEvent = $event" (changed)="cardShowChanged(i,$event)" >
+                      
+                      </plugin-field-edit>
+                    </div>
+                
+                </div>
+          
+     
+          </ng-container>
+    </div>
+  
+  `,
+
+
+})
+export class PluginSearchDepositLinkFormComponent extends PluginBaseComponent<PluginSearchDepositLink> /*implements OnChanges*/{
+  constructor(http:HttpClient) {
+    super()
+  }
+
+  cardShowChanged(i,$event:PluginEditEvent){
+    if(this.editTemplate){
+      this.pluginTemplate.object.cardInfoArray[i].show=$event.value;
+      $event.value =this.pluginTemplate.object.cardInfoArray;
+    }else{
+      this.plugin.object.cardInfoArray[i].show=$event.value;
+      $event.value =this.plugin.object.cardInfoArray;
+    }
+
+    this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'})
+  }
+
+}

dashboard/plugins/components/search-deposit-link/plugin-search-deposit-link.module.ts

@@ -13,7 +13,8 @@ import {SliderUtilsModule} from "../../../../sharedComponents/slider-utils/slide
 
 @NgModule({
   imports: [
-    CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule, PluginFieldEditModule, SliderUtilsModule
+    CommonModule, RouterModule, FormsModule, IconsModule, NumberRoundModule, SearchResearchResultsServiceModule,
+    PluginFieldEditModule, SliderUtilsModule
   ],
   providers:[PluginsService],
   declarations: [PluginSearchDepositLinkComponent],

dashboard/plugins/templates/pluginTemplates.component.ts

@@ -119,6 +119,7 @@ export class PluginTemplatesComponent implements OnInit {
         }
         for(let template of templates){
           let defaultObj = PluginUtils.initializeObject(template.code);
+          console.log(defaultObj)
           template.object = PluginUtils.updateExistingObject(template.object, defaultObj)
           this.templatesByPlacement.get(template.placement).push(template);
         }

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

@@ -20,15 +20,18 @@ export class PluginURL {
   url:string;
   linkText:string;
   target:string;
-  constructor(url,linkText, target = "_blank") {
+  route:boolean;
+  constructor(url,linkText, target = "_blank",route = false) {
     this.url = url;
     this.linkText = linkText;
     this.target = target;
+    this.route = route;
   }
 
 }
 
 export class PluginInfoCards{
+  tag?:string;
   title:string;
   description:string;
   urls:PluginURL[];

dashboard/plugins/utils/pluginUtils.ts

@@ -6,6 +6,7 @@ import {PluginGatewayInformation} from "../components/gateway-information/plugin
 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";
 
 export class PluginUtils{
   public attrTypeOptions: Option[] = [
@@ -52,7 +53,7 @@ export class PluginUtils{
         return new PluginGatewayInformation();
       }
       case 'search-deposit-link': {
-        return new PluginBaseInfo();
+        return new PluginSearchDepositLink();
       }
       case 'learn-and-connect': {
         return new PluginLearnAndConnect();

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

@@ -17,7 +17,7 @@ import {PluginEditEvent} from "../utils/base-plugin.component";
           <plugin-gateway-information-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-gateway-information-form>
         </ng-container>
         <ng-container *ngIf="pluginTemplate.code == 'search-deposit-link'">
-          <plugin-search-deposit-link [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></plugin-search-deposit-link>
+          <plugin-search-deposit-link-form [plugin]="plugin" [pluginTemplate]="pluginTemplate" [pluginObject]="pluginObject"  (valuesChanged)="changed.emit($event)" [editTemplate]="editTemplate"></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"></plugin-learn-and-connect-form>

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

@@ -9,13 +9,14 @@ 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";
 import {PluginGatewayInformationFormComponent} from "../components/gateway-information/plugin-gateway-information.form.component";
+import {PluginSearchDepositLinkFormComponent} from "../components/search-deposit-link/plugin-search-deposit-link.form.component";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule, PluginFieldEditModule
   ],
   declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginLearnAndConnectFormComponent,
-    PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent],
+    PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent],
   exports: [PluginEditWrapperComponent]
 
 })