This is an automated email from the ASF dual-hosted git repository. zehnder pushed a commit to branch 3112-opc-ua-multi-node-selection-editor in repository https://gitbox.apache.org/repos/asf/streampipes.git
commit a667f6e3be68349649b75969089be73ede035965 Author: Philipp Zehnder <[email protected]> AuthorDate: Mon Aug 12 18:21:21 2024 +0200 feat(#3112): Add button to switch editor mode --- .../support/utils/userInput/TreeStaticPropertyUtils.ts | 15 +++++++++++++++ ...static-runtime-resolvable-tree-input.component.html | 14 +++++++++++++- .../static-runtime-resolvable-tree-input.component.ts | 6 ++++++ .../static-tree-input-button-menu.component.html | 18 +++++++++++++++++- .../static-tree-input-button-menu.component.ts | 8 ++++++++ 5 files changed, 59 insertions(+), 2 deletions(-) diff --git a/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts b/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts index 118a562542..9c74d4aa20 100644 --- a/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts +++ b/ui/cypress/support/utils/userInput/TreeStaticPropertyUtils.ts @@ -19,6 +19,21 @@ import { TreeNode } from '../../model/TreeNode'; export class TreeStaticPropertyUtils { + + /** + * Returns the tree editor + */ + public static treeEditor() { + return cy.dataCy('opc-ua-tree-editor'); + } + + /** + * Return the text editor + */ + public static textEditor() { + return cy.dataCy('opc-ua-text-editor'); + } + /** * Selects the @param treeNode in the tree view. If the tree node has * children, it will expand the tree node and recursivly navigate through diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html index bcb41d33a8..129e467870 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.html @@ -19,6 +19,8 @@ <sp-static-tree-input-button-menu [showOptions]="showOptions" [loading]="loading" + [editorMode]='editorMode' + (selectedEditorModeEmitter)='changeEditorMode($event)' (resetOptionsAndReload)="resetOptionsAndReload()" (reload)="reload()" > @@ -28,7 +30,10 @@ <sp-exception-message [message]="errorMessage"></sp-exception-message> </div> - <div fxLayout="row" fxLayoutGap="15px"> + <div fxLayout="row" + fxLayoutGap="15px" + data-cy='opc-ua-tree-editor' + *ngIf='editorMode === "tree"'> <div fxFlex="30" class="tree-input-section" fxLayout="column"> <sp-static-tree-input-browse-nodes #staticTreeInputBrowseNodesComponent @@ -56,4 +61,11 @@ </sp-static-tree-input-selected-nodes> </div> </div> + + + <div fxLayout="row" + data-cy='opc-ua-text-editor' + *ngIf='editorMode === "text"'> + <h1 >Text Editor</h1> + </div> </div> diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts index 32f77cfb1a..bd539c8fe2 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-runtime-resolvable-tree-input.component.ts @@ -39,6 +39,8 @@ export class StaticRuntimeResolvableTreeInputComponent { nodeDetails: TreeInputNode; + editorMode: 'tree' | 'text' = 'tree'; + @ViewChild('staticTreeInputBrowseNodesComponent') staticTreeInputBrowseNodesComponent: StaticTreeInputBrowseNodesComponent; @@ -150,4 +152,8 @@ export class StaticRuntimeResolvableTreeInputComponent ); this.staticProperty.selectedNodesInternalNames.splice(index, 1); } + + changeEditorMode(mode: 'tree' | 'text') { + this.editorMode = mode; + } } diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html index bf008690bb..4779d830ad 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.html @@ -15,7 +15,7 @@ ~ limitations under the License. ~ --> -<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="start center"> +<div fxLayout="row" fxLayoutGap="10px" fxLayoutAlign="space-between center"> <div> <button mat-raised-button @@ -46,4 +46,20 @@ [diameter]="20" ></mat-spinner> </div> + + <div fxFlexAlign="end"> + <mat-button-toggle-group + aria-label="Font Style" + class="small-button" + [(value)]="editorMode" + (change)="onChangeEditor($event.value)" + > + <mat-button-toggle data-cy="opc-ua-editor-mode-tree" value="tree" + >Tree</mat-button-toggle + > + <mat-button-toggle data-cy="opc-ua-editor-mode-text" value="text" + >Text</mat-button-toggle + > + </mat-button-toggle-group> + </div> </div> diff --git a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts index 8249baebb3..182d0ce72e 100644 --- a/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts +++ b/ui/src/app/core-ui/static-properties/static-runtime-resolvable-tree-input/static-tree-input-button-menu/static-tree-input-button-menu.component.ts @@ -26,11 +26,15 @@ export class StaticTreeInputButtonMenuComponent { showOptions: boolean; @Input() loading: boolean; + @Input() + editorMode: 'tree' | 'text'; @Output() resetOptionsAndReload = new EventEmitter<void>(); @Output() reload = new EventEmitter<void>(); + @Output() + selectedEditorModeEmitter = new EventEmitter<'tree' | 'text'>(); onResetOptionsAndReload() { this.resetOptionsAndReload.emit(); @@ -39,4 +43,8 @@ export class StaticTreeInputButtonMenuComponent { onReload() { this.reload.emit(); } + + onChangeEditor(mode:'tree' | 'text') { + this.selectedEditorModeEmitter.emit(mode); + } }
