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/13 11:42:19 UTC
[incubator-streampipes] 02/02: [STREAMPIPES-145] Migrate delete
dialog
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 2335c84f13d50db9f0b39b8f3e9b3c8793f7234f
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Jun 13 13:42:02 2020 +0200
[STREAMPIPES-145] Migrate delete dialog
---
ui/src/app/core-ui/core-ui.module.ts | 5 +-
.../confirm-dialog/confirm-dialog.component.html | 10 ++++
.../confirm-dialog/confirm-dialog.component.scss} | 23 ++------
.../confirm-dialog/confirm-dialog.component.ts} | 33 ++++++------
.../pipeline-assembly.component.html | 2 +-
.../pipeline-assembly.component.ts | 36 ++++++++-----
.../components/pipeline/pipeline.component.ts | 4 +-
.../compatible-elements.component.html | 17 +++---
.../compatible-elements.component.ts | 6 ++-
.../dialog/customize/customize.component.html | 9 ++--
.../save-pipeline/save-pipeline.component.html | 8 +--
.../save-pipeline/save-pipeline.component.ts | 2 +-
ui/src/app/editor-v2/services/editor.service.ts | 6 +++
.../pipeline-element-options.controller.ts | 3 --
ui/src/app/services/services.module.ts | 2 -
ui/src/app/services/transition.service.ts | 61 ----------------------
ui/src/scss/sp/sp-dialog.scss | 8 +--
17 files changed, 91 insertions(+), 144 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts b/ui/src/app/core-ui/core-ui.module.ts
index 070e01b..0517366 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -51,6 +51,7 @@ import {PanelDialogComponent} from "./dialog/panel-dialog/panel-dialog.component
import {DialogService} from "./dialog/base-dialog/base-dialog.service";
import {PortalModule} from "@angular/cdk/portal";
import {OverlayModule} from "@angular/cdk/overlay";
+import {ConfirmDialogComponent} from "./dialog/confirm-dialog/confirm-dialog.component";
// PlotlyViaCDNModule.plotlyjs = PlotlyJS;
@NgModule({
@@ -72,6 +73,7 @@ import {OverlayModule} from "@angular/cdk/overlay";
OverlayModule,
],
declarations: [
+ ConfirmDialogComponent,
ImageComponent,
ImageContainerComponent,
ImageLabelingComponent,
@@ -99,7 +101,8 @@ import {OverlayModule} from "@angular/cdk/overlay";
ImageComponent,
ImageLabelingComponent,
StandardDialogComponent,
- PanelDialogComponent
+ PanelDialogComponent,
+ ConfirmDialogComponent
]
})
export class CoreUiModule {
diff --git a/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html
new file mode 100644
index 0000000..47aac1c
--- /dev/null
+++ b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.html
@@ -0,0 +1,10 @@
+<div fxFlex="100" fxLayout="column">
+ <div>
+ <h4>{{data.title}}</h4>
+ <h5>{{data.subtitle}}</h5>
+ </div>
+ <div fxFlex="100" fxLayoutAlign="end center" class="footer">
+ <button mat-button (click)="onCancel()">No</button>
+ <button mat-button [mat-dialog-close]="true" cdkFocusInitial>Yes</button>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
similarity index 77%
copy from ui/src/scss/sp/sp-dialog.scss
copy to ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
index b2c4357..43a8279 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.scss
@@ -1,4 +1,4 @@
-/*!
+/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
@@ -16,23 +16,8 @@
*
*/
-.dialog-container {
- display: grid;
- height: 100%;
- grid-template-rows: 1fr auto;
+@import '../../../../scss/sp/sp-dialog';
-}
-
-.mat-dialog-content {
- margin: 0px;
- overflow-y:auto;
- flex: 1 1 auto;
-}
-
-.mat-dialog-actions {
- padding: 10px;
-}
-
-.p-15 {
- padding: 15px;
+.footer {
+ margin-top:20px;
}
\ No newline at end of file
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
similarity index 61%
copy from ui/src/scss/sp/sp-dialog.scss
copy to ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
index b2c4357..ccd85bd 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/app/core-ui/dialog/confirm-dialog/confirm-dialog.component.ts
@@ -1,4 +1,4 @@
-/*!
+/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
@@ -16,23 +16,22 @@
*
*/
-.dialog-container {
- display: grid;
- height: 100%;
- grid-template-rows: 1fr auto;
+import {Component, Inject} from '@angular/core';
+import {MAT_DIALOG_DATA, MatDialogRef} from "@angular/material/dialog";
-}
-.mat-dialog-content {
- margin: 0px;
- overflow-y:auto;
- flex: 1 1 auto;
-}
+@Component({
+ selector: 'confirmation-dialog',
+ templateUrl: './confirm-dialog.component.html',
+ styleUrls: ['./confirm-dialog.component.scss']
+})
+export class ConfirmDialogComponent {
+ constructor(
+ public dialogRef: MatDialogRef<ConfirmDialogComponent>,
+ @Inject(MAT_DIALOG_DATA) public data: any) {
+ }
-.mat-dialog-actions {
- padding: 10px;
+ onCancel(): void {
+ this.dialogRef.close();
+ }
}
-
-.p-15 {
- padding: 15px;
-}
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html
index a3fa2b6..0a2898d 100644
--- a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html
+++ b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.html
@@ -87,7 +87,7 @@
</div>
</div>
</div>
- <button mat-button matTooltip="Clear Assembly Area" [matTooltipPosition]="'above'"
+ <button mat-button matTooltip="Clear Assembly Area" [matTooltipPosition]="'above'" [disabled]="EditorService.pipelineAssemblyEmpty"
class="md-icon-button" (click)="showClearAssemblyConfirmDialog($event)">
<i class="material-icons">clear</i>
</button>
diff --git a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
index 0fbedce..91accc6 100644
--- a/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline-assembly/pipeline-assembly.component.ts
@@ -28,6 +28,9 @@ import {ObjectProvider} from "../../services/object-provider.service";
import {PanelType} from "../../../core-ui/dialog/base-dialog/base-dialog.model";
import {SavePipelineComponent} from "../../dialog/save-pipeline/save-pipeline.component";
import {DialogService} from "../../../core-ui/dialog/base-dialog/base-dialog.service";
+import {ConfirmDialogComponent} from "../../../core-ui/dialog/confirm-dialog/confirm-dialog.component";
+import {MatDialog} from "@angular/material/dialog";
+import {EditorService} from "../../services/editor.service";
@Component({
@@ -64,23 +67,21 @@ export class PipelineAssemblyComponent implements OnInit {
// Remove later
EditorDialogManager: any;
- TransitionService: any;
constructor(private JsplumbBridge: JsplumbBridge,
private PipelinePositioningService: PipelinePositioningService,
private ObjectProvider: ObjectProvider,
- //private EditorDialogManager: EditorDialogManager,
+ private EditorService: EditorService,
public PipelineValidationService: PipelineValidationService,
private RestApi: RestApi,
private JsplumbService: JsplumbService,
- //private TransitionService: TransitionService,
private ShepherdService: ShepherdService,
- private dialogService: DialogService) {
+ private dialogService: DialogService,
+ private dialog: MatDialog) {
this.selectMode = true;
this.currentZoomLevel = 1;
-
}
ngOnInit(): void {
@@ -141,15 +142,22 @@ export class PipelineAssemblyComponent implements OnInit {
($("#assembly") as any).panzoom("zoom", zoomOut);
}
- showClearAssemblyConfirmDialog(ev) {
- this.EditorDialogManager.showClearAssemblyDialog(ev).then(() => {
- if (this.currentModifiedPipelineId) {
- this.currentModifiedPipelineId = undefined;
+ showClearAssemblyConfirmDialog(event: any) {
+ let dialogRef = this.dialog.open(ConfirmDialogComponent, {
+ width: '500px',
+ data: {
+ "title": "Do you really want to delete the current pipeline?",
+ "subtitle": "This cannot be undone."
+ },
+ });
+ dialogRef.afterClosed().subscribe(ev => {
+ if (ev) {
+ if (this.currentModifiedPipelineId) {
+ this.currentModifiedPipelineId = undefined;
+ }
+ this.clearAssembly();
+ this.EditorService.makePipelineAssemblyEmpty(true);
}
- this.clearAssembly();
- this.TransitionService.makePipelineAssemblyEmpty(true);
-
- }, function () {
});
};
@@ -225,7 +233,7 @@ export class PipelineAssemblyComponent implements OnInit {
displayPipelineInEditor(autoLayout) {
this.PipelinePositioningService.displayPipeline(this.rawPipelineModel, "#assembly", false, autoLayout);
- this.TransitionService.makePipelineAssemblyEmpty(false);
+ this.EditorService.makePipelineAssemblyEmpty(false);
this.pipelineValid = this.PipelineValidationService.isValidPipeline(this.rawPipelineModel);
}
diff --git a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
index 29e0c16..bd14563 100644
--- a/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
+++ b/ui/src/app/editor-v2/components/pipeline/pipeline.component.ts
@@ -176,7 +176,7 @@ export class PipelineComponent implements OnInit {
let pipelineElementId = ui.draggable.data("pe");
let pipelineElement: PipelineElementUnion = this.findPipelineElementByElementId(pipelineElementId);
if (ui.draggable.hasClass('draggable-icon')) {
- //this.TransitionService.makePipelineAssemblyEmpty(false);
+ this.EditorService.makePipelineAssemblyEmpty(false);
var pipelineElementConfig = this.JsplumbService.createNewPipelineElementConfig(pipelineElement, this.PipelineEditorService.getCoordinates(ui, this.currentZoomLevel), false);
if ((this.isStreamInPipeline() && pipelineElementConfig.type == 'set') ||
this.isSetInPipeline() && pipelineElementConfig.type == 'stream') {
@@ -243,7 +243,7 @@ export class PipelineComponent implements OnInit {
}
});
if (this.rawPipelineModel.every(pe => pe.settings.disabled)) {
- this.TransitionService.makePipelineAssemblyEmpty(true);
+ this.EditorService.makePipelineAssemblyEmpty(true);
}
this.JsplumbBridge.repaintEverything();
this.RestApi.updateCachedPipeline(this.rawPipelineModel);
diff --git a/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html
index f060cc2..26e1f8e 100644
--- a/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html
+++ b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.html
@@ -16,8 +16,8 @@
~
-->
-<div class="dialog-container">
- <div class="mat-dialog-content p-15">
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content p-15">
<div fxFlex="100" fxLayout="column">
<div *ngFor="let possibleElement of possibleElements; index as i" (click)="create(possibleElement)">
<div fxLayout="row" class="m-10" fxLayoutAlign="start center" [style]="styles[i]" (mouseenter)="changeStyle(i, true)" (mouseleave)="changeStyle(i, false)" >
@@ -33,10 +33,11 @@
</div>
</div>
</div>
- <div class="mat-dialog-actions">
- <mat-divider style="margin-bottom:10px;"></mat-divider>
- <button mat-button mat-raised-button class="mat-basic" (click)="hide()">
- Cancel
- </button>
- </div>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions">
+
+ <button mat-button mat-raised-button class="mat-basic" (click)="hide()">
+ Cancel
+ </button>
+ </div>
</div>
\ No newline at end of file
diff --git a/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts
index f11a969..bad9f95 100644
--- a/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts
+++ b/ui/src/app/editor-v2/dialog/compatible-elements/compatible-elements.component.ts
@@ -73,13 +73,15 @@ export class CompatibleElementsComponent {
makeStandardStyle() {
return {
- background: "white"
+ background: "white",
+ cursor: "auto"
}
}
makeHoverStyle() {
return {
- background: "lightgrey"
+ background: "lightgrey",
+ cursor: "pointer"
}
}
diff --git a/ui/src/app/editor-v2/dialog/customize/customize.component.html b/ui/src/app/editor-v2/dialog/customize/customize.component.html
index 63726f1..21224a7 100644
--- a/ui/src/app/editor-v2/dialog/customize/customize.component.html
+++ b/ui/src/app/editor-v2/dialog/customize/customize.component.html
@@ -16,8 +16,8 @@
~
-->
-<div class="dialog-container">
- <div class="mat-dialog-content">
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content">
<div fxFlex="100" fxLayout="column">
<div style="border-bottom:1px solid #ccc;padding:10px;background-color:#f6f6f6">
<div fxFlex="100" fxLayout="row" fxLayoutAlign="end end">
@@ -53,9 +53,8 @@
</div>
</div>
</div>
-
- <div class="mat-dialog-actions">
- <mat-divider style="margin-bottom:10px;"></mat-divider>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions">
<button mat-button mat-raised-button color="primary" (click)="save()" style="margin-right:10px;">
Save
</button>
diff --git a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html
index 0c1aaf4..1ab2b87 100644
--- a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html
+++ b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.html
@@ -16,8 +16,8 @@
~
-->
-<div class="dialog-container">
- <div class="mat-dialog-content padding-20">
+<div class="sp-dialog-container">
+ <div class="sp-dialog-content padding-20">
<div fxFlex="100" fxLayout="column">
<form name="submitPipelineForm">
@@ -50,8 +50,8 @@
</form>
</div>
</div>
- <div class="mat-dialog-actions">
- <mat-divider style="margin-bottom:10px;"></mat-divider>
+ <mat-divider></mat-divider>
+ <div class="sp-dialog-actions">
<button mat-button mat-raised-button color="primary" (click)="savePipelineName(false)" style="margin-right:10px;">
Save
</button>
diff --git a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts
index 836ada2..6f4660c 100644
--- a/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts
+++ b/ui/src/app/editor-v2/dialog/save-pipeline/save-pipeline.component.ts
@@ -117,7 +117,7 @@ export class SavePipelineComponent implements OnInit {
afterStorage(data: Message, switchTab) {
this.displaySuccess(data);
this.hide();
- //this.TransitionService.makePipelineAssemblyEmpty(true);
+ this.editorService.makePipelineAssemblyEmpty(true);
this.editorService.removePipelineFromCache();
if (this.ShepherdService.isTourActive()) {
this.ShepherdService.hideCurrentStep();
diff --git a/ui/src/app/editor-v2/services/editor.service.ts b/ui/src/app/editor-v2/services/editor.service.ts
index ed44cd5..ab054b5 100644
--- a/ui/src/app/editor-v2/services/editor.service.ts
+++ b/ui/src/app/editor-v2/services/editor.service.ts
@@ -34,6 +34,8 @@ export class EditorService {
public pipelineElementConfigured$ = this.pipelineElementConfigured.asObservable();
+ pipelineAssemblyEmpty: boolean = true;
+
constructor(private http: HttpClient,
private platformServicesCommons: PlatformServicesCommons) {
}
@@ -70,6 +72,10 @@ export class EditorService {
this.pipelineElementConfigured.next(pipelineElementDomId);
}
+ makePipelineAssemblyEmpty(status) {
+ this.pipelineAssemblyEmpty = status;
+ }
+
diff --git a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts
index d6a0f2e..a193dbc 100644
--- a/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts
+++ b/ui/src/app/editor/components/pipeline-element-options/pipeline-element-options.controller.ts
@@ -20,7 +20,6 @@ import * as angular from 'angular';
import {JsplumbBridge} from "../../../editor-v2/services/jsplumb-bridge.service";
import {JsplumbService} from "../../../editor-v2/services/jsplumb.service";
import {PipelineValidationService} from "../../../editor-v2/services/pipeline-validation.service";
-import {TransitionService} from "../../../services/transition.service";
import {RestApi} from "../../../services/rest-api.service";
export class PipelineElementOptionsController {
@@ -40,7 +39,6 @@ export class PipelineElementOptionsController {
rawPipelineModel: any;
allElements: any;
deleteFunction: any;
- TransitionService: TransitionService;
$rootScope: any;
$timeout: any;
RestApi: RestApi;
@@ -56,7 +54,6 @@ export class PipelineElementOptionsController {
this.JsplumbBridge = JsplumbBridge;
this.EditorDialogManager = EditorDialogManager;
this.JsplumbService = JsplumbService;
- this.TransitionService = TransitionService;
this.PipelineValidationService = PipelineValidationService;
this.RestApi = RestApi;
diff --git a/ui/src/app/services/services.module.ts b/ui/src/app/services/services.module.ts
index ed30f67..4ef9ac5 100644
--- a/ui/src/app/services/services.module.ts
+++ b/ui/src/app/services/services.module.ts
@@ -39,7 +39,6 @@ import {JsplumbConfigService} from '../editor-v2/services/jsplumb-config.service
import {PipelineElementIconService} from './pipeline-icon.service'
import {ObjectProvider} from '../editor-v2/services/object-provider.service'
import {downgradeInjectable} from '@angular/upgrade/static';
-import {TransitionService} from "./transition.service";
import {ShepherdService} from "./tour/shepherd.service";
import {TourProviderService} from "./tour/tour-provider.service";
import {PropertySelectorService} from "./property-selector.service";
@@ -72,7 +71,6 @@ export default angular.module('sp.services', [spConstants])
.service('JsplumbConfigService', JsplumbConfigService)
.service('PipelineElementIconService', PipelineElementIconService)
.service('RouteTransitionInterceptorService', RouteTransitionInterceptorService)
- .service('TransitionService', TransitionService)
.service('ShepherdService', ShepherdService)
.service('TourProviderService', TourProviderService)
.service('PropertySelectorService', PropertySelectorService)
diff --git a/ui/src/app/services/transition.service.ts b/ui/src/app/services/transition.service.ts
deleted file mode 100644
index f4bbe6e..0000000
--- a/ui/src/app/services/transition.service.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- */
-
-import {Inject, Injectable} from "@angular/core";
-
-@Injectable()
-export class TransitionService {
-
- AuthService: any;
- $mdDialog: any;
- isPipelineAssemblyEmpty: boolean = true;
-
- constructor(AuthService, $mdDialog) {
- this.AuthService = AuthService;
- this.$mdDialog = $mdDialog;
- }
-
- onTransitionStarted(transitionInfo) {
- if (transitionInfo.$from().name === 'streampipes.editor' && !(this.isPipelineAssemblyEmpty)) {
- return this.showDiscardPipelineDialog().then(() => {
- this.isPipelineAssemblyEmpty = true;
- return true;
- }, function () {
- return false;
- });
- }
- }
-
- makePipelineAssemblyEmpty(status) {
- this.isPipelineAssemblyEmpty = status;
- }
-
- getPipelineAssemblyEmpty() {
- return this.isPipelineAssemblyEmpty;
- }
-
- showDiscardPipelineDialog() {
- var confirm = this.$mdDialog.confirm()
- .title('Discard changes?')
- .textContent('Your current pipeline will be discarded.')
- .ok('Discard Changes')
- .cancel('Cancel');
- return this.$mdDialog.show(confirm);
- }
-}
-TransitionService.$inject = ['AuthService', '$mdDialog'];
\ No newline at end of file
diff --git a/ui/src/scss/sp/sp-dialog.scss b/ui/src/scss/sp/sp-dialog.scss
index b2c4357..dab562b 100644
--- a/ui/src/scss/sp/sp-dialog.scss
+++ b/ui/src/scss/sp/sp-dialog.scss
@@ -16,20 +16,20 @@
*
*/
-.dialog-container {
+.sp-dialog-container {
display: grid;
height: 100%;
- grid-template-rows: 1fr auto;
+ grid-template-rows: auto 10px 60px;
}
-.mat-dialog-content {
+.sp-dialog-content {
margin: 0px;
overflow-y:auto;
flex: 1 1 auto;
}
-.mat-dialog-actions {
+.sp-dialog-actions {
padding: 10px;
}