diff options
author | 2019-02-22 15:08:20 +0530 | |
---|---|---|
committer | 2019-02-22 10:17:41 +0000 | |
commit | d6ff0d09fadcb35a9d1c28c3b26313b0ac4e27bd (patch) | |
tree | 7bddc0b2ba895c4e5f7a4652adcc2ec31db6826d /cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor | |
parent | d94c81e03562abd5fe097c21bba1b00d2bd9bdea (diff) |
Editor text options and change
Change-Id: I347f8b9e47ed8af1e40907da3b535a5d45243b1a
Issue-ID: CCSDK-704
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor')
-rw-r--r-- | cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts | 79 |
1 files changed, 67 insertions, 12 deletions
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 bf135bba2..9073d10cf 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 @@ -19,9 +19,19 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit } from '@angular/core'; -import {FlatTreeControl} from '@angular/cdk/tree'; -import {MatTreeFlatDataSource, MatTreeFlattener} from '@angular/material/tree'; +import { Component, OnInit, ViewChild } from '@angular/core'; +import { FlatTreeControl } from '@angular/cdk/tree'; +import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree'; +import { IBlueprint } from 'src/app/common/core/store/models/blueprint.model'; +import "ace-builds/webpack-resolver"; +import 'brace'; +import 'brace/ext/language_tools'; +import 'ace-builds/src-min-noconflict/snippets/html'; +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'; + interface FoodNode { name: string; @@ -32,19 +42,19 @@ const TREE_DATA: FoodNode[] = [ { name: 'Definitions', children: [ - {name: 'activation-blueprint.json'}, - {name: 'artifacts_types.json'}, - {name: 'data_types.json'}, + { 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: 'ScriptComponent.cba.kts' }, + { name: 'ResourceAssignmentProcessor.cba.kts' }, ] } ] @@ -82,6 +92,12 @@ interface ExampleFlatNode { }) export class EditorComponent implements OnInit { + @ViewChild('editor') editor; + blueprintdata: IBlueprint; + blueprint: IBlueprint; + bpState: Observable<IBlueprintState>; + text: string; + private transformer = (node: FoodNode, level: number) => { return { expandable: !!node.children && node.children.length > 0, @@ -91,24 +107,63 @@ export class EditorComponent implements OnInit { } treeControl = new FlatTreeControl<ExampleFlatNode>( - node => node.level, node => node.expandable); + node => node.level, node => node.expandable); treeFlattener = new MatTreeFlattener( - this.transformer, node => node.level, node => node.expandable, node => node.children); + this.transformer, node => node.level, node => node.expandable, node => node.children); dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener); - constructor() { + constructor(private store: Store<IAppState>) { this.dataSource.data = TREE_DATA; + this.bpState = this.store.select('blueprint'); } hasChild = (_: number, node: ExampleFlatNode) => node.expandable; ngOnInit() { + this.editorContent(); } fileClicked(file) { console.log('selected file:' + file); } + editorContent() { + this.editor.setTheme("eclipse"); + this.editor.getEditor().setOptions({ + // enableBasicAutocompletion: true, + fontSize: "100%", + printMargin: false, + }); + this.editor.getEditor().commands.addCommand({ + name: "showOtherCompletions", + bindKey: "Ctrl-.", + exec: function (editor) { + } + }) + this.bpState.subscribe( + blueprintdata => { + var blueprintState: IBlueprintState = { blueprint: blueprintdata.blueprint, isLoadSuccess: blueprintdata.isLoadSuccess, isSaveSuccess: blueprintdata.isSaveSuccess, isUpdateSuccess: blueprintdata.isUpdateSuccess }; + this.blueprintdata = blueprintState.blueprint; + let blueprint = []; + for (let key in this.blueprintdata) { + if (this.blueprintdata.hasOwnProperty(key)) { + blueprint.push(this.blueprintdata[key]); + } + } + this.text = JSON.stringify(this.blueprintdata, null, '\t'); + // this.editor.getEditor().getSession().setMode("ace/mode/json"); + this.editor.getEditor().getSession().setTabSize(2); + this.editor.getEditor().getSession().setUseWrapMode(true); + // this.editor.getEditor().setValue(JSON.stringify(this.blueprintdata, null, '\t')); + // console.log(this.text); + }) + } + + updateBlueprint(){ + this.blueprint = JSON.parse(this.text); + this.store.dispatch(new LoadBlueprintSuccess(this.blueprint)); + // console.log(this.text); + } } |