add optional attributes.

Issue-ID: CCSDK-2900

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

5 files changed, 49 insertions, 45 deletions

diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json
index 096e96eb9..28e48098a 100644
--- a/cds-ui/designer-client/package.json
+++ b/cds-ui/designer-client/package.json
@@ -25,14 +25,14 @@
     "@angular/router": "~8.2.9",
     "@ng-bootstrap/ng-bootstrap": "^5.1.1",
     "angular-animations": "0.0.10",
-    "angular-datatables": "^9.0.1",
+    "angular-datatables": "^9.0.2",
     "angular-font-awesome": "^3.1.2",
     "angular-material-expansion-panel": "^0.7.2",
     "backbone": "^1.4.0",
     "bootstrap": "^4.3.1",
     "dagre": "^0.8.5",
-    "datatables.net": "^1.10.20",
-    "datatables.net-dt": "^1.10.20",
+    "datatables.net": "^1.10.21",
+    "datatables.net-dt": "^1.10.21",
     "file-saver": "^2.0.2",
     "font-awesome": "^4.7.0",
     "graphlib": "^2.1.8",
@@ -82,4 +82,4 @@
     "tslint": "~5.15.0",
     "typescript": "~3.5.3"
   }
-}
+}
\ 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 91386fd66..115bf6d54 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
@@ -48,7 +48,7 @@
                             <div class="row">
                                 <div class="col">
                                     <!--list-->
-                                    <div class="attribute-wrap">
+                                    <div class="attribute-wrap" *ngIf="artifactPrefix">
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">artifact-prefix-names
                                                 <i class="icon-required-star" type="button"
@@ -72,10 +72,11 @@
                                                 type="button" aria-hidden="true"></i> Select Template</button>
                                     </div>
                                     <!--string-->
-                                    <div class="attribute-wrap" *ngFor="let requiredInput of requiredInputs">
+                                    <div class="attribute-wrap" *ngFor="let requiredInput of getKeys(requiredInputs)">
                                         <div class="form-group">
-                                            <label for="exampleInputEmail1">{{ getObjectKey(requiredInput)[0] }}<i
+                                            <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>
@@ -119,19 +120,10 @@
                                                 Optional Attributes
                                             </div>
                                             <ul class="dropdown-content save-blueprint">
-                                                <li>
-                                                    <a>resolution-key</a>
-                                                    <i class="icon-add-circle float-right" type="button"
-                                                        aria-hidden="true"></i>
-                                                </li>
-                                                <li>
-                                                    <a>occurrence</a>
-                                                    <i class="icon-add-circle float-right" type="button"
-                                                        aria-hidden="true"></i>
-                                                </li>
-                                                <li>
-                                                    <a>store-result</a>
-                                                    <i class="icon-add-circle float-right" type="button"
+                                                <li *ngFor="let optionalInput of getKeys(OptionalInputs)">
+                                                    <a (click)="addToInputs(optionalInput)">{{ optionalInput }}</a>
+                                                    <i (click)="addToInputs(optionalInput)"
+                                                        class="icon-add-circle float-right" type="button"
                                                         aria-hidden="true"></i>
                                                 </li>
                                             </ul>
@@ -144,10 +136,10 @@
                         <!-- Optional params -->
                         <div class="tab-pane fade" id="pills-profile" role="tabpanel"
                             aria-labelledby="pills-profile-tab">
-                            <div class="attribute-wrap" *ngFor="let requiredOutput of requiredOutputs">
+                            <div class="attribute-wrap" *ngFor="let requiredOutput of getKeys(requiredOutputs)">
                                 <div class="form-group">
-                                    <label for="exampleInputEmail1">{{ getObjectKey(requiredOutput)[0] }} <i
-                                            class="icon-required-star" type="button" aria-hidden="true"></i></label>
+                                    <label for="exampleInputEmail1">{{ requiredOutput }} <i class="icon-required-star"
+                                            type="button" aria-hidden="true"></i></label>
                                     <input type="text" class="form-control">
                                 </div>
                             </div>
@@ -156,7 +148,7 @@
                 </div>
             </div>
         </div>
-    <!--ARTIFACTS-->
+        <!--ARTIFACTS-->
         <div class="card" [hidden]="selectedTemplates.size == 0" class="accordion" id="accordionExample1">
             <div class="card-header" id="headingTwo">
                 <h2 class="mb-0">
@@ -172,8 +164,8 @@
                         <div class="col-12" *ngFor="let file of  getKeys(selectedTemplates)">
                             <a class="template-mapping-list">
                                 <p>{{file}}</p>
-                                <span *ngIf="getValue(file).isMapping">Mapping</span>
-                                <span *ngIf="getValue(file).isTemplate">Template</span>
+                                <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
+                                <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
 
                                 <a data-toggle="modal" (click)="fileToDelete = file"
                                     data-target="#templateDeletionModal" class="accordion-delete deleteTemplate"
@@ -204,8 +196,8 @@
                 <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>
+                        <span *ngIf="getValue(file,templateAndMappingMap).isMapping">Mapping</span>
+                        <span *ngIf="getValue(file,templateAndMappingMap).isTemplate">Template</span>
                     </a>
 
                 </div>
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 2572651b5..4eee1f30c 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
@@ -20,10 +20,10 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     templateAndMappingMap = new Map<string, TemplateAndMapping>();
     selectedTemplates = new Map<string, TemplateAndMapping>();
     fileToDelete: string;
-    requiredInputs = [];
-    requiredOutputs = [];
-    OptionalInputs = [];
-    optionalOutputs = [];
+    requiredInputs = new Map<string, {}>();
+    requiredOutputs = new Map<string, {}>();
+    OptionalInputs = new Map<string, {}>();
+    optionalOutputs = new Map<string, {}>();
     artifactPrefix = false;
 
     constructor(
@@ -88,6 +88,10 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     }
 
     addTemplates() { }
+    addToInputs(optionalInput) {
+        this.requiredInputs.set(optionalInput, this.OptionalInputs.get(optionalInput));
+        this.OptionalInputs.delete(optionalInput);
+    }
 
     setTemplate(file: string) {
         if (this.selectedTemplates.has(file)) {
@@ -98,11 +102,11 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
         console.log(this.selectedTemplates);
     }
 
-    getKeys(templateAndMappingMap: Map<string, TemplateAndMapping>) {
-        return Array.from(templateAndMappingMap.keys());
+    getKeys(map: Map<string, any>) {
+        return Array.from(map.keys());
     }
-    getValue(file: string) {
-        return this.templateAndMappingMap.get(file);
+    getValue(file: string, map: Map<string, any>) {
+        return map.get(file);
     }
 
     getObjectKey(object) {
@@ -135,24 +139,21 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
         const fields = interfaces[nodeName]['operations']['process'][type];
 
         for (const [key, value] of Object.entries(fields)) {
-            const object = {};
-            object[key] = value;
-
             if (key === 'artifact-prefix-names') {
                 this.artifactPrefix = true;
             } else if (value['required']) {
                 console.log('This field is required = ' + key);
                 if (type === 'inputs') {
-                    this.requiredInputs.push(Object.assign({}, object));
+                    this.requiredInputs.set(key, Object.assign({}, value));
                 } else {
-                    this.requiredOutputs.push(Object.assign({}, object));
+                    this.requiredOutputs.set(key, Object.assign({}, value));
                 }
             } else {
                 console.log('This field is Optional ' + key);
                 if (type === 'inputs') {
-                    this.OptionalInputs.push(Object.assign({}, object));
+                    this.OptionalInputs.set(key, Object.assign({}, value));
                 } else {
-                    this.optionalOutputs.push(Object.assign({}, object));
+                    this.optionalOutputs.set(key, Object.assign({}, value));
                 }
             }
         }
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 de97a4679..6dc120728 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
@@ -146,7 +146,8 @@
                             <span>({{resourceDictionaryRes.length}} attributes in total)</span>
                         </div>
                     </div>
-                    <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
+                    <table datatable id="init-table" [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger"
+                        class="row-border hover">
                         <thead>
                             <tr>
                                 <th></th>
@@ -230,7 +231,8 @@
                         <button [disabled]="selectedProps.size <=0" type="button" class="btn" (click)="removeProps()"
                             tooltip="Remove" placement="bottom"><i class="icon-delete-sm"></i></button>
                     </div> -->
-                    <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover">
+                    <table datatable id="res-table" [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger"
+                        class="row-border hover">
                         <thead>
                             <tr>
                                 <!-- <th></th> -->
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
index 3a05bcfc5..591553cea 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
@@ -174,6 +174,7 @@ export class TemplMappListingComponent implements OnInit, OnDestroy {
     initDelete(file) {
         console.log(file);
         const templateKey = 'Templates/' + file + '-template';
+        const mappingKey = 'Templates/' + file + '-mapping.json';
         // tslint:disable-next-line: forin
         for (const templateType in TemplateType) {
             const fileName = templateKey + '.' + TemplateType[templateType];
@@ -182,11 +183,19 @@ export class TemplMappListingComponent implements OnInit, OnDestroy {
                 break;
             }
         }
+        if (this.fileToDelete.length <= 0) {
+            // tslint:disable-next-line: forin
+            if (this.packageCreationStore.state.mapping.files.has(mappingKey)) {
+                this.fileToDelete = mappingKey;
+            }
+
+        }
 
     }
 
     condifrmDelete() {
         const fullName = this.fileToDelete.split('/')[1];
+        console.log(this.fileToDelete + ' -- ' + fullName);
         const file = fullName.substr(0, fullName.lastIndexOf('-'));
         const ext = fullName.substr(fullName.lastIndexOf('.') + 1);
         this.templateAndMappingMap.delete(file);