Resource edit changes

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

3 files changed, 109 insertions, 22 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 7df509221..de81e2394 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,27 +19,36 @@
 */-->
 
 
-<mat-card class="metadata-card">
+<button (click) ="changeView()" class="toggle-view-btn">{{viewText}}</button>
+<br><br>
+<div *ngIf="designerMode">
+   <mat-card class="metadata-card">
         <mat-card-header>
             <mat-card-title>Resource Metadata</mat-card-title>
         </mat-card-header>
         <mat-card-content>
-            <app-resource-metadata></app-resource-metadata>
+            <app-resource-metadata (resourcesData)="metaDataDetail($event)"></app-resource-metadata>
         </mat-card-content>
-</mat-card>
+    </mat-card>
 
-<mat-card class="sources-card">
-     <mat-card-header>
+	<mat-card class="sources-card">
+    	<mat-card-header>
           <mat-card-title>
                 Sources
           </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-          <app-sources-template></app-sources-template>
-    </mat-card-content>
-</mat-card>
+    	</mat-card-header>
+    	<mat-card-content>
+        	<app-sources-template (resourcesData)="sourcesDetails($event)"></app-sources-template>
+    	</mat-card-content>
+    </mat-card>
+</div>
 
-<mat-card class="submit">
-   <button mat-raised-button>Save</button>
-</mat-card>
-<!-- <router-outlet></router-outlet> -->
\ No newline at end of file
+<div *ngIf="editorMode">
+	<json-editor  class="jsoneditor" *ngIf="editorMode" [options]="options" [data]="resources" on-change="onChange($event)"></json-editor>
+</div>
+ 
+<div class="btn"> 
+	<button mat-button matStepperPrevious>Back</button></div>
+<div class="btn">
+	<button mat-button matStepperNext type="submit" (click)="updateResourcesState()">Upload</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 7c60cf3e6..280645e3d 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
@@ -25,6 +25,7 @@
   margin: 20px 0;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
   height: auto;
+  min-height:340px;
 }
 .sources-card {
   width: 100%;  
@@ -33,13 +34,14 @@
   margin: 20px 0;
   box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important;
   height: auto;
+  min-height:300px;
 }
-.mat-raised-button{
-  border: 1px solid grey;
-  background-color: #3f51b5;
-  padding: 1px;
-  color: white;
-  border-radius: 1em;
+.mat-button{
+    color:white;
+    background:#3f51b5; 
+    margin-top: 10px; 
+    position: absolute;
+    border-radius: 1em;
 }
 .mat-card-title{
    padding-top: 7px;
@@ -53,3 +55,18 @@
    padding: 8px 8px;
    word-wrap: break-word;
 }
+.btn{
+  width: 50px;
+  max-width: 100%;
+  margin: 0 25px 25px 0;
+  display: inline-block;
+  vertical-align: top;
+}
+.toggle-view-btn{
+    color:white;
+    background:#3f51b5; 
+    border-radius: 1em;
+    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 5b567034a..55b80628d 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
@@ -18,7 +18,15 @@
 * ============LICENSE_END=========================================================
 */
 
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { IResources } from 'src/app/common/core/store/models/resources.model';
+import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model';
+import { LoadResourcesSuccess,UpdateResources,SetResourcesState } from 'src/app/common/core/store/actions/resources.action';
+import { Store } from '@ngrx/store';
+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';
 
 @Component({
   selector: 'app-resource-edit',
@@ -27,9 +35,62 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ResourceEditComponent implements OnInit {
 
-  constructor() { }
+    resources:IResources;
+    data:IResources;
+    rdState: Observable<IResourcesState>;
+    designerMode: boolean = true;
+    editorMode: boolean = false;
+    viewText: string = "Open in Editor Mode";
+    @ViewChild(JsonEditorComponent) editor: JsonEditorComponent;
+    options = new JsonEditorOptions();
+  
+  constructor(private store: Store<IAppState>) {
+  	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;
+    })     
   }
 
+ metaDataDetail(data: IResources) {
+    this.data=data;       
+  }
+    
+ sourcesDetails(data: IResources) {
+    this.data=data; 
+ }
+    
+ onChange($event) {
+      this.data=JSON.parse($event.srcElement.value);
+  };
+  
+ updateResourcesState(){
+      console.log(this.data);
+      let resourcesState = {
+      resources: this.data,
+      isLoadSuccess: true,
+      isUpdateSuccess:true,
+      isSaveSuccess:true
+    }  
+   this.store.dispatch(new SetResourcesState(resourcesState));   
+  }
+    
+ changeView() {
+    if(this.viewText == 'Open in Editor Mode') {
+      this.editorMode =  true;
+      this.designerMode = false;
+      this.viewText = 'Open in Form Mode'
+    } else {
+      this.editorMode =  false;
+      this.designerMode = true;
+      this.viewText = 'Open in Editor Mode'
+    }
+  }  
 }