add properties for dictionary sources

Issue-ID: CCSDK-3093

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

3 files changed, 40 insertions, 14 deletions

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 b60bc328a..ea8d31223 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
@@ -59,7 +59,8 @@
         <label class="label-name">Required</label>
         <div class="label-input">
             <div class="custom-control custom-checkbox">
-                <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
+                <input type="checkbox" [(ngModel)]="metaDataTab.property.required" [ngModelOptions]="{standalone: true}"
+                    class="custom-control-input" id="customControlValidation1" required>
                 <label class="custom-control-label p-0" for="customControlValidation1">True</label>
             </div>
         </div>
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 3eddaa79a..02dfe2186 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
@@ -56,11 +56,12 @@
       <h5>Sources List</h5>
 
       <div class="accordion sourceListItems" id="accordionExample">
-        <div class="card" *ngFor="let item of sourcesOptions | keyvalue; let i=index">
+        <div class="card" *ngFor="let item of sourcesOptions | keyvalue; let i=index; trackBy:identify">
           <div class="card-header" id="headingOne">
             <h2 class="mb-0">
-              <button class="btn btn-link" type="button" data-toggle="collapse" attr.data-target="#collapse-{{item.key}}"
-                aria-expanded="true" attr.aria-controls="collapse-{{item.key}}">
+              <button class="btn btn-link" type="button" data-toggle="collapse"
+                attr.data-target="#collapse-{{item.key}}" aria-expanded="true"
+                attr.aria-controls="collapse-{{item.key}}">
                 <div class="custom-control custom-checkbox">
                   <input (change)="setToDeleteSources($event,item)" type="checkbox" class="custom-control-input"
                     id="current-{{item.key}}" required>
@@ -73,8 +74,8 @@
 
           <div id="collapse-{{item.key}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
             <div class="card-body">
-              <ace-editor [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
-                [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
+              <ace-editor [mode]="'json'" (textChange)="addProperties(item,editor.text)" [autoUpdateContent]="true"
+                [durationBeforeCallback]="500" [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
               </ace-editor>
             </div>
           </div>
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 25b81994a..5e67c5e4a 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
@@ -134,6 +134,23 @@ export class SourcesTemplateComponent implements OnInit {
     }
   }
 
+  addProperties(item, text) {
+    console.log(text);
+    console.log(item);
+    if (text && text.trim()) {
+      // Get source Object
+      const sourceObj = this.sourcesOptions.get(item.key);
+      sourceObj[item.key]['properties'] = { ...JSON.parse(text) };
+
+      console.log(sourceObj);
+
+      this.sourcesOptions.set(item.key, sourceObj);
+      this.saveSorcesDataToStore();
+
+      console.log(this.sourcesOptions);
+    }
+  }
+
   setToDeleteSources(event, item) {
     console.log(event.target.checked);
     if (event.target.checked) {
@@ -144,18 +161,25 @@ export class SourcesTemplateComponent implements OnInit {
 
   }
 
+
+  identify(index, item) {
+    return item.key;
+  }
+
+
   addSources() {
     //  this.tempSources
     const originalSources = this.tempSources;
     for (const key of originalSources.keys()) {
-      /* tslint:disable:no-string-literal */
-      this.sourcesOptions.set(key, {
-        [key]: {
-          type: originalSources.get(key).value,
-          properties: {}
-        }
-      });
-
+      if (!this.sourcesOptions.has(key)) {
+        /* tslint:disable:no-string-literal */
+        this.sourcesOptions.set(key, {
+          [key]: {
+            type: originalSources.get(key).value,
+            properties: {}
+          }
+        });
+      }
     }
 
     console.log(this.sourcesOptions);