update imports-tab,source-editor and create scripts-tab component

Issue-ID: CCSDK-2016
Issue-ID: CCSDK-2042

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: I87dd0f6cf393c2d7cd78985928635bd2138ccc74

3 files changed, 66 insertions, 47 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css
index e69de29bb..4ab1d7b7e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.css
@@ -0,0 +1,11 @@
+a.accordion-delete i {
+    color: red;
+}
+
+a.accordion-delete i:hover {
+    color: #007bff;
+    cursor: pointer;
+    transition-duration: .5s;
+    /* for Safari & Chrome */
+    -webkit-transition-duration: .5s;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index baf1b8821..5cd888828 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -4,7 +4,8 @@
             <input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched">
             <a class="enter-link" href="#"><i class="icon-enter"></i></a>
         </div>
-        <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></span>
+        <span class="import-container-span">Or you can also <a href="#" data-toggle="modal"
+                data-target="#exampleModal">Import File</a></span>
 
     </div>
 
@@ -14,12 +15,12 @@
                 <label class="label-name">File</label>
             </div>
         </div>
-        <div id="accordion" *ngFor="let file of definitionFiles | keyvalue">
-            <div class="card">
+        <div id="accordion" *ngFor="let file of definitionFiles | keyvalue; let mapIndex = index">
+            <!-- <div class="card">
                 <div class="card-header" [id]="file.key">
                     <h5 class="mb-0 d-flex justify-content-between">
                         <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
-                                aria-expanded="true" aria-controls="collapseOne">
+                            aria-expanded="true" aria-controls="collapseOne">
                             <i class="icon-file-code"></i> Definitions/{{file.key}}
                         </button>
                         <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
@@ -31,28 +32,26 @@
                         {{file.value | json}}
                     </div>
                 </div>
+            </div> -->
+            <div class="card">
+                <div class="card-header" [id]="'head-'+mapIndex">
+                    <h5 class="mb-0 d-flex justify-content-between">
+                        <button class="btn btn-link collapsed" data-toggle="collapse"
+                            [attr.data-target]="'#id-'+mapIndex" aria-expanded="false"
+                            [attr.aria-controls]="'id-'+mapIndex">
+                            <i class="icon-file-code"></i> Definitions/{{file.key}}
+                        </button>
+                        <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete"></i></a>
+                    </h5>
+                </div>
+                <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
+                    data-parent="#accordion">
+                    <div class="card-body">
+                        {{file.value}}
+                    </div>
+                </div>
             </div>
-            <!--   <div class="card">
-                   <div class="card-header" id="headingTwo">
-                       <h5 class="mb-0">
-                           <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
-                                   aria-expanded="false" aria-controls="collapseTwo">
-                               <i class="icon-file-code"></i> Definitions/relationship_types.json
-                           </button>
-                       </h5>
-                   </div>
-                   <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
-                       <div class="card-body">
-                           Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
-                           3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
-                           laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin
-                           coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
-                           anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
-                           occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard
-                           of them accusamus labore sustainable VHS.
-                       </div>
-                   </div>
-               </div>
+            <!--
                <div class="card">
                    <div class="card-header" id="headingThree">
                        <h5 class="mb-0">
@@ -74,13 +73,14 @@
                        </div>
                    </div>
                </div>
-           --></div>
+           -->
+        </div>
     </div>
 
 </div>
 
 <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
-     aria-hidden="true">
+    aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
             <div class="modal-header">
@@ -91,10 +91,10 @@
             </div>
             <div class="modal-body">
                 <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
-                               (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+                    (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
                     <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
                         <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
@@ -110,16 +110,16 @@
                 <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
                     <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 type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
-                        (click)="resetTheUploadedFiles()">Cancel
+                    (click)="resetTheUploadedFiles()">Cancel
                 </button>
                 <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()">
                     Import
@@ -127,6 +127,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/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 6cd52015d..4db67b8dc 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -1,7 +1,7 @@
-import {Component, OnInit} from '@angular/core';
-import {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop';
-import {PackageCreationStore} from '../package-creation.store';
-import {PackageCreationUtils} from '../package-creation.utils';
+import { Component, OnInit } from '@angular/core';
+import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../package-creation.store';
+import { PackageCreationUtils } from '../package-creation.utils';
 
 
 @Component({
@@ -9,10 +9,11 @@ import {PackageCreationUtils} from '../package-creation.utils';
     templateUrl: './imports-tab.component.html',
     styleUrls: ['./imports-tab.component.css']
 })
-export class ImportsTabComponent {
+export class ImportsTabComponent implements OnInit {
 
     public definitionFiles: Map<string, string> = new Map<string, string>();
     public uploadedFiles: FileSystemFileEntry[] = [];
+    private fileNames: Set<string> = new Set();
 
     public files: NgxFileDropEntry[] = [];
 
@@ -24,15 +25,19 @@ export class ImportsTabComponent {
         });
     }
 
+    ngOnInit(): void {
+        // TODO
+    }
+
     public dropped(files: NgxFileDropEntry[]) {
         this.files = files;
         for (const droppedFile of files) {
-
-            // Is it a file?
-            if (droppedFile.fileEntry.isFile) {
+            // Is it a file? & Not added before
+            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
-
+                console.log(fileEntry.name);
+                this.fileNames.add(fileEntry.name);
 
             } /*else {
                 const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
@@ -57,6 +62,13 @@ export class ImportsTabComponent {
         }
     }
 
+    removeFile(fileIndex: number) {
+        console.log(this.uploadedFiles[fileIndex]);
+        console.log(this.uploadedFiles);
+        this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'definitions');
+        this.uploadedFiles.splice(fileIndex, 1);
+    }
+
     public fileOver(event) {
         console.log(event);
     }
@@ -64,8 +76,6 @@ export class ImportsTabComponent {
     public fileLeave(event) {
         console.log(event);
     }
-
-
     /* readFileContent(file: File): string | ArrayBuffer {
          const fileReader = new FileReader();
         // let content: string | ArrayBuffer = '';