adding upload function and getting variables from template at template and mapping tab

Issue-ID: CCSDK-2102

Signed-off-by: shaaban Altanany <shaaban.eltanany.ext@orange.com>
Change-Id: Id92cbd183c700764a55ef016d681a568954dc18f

10 files changed, 299 insertions, 157 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
index d94a64ca3..30675086c 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/mapping-models/CBAPacakge.model.ts
@@ -59,6 +59,10 @@ export class Template {
         this.files.set(key, value);
         return this;
     }
+
+    public getValue(key: string): string {
+        return this.files.get(key);
+    }
 }
 
 export class CBAPackage {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
index 36da6a42f..cac27120f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.service.ts
@@ -23,7 +23,7 @@ import {Injectable} from '@angular/core';
 
 import {Observable} from 'rxjs';
 import {ApiService} from '../../../../common/core/services/api.service';
-import {BlueprintURLs} from '../../../../common/constants/app-constants';
+import {BlueprintURLs, ResourceDictionaryURLs} from '../../../../common/constants/app-constants';
 import {PackagesApiService} from '../packages-api.service';
 import {PackagesStore} from '../packages.store';
 
@@ -62,4 +62,7 @@ export class PackageCreationService {
                 });
     }
 
+    getTemplateAndMapping(variables: string[]): Observable<any> {
+        return this.api.post(ResourceDictionaryURLs.searchResourceDictionaryByNames, variables);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
index 3dae2e570..565603ad1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.store.ts
@@ -93,4 +93,10 @@ export class PackageCreationStore extends Store<CBAPackage> {
             templates: this.state.templates.setTemplates(filePath, fileContent)
         });
     }
+
+    getTemplateAndMapping(variables: string[]) {
+        this.packageCreationService.getTemplateAndMapping(variables).subscribe(element => {
+            console.log('the element is ' + element);
+        });
+    }
 }
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 3c92bc7c7..07c88c330 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
@@ -60,7 +60,8 @@
                                                                                                             data-target="#exampleModal">Import
                         File</a></div>
                     <div class="editor-container">
-                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
+                        <app-source-editor
+                                           [(text)]="templateInfo.fileContent"></app-source-editor>
                     </div>
                 </div>
             </div>
@@ -78,7 +79,7 @@
                 <div class="card-body">
                     <h6 class="text-center">Select a source to load config parameters</h6>
                     <div class="text-center">
-                        <a href="#" class="mapping-source-load">
+                        <a (click)="initTemplateMappingTableFromCurrentTemplate()" class="mapping-source-load">
                             <i class="icon-current-template"></i>
                             <br/>
                             <span>Use Current Template Instance</span>
@@ -160,7 +161,7 @@
                         (click)="resetTheUploadedFiles()">Cancel
                 </button>
                 <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
-                        (click)="setFilesToStore()">
+                        (click)="setFilesToStore()" (click)="openListView()">
                     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 752bd510b..836b0f5a6 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,6 +1,7 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
 import {PackageCreationStore} from '../../package-creation.store';
+import {TemplateInfo, TemplateStore} from '../../template.store';
 
 @Component({
     selector: 'app-templ-mapp-creation',
@@ -8,17 +9,57 @@ import {PackageCreationStore} from '../../package-creation.store';
     styleUrls: ['./templ-mapp-creation.component.css']
 })
 export class TemplMappCreationComponent implements OnInit {
+    @Output() showListViewParent = new EventEmitter<any>();
 
     public uploadedFiles: FileSystemFileEntry[] = [];
     private fileNames: Set<string> = new Set();
 
     public files: NgxFileDropEntry[] = [];
     fileName: any;
+    templateInfo = new TemplateInfo();
+    private variables: string[] = [];
 
-    constructor(private packageCreationStore: PackageCreationStore) {
+
+    constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) {
     }
 
     ngOnInit() {
+        this.templateStore.state$.subscribe(templateInfo => {
+            this.templateInfo = templateInfo;
+            this.fileName = templateInfo.fileName.split('/')[1];
+            this.variables = this.getTemplateVariable(templateInfo.fileContent);
+        });
+    }
+
+    public getTemplateVariable(fileContent: string) {
+        const variables: string[] = [];
+        const stringsSlittedByBraces = fileContent.split('${');
+        const stringsDefaultByDollarSignOnly = fileContent.split('"$');
+
+        for (let i = 1; i < stringsSlittedByBraces.length; i++) {
+            const element = stringsSlittedByBraces[i];
+            if (element) {
+                const firstElement = element.split('}')[0];
+                if (!variables.includes(firstElement)) {
+                    variables.push(firstElement);
+                } else {
+                    console.log(firstElement);
+                }
+            }
+        }
+
+        for (let i = 1; i < stringsDefaultByDollarSignOnly.length; i++) {
+            const element = stringsDefaultByDollarSignOnly[i];
+            if (element && !element.includes('$')) {
+                const firstElement = element.split('"')[0]
+                    .replace('{', '')
+                    .replace('}', '').trim();
+                if (!variables.includes(firstElement)) {
+                    variables.push(firstElement);
+                }
+            }
+        }
+        return variables;
     }
 
     public dropped(files: NgxFileDropEntry[]) {
@@ -52,6 +93,7 @@ export class TemplMappCreationComponent implements OnInit {
             });
 
         }
+        this.uploadedFiles = [];
     }
 
     public fileOver(event) {
@@ -65,4 +107,14 @@ export class TemplMappCreationComponent implements OnInit {
     resetTheUploadedFiles() {
         this.uploadedFiles = [];
     }
+
+    openListView() {
+        this.showListViewParent.emit('tell parent to open create views');
+    }
+
+    initTemplateMappingTableFromCurrentTemplate() {
+        if (this.variables && this.variables.length > 0) {
+            this.packageCreationStore.getTemplateAndMapping(this.variables);
+        }
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
index ddf06c824..9009132e7 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
@@ -1,8 +1,6 @@
-
-
-    <a (click)="openCreationView()" class="create-template-mapping-button">
-       <i class="fa fa-plus"></i> <span>Create</span>
-    </a>
+<a (click)="openCreationView()" class="create-template-mapping-button">
+    <i class="fa fa-plus"></i> <span>Create</span>
+</a>
 
 
 <div class="template-mapping-accordion">
@@ -10,8 +8,9 @@
         <div class="card">
             <div class="card-header" id="headingThree">
                 <h5 class="mb-0 d-flex justify-content-between">
-                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true"
-                        aria-controls="collapseThree">
+                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree"
+                            aria-expanded="true"
+                            aria-controls="collapseThree">
                         Template and Mapping List
                     </button>
 
@@ -19,138 +18,139 @@
             </div>
 
             <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion">
-                <div class="card-body max-height-list"  *ngFor="let file of templates.files | keyvalue; let mapIndex = index">
-                    <div class="row">
-                        <div class="col">
-                            <a href="#" class="template-mapping-list active">{{file.key}}
-                                <span>Mapping</span>
-                                <span>Template</span>
-                            </a>
-                        </div>
-                       <!-- <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-1
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-2
-                                <span>Mapping</span>
-                            </a>
-                        </div>-->
-                    </div>
-                 <!--   <div class="row">
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">hostname
-                                <span>Mapping</span>
-                                <span>Template</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-1
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-2
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">hostname
-                               
-                                <span>Template</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-1
-                                <span>Template</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-2
-                                <span>Mapping</span>
-                                <span>Template</span>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">hostname
-                              
-                                <span>Template</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-1
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-2
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                    </div>
-                    <div class="row">
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">hostname
-                                <span>Mapping</span>
-                                <span>Template</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-1
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-2
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                    </div>
+                <div class="card-body max-height-list"
+                     *ngFor="let file of templates.files | keyvalue; let mapIndex = index">
                     <div class="row">
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">hostname
+                        <div class="col" style="color:white">
+                            <a (click)="setSourceCodeEditor(file.key)" class="template-mapping-list active">{{file.key}}
                                 <span>Mapping</span>
                                 <span>Template</span>
                             </a>
                         </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-1
-                                <span>Mapping</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-2
-                                <span>Mapping</span>
-                            </a>
-                        </div>
+                        <!-- <div class="col">
+                             <a href="#" class="template-mapping-list">vf-module-1
+                                 <span>Mapping</span>
+                             </a>
+                         </div>
+                         <div class="col">
+                             <a href="#" class="template-mapping-list">vf-module-2
+                                 <span>Mapping</span>
+                             </a>
+                         </div>-->
                     </div>
-                    <div class="row">
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">hostname
-                               
-                                <span>Template</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-1
-                                <span>Template</span>
-                            </a>
-                        </div>
-                        <div class="col">
-                            <a href="#" class="template-mapping-list">vf-module-2
-                                <span>Mapping</span>
-                                <span>Template</span>
-                            </a>
-                        </div>
-                    </div>-->
+                    <!--   <div class="row">
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">hostname
+                                   <span>Mapping</span>
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-1
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-2
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                       </div>
+                       <div class="row">
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">hostname
+
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-1
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-2
+                                   <span>Mapping</span>
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                       </div>
+                       <div class="row">
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">hostname
+
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-1
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-2
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                       </div>
+                       <div class="row">
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">hostname
+                                   <span>Mapping</span>
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-1
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-2
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                       </div>
+                       <div class="row">
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">hostname
+                                   <span>Mapping</span>
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-1
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-2
+                                   <span>Mapping</span>
+                               </a>
+                           </div>
+                       </div>
+                       <div class="row">
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">hostname
+
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-1
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                           <div class="col">
+                               <a href="#" class="template-mapping-list">vf-module-2
+                                   <span>Mapping</span>
+                                   <span>Template</span>
+                               </a>
+                           </div>
+                       </div>-->
                 </div>
             </div>
         </div>
-        
+
     </div>
 </div>
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 5cb41c35e..9a0cdcdac 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,6 +1,7 @@
 import {Component, EventEmitter, OnInit, Output} from '@angular/core';
 import {PackageCreationStore} from '../../package-creation.store';
 import {Template} from '../../mapping-models/CBAPacakge.model';
+import {TemplateInfo, TemplateStore} from '../../template.store';
 
 @Component({
     selector: 'app-templ-mapp-listing',
@@ -10,8 +11,12 @@ import {Template} from '../../mapping-models/CBAPacakge.model';
 export class TemplMappListingComponent implements OnInit {
     @Output() showCreationViewParentNotification = new EventEmitter<any>();
     private templates: Template;
+    private sourceCodeEditorContnet: string;
 
-    constructor(private packageCreationStore: PackageCreationStore) {
+    constructor(private packageCreationStore: PackageCreationStore, private templateStore: TemplateStore) {
+    }
+
+    ngOnInit() {
         this.packageCreationStore.state$.subscribe(cba => {
             if (cba.templates) {
                 this.templates = cba.templates;
@@ -19,11 +24,19 @@ export class TemplMappListingComponent implements OnInit {
         });
     }
 
-    ngOnInit() {
-    }
-
     openCreationView() {
         this.showCreationViewParentNotification.emit('tell parent to open create views');
     }
 
+    setSourceCodeEditor(key: string) {
+        this.packageCreationStore.state$.subscribe(cba => {
+            if (cba.templates) {
+                const fileContent = cba.templates.getValue(key);
+                const templateInfo = new TemplateInfo();
+                templateInfo.fileContent = fileContent;
+                templateInfo.fileName = key;
+                this.templateStore.changeTemplateInfo(templateInfo);
+            }
+        });
+    }
 }
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 83f3c84c8..f8cfe7a6a 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,9 @@
-<div *ngIf="!creationView">
-  <app-templ-mapp-listing  
-    (showCreationViewParentNotification)="openCreationView($event)">
-  </app-templ-mapp-listing>
+<div *ngIf="!listView">
+    <app-templ-mapp-listing
+            (showCreationViewParentNotification)="openCreationView($event)">
+    </app-templ-mapp-listing>
 </div>
 
-<div *ngIf="creationView">
-  <app-templ-mapp-creation></app-templ-mapp-creation>
+<div *ngIf="!creationView">
+    <app-templ-mapp-creation (showListViewParent)="openListView($event)"></app-templ-mapp-creation>
 </div>
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 7e9ae1639..7079f8404 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,20 +1,28 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
-  selector: 'app-template-mapping',
-  templateUrl: './template-mapping.component.html',
-  styleUrls: ['./template-mapping.component.css']
+    selector: 'app-template-mapping',
+    templateUrl: './template-mapping.component.html',
+    styleUrls: ['./template-mapping.component.css']
 })
 export class TemplateMappingComponent implements OnInit {
-  creationView = false;
+    creationView = true;
+    listView = false;
 
-  constructor() { }
+    constructor() {
+    }
 
-  ngOnInit() {
-  }
+    ngOnInit() {
+    }
 
-  openCreationView() {
-    this.creationView = true;
-  }
+    openCreationView() {
+        this.creationView = false;
+        this.listView = true;
+    }
+
+    openListView() {
+        this.listView = false;
+        this.creationView = false;
+    }
 
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts
new file mode 100644
index 000000000..b3a487bdc
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template.store.ts
@@ -0,0 +1,55 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2019 Orange. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+import {Injectable} from '@angular/core';
+
+import {Store} from '../../../../common/core/stores/Store';
+
+
+export class TemplateInfo {
+    fileName: string;
+    fileContent: string;
+
+
+    constructor() {
+        this.fileName = '';
+        this.fileContent = '';
+    }
+
+
+}
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TemplateStore extends Store<TemplateInfo> {
+
+
+    constructor() {
+        super(new TemplateInfo());
+    }
+
+    changeTemplateInfo(templateInfo: TemplateInfo) {
+        this.setState(templateInfo);
+    }
+
+
+}