From e0e8b14e106cff2dccc76e6edcc1a7ee6ffe10da Mon Sep 17 00:00:00 2001
From: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Date: Mon, 17 Feb 2020 11:49:41 +0200
Subject: adding template and mapping import template files

Issue-ID: CCSDK-2102

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: I38260328f868f146dbdd16f0da8f26bbb1504c29
---
 .../templ-mapp-creation/TemplateType.ts            |  5 ++
 .../templ-mapp-creation.component.html             | 58 +++++++++++--------
 .../templ-mapp-creation.component.ts               | 67 +++++++++++++++++++---
 .../templ-mapp-listing.component.html              | 14 ++---
 .../templ-mapp-listing.component.ts                | 31 ++++++----
 5 files changed, 125 insertions(+), 50 deletions(-)
 create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts

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

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts
new file mode 100644
index 000000000..17a4bfae6
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/TemplateType.ts
@@ -0,0 +1,5 @@
+export enum TemplateType {
+    Velocity = 'vtl',
+    Koltin = 'kt',
+    Jinja = 'Unknown'
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 10f1db65d..3c92bc7c7 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -4,9 +4,9 @@
         <label class="label-name">Name
             <span _ngcontent-uew-c3="">*</span>
         </label>
-        
+
         <div class="label-input">
-            <input type="input" placeholder="Topology name.vLB.CDS">
+            <input type="input" [(ngModel)]="fileName" placeholder="Topology name.vLB.CDS">
         </div>
     </div>
 </div>
@@ -17,7 +17,7 @@
             <div class="card-header" id="headingOne">
                 <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-controls="collapseOne">
                         1. Create Template
                     </button>
 
@@ -30,29 +30,35 @@
                         <label class="label-name">Template Type</label>
                         <div class="label-input">
                             <label name="trst">
-                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
-                
+                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
+                                       value=Velcoity>
+
                                 <span>
                                     Velcoity
                                 </span>
                             </label>
                             <label name="trst">
-                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
-                
+                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
+                                       value=Velcoity>
+
                                 <span>
                                     Jinja
                                 </span>
                             </label>
                             <label name="trst">
-                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
-                
+                                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1"
+                                       value=Velcoity>
+
                                 <span>
                                     Kotlin
                                 </span>
                             </label>
                         </div>
                     </div>
-                    <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></div>
+                    <div class="create-template-import">Use the editor to add parameters or you can also <a href="#"
+                                                                                                            data-toggle="modal"
+                                                                                                            data-target="#exampleModal">Import
+                        File</a></div>
                     <div class="editor-container">
                         <app-dsl-definitions-tab></app-dsl-definitions-tab>
                     </div>
@@ -63,7 +69,7 @@
             <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">
+                            aria-expanded="false" aria-controls="collapseTwo">
                         2. Manage Mapping
                     </button>
                 </h5>
@@ -74,12 +80,12 @@
                     <div class="text-center">
                         <a href="#" class="mapping-source-load">
                             <i class="icon-current-template"></i>
-                        <br/>
+                            <br/>
                             <span>Use Current Template Instance</span>
                         </a>
                         <a href="#" data-toggle="modal" data-target="#exampleModal" class="mapping-source-load">
                             <i class="icon-Upload-attribute"></i>
-                        <br/>
+                            <br/>
                             <div>Upload attribute list</div>
                             <div class="source-load-note">(Should be comma delimited file)</div>
                         </a>
@@ -91,15 +97,15 @@
                     </div>
 
                     <div class="table-container">
-                        
+
 
                     </div>
                 </div>
 
-                
+
             </div>
 
-            
+
         </div>
 
         <div class="template-mapping-action">
@@ -111,7 +117,7 @@
 
 
 <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">
@@ -122,10 +128,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
@@ -141,21 +147,23 @@
                 <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()">
+                <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
+                        (click)="setFilesToStore()">
                     Import
                 </button>
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
index 3a938c5ae..752bd510b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
@@ -1,15 +1,68 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../../package-creation.store';
 
 @Component({
-  selector: 'app-templ-mapp-creation',
-  templateUrl: './templ-mapp-creation.component.html',
-  styleUrls: ['./templ-mapp-creation.component.css']
+    selector: 'app-templ-mapp-creation',
+    templateUrl: './templ-mapp-creation.component.html',
+    styleUrls: ['./templ-mapp-creation.component.css']
 })
 export class TemplMappCreationComponent implements OnInit {
 
-  constructor() { }
+    public uploadedFiles: FileSystemFileEntry[] = [];
+    private fileNames: Set<string> = new Set();
 
-  ngOnInit() {
-  }
+    public files: NgxFileDropEntry[] = [];
+    fileName: any;
 
+    constructor(private packageCreationStore: PackageCreationStore) {
+    }
+
+    ngOnInit() {
+    }
+
+    public dropped(files: NgxFileDropEntry[]) {
+        this.files = files;
+        for (const droppedFile of files) {
+            // 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);
+                this.fileNames.add(fileEntry.name);
+
+            }
+        }
+    }
+
+    removeFile(fileIndex: number) {
+        /*const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name;
+        this.packageCreationStore.removeFileFromDefinition(filename);
+        this.uploadedFiles.splice(fileIndex, 1);*/
+    }
+
+    setFilesToStore() {
+        for (const droppedFile of this.uploadedFiles) {
+            droppedFile.file((file: File) => {
+                const fileReader = new FileReader();
+                fileReader.onload = (e) => {
+                    this.packageCreationStore.addTemplate('Templates/' + this.fileName,
+                        fileReader.result.toString());
+                };
+                fileReader.readAsText(file);
+            });
+
+        }
+    }
+
+    public fileOver(event) {
+        console.log(event);
+    }
+
+    public fileLeave(event) {
+        console.log(event);
+    }
+
+    resetTheUploadedFiles() {
+        this.uploadedFiles = [];
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
index a0a54031f..ddf06c824 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
@@ -19,15 +19,15 @@
             </div>
 
             <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion">
-                <div class="card-body max-height-list">
+                <div class="card-body max-height-list"  *ngFor="let file of templates.files | keyvalue; let mapIndex = index">
                     <div class="row">
                         <div class="col">
-                            <a href="#" class="template-mapping-list active">hostname
+                            <a href="#" class="template-mapping-list active">{{file.key}}
                                 <span>Mapping</span>
                                 <span>Template</span>
                             </a>
                         </div>
-                        <div class="col">
+                       <!-- <div class="col">
                             <a href="#" class="template-mapping-list">vf-module-1
                                 <span>Mapping</span>
                             </a>
@@ -36,9 +36,9 @@
                             <a href="#" class="template-mapping-list">vf-module-2
                                 <span>Mapping</span>
                             </a>
-                        </div>
+                        </div>-->
                     </div>
-                    <div class="row">
+                 <!--   <div class="row">
                         <div class="col">
                             <a href="#" class="template-mapping-list">hostname
                                 <span>Mapping</span>
@@ -147,10 +147,10 @@
                                 <span>Template</span>
                             </a>
                         </div>
-                    </div>
+                    </div>-->
                 </div>
             </div>
         </div>
         
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
index 525e58128..5cb41c35e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
@@ -1,20 +1,29 @@
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {PackageCreationStore} from '../../package-creation.store';
+import {Template} from '../../mapping-models/CBAPacakge.model';
 
 @Component({
-  selector: 'app-templ-mapp-listing',
-  templateUrl: './templ-mapp-listing.component.html',
-  styleUrls: ['./templ-mapp-listing.component.css']
+    selector: 'app-templ-mapp-listing',
+    templateUrl: './templ-mapp-listing.component.html',
+    styleUrls: ['./templ-mapp-listing.component.css']
 })
 export class TemplMappListingComponent implements OnInit {
-  @Output() showCreationViewParentNotification = new EventEmitter<any>();
+    @Output() showCreationViewParentNotification = new EventEmitter<any>();
+    private templates: Template;
 
-  constructor() { }
+    constructor(private packageCreationStore: PackageCreationStore) {
+        this.packageCreationStore.state$.subscribe(cba => {
+            if (cba.templates) {
+                this.templates = cba.templates;
+            }
+        });
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
 
-  openCreationView() {
-    this.showCreationViewParentNotification.emit('tell parent to open create views');
-  }
+    openCreationView() {
+        this.showCreationViewParentNotification.emit('tell parent to open create views');
+    }
 
 }
-- 
cgit 1.2.3-korg