Redesign Metadata tab & Template and mapping & Over View Design

Issue-ID: CCSDK-2075

Signed-off-by: shady <snaguib.ext@orange.com>
Change-Id: Ic130d378b2b68a80d40f6c3c8250cb3af538011e

2 files changed, 273 insertions, 75 deletions

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 f6afb4929..10f1db65d 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
@@ -1,66 +1,14 @@
 <h6 class="create-title">CREATE</h6>
 <div class="card creat-card">
-    <div class="single-line">
-        <label class="label-name">Name</label>
+    <div class="single-line-model">
+        <label class="label-name">Name
+            <span _ngcontent-uew-c3="">*</span>
+        </label>
+        
         <div class="label-input">
             <input type="input" placeholder="Topology name.vLB.CDS">
         </div>
     </div>
-    <hr />
-    <div class="single-line">
-        <label class="label-name">Management Type</label>
-        <div class="label-input">
-            <div class="row">
-                <div class="col-md-4 d-flex">
-                    <a class="select-type active" href="#">
-                        <div class="select-type-icon"><span class="icon-template-mapping"></span></div>
-                        <div>Template And Support Mapping</div>
-                    </a>
-                </div>
-                <div class="col-md-4 d-flex">
-                    <a class="select-type" href="#">
-                        <div class="select-type-icon"><span class="icon-template"></span></div>
-                        <div>Template Only</div>
-                    </a>
-                </div>
-                <div class="col-md-4 d-flex">
-                    <a class="select-type" href="#">
-                        <div class="select-type-icon"><span class="icon-mapping"></span></div>
-                        <div>Mapping Only</div>
-                    </a>
-
-                </div>
-            </div>
-
-        </div>
-    </div>
-    <hr />
-    <div class="single-line">
-        <label class="label-name">Type</label>
-        <div class="label-input">
-            <label name="trst">
-                <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>
-
-                <span>
-                    Jinja
-                </span>
-            </label>
-            <label name="trst">
-                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
-
-                <span>
-                    Kotlin
-                </span>
-            </label>
-        </div>
-    </div>
 </div>
 
 <div class="template-mapping-accordion">
@@ -78,13 +26,36 @@
 
             <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 class="single-line">
+                        <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>
+                
+                                <span>
+                                    Velcoity
+                                </span>
+                            </label>
+                            <label name="trst">
+                                <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>
+                
+                                <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="editor-container">
+                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
+                    </div>
                 </div>
             </div>
         </div>
@@ -99,14 +70,91 @@
             </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.
+                    <h6 class="text-center">Select a source to load config parameters</h6>
+                    <div class="text-center">
+                        <a href="#" class="mapping-source-load">
+                            <i class="icon-current-template"></i>
+                        <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/>
+                            <div>Upload attribute list</div>
+                            <div class="source-load-note">(Should be comma delimited file)</div>
+                        </a>
+                        <!-- <a href="#" class="mapping-source-load">
+                            <i class="icon-import-cds"></i>
+                        <br/>
+                            <span>Import from SDC Model</span>
+                        </a> -->
+                    </div>
+
+                    <div class="table-container">
+                        
+
+                    </div>
                 </div>
+
+                
+            </div>
+
+            
+        </div>
+
+        <div class="template-mapping-action">
+            <button class="btn btn-sm btn-outline-secondary">Cancel</button>
+            <button class="btn btn-sm btn-primary">Finish</button>
+        </div>
+    </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">
+                <ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($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" />
+                        </div>
+                        <div class="folder-upload-text">
+                            Drag & Drop file
+                        </div>
+                        <div class="folder-upload-text">or
+                            <button type="button" class="btn btn-sm btn-primary" (click)="openFileSelector()">Browse
+                                Files
+                            </button>
+                        </div>
+                        <div class="folder-upload-type">Allowed file type: json</div>
+                    </ng-template>
+                </ngx-file-drop>
+                <div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
+                    <table class="table">
+                        <thead>
+                            <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
+                </button>
+                <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()">
+                    Import
+                </button>
             </div>
         </div>
     </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.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 ef233ad99..a0a54031f 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
@@ -1,6 +1,156 @@
-<h6>Basic List Template and mapping</h6>
-<div>
-    <a (click)="openCreationView()" class="action-button">
-        <span>Create</span>
+
+
+    <a (click)="openCreationView()" class="create-template-mapping-button">
+       <i class="fa fa-plus"></i> <span>Create</span>
     </a>
+
+
+<div class="template-mapping-accordion">
+    <div id="accordion">
+        <div class="card">
+            <div class="card-header" id="headingThree">
+                <h5 class="mb-0 d-flex justify-content-between">
+                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true"
+                        aria-controls="collapseThree">
+                        Template and Mapping List
+                    </button>
+
+                </h5>
+            </div>
+
+            <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion">
+                <div class="card-body max-height-list">
+                    <div class="row">
+                        <div class="col">
+                            <a href="#" class="template-mapping-list active">hostname
+                                <span>Mapping</span>
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-1
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-2
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">hostname
+                                <span>Mapping</span>
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-1
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-2
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">hostname
+                               
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-1
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-2
+                                <span>Mapping</span>
+                                <span>Template</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">hostname
+                              
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-1
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-2
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">hostname
+                                <span>Mapping</span>
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-1
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-2
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">hostname
+                                <span>Mapping</span>
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-1
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-2
+                                <span>Mapping</span>
+                            </a>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">hostname
+                               
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-1
+                                <span>Template</span>
+                            </a>
+                        </div>
+                        <div class="col">
+                            <a href="#" class="template-mapping-list">vf-module-2
+                                <span>Mapping</span>
+                                <span>Template</span>
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </div>
 </div>
\ No newline at end of file