aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui
diff options
context:
space:
mode:
Diffstat (limited to 'cds-ui')
-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
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);
+ }
}