adding design of first two tabs in creation package component

Issue-ID: CCSDK-2014

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

3 files changed, 360 insertions, 56 deletions

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 8aa9d5e6d..9b65885a5 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,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
 import {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop';
 import {PackageCreationStore} from '../package-creation.store';
+import {Observable} from 'rxjs';
+import {HttpClient} from '@angular/common/http';
 
 
 @Component({
@@ -9,7 +11,10 @@ import {PackageCreationStore} from '../package-creation.store';
     styleUrls: ['./imports-tab.component.css']
 })
 export class ImportsTabComponent {
-    constructor(private packageCreationStore: PackageCreationStore) {
+
+    fileContent: string | ArrayBuffer = '';
+
+    constructor(private packageCreationStore: PackageCreationStore, private http: HttpClient) {
     }
 
     public files: NgxFileDropEntry[] = [];
@@ -21,16 +26,28 @@ export class ImportsTabComponent {
             // Is it a file?
             if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+
                 fileEntry.file((file: File) => {
                     console.log(droppedFile.relativePath, file);
-                    this.packageCreationStore.addDefinition(droppedFile.relativePath, '');
+
+                    const formData = new FormData();
+                    formData.append('logo', file, droppedFile.relativePath);
+                    console.log(formData);
+
+                    this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath));
 
                 });
             } else {
                 // It was a directory (empty directories are added, otherwise only files)
                 const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
                 console.log(droppedFile.relativePath, fileEntry);
-                this.packageCreationStore.addDefinition(droppedFile.relativePath, '');
+
+
+               /* const formData = new FormData();
+                formData.append('logo', droppedFile, droppedFile.relativePath);
+                console.log(formData);*/
+
+                this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath));
 
             }
         }
@@ -43,4 +60,17 @@ export class ImportsTabComponent {
     public fileLeave(event) {
         console.log(event);
     }
+
+
+    getContent(filePath: string) {
+        let content = '';
+        this.getJSON(filePath).subscribe(data => {
+            content = data;
+        });
+        return content;
+    }
+
+    public getJSON(filePath: string): Observable<any> {
+        return this.http.get(filePath);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index 1f5245222..3cc8707c5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -1,48 +1,309 @@
 <app-header></app-header>
-<div class="alert-dark" style="padding: 100px">
-    <div>
-        <label>mode</label>
-        <label name="trst" *ngFor="let mode of modes; let i = index">
-            <input type="checkbox" value={{mode}} [(ngModel)]="metaDataTab.mode">
-            {{mode}}
-        </label>
-        <br>
-        <label>dictionary Library Instances</label>
-        <label>
-            <select name="cars">
-                <option value="audi"
-                        *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
-            </select>
-        </label>
-    </div>
-    <div>
-        <label>Name</label>
-        <label>
-            <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name">
-        </label>
-        <br>
-        <label>Description</label>
-        <label>
-            <input type="input">
-        </label>
-        <br>
-        <label>Version</label>
-        <label>
-            <input type="input">
-        </label>
-        <br>
-        <label>tags</label>
-        <label>
-            <input type="input">
-        </label>
-        <br>
+
+<div class="new-wrapper">
+    <header class="page-title">
+        <div class="row">
+            <h2 class="col m-0">CBA Packages
+                <span>({{numberOfPackages}} packages)</span>
+            </h2>
+            <div class="col">
+            </div>
+        </div>
+    </header>
+
+    <div class="main-container">
+
+        <div class="container-fluid body-container creat-container-all">
+
+            <div class="creat-container">
+                <div class="creat-action-container">
+                    <a href="#" class="action-button">
+                        <i class="icon-clone" aria-hidden="true"></i>
+                        <span>Clone</span>
+                    </a>
+
+                    <a href="#" class="action-button">
+                        <i class="icon-archive" aria-hidden="true"></i>
+                        <span>Archive</span>
+                    </a>
+
+                    <a href="#" class="action-button">
+                        <i class="icon-delete" aria-hidden="true"></i>
+                        <span>Delete</span>
+                    </a>
+                </div>
+                <nav class="row">
+                    <div class="col pr-0">
+                        <button class="float btn btn-sm btn-primary">Save</button>
+                        <button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
+                    </div>
+                </nav>
+                <nav class="row">
+                    <!--Nav Tabs-->
+                    <div class="col pr-0">
+                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                            <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
+                               href="#nav-metadata"
+                               role="tab" aria-controls="nav-metadata"
+                               aria-selected="true">METADATA</a>
+                            <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
+                               role="tab" aria-controls="nav-imports"
+                               aria-selected="false">IMPORTS</a>
+                            <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
+                               href="#nav-authentication"
+                               role="tab" aria-controls="nav-authentication"
+                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+                            <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
+                               role="tab" aria-controls="nav-template"
+                               aria-selected="false">TEMPLATE & MAPPING</a>
+                            <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
+                               role="tab" aria-controls="nav-scripts"
+                               aria-selected="false">SCRIPTS</a>
+                        </div>
+                    </div>
+
+                </nav>
+                <div class="row mt-4">
+                    <div class="col">
+                        <div class="tab-content" id="nav-tabContent">
+                            <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
+                                 aria-labelledby="nav-metadata-tab">
+                                <div class="card creat-card">
+                                    <div class="single-line">
+                                        <label class="label-name">Mode</label>
+                                        <label name="trst" *ngFor="let mode of modes; let i = index">
+                                            <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
+                                                   name="exampleRadios" id="exampleRadios1" value={{mode}}>
+
+                                            <span>
+                                            <i [className]="mode.style" aria-hidden="true"></i>
+                                                <!-- <i class="mode-icon green icon-scripting-mode" aria-hidden="true"></i> -->
+                                                {{mode.name}}
+                                            </span>
+                                        </label>
+                                    </div>
+                                  <!--  <div class="single-line">
+                                        <label class="label-name">Dictionary Library Instances</label>
+                                        <div class="label-input">
+                                            <select name="cars">
+                                                <option class="select-placeholder">Select library</option>
+                                                <option value="audi"
+                                                        *ngFor="let dictionaryLibraryInstance of dictionaryLibraryInstances; let i = index">{{dictionaryLibraryInstance}}</option>
+                                            </select>
+                                        </div>
+                                    </div>-->
+
+                                </div>
+                                <div class="card creat-card">
+                                    <div class="single-line">
+                                        <label class="label-name">Name</label>
+                                        <div class="label-input">
+                                            <input type="input" (input)="searchPackages($event)"
+                                                   [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
+                                        </div>
+                                    </div>
+                                    <hr/>
+                                    <div class="single-line">
+                                        <label class="label-name">Description</label>
+                                        <div class="label-input">
+                                            <input type="input" placeholder="Descripe the package">
+                                        </div>
+                                    </div>
+                                    <hr/>
+                                    <div class="single-line">
+                                        <label class="label-name">Version</label>
+                                        <div class="label-input">
+                                            <input type="input" placeholder="Example: 1.0.0">
+                                        </div>
+                                    </div>
+                                    <hr/>
+                                    <div class="single-line">
+                                        <label class="label-name">tags</label>
+                                        <div class="label-input">
+                                            <input type="input" placeholder="Ex., vDNS-CDS">
+                                        </div>
+                                    </div>
+                                </div>
+                                <div id="container">
+                                    <div id="target">
+                                        <div class="card creat-card">
+                                            <div class="single-line">
+                                                <h5 class="label-name">
+                                                    Custom key <a class="delete-key" (click)="deleteCustomKey($event)" >Delete</a>
+                                                </h5>
+
+                                            </div>
+                                            <div class="single-line">
+                                                <label class="label-name">Name</label>
+                                                <div class="label-input">
+                                                    <input type="input" placeholder="Enter Name">
+                                                </div>
+                                            </div>
+                                            <hr/>
+                                            <div class="single-line">
+                                                <label class="label-name">Value</label>
+                                                <div class="label-input">
+                                                    <input type="input" placeholder="Enter Value">
+                                                </div>
+                                            </div>
+
+                                        </div>
+                                    </div>
+                                </div>
+                                <div class="card creat-card">
+                                    <div class="single-line">
+                                        <div name="custom key">
+                                            <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
+                                                    class="fa fa-plus" aria-hidden="true"></i> Add a custom key
+                                            </button>
+
+
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                            <div class="tab-pane fade" id="nav-imports" role="tabpanel"
+                                 aria-labelledby="nav-imports-tab">
+                                <div class="import-container-all">
+                                    <div class="import-container">
+                                        <div class="import-container-input">
+                                            <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>
+
+                                    </div>
+
+                                    <div class="accordion">
+                                        <div class="card creat-card">
+                                            <div class="single-line">
+                                                <label class="label-name">File</label>
+                                            </div>
+                                        </div>
+                                        <div id="accordion">
+                                            <div class="card">
+                                                <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">
+                                                            <i class="icon-file-code"></i> Definitions/data_types.json
+                                                        </button>
+                                                        <a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
+                                                    </h5>
+                                                </div>
+
+                                                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
+                                                     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="headingTwo">
+                                                    <h5 class="mb-0">
+                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
+                                                                data-target="#collapseTwo" aria-expanded="false"
+                                                                aria-controls="collapseTwo">
+                                                            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">
+                                                        <button class="btn btn-link collapsed" data-toggle="collapse"
+                                                                data-target="#collapseThree" aria-expanded="false"
+                                                                aria-controls="collapseThree">
+                                                            Definitions/artifact_types.json
+                                                        </button>
+                                                    </h5>
+                                                </div>
+                                                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
+                                                     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>
+                                    </div>
+
+                                </div>
+                            </div>
+                            <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
+                                 aria-labelledby="nav-authentication-tab">...
+                            </div>
+                            <div class="tab-pane fade" id="nav-template" role="tabpanel"
+                                 aria-labelledby="nav-template-tab">...
+                            </div>
+                            <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
+                                 aria-labelledby="nav-scripts-tab">...
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
-    <div>
-        <div name="custom key">
-            <button (click)="createAnotherCustomKeyDiv()"></button>
-            <div id="target"></div>
+</div>
 
+<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
+     aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">Import File</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                ...
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary">Import</button>
+            </div>
         </div>
     </div>
 </div>
-<app-imports-tab></app-imports-tab>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
index 440f2e23b..60fccebc8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts
@@ -39,9 +39,13 @@ import {PackageCreationUtils} from './package-creation.utils';
 })
 export class PackageCreationComponent implements OnInit {
 
-    modes: string[] = ['Designer Mode', 'Scripting Mode'];
+    modes: object[] = [
+        {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+        {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
+
     dictionaryLibraryInstances: string[] = ['x', 'y'];
-    private target: HTMLElement;
+    private container: HTMLElement;
+    private elements: HTMLCollection;
     private newElement: HTMLElement;
     private metaDataTab: MetaDataTab = new MetaDataTab();
 
@@ -61,11 +65,13 @@ export class PackageCreationComponent implements OnInit {
 
     createAnotherCustomKeyDiv() {
         console.log(this.metaDataTab);
-        this.newElement = document.createElement('div');
-        this.newElement.setAttribute('class', 'alert-dark');
-        this.target = document.getElementById('target');
-        this.target.appendChild(this.newElement);
-        this.metaDataTab = new MetaDataTab();
+        this.newElement = document.getElementById('target');
+        const copiedElement = this.newElement.cloneNode(true);
+        /* this.newElement.setAttribute('class', 'alert-dark');*/
+        this.container = document.getElementById('container');
+        this.container.appendChild(copiedElement);
+        this.elements = this.container.children;
+        /*this.metaDataTab = new MetaDataTab();
         this.metaDataTab.name = 'klfdj';
         this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
         this.metaDataTab.description = 'rere';
@@ -74,7 +80,7 @@ export class PackageCreationComponent implements OnInit {
         this.metaDataTab.templateName = 'test';
 
 
-        this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));
+        this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/
     }
 
     validatePacakgeName() {
@@ -160,8 +166,15 @@ export class PackageCreationComponent implements OnInit {
 
 
     searchPackages($event: Event) {
-       /* const searchQuery = event.target.value;
-        searchQuery = searchQuery.trim();
-        this.packagesStore.search(searchQuery);*/
+        /* const searchQuery = event.target.value;
+         searchQuery = searchQuery.trim();
+         this.packagesStore.search(searchQuery);*/
+    }
+
+    deleteCustomKey(event) {
+        this.container = document.getElementById('container');
+        const element = event.parentElement.parentElement.parentElement;
+        this.container.removeChild(element);
+        console.log('removed');
     }
 }