update template&mapping create view.

add alert messages for success and error

Issue-ID: CCSDK-2323

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

3 files changed, 47 insertions, 17 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css
index 7273b9c27..3a0d9461c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.css
@@ -1,4 +1,9 @@
 .accordian-title {
     color: #a09e9e;
     font-size: .9em;
+}
+
+.mapping-source-load {
+    background-color: white;
+    border: 0
 }
\ No newline at end of file
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 e6149c883..4f9b2709a 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
@@ -6,7 +6,8 @@
         </label>
 
         <div class="label-input">
-            <input type="input" [(ngModel)]="fileName" placeholder="Template name">
+            <input type="input" [(ngModel)]="fileName" placeholder="Template name" name="templateName" autofocus
+                [autofocus]="true">
         </div>
     </div>
 </div>
@@ -79,11 +80,13 @@
                 <div class="card-body">
                     <p class="text-center"><b>Select a source to load config parameters</b></p>
                     <div class="text-center">
-                        <a href="#" (click)="getMappingTableFromTemplate($event)" class="mapping-source-load">
+                        <button [disabled]="!(variables?.length>0 && templateFileContent?.trim()?.length > 0)"
+                            (click)="getMappingTableFromTemplate($event)" class="mapping-source-load" [ngClass]="variables?.length>0 && templateFileContent?.trim()?.length > 0
+                            ?'hover-enable':'hover-disable'">
                             <i class="icon-use-attributes"></i>
                             <br />
                             <span>Use Current Template Instance</span>
-                        </a>
+                        </button>
                         <a href="#" (click)="allowedExt=['.csv']" data-toggle="modal" data-target="#templateModal"
                             class="mapping-source-load">
                             <i class="icon-upload-attributes"></i>
@@ -199,8 +202,9 @@
 
         </div>
         <div class="template-mapping-action">
-            <button (click)="cancel()" class="btn btn-outline-secondary">Cancel</button>
-            <button (click)="saveToStore()" class="btn btn-primary">Submit</button>
+            <button (click)="cancel()" [disabled]="fileName?.length <=0"
+                class="btn btn-outline-secondary">Cancel</button>
+            <button (click)="saveToStore()" [disabled]="fileName?.length <=0" class="btn btn-primary">Submit</button>
         </div>
     </div>
 </div>
@@ -253,8 +257,9 @@
                 <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
                     (click)="resetTheUploadedFiles()">Cancel
                 </button>
-                <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
-                    (click)="uploadFile();openListView()">
+
+                <button (click)="uploadFile();openListView()" class="btn btn-sm btn-primary" data-dismiss="modal"
+                    type="button">
                     Import
                 </button>
             </div>
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 7d4705d69..4601880f8 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
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild, AfterViewInit, ElementRef } from '@angular/core';
 import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 import { PackageCreationStore } from '../../package-creation.store';
 import { TemplateInfo, TemplateStore } from '../../template.store';
@@ -17,14 +17,14 @@ import { ToastrService } from 'ngx-toastr';
 })
 export class TemplMappCreationComponent implements OnInit, OnDestroy {
     @Output() showListViewParent = new EventEmitter<any>();
-
+    @Output() openList = new EventEmitter<any>();
     public uploadedFiles: FileSystemFileEntry[] = [];
     private fileNames: Set<string> = new Set();
     private jsonConvert = new JsonConvert();
     public files: NgxFileDropEntry[] = [];
     fileName: any;
     templateInfo = new TemplateInfo();
-    private variables: string[] = [];
+    variables: string[] = [];
     dtOptions: DataTables.Settings = {};
     // We use this trigger because fetching the list of persons can be quite long,
     // thus we ensure the data is fetched before rendering
@@ -44,8 +44,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     currentTemplate: any;
     currentMapping: any;
 
-
-
     constructor(
         private packageCreationStore: PackageCreationStore,
         private templateStore: TemplateStore,
@@ -56,6 +54,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
 
     ngOnInit() {
         this.templateStore.state$.subscribe(templateInfo => {
+            // init Template&mapping vars
             console.log('----------');
             console.log(templateInfo);
             this.templateInfo = templateInfo;
@@ -63,21 +62,29 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             if (this.fileName) {
                 this.fileName = this.fileName.split('-')[0];
             }
-            if (templateInfo.type === 'mapping') {
+            if (templateInfo.type === 'mapping' || templateInfo.type.includes('mapping')) {
                 this.mappingRes = templateInfo.mapping;
-                this.currentMapping = templateInfo;
+                this.currentMapping = Object.assign({}, templateInfo);
                 this.resourceDictionaryRes = [];
                 this.resTableDtTrigger.next();
             } else {
+                this.mappingRes = [];
+                this.currentMapping = Any;
+            }
+            this.templateFileContent = templateInfo.fileContent;
+            this.currentTemplate = Object.assign({}, templateInfo);
 
-                this.templateFileContent = templateInfo.fileContent;
-                this.currentTemplate = templateInfo;
+            if (templateInfo.type === 'template' || templateInfo.type.includes('template')) {
+                this.currentTemplate.fileName = 'Templates/' + this.fileName + '-template.vtl';
+            } else {
+                this.currentTemplate = Any;
             }
+
         });
 
         this.dtOptions = {
             pagingType: 'full_numbers',
-            pageLength: 10,
+            pageLength: 25,
             destroy: true,
             retrieve: true,
         };
@@ -211,7 +218,12 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.showListViewParent.emit('tell parent to open create views');
     }
 
+    closeCreationForm() {
+        this.openList.emit('close create form and open list');
+    }
+
     getMappingTableFromTemplate(e) {
+        console.log('-' + this.templateFileContent + '-');
         this.resourceDictionaryRes = [];
         if (e) {
             e.preventDefault();
@@ -219,10 +231,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         if (this.variables && this.variables.length > 0) {
             console.log('base');
             this.packageCreationStore.getTemplateAndMapping(this.variables).subscribe(res => {
+                let message = 'Attributes are Fetched';
                 this.mappingRes = [];
                 this.resourceDictionaryRes = res;
                 console.log(this.resourceDictionaryRes);
                 this.rerender();
+                if (this.resourceDictionaryRes && this.resourceDictionaryRes.length <= 0) {
+                    message = 'No values for those attributes';
+                }
+                this.toastr.success(message, 'Success');
+            }, err => {
+                this.toastr.error('Error');
             });
         }
     }
@@ -261,6 +280,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 }
                 this.fileName = '';
                 this.toastr.success('File is created', 'success');
+                this.closeCreationForm();
             } else {
                 console.log('this file already exist');
                 this.toastr.error('File name already exist', 'Error');