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 2022/07/25 16:53:05 UTC
[incubator-streampipes] branch STREAMPIPES-545 updated: [STREAMPIPES-545] Allow to remove and edit nodes
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch STREAMPIPES-545
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/STREAMPIPES-545 by this push:
new 7658a9e8b [STREAMPIPES-545] Allow to remove and edit nodes
7658a9e8b is described below
commit 7658a9e8bbf6e152ab1cb480e78d7cf6e191dcc7
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Jul 25 18:52:53 2022 +0200
[STREAMPIPES-545] Allow to remove and edit nodes
---
.../asset-details/asset-details.component.html | 1 +
.../asset-selection-panel.component.html | 29 ++++++++++++++---
.../asset-selection-panel.component.scss | 2 ++
.../asset-selection-panel.component.ts | 38 ++++++++++++++++++++++
4 files changed, 66 insertions(+), 4 deletions(-)
diff --git a/ui/src/app/assets/components/asset-details/asset-details.component.html b/ui/src/app/assets/components/asset-details/asset-details.component.html
index 4f22df2b4..76d1a6b0a 100644
--- a/ui/src/app/assets/components/asset-details/asset-details.component.html
+++ b/ui/src/app/assets/components/asset-details/asset-details.component.html
@@ -38,6 +38,7 @@
class="designer-panel">
<div fxLayout="column" fxFlex="100">
<sp-asset-selection-panel-component
+ [editMode]="editMode"
[assetModel]="asset"
[selectedAsset]="selectedAsset"
(selectedAssetEmitter)="selectedAsset = $event">
diff --git a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html
index 096968753..98ad239b9 100644
--- a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.html
@@ -27,8 +27,21 @@
<div fxFlex fxLayout="column" class="designer-panel-config">
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" class="sp-tree" #tree>
<mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle>
- <div [ngClass]="node.assetId === selectedAsset.assetId ? 'asset-node selected-node' : 'asset-node'">
- <span (click)="selectNode(node)">{{node.assetName}}</span>
+ <div [ngClass]="node.assetId === selectedAsset.assetId ? 'asset-node selected-node' : 'asset-node'"
+ fxLayout="row" fxFlex="100">
+ <span (click)="selectNode(node)" fxLayoutAlign="end center">{{node.assetName}}</span>
+ <div fxLayoutAlign="end center" fxFlex *ngIf="editMode">
+ <button mat-button
+ mat-icon-button
+ (click)="addAsset(node)"
+ color="accent">
+ <i class="material-icons">add</i></button>
+ <button mat-button
+ mat-icon-button
+ (click)="deleteAsset(node)"
+ color="accent">
+ <i class="material-icons">delete</i></button>
+ </div>
</div>
</mat-tree-node>
<mat-nested-tree-node *matTreeNodeDef="let node; when: hasChild">
@@ -40,8 +53,16 @@
{{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
</mat-icon>
</button>
- <div [ngClass]="node.assetId === selectedAsset.assetId ? 'asset-node selected-node' : 'asset-node'">
- <span (click)="selectNode(node)">{{node.assetName}}</span>
+ <div [ngClass]="node.assetId === selectedAsset.assetId ? 'asset-node selected-node' : 'asset-node'"
+ fxLayout="row" fxFlex="100">
+ <span (click)="selectNode(node)" fxLayoutAlign="start center">{{node.assetName}}</span>
+ <div fxLayoutAlign="end center" fxFlex *ngIf="editMode">
+ <button mat-button
+ mat-icon-button
+ (click)="addAsset(node)"
+ color="accent">
+ <i class="material-icons">add</i></button>
+ </div>
</div>
</div>
<div [class.sp-tree-invisible]="!treeControl.isExpanded(node)"
diff --git a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
index d277317df..de5182a55 100644
--- a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.scss
@@ -56,6 +56,8 @@
font-weight: normal;
cursor: pointer;
font-size: 13pt;
+ width: 100%;
+ margin-right: 10px;
}
.selected-node {
diff --git a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts
index da01568a6..06a1ce8d9 100644
--- a/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts
+++ b/ui/src/app/assets/components/asset-details/asset-selection-panel/asset-selection-panel.component.ts
@@ -34,6 +34,9 @@ export class SpAssetSelectionPanelComponent implements OnInit {
@Input()
selectedAsset: SpAsset;
+ @Input()
+ editMode: boolean;
+
@Output()
selectedAssetEmitter: EventEmitter<SpAsset> = new EventEmitter<SpAsset>();
@@ -56,5 +59,40 @@ export class SpAssetSelectionPanelComponent implements OnInit {
this.selectedAssetEmitter.emit(asset);
}
+ addAsset(node: SpAsset) {
+ if (!node.assets) {
+ node.assets = [];
+ }
+ node.assets.push(this.makeNewAsset());
+ this.dataSource.data = [this.assetModel];
+ this.treeControl.dataNodes = [this.assetModel];
+ this.dataSource.data = null;
+ this.dataSource.data = [this.assetModel];
+ }
+
+ deleteAsset(node: SpAsset) {
+ this.removeAssetWithId(this.assetModel.assets, node.assetId);
+ this.dataSource.data = null;
+ this.dataSource.data = [this.assetModel];
+ }
+
+ removeAssetWithId(assets: SpAsset[], id: string) {
+ for (let i = 0; i < assets.length; i++) {
+ if (assets[i].assetId === id) {
+ assets.splice(i, 1);
+ return;
+ }
+ if (assets[i].assets) {
+ this.removeAssetWithId(assets[i].assets, id);
+ }
+ }
+ }
+ makeNewAsset(): SpAsset {
+ return {assetId: this.makeAssetId(), assetName: 'New Asset', assetDescription: '', assetLinks: [], assetType: undefined, assets: []};
+ }
+
+ makeAssetId(): string {
+ return 'a' + Math.random().toString(36).substring(2, 9);
+ }
}