diff options
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts')
-rw-r--r-- | cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts | 242 |
1 files changed, 242 insertions, 0 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 new file mode 100644 index 000000000..e48177d0a --- /dev/null +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts @@ -0,0 +1,242 @@ +/* +============LICENSE_START========================================== +=================================================================== +Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved. +=================================================================== + +Unless otherwise specified, all software contained herein is licensed +under the Apache License, Version 2.0 (the License); +you may not use this software 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. +============LICENSE_END============================================ +*/ + +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 * as JSZip from 'jszip'; +import { saveAs } from 'file-saver'; + +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 { LoadBlueprintSuccess, SetBlueprintState } from '../../../../common/core/store/actions/blueprint.action' + + +interface Node { + name: string; + children?: Node[]; + data?: any +} + +const TREE_DATA: Node[] = [ + { + name: 'Definitions', + children: [ + { name: 'activation-blueprint.json' }, + { name: 'artifacts_types.json' }, + { name: 'data_types.json' }, + ] + } +]; + +/** Flat node with expandable and level information */ +interface ExampleFlatNode { + expandable: boolean; + name: string; + level: number; +} + + +@Component({ + selector: 'app-editor', + templateUrl: './editor.component.html', + styleUrls: ['./editor.component.scss'] +}) +export class EditorComponent implements OnInit { + + @ViewChild('editor') editor; + blueprintdata: IBlueprint; + blueprint: IBlueprint; + bpState: Observable<IBlueprintState>; + text: string; + filesTree: any = []; + filesData: any = []; + selectedFile: string; + zipFolder: any; + blueprintName: string; + fileExtension: string; + mode: string; + private zipFile: JSZip = new JSZip(); + activeNode: any; + + private transformer = (node: Node, 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(private store: Store<IAppState>) { + this.dataSource.data = TREE_DATA; + this.bpState = this.store.select('blueprint'); + // this.dataSource.data = TREE_DATA; + } + + hasChild = (_: number, node: ExampleFlatNode) => node.expandable; + + ngOnInit() { + this.editorContent(); + this.dataSource.data = this.filesTree; + } + + 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; + this.filesTree = blueprintdata.files; + this.filesData = blueprintdata.filesData; + this.dataSource.data = this.filesTree; + this.blueprintName = blueprintdata.name; + 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.setEditorMode(); + }) + } + + updateBlueprint() { + console.log(this.blueprint); + this.filesData.forEach(fileNode => { + if (fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) { + fileNode.data = this.text; + } else if (fileNode.name.includes(this.selectedFile.trim())) { + fileNode.data = this.text; + } + }); + + if (this.selectedFile == this.blueprintName.trim()) { + this.blueprint = JSON.parse(this.text); + } else { + this.blueprint = this.blueprintdata; + } + + let blueprintState = { + blueprint: this.blueprint, + name: this.blueprintName, + files: this.filesTree, + filesData: this.filesData + } + this.store.dispatch(new SetBlueprintState(blueprintState)); + // console.log(this.text); + } + + selectFileToView(file) { + this.selectedFile = file.name; + this.filesData.forEach((fileNode) => { + if (fileNode.name.includes(file.name)) { + this.text = fileNode.data; + } + }) + this.fileExtension = this.selectedFile.substr(this.selectedFile.lastIndexOf('.') + 1); + // console.log(this.fileExtension); + this.setEditorMode(); + } + + SaveToBackend() { + this.zipFile.generateAsync({ type: "blob" }) + .then(blob => { + + }); + } + + deploy() { + // to do + } + + create() { + this.filesData.forEach((path) => { + this.zipFile.file(path.name, path.data); + }); + } + + download() { + this.create(); + var zipFilename = "baseconfiguration.zip"; + this.zipFile.generateAsync({ type: "blob" }) + .then(blob => { + saveAs(blob, zipFilename); + }); + } + setEditorMode() { + switch (this.fileExtension) { + case "xml": + this.mode = 'xml'; + break; + case "py": + this.mode = 'python'; + break; + case "kts": + this.mode = 'kotlin'; + break; + case "txt": + this.mode = 'text'; + break; + case "meta": + this.mode = 'text'; + break; + case "vtl": + this.mode = 'velocity'; + break; + default: + this.mode = 'json'; + } + } +} |