diff options
Diffstat (limited to 'cds-ui')
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' + } + } } |