resource save/delete functionality

Implemented code to,
1. Delete and save the added source option from the panel.
2. Save edited changes of a particular source option

Issue-ID: CCSDK-707
Change-Id: I38bf8a67e7fff4c926fd5c84f834de5d817e9640
Signed-off-by: Arundathi Patil <arundpil@in.ibm.com>

2 files changed, 209 insertions, 173 deletions

diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts
index 6762f7c26..e155ec100 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-metadata/resource-metadata.component.ts
@@ -39,7 +39,7 @@ import { IEntrySchema } from 'src/app/common/core/store/models/entrySchema.model
 })
 export class ResourceMetadataComponent implements OnInit {
     entry_schema:IEntrySchema;
-    properties: IPropertyData;
+    properties: any = {};
     ResourceMetadata: FormGroup;
     resource_name: string;
     tags: string;
@@ -68,15 +68,22 @@ export class ResourceMetadataComponent implements OnInit {
         this.resource_name = resourcesState.resources.name;
         this.tags = resourcesState.resources.tags;
         this.resources = resourcesState.resources;
-        this.properties= resourcesState.resources.property;
-        this.propertyValues=  this.checkNested(this.properties);
+        if (resourcesState.resources.definition && resourcesState.resources.definition.property) {
+         this.properties= resourcesState.resources.definition.property;
+        } else {
+           this.properties['description']= '';
+           this.properties['type'] = '';
+           this.properties['entry_schema'] = '';
+           this.properties['required'] = false;
+        }
+      //   this.propertyValues=  this.checkNested(this.properties);
         this.ResourceMetadata = this.formBuilder.group({
         Resource_Name: [this.resource_name, Validators.required],
          _tags: [this.tags, Validators.required],
-         _description : [ this.propertyValues[0], Validators.required],
-         _type: [ this.propertyValues[1], Validators.required],
-         required: [ JSON.stringify(this.propertyValues[2]), Validators.required],
-         entry_schema: [this.propertyValues[3]]
+         _description : [ this.properties.description, Validators.required, ''],
+         _type: [ this.properties.type, Validators.required],
+         required: [ JSON.stringify(this.properties.required), Validators.required],
+         entry_schema: [this.properties.entry_schema]
       });   
     })
  }
@@ -85,10 +92,10 @@ export class ResourceMetadataComponent implements OnInit {
   
     this.resources.name = this.ResourceMetadata.value.Resource_Name;
     this.resources.tags = this.ResourceMetadata.value._tags;
-    this.resources.property.description = this.ResourceMetadata.value._description;
-    this.resources.property.type = this.ResourceMetadata.value._type;
- 	this.resources.property.required = this.ResourceMetadata.value.required;
- 	this.resources.property.entry_schema = this.ResourceMetadata.value.entry_schema;
+    this.resources.definition.property.description = this.ResourceMetadata.value._description;
+    this.resources.definition.property.type = this.ResourceMetadata.value._type;
+    this.resources.definition.property.required = this.ResourceMetadata.value.required;
+    this.resources.definition.property.entry_schema = this.ResourceMetadata.value.entry_schema;
  	this.resourcesData.emit(this.resources); 
  }
    
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 1d41ae7c7..943b20e48 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
@@ -34,184 +34,213 @@ import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
 import { ResourceEditService } from '../resource-edit.service';
 
 @Component({
-  selector: 'app-sources-template',
-  templateUrl: './sources-template.component.html',
-  styleUrls: ['./sources-template.component.scss']
+   selector: 'app-sources-template',
+   templateUrl: './sources-template.component.html',
+   styleUrls: ['./sources-template.component.scss']
 })
 export class SourcesTemplateComponent implements OnInit {
 
-    @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
-    options = new JsonEditorOptions(); 
-    rdState: Observable<IResourcesState>;
-    resources: IResources;
-    option = [];
-    sources:ISourcesData; 
-    sourcesOptions = [];
-    sourcesData = {};
-    @Output() resourcesData = new EventEmitter();
-    tempOption = [];
- 
-    constructor(private store: Store<IAppState>, private apiService: ResourceEditService) {
-    this.rdState = this.store.select('resources');
-    this.options.mode = 'text';
-    this.options.modes = [ 'text', 'tree', 'view'];
-    this.options.statusBar = false;     
- }
+   @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
+   options = new JsonEditorOptions();
+   rdState: Observable<IResourcesState>;
+   resources: IResources;
+   option = [];
+   sources: ISourcesData;
+   sourcesOptions = [];
+   sourcesData = {};
+   @Output() resourcesData = new EventEmitter();
+   tempOption = [];
 
- ngOnInit() {
-    this.rdState.subscribe(
-      resourcesdata => {
-        var resourcesState: IResourcesState = { resources: resourcesdata.resources, isLoadSuccess: resourcesdata.isLoadSuccess, isSaveSuccess: resourcesdata.isSaveSuccess, isUpdateSuccess: resourcesdata.isUpdateSuccess };
-        this.resources=resourcesState.resources;
-         if(resourcesState.resources.definition && resourcesState.resources.definition.sources) {
-         this.sources = resourcesState.resources.definition.sources;
-         }
-        for (let key in this.sources) {
-            let source = {
-               name : key,
-               data: this.sources[key]
+   constructor(private store: Store<IAppState>, private apiService: ResourceEditService) {
+      this.rdState = this.store.select('resources');
+      this.options.mode = 'text';
+      this.options.modes = ['text', 'tree', 'view'];
+      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;
+            if (resourcesState.resources.definition && resourcesState.resources.definition.sources) {
+               this.sources = resourcesState.resources.definition.sources;
             }
-             this.sourcesOptions.push(source);    
-        }
-    })
- }
+            this.sourcesOptions = [];
+            for (let key in this.sources) {
+               let source = {
+                  name: key,
+                  data: this.sources[key]
+               }
+               this.sourcesOptions.push(source);
+            }
+         })
+   }
 
- onChange(item,$event) {
-    var editedData =JSON.parse($event.srcElement.value);
-    var originalSources = this.resources.sources;
-     for (let key in originalSources){
-        if(key == item){
+   onChange(item, $event) {
+      var editedData = JSON.parse($event.srcElement.value);
+      var originalSources = this.resources.definition.sources;
+      for (let key in originalSources) {
+         if (key == item.name) {
             originalSources[key] = editedData;
-        }
-     }
-     this.resources.sources = Object.assign({},originalSources);
- };
-    
- // to remove this method
- selected(sourceValue){
-   this.sourcesData= [];//this.sources[value];
-   this.apiService.getModelType(sourceValue.value)
-   .subscribe(data=>{
-      console.log(data);
-      data.forEach(item =>{
-        if(typeof(item)== "object") {
-           for (let key1 in item) {
-              if(key1 == 'properties') {                  
-                 let newPropOnj = {}
-                 for (let key2 in item[key1]) {
-                    console.log(item[key1][key2]);
-                    let varType = item[key1][key2].type
-                    // let property :  varType = 
-                    newPropOnj[key2] = item[key1][key2];
-                 }
-              }
-           }
-        }
-      });
-      this.sourcesData = data;
-      this.sourcesOptions.forEach(item=>{
-         if(item.name == sourceValue.name) {
-            item.data = data;
          }
-      })       
-     return this.sourcesData;
-   })    
-}    
+      }
+      this.resources.definition.sources = Object.assign({}, originalSources);
 
- 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 (!this.checkIfSourceExists(event.item.element.nativeElement.innerText)) {
-      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);
+      let resourcesState = {
+         resources: this.resources,
+         isLoadSuccess: true,
+         isUpdateSuccess: true,
+         isSaveSuccess: true
       }
-      this.tempOption.forEach((item) => {
-         if (item.name == event.item.element.nativeElement.innerText) {
-            this.apiService.getModelType(item.value)
-               .subscribe(data => {
-                  console.log(data);
-                  data.forEach(dataitem => {
-                     if (typeof (dataitem) == "object") {
-                        for (let key1 in dataitem) {
-                           if (key1 == 'properties') {
-                              let newPropObj = {};
-                              newPropObj["name"] = event.item.element.nativeElement.innerText;
-                              newPropObj['data'] = {};
-                              let newSoruceObj = {};
-                              for (let key2 in dataitem[key1]) {
-                                 newSoruceObj[key2] = '';;
-                              }
-                              newPropObj['data']['properties'] = newSoruceObj;
-                              this.sourcesOptions.forEach(sourcesOptionsitem => {
-                                 if (sourcesOptionsitem.name == item.name) {
-                                    sourcesOptionsitem.data = newPropObj['data'];
+      this.store.dispatch(new SetResourcesState(resourcesState));
+   };
+
+   // to remove this method
+   selected(sourceValue) {
+      this.sourcesData = [];//this.sources[value];
+      this.apiService.getModelType(sourceValue.value)
+         .subscribe(data => {
+            console.log(data);
+            data.forEach(item => {
+               if (typeof (item) == "object") {
+                  for (let key1 in item) {
+                     if (key1 == 'properties') {
+                        let newPropOnj = {}
+                        for (let key2 in item[key1]) {
+                           console.log(item[key1][key2]);
+                           let varType = item[key1][key2].type
+                           // let property :  varType = 
+                           newPropOnj[key2] = item[key1][key2];
+                        }
+                     }
+                  }
+               }
+            });
+            this.sourcesData = data;
+            this.sourcesOptions.forEach(item => {
+               if (item.name == sourceValue.name) {
+                  item.data = data;
+               }
+            })
+            return this.sourcesData;
+         })
+   }
+
+   delete(item, i) {
+      if (confirm("Are sure you want to delete this source ?")) {
+         var originalSources = this.resources.definition.sources;
+         for (let key in originalSources) {
+            if (key == item.name) {
+               delete originalSources[key];
+            }
+         }
+         this.resources.definition.sources = Object.assign({}, originalSources);
+         this.sourcesOptions.splice(i, 1);
+         if (!this.checkIfSourceExists(this.option, item.name)) {
+            this.tempOption.forEach(tempOptionitem => {
+               if (tempOptionitem.name == item.name) {
+                  this.option.push(tempOptionitem);
+               }
+            });
+         }
+         let newsources = {};
+         this.sourcesOptions.forEach(sourceItem => {
+            newsources[sourceItem.name] = {};
+            newsources[sourceItem.name] = sourceItem.data;
+         });
+         this.resources.definition.sources = newsources;
+         let resourcesState = {
+            resources: this.resources,
+            isLoadSuccess: true,
+            isUpdateSuccess: true,
+            isSaveSuccess: true
+         }
+         this.store.dispatch(new SetResourcesState(resourcesState));
+      }
+   }
+
+   UploadSourcesData() {
+      this.resourcesData.emit(this.resources);
+   }
+
+   drop(event: CdkDragDrop<string[]>) {
+      if (!this.checkIfSourceExists(this.sourcesOptions, event.item.element.nativeElement.innerText)) {
+         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);
+         }
+         this.tempOption.forEach((item) => {
+            if (item.name == event.item.element.nativeElement.innerText) {
+               this.apiService.getModelType(item.value)
+                  .subscribe(data => {
+                     console.log(data);
+                     data.forEach(dataitem => {
+                        if (typeof (dataitem) == "object") {
+                           for (let key1 in dataitem) {
+                              if (key1 == 'properties') {
+                                 let newPropObj = {};
+                                 newPropObj["name"] = event.item.element.nativeElement.innerText;
+                                 newPropObj['data'] = {};
+                                 let newSoruceObj = {};
+                                 for (let key2 in dataitem[key1]) {
+                                    newSoruceObj[key2] = '';;
                                  }
-                              });
+                                 newPropObj['data']['properties'] = newSoruceObj;
+                                 this.sourcesOptions.forEach(sourcesOptionsitem => {
+                                    if (sourcesOptionsitem.name == item.name) {
+                                       sourcesOptionsitem.data = newPropObj['data'];
+                                    }
+                                 });
+                              }
                            }
                         }
+                     });
+                     let newsources = {};
+                     this.sourcesOptions.forEach(sourceItem => {
+                        console
+                        newsources[sourceItem.name] = {};
+                        newsources[sourceItem.name] = sourceItem.data;
+                     });
+                     this.resources.definition.sources = newsources;
+                     let resourcesState = {
+                        resources: this.resources,
+                        isLoadSuccess: true,
+                        isUpdateSuccess: true,
+                        isSaveSuccess: true
                      }
+                     this.store.dispatch(new SetResourcesState(resourcesState));
                   });
-                  let newsources= {};
-                  this.sourcesOptions.forEach(sourceItem=>{
-                     console
-                     newsources[sourceItem.name] = {};
-                     newsources[sourceItem.name] = sourceItem.data;
-                  });
-                  this.resources.definition.sources = newsources;
-                  let resourcesState = {
-                     resources: this.resources,
-                     isLoadSuccess: true,
-                     isUpdateSuccess:true,
-                     isSaveSuccess:true
-                  }  
-                  this.store.dispatch(new SetResourcesState(resourcesState));
-            });
-         }  
-      });
+            }
+         });
+      }
    }
-  }
 
-  getResources() {
-   this.apiService.getSources()
-   .subscribe(data=>{
-      console.log(data);
-      for (let key in data[0]) {
-         let sourceObj = { name: key, value: data[0][key] }
-         this.option.push(sourceObj);
-         this.tempOption.push(sourceObj); 
-     }
-   }, error=>{
-      console.log(error);
-   })
-  }
+   getResources() {
+      this.apiService.getSources()
+         .subscribe(data => {
+            console.log(data);
+            for (let key in data[0]) {
+               let sourceObj = { name: key, value: data[0][key] }
+               this.option.push(sourceObj);
+               this.tempOption.push(sourceObj);
+            }
+         }, error => {
+            console.log(error);
+         })
+   }
 
-  checkIfSourceExists(sourceName) {
-   let sourceExists: boolean = false;
-   this.sourcesOptions.forEach(item => {
-      if (item.name == sourceName) {
-         sourceExists = true;
-      }
-   });
-   return sourceExists;
-}
+   checkIfSourceExists(sourceList, sourceName) {
+      let sourceExists: boolean = false;
+      sourceList.forEach(item => {
+         if (item.name == sourceName) {
+            sourceExists = true;
+         }
+      });
+      return sourceExists;
+   }
 }