You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/06/30 20:24:00 UTC
[incubator-streampipes] 02/02: [STREAMPIPES-145] Migrate text editor
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
commit d33365c5da82c37f82ea9ccadb1e52e771905660
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue Jun 30 22:23:40 2020 +0200
[STREAMPIPES-145] Migrate text editor
---
ui/angular.json | 2 +-
ui/package.json | 4 +-
ui/src/app/connect/connect.module.ts | 6 +-
.../static-free-input.component.html | 17 +++-
.../static-free-input.component.ts | 100 ++++++++++++---------
.../static-property.component.html | 1 +
.../dialog/customize/customize.component.ts | 1 +
ui/src/scss/main.scss | 2 +-
ui/src/scss/sp/main.scss | 4 +
9 files changed, 89 insertions(+), 48 deletions(-)
diff --git a/ui/angular.json b/ui/angular.json
index 91b94fa..0b1fd67 100644
--- a/ui/angular.json
+++ b/ui/angular.json
@@ -36,7 +36,7 @@
"node_modules/jquery.panzoom/dist/jquery.panzoom.js",
"node_modules/jquery-ui-dist/jquery-ui.js",
"node_modules/jsplumb/dist/js/jsPlumb-2.1.3-min.js",
- "node_modules/trix/dist/trix.js"
+ "node_modules/quill/dist/quill.js"
]
},
"configurations": {
diff --git a/ui/package.json b/ui/package.json
index 7aa40a5..9d78215 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -59,7 +59,6 @@
"angular-slick-carousel": "3.1.7",
"angular-touch": "1.7.7",
"angular-tree-component": "8.5.6",
- "angular-trix": "1.0.2",
"angular-ui-bootstrap": "0.14.3",
"angular-ui-sortable": "0.13.4",
"angular-ui-tree": "2.9.0",
@@ -96,8 +95,10 @@
"ngmap": "1.18.0",
"ngx-auto-scroll": "^1.1.0",
"ngx-color-picker": "9.0.0",
+ "ngx-quill": "12.0.1",
"plotly.js": "1.52.2",
"prismjs": "1.16.0",
+ "quill": "1.3.7",
"roboto-fontface": "0.10.0",
"rxjs": "6.3.3",
"rxjs-compat": "6.3.3",
@@ -105,7 +106,6 @@
"showdown": "1.9.1",
"slick-carousel": "1.6.0",
"systemjs": "0.21.6",
- "trix": "0.10.1",
"tslib": "1.11.1",
"zone.js": "0.10.2"
},
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 59a6140..3003ca0 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -90,6 +90,8 @@ import {ColorPickerModule} from "ngx-color-picker";
import {PipelineElementRuntimeInfoComponent} from "./new-adapter/component/runtime-info/pipeline-element-runtime-info.component";
import {xsService} from "../NS/XS.service";
import {MatSliderModule} from "@angular/material/slider";
+import { QuillModule } from 'ngx-quill'
+import {MatChipsModule} from "@angular/material/chips";
@NgModule({
@@ -103,12 +105,14 @@ import {MatSliderModule} from "@angular/material/slider";
CustomMaterialModule,
DragulaModule,
MatProgressSpinnerModule,
+ MatChipsModule,
MatInputModule,
MatFormFieldModule,
MatSliderModule,
PlatformServicesModule,
TreeModule.forRoot(),
- ColorPickerModule
+ ColorPickerModule,
+ QuillModule.forRoot()
],
exports: [
StaticPropertyComponent,
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
index cfe02f7..9392dd1 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
@@ -16,8 +16,8 @@
~
-->
-<div [formGroup]="parentForm" id="formWrapper" fxFlex="100" fxLayout="column">
- <div fxFlex fxLayout="row" *ngIf="!staticProperty.valueSpecification">
+<div [formGroup]="parentForm" fxFlex="100" fxLayout="column">
+ <div fxFlex fxLayout="row" *ngIf="!staticProperty.valueSpecification && !staticProperty.multiLine">
<mat-form-field fxFlex>
<input formControlName="{{staticProperty.internalName}}" fxFlex
matInput
@@ -39,4 +39,17 @@
</mat-slider>
</div>
</div>
+ <div *ngIf="!staticProperty.valueSpecification && !staticProperty.mapsTo" fxFlex="100" fxLayout="column">
+ <div fxFlex="100" fxLayout="column" *ngIf="staticProperty.placeholdersSupported">
+ <h5>Possible placeholders: </h5>
+ <div fxFlex="100" fxLayout="row" style="background:white;">
+ <mat-chip-list style="margin-bottom:10px;">
+ <mat-chip (click)="applyPlaceholder(property.runtimeName)" color="primary" *ngFor="let property of eventSchemas[0].eventProperties">#{{property.runtimeName}}#</mat-chip>
+ </mat-chip-list>
+ </div>
+ </div>
+ <div fxFlex="100" *ngIf="staticProperty.multiLine">
+ <quill-editor #textEditor formControlName="{{staticProperty.internalName}}" [modules]="quillModules"></quill-editor>
+ </div>
+ </div>
</div>
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
index 46cf440..f861ccf 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
@@ -16,69 +16,87 @@
*
*/
-import {Component, OnInit} from '@angular/core';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ValidatorFn, Validators} from '@angular/forms';
import {StaticPropertyUtilService} from '../static-property-util.service';
import {ConfigurationInfo} from "../../model/message/ConfigurationInfo";
import {FreeTextStaticProperty} from "../../../core-model/gen/streampipes-model";
import {xsService} from "../../../NS/XS.service";
import {
- ValidateNumber,
- ValidateString,
- ValidateUrl
+ ValidateNumber,
+ ValidateString,
+ ValidateUrl
} from "../input.validator";
import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validated-static-property";
+import {QuillEditorComponent} from "ngx-quill";
@Component({
- selector: 'app-static-free-input',
- templateUrl: './static-free-input.component.html',
- styleUrls: ['./static-free-input.component.scss']
+ selector: 'app-static-free-input',
+ templateUrl: './static-free-input.component.html',
+ styleUrls: ['./static-free-input.component.scss']
})
export class StaticFreeInputComponent
extends AbstractValidatedStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
- constructor(public staticPropertyUtil: StaticPropertyUtilService,
- private xsService: xsService){
- super();
- }
+ quillModules: any = {
+ toolbar: [['bold', 'italic', 'underline', 'strike'],
+ [{'header': 1}, {'header': 2}],
+ [{'size': ['small', false, 'large', 'huge']}],
+ [{'header': [1, 2, 3, 4, 5, 6, false]}],
+ [{ 'color': [] }, { 'background': [] }],
+ ]
+ };
+ @ViewChild('textEditor', {static: false})
+ quillEditorComponent: QuillEditorComponent;
- ngOnInit() {
- this.addValidator(this.staticProperty.value, this.collectValidators());
- this.enableValidators();
- }
+ constructor(public staticPropertyUtil: StaticPropertyUtilService,
+ private xsService: xsService) {
+ super();
+ }
- collectValidators() {
- let validators: ValidatorFn[] = [];
- validators.push(Validators.required);
- if (this.xsService.isNumber(this.staticProperty.requiredDatatype) ||
- this.xsService.isNumber(this.staticProperty.requiredDomainProperty)) {
- validators.push(ValidateNumber);
- this.errorMessage = "The value should be a number";
- } else if (this.staticProperty.requiredDomainProperty === this.xsService.SO_URL) {
- validators.push(ValidateUrl);
- this.errorMessage = "Please enter a valid URL";
- } else if (this.staticProperty.requiredDatatype === this.xsService.XS_STRING1) {
- validators.push(ValidateString);
- this.errorMessage = "Please enter a valid String";
- }
-
- return validators;
- }
- emitUpdate() {
- let valid = (this.staticProperty.value != undefined && this.staticProperty.value !== "");
- this.updateEmitter.emit(new ConfigurationInfo(this.staticProperty.internalName, valid));
+ ngOnInit() {
+ this.addValidator(this.staticProperty.value, this.collectValidators());
+ this.enableValidators();
+ }
+
+ collectValidators() {
+ let validators: ValidatorFn[] = [];
+ validators.push(Validators.required);
+ if (this.xsService.isNumber(this.staticProperty.requiredDatatype) ||
+ this.xsService.isNumber(this.staticProperty.requiredDomainProperty)) {
+ validators.push(ValidateNumber);
+ this.errorMessage = "The value should be a number";
+ } else if (this.staticProperty.requiredDomainProperty === this.xsService.SO_URL) {
+ validators.push(ValidateUrl);
+ this.errorMessage = "Please enter a valid URL";
+ } else if (this.staticProperty.requiredDatatype === this.xsService.XS_STRING1) {
+ validators.push(ValidateString);
+ this.errorMessage = "Please enter a valid String";
}
- onStatusChange(status: any) {
+ return validators;
+ }
- }
+ emitUpdate() {
+ let valid = (this.staticProperty.value != undefined && this.staticProperty.value !== "");
+ this.updateEmitter.emit(new ConfigurationInfo(this.staticProperty.internalName, valid));
+ }
- onValueChange(value: any) {
- this.staticProperty.value = value;
- this.parentForm.updateValueAndValidity();
- }
+ onStatusChange(status: any) {
+
+ }
+
+ onValueChange(value: any) {
+ this.staticProperty.value = value;
+ this.parentForm.updateValueAndValidity();
+ }
+
+ applyPlaceholder(runtimeName) {
+ let currentIndex = this.quillEditorComponent.quillEditor.selection.savedRange.index;
+ this.quillEditorComponent.quillEditor.insertText(currentIndex, "#" + runtimeName + "#", "user");
+ }
}
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-property.component.html b/ui/src/app/connect/static-properties/static-property.component.html
index 94de7b2..a1b8339 100644
--- a/ui/src/app/connect/static-properties/static-property.component.html
+++ b/ui/src/app/connect/static-properties/static-property.component.html
@@ -32,6 +32,7 @@
<app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty)"
[staticProperty]="staticProperty"
[parentForm]="parentForm"
+ [eventSchemas]="eventSchemas"
(updateEmitter)="emitUpdate($event)">
</app-static-free-input>
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.ts b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
index cb4276d..a587523 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.ts
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.ts
@@ -100,6 +100,7 @@ export class CustomizeComponent implements OnInit, AfterViewInit {
this.pipelineElement.payload = this.cachedPipelineElement;
this.pipelineElement.settings.completed = true;
this.pipelineElement.payload.configured = true;
+ console.log(this.pipelineElement);
this.dialogRef.close(this.pipelineElement);
}
diff --git a/ui/src/scss/main.scss b/ui/src/scss/main.scss
index 78f3c63..3f495b8 100644
--- a/ui/src/scss/main.scss
+++ b/ui/src/scss/main.scss
@@ -22,7 +22,6 @@
@import '~angular-material/angular-material.scss';
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '~bootstrap/dist/css/bootstrap.css';
-@import '~trix/dist/trix.css';
@import '~slick-carousel/slick/slick-theme.css';
@import '~slick-carousel/slick/slick.css';
@import '~datatables.net-dt/css/jquery.dataTables.css';
@@ -38,6 +37,7 @@
@import "~ng-pick-datetime/assets/style/picker.min.css";
@import '~leaflet/dist/leaflet.css';
@import '~material-design-icons/iconfont/material-icons.css';
+@import '~quill/dist/quill.snow.css';
@import '~roboto-fontface/css/roboto/roboto-fontface.css';
diff --git a/ui/src/scss/sp/main.scss b/ui/src/scss/sp/main.scss
index 4e73178..9b3b20a 100644
--- a/ui/src/scss/sp/main.scss
+++ b/ui/src/scss/sp/main.scss
@@ -51,6 +51,10 @@ code[class*="language-"], pre[class*="language-"] {
white-space:pre-wrap;
}
+.ql-container {
+ height: auto;
+}
+
.CodeMirror-hints {
z-index: 1000;
}