Resouce creation- save resouce to backend

Integrated UI with loopback to save the resource dictionary in backend
for exsisting and uploaded resource templates

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

5 files changed, 62 insertions, 9 deletions

diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html
index de81e2394..4bd4ad456 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html
@@ -19,7 +19,7 @@
 */-->
 
 
-<button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button>
+<button disabled style="opacity: 0.5;" (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button>
 <br><br>
 <div *ngIf="designerMode">
    <mat-card class="metadata-card">
@@ -50,5 +50,5 @@
 <div class="btn"> 
 	<button mat-button matStepperPrevious>Back</button></div>
 <div class="btn">
-	<button mat-button matStepperNext type="submit" (click)="updateResourcesState()">Upload</button>
+	<button mat-button matStepperNext type="submit" (click)="saveToBackend()">Save</button>
 </div> 
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss
index 280645e3d..9c2d42a83 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss
@@ -41,7 +41,7 @@
     background:#3f51b5; 
     margin-top: 10px; 
     position: absolute;
-    border-radius: 1em;
+    border-radius: 4px;
 }
 .mat-card-title{
    padding-top: 7px;
@@ -61,11 +61,12 @@
   margin: 0 25px 25px 0;
   display: inline-block;
   vertical-align: top;
+  border-radius: 4px;
 }
 .toggle-view-btn{
     color:white;
     background:#3f51b5; 
-    border-radius: 1em;
+    border-radius: 4px;
     margin-top: 10px;
     padding:0.6em;
     border: 1px solid #3f51b5;
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts
index 55b80628d..77e901717 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts
@@ -27,6 +27,7 @@ import { IAppState } from '../../../common/core/store/state/app.state';
 import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';
 import { Observable } from 'rxjs';
 import { A11yModule } from '@angular/cdk/a11y';
+import { ResourceEditService } from './resource-edit.service';
 
 @Component({
   selector: 'app-resource-edit',
@@ -38,13 +39,13 @@ export class ResourceEditComponent implements OnInit {
     resources:IResources;
     data:IResources;
     rdState: Observable<IResourcesState>;
-    designerMode: boolean = true;
-    editorMode: boolean = false;
+    designerMode: boolean = false;
+    editorMode: boolean = true;
     viewText: string = "Open in Editor Mode";
     @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
     options = new JsonEditorOptions();
   
-  constructor(private store: Store<IAppState>) {
+  constructor(private store: Store<IAppState>, private resourceEditService: ResourceEditService) {
   	this.rdState = this.store.select('resources');
     this.options.mode = 'text';
     this.options.modes = [ 'text', 'tree', 'view'];
@@ -92,5 +93,15 @@ export class ResourceEditComponent implements OnInit {
       this.designerMode = true;
       this.viewText = 'Open in Editor Mode'
     }
-  }  
+  } 
+
+  saveToBackend() {
+    this.resourceEditService.saveResource(this.data)
+    .subscribe(response=>{
+      window.alert("save success");
+    },
+    error=>{
+      window.alert('Error saving resources');
+    })
+  }
 }
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts
index 2b25ae339..ae7143cfb 100644
--- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.module.ts
@@ -30,6 +30,7 @@ import { SourcesTemplateComponent } from './sources-template/sources-template.co
 import { ResourceMetadataComponent } from './resource-metadata/resource-metadata.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { NgJsonEditorModule } from 'ang-jsoneditor';
+import { ResourceEditService } from './resource-edit.service';
 
 @NgModule({
   declarations: [ ResourceEditComponent,SourcesTemplateComponent,ResourceMetadataComponent ],
@@ -42,6 +43,7 @@ import { NgJsonEditorModule } from 'ang-jsoneditor';
    MatExpansionModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule,  MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule,
    NgJsonEditorModule
   ],
-  exports: [ ResourceEditComponent,SharedModule ]
+  exports: [ ResourceEditComponent,SharedModule ],
+  providers: [ ResourceEditService ]
 })
 export class ResourceEditModule { }
diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.service.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.service.ts
new file mode 100644
index 000000000..982d71d58
--- /dev/null
+++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.service.ts
@@ -0,0 +1,39 @@
+/*
+============LICENSE_START==========================================
+===================================================================
+Copyright (C) 2018-19 IBM Intellectual Property. All rights reserved.
+===================================================================
+
+Unless otherwise specified, all software contained herein is licensed
+under the Apache License, Version 2.0 (the License);
+you may not use this software except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+============LICENSE_END============================================
+*/
+
+
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable, observable } from 'rxjs';
+import { ApiService } from  '../../../common/core/services/api.service';
+import { LoopbackConfig, ResourceDictionaryURLs } from '../../../common/constants/app-constants';
+
+@Injectable()
+export class ResourceEditService {
+    // blueprintUrl = '../../constants/blueprint.json';
+
+    constructor(private _http: HttpClient, private api: ApiService) {
+    }
+
+    saveResource(resource) {
+       return this.api.post(LoopbackConfig.url+ ResourceDictionaryURLs.saveResourceDictionary, resource);
+    }
+}
\ No newline at end of file