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