enable user to add sources to the Dictionary

Issue-ID: CCSDK-3083

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

4 files changed, 122 insertions, 90 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 943707e6e..b60bc328a 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,7 +21,7 @@
     <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="Dictionary Name">
         </div>
         <!-- <div class="model-note-container error-message">
             Package name already exists with this version. Please enter a different name or enter different version
@@ -74,18 +74,17 @@
             <input type="input" [(ngModel)]="metaDataTab.libraryInstance" placeholder="Library Instance">
         </div>
     </div> -->
-    <!-- <div class="single-line-model">
-        <label class="label-name">Derived From</label>
+    <div class="single-line-model">
+        <label class="label-name">Updated By</label>
         <div class="label-input">
-            <input type="input" [(ngModel)]="metaDataTab.derivedFrom" placeholder="Derived From">
+            <input type="input" [(ngModel)]="metaDataTab['updated-by']" placeholder="Updated By">
         </div>
-    </div> -->
+    </div>
 
     <div class="single-line-model">
         <label class="label-name">Tags</label>
         <div class="label-input">
-            <input type="input" (keyup.enter)="addTag($event)"
-                placeholder="Ex., vDNS-CDS">
+            <input type="input" (keyup.enter)="addTag($event)" placeholder="Ex., vDNS-CDS">
 
         </div>
         <div class="model-note-container tag-notes">Seprate tags with comma or space</div>
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
index 26857e600..00d6e31d3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/resource-dictionary/resource-dictionary-creation/resource-dictionary-creation.component.html
@@ -115,7 +115,7 @@
                                 autofocus #nameit (focusout)="saveDictionaryToStore()">METADATA</a>
                             <a class="nav-item nav-link" id="nav-source-tab" data-toggle="tab" href="#nav-source"
                                 role="tab" aria-controls="nav-source" aria-selected="false">SOURCES</a>
-                            <a class="nav-item nav-link edit-button" id="nav-editor-tab" data-toggle="tab"
+                            <a class="nav-item nav-link edit-button" (click)="saveDictionaryToStore()" id="nav-editor-tab" data-toggle="tab"
                                 href="#nav-editor" role="tab" aria-controls="nav-editor" aria-selected="false">EDITOR
                                 MODE</a>
                         </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 14a0b6668..3eddaa79a 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
@@ -32,18 +32,20 @@
               (change)="onChange(item, $event.target.checked)">
             {{item.name}} -->
             <div class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input" id="customControlValidation1" required>
-              <label class="custom-control-label" for="customControlValidation1">{{item.name}}</label>
+              <input [disabled]="sourcesOptions.has(item.name)" [checked]="tempSources.has(item.name)"
+                (change)="setTempSources($event,item)" type="checkbox" class="custom-control-input"
+                id="input-{{item.name}}">
+              <label class="custom-control-label" for="input-{{item.name}}">{{item.name}}</label>
             </div>
           </div>
         </div>
       </div>
       <div class="row sourceOptionActions">
-        <div class="col">
+        <div (click)="selectAll()" class="col">
           <a>Select all</a>
         </div>
         <div class="col">
-          <button class="btn">Add to list</button>
+          <button (click)="addSources()" class="btn">Add to list</button>
         </div>
       </div>
     </div>
@@ -54,71 +56,30 @@
       <h5>Sources List</h5>
 
       <div class="accordion sourceListItems" id="accordionExample">
-        <div class="card">
+        <div class="card" *ngFor="let item of sourcesOptions | keyvalue; let i=index">
           <div class="card-header" id="headingOne">
             <h2 class="mb-0">
-              <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
-                aria-expanded="true" aria-controls="collapseOne">
+              <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 type="checkbox" class="custom-control-input" id="customControlValidation1" required>
-                  <label class="custom-control-label" for="customControlValidation1"></label>
+                  <input (change)="setToDeleteSources($event,item)" type="checkbox" class="custom-control-input"
+                    id="current-{{item.key}}" required>
+                  <label class="custom-control-label" for="current-{{item.key}}"></label>
                 </div>
-                Collapsible Group Item #1
+                {{item.key}}
               </button>
             </h2>
           </div>
 
-          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
-            <div class="card-body">
-              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
-              moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
-              Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
-              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
-              proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
-              aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-            </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="headingTwo">
-            <h2 class="mb-0">
-              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo"
-                aria-expanded="false" aria-controls="collapseTwo">
-                Collapsible Group Item #2
-              </button>
-            </h2>
-          </div>
-          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+          <div id="collapse-{{item.key}}" class="collapse" aria-labelledby="headingOne" data-parent="#accordionExample">
             <div class="card-body">
-              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
-              moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
-              Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
-              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
-              proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
-              aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
-            </div>
-          </div>
-        </div>
-        <div class="card">
-          <div class="card-header" id="headingThree">
-            <h2 class="mb-0">
-              <button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree"
-                aria-expanded="false" aria-controls="collapseThree">
-                Collapsible Group Item #3
-              </button>
-            </h2>
-          </div>
-          <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
-            <div class="card-body">
-              Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf
-              moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod.
-              Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda
-              shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea
-              proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim
-              aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+              <ace-editor [mode]="'json'" [autoUpdateContent]="true" [durationBeforeCallback]="1000"
+                [theme]="'tomorrow_night_bright'" #editor style="height:300px;">
+              </ace-editor>
             </div>
           </div>
         </div>
+
       </div>
 
       <!-- <div cdkDropList #doneList="cdkDropList" [cdkDropListData]="sourcesOptions" [cdkDropListConnectedTo]="[todoList]"
@@ -141,7 +102,7 @@
       </div> -->
       <div class="row deleteSource">
         <div class="col">
-          <a type="submit" class="">Delete Source</a>
+          <a type="button" (click)="deleteSource()" class="">Delete Source</a>
         </div>
       </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 1a950163e..25b81994a 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
@@ -34,16 +34,19 @@ export class SourcesTemplateComponent implements OnInit {
   lang = 'json';
   sources = {};
   option = [];
-  sourcesOptions = [];
   textValue: any;
   selectItem: boolean;
-  ddSource = [];
+  // ddSource = [];
   checked: boolean;
   searchText = '';
   text = '';
   selectedArray = [];
   metaDataTab: MetaData = new MetaData();
 
+  tempSources = new Map();
+  toDeleteSource = new Map<string, any>();
+  sourcesOptions = new Map<string, any>();
+
   constructor(
     private sourcesStore: SourcesStore,
     private dictionaryCreationService: DictionaryCreationService,
@@ -58,9 +61,9 @@ export class SourcesTemplateComponent implements OnInit {
       // 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"
+      //   "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) {
@@ -95,9 +98,13 @@ export class SourcesTemplateComponent implements OnInit {
   }
 
   saveSorcesDataToStore() {
-    console.log(this.ddSource);
+    const ddSource = [];
+    for (const key of this.sourcesOptions.keys()) {
+      ddSource.push(this.sourcesOptions.get(key));
+    }
+    console.log(ddSource);
     this.metaDataTab.sources = {};
-    for (const obj of this.ddSource) {
+    for (const obj of ddSource) {
       this.metaDataTab.sources = { ...this.metaDataTab.sources, ...obj };
     }
     //  this.metaDataTab.sources = { ...this.ddSource }
@@ -105,39 +112,104 @@ export class SourcesTemplateComponent implements OnInit {
     this.dictionaryCreationStore.changeMetaData(this.metaDataTab);
   }
 
-  drop(event: CdkDragDrop<string[]>) {
-    console.log('-------------');
-    // console.log(event);
+  setTempSources(event, item) {
+    console.log(event.target.checked);
+    if (event.target.checked) {
+      this.tempSources.set(item.name, item);
+    } else {
+      this.tempSources.delete(item.name);
+    }
+    console.log(this.tempSources);
+  }
 
-    if (event.previousContainer === event.container) {
-      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+  selectAll() {
+    if (this.tempSources.size === 0) {
+      for (const option of this.option) {
+        if (!this.sourcesOptions.has(option.name)) {
+          this.tempSources.set(option.name, option);
+        }
+      }
     } else {
-      transferArrayItem(event.previousContainer.data,
-        event.container.data,
-        event.previousIndex,
-        event.currentIndex);
+      this.tempSources = new Map<string, any>();
     }
+  }
 
-    console.log(this.sourcesOptions);
-    console.log(this.sources);
+  setToDeleteSources(event, item) {
+    console.log(event.target.checked);
+    if (event.target.checked) {
+      this.toDeleteSource.set(item.key, item);
+    } else {
+      this.toDeleteSource.delete(item.key);
+    }
 
-    this.ddSource = [];
+  }
 
-    const originalSources = this.sourcesOptions;
-    for (const key of originalSources) {
+  addSources() {
+    //  this.tempSources
+    const originalSources = this.tempSources;
+    for (const key of originalSources.keys()) {
       /* tslint:disable:no-string-literal */
-      this.ddSource.push({
-        [key.name]: {
-          type: key.value,
+      this.sourcesOptions.set(key, {
+        [key]: {
+          type: originalSources.get(key).value,
           properties: {}
         }
       });
 
     }
 
+    console.log(this.sourcesOptions);
+    this.tempSources.clear();
+    this.saveSorcesDataToStore();
+  }
+
+  deleteSource() {
+    console.log(this.toDeleteSource);
+    for (const key of this.toDeleteSource.keys()) {
+      console.log(key);
+      this.sourcesOptions.delete(key);
+    }
+    this.toDeleteSource = new Map<string, any>();
     this.saveSorcesDataToStore();
   }
 
+  // drop(event: CdkDragDrop<string[]>) {
+  //   console.log('-------------');
+  //   // console.log(event);
+
+  //   if (event.previousContainer === event.container) {
+  //     moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
+  //   } else {
+  //     transferArrayItem(event.previousContainer.data,
+  //       event.container.data,
+  //       event.previousIndex,
+  //       event.currentIndex);
+  //   }
+
+  //   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();
+  // }
+
+  getMapKey(map) {
+    return Object.assign({}, map.keys());
+  }
+
   searchDictionary(event: any) {
     this.searchQuery = event.target.value;
     this.searchQuery = this.searchQuery.trim();