From 0a907ab983596975d1d03507adf2b23a1ec26975 Mon Sep 17 00:00:00 2001
From: ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Date: Thu, 13 Feb 2020 12:09:13 +0200
Subject: updating source-editor changes

Issue-ID: CCSDK-2070

Signed-off-by: ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I203f89eb81ea9685ca69226b108c121a8be5f193
---
 .../scripts-tab/scripts-tab.component.html         | 38 ++++++++++++----------
 .../scripts-tab/scripts-tab.component.ts           | 13 +++++---
 2 files changed, 28 insertions(+), 23 deletions(-)

(limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab')

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index 893c4f741..824152035 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -5,7 +5,7 @@
             <a class="enter-link" href="#"><i class="icon-enter"></i></a>
         </div>
         <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
-                                                               href="#">Import File</a></span>
+                href="#">Import File</a></span>
 
     </div>
 
@@ -15,23 +15,25 @@
                 <label class="label-name">File</label>
             </div>
         </div>
-        <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion">
+        <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion-script">
 
             <div class="card">
-                <div [id]="'head-'+mapIndex" class="card-header">
+                <div [id]="'head-script-'+mapIndex" class="card-header">
                     <h5 class="mb-0 d-flex justify-content-between">
-                        <button [attr.aria-controls]="'id-'+mapIndex" [attr.data-target]="'#id-'+mapIndex"
-                                aria-expanded="false" class="btn btn-link collapsed"
-                                data-toggle="collapse">
+                        <button [attr.aria-controls]="'id-script-'+mapIndex" [attr.data-target]="'#id-script-'+mapIndex"
+                            aria-expanded="false" class="btn btn-link collapsed" data-toggle="collapse">
                             <i class="icon-file-code"></i> {{file.key}}
                         </button>
                         <a (click)="removeFile(mapIndex)" class="accordion-delete"><i class="icon-delete"></i></a>
                     </h5>
                 </div>
-                <div [attr.aria-labelledby]="'head-'+mapIndex" [id]="'id-'+mapIndex" class="collapse"
-                     data-parent="#accordion">
+                <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
+                    data-parent="#accordion-script">
                     <div class="card-body">
-                        {{file.value}}
+                        <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true"
+                            [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
+                            style="height:300px;">
+                        </ace-editor>
                     </div>
                 </div>
             </div>
@@ -42,7 +44,7 @@
 </div>
 
 <div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
-     tabindex="-1">
+    tabindex="-1">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -52,11 +54,11 @@
                 </button>
             </div>
             <div class="modal-body">
-                <ngx-file-drop (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
-                               (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
+                <ngx-file-drop accept=".kt" (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
+                    (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
                     <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
                         <div class="folder-upload">
-                            <img src="assets/img/folder-upload.svg"/>
+                            <img src="assets/img/folder-upload.svg" />
                         </div>
                         <div class="folder-upload-text">
                             Drag & Drop file
@@ -72,16 +74,16 @@
                 <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
                     <table class="table">
                         <thead>
-                        <tr>
-                            <th>Name : {{ item.name }}</th>
-                        </tr>
+                            <tr>
+                                <th>Name : {{ item.name }}</th>
+                            </tr>
                         </thead>
                     </table>
                 </div>
             </div>
             <div class="modal-footer">
                 <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
-                        type="button">Cancel
+                    type="button">Cancel
                 </button>
                 <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
                     Import
@@ -89,4 +91,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
index 634e5fc84..eee291bba 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
@@ -1,7 +1,9 @@
-import {Component, OnInit} from '@angular/core';
-import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
-import {PackageCreationStore} from '../package-creation.store';
-import {PackageCreationUtils} from '../package-creation.utils';
+import { Component, OnInit } from '@angular/core';
+import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../package-creation.store';
+import { PackageCreationUtils } from '../package-creation.utils';
+import 'ace-builds/src-noconflict/ace';
+import 'ace-builds/webpack-resolver';
 
 @Component({
     selector: 'app-scripts-tab',
@@ -43,7 +45,8 @@ export class ScriptsTabComponent implements OnInit {
 
     removeFile(fileIndex: number) {
         console.log(this.uploadedFiles[fileIndex]);
-        this.packageCreationStore.removeFileFromState(this.uploadedFiles[fileIndex].name);
+        const filename = 'Scripts/' + this.uploadedFiles[fileIndex].name;
+        this.packageCreationStore.removeFileFromState(filename);
         this.uploadedFiles.splice(fileIndex, 1);
     }
 
-- 
cgit 1.2.3-korg