adding template selection from function attribute

Issue-ID: CCSDK-2900

Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: I19fb4a86857c2f02603a93e4e47bc792e6aadf09

3 files changed, 177 insertions, 90 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
index 43f3818a0..f514831ca 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -87,6 +87,14 @@ header{
   color: #1B3E6F;
   font-size: 10px;
 }
+.template-list.active {
+  display: inline;
+  padding: 4px 10px;
+  background: #F4F9FE;
+  border-radius: 10px;
+  color: #1B3E6F;
+  font-size: 10px;
+}
 .designer-breadcrumb .fa-angle-right::before {
   color: #fff;
   line-height: 38px;
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
index c89a96de0..23633017d 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
@@ -19,106 +19,86 @@
     <div class="accordion" id="accordionExample">
         <div class="card">
             <div class="card-header row" id="headingOne">
-                <button class="btn btn-link" type="button" data-toggle="collapse"
-                        data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
+                    aria-expanded="true" aria-controls="collapseOne">
                     Interfaces
                 </button>
             </div>
 
-            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                 data-parent="#accordionExample">
+            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
                 <div class="card-body">
                     <!--Inputs & Outputs Tabs-->
                     <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
                         <li class="nav-item" role="presentation">
-                            <a class="nav-link active" id="pills-home-tab" data-toggle="pill"
-                               href="#pills-home" role="tab" aria-controls="pills-home"
-                               aria-selected="true">Inputs</a>
+                            <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-home"
+                                role="tab" aria-controls="pills-home" aria-selected="true">Inputs</a>
                         </li>
                         <li class="nav-item" role="presentation">
-                            <a class="nav-link" id="pills-profile-tab" data-toggle="pill"
-                               href="#pills-profile" role="tab" aria-controls="pills-profile"
-                               aria-selected="false">Outputs</a>
+                            <a class="nav-link" id="pills-profile-tab" data-toggle="pill" href="#pills-profile"
+                                role="tab" aria-controls="pills-profile" aria-selected="false">Outputs</a>
                         </li>
                     </ul>
                     <div class="tab-content" id="pills-tabContent">
                         <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
-                             aria-labelledby="pills-home-tab">
+                            aria-labelledby="pills-home-tab">
                             <div class="row">
                                 <div class="col">
                                     <!--list-->
                                     <div class="attribute-wrap">
                                         <div class="form-group">
-                                            <label
-                                                    for="exampleFormControlTextarea1">artifact-prefix-names
+                                            <label for="exampleFormControlTextarea1">artifact-prefix-names
                                                 <i class="icon-required-star" type="button"
-                                                   aria-hidden="true"></i></label>
+                                                    aria-hidden="true"></i></label>
                                         </div>
-                                        <div
-                                                class="custom-control custom-radio custom-control-inline">
-                                            <input type="radio" id="customRadioInline1"
-                                                   name="customRadioInline1"
-                                                   class="custom-control-input">
-                                            <label class="custom-control-label"
-                                                   for="customRadioInline1">Pre-defined
+                                        <div class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline1" name="customRadioInline1"
+                                                class="custom-control-input">
+                                            <label class="custom-control-label" for="customRadioInline1">Pre-defined
                                                 Template</label>
                                         </div>
-                                        <div
-                                                class="custom-control custom-radio custom-control-inline">
-                                            <input type="radio" id="customRadioInline2"
-                                                   name="customRadioInline1"
-                                                   class="custom-control-input">
-                                            <label class="custom-control-label"
-                                                   for="customRadioInline2">Input Drivin
+                                        <div class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline2" name="customRadioInline1"
+                                                class="custom-control-input">
+                                            <label class="custom-control-label" for="customRadioInline2">Input Drivin
                                                 Template</label>
                                         </div>
                                         <br />
-                                        <button type="button" class="btn btn-select-template"><i
-                                                class="icon-add-circle" type="button"
+                                        <button type="button" data-toggle="modal" data-target="#templateModal"
+                                            class="btn btn-select-template"><i class="icon-add-circle" type="button"
                                                 aria-hidden="true"></i> Select Template</button>
                                     </div>
                                     <!--string-->
                                     <div class="attribute-wrap">
                                         <div class="form-group">
-                                            <label for="exampleInputEmail1">resoluton-key <i
-                                                    class="icon-required-star" type="button"
-                                                    aria-hidden="true"></i></label>
+                                            <label for="exampleInputEmail1">resoluton-key <i class="icon-required-star"
+                                                    type="button" aria-hidden="true"></i></label>
                                             <input type="text" class="form-control">
                                         </div>
                                     </div>
                                     <!--integer-->
                                     <div class="attribute-wrap">
                                         <div class="form-group">
-                                            <label for="exampleInputEmail1">request-id <i
-                                                    class="icon-required-star" type="button"
-                                                    aria-hidden="true"></i></label>
-                                            <input type="number" class="form-control" placeholder=""
-                                                   value="356">
+                                            <label for="exampleInputEmail1">request-id <i class="icon-required-star"
+                                                    type="button" aria-hidden="true"></i></label>
+                                            <input type="number" class="form-control" placeholder="" value="356">
                                         </div>
                                     </div>
                                     <!--boolean-->
                                     <div class="attribute-wrap">
                                         <div class="form-group">
-                                            <label
-                                                    for="exampleFormControlTextarea1">resolution-summary
-                                                <i class="icon-required-star optional-attribute"
-                                                   type="button" aria-hidden="true"></i></label>
+                                            <label for="exampleFormControlTextarea1">resolution-summary
+                                                <i class="icon-required-star optional-attribute" type="button"
+                                                    aria-hidden="true"></i></label>
                                         </div>
-                                        <div
-                                                class="custom-control custom-radio custom-control-inline">
-                                            <input type="radio" id="customRadioInline1"
-                                                   name="customRadioInline1"
-                                                   class="custom-control-input">
-                                            <label class="custom-control-label"
-                                                   for="customRadioInline1">True</label>
+                                        <div class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline1" name="customRadioInline1"
+                                                class="custom-control-input">
+                                            <label class="custom-control-label" for="customRadioInline1">True</label>
                                         </div>
-                                        <div
-                                                class="custom-control custom-radio custom-control-inline">
-                                            <input type="radio" id="customRadioInline2"
-                                                   name="customRadioInline1"
-                                                   class="custom-control-input">
-                                            <label class="custom-control-label"
-                                                   for="customRadioInline2">False</label>
+                                        <div class="custom-control custom-radio custom-control-inline">
+                                            <input type="radio" id="customRadioInline2" name="customRadioInline1"
+                                                class="custom-control-input">
+                                            <label class="custom-control-label" for="customRadioInline2">False</label>
                                         </div>
                                     </div>
                                     <!-- Add Optional Attributes button -->
@@ -126,7 +106,7 @@
                             </div>
                         </div>
                         <div class="tab-pane fade" id="pills-profile" role="tabpanel"
-                             aria-labelledby="pills-profile-tab">2</div>
+                            aria-labelledby="pills-profile-tab">2</div>
                     </div>
                 </div>
             </div>
@@ -136,43 +116,86 @@
     <div class="accordion" id="accordionExample1">
         <div class="card">
             <div class="card-header row" id="headingOne">
-                <button class="btn btn-link" type="button" data-toggle="collapse"
-                        data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
+                    aria-expanded="true" aria-controls="collapseTwo">
                     Artifacts
                 </button>
             </div>
 
-            <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne"
-                 data-parent="#accordionExample1">
+            <div id="collapseTwo" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample1">
                 <div class="card-body">
                     <div class="row">
-                        <div class="col-12">
+                        <div class="col-12" *ngFor="let file of  getKeys(selectedTemplates)">
                             <a class="template-mapping-list">
-                                <p>baseconfig</p>
-                                <span>Mapping</span>
-                                <span>Template</span>
+                                <p>{{file}}</p>
+                                <span *ngIf="getValue(file).isMapping">Mapping</span>
+                                <span *ngIf="getValue(file).isTemplate">Template</span>
 
-                                <a data-toggle="modal"
-                                   data-target="#templateDeletionModal"
-                                   class="accordion-delete deleteTemplate"
-                                   title="Delete Template"><i class="icon-delete-sm"></i></a>
+                                <a data-toggle="modal" (click)="fileToDelete = file"
+                                    data-target="#templateDeletionModal" class="accordion-delete deleteTemplate"
+                                    title="Delete Template"><i class="icon-delete-sm"></i></a>
                             </a>
 
                         </div>
-                        <div class="col-12">
-                            <a class="template-mapping-list">
-                                <p>vpkg</p>
-                                <span>Mapping</span>
-                                <span>Template</span>
-                                <a data-toggle="modal"
-                                   data-target="#templateDeletionModal"
-                                   class="accordion-delete deleteTemplate"
-                                   title="Delete Template"><i class="icon-delete-sm"></i></a>
-                            </a>
-                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
+
+<!--function - Select Template - Modal-->
+<div class="modal fade" id="templateModal" tabindex="-1" role="dialog" aria-labelledby="templateModalTitle"
+    aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="templateModalTitle">
+                    Select Pre-defined Tempalte Name</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <img src="assets/img/icon-close.svg" />
+                </button>
+            </div>
+            <div class="modal-body createAttributeTabs">
+                <div class="col-4" *ngFor="let file of  getKeys(templateAndMappingMap)">
+                    <a class="template-mapping-list float" [ngClass]="{'active':selectedTemplates.has(file)}">
+                        <p (click)="setTemplate(file)">{{file}}</p>
+                        <span *ngIf="getValue(file).isMapping">Mapping</span>
+                        <span *ngIf="getValue(file).isTemplate">Template</span>
+                    </a>
+
+                </div>
+
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="addTemplates()">Add
+                    Templates</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Delete Modal -->
+<div class="modal fade" id="templateDeletionModal" tabindex="-1" role="dialog"
+    aria-labelledby="templateDeletionModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="templateDeletionModalLabel">Delete Script</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <img src="assets/img/icon-close.svg" />
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete Template file
+                    <span>{{fileToDelete}}</span>?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" (click)="setTemplate(fileToDelete)" data-dismiss="modal"
+                    class="btn btn-primary">Delete</button>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts
index 88bd76eb6..0c47b3bbc 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.ts
@@ -1,9 +1,10 @@
-import {Component, OnDestroy, OnInit} from '@angular/core';
-import {DesignerStore} from '../designer.store';
-import {PackageCreationStore} from '../../package-creation/package-creation.store';
-import {Subject} from 'rxjs';
-import {distinctUntilChanged, takeUntil} from 'rxjs/operators';
-import {CBAPackage} from '../../package-creation/mapping-models/CBAPacakge.model';
+import { Component, OnDestroy, OnInit } from '@angular/core';
+import { DesignerStore } from '../designer.store';
+import { PackageCreationStore } from '../../package-creation/package-creation.store';
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { CBAPackage } from '../../package-creation/mapping-models/CBAPacakge.model';
+import { TemplateAndMapping } from '../../package-creation/template-mapping/TemplateAndMapping';
 
 @Component({
     selector: 'app-functions-attribute',
@@ -13,11 +14,16 @@ import {CBAPackage} from '../../package-creation/mapping-models/CBAPacakge.model
 export class FunctionsAttributeComponent implements OnInit, OnDestroy {
 
     ngUnsubscribe = new Subject();
-    private designerDashboardState: DecodeSuccessCallback;
-    private cbaPackage: CBAPackage;
+    designerDashboardState: DecodeSuccessCallback;
+    cbaPackage: CBAPackage;
+    templateAndMappingMap = new Map<string, TemplateAndMapping>();
+    selectedTemplates = new Map<string, TemplateAndMapping>();
+    fileToDelete: string;
 
-    constructor(private designerStore: DesignerStore,
-                private packageCreationStore: PackageCreationStore) {
+    constructor(
+        private designerStore: DesignerStore,
+        private packageCreationStore: PackageCreationStore
+    ) {
     }
 
     ngOnInit() {
@@ -35,6 +41,22 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
                 takeUntil(this.ngUnsubscribe))
             .subscribe(cbaPackage => {
                 this.cbaPackage = cbaPackage;
+                console.log('File name =>================== ');
+                console.log(this.cbaPackage.templates.files);
+                this.cbaPackage.templates.files.forEach((value, key) => {
+                    console.log('File name => ' + key);
+                    const templateAndMapping = new TemplateAndMapping();
+                    templateAndMapping.isTemplate = true;
+                    const isFromTemplate = true;
+                    this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate);
+                });
+
+                this.cbaPackage.mapping.files.forEach((value, key) => {
+                    const templateAndMapping = new TemplateAndMapping();
+                    templateAndMapping.isMapping = true;
+                    const isFromTemplate = false;
+                    this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate);
+                });
             });
 
     }
@@ -43,4 +65,38 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
+    // Template logic
+
+    private setIsMappingOrTemplate(key: string, templateAndMapping: TemplateAndMapping, isFromTemplate: boolean) {
+        const nameOfFile = isFromTemplate ?
+            key.split('/')[1].split('.')[0].split('-template')[0]
+            : key.split('/')[1].split('.')[0].split('-mapping')[0];
+        // const fullName = nameOfFile + ',' + key.split('.');
+        if (this.templateAndMappingMap.has(nameOfFile)) {
+            const templateAndMappingExisted = this.templateAndMappingMap.get(nameOfFile);
+            !isFromTemplate ? templateAndMappingExisted.isMapping = true : templateAndMappingExisted.isTemplate = true;
+            this.templateAndMappingMap.set(nameOfFile, templateAndMappingExisted);
+        } else {
+            this.templateAndMappingMap.set(nameOfFile, templateAndMapping);
+        }
+
+    }
+
+    addTemplates() { }
+
+    setTemplate(file: string) {
+        if (this.selectedTemplates.has(file)) {
+            this.selectedTemplates.delete(file);
+        } else {
+            this.selectedTemplates.set(file, this.templateAndMappingMap.get(file));
+        }
+        console.log(this.selectedTemplates);
+    }
+
+    getKeys(templateAndMappingMap: Map<string, TemplateAndMapping>) {
+        return Array.from(templateAndMappingMap.keys());
+    }
+    getValue(file: string) {
+        return this.templateAndMappingMap.get(file);
+    }
 }