diff options
Diffstat (limited to 'cds-ui/client')
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); + } } |