diff options
Diffstat (limited to 'cds-ui/client/src')
7 files changed, 170 insertions, 23 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html index 9d698bd0a..9dbaf6728 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html @@ -1,4 +1,4 @@ - +<!-- ============LICENSE_START========================================== =================================================================== Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved. @@ -18,3 +18,28 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> +<div class="container"> + <div class="fileViewContainer"> + <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 class="editorConatiner"> + <p>Here comes the actual editor</p> + </div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss index ed77e232b..f7e6f493c 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss @@ -17,4 +17,21 @@ 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. ============LICENSE_END============================================ -*/
\ No newline at end of file +*/ +.container { + display: flex; + flex-direction: row; + + .fileViewContainer { + width: 20%; + margin: 2px + } + + .editorConatiner { + width: 80%; + background-color: gainsboro; + height: 533px; + margin-left: 5em; + } + +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts index 18b4563fa..bf135bba2 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts @@ -20,6 +20,60 @@ 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-editor', @@ -28,9 +82,33 @@ import { Component, OnInit } from '@angular/core'; }) export class EditorComponent 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/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html index d59597021..8397ae9f6 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html @@ -20,7 +20,7 @@ limitations under the License. --> <div class="modifyTemp"> - <div class="outerDiv divone"> + <div *ngIf="designerMode" class="outerDiv divone"> <mat-accordion> <mat-expansion-panel> <mat-expansion-panel-header style="background-color: #f1f1f1"> @@ -48,20 +48,16 @@ limitations under the License. </mat-accordion> </div> + <button class="enrich-btn">Enrichment</button> + <button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button> - <div class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv"> - <button style="cursor: pointer; position: absolute;top: 4em;right: 27em; padding: 6px;color: white; background-color:#3f51b5;margin-right: 2em;border-radius: 2em; ">Enrichment</button> - <button (click) ="changeView()" style="cursor: pointer; position: absolute;top: 4em;right: 22em; padding: 6px;color: white;background-color:#3f51b5; border-radius: 2em">{{viewText}}</button> + <div *ngIf="designerMode" class="outerDiv divtwo" (click)="on = !on" ondrop="dropcalled(event)" ondragover="allowDrop(event)" id="svgDiv"> <app-designer *ngIf="designerMode" (onNodeSelect)="on = !on; viewNodeDetails($event)"></app-designer> - <app-editor *ngIf="editorMode"></app-editor> </div> + <app-editor class="editor-selector" *ngIf="editorMode"></app-editor> - <div cdkDropList id="list-2" cdkDropListConnectedTo="list-1" (cdkDropListDropped)="drop($event)"> - <div *ngFor="let item of list" cdkDrag>{{ item }}</div> - </div> - - <div *ngIf="on" id="overlay" class="outerDiv divThree"> + <div *ngIf="designerMode && on" id="overlay" class="outerDiv divThree"> <mat-accordion style="width: 100%"> <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss index 1ddb2559e..74303dcfb 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss @@ -78,4 +78,31 @@ limitations under the License. .mat-expansion-panel-header-title { color: white !important; +} + +.enrich-btn { + cursor: pointer; + position: absolute; + top: 4em; + right: 27em; + padding: 6px; + color: white; + background-color:#3f51b5; + margin-right: 2em; + border-radius: 2em; +} + +.toggle-view-btn { + cursor: pointer; + position: absolute; + top: 4em; + right: 20em; + padding: 6px; + color: white; + background-color:#3f51b5; + border-radius: 2em +} + +.editor-selector { + width: 100%; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts index 1efdefce6..809f31027 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts @@ -28,9 +28,9 @@ import { Component, OnInit } from '@angular/core'; }) export class ModifyTemplateComponent implements OnInit { - designerMode: boolean = true; - editorMode: boolean = false; - viewText: string = "Editor View"; + designerMode: boolean = false; + editorMode: boolean = true; + viewText: string = "Designer View"; constructor() { } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts index cfcb6471a..033950b3a 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts @@ -19,14 +19,17 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit, EventEmitter, Output, AfterViewInit, AfterContentInit, OnChanges, DoCheck, AfterViewChecked } from '@angular/core'; +import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; -import { IMetaData } from '../../../../common/core/store/models/metadata.model'; +import { Observable } from 'rxjs'; +import { Store } from '@ngrx/store'; import { A11yModule } from '@angular/cdk/a11y'; + import { IAppState } from '../../../../common/core/store/state/app.state'; -import { Store } from '@ngrx/store'; -import { Observable } from 'rxjs'; import { IBlueprintState } from 'src/app/common/core/store/models/blueprintState.model'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import { IMetaData } from '../../../../common/core/store/models/metadata.model'; +import { LoadBlueprintSuccess } from 'src/app/common/core/store/actions/blueprint.action'; @Component({ selector: 'app-metadata', @@ -37,8 +40,8 @@ export class MetadataComponent implements OnInit { CBAMetadataForm: FormGroup; metadata: IMetaData; bpState: Observable<IBlueprintState>; - @Output() metadataform = new EventEmitter<IMetaData>(); - + blueprint: IBlueprint; + constructor(private formBuilder: FormBuilder, private store: Store<IAppState>) { this.bpState = this.store.select('blueprint'); this.CBAMetadataForm = this.formBuilder.group({ @@ -77,7 +80,8 @@ export class MetadataComponent implements OnInit { UploadMetadata() { this.metadata = Object.assign({}, this.CBAMetadataForm.value); - this.metadataform.emit(this.metadata); + this.blueprint.metadata = this.metadata; + this.store.dispatch(new LoadBlueprintSuccess(this.blueprint)); } }
\ No newline at end of file |