diff options
Diffstat (limited to 'cds-ui/client')
3 files changed, 103 insertions, 36 deletions
diff --git a/cds-ui/client/package.json b/cds-ui/client/package.json index 9ad47413d..0eea31ec1 100644 --- a/cds-ui/client/package.json +++ b/cds-ui/client/package.json @@ -31,6 +31,7 @@ "core-js": "^2.5.4", "d3": "^5.9.1", "font-awesome": "^4.7.0", + "file-saver": "^2.0.1", "hammerjs": "^2.0.8", "jszip": "^3.2.0", "material-design-icons": "^3.0.1", 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 4c1a7dc9e..d7ba14072 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 @@ -25,7 +25,7 @@ limitations under the License. <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> + <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button> </mat-tree-node> <!-- This is the tree node template for expandable nodes --> <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding> @@ -34,7 +34,7 @@ limitations under the License. {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}} </mat-icon> </button> - <span (click)="fileClicked(node.name)">{{node.name}}</span> + <button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button> </mat-tree-node> </mat-tree> </div> @@ -43,5 +43,6 @@ limitations under the License. </div> </div> <div style="position:relative"> - <button mat-button class="savebtn" (click)="updateBlueprint()">Save</button> + <button mat-button class="savebtn" (click)="updateBlueprint();SaveToBackend()">Save</button> + <button mat-button class="savebtn" (click)="download();">Download</button> </div>
\ 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 46dca73dd..96aececcf 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 @@ -27,18 +27,61 @@ 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 } from '../../../../common/core/store/actions/blueprint.action'; +import { LoadBlueprintSuccess } from '../../../../common/core/store/actions/blueprint.action' interface FoodNode { name: string; children?: FoodNode[]; + data?: any } +// 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' +// } +// ] +// }, +// ]; + const TREE_DATA: FoodNode[] = [ { name: 'Definitions', @@ -47,35 +90,7 @@ const TREE_DATA: FoodNode[] = [ { 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 */ @@ -98,6 +113,11 @@ export class EditorComponent implements OnInit { blueprint: IBlueprint; bpState: Observable<IBlueprintState>; text: string; + filesTree: any = []; + filesData: any = []; + selectedFile: string; + zipFolder: any; + private zipFile: JSZip = new JSZip(); private transformer = (node: FoodNode, level: number) => { return { @@ -118,12 +138,14 @@ export class EditorComponent implements OnInit { 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) { @@ -147,6 +169,9 @@ export class EditorComponent implements OnInit { 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; let blueprint = []; for (let key in this.blueprintdata) { if (this.blueprintdata.hasOwnProperty(key)) { @@ -161,10 +186,50 @@ export class EditorComponent implements OnInit { // console.log(this.text); }) } - - updateBlueprint(){ + + updateBlueprint() { + if (this.selectedFile == 'activation-blueprint.json') { + // to do + } else { + // to do + } this.blueprint = JSON.parse(this.text); this.store.dispatch(new LoadBlueprintSuccess(this.blueprint)); // console.log(this.text); - } + } + + selectFileToView(file) { + this.selectedFile = file.name; + this.filesData.forEach((fileNode) => { + if (fileNode.name.includes(file.name)) { + this.text = fileNode.data; + } + }) + } + + 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); + }); + } } |