This is an automated email from the ASF dual-hosted git repository.
zehnder pushed a commit to branch
3116-refactor-staticruntimeresolvabletreeinput-into-smaller-subcomponents
in repository https://gitbox.apache.org/repos/asf/streampipes.git
The following commit(s) were added to
refs/heads/3116-refactor-staticruntimeresolvabletreeinput-into-smaller-subcomponents
by this push:
new 990f69242e refactor(#3116): Extract component selected-nodes
990f69242e is described below
commit 990f69242ef0e5af1ba783bb6f8e5020c2162fe7
Author: Philipp Zehnder <[email protected]>
AuthorDate: Sat Aug 10 07:26:42 2024 +0200
refactor(#3116): Extract component selected-nodes
---
ui/src/app/core-ui/core-ui.module.ts | 2 ++
...static-tree-input-selected-nodes.component.html | 42 ++++++++++++++++++++++
...static-tree-input-selected-nodes.component.scss | 22 ++++++++++++
.../static-tree-input-selected-nodes.component.ts | 39 ++++++++++++++++++++
.../static-tree-input.component.html | 37 +++++--------------
.../static-tree-input.component.scss | 5 ---
.../static-tree-input.component.ts | 11 +++---
7 files changed, 118 insertions(+), 40 deletions(-)
diff --git a/ui/src/app/core-ui/core-ui.module.ts
b/ui/src/app/core-ui/core-ui.module.ts
index bf1c4cc1e6..fb0535c7bc 100644
--- a/ui/src/app/core-ui/core-ui.module.ts
+++ b/ui/src/app/core-ui/core-ui.module.ts
@@ -110,6 +110,7 @@ import { StatusIndicatorComponent } from
'./status-indicator/status-indicator.co
import { MultiStepStatusIndicatorComponent } from
'./multi-step-status-indicator/multi-step-status-indicator.component';
import { PipelineOperationStatusComponent } from
'./pipeline/pipeline-operation-status/pipeline-operation-status.component';
import { StaticTreeInputButtonMenuComponent } from
'./static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component';
+import { StaticTreeInputSelectedNodesComponent } from
'./static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component';
@NgModule({
imports: [
@@ -185,6 +186,7 @@ import { StaticTreeInputButtonMenuComponent } from
'./static-properties/static-r
StaticOneOfInputComponent,
StaticRuntimeResolvableAnyInputComponent,
StaticTreeInputButtonMenuComponent,
+ StaticTreeInputSelectedNodesComponent,
StaticRuntimeResolvableGroupComponent,
StaticRuntimeResolvableOneOfInputComponent,
StaticRuntimeResolvableTreeInputComponent,
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.html
new file mode 100644
index 0000000000..fad07f0871
--- /dev/null
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.html
@@ -0,0 +1,42 @@
+<!--
+ ~ 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.
+ ~
+ -->
+<div fxFlex="30" class="tree-input-section" fxLayout="column">
+ <div class="tree-input-header" fxLayoutAlign="start center">
+ <b>Selected Nodes</b>
+ </div>
+ <div *ngFor="let selectedNodeName of selectedNodesInternalNames">
+ <div
+ class="selected-node"
+ fxLayout="row"
+ fxLayoutAlign="start center"
+ [attr.data-cy]="'selected-node-' + selectedNodeName"
+ >
+ <span fxFlex>{{ selectedNodeName }}</span>
+ <div fxLayoutAlign="end center">
+ <button
+ mat-icon-button
+ color="accent"
+ [attr.data-cy]="'remove-' + selectedNodeName"
+ (click)="onRemoveSelectedNode(selectedNodeName)"
+ >
+ <i class="material-icons">remove</i>
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.scss
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.scss
new file mode 100644
index 0000000000..841cc49105
--- /dev/null
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.scss
@@ -0,0 +1,22 @@
+/*
+ * 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.
+ *
+ */
+
+.tree-input-section {
+ border: 1px solid var(--color-bg-3);
+ margin-top: 10px;
+}
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.ts
new file mode 100644
index 0000000000..3d0b2a707c
--- /dev/null
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-selected-nodes/static-tree-input-selected-nodes.component.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+ selector: 'sp-static-tree-input-selected-nodes',
+ templateUrl: './static-tree-input-selected-nodes.component.html',
+ styleUrls: [
+ './static-tree-input-selected-nodes.component.scss',
+ '../static-tree-input.component.scss',
+ ],
+})
+export class StaticTreeInputSelectedNodesComponent {
+ @Input()
+ selectedNodesInternalNames: string[];
+
+ @Output()
+ removeSelectedNode = new EventEmitter<string>();
+
+ onRemoveSelectedNode(selectedNodeName: string) {
+ this.removeSelectedNode.emit(selectedNodeName);
+ }
+}
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
index 39e39c3fe2..38a1a2df6e 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.html
@@ -202,34 +202,13 @@
<div fxFlex="70">{{ metadata.value }}</div>
</div>
</div>
- <div fxFlex="30" class="tree-input-section" fxLayout="column">
- <div class="tree-input-header" fxLayoutAlign="start center">
- <b>Selected Nodes</b>
- </div>
- <div
- *ngFor="
- let selectedNode of
staticProperty.selectedNodesInternalNames
- "
- >
- <div
- class="selected-node"
- fxLayout="row"
- fxLayoutAlign="start center"
- [attr.data-cy]="'selected-node-' + selectedNode"
- >
- <span fxFlex>{{ selectedNode }}</span>
- <div fxLayoutAlign="end center">
- <button
- mat-icon-button
- color="accent"
- [attr.data-cy]="'remove-' + selectedNode"
- (click)="removeSelectedNode(selectedNode)"
- >
- <i class="material-icons">remove</i>
- </button>
- </div>
- </div>
- </div>
- </div>
+
+ <sp-static-tree-input-selected-nodes
+ [selectedNodesInternalNames]="
+ staticProperty.selectedNodesInternalNames
+ "
+ (removeSelectedNode)="removeSelectedNode($event)"
+ >
+ </sp-static-tree-input-selected-nodes>
</div>
</div>
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.scss
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.scss
index 4cb8975c33..c0d0089c38 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.scss
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.scss
@@ -61,11 +61,6 @@
border-bottom: 1px solid var(--color-bg-3);
}
-.tree-input-section {
- border: 1px solid var(--color-bg-3);
- margin-top: 10px;
-}
-
.color-primary {
color: var(--color-primary);
}
diff --git
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
index 1f7dbf2010..3cad6be609 100644
---
a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
+++
b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input.component.ts
@@ -27,7 +27,6 @@ import { RuntimeResolvableService } from
'../static-runtime-resolvable-input/run
import { NestedTreeControl } from '@angular/cdk/tree';
import { MatTree, MatTreeNestedDataSource } from '@angular/material/tree';
import { UntypedFormControl } from '@angular/forms';
-import Tree from 'echarts/types/src/data/Tree';
@Component({
selector: 'sp-runtime-resolvable-tree-input',
@@ -181,6 +180,11 @@ export class StaticRuntimeResolvableTreeInputComponent
);
}
+ removeSelectedNode(selectedNodeInternalId: string): void {
+ const index = this.getSelectedNodeIndex(selectedNodeInternalId);
+ this.staticProperty.selectedNodesInternalNames.splice(index, 1);
+ }
+
removeNode(node: TreeInputNode) {
node.selected = false;
const index = this.getSelectedNodeIndex(node.internalNodeName);
@@ -188,11 +192,6 @@ export class StaticRuntimeResolvableTreeInputComponent
this.performValidation();
}
- removeSelectedNode(selectedNodeInternalId: string): void {
- const index = this.getSelectedNodeIndex(selectedNodeInternalId);
- this.staticProperty.selectedNodesInternalNames.splice(index, 1);
- }
-
isNodeSelected(node: TreeInputNode) {
return this.getSelectedNodeIndex(node.internalNodeName) > -1;
}
