aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--cds-ui/client/angular.json268
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html27
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss19
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts80
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html16
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.scss27
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.ts6
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/select-template/metadata/metadata.component.ts18
8 files changed, 306 insertions, 155 deletions
diff --git a/cds-ui/client/angular.json b/cds-ui/client/angular.json
index 382af6e4d..6ca6dd04a 100644
--- a/cds-ui/client/angular.json
+++ b/cds-ui/client/angular.json
@@ -1,141 +1,145 @@
{
- "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
- "version": 1,
- "newProjectRoot": "projects",
- "projects": {
- "cds-ui": {
- "root": "",
- "sourceRoot": "src",
- "projectType": "application",
- "prefix": "app",
- "schematics": {
- "@schematics/angular:component": {
- "styleext": "scss"
- }
- },
- "architect": {
- "build": {
- "builder": "@angular-devkit/build-angular:browser",
- "options": {
- "outputPath": "../server/public",
- "index": "src/index.html",
- "main": "src/main.ts",
- "polyfills": "src/polyfills.ts",
- "tsConfig": "src/tsconfig.app.json",
- "assets": [
- "src/favicon.ico",
- "src/assets"
- ],
- "styles": [
- "src/styles.scss",
- "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
- "./node_modules/material-design-icons/iconfont/material-icons.css"
- ],
- "scripts": []
- },
- "configurations": {
- "production": {
- "fileReplacements": [
- {
- "replace": "src/environments/environment.ts",
- "with": "src/environments/environment.prod.ts"
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "cds-ui": {
+ "root": "",
+ "sourceRoot": "src",
+ "projectType": "application",
+ "prefix": "app",
+ "schematics": {
+ "@schematics/angular:component": {
+ "styleext": "scss"
}
- ],
- "optimization": true,
- "outputHashing": "all",
- "sourceMap": false,
- "extractCss": true,
- "namedChunks": false,
- "aot": true,
- "extractLicenses": true,
- "vendorChunk": false,
- "buildOptimizer": true,
- "budgets": [
- {
- "type": "initial",
- "maximumWarning": "2mb",
- "maximumError": "5mb"
+ },
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "../server/public",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.app.json",
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "src/styles.scss",
+ "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
+ "./node_modules/material-design-icons/iconfont/material-icons.css"
+ ],
+ "scripts": [
+ "./node_modules/ace-builds/src-min/ace.js",
+ "./node_modules/ace-builds/src-min/theme-eclipse.js",
+ "./node_modules/ace-builds/src-min/mode-json.js",
+ "./node_modules/ace-builds/src-min/mode-javascript.js",
+ "./node_modules/ace-builds/src-min/mode-python.js",
+ "./node_modules/ace-builds/src-min/mode-xml.js",
+ "./node_modules/ace-builds/src-min/mode-kotlin.js"
+ ]
+ },
+ "configurations": {
+ "production": {
+ "fileReplacements": [{
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }],
+ "optimization": true,
+ "outputHashing": "all",
+ "sourceMap": false,
+ "extractCss": true,
+ "namedChunks": false,
+ "aot": true,
+ "extractLicenses": true,
+ "vendorChunk": false,
+ "buildOptimizer": true,
+ "budgets": [{
+ "type": "initial",
+ "maximumWarning": "2mb",
+ "maximumError": "5mb"
+ }]
+ }
+ }
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "cds-ui:build"
+ },
+ "configurations": {
+ "production": {
+ "browserTarget": "cds-ui:build:production"
+ }
+ }
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "cds-ui:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "src/tsconfig.spec.json",
+ "karmaConfig": "src/karma.conf.js",
+ "styles": [
+ "src/styles.scss"
+ ],
+ "scripts": [],
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ]
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": [
+ "src/tsconfig.app.json",
+ "src/tsconfig.spec.json"
+ ],
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
}
- ]
}
- }
},
- "serve": {
- "builder": "@angular-devkit/build-angular:dev-server",
- "options": {
- "browserTarget": "cds-ui:build"
- },
- "configurations": {
- "production": {
- "browserTarget": "cds-ui:build:production"
+ "cds-ui-e2e": {
+ "root": "e2e/",
+ "projectType": "application",
+ "prefix": "",
+ "architect": {
+ "e2e": {
+ "builder": "@angular-devkit/build-angular:protractor",
+ "options": {
+ "protractorConfig": "e2e/protractor.conf.js",
+ "devServerTarget": "cds-ui:serve"
+ },
+ "configurations": {
+ "production": {
+ "devServerTarget": "cds-ui:serve:production"
+ }
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": "e2e/tsconfig.e2e.json",
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
+ }
}
- }
- },
- "extract-i18n": {
- "builder": "@angular-devkit/build-angular:extract-i18n",
- "options": {
- "browserTarget": "cds-ui:build"
- }
- },
- "test": {
- "builder": "@angular-devkit/build-angular:karma",
- "options": {
- "main": "src/test.ts",
- "polyfills": "src/polyfills.ts",
- "tsConfig": "src/tsconfig.spec.json",
- "karmaConfig": "src/karma.conf.js",
- "styles": [
- "src/styles.scss"
- ],
- "scripts": [],
- "assets": [
- "src/favicon.ico",
- "src/assets"
- ]
- }
- },
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": [
- "src/tsconfig.app.json",
- "src/tsconfig.spec.json"
- ],
- "exclude": [
- "**/node_modules/**"
- ]
- }
}
- }
},
- "cds-ui-e2e": {
- "root": "e2e/",
- "projectType": "application",
- "prefix": "",
- "architect": {
- "e2e": {
- "builder": "@angular-devkit/build-angular:protractor",
- "options": {
- "protractorConfig": "e2e/protractor.conf.js",
- "devServerTarget": "cds-ui:serve"
- },
- "configurations": {
- "production": {
- "devServerTarget": "cds-ui:serve:production"
- }
- }
- },
- "lint": {
- "builder": "@angular-devkit/build-angular:tslint",
- "options": {
- "tsConfig": "e2e/tsconfig.e2e.json",
- "exclude": [
- "**/node_modules/**"
- ]
- }
- }
- }
- }
- },
- "defaultProject": "cds-ui"
+ "defaultProject": "cds-ui"
} \ 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 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