diff options
Diffstat (limited to 'cds-ui/client')
3 files changed, 118 insertions, 5 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html index 443d7a31b..1fca8d1b7 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.html @@ -18,7 +18,35 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> -<p> - test-template works! -</p> -<router-outlet></router-outlet> +<div style="display: flex;flex-direction: row"> + <div style="width: 20%;margin: 2px"> + <mat-tree [dataSource]="dataSource" [treeControl]="treeControl"> + <!-- This is the tree node template for leaf nodes --> + <mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding> + <!-- use a disabled button to provide padding for tree leaf --> + <button mat-icon-button disabled></button> + <span (click)="fileClicked(node.name)">{{node.name}}</span> + </mat-tree-node> + <!-- This is the tree node template for expandable nodes --> + <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> + <button mat-icon-button matTreeNodeToggle + [attr.aria-label]="'toggle ' + node.name"> + <mat-icon class="mat-icon-rtl-mirror"> + {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} + </mat-icon> + </button> + <span (click)="fileClicked(node.name)">{{node.name}}</span> + </mat-tree-node> + </mat-tree> + </div> + <div style="width: 80%;background-color: gainsboro;height: 533px;"></div> +</div> + +<div> + <button style=" background-color: #3f51b5; + color: white; + border: 2px solid; + width: 8em; + height: 3em; + border-radius: 2em;">Test</button> +</div> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts index 4fce0ba91..2c87e8739 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.ts @@ -20,6 +20,65 @@ limitations under the License. */ import { Component, OnInit } from '@angular/core'; +import {FlatTreeControl} from '@angular/cdk/tree'; +import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; + + + +interface FoodNode { + name: string; + children?: FoodNode[]; +} + +const TREE_DATA: FoodNode[] = [ + { + name: 'Definitions', + children: [ + {name: 'activation-blueprint.json'}, + {name: 'artifacts_types.json'}, + {name: 'data_types.json'}, + ] + }, + { + name: 'Scripts', + children: [ + { + name: 'kotlin', + children: [ + {name: 'ScriptComponent.cba.kts'}, + {name: 'ResourceAssignmentProcessor.cba.kts'}, + ] + } + ] + }, + { + name: 'Templates', + children: [ + { + name: 'baseconfig-template' + } + ] + }, + { + name: 'TOSCA-Metada', + children: [ + { + name: 'TOSCA.meta' + } + ] + }, +]; + +/** Flat node with expandable and level information */ +interface ExampleFlatNode { + expandable: boolean; + name: string; + level: number; +} + + + + @Component({ selector: 'app-test-template', @@ -28,9 +87,33 @@ import { Component, OnInit } from '@angular/core'; }) export class TestTemplateComponent implements OnInit { - constructor() { } + private transformer = (node: FoodNode, level: number) => { + return { + expandable: !!node.children && node.children.length > 0, + name: node.name, + level: level, + }; + } + + treeControl = new FlatTreeControl<ExampleFlatNode>( + node => node.level, node => node.expandable); + + treeFlattener = new MatTreeFlattener( + this.transformer, node => node.level, node => node.expandable, node => node.children); + + dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); + + constructor() { + this.dataSource.data = TREE_DATA; + } + + hasChild = (_: number, node: ExampleFlatNode) => node.expandable; ngOnInit() { } + fileClicked(file) { + console.log('selected file:' + file); + } + } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts index 09be58a56..677c6fedc 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.module.ts @@ -23,6 +23,7 @@ import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { TestTemplateComponent } from './test-template.component'; import { TestTemplateRoutingModule } from './test-template-routing.module'; +import { AppMaterialModule } from '../../../common/modules/app-material.module'; @NgModule({ declarations: [ @@ -33,6 +34,7 @@ import { TestTemplateRoutingModule } from './test-template-routing.module'; ], imports: [ CommonModule, + AppMaterialModule, TestTemplateRoutingModule ] }) |