[plugins-functionality | DONE | CHANGED ] content providers use HTML editor

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

@@ -29,6 +29,7 @@ import {ManageCommunityContentProvidersService} from "../../services/manageConte
 import {SearchDataprovidersService} from "../../openaireLibrary/services/searchDataproviders.service";
 import {CriteriaModule} from "./criteria/criteria.module";
 import {MatSlideToggleModule} from "@angular/material/slide-toggle";
+import {CKEditorModule} from "ng2-ckeditor";
 
 @NgModule({
   imports: [
@@ -49,7 +50,7 @@ import {MatSlideToggleModule} from "@angular/material/slide-toggle";
         path: '', component: ManageContentProvidersComponent
       }
     ]),
-    NoLoadPaging, LoadingModule, IconsModule, FullScreenModalModule, ResultPreviewModule, CriteriaModule, MatSlideToggleModule
+    NoLoadPaging, LoadingModule, IconsModule, FullScreenModalModule, ResultPreviewModule, CriteriaModule, MatSlideToggleModule, CKEditorModule, ReactiveFormsModule
   ],
   declarations: [
     ManageContentProvidersComponent,

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

@@ -1,4 +1,4 @@
-import {ChangeDetectorRef, Component, OnInit, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, OnInit, SimpleChanges, ViewChild} from '@angular/core';
 import {RemoveContentProvidersComponent} from './remove-content-providers.component';
 import {Title} from '@angular/platform-browser';
 import {
@@ -15,6 +15,7 @@ import {OpenaireEntities} from "../../openaireLibrary/utils/properties/searchFie
 import {CriteriaComponent} from "./criteria/criteria.component";
 import {NotificationHandler} from "../../openaireLibrary/utils/notification-handler";
 import {ManageCommunityContentProvidersService} from "../../services/manageContentProviders.service";
+import {UntypedFormBuilder} from "@angular/forms";
 
 @Component({
   selector: 'manage-content-providers',
@@ -39,9 +40,20 @@ import {ManageCommunityContentProvidersService} from "../../services/manageConte
         <br>
         <mat-slide-toggle [checked]="deposit" (change)="deposit = !deposit; depositInfoChanged = true;"></mat-slide-toggle>
         <label class="uk-margin-medium-top uk-margin-small-left ">Suggest for deposit</label>
-      <div class="uk-width-1-1 uk-margin-medium-top" input placeholder="Type a message or instruction for researchers about deposition in this datasource"
+      <!--<div class="uk-width-1-1 uk-margin-medium-top" input placeholder="Type a message or instruction for researchers about deposition in this datasource"
            [value]="message" (valueChange)="message=$event; depositInfoChanged = true;">
-      </div>
+      </div>-->
+        <div class="uk-margin-top uk-text-meta">Type a message or instruction for researchers about deposition in this datasource</div>
+        <ckeditor [readonly]="false"
+                  debounce="500"
+                  [formControl]="messageForm" (change)="messageChanged()"
+                  [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>
         <div class="uk-text-center uk-text-bold uk-text-large uk-margin-medium-top">Content filters</div>
         <criteria #criteria *ngIf="dataProvider" [height]="filtersModal.bodyHeight - 200"
                   [selectionCriteria]="dataProvider.selectioncriteria">
@@ -75,10 +87,12 @@ export class ManageContentProvidersComponent implements OnInit {
   deposit= false;
   enabled = false;
   depositInfoChanged =false;
+  messageForm = this.fb.control("");
   constructor(private title: Title,
               private cdr: ChangeDetectorRef,
               private communityService: CommunityService,
-              private manageCommunityContentProvidersService: ManageCommunityContentProvidersService) {
+              private manageCommunityContentProvidersService: ManageCommunityContentProvidersService,
+    private fb: UntypedFormBuilder) {
   }
 
   ngOnInit() {
@@ -113,6 +127,7 @@ export class ManageContentProvidersComponent implements OnInit {
     this.deposit = this.dataProvider.deposit;
     this.message = this.dataProvider.message;
     this.enabled = this.dataProvider.enabled;
+    this.messageForm = this.fb.control(this.message);
     this.depositInfoChanged = false;
     this.filtersModal.title = 'Edit datasource options';
     this.filtersModal.okButtonText = "Save";
@@ -153,7 +168,13 @@ export class ManageContentProvidersComponent implements OnInit {
 
   depositReset(){
     this.message = this.dataProvider.message;
+    this.messageForm.setValue(this.message);
     this.deposit = this.dataProvider.deposit;
     this.enabled = this.dataProvider.enabled;
   }
+
+  messageChanged(){
+    this.message = this.messageForm.value;
+    this.depositInfoChanged = true;
+  }
 }

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

@@ -57,8 +57,9 @@
                   <div *ngIf="item.enabled" class="uk-label uk-text-primary uk-margin-small-right uk-padding-xsmall ">Content source</div>
                   <div *ngIf="item.deposit" class="uk-label uk-label-success uk-padding-xsmall">Suggested for deposit</div>
                   <div *ngIf="item.deposit && item.message" class=" uk-text-small uk-margin-top">
-                    <span class="uk-text-muted uk-text-xsmall">Deposit info:</span>
+                    <div class="uk-text-muted uk-text-xsmall">Deposit info:</div>
-                    {{item.message}}</div>
+                    <div [innerHTML]="item.message"></div>
+                    </div>
                   <div *ngIf="item.selectioncriteria?.criteria?.length > 0" class="uk-margin-small-bottom uk-margin-small-top uk-text-small">
                     <div class="uk-text-meta uk-margin-small-bottom">Filters</div>
                     <div [innerHTML]="criteriaUtils.getFiltersAsText(item.selectioncriteria.criteria)"></div>