[plugins-functionality | DONE | ADDED ] HTML editor switch

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

@@ -9,11 +9,11 @@ import {PluginGraphInfo} from "./plugin-graph-info.component";
       <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"
+        <plugin-field-edit [value]="pluginObject.paragraph1" [switchToHTMLEditor]="true"
                            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"
+        <plugin-field-edit [value]="pluginObject.paragraph2" class="uk-margin-xsmall-top" [switchToHTMLEditor]="true"
                            type="textarea" field="paragraph2" (changed)="valueChanged($event)"></plugin-field-edit>
       </div>
       <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Link</div>

dashboard/plugins/components/stats/plugin-stats.component.html

@@ -1,4 +1,9 @@
 <div *ngIf="pluginObject" class="uk-container uk-section">
   <h3>{{pluginObject.title}} </h3>
+  <a *ngIf="pluginObject.url.url && pluginObject.url.url.length > 0" [href]="pluginObject.url.url" [target]="pluginObject.url.target"
+     class="uk-float-right uk-text-uppercase uk-button uk-button-text">
+    {{pluginObject.url.linkText}}
+  </a>
+<!--  <a *ngIf="pluginObject.url.url && pluginObject.url.url.length > 0" class = "uk-float-right" href="" [target]="">{{pluginObject.url.linkText}}</a>-->
   <plugin-stats-monitor [pluginObject]="pluginObject"></plugin-stats-monitor>
 </div>

dashboard/plugins/components/stats/plugin-stats.component.ts

@@ -1,10 +1,11 @@
 import {Component} from '@angular/core';
-import {PluginBaseComponent, PluginBaseInfo} from "../../utils/base-plugin.component";
+import {PluginBaseComponent, PluginBaseInfo, PluginURL} from "../../utils/base-plugin.component";
 import {HttpClient} from "@angular/common/http";
 
 export class PluginStats extends PluginBaseInfo{
   title = "Indicators"
   disabledIndicators = [];
+  url:PluginURL = new PluginURL("123", "More","_blank", false);
 
 
   compare(oldObject): any {

dashboard/plugins/components/stats/plugin-stats.form.component.ts

@@ -8,7 +8,15 @@ import {PluginStats} from "./plugin-stats.component";
     <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-meta uk-text-xsmall">External 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-small-top uk-margin-small-top">
+      <plugin-field-edit [value]="pluginObject.url.linkText"
+                         type="text" field="linkText" (changed)="urlValueChanged($event)"></plugin-field-edit>
+      </div>
 <!--      <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Number indicators</div>-->
        
 <!--      <ng-container *ngFor="let number of stakeholder.topics[0].category[0].subcategory[0].numbers">-->
@@ -23,7 +31,7 @@ import {PluginStats} from "./plugin-stats.component";
 <!--        </div>-->
 <!--      </ng-container>-->
 
-      <div class=" uk-margin-top uk-text-meta uk-text-xsmall"> Chart indicators</div>
+      <div class=" uk-margin-medium-top uk-text-meta uk-text-xsmall"> Chart indicators</div>
       <ng-container *ngFor="let section of stakeholder.topics[0].categories[0].subCategories[0].charts">
 
         <ng-container *ngFor="let indicator of section.indicators">
@@ -63,5 +71,11 @@ export class PluginStatsFormComponent extends PluginBaseFormComponent<PluginStat
     this.valuesChanged.emit({field:$event.field, value: $event.value, type: 'parent'})
   }
 
-
+  urlValueChanged($event:PluginEditEvent){
+    console.log($event.field,$event.value)
+    this.pluginObject['url'][$event.field]=$event.value;
+    $event.field = "url";
+    $event.value = this.pluginObject['url'];
+    this.valuesChanged.emit($event)
+  }
 }

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

@@ -29,12 +29,7 @@ export class PluginEditEvent {
   pluginEditEvent:PluginEditEvent;
 
   valueChanged($event:PluginEditEvent){
-    if(this.editTemplate){
-      // this.pluginTemplate.object[$event.field]=$event.value;
-      this.pluginObject[$event.field]=$event.value;
-    }else{
-      this.pluginObject[$event.field]=$event.value;
-    }
+    this.pluginObject[$event.field]=$event.value;
     this.valuesChanged.emit($event)
   }
   toggleSubMenu(open:boolean){

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

@@ -1,5 +1,7 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
 import {PluginEditEvent} from "./base-plugin.form.component";
+import {AlertModal} from "../../../utils/modal/alert";
+import {UntypedFormBuilder, UntypedFormGroup} from "@angular/forms";
 
 
 @Component({
@@ -9,49 +11,72 @@ import {PluginEditEvent} from "./base-plugin.form.component";
       <mat-slide-toggle [checked]="value" (change)="updateObject($event.checked)"></mat-slide-toggle>
     </ng-container>
     <ng-container *ngIf="type!='boolean'">
+      <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'" class="uk-grid">
+        <ng-container *ngIf="switchToHTMLEditor ">
+          <a class="uk-text-xsmall uk-text-right uk-margin-top uk-width-1-1" (click)="openHTMLEditor()"><span
+              uk-icon="icon:code; ratio:0.5"></span> open editor</a>
+        </ng-container>
+        <div class="uk-width-1-1">
+          <div input [value]="value" [placeholder]="placeholder?placeholder:field.toUpperCase()" type="textarea"
+               [rows]="5" (valueChange)="updateObject($event)" inputClass=" uk-padding-remove  "
+               style="min-height: 100px; margin-left:-30px " class="uk-margin-top"></div>
+        </div>
 
-<!--      <a *ngIf="!editingModeOn" class="uk-float-right" (click)=" editClicked.emit({field: field, type: type}); editingModeOn = true ">Edit</a>-->
-      <ng-container *ngIf="editingModeOn">
-<!--        <a *ngIf="editingModeOn" class="uk-float-right" (click)="editClicked.emit(null); editingModeOn = false ">close</a>-->
-<!--        <br>-->
-
-        <!--<input id="checkAll" type="checkbox" (click)="selectAll()" class="uk-checkbox"
-               [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=" 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"
-                     debounce="500"
-                     [formControl]="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>-->
-      </ng-container>
+      </div>
     </ng-container>
-    
+    <modal-alert #HTMLEditorModal (alertOutput)="closeHTMLEditor()" [large]="true"
+                 classTitle="uk-background-primary uk-light">
+      <ckeditor [readonly]="false"
+                debounce="100"
+                [formControl]="HTMLForm.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,JustifyLeft,JustifyRight,JustifyCenter,JustifyBlock,FontSize,TextColor,BGColor',
+                                      extraPlugins: 'divarea'}">
+      </ckeditor>
+    </modal-alert>
   `,
 
 
 })
 export class PluginFieldEditComponent {
- @Input() type;
- @Input() value;
- @Input() field;
- @Input() placeholder;
- @Output() editClicked:EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>();
- @Output() changed:EventEmitter<PluginEditEvent> = new EventEmitter()
- editingModeOn: boolean = true;
+  @Input() type;
+  @Input() value;
+  @Input() field;
+  @Input() placeholder;
+  @Input() switchToHTMLEditor;
+  @Output() editClicked: EventEmitter<PluginEditEvent> = new EventEmitter<PluginEditEvent>();
+  @Output() changed: EventEmitter<PluginEditEvent> = new EventEmitter();
+  htmlEditorView = false;
+  @ViewChild('HTMLEditorModal') HTMLEditorModal: AlertModal;
+  HTMLForm: UntypedFormGroup = this._fb.group({
+    value: this._fb.control("")
+  });
 
- updateObject(value){
-   console.log(value)
-   this.value = value;
-   this.changed.emit({field:this.field, value: this.value, type: this.type});
- }
+  constructor(private _fb: UntypedFormBuilder) {
+  }
+
+  updateObject(value) {
+    console.log(value)
+    this.value = value;
+    this.changed.emit({field: this.field, value: this.value, type: this.type});
+  }
+
+  openHTMLEditor() {
+    this.HTMLForm.get('value').setValue(this.value)
+    this.htmlEditorView = true;
+    this.HTMLEditorModal.alertTitle = "HTML Editor";
+    this.HTMLEditorModal.open();
+  }
+
+  closeHTMLEditor() {
+    this.htmlEditorView = false;
+    this.updateObject(this.HTMLForm.get('value').value)
+  }
 }

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

@@ -1,14 +1,16 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {PluginFieldEditComponent} from "./plugin-field-edit.component";
 import {InputModule} from "../../../sharedComponents/input/input.module";
 import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {CKEditorModule} from "ng2-ckeditor";
+import {AlertModalModule} from "../../../utils/modal/alertModal.module";
 
 @NgModule({
   imports: [
-    CommonModule, RouterModule, FormsModule, InputModule, MatSlideToggleModule
+    CommonModule, RouterModule, FormsModule, InputModule, MatSlideToggleModule, CKEditorModule, AlertModalModule, FormsModule, ReactiveFormsModule
   ],
     declarations: [PluginFieldEditComponent],
     exports: [PluginFieldEditComponent]

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

@@ -1,7 +1,7 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {CommonModule} from '@angular/common';
-import {FormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {PluginEditWrapperComponent} from "./plugin-edit-wrapper.component";
 import {PluginOpenaireProductsFormComponent} from "../components/openaireProducts/plugin-openaire-products.form.component";
 import {PluginFieldEditModule} from "../utils/plugin-field-edit.module";
@@ -16,10 +16,14 @@ import {PluginGraphInfoFormComponent} from "../components/graph-info/plugin-grap
 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";
+import {CKEditorModule} from "ng2-ckeditor";
+import {InputModule} from "../../../sharedComponents/input/input.module";
 
 @NgModule({
   imports: [
-    CommonModule, RouterModule, FormsModule, PluginFieldEditModule, IconsModule
+    CommonModule, RouterModule,
+    ReactiveFormsModule, InputModule,
+    FormsModule, PluginFieldEditModule, IconsModule, CKEditorModule,
   ],
   declarations: [PluginEditWrapperComponent, PluginOpenaireProductsFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginDiscoverBySubcommunityFormComponent, PluginFeaturedDatasetsFormComponent, PluginGatewayInformationFormComponent, PluginSearchDepositLinkFormComponent, PluginOrganizationsFormComponent, PluginSuggestedRepositoriesFormComponent, PluginGraphInfoFormComponent, PluginStatsFormComponent, PluginSearchBarFormComponent, PluginCardInfoFormComponent],
   exports: [PluginEditWrapperComponent]