1- Fix add template & cancel button in templates modal

2- Add a distinctive color to the selected template

Issue-ID: CCSDK-3042

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

4 files changed, 38 insertions, 26 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
index 0886a3fd3..c26fe00c2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/action-attributes/action-attributes.component.html
@@ -171,20 +171,24 @@
                             <label class="col-form-label col-sm-3 pt-0">Type <span>*</span></label>
                             <div class="col-sm-9">
                                 <div class="list-group list-group-horizontal">
-                                    <button type="button" class="list-group-item list-group-item-action"
-                                        (click)="setInputType('string')">
+                                    <button type="button" [class.active]="this.inputActionAttribute.type === 'string'"
+                                        class="list-group-item list-group-item-action" (click)="setInputType('string')">
                                         String
                                     </button>
-                                    <button type="button" class="list-group-item list-group-item-action"
+                                    <button type="button" [class.active]="this.inputActionAttribute.type === 'integer'"
+                                        class="list-group-item list-group-item-action"
                                         (click)="setInputType('integer')">Integer
                                     </button>
-                                    <button type="button" class="list-group-item list-group-item-action"
+                                    <button type="button" [class.active]="this.inputActionAttribute.type === 'boolean'"
+                                        class="list-group-item list-group-item-action"
                                         (click)="setInputType('boolean')">Boolean
                                     </button>
-                                    <button type="button" class="list-group-item list-group-item-action"
+                                    <button type="button" [class.active]="this.inputActionAttribute.type === 'list'"
+                                        class="list-group-item list-group-item-action"
                                         (click)="setInputType('list')">List
                                     </button>
-                                    <button type="button" class="list-group-item list-group-item-action"
+                                    <button type="button" [class.active]="this.inputActionAttribute.type === 'Other'"
+                                        class="list-group-item list-group-item-action"
                                         (click)="setInputType('Other')">Other
                                     </button>
                                 </div>
@@ -478,15 +482,13 @@
                                     <div class="scrollWrapper">
                                         <a [class]="steps.indexOf(step) === 0?
                                         'list-group-item list-group-item-action active':
-                                        'list-group-item list-group-item-action'" [id]="step"
-                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"
-                                           *ngFor="let step of steps" >
+                                        'list-group-item list-group-item-action'" [id]="step" data-toggle="list"
+                                            href="#list-home" role="tab" aria-controls="home"
+                                            *ngFor="let step of steps">
 
-                                            <i class="icon-resource_resolution mr-1" aria-hidden="true"
-                                               (click)="setInputAndOutputs(
+                                            <i class="icon-resource_resolution mr-1" aria-hidden="true" (click)="setInputAndOutputs(
                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
-                                            )"
-                                        ></i>
+                                            )"></i>
                                             {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
                                             )"></i></a>
@@ -543,12 +545,12 @@
                                     <input type="text" class="form-control input-search-controller"
                                         placeholder="Functions">
                                     <div class="scrollWrapper" *ngFor="let step of steps">
-                                        <a  [class]="steps.indexOf(step) === 0?
+                                        <a [class]="steps.indexOf(step) === 0?
                                         'list-group-item list-group-item-action active':
                                         'list-group-item list-group-item-action'" [id]="step"
-                                            *ngFor="let step of steps"
-                                            data-toggle="list" href="#list-home" role="tab" aria-controls="home"><i
-                                                class="icon-resource_resolution mr-1" aria-hidden="true"></i>
+                                            *ngFor="let step of steps" data-toggle="list" href="#list-home" role="tab"
+                                            aria-controls="home"><i class="icon-resource_resolution mr-1"
+                                                aria-hidden="true"></i>
                                             {{step}} <i class="icon-next_arrow" aria-hidden="true" (click)="setInputAndOutputs(
                                             this.designerState.template.workflows[actionName]['steps'][step]['target']
                                             )"></i></a>
@@ -699,4 +701,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/designer/functions-attribute/functions-attribute.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.css
index e69de29bb..10ed56b55 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.css
@@ -0,0 +1,3 @@
+.createAttributeTabs .active {
+    background: #eaeaea;
+}
\ 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.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/functions-attribute/functions-attribute.component.html
index 762f1e2b6..8879d539d 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
@@ -59,8 +59,7 @@
                                         <div class="custom-control custom-radio custom-control-inline">
                                             <input type="radio" id="functionRadioInline" name="functionRadioInline"
                                                 [checked]="!currentFuncion['inputs']['artifact-prefix-names']?.get_input"
-                                                (click)="setArtifact(true)"
-                                                class="custom-control-input">
+                                                (click)="setArtifact(true)" class="custom-control-input">
                                             <label class="custom-control-label" for="functionRadioInline">Pre-defined
                                                 Template</label>
                                         </div>
@@ -177,7 +176,7 @@
             </div>
         </div>
         <!--ARTIFACTS-->
-        <div class="card" [hidden]="selectedTemplates.size == 0" class="accordion" id="accordionExample1">
+        <div class="card" [hidden]="finalTemplates.size == 0" class="accordion" id="accordionExample1">
             <div class="card-header" id="headingTwo">
                 <h2 class="mb-0">
                     <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"
@@ -189,7 +188,7 @@
             <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
                 <div class="card-body">
                     <div class="row">
-                        <div class="col-12" *ngFor="let file of  getKeys(selectedTemplates)">
+                        <div class="col-12" *ngFor="let file of  getKeys(finalTemplates)">
                             <a class="template-mapping-list">
                                 <p>{{file}}</p>
                                 <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
@@ -223,7 +222,7 @@
             </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)}">
+                    <a class="template-mapping-list float" [class.active]="selectedTemplates.has(file)">
                         <p (click)="setTemplate(file)">{{file}}</p>
                         <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
                         <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
@@ -233,7 +232,7 @@
 
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-secondary" (click)="cancel()" data-dismiss="modal">Cancel</button>
                 <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="addTemplates()">Add
                     Templates</button>
             </div>
@@ -254,7 +253,8 @@
             </div>
             <div class="modal-body">
                 <p>Are you sure you want to delete Template file
-                    <span>{{fileToDelete}}</span>?</p>
+                    <span>{{fileToDelete}}</span>?
+                </p>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
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 6ebf536b5..d36b16f16 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
@@ -22,6 +22,7 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     cbaPackage: CBAPackage;
     templateAndMappingMap = new Map<string, TemplateAndMapping>();
     selectedTemplates = new Map<string, TemplateAndMapping>();
+    finalTemplates = new Map<string, TemplateAndMapping>();
     fileToDelete: string;
     requiredInputs = new Map<string, {}>();
     requiredOutputs = new Map<string, {}>();
@@ -108,6 +109,7 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
                 console.log(filename);
                 if (this.templateAndMappingMap.has(filename)) {
                     this.selectedTemplates.set(filename, this.templateAndMappingMap.get(filename));
+                    this.finalTemplates.set(filename, this.templateAndMappingMap.get(filename));
                 }
             });
 
@@ -153,7 +155,12 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
         this.ngUnsubscribe.complete();
     }
 
-    addTemplates() { }
+    addTemplates() {
+        this.finalTemplates = this.selectedTemplates;
+    }
+    cancel() {
+        this.selectedTemplates = new Map<string, TemplateAndMapping>();
+    }
 
     saveFunctionData() {
         this.nodeTemplates = new NodeTemplate('');