File/folder add/delete

Implemented add/delete folder/file feature

Issue-ID: CCSDK-1171
Change-Id: Ibbadd3d933291a98cc07f9444962c0ebcbca7d1f
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

3 files changed, 128 insertions, 6 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 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);
+  }
 }