enable 2-way binding between metadata and editor tabs

Issue-ID: CCSDK-3083

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

6 files changed, 109 insertions, 43 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
index 26420882c..92e6bce43 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/model/metaData.model.ts
@@ -1,3 +1,5 @@
+import { JsonObject, JsonProperty } from 'json2typescript';
+
 /*
 * ============LICENSE_START=======================================================
 * ONAP : CDS
@@ -17,17 +19,46 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
-
+@JsonObject()
 export class MetaData {
+    @JsonProperty('name')
     public name: string;
-    public dataType: string;
-    public description: string;
-    public entrySchema: string;
-    public updatedBy: string;
     public tags: string;
-    public required: string;
+    @JsonProperty('updated-by')
+    public updatedBy: string;
+    public property: Property;
 
-    public createdDate: string;
-    public libraryInstance: string;
-    public derivedFrom: string;
+    constructor() {
+        this.name = '';
+        this.tags = '';
+        this.updatedBy = '';
+        this.property = new Property();
+    }
+}
+
+@JsonObject()
+export class Property {
+    public description: string;
+    type: string;
+    required: boolean;
+    @JsonProperty('entry_schema')
+    // tslint:disable-next-line: variable-name
+    entry_schema: EntrySchema = new EntrySchema();
+
+    constructor() {
+        this.description = '';
+        this.type = '';
+        this.entry_schema = new EntrySchema();
+        this.required = false;
+    }
+
+}
+@JsonObject()
+export class EntrySchema {
+    type: string;
+    constraints: [];
+    constructor() {
+        this.type = '';
+        this.constraints = [];
+    }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
index 63725a228..a55159ad5 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-editor/dictionary-editor.component.ts
@@ -17,6 +17,7 @@
 * limitations under the License.
 * ============LICENSE_END=========================================================
 */
+import { JsonPipe } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { DictionaryCreationService } from '../dictionary-creation.service';
 import { DictionaryCreationStore } from '../dictionary-creation.store';
@@ -30,11 +31,17 @@ export class DictionaryEditorComponent implements OnInit {
   text = '';
   constructor(
     private dictionaryStore: DictionaryCreationStore,
-    private dictionaryService: DictionaryCreationService
+    private dictionaryService: DictionaryCreationService,
+    private pipe: JsonPipe
   ) {
   }
 
   ngOnInit() {
+    this.dictionaryStore.state$.subscribe(element => {
+      if (element && element.metaData) {
+        this.text = this.pipe.transform(element.metaData);
+      }
+    });
   }
 
   textChanged(event) {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
index bea6081c0..add21e9e1 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.html
@@ -21,10 +21,9 @@
     <div class="single-line-model">
         <label class="label-name">Name</label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.name"
-                placeholder="Topology name.vLB.CDS">
+            <input type="input" [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
         </div>
-         <!-- <div class="model-note-container error-message">
+        <!-- <div class="model-note-container error-message">
             Package name already exists with this version. Please enter a different name or enter different version
             number.
         </div>  -->
@@ -41,39 +40,40 @@
     <div class="single-line-model">
         <label class="label-name">Entry Schema</label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.entrySchema" placeholder="Entry Schema">
+            <input type="input" [(ngModel)]="metaDataTab.property.entry_schema.type" placeholder="Entry Schema">
         </div>
     </div>
     <div class="single-line-model">
         <label class="label-name">Data Type</label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.dataType" placeholder="Data Type">
+            <input type="input" [(ngModel)]="metaDataTab.property.type" placeholder="Data Type">
         </div>
     </div>
     <div class="single-line-model">
         <label class="label-name">Description</label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.description" placeholder="Descripe the package">
+            <input type="input" [(ngModel)]="metaDataTab.property.description" placeholder="Descripe the package">
         </div>
     </div>
     <div class="single-line-model">
         <label class="label-name">Required</label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.updatedBy" placeholder="required">
+            <input type="checkbox" [checked]="metaDataTab.property.required" style="width: auto;"
+                (change)="metaDataTab.property.required = !metaDataTab.property.required" placeholder="required">
         </div>
     </div>
-    <div class="single-line-model">
+    <!-- <div class="single-line-model">
         <label class="label-name">Library Instance</label>
         <div class="label-input">
             <input type="input" [(ngModel)]="metaDataTab.libraryInstance" placeholder="Library Instance">
         </div>
-    </div>
-    <div class="single-line-model">
+    </div> -->
+    <!-- <div class="single-line-model">
         <label class="label-name">Derived From</label>
         <div class="label-input">
             <input type="input" [(ngModel)]="metaDataTab.derivedFrom" placeholder="Derived From">
         </div>
-    </div>
+    </div> -->
 
     <div class="single-line-model">
         <label class="label-name">Tags</label>
@@ -88,4 +88,4 @@
                     class="fa fa-times-circle"></i></span>
         </div>
     </div>
-</div> 
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
index caeac83f1..631a0fffd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/dictionary-metadata/dictionary-metadata.component.ts
@@ -44,36 +44,47 @@ export class DictionaryMetadataComponent implements OnInit {
 
     ngOnInit() {
         this.dictionaryCreationStore.state$.subscribe(element => {
+            console.log(this.metaDataTab);
             if (element && element.metaData) {
-                this.metaDataTab.name = element.metaData.name;
-                this.metaDataTab.description = element.metaData.description;
-                this.metaDataTab.dataType = element.metaData.dataType;
-                this.metaDataTab.tags = element.metaData.tags;
-                this.metaDataTab.entrySchema = element.metaData.entrySchema;
-                this.metaDataTab.required = element.metaData.required;
-                this.metaDataTab.libraryInstance = element.metaData.libraryInstance;
-                this.metaDataTab.derivedFrom = element.metaData.derivedFrom;
-                console.log(element);
+                this.metaDataTab = element.metaData;
+                this.metaDataTab.property.entry_schema = element.metaData.property.entry_schema;
+                this.tags = new Set(element.metaData.tags.split(','));
+                this.tags.delete('');
+                this.tags.delete(' ');
+
+                //  console.log(element);
+                // console.log(element.metaData.property['entry_schema']);
             }
         });
-        console.log(this.metaDataTab.name);
+
     }
 
+    // getSources() {
+    //     this.dictionaryCreationService.getSources().subscribe(res => {
+    //         console.log(res);
+    //     });
+    // }
+
     removeTag(value) {
         this.tags.delete(value);
     }
 
+
     addTag(event) {
         const value = event.target.value;
         console.log(value);
         if (value && value.trim().length > 0) {
+            let tag = '';
             event.target.value = '';
             this.tags.add(value);
+            this.tags.forEach(val => {
+                tag += val + ', ';
+            });
         }
     }
 
     saveMetaDataToStore() {
         console.log(this.metaDataTab);
-     //   this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
+        this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
index fb454ed1f..8eb126d21 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.ts
@@ -66,6 +66,7 @@ export class ResourceDictionaryCreationComponent implements OnInit {
   }
 
   saveDictionaryToStore() {
+    this.metadataTabComponent.saveMetaDataToStore();
     // console.log('00000000000');
     // this.dictionaryCreationStore.getSources();
     // this.dictionaryCreationStore.state$.subscribe(dd => {
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts
index 1b70a17ef..bec8c4bf3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.ts
@@ -20,6 +20,7 @@
 import { Component, OnInit } from '@angular/core';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { SourcesStore } from './sources.store';
+import { DictionaryCreationService } from '../dictionary-creation.service';
 
 @Component({
   selector: 'app-sources-template',
@@ -29,7 +30,7 @@ import { SourcesStore } from './sources.store';
 export class SourcesTemplateComponent implements OnInit {
   private searchQuery = '';
   lang = 'json';
-  sources = [];
+  sources = {};
   option = [];
   sourcesOptions = [];
   textValue: any;
@@ -39,20 +40,32 @@ export class SourcesTemplateComponent implements OnInit {
   searchText = '';
   text = '';
   selectedArray = [];
-  constructor(private sourcesStore: SourcesStore) {
-    this.sourcesStore.state$.subscribe(sources => {
-      this.sources = sources.sources;
+  constructor(
+    private sourcesStore: SourcesStore,
+    private dictionaryCreationService: DictionaryCreationService
+  ) {
+
+  }
+
+  ngOnInit() {
+    //  this.sourcesStore.getAllSources();
+    this.dictionaryCreationService.getSources().subscribe(sources => {
+      // console.log(sources);
+      this.sources = sources[0];
+      // this.sources = {
+      //   "input": "source-input", "rest": "source-rest", "default":"source-default", "capability": "source-capability",
+      // "sdnc": "source-rest", "vault-data": "source-rest", "processor-db": "source-db", "aai-data": "source-rest",
+      // "script": "source-capability"
+      // };
       for (const key in this.sources) {
         if (key) {
-          const sourceObj = { name: key, value: JSON.stringify(this.sources[key]) };
+          console.log(key + ' - ' + this.sources[key]);
+          const sourceObj = { name: key, value: this.sources[key] };
           this.option.push(sourceObj);
         }
       }
-    });
-  }
 
-  ngOnInit() {
-    this.sourcesStore.getAllSources();
+    });
   }
 
   saveSorcesDataToStore() {
@@ -60,6 +73,8 @@ export class SourcesTemplateComponent implements OnInit {
   }
 
   drop(event: CdkDragDrop<string[]>) {
+    console.log('-------------');
+    console.log(event);
     this.ddSource = [];
     if (event.previousContainer === event.container) {
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
@@ -74,7 +89,8 @@ export class SourcesTemplateComponent implements OnInit {
       if (key2) {
         const originalSources = this.sourcesOptions;
         for (const key of originalSources) {
-          if (key.name === key2) {
+          /* tslint:disable:no-string-literal */
+          if (key.name === key2['name']) {
             const obj = `{${key.name}: ${key.value}}`;
             this.ddSource.push(obj);
           }