summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorDan Timoney <dtimoney@att.com>2019-03-31 12:44:48 +0000
committerGerrit Code Review <gerrit@onap.org>2019-03-31 12:44:48 +0000
commit5fab85a8cab9228b03e8c9534cd4dc020fa30cc1 (patch)
treea0e2fec230afcca899ee5c76d1780908c981383f
parent5735f0eb86cbfbb87db68711e4ddd2288c6990d2 (diff)
parent8c409761dbb9e12c8784b9ff8347d6bd8f20c33c (diff)
Merge "Resource edit changes"
-rw-r--r--cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.html37
-rw-r--r--cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.scss29
-rw-r--r--cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/resource-edit.component.ts65
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'
+ }
+ }
}