add cacncel button to template creation

Issue-ID: CCSDK-2795

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

2 files changed, 11 insertions, 3 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.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 429fa4193..de97a4679 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
@@ -5,9 +5,11 @@
                 class="fa fa-chevron-left mr-2"></i>Template List</button>
     </div>
     <div class="col text-right">
+        <button (click)="cancel()" [hidden]="!templatesExist || edit" class="btn btn-outline-danger"
+            title="Delete Template">Cancel</button>
         <button data-toggle="modal" [hidden]="!edit" data-target="#templateDeletionModal2"
             class="btn btn-outline-danger" title="Delete Template">Delete</button>
-        <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit"
+        <button (click)="clear()" [hidden]="fileName?.length <=0 || edit"
             class="btn btn-outline-secondary">Clear</button>
         <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0"
             title="Submit template and close" class="btn btn-primary">Finish</button>
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 2971ecad9..8c4eab8f5 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 } from '@angular/core';
 import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
 import { PackageCreationStore } from '../../package-creation.store';
 import { TemplateInfo, TemplateStore } from '../../template.store';
@@ -52,6 +52,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     currentTemplate: any;
     currentMapping: any;
     edit = false;
+    templatesExist = false;
     fileToDelete: any = {};
     parserFactory: ParserFactory;
     selectedProps: Set<string>;
@@ -107,6 +108,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
 
         this.sharedService.isEdit().subscribe(res => {
             console.log('------------------------....');
+            this.templatesExist = this.packageCreationStore.state.templates.files.size > 0
+                || this.packageCreationStore.state.mapping.files.size > 0;
             console.log(res);
             this.edit = res;
 
@@ -397,7 +400,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         }
         return map.key;
     }
-    cancel() {
+    clear() {
         this.fileName = '';
         this.templateFileContent = '';
         this.resourceDictionaryRes = [];
@@ -406,6 +409,9 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.currentTemplate = {};
         //   this.closeCreationForm();
     }
+    cancel() {
+        this.openListView();
+    }
     saveToStore() {
         if (this.fileName) {
             // check file duplication