Disable Filename in edit

enable editing an existing file

Issue-ID: CCSDK-2368
Issue-ID: CCSDK-2369

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

5 files changed, 77 insertions, 9 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts
new file mode 100644
index 000000000..f2b73016c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/shared-service.ts
@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+
+import { Observable, of, BehaviorSubject } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SharedService {
+
+    // based on edit Mode, edit=false
+    mode = new BehaviorSubject(false);
+    constructor() {
+    }
+
+    isEdit(): Observable<boolean> {
+        return this.mode.asObservable();
+    }
+    enableEdit() {
+        this.mode.next(true);
+    }
+    disableEdit() {
+        this.mode.next(false);
+    }
+
+}
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 4f9b2709a..8cdd9c560 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,8 +6,8 @@
         </label>
 
         <div class="label-input">
-            <input type="input" [(ngModel)]="fileName" placeholder="Template name" name="templateName" autofocus
-                [autofocus]="true">
+            <input type="input" [disabled]="edit" [(ngModel)]="fileName" placeholder="Template name" name="templateName"
+                autofocus [autofocus]="true">
         </div>
     </div>
 </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 4601880f8..5129b38d9 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
@@ -9,6 +9,8 @@ import { Mapping, MappingAdapter } from '../../mapping-models/mappingAdapter.mod
 import { PackageCreationUtils } from '../../package-creation.utils';
 import { JsonConvert, Any } from 'json2typescript';
 import { ToastrService } from 'ngx-toastr';
+import { Router, ActivatedRoute } from '@angular/router';
+import { SharedService } from '../shared-service';
 
 @Component({
     selector: 'app-templ-mapp-creation',
@@ -43,19 +45,27 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     mappingRes = [];
     currentTemplate: any;
     currentMapping: any;
+    edit = false;
 
     constructor(
         private packageCreationStore: PackageCreationStore,
         private templateStore: TemplateStore,
         private packageCreationUtils: PackageCreationUtils,
-        private toastr: ToastrService
+        private toastr: ToastrService,
+        private router: ActivatedRoute,
+        private sharedService: SharedService
     ) {
     }
 
     ngOnInit() {
+        if (this.router.snapshot.paramMap.has('id')) {
+            console.log('URL contains Id');
+            this.sharedService.enableEdit();
+        }
+
         this.templateStore.state$.subscribe(templateInfo => {
             // init Template&mapping vars
-            console.log('----------');
+            console.log('Oninit');
             console.log(templateInfo);
             this.templateInfo = templateInfo;
             this.fileName = templateInfo.fileName.split('/')[1];
@@ -82,6 +92,22 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
 
         });
 
+        this.sharedService.isEdit().subscribe(res => {
+            console.log('------------------------');
+            console.log(res);
+            this.edit = res;
+
+            if (!this.edit) {
+                console.log('remove ----');
+                this.currentMapping = {};
+                this.currentTemplate = {};
+                this.fileName = '';
+                this.templateFileContent = '';
+                this.resourceDictionaryRes = [];
+                this.mappingRes = [];
+            }
+        });
+
         this.dtOptions = {
             pagingType: 'full_numbers',
             pageLength: 25,
@@ -259,12 +285,17 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.mappingRes = [];
         this.currentMapping = {};
         this.currentTemplate = {};
+        this.closeCreationForm();
     }
     saveToStore() {
         if (this.fileName) {
             // check file duplication
-            if (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json')
-                || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension()))) {
+            console.log('----------- mode ' + this.edit);
+            if (
+                (!(this.packageCreationStore.fileExist('Templates/' + this.fileName + '-mapping.json')
+                    || this.packageCreationStore.fileExist('Templates/' + this.fileName + '-template' + this.getFileExtension())))
+                || this.edit
+            ) {
                 // Save Mapping to Store
                 if (this.resourceDictionaryRes && this.resourceDictionaryRes.length > 0) {
                     const mapArray = this.convertDictionaryToMap(this.resourceDictionaryRes);
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 ed9f3eeb3..338c8f7cd 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
@@ -4,6 +4,7 @@ import { Mapping, Template } from '../../mapping-models/CBAPacakge.model';
 import { TemplateInfo, TemplateStore } from '../../template.store';
 import { TemplateAndMapping } from '../TemplateAndMapping';
 import { ActivatedRoute } from '@angular/router';
+import { SharedService } from '../shared-service';
 
 
 @Component({
@@ -19,17 +20,23 @@ export class TemplMappListingComponent implements OnInit {
     private mapping: Mapping;
     isCreate = true;
     currentFile: string;
+    edit = false;
 
     constructor(
         private packageCreationStore: PackageCreationStore,
         private templateStore: TemplateStore,
-        private route: ActivatedRoute
+        private route: ActivatedRoute,
+        private sharedService: SharedService
     ) {
     }
 
     ngOnInit() {
         if (this.route.snapshot.paramMap.has('id')) {
             this.isCreate = false;
+            this.sharedService.isEdit().subscribe(res => {
+                this.edit = res;
+            });
+
         }
         this.packageCreationStore.state$.subscribe(cba => {
             if (cba.templates) {
@@ -71,6 +78,9 @@ export class TemplMappListingComponent implements OnInit {
 
     openCreationView() {
         this.showCreationViewParentNotification.emit('tell parent to open create views');
+        console.log('disable edit mode');
+        this.sharedService.disableEdit();
+
     }
     FullView() {
         this.showFullView.emit('show full view');
@@ -101,6 +111,7 @@ export class TemplMappListingComponent implements OnInit {
             }
             this.templateStore.changeTemplateInfo(templateInfo);
             this.FullView();
+            this.sharedService.enableEdit();
         });
     }
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
index 8fd97d71d..80df7c637 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
@@ -1,9 +1,10 @@
 <div *ngIf="!listView">
-    <app-templ-mapp-listing (showCreationViewParentNotification)="openCreationView($event)" (showFullView)="openListView($event)">
+    <app-templ-mapp-listing (showCreationViewParentNotification)="openCreationView($event)"
+        (showFullView)="openListView($event)">
     </app-templ-mapp-listing>
 </div>
 
-<div *ngIf="!creationView">
+<div [hidden]="creationView">
     <app-templ-mapp-creation (showListViewParent)="openListView($event)" (openList)="closeCreationView()">
     </app-templ-mapp-creation>
 </div>
\ No newline at end of file