add required input&outputs

Issue-ID: CCSDK-2900

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

3 files changed, 88 insertions, 16 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 23633017d..c0c7ece98 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
@@ -68,23 +68,24 @@
                                                 aria-hidden="true"></i> Select Template</button>
                                     </div>
                                     <!--string-->
-                                    <div class="attribute-wrap">
+                                    <div class="attribute-wrap" *ngFor="let requiredInput of requiredInputs">
                                         <div class="form-group">
-                                            <label for="exampleInputEmail1">resoluton-key <i class="icon-required-star"
-                                                    type="button" aria-hidden="true"></i></label>
+                                            <label for="exampleInputEmail1">{{ getObjectKey(requiredInput)[0] }}<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="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">
                                         </div>
-                                    </div>
+                                    </div> -->
                                     <!--boolean-->
-                                    <div class="attribute-wrap">
+                                    <!-- <div class="attribute-wrap">
                                         <div class="form-group">
                                             <label for="exampleFormControlTextarea1">resolution-summary
                                                 <i class="icon-required-star optional-attribute" type="button"
@@ -100,20 +101,29 @@
                                                 class="custom-control-input">
                                             <label class="custom-control-label" for="customRadioInline2">False</label>
                                         </div>
-                                    </div>
+                                    </div> -->
                                     <!-- Add Optional Attributes button -->
                                 </div>
                             </div>
                         </div>
+                        <!-- Optional params -->
                         <div class="tab-pane fade" id="pills-profile" role="tabpanel"
-                            aria-labelledby="pills-profile-tab">2</div>
+                            aria-labelledby="pills-profile-tab">
+                            <div class="attribute-wrap" *ngFor="let requiredOutput of requiredOutputs">
+                                <div class="form-group">
+                                    <label for="exampleInputEmail1">{{ getObjectKey(requiredOutput)[0] }} <i
+                                            class="icon-required-star" type="button" aria-hidden="true"></i></label>
+                                    <input type="text" class="form-control">
+                                </div>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <!--ARTIFACTS-->
-    <div class="accordion" id="accordionExample1">
+    <div [hidden]="selectedTemplates.size == 0" 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"
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 0c47b3bbc..2572651b5 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
@@ -5,6 +5,7 @@ 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';
+import { FunctionsStore } from '../functions.store';
 
 @Component({
     selector: 'app-functions-attribute',
@@ -19,10 +20,16 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     templateAndMappingMap = new Map<string, TemplateAndMapping>();
     selectedTemplates = new Map<string, TemplateAndMapping>();
     fileToDelete: string;
+    requiredInputs = [];
+    requiredOutputs = [];
+    OptionalInputs = [];
+    optionalOutputs = [];
+    artifactPrefix = false;
 
     constructor(
         private designerStore: DesignerStore,
-        private packageCreationStore: PackageCreationStore
+        private packageCreationStore: PackageCreationStore,
+        private functionStore: FunctionsStore
     ) {
     }
 
@@ -36,9 +43,6 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
             });
 
         this.packageCreationStore.state$
-            .pipe(
-                distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)),
-                takeUntil(this.ngUnsubscribe))
             .subscribe(cbaPackage => {
                 this.cbaPackage = cbaPackage;
                 console.log('File name =>================== ');
@@ -58,6 +62,7 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
                     this.setIsMappingOrTemplate(key, templateAndMapping, isFromTemplate);
                 });
             });
+        this.getNodeType('component-resource-resolution');
 
     }
 
@@ -99,4 +104,61 @@ export class FunctionsAttributeComponent implements OnInit, OnDestroy {
     getValue(file: string) {
         return this.templateAndMappingMap.get(file);
     }
+
+    getObjectKey(object) {
+        // console.log(object);
+        return Object.keys(object);
+    }
+    getObjectValue(object) {
+        return Object.values(object);
+    }
+    getNodeType(nodeName: string) {
+        this.functionStore.state$
+            .subscribe(state => {
+                console.log(state);
+                const functions = state.serverFunctions;
+                // tslint:disable-next-line: prefer-for-of
+                for (let i = 0; i < functions.length; i++) {
+                    if (functions[i].modelName === nodeName) {
+                        // tslint:disable: no-string-literal
+                        console.log(functions[i].definition['interfaces']);
+                        this.getInputFields(functions[i].definition['interfaces'], 'ResourceResolutionComponent', 'inputs');
+                        this.getInputFields(functions[i].definition['interfaces'], 'ResourceResolutionComponent', 'outputs');
+                        break;
+                    }
+                }
+            });
+    }
+
+    getInputFields(interfaces, nodeName, type) {
+        console.log(interfaces[nodeName]['operations']['process'][type]);
+        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));
+                } else {
+                    this.requiredOutputs.push(Object.assign({}, object));
+                }
+            } else {
+                console.log('This field is Optional ' + key);
+                if (type === 'inputs') {
+                    this.OptionalInputs.push(Object.assign({}, object));
+                } else {
+                    this.optionalOutputs.push(Object.assign({}, object));
+                }
+            }
+        }
+
+        // console.log(this.requiredOutputs);
+    }
+
+
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index 0ffa9780a..3c9cbc644 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -6,10 +6,10 @@
         <app-packages-header></app-packages-header>
         <div class="container-fluid body-container">
             <!--Tour Starter-->
-            <div>
+
             <input id="clicker" [checked]="startTour" type="checkbox" />
             <label class="ml-1" for="clicker">Start the tour</label>
-        </div>
+
             <div class="panel-wrap packageWizard">
                 <div class="panel">
                     <button id="clicker1" class="close" type="button" (click)="stopTour()">
@@ -60,4 +60,4 @@
             <app-sort-packages></app-sort-packages>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file