summaryrefslogtreecommitdiffstats
path: root/cds-ui/client
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui/client')
-rw-r--r--cds-ui/client/pom.xml150
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.html15
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.scss3
-rw-r--r--cds-ui/client/src/app/feature-modules/blueprint/modify-template/editor/editor.component.ts116
4 files changed, 202 insertions, 82 deletions
diff --git a/cds-ui/client/pom.xml b/cds-ui/client/pom.xml
index 573ab1fbb..b0b1c55ec 100644
--- a/cds-ui/client/pom.xml
+++ b/cds-ui/client/pom.xml
@@ -19,81 +19,79 @@ limitations under the License.
============LICENSE_END============================================ -->
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
- xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
- <modelVersion>4.0.0</modelVersion>
-
- <parent>
- <groupId>org.onap.ccsdk.cds</groupId>
- <artifactId>controller-design-studio</artifactId>
- <version>1.0.0-SNAPSHOT</version>
- <relativePath>../..</relativePath>
- </parent>
-
+ xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
+ <modelVersion>4.0.0</modelVersion>
+
+ <parent>
<groupId>org.onap.ccsdk.cds</groupId>
- <artifactId>controller-design-studio-client</artifactId>
- <version>1.0.0-SNAPSHOT</version>
- <packaging>pom</packaging>
-
- <name>cds-ui</name>
-
- <properties>
- <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
- <npm.executable>npm</npm.executable>
- <onap.nexus.url>https://nexus.onap.org</onap.nexus.url>
- </properties>
-
-
-
- <build>
- <plugins>
- <plugin>
- <groupId>com.github.eirslett</groupId>
- <artifactId>frontend-maven-plugin</artifactId>
- <!-- Use the latest released version: https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
- <version>1.3</version>
- <configuration>
- <nodeVersion>v8.12.0</nodeVersion>
- <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
- <npmDownloadRoot>https://nodejs.org/dist/npm/</npmDownloadRoot>
- <installDirectory>./</installDirectory>
- </configuration>
- <executions>
- <execution>
- <id>install node and npm</id>
- <goals>
- <goal>install-node-and-npm</goal>
- </goals>
- <phase>generate-resources</phase>
- </execution>
-
- <execution>
- <id>npm install</id>
- <goals>
- <goal>npm</goal>
- </goals>
-
- <phase>generate-resources</phase>
-
- <configuration>
- <arguments>install</arguments>
- </configuration>
- </execution>
-
- <execution>
- <id>npm build</id>
- <goals>
- <goal>npm</goal>
- </goals>
-
- <phase>generate-resources</phase>
-
- <configuration>
- <arguments>run build</arguments>
- </configuration>
- </execution>
-
- </executions>
- </plugin>
- </plugins>
- </build>
+ <artifactId>ui</artifactId>
+ <version>0.4.2-SNAPSHOT</version>
+ <relativePath>..</relativePath>
+ </parent>
+
+ <artifactId>ui-client</artifactId>
+ <version>0.4.2-SNAPSHOT</version>
+ <packaging>pom</packaging>
+
+ <name>cds-ui-client</name>
+
+ <properties>
+ <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
+ <npm.executable>npm</npm.executable>
+ <onap.nexus.url>https://nexus.onap.org</onap.nexus.url>
+ </properties>
+
+
+ <build>
+ <plugins>
+ <plugin>
+ <groupId>com.github.eirslett</groupId>
+ <artifactId>frontend-maven-plugin</artifactId>
+ <!-- Use the latest released version: https://repo1.maven.org/maven2/com/github/eirslett/frontend-maven-plugin/ -->
+ <version>1.3</version>
+ <configuration>
+ <nodeVersion>v8.12.0</nodeVersion>
+ <nodeDownloadRoot>https://nodejs.org/dist/</nodeDownloadRoot>
+ <npmDownloadRoot>https://nodejs.org/dist/npm/</npmDownloadRoot>
+ <installDirectory>./</installDirectory>
+ </configuration>
+ <executions>
+ <execution>
+ <id>install node and npm</id>
+ <goals>
+ <goal>install-node-and-npm</goal>
+ </goals>
+ <phase>generate-resources</phase>
+ </execution>
+
+ <execution>
+ <id>npm install</id>
+ <goals>
+ <goal>npm</goal>
+ </goals>
+
+ <phase>generate-resources</phase>
+
+ <configuration>
+ <arguments>install</arguments>
+ </configuration>
+ </execution>
+
+ <execution>
+ <id>npm build</id>
+ <goals>
+ <goal>npm</goal>
+ </goals>
+
+ <phase>generate-resources</phase>
+
+ <configuration>
+ <arguments>run build</arguments>
+ </configuration>
+ </execution>
+
+ </executions>
+ </plugin>
+ </plugins>
+ </build>
</project>
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 308f9cc1f..2b88bcfcf 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
@@ -20,18 +20,29 @@ limitations under the License.
<div class="container">
<div class="fileViewContainer">
+ <!-- <div style="width:inherit; height: inherit; position: fixed;z-index: 1; background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);"></div> -->
+ <div style="display: flex;">
+ <div>
+ <i class="fa fa-folder" aria-hidden="true" style="color:#3f51b5; font-size: 20px;margin: 3px; cursor: pointer;" (click)="enableNameInputEl('createFolder')"></i>
+ <i class="fa fa-file" aria-hidden="true" style="color:#3f51b5; font-size: 18px; margin: 3px; cursor: pointer;" (click)="enableNameInputEl('createFile')"></i>
+ <i class="fa fa-trash" aria-hidden="true" style="color:#3f51b5; font-size: 20px; margin: 3px; cursor: pointer;" (click)="deleteFolderOrFile('deleteFile')"></i>
+ </div>
+ <div>
+ <input *ngIf="isNameTextboxEnablled" type="text" (focusout)="createFolderOrFile($event)"/>
+ </div>
+ </div>
<mat-tree [dataSource]="dataSource" [treeControl]="treeControl" style="background-color: #ebebeb">
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding (click)="selectFileToView(node);activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
<button mat-icon-button disabled></button>
<button mat-icon-button (click)="selectFileToView(node)">{{node.name}}</button>
</mat-tree-node>
- <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding>
+ <mat-tree-node *matTreeNodeDef="let node;when: hasChild" matTreeNodePadding (click)="activeNode = node" [ngClass]="{ 'background-highlight': activeNode === node }">
<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>
- <button mat-icon-button>{{node.name}}</button>
+ <button mat-icon-button (click)="selectFolder(node)">{{node.name}}</button>
</mat-tree-node>
</mat-tree>
</div>
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 2f16af7a5..ad2e03833 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
@@ -61,5 +61,6 @@ limitations under the License.
}
.background-highlight {
- background-color: whitesmoke !important;
+ background-color: #3f51b5 !important;
+ color: white !important;
} \ 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 e48177d0a..eaac8cbde 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
@@ -83,6 +83,11 @@ export class EditorComponent implements OnInit {
mode: string;
private zipFile: JSZip = new JSZip();
activeNode: any;
+ selectedFolder: string;
+ activationBlueprint: string;
+ isNameTextboxEnablled : boolean = false;
+ fileAction : string;
+ filetoDelete : string;
private transformer = (node: Node, level: number) => {
return {
@@ -155,14 +160,14 @@ export class EditorComponent implements OnInit {
updateBlueprint() {
console.log(this.blueprint);
this.filesData.forEach(fileNode => {
- if (fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) {
+ if (this.selectedFile && 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 (this.selectedFile && fileNode.name.includes(this.selectedFile.trim())) {
fileNode.data = this.text;
}
});
- if (this.selectedFile == this.blueprintName.trim()) {
+ if (this.selectedFile && this.selectedFile == this.blueprintName.trim()) {
this.blueprint = JSON.parse(this.text);
} else {
this.blueprint = this.blueprintdata;
@@ -180,6 +185,7 @@ export class EditorComponent implements OnInit {
selectFileToView(file) {
this.selectedFile = file.name;
+ this.filetoDelete = file.name;
this.filesData.forEach((fileNode) => {
if (fileNode.name.includes(file.name)) {
this.text = fileNode.data;
@@ -239,4 +245,108 @@ export class EditorComponent implements OnInit {
this.mode = 'json';
}
}
+
+ selectFolder(node) {
+ this.selectedFolder = node.name;
+ this.filetoDelete = node.name;
+ console.log(node);
+ // this.createFolderOrFile(node.name, 'folder');
+ }
+
+ createFolderOrFile(name) {
+ let newFilesData: [any] = this.filesData;
+ let newFileNode = {
+ name: '',
+ data: ''
+ }
+ let newFileNode1 = {
+ name: '',
+ data: ''
+ }
+ for(let i=0; i< this.filesData.length; i++) {
+ if (this.filesData[i].name.includes(this.selectedFolder)) {
+ if(this.fileAction == 'createFolder') {
+ newFileNode.name = this.filesData[i].name + name.srcElement.value + '/';
+ newFileNode.data = '';
+
+ newFileNode1.name = this.filesData[i].name + name.srcElement.value + '/README.md'
+ newFileNode1.data = name.srcElement.value + ' Folder';
+ } else {
+ newFileNode.name = this.filesData[i].name + name.srcElement.value;
+ newFileNode.data = '';
+ }
+ break;
+ }
+ }
+
+ this.filesData.splice(this.findIndexForNewNode()+1, 0, newFileNode);
+ this.filesData.splice(this.findIndexForNewNode()+1, 0, newFileNode1);
+ this.arrangeTreeData(this.filesData);
+ }
+
+ findIndexForNewNode() {
+ let indexForNewNode;
+ for(let i=0; i< this.filesData.length; i++) {
+ if (this.filesData[i].name.includes(this.selectedFolder)) {
+ indexForNewNode = i;
+ }
+ }
+ return indexForNewNode;
+ }
+
+ arrangeTreeData(paths) {
+ const tree = [];
+
+ paths.forEach((path) => {
+
+ const pathParts = path.name.split('/');
+ // pathParts.shift();
+ let currentLevel = tree;
+
+ pathParts.forEach((part) => {
+ const existingPath = currentLevel.filter(level => level.name === part);
+
+ if (existingPath.length > 0) {
+ currentLevel = existingPath[0].children;
+ } else {
+ const newPart = {
+ name: part,
+ children: [],
+ data: path.data,
+ path : path.name
+ };
+ if(part.trim() == this.blueprintName.trim()) {
+ this.activationBlueprint = path.data;
+ newPart.data = JSON.parse(this.activationBlueprint.toString());
+ console.log('newpart', newPart);
+ }
+ if(newPart.name !== '') {
+ currentLevel.push(newPart);
+ currentLevel = newPart.children;
+ }
+ }
+ });
+ });
+ this.dataSource.data = tree;
+ this.filesTree = tree;
+ this.isNameTextboxEnablled = false;
+ this.updateBlueprint();
+ }
+
+ enableNameInputEl(action) {
+ this.fileAction = action;
+ if (action == 'createFolder' || action == 'createFile') {
+ this.isNameTextboxEnablled = true;
+ }
+ }
+
+ deleteFolderOrFile(action) {
+ for(let i=0;i< this.filesData.length ; i++) {
+ if(this.filesData[i].name.includes(this.filetoDelete.trim())) {
+ this.filesData.splice(i, 1);
+ i = i-1;
+ }
+ }
+ this.arrangeTreeData(this.filesData);
+ }
}