Sources template changes

Change-Id: Ib241a364e84f52c661ad7db8c603a9b047743e24
Issue-ID: CCSDK-804
Signed-off-by: sp00501638 <sp00501638@techmahindra.com>

3 files changed, 54 insertions, 24 deletions

diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html
index 903c6d319..91a22b8b4 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html
@@ -24,15 +24,16 @@
       [cdkDropListData]="sourcesOptions"
       class="sources-list"
       (cdkDropListDropped)="drop($event)">
-      	<div class="sources-box" *ngFor="let item of sourcesOptions" cdkDrag>
+      	<div class="sources-box" *ngFor="let item of sourcesOptions;let i = index" cdkDrag>
       		<mat-expansion-panel class="expansion-panel">
       			<mat-expansion-panel-header>
         			<mat-panel-title>
           				{{item}}
         			</mat-panel-title>
       			</mat-expansion-panel-header>
-     		 	<json-editor [options]="options" [data]="selected(item)" on-change="onChange()"></json-editor>
+     		 	<json-editor [options]="options" [data]="selected(item)" on-change="onChange(item,$event)"></json-editor>
    			 </mat-expansion-panel>
+   			 <button matSuffix mat-icon-button (click)="delete(item,i)"><mat-icon class="icon">delete</mat-icon></button>
     	</div>
     </div>
   </div>
@@ -52,5 +53,8 @@
       (cdkDropListDropped)="drop($event)">
       <div class="options-box" *ngFor="let item of option | search :searchText" cdkDrag>{{item}}</div>
     </div>
-  </div>
+   </div>
+   <div> 
+    	<button mat-button class="matStepNextBtn" (click)="UploadSourcesData()">Save Sources Data</button>
+   </div>
 </div>
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss
index a76b60aa8..5bec796e8 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.scss
@@ -110,4 +110,14 @@
   overflow: hidden;

   display: block;

   width: 100%;

-  }
\ No newline at end of file
+ }

+ .matStepNextBtn{

+    color:white;

+    background:#3f51b5; 

+    margin-top: 10px; 

+    position: absolute;

+    border-radius: 1em;

+} 

+.icon{

+color: red;

+}
\ No newline at end of file
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts
index c43d1debd..517add87b 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.ts
@@ -18,7 +18,7 @@
 * ============LICENSE_END=========================================================
 */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, OnInit, ViewChild, EventEmitter, Output } from '@angular/core';
 import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 import { IResources } from 'src/app/common/core/store/models/resources.model';
 import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model';
@@ -36,52 +36,68 @@ import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
   styleUrls: ['./sources-template.component.scss']
 })
 export class SourcesTemplateComponent implements OnInit {
-//    rdState: Observable<IResourcesState>;
-//    resources: IResources;
-//    todo = [];
-//    sources:ISourcesData; 
-//    sourcesOptions = [];
 
     @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
-    options = new JsonEditorOptions();
-    
+    options = new JsonEditorOptions(); 
     rdState: Observable<IResourcesState>;
     resources: IResources;
     option = ['mdsal','default'];
     sources:ISourcesData; 
     sourcesOptions = [];
     sourcesData = [];
-    
+    @Output() resourcesData = new EventEmitter();  
+ 
  constructor(private store: Store<IAppState>) {
-   this.rdState = this.store.select('resources');
-      this.options.mode = 'text';
+    this.rdState = this.store.select('resources');
+    this.options.mode = 'text';
     this.options.modes = [ 'text', 'tree', 'view'];
-    this.options.statusBar = false;
-    this.options.onChange = () => console.log(this.editor.get());
-     
+    this.options.statusBar = false;     
  }
 
  ngOnInit() {
     this.rdState.subscribe(
       resourcesdata => {
         var resourcesState: IResourcesState = { resources: resourcesdata.resources, isLoadSuccess: resourcesdata.isLoadSuccess, isSaveSuccess: resourcesdata.isSaveSuccess, isUpdateSuccess: resourcesdata.isUpdateSuccess };
+        this.resources=resourcesState.resources;
         this.sources = resourcesState.resources.sources;
         for (let key in this.sources) {
             this.sourcesOptions.push(key);  
         }
-        //console.log(this.sourcesOptions);
     })
  }
 
- onChange() {
-     console.log(this.editor.get())
+ onChange(item,$event) {
+    var editedData =JSON.parse($event.srcElement.value);
+    var originalSources = this.resources.sources;
+     for (let key in originalSources){
+        if(key == item){
+            originalSources[key] = editedData;
+        }
+     }
+     this.resources.sources = Object.assign({},originalSources);
  };
     
  selected(value){
-    console.log(value);
-        this.sourcesData=this.sources[value];
-        return this.sourcesData;    
+ 	this.sourcesData=this.sources[value];
+    return this.sourcesData;    
  }    
+
+ delete(item,i){
+ 	if(confirm("Are sure you want to delete this source ?")) {
+    	var originalSources = this.resources.sources;
+    	for (let key in originalSources){
+     		if(key == item){    
+      			delete originalSources[key];
+      		}
+     	}
+    	this.resources.sources = Object.assign({},originalSources);
+  		this.sourcesOptions.splice(i,1);
+  	}     
+ } 
+  
+ UploadSourcesData() {
+  	this.resourcesData.emit(this.resources);        
+  }
     
  drop(event: CdkDragDrop<string[]>) {
     if (event.previousContainer === event.container) {