enable source code editing and adding viewing feature

Issue-ID: CCSDK-2113

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

10 files changed, 182 insertions, 27 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
index 804aad057..f07258439 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
@@ -1,7 +1,133 @@
-<app-header>
-</app-header>
-<p>package-viewing works!
 
+<app-header></app-header>
+
+<div class="new-wrapper">
+    <div class="container-fluid main-container">
+        <header class="page-title">
+            <div class="row">
+                <h2 class="col m-0">
+                    <ul class="breadcrumb-header">
+                        <li>CBA Packages</li>
+                        <li>Package Name</li>
+                    </ul>
+                </h2>
+               <!-- <div class="col d-flex justify-content-end header-button-save">
+                    <button class="float btn btn-sm btn-outline-secondary" disabled>Discard Changes</button>
+                    <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
+                </div>-->
+            </div>
+        </header>
+
+
+
+        <div class="container-fluid body-container">
+
+            <div class="container">
+               <!-- <div class="creat-action-container">
+                    <a href="#" class="action-button">
+                        <i class="icon-clone" aria-hidden="true"></i>
+                        <span>Clone</span>
+                    </a>
+
+                    <a href="#" class="action-button">
+                        <i class="icon-archive" aria-hidden="true"></i>
+                        <span>Archive</span>
+                    </a>
+
+                    <a href="#" class="action-button delete">
+                        <i class="icon-delete" aria-hidden="true"></i>
+                        <span>Delete</span>
+                    </a>
+                </div>-->
+
+                <div class="card creat-card view-package-container">
+                    <div class="row">
+                        <div class="col-8">
+                            <div class="row">
+                                <div class="col d-flex">
+                                    <i class="package-type-icon icon-designer-mode"></i>
+                                    <div class="package-name-container">
+                                        <div class="row">
+                                            <div class="col-12 package-name deployed">
+                                                Package Name
+                                                <span>.vLB.CDS</span>
+                                                <i class="icon-deploy"></i>
+                                            </div>
+                                            <div class="col-12 package-description">
+                                                Last modified Oct 4, 2019 03:48 PM By Ahmed Abbas
+                                            </div>
+                                        </div>
+
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="col-4 package-view-button">
+                            <button class="btn btn-sm btn-outline-secondary"><i class="fa fa-play-circle"></i> Deploy</button>
+                            <button class="btn btn-sm btn-primary">Designer Mode</button>
+                        </div>
+                    </div>
+
+                </div>
+
+                <nav class="row">
+                    <!--Nav Tabs-->
+                    <div class="col">
+                        <div class="nav nav-tabs " id="nav-tab" role="tablist">
+                            <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab"
+                               href="#nav-metadata"
+                               role="tab" aria-controls="nav-metadata"
+                               aria-selected="true">METADATA</a>
+                            <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template"
+                               role="tab" aria-controls="nav-template"
+                               aria-selected="false">TEMPLATE & MAPPING</a>
+                            <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts"
+                               role="tab" aria-controls="nav-scripts"
+                               aria-selected="false">SCRIPTS</a>
+                            <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports"
+                               role="tab" aria-controls="nav-imports"
+                               aria-selected="false">IMPORTS</a>
+                            <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab"
+                               href="#nav-authentication"
+                               role="tab" aria-controls="nav-authentication"
+                               aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a>
+                        </div>
+                    </div>
+
+                </nav>
+                <div class="row mt-4">
+                    <div class="col">
+                        <div class="tab-content" id="nav-tabContent">
+                            <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
+                                 aria-labelledby="nav-metadata-tab">
+                                <app-metadata-tab></app-metadata-tab>
+                            </div>
+                            <div class="tab-pane fade" id="nav-template" role="tabpanel"
+                                 aria-labelledby="nav-template-tab">
+                                <app-template-mapping></app-template-mapping>
+                            </div>
+                            <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
+                                 aria-labelledby="nav-scripts-tab">
+                                <app-scripts-tab></app-scripts-tab>
+                            </div>
+                            <div class="tab-pane fade" id="nav-imports" role="tabpanel"
+                                 aria-labelledby="nav-imports-tab">
+                                <app-imports-tab></app-imports-tab>
+
+                            </div>
+                            <div class="tab-pane fade" id="nav-authentication" role="tabpanel"
+                                 aria-labelledby="nav-authentication-tab">
+                                <div class="card creat-card">
+                                    <div class="editor-container">
+                                        <app-dsl-definitions-tab></app-dsl-definitions-tab>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
 
-    {{viewedPackage!.artifactName}}}
-</p>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
index 84fdafb36..b08ea3e4f 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts
@@ -2,6 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute} from '@angular/router';
 import {PackageStore} from './package.store';
 import {BluePrintDetailModel} from '../model/BluePrint.detail.model';
+import {CBAPackage} from '../package-creation/mapping-models/CBAPacakge.model';
 
 
 @Component({
@@ -18,6 +19,8 @@ export class ConfigurationDashboardComponent implements OnInit {
         this.configurationStore.getPagedPackages(id);
         this.configurationStore.state$.subscribe(
             el => {
+                const cbaPackage = new CBAPackage();
+
                 if (el && el.configuration) {
                     this.viewedPackage = el.configuration;
                 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
index 51d0e9db1..ab280fd10 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.service.ts
@@ -17,6 +17,5 @@ export class ConfigurationDashboardService {
 
     getBluePrintModel(id: string): Observable<BluePrintDetailModel> {
         return this.api.getOne(BlueprintURLs.getOneBlueprint + '/' + id);
-
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
index 344e7f599..63d392e35 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.html
@@ -47,7 +47,7 @@
                 <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
                     data-parent="#accordion">
                     <div class="card-body">
-                        <ace-editor [(text)]="file.value" [mode]="'json'" [autoUpdateContent]="true"
+                        <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'json'" [autoUpdateContent]="true"
                             [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
                             style="height:300px;">
                         </ace-editor>
@@ -130,4 +130,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
index 106fe3090..bc31e6c25 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
-import { PackageCreationStore } from '../package-creation.store';
-import { PackageCreationUtils } from '../package-creation.utils';
+import {Component, OnInit} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageCreationUtils} from '../package-creation.utils';
 
 
 @Component({
@@ -74,4 +74,8 @@ export class ImportsTabComponent implements OnInit {
     resetTheUploadedFiles() {
         this.uploadedFiles = [];
     }
+
+    textChanges(code: any, key: string) {
+        this.packageCreationStore.addDefinition(key, code);
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
index 2f8ebcc7c..c71e2564a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.ts
@@ -1,7 +1,8 @@
-import { Component, OnInit } from '@angular/core';
-import { PackageCreationService } from '../package-creation.service';
-import { MetaDataTabModel } from '../mapping-models/metadata/MetaDataTab.model';
-import { PackageCreationStore } from '../package-creation.store';
+import {Component, OnInit} from '@angular/core';
+import {PackageCreationService} from '../package-creation.service';
+import {MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageStore} from '../../configuration-dashboard/package.store';
 
 
 @Component({
@@ -15,13 +16,14 @@ export class MetadataTabComponent implements OnInit {
     tags = new Set<string>();
     customKeysMap = new Map();
     modes: object[] = [
-        { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' },
-        { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' },
-        { name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode' }];
+        {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+        {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'},
+        {name: 'Generic Script Mode', style: 'mode-icon icon-generic-script-mode'}];
     private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
     private errorMessage: string;
 
-    constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore) {
+    constructor(private packageCreationService: PackageCreationService, private packageCreationStore: PackageCreationStore,
+                private packageStore: PackageStore) {
 
     }
 
@@ -29,12 +31,22 @@ export class MetadataTabComponent implements OnInit {
         this.metaDataTab.templateTags = this.tags;
         this.metaDataTab.mapOfCustomKey = this.customKeysMap;
         this.packageCreationStore.changeMetaData(this.metaDataTab);
+
+        this.packageStore.state$.subscribe(element => {
+            if (element && element.configuration) {
+                this.metaDataTab.name = element.configuration.artifactName;
+                this.metaDataTab.version = element.configuration.artifactVersion;
+                this.metaDataTab.tags = element.configuration.tags;
+                this.metaDataTab.description = element.configuration.artifactDescription;
+            }
+        });
     }
 
     removeTag(value) {
         // console.log(event);
         this.tags.delete(value);
     }
+
     addTag(event) {
         const value = event.target.value;
         console.log(value);
@@ -48,6 +60,7 @@ export class MetadataTabComponent implements OnInit {
         console.log(event);
         this.customKeysMap.delete(key);
     }
+
     addCustomKey() {
         // tslint:disable-next-line: no-string-literal
         const key = document.getElementsByClassName('mapKey')[0];
@@ -64,6 +77,7 @@ export class MetadataTabComponent implements OnInit {
             value['value'] = '';
         }
     }
+
     validatePackageNameAndVersion() {
         if (this.metaDataTab.name && this.metaDataTab.version) {
             this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
index 824152035..54491488e 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html
@@ -30,7 +30,7 @@
                 <div [attr.aria-labelledby]="'head-script-'+mapIndex" [id]="'id-script-'+mapIndex" class="collapse"
                     data-parent="#accordion-script">
                     <div class="card-body">
-                        <ace-editor [(text)]="file.value" [mode]="'kotlin'" [autoUpdateContent]="true"
+                        <ace-editor [(text)]="file.value"  (textChange)="textChanges($event,file.key)"  [mode]="'kotlin'" [autoUpdateContent]="true"
                             [durationBeforeCallback]="1000" [theme]="'tomorrow_night_bright'" #editor
                             style="height:300px;">
                         </ace-editor>
@@ -91,4 +91,4 @@
             </div>
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
index eee291bba..c70109fc5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
-import { FileSystemFileEntry, NgxFileDropEntry } from 'ngx-file-drop';
-import { PackageCreationStore } from '../package-creation.store';
-import { PackageCreationUtils } from '../package-creation.utils';
+import {Component, OnInit} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageCreationUtils} from '../package-creation.utils';
 import 'ace-builds/src-noconflict/ace';
 import 'ace-builds/webpack-resolver';
 
@@ -76,4 +76,8 @@ export class ScriptsTabComponent implements OnInit {
     resetTheUploadedFiles() {
         this.uploadedFiles = [];
     }
+
+    textChanges(code: any, key: string) {
+        this.packageCreationStore.addScripts(key, code);
+    }
 }
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 07c88c330..c3a36c9cb 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
@@ -61,7 +61,7 @@
                         File</a></div>
                     <div class="editor-container">
                         <app-source-editor
-                                           [(text)]="templateInfo.fileContent"></app-source-editor>
+                                (textChange)="textChanges($event,templateInfo.fileName)"   [(text)]="templateInfo.fileContent"></app-source-editor>
                     </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 836b0f5a6..d63eb2a38 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
@@ -113,8 +113,13 @@ export class TemplMappCreationComponent implements OnInit {
     }
 
     initTemplateMappingTableFromCurrentTemplate() {
+        console.log('happend');
         if (this.variables && this.variables.length > 0) {
             this.packageCreationStore.getTemplateAndMapping(this.variables);
         }
     }
+
+    textChanges(code: any, fileName: string) {
+        this.packageCreationStore.addTemplate(fileName, code);
+    }
 }