Editor mode for all type files

Change-Id: I51f478f8a6b042d5137dae15d197a60f6ea35822
Issue-ID: CCSDK-1135
Signed-off-by: Ezhilarasi <ezhrajam@in.ibm.com>

2 files changed, 47 insertions, 18 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 01e6e80af..bcf2d1549 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
@@ -39,7 +39,7 @@ limitations under the License.
         </mat-tree>
     </div>
     <div class="editorConatiner">
-        <ace-editor [(text)]="text" mode="json" #editor class="aceEditor"></ace-editor>
+        <ace-editor [(text)]="text" [(mode)]="mode" #editor class="aceEditor"></ace-editor>
     </div>
 </div>
 <!-- <div style="position:relative">
@@ -65,7 +65,7 @@ limitations under the License.
     </div>
     <div style="height: 6em;
     width: 16em">
-    <button style="margin: 0.5em;
+        <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
@@ -74,32 +74,32 @@ limitations under the License.
     </div>
     <div style="height: 6em;
     width: 100%;">
-    <div style="margin-left: 38em">
-        <mat-form-field>
-            <select matNativeControl required>
+        <div style="margin-left: 38em">
+            <mat-form-field>
+                <select matNativeControl required>
               <option value="volvo">SDC</option>
               <option value="saab">CCSDK</option>
             </select>
-        </mat-form-field>
-        <button style="margin: 0.5em;
+            </mat-form-field>
+            <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
         padding: 0.5em;
         min-width: 6em;">Deploy</button>
-        <button style="margin: 0.5em;
+            <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
         padding: 0.5em;
         min-width: 6em;">Save</button>
-        <button style="margin: 0.5em;
+            <button style="margin: 0.5em;
         background-color: #3f51b5;
         color: white;
         border-radius: 2em;
         padding: 0.5em;
         min-width: 6em;">Download</button>
 
-    </div>
+        </div>
     </div>
 </div>
\ 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 ac701806e..5092a698e 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
@@ -79,6 +79,8 @@ export class EditorComponent implements OnInit {
   selectedFile: string;
   zipFolder: any;
   blueprintName: string;
+  fileExtension: string;
+  mode: string;
   private zipFile: JSZip = new JSZip();
 
   private transformer = (node: Node, level: number) => {
@@ -145,22 +147,21 @@ export class EditorComponent implements OnInit {
         // this.editor.getEditor().getSession().setMode("ace/mode/json");
         this.editor.getEditor().getSession().setTabSize(2);
         this.editor.getEditor().getSession().setUseWrapMode(true);
-        // this.editor.getEditor().setValue(JSON.stringify(this.blueprintdata, null, '\t'));
-        // console.log(this.text);
+        this.setEditorMode();
       })
   }
 
   updateBlueprint() {
     console.log(this.blueprint);
-    this.filesData.forEach(fileNode=>{
-      if(fileNode.name.includes(this.blueprintName.trim()) && fileNode.name.includes(this.selectedFile.trim())) {
+    this.filesData.forEach(fileNode => {
+      if (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 (fileNode.name.includes(this.selectedFile.trim())) {
         fileNode.data = this.text;
       }
     });
 
-    if(this.selectedFile == this.blueprintName) {
+    if (this.selectedFile == this.blueprintName) {
       this.blueprint = JSON.parse(this.text);
     } else {
       this.blueprint = this.blueprintdata;
@@ -183,12 +184,15 @@ export class EditorComponent implements OnInit {
         this.text = fileNode.data;
       }
     })
+    this.fileExtension = this.selectedFile.substr(this.selectedFile.lastIndexOf('.') + 1);
+    // console.log(this.fileExtension);
+    this.setEditorMode();
   }
 
   SaveToBackend() {
     this.zipFile.generateAsync({ type: "blob" })
       .then(blob => {
-        
+
       });
   }
 
@@ -196,7 +200,7 @@ export class EditorComponent implements OnInit {
     // to do
   }
 
-  create() {    
+  create() {
     this.filesData.forEach((path) => {
       this.zipFile.file(path.name, path.data);
     });
@@ -210,4 +214,29 @@ export class EditorComponent implements OnInit {
         saveAs(blob, zipFilename);
       });
   }
+  setEditorMode() {
+    switch (this.fileExtension) {
+      case "xml":
+        // console.log("xml mode set");
+        this.mode = 'xml';
+        break;
+      case "py":
+        console.log("python mode set");
+        this.mode = 'python';
+        break;
+      case "kts":
+        // console.log("kotlin mode set");
+        this.mode = 'kotlin';
+        break;
+      case "txt":
+        this.mode = 'text';
+        break;
+      case "meta":
+        this.mode = 'text';
+        break;
+      default:
+        this.mode = 'json';
+        console.log("json mode set");
+    }
+  }
 }