diff options
Diffstat (limited to 'cds-ui/client/src/app')
6 files changed, 126 insertions, 79 deletions
diff --git a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts index f5092aff3..092531ee3 100644 --- a/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts +++ b/cds-ui/client/src/app/common/shared/pipes/search.pipe.ts @@ -26,12 +26,11 @@ import { Pipe, PipeTransform } from '@angular/core'; export class SearchPipe implements PipeTransform{ - transform(items: any[], searchText: string): any[] { - if(!items) return []; - if(!searchText) return items; - searchText = searchText.toLowerCase(); - return items.filter( it => { - return it.toLowerCase().includes(searchText); - }); - } + transform(item: any, searchText: any): any { + if(searchText == null) return item; + + return item.filter(function(search){ + return search.type.toLowerCase().indexOf(searchText.toLowerCase()) > -1; + }) + } }
\ No newline at end of file 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 01e6e80af..bcf2d1549 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 @@ -39,7 +39,7 @@ limitations under the License. </mat-tree> </div> <div class="editorConatiner"> - <ace-editor [(text)]="text" mode="json" #editor class="aceEditor"></ace-editor> + <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor> </div> </div> <!-- <div style="position:relative"> @@ -65,7 +65,7 @@ limitations under the License. </div> <div style="height: 6em; width: 16em"> - <button style="margin: 0.5em; + <button style="margin: 0.5em; background-color: #3f51b5; color: white; border-radius: 2em; @@ -74,32 +74,32 @@ limitations under the License. </div> <div style="height: 6em; width: 100%;"> - <div style="margin-left: 38em"> - <mat-form-field> - <select matNativeControl required> + <div style="margin-left: 38em"> + <mat-form-field> + <select matNativeControl required> <option value="volvo">SDC</option> <option value="saab">CCSDK</option> </select> - </mat-form-field> - <button style="margin: 0.5em; + </mat-form-field> + <button style="margin: 0.5em; background-color: #3f51b5; color: white; border-radius: 2em; padding: 0.5em; min-width: 6em;">Deploy</button> - <button style="margin: 0.5em; + <button style="margin: 0.5em; background-color: #3f51b5; color: white; border-radius: 2em; padding: 0.5em; min-width: 6em;">Save</button> - <button style="margin: 0.5em; + <button style="margin: 0.5em; background-color: #3f51b5; color: white; border-radius: 2em; padding: 0.5em; min-width: 6em;">Download</button> - </div> + </div> </div> </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 ac701806e..5092a698e 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 @@ -79,6 +79,8 @@ export class EditorComponent implements OnInit { selectedFile: string; zipFolder: any; blueprintName: string; + fileExtension: string; + mode: string; private zipFile: JSZip = new JSZip(); private transformer = (node: Node, level: number) => { @@ -145,22 +147,21 @@ export class EditorComponent implements OnInit { // 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); + this.setEditorMode(); }) } updateBlueprint() { console.log(this.blueprint); - this.filesData.forEach(fileNode=>{ - if(fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) { + 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())) { + } else if (fileNode.name.includes(this.selectedFile.trim())) { fileNode.data = this.text; } }); - if(this.selectedFile == this.blueprintName) { + if (this.selectedFile == this.blueprintName) { this.blueprint = JSON.parse(this.text); } else { this.blueprint = this.blueprintdata; @@ -183,12 +184,15 @@ export class EditorComponent implements OnInit { 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 => { - + }); } @@ -196,7 +200,7 @@ export class EditorComponent implements OnInit { // to do } - create() { + create() { this.filesData.forEach((path) => { this.zipFile.file(path.name, path.data); }); @@ -210,4 +214,29 @@ export class EditorComponent implements OnInit { saveAs(blob, zipFilename); }); } + setEditorMode() { + switch (this.fileExtension) { + case "xml": + // console.log("xml mode set"); + this.mode = 'xml'; + break; + case "py": + console.log("python mode set"); + this.mode = 'python'; + break; + case "kts": + // console.log("kotlin mode set"); + this.mode = 'kotlin'; + break; + case "txt": + this.mode = 'text'; + break; + case "meta": + this.mode = 'text'; + break; + default: + this.mode = 'json'; + console.log("json mode set"); + } + } } 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 7c225d285..b16a06494 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 @@ -20,7 +20,7 @@ limitations under the License. --> <div style="display: flex;flex-direction: row"> - <div style="width: 12%; height: 553px;"> + <!-- <div style="width: 12%; height: 553px;"> <mat-accordion> <mat-expansion-panel> @@ -34,38 +34,32 @@ limitations under the License. </div> </mat-expansion-panel> </mat-accordion> - </div> + </div> --> - <div style="width: 90%;display: flex;flex-direction: row; margin-left: 1em"> - <div style="width: 50%; margin: 2px;"> - <p>Request</p> - <textarea style=" width: 99%; - min-height: 27rem; - font-family: Lucida Console, Monaco, monospace; - font-size: 0.8rem; - line-height: 1.2;" cols="30" rows="10">{{request }}</textarea> - <div style="height: 10%"> - <button style="margin: 1em; - background-color: #3f51b5; - color: white; - border-radius: 2em; - padding: 0.5em;min-width: 6em;">Submit</button> - <button style="margin: 1em; - background-color: #3f51b5; - color: white; - border-radius: 2em; - padding: 0.5em;min-width: 6em;">Clear</button> + <div style="width: 100%;display: flex;flex-direction: row; margin-left: 1em"> + <div style="width: 50%; margin: 2px; "> + <p>Request</p> + <!-- <textarea style=" width: 99%; + min-height: 27rem; + font-family: Lucida Console, Monaco, monospace; + font-size: 0.8rem; + line-height: 1.2;" cols="30" rows="10">{{request }}</textarea> --> + <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor> + <div style="height: 10%"> + <button class="button">Submit</button> + <button class="button">Clear</button> + </div> </div> - </div> - <div style="width: 50%; margin: 2px;"> - <p>Response</p> - <textarea style=" width: 99%; - min-height: 27rem; - font-family: Lucida Console, Monaco, monospace; - font-size: 0.8rem; - line-height: 1.2;" cols="30" rows="10"></textarea> + <div style="width: 50%; margin: 2px;"> + <p>Response</p> + <ace-editor [(text)]="text" mode="json" [theme]="eclipse" [options]="options" #editor class="aceEditor"></ace-editor> + <!-- <textarea style=" width: 99%; + min-height: 27rem; + font-family: Lucida Console, Monaco, monospace; + font-size: 0.8rem; + line-height: 1.2;" cols="30" rows="10"></textarea> --> + </div> </div> - </div> -</div> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss index 22941b5fa..33a7e2d60 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/test-template/test-template.component.scss @@ -17,4 +17,24 @@ 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 +*/ + +.aceEditor { + overflow: hidden; + // height: 100% !important; + min-height: 27rem; + background-color: white !important; + border: 1px solid #3f87a6; + border-left: 3px solid #3f87a6; + line-height: 1.2; + width: 99%; +} + +.button { + margin: 1em; + background-color: #3f51b5; + color: white; + border-radius: 2em; + padding: 0.5em; + min-width: 6em; +}
\ No newline at end of file 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 ee33fd737..2a2455c61 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 @@ -19,9 +19,9 @@ 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 { Observable, Subscription } from 'rxjs'; import { Store } from '@ngrx/store'; @@ -31,7 +31,10 @@ 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'; - +import "ace-builds/webpack-resolver"; +import 'brace'; +import 'brace/ext/language_tools'; +import 'ace-builds/src-min-noconflict/snippets/html'; interface FoodNode { name: string; @@ -42,19 +45,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' }, ] } ] @@ -95,9 +98,10 @@ interface ExampleFlatNode { }) export class TestTemplateComponent implements OnInit { private blueprintpState: Subscription; - private request ; + private request; private workflows = []; - + @ViewChild('editor') editor; + options: any = { fontSize: "100%", printMargin: false, tabSize: 2 }; private transformer = (node: FoodNode, level: number) => { return { expandable: !!node.children && node.children.length > 0, @@ -107,23 +111,24 @@ export class TestTemplateComponent 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(private store: Store<IAppState>) { this.blueprintpState = this.store.select('blueprint') - .subscribe((data: any)=>{ - console.log(data); - if(data.blueprint.topology_template && data.blueprint.topology_template.workflows) { - this.buildWorkflowData(data.blueprint.topology_template.workflows); - // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4); - } - }); + .subscribe((data: any) => { + console.log(data); + if (data.blueprint.topology_template && data.blueprint.topology_template.workflows) { + this.buildWorkflowData(data.blueprint.topology_template.workflows); + // this.request = JSON.stringify(data.blueprint.topology_template.workflows[0], undefined, 4); + } + }); this.dataSource.data = TREE_DATA; + } hasChild = (_: number, node: ExampleFlatNode) => node.expandable; |