handle integer and checkbox in functional attribute.

Fix finish problem in Mapping.

Issue-ID: CCSDK-2900

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

6 files changed, 133 insertions, 43 deletions

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 115bf6d54..3107c9368 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
@@ -3,7 +3,8 @@
         <div class="col">
             <div class="form-group">
                 <label for="exampleInputEmail1">Function Instance Name</label>
-                <input type="text" class="form-control" placeholder="Function Instance Name">
+                <input type="text" [(ngModel)]="currentFuncion['instance-name']" class="form-control"
+                    placeholder="Function Instance Name">
             </div>
             <div class="form-group mb-0">
                 <label>Function Type</label>
@@ -11,7 +12,8 @@
             </div>
             <div class="form-group">
                 <label for="exampleFormControlTextarea1">Description</label>
-                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                <textarea [(ngModel)]="currentFuncion['description']" class="form-control"
+                    id="exampleFormControlTextarea1" rows="3"></textarea>
             </div>
         </div>
     </div>
@@ -50,20 +52,22 @@
                                     <!--list-->
                                     <div class="attribute-wrap" *ngIf="artifactPrefix">
                                         <div class="form-group">
-                                            <label for="exampleFormControlTextarea1">artifact-prefix-names
+                                            <label for="exampleFormControlTextarea">artifact-prefix-names
                                                 <i class="icon-required-star" type="button"
                                                     aria-hidden="true"></i></label>
                                         </div>
                                         <div class="custom-control custom-radio custom-control-inline">
-                                            <input type="radio" id="customRadioInline1" name="customRadioInline1"
+                                            <input type="radio" id="functionRadioInline" name="functionRadioInline"
                                                 class="custom-control-input">
-                                            <label class="custom-control-label" for="customRadioInline1">Pre-defined
+                                            <label class="custom-control-label" for="functionRadioInline">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
+                                            <input
+                                                [checked]="currentFuncion['inputs']['artifact-prefix-names']?.get_input"
+                                                (click)="setArtifact(false)" type="radio" id="functionRadioInline-a"
+                                                name="functionRadioInline" class="custom-control-input">
+                                            <label class="custom-control-label" for="functionRadioInline-a">Input Drivin
                                                 Template</label>
                                         </div>
                                         <br />
@@ -71,42 +75,63 @@
                                             class="btn btn-select-template m-auto"><i class="icon-add-circle"
                                                 type="button" aria-hidden="true"></i> Select Template</button>
                                     </div>
-                                    <!--string-->
-                                    <div class="attribute-wrap" *ngFor="let requiredInput of getKeys(requiredInputs)">
-                                        <div class="form-group">
+
+                                    <div class="attribute-wrap"
+                                        *ngFor="let requiredInput of getKeys(requiredInputs); let i=index">
+                                        <!--string-->
+                                        <div *ngIf="getValue(requiredInput,requiredInputs).type=='string' || getValue(requiredInput,requiredInputs).type=='json'"
+                                            class="form-group">
                                             <label for="exampleInputEmail1">{{ requiredInput }}<i
                                                     class="icon-required-star" type="button"
                                                     [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
                                                     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">
+                                            <input [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="text"
+                                                class="form-control">
                                         </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"
+                                        <!-- Integer -->
+                                        <div class="form-group"
+                                            *ngIf="getValue(requiredInput,requiredInputs).type=='integer'">
+                                            <label for="exampleInputEmail1">{{ requiredInput }} <i
+                                                    class="icon-required-star" type="button"
+                                                    [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
                                                     aria-hidden="true"></i></label>
+                                            <input [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="number"
+                                                class="form-control" placeholder="">
                                         </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>
-                                        <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>
+                                        <!--boolean-->
+                                        <!-- <div *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'"> -->
+                                        <div class="form-group"
+                                            *ngIf="getValue(requiredInput,requiredInputs).type=='boolean'">
+                                            <label for="exampleFormControlTextarea1">{{ requiredInput }}
+                                                <i class="icon-required-star" type="button"
+                                                    [ngClass]="{'optional-attribute' : getValue(requiredInput,requiredInputs).required==false}"
+                                                    aria-hidden="true"></i></label><br />
+
+                                            <div class="custom-control custom-radio custom-control-inline">
+                                                <input [value]="true"
+                                                    [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
+                                                    id="{{'functionRadioInline' + i}}"
+                                                    name="{{'functionRadioInline' + i}}" class="custom-control-input">
+                                                <label class="custom-control-label"
+                                                    for="{{'functionRadioInline' + i}}">True</label>
+                                            </div><br />
+                                            <div class="custom-control custom-radio custom-control-inline">
+                                                <input [value]="false"
+                                                    [(ngModel)]="currentFuncion['inputs'][requiredInput]" type="radio"
+                                                    id="{{'functionRadioInline' + i+'-a'}}"
+                                                    name="{{'functionRadioInline' + i}}" class="custom-control-input">
+                                                <label class="custom-control-label"
+                                                    for="{{'functionRadioInline' + i+'-a'}}">False</label>
+                                            </div>
                                         </div>
+                                        <!-- </div> -->
+                                    </div>
+
+                                    <!--integer-->
+                                    <!-- <div class="attribute-wrap">
+                                        
                                     </div> -->
+
                                 </div>
                             </div>
                             <!-- Add Optional Attributes button -->
@@ -140,7 +165,8 @@
                                 <div class="form-group">
                                     <label for="exampleInputEmail1">{{ requiredOutput }} <i class="icon-required-star"
                                             type="button" aria-hidden="true"></i></label>
-                                    <input type="text" class="form-control">
+                                    <input [(ngModel)]="currentFuncion['outputs'][requiredOutput]" type=" text"
+                                        class="form-control">
                                 </div>
                             </div>
                         </div>
@@ -178,6 +204,7 @@
             </div>
         </div>
     </div>
+    <button class="btn btn-info" (click)="displayFunctionData()">Save</button>
 </div>
 
 <!--function - Select Template - Modal-->
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 4eee1f30c..624f9c7a8 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
@@ -6,6 +6,7 @@ import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { CBAPackage } from '../../package-creation/mapping-models/CBAPacakge.model';
 import { TemplateAndMapping } from '../../package-creation/template-mapping/TemplateAndMapping';
 import { FunctionsStore } from '../functions.store';
+import { NodeProcess, NodeTemplate } from '../model/desinger.nodeTemplate.model';
 
 @Component({
     selector: 'app-functions-attribute',
@@ -25,6 +26,8 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     OptionalInputs = new Map<string, {}>();
     optionalOutputs = new Map<string, {}>();
     artifactPrefix = false;
+    currentFuncion = new NodeProcess();
+    nodeTemplates = new NodeTemplate('');
 
     constructor(
         private designerStore: DesignerStore,
@@ -70,8 +73,42 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
         this.ngUnsubscribe.next();
         this.ngUnsubscribe.complete();
     }
-    // Template logic
 
+    displayFunctionData() {
+        this.selectedTemplates.forEach((value, key) => {
+            console.log(key);
+            console.log(value);
+
+            if (value.isMapping) {
+                this.nodeTemplates.artifacts[key + '-mapping'] = {
+                    type: 'artifact-mapping-resource',
+                    file: 'Templates/' + key + '-mapping.json'
+                };
+            }
+
+            if (value.isTemplate) {
+                this.nodeTemplates.artifacts[key + '-template'] = {
+                    type: 'artifact-template-resource',
+                    file: 'Templates/' + key + '-template.vtl'
+                };
+            }
+        });
+        this.nodeTemplates.interfaces = {
+            ResourceResolutionComponent: {
+                operations: {
+                    process: {
+                        ...this.currentFuncion
+                    }
+                }
+            }
+        };
+        setTimeout(() => {
+            console.log(this.currentFuncion);
+            console.log(this.nodeTemplates);
+
+        }, 1500);
+    }
+    // Template logic
     private setIsMappingOrTemplate(key: string, templateAndMapping: TemplateAndMapping, isFromTemplate: boolean) {
         const nameOfFile = isFromTemplate ?
             key.split('/')[1].split('.')[0].split('-template')[0]
@@ -88,6 +125,13 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     }
 
     addTemplates() { }
+    setArtifact(predefined: boolean) {
+        if (predefined) {
+
+        } else {
+            this.currentFuncion.inputs['artifact-prefix-names'] = { get_input: 'template-prefix' };
+        }
+    }
     addToInputs(optionalInput) {
         this.requiredInputs.set(optionalInput, this.OptionalInputs.get(optionalInput));
         this.OptionalInputs.delete(optionalInput);
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
index 8715e44c2..bd3240b88 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/desinger.nodeTemplate.model.ts
@@ -11,5 +11,13 @@ export class NodeTemplate {
     constructor(type) {
         this.type = type;
         this.properties = {};
+        this.artifacts = {};
+        this.interfaces = {};
     }
 }
+
+export class NodeProcess {
+    inputs: {} = {};
+    outputs: {} = {};
+}
+
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/nodeTemplates.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/nodeTemplates.ts
new file mode 100644
index 000000000..2baae2cc9
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/model/nodeTemplates.ts
@@ -0,0 +1,5 @@
+export class Nodetemplates {
+    type: string;
+    interfaces: {};
+    artifacts: {};
+}
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 70b1644ab..82010db1c 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
@@ -149,12 +149,13 @@
                                 <span>({{resourceDictionaryRes.length}} attributes in total)</span>
                             </div>
                         </div>
-                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100,this.resourceDictionaryRes.length]">
+                        </mat-paginator>
                         <mat-form-field class="tableFilter float-right">
                             <mat-label>Filter</mat-label>
                             <input matInput (keyup)="initApplyFilter($event)" placeholder="Ex. Mia" #input>
                         </mat-form-field>
-                        <table mat-table [dataSource]="initDataSource" matSort>
+                        <table mat-table matSortDisableClear [dataSource]="initDataSource" matSort>
                             <!-- select Column -->
                             <ng-container matColumnDef="select">
                                 <th mat-header-cell *matHeaderCellDef> </th>
@@ -262,8 +263,8 @@
                             <mat-label>Filter</mat-label>
                             <input matInput (keyup)="applyFilter($event)" placeholder="Ex. Mia" #input>
                         </mat-form-field>
-                        <mat-paginator [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
-                        <table mat-table [dataSource]="dataSource" matSort>
+                        <mat-paginator #paginate="matPaginator" [pageSizeOptions]="[10, 25,50, 100]"></mat-paginator>
+                        <table matSortDisableClear mat-table [dataSource]="dataSource" #sort="matSort" matSort>
                             <!-- Required Column -->
                             <ng-container matColumnDef="Required">
                                 <th mat-header-cell *matHeaderCellDef> Required </th>
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 0bf4d9c54..a26f3b90e 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
@@ -74,8 +74,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI
     dataSource: MatTableDataSource<{}>;
     initDataSource: MatTableDataSource<{}>;
     // dataSource = new MatTableDataSource();
-    @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-    @ViewChild(MatSort, { static: true }) sort: MatSort;
+    @ViewChild('paginate', { static: true }) paginator: MatPaginator;
+    @ViewChild('sort', { static: true }) sort: MatSort;
     @ViewChild(MatPaginator, { static: true }) initPaginator: MatPaginator;
     @ViewChild(MatSort, { static: true }) initSort: MatSort;
 
@@ -519,6 +519,11 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy, AfterViewI
     rerender(): void {
         this.initDataSource = new MatTableDataSource(this.resourceDictionaryRes);
         //   this.cdr.detectChanges();
+        /*
+        Hint: the intial page size for the table will be the result size; I did that because the table doesn't load element in DOM,
+        as result some function are not working well like save and you have to move to other pages to fix that.
+        */
+        this.initPaginator.pageSize = this.resourceDictionaryRes.length;
         this.initDataSource.paginator = this.initPaginator;
         this.initDataSource.sort = this.initSort;
     }