create dictionary resource from metadata tab

enable the user to add source from the UI

Issue-ID: CCSDK-3083

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

5 files changed, 128 insertions, 85 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 92e6bce43..89a83a1ea 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
@@ -27,12 +27,14 @@ export class MetaData {
     @JsonProperty('updated-by')
     public updatedBy: string;
     public property: Property;
+    public sources: any;
 
     constructor() {
         this.name = '';
         this.tags = '';
         this.updatedBy = '';
         this.property = new Property();
+        this.sources = {};
     }
 }
 
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 add21e9e1..8e355449b 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
@@ -78,7 +78,7 @@
     <div class="single-line-model">
         <label class="label-name">Tags</label>
         <div class="label-input">
-            <input type="input" (keyup.enter)="addTag($event)" [(ngModel)]="metaDataTab.tags"
+            <input type="input" (keyup.enter)="addTag($event)"
                 placeholder="Ex., vDNS-CDS">
 
         </div>
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 631a0fffd..01df118d2 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
@@ -37,8 +37,6 @@ export class DictionaryMetadataComponent implements OnInit {
     errorMessage: string;
 
     constructor(
-        private route: ActivatedRoute,
-        private dictionaryCreationService: DictionaryCreationService,
         private dictionaryCreationStore: DictionaryCreationStore
     ) { }
 
@@ -67,6 +65,7 @@ export class DictionaryMetadataComponent implements OnInit {
 
     removeTag(value) {
         this.tags.delete(value);
+        this.mergeTags();
     }
 
 
@@ -74,15 +73,22 @@ export class DictionaryMetadataComponent implements OnInit {
         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 + ', ';
-            });
+            // merge
+            this.mergeTags();
         }
     }
 
+    mergeTags() {
+        let tag = '';
+        this.tags.forEach((val, index) => {
+            tag += val + ', ';
+        });
+        this.metaDataTab.tags = tag.trim();
+        this.saveMetaDataToStore();
+    }
+
     saveMetaDataToStore() {
         console.log(this.metaDataTab);
         this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
index b274ce95d..f6150c95b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/sources-template/sources-template.component.html
@@ -18,68 +18,59 @@
 * ============LICENSE_END=========================================================
 */-->
 <div class="col-11">
-   <div class= "row ">
-       <div class="card creat-card source1">
-           <h5 class="label-name"> Sources Options</h5>
-           <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i>
-            <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources">
-          </div>
-           
-       <div class="example-container">
-        <div
-          cdkDropList
-          #todoList="cdkDropList"
-          [cdkDropListData]="option"
-          [cdkDropListConnectedTo]="[doneList]"
-          class="example-list"
-          (cdkDropListDropped)="drop($event)">
+  <div class="row ">
+    <div class="card creat-card source1">
+      <h5 class="label-name"> Sources Options</h5>
+      <div class="searchBox row"><i class="searchButton1 col-1" aria-hidden="true"></i>
+        <input class="searchText col-8" [(ngModel)]="searchText" type="input" placeholder="filter sources">
+      </div>
+
+      <div class="example-container">
+        <div cdkDropList #todoList="cdkDropList" [cdkDropListData]="option" [cdkDropListConnectedTo]="[doneList]"
+          class="example-list" (cdkDropListDropped)="drop($event)">
           <div class="example-box card creat-card" *ngFor="let item of option| search :searchText" cdkDrag>
-            <input type="checkbox" class="checkbox" [(ngModel)]="checked" (change)="onChange(item, $event.target.checked)">
+            <input type="checkbox" class="checkbox" [(ngModel)]="checked"
+              (change)="onChange(item, $event.target.checked)">
             {{item.name}}
           </div>
-          
+
         </div>
-       
+
       </div>
       <div class="footer row">
         <a class="select-button col-sm-05">Select all</a>
-        <button  class="action-button1 col-sm-04" >Add to list</button>
+        <button class="action-button1 col-sm-04">Add to list</button>
       </div>
-   </div>
-    
-      <div class="card creat-card source">
-        <h5 class="label-name">Sources List</h5>
-        <div class="example-container2 card creat-card"> 
-            <div
-              cdkDropList
-              #doneList="cdkDropList"
-              [cdkDropListData]="sourcesOptions"
-              [cdkDropListConnectedTo]="[todoList]"
-              class="example-list1"
-              (cdkDropListDropped)="drop($event)">
-              
-              <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
-                <input type="checkbox" value="item.name">
-                <mat-expansion-panel class="expansion-panel">
-                    <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
-                      <mat-panel-title>  
-                    {{item.name}}
-                      </mat-panel-title>
-                    </mat-expansion-panel-header>
-                    <br>
-                      <ace-editor [(text)]=item.value [mode]="'javascript'" [autoUpdateContent]="true"
-                        [durationBeforeCallback]="1000" (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
-                      </ace-editor>
-                  </mat-expansion-panel> 
-              </div>
-              
-            </div>
-            
-          </div>
-          <div>
-            <a type="submit" class="delete">Delete</a>
+    </div>
+
+    <div class="card creat-card source">
+      <h5 class="label-name">Sources List</h5>
+      <div class="example-container2 card creat-card">
+        <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions"
+          [cdkDropListConnectedTo]="[todoList]" class="example-list1" (cdkDropListDropped)="drop($event)">
+
+          <div class="example-box1" *ngFor="let item of sourcesOptions" cdkDrag>
+            <input type="checkbox" value="item.name">
+            <mat-expansion-panel class="expansion-panel">
+              <mat-expansion-panel-header [collapsedHeight]="'23px'" [expandedHeight]="'23px'">
+                <mat-panel-title>
+                  {{item.name}}
+                </mat-panel-title>
+              </mat-expansion-panel-header>
+              <br>
+              <ace-editor  [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
+                (textChanged)="textChanged($event,item)" [theme]="'tomorrow_night_bright'" #editor
+                style="height:300px;">
+              </ace-editor>
+            </mat-expansion-panel>
           </div>
-      </div>     
-</div>
-</div>
 
+        </div>
+
+      </div>
+      <div>
+        <a type="submit" class="delete">Delete</a>
+      </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/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 bec8c4bf3..1a950163e 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
@@ -21,6 +21,8 @@ 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';
+import { DictionaryCreationStore } from '../dictionary-creation.store';
+import { MetaData } from '../../model/metaData.model';
 
 @Component({
   selector: 'app-sources-template',
@@ -40,9 +42,12 @@ export class SourcesTemplateComponent implements OnInit {
   searchText = '';
   text = '';
   selectedArray = [];
+  metaDataTab: MetaData = new MetaData();
+
   constructor(
     private sourcesStore: SourcesStore,
-    private dictionaryCreationService: DictionaryCreationService
+    private dictionaryCreationService: DictionaryCreationService,
+    private dictionaryCreationStore: DictionaryCreationStore
   ) {
 
   }
@@ -66,16 +71,44 @@ export class SourcesTemplateComponent implements OnInit {
       }
 
     });
+
+    this.dictionaryCreationStore.state$.subscribe(element => {
+      console.log('################');
+      console.log(this.metaDataTab);
+      if (element && element.metaData) {
+        this.metaDataTab = element.metaData;
+        this.addSourcesInUI();
+      }
+    });
+  }
+
+  addSourcesInUI() {
+    // add sources from json to UI
+    const originalSources = this.sourcesOptions;
+    // for (const key of this.sourcesOptions) {
+    // this.sourcesOptions;
+    for (const source in this.metaDataTab.sources) {
+      if (source) {
+        console.log(source);
+      }
+    }
   }
 
   saveSorcesDataToStore() {
-    this.sourcesStore.saveSources(this.ddSource);
+    console.log(this.ddSource);
+    this.metaDataTab.sources = {};
+    for (const obj of this.ddSource) {
+      this.metaDataTab.sources = { ...this.metaDataTab.sources, ...obj };
+    }
+    //  this.metaDataTab.sources = { ...this.ddSource }
+    console.log(this.metaDataTab.sources);
+    this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
   }
 
   drop(event: CdkDragDrop<string[]>) {
     console.log('-------------');
-    console.log(event);
-    this.ddSource = [];
+    // console.log(event);
+
     if (event.previousContainer === event.container) {
       moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
     } else {
@@ -85,18 +118,24 @@ export class SourcesTemplateComponent implements OnInit {
         event.currentIndex);
     }
 
-    for (const key2 in this.sources) {
-      if (key2) {
-        const originalSources = this.sourcesOptions;
-        for (const key of originalSources) {
-          /* tslint:disable:no-string-literal */
-          if (key.name === key2['name']) {
-            const obj = `{${key.name}: ${key.value}}`;
-            this.ddSource.push(obj);
-          }
+    console.log(this.sourcesOptions);
+    console.log(this.sources);
+
+    this.ddSource = [];
+
+    const originalSources = this.sourcesOptions;
+    for (const key of originalSources) {
+      /* tslint:disable:no-string-literal */
+      this.ddSource.push({
+        [key.name]: {
+          type: key.value,
+          properties: {}
         }
-      }
+      });
+
     }
+
+    this.saveSorcesDataToStore();
   }
 
   searchDictionary(event: any) {
@@ -113,15 +152,20 @@ export class SourcesTemplateComponent implements OnInit {
   }
 
   textChanged(event, item) {
-    const editedData = JSON.parse(event);
-    const originalSources = this.sources;
-    for (const key in originalSources) {
-      if (key === item.name) {
-        this.sources[key] = editedData;
-      }
-    }
-    this.option = [];
-    this.sourcesStore.changeSources(this.sources);
+    // const editedData = JSON.parse(event);
+    // const originalSources = this.sources;
+    // for (const key in originalSources) {
+    //   if (key === item.name) {
+    //     this.sources[key] = editedData;
+    //   }
+    // }
+    // this.option = [];
+    // this.sourcesStore.changeSources(this.sources);
+
+    console.log(item);
+    console.log(event);
+
+    // this.metaDataTab.sources[item.name].properties = editedData;
   }
 
 }