summaryrefslogtreecommitdiffstats
path: root/cds-ui/client/src/app/feature-modules/blueprint/modify-template
diff options
context:
space:
mode:
authorArundathi Patil <arundpil@in.ibm.com>2019-02-21 15:54:46 +0530
committerArundathi Patil <arundpil@in.ibm.com>2019-02-21 11:15:21 +0000
commit7f59318da9974df092936250a9134e9e8b595c66 (patch)
tree1b64fb399b04bdb1c386e73c980a2708a0d74efa /cds-ui/client/src/app/feature-modules/blueprint/modify-template
parentfdd6331215678fd5c84e1514c48946825530d101 (diff)
File View-editor component
Added file manager code for editor component. User can select the file to be viewed through this file manager Issue-ID: CCSDK-1098 Change-Id: I1063069f8d6f982b0667210673aa3369465e1c3f Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>
Diffstat (limited to 'cds-ui/client/src/app/feature-modules/blueprint/modify-template')
-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
3 files changed, 123 insertions, 3 deletions
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);
+ }
+
}