add checkboxs for Required & Template input columns.

add alert message for empty or invalid template file.

Issue-ID: CCSDK-2795

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

5 files changed, 51 insertions, 19 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
index 6d980190e..e63b17fa2 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/mappingAdapter.model.ts
@@ -10,12 +10,14 @@ export class MappingAdapter {
         private dependanciesSource: Map<string, string>) { }
 
     ToMapping(): Mapping {
-       // console.log(this.resourceDictionary.definition.property);
+        // console.log(this.resourceDictionary.definition.property);
         const mapping = new Mapping();
         mapping.name = this.resourceDictionary.name;
         mapping.dictionaryName = this.resourceDictionary.name;
         mapping.property = Object.assign({}, this.resourceDictionary.definition.property);
-        mapping.inputParam = false;
+        mapping.inputParam = this.resourceDictionary['input-param'] || false;
+        // tslint:disable-next-line: no-string-literal
+        mapping.property['required'] = this.resourceDictionary['required'] || false;
         mapping.dictionarySource = this.dependanciesSource.get(mapping.name);
         if (this.dependancies.get(mapping.name)) {
             mapping.dependencies = this.dependancies.get(mapping.name);
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 d93d49dba..429fa4193 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,6 +149,7 @@
                             <tr>
                                 <th></th>
                                 <th>Required</th>
+                                <th>Template Input</th>
                                 <th>Parameter Name</th>
                                 <th>Dictionary Name</th>
                                 <th>Dictionary Source</th>
@@ -173,16 +174,18 @@
                                 </td>
                                 <td>
                                     <div class="custom-control custom-checkbox reuiredInput">
-                                        <input type="checkbox" class="custom-control-input"
-                                            id="customCheck-{{dict.name}}" [checked]="selectedProps.has(dict.name)"
-                                            (click)="selectProp(dict.name)">
-                                        <label class="custom-control-label" for="customCheck-{{dict.name}}"></label>
+                                        <input type="checkbox" class="custom-control-input" #requiredInput
+                                            (click)="setProp(requiredInput,'required',i)"
+                                            id="requiredCheck-{{dict.name}}">
+                                        <label class="custom-control-label" for="requiredCheck-{{dict.name}}"></label>
+                                    </div>
+                                </td>
+                                <td>
+                                    <div class="custom-control custom-checkbox reuiredInput">
+                                        <input type="checkbox" class="custom-control-input" #tempInput
+                                            (click)="setProp(tempInput,'input-param',i)" id="inputCheck-{{dict.name}}">
+                                        <label class="custom-control-label" for="inputCheck-{{dict.name}}"></label>
                                     </div>
-                                    
-                                    <img *ngIf="dict.definition?.property?.required"
-                                        src="/assets/img/icon-required-yes.svg">
-                                    <img *ngIf="!dict.definition?.property?.required"
-                                        src="/assets/img/icon-required-no.svg">
                                 </td>
                                 <td>{{ dict.name }}</td>
                                 <td>{{ dict.name }}</td>
@@ -230,6 +233,7 @@
                             <tr>
                                 <!-- <th></th> -->
                                 <th>Required</th>
+                                <th>Template Input</th>
                                 <th>Parameter Name</th>
                                 <th>Dictionary Name</th>
                                 <th>Dictionary Source</th>
@@ -251,10 +255,12 @@
                                     </div>
                                 </td> -->
                                 <td>
-                                    <img *ngIf="dict.definition?.property?.required"
-                                        src="/assets/img/icon-required-yes.svg">
-                                    <img *ngIf="!dict.definition?.property?.required"
-                                        src="/assets/img/icon-required-no.svg">
+                                    <img *ngIf="dict?.property?.required" src="/assets/img/icon-required-yes.svg">
+                                    <img *ngIf="!dict?.property?.required" src="/assets/img/icon-required-no.svg">
+                                </td>
+                                <td>
+                                    <img *ngIf="dict['input-param']" src="/assets/img/icon-required-yes.svg">
+                                    <img *ngIf="!dict['input-param']" src="/assets/img/icon-required-no.svg">
                                 </td>
                                 <td>{{ dict['name'] }}</td>
                                 <td>{{ dict['name'] }}</td>
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 a99f65b86..2971ecad9 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
@@ -126,6 +126,14 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             pageLength: 25,
             destroy: true,
             retrieve: true,
+            columnDefs: [
+                {
+                    targets: [0, 1, 2], // column or columns numbers
+                    orderable: false, // set orderable for selected columns
+                    searchable: false,
+                },
+
+            ],
         };
         this.dtOptions = {
             pagingType: 'full_numbers',
@@ -135,6 +143,10 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         };
     }
 
+    setProp(e, propName, index) {
+        this.resourceDictionaryRes[index][propName] = e.checked;
+        console.log(this.resourceDictionaryRes[index]);
+    }
     selectProp(value) {
         console.log(value);
         if (this.selectedProps.has(value)) {
@@ -374,6 +386,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             }, err => {
                 this.toastr.error('Error');
             });
+        } else {
+            this.toastr.error('Empty or Invalid file format. Validate your file first');
         }
     }
 
@@ -466,6 +480,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         // Do not forget to unsubscribe the event
         this.dtTrigger.unsubscribe();
         this.resTableDtTrigger.unsubscribe();
+        // this.templateStore.unsubscribe();
     }
 }
 
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 722be321c..3f54f6742 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
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output } from '@angular/core';
 import { PackageCreationStore } from '../../package-creation.store';
 import { Mapping, Template } from '../../mapping-models/CBAPacakge.model';
 import { TemplateInfo, TemplateStore } from '../../template.store';
@@ -15,7 +15,7 @@ import { of } from 'rxjs';
     templateUrl: './templ-mapp-listing.component.html',
     styleUrls: ['./templ-mapp-listing.component.css']
 })
-export class TemplMappListingComponent implements OnInit {
+export class TemplMappListingComponent implements OnInit, OnDestroy {
     @Output() showCreationView = new EventEmitter<any>();
     @Output() showListView = new EventEmitter<any>();
     templateAndMappingMap = new Map<string, TemplateAndMapping>();
@@ -35,6 +35,10 @@ export class TemplMappListingComponent implements OnInit {
 
     ) {
     }
+    ngOnDestroy(): void {
+        // this.templateStore.unsubscribe();
+        // this.packageCreationStore.unsubscribe();
+    }
 
     ngOnInit() {
         if (this.route.snapshot.paramMap.has('id')) {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
index 341d29f66..15361b8ad 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { PackageCreationStore } from '../package-creation.store';
 import { SharedService } from './shared-service';
@@ -8,7 +8,7 @@ import { SharedService } from './shared-service';
     templateUrl: './template-mapping.component.html',
     styleUrls: ['./template-mapping.component.css']
 })
-export class TemplateMappingComponent implements OnInit {
+export class TemplateMappingComponent implements OnInit, OnDestroy {
     creationView = false;
     listView = true;
 
@@ -18,6 +18,11 @@ export class TemplateMappingComponent implements OnInit {
         private sharedService: SharedService
     ) {
     }
+    ngOnDestroy(): void {
+        // this.sharedService.list.unsubscribe();
+        // this.sharedService.mode.unsubscribe();
+        // this.pakcageStore.unsubscribe();
+    }
 
     ngOnInit() {