diff options
Diffstat (limited to 'cds-ui')
3 files changed, 41 insertions, 16 deletions
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 8f28021c8..2b25ae339 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 @@ -29,6 +29,7 @@ import { SharedModule } from '../../../../app/common/shared/shared.module'; import { SourcesTemplateComponent } from './sources-template/sources-template.component'; import { ResourceMetadataComponent } from './resource-metadata/resource-metadata.component'; import { DragDropModule } from '@angular/cdk/drag-drop'; +import { NgJsonEditorModule } from 'ang-jsoneditor'; @NgModule({ declarations: [ ResourceEditComponent,SourcesTemplateComponent,ResourceMetadataComponent ], @@ -38,8 +39,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop'; SharedModule, FormsModule,ReactiveFormsModule, DragDropModule, - MatExpansionModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule - + MatExpansionModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule, + NgJsonEditorModule ], exports: [ ResourceEditComponent,SharedModule ] }) diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html index 123594a50..903c6d319 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-edit/sources-template/sources-template.component.html @@ -21,17 +21,17 @@ <div class="sources-container"> <div cdkDropList - [cdkDropListData]="todo" + [cdkDropListData]="sourcesOptions" class="sources-list" (cdkDropListDropped)="drop($event)"> - <div class="sources-box" *ngFor="let item of todo" cdkDrag> + <div class="sources-box" *ngFor="let item of sourcesOptions" cdkDrag> <mat-expansion-panel class="expansion-panel"> <mat-expansion-panel-header> <mat-panel-title> - {{item.type}} + {{item}} </mat-panel-title> </mat-expansion-panel-header> - {{item}} + <json-editor [options]="options" [data]="selected(item)" on-change="onChange()"></json-editor> </mat-expansion-panel> </div> </div> @@ -47,10 +47,10 @@ <br><br> <div cdkDropList - [cdkDropListData]="sourcesOptions" + [cdkDropListData]="option" class="options-list" (cdkDropListDropped)="drop($event)"> - <div class="options-box" *ngFor="let item of sourcesOptions | search : searchText" cdkDrag>{{item.type}}</div> + <div class="options-box" *ngFor="let item of option | search :searchText" cdkDrag>{{item}}</div> </div> </div> </div>
\ No newline at end of file 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 8c6d99ca7..c43d1debd 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 @@ -18,7 +18,7 @@ * ============LICENSE_END========================================================= */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewChild } from '@angular/core'; import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop'; import { IResources } from 'src/app/common/core/store/models/resources.model'; import { IResourcesState } from 'src/app/common/core/store/models/resourcesState.model'; @@ -28,6 +28,7 @@ import { IAppState } from '../../../../common/core/store/state/app.state'; import { A11yModule } from '@angular/cdk/a11y'; import { LoadResourcesSuccess } from 'src/app/common/core/store/actions/resources.action'; import { ISourcesData } from 'src/app/common/core/store/models/sourcesData.model'; +import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor'; @Component({ selector: 'app-sources-template', @@ -35,14 +36,29 @@ import { ISourcesData } from 'src/app/common/core/store/models/sourcesData.model styleUrls: ['./sources-template.component.scss'] }) export class SourcesTemplateComponent implements OnInit { +// rdState: Observable<IResourcesState>; +// resources: IResources; +// todo = []; +// sources:ISourcesData; +// sourcesOptions = []; + + @ViewChild(JsonEditorComponent) editor: JsonEditorComponent; + options = new JsonEditorOptions(); + rdState: Observable<IResourcesState>; resources: IResources; - todo = []; + option = ['mdsal','default']; sources:ISourcesData; sourcesOptions = []; - + sourcesData = []; + constructor(private store: Store<IAppState>) { - this.rdState = this.store.select('resources'); + this.rdState = this.store.select('resources'); + this.options.mode = 'text'; + this.options.modes = [ 'text', 'tree', 'view']; + this.options.statusBar = false; + this.options.onChange = () => console.log(this.editor.get()); + } ngOnInit() { @@ -51,14 +67,22 @@ export class SourcesTemplateComponent implements OnInit { var resourcesState: IResourcesState = { resources: resourcesdata.resources, isLoadSuccess: resourcesdata.isLoadSuccess, isSaveSuccess: resourcesdata.isSaveSuccess, isUpdateSuccess: resourcesdata.isUpdateSuccess }; this.sources = resourcesState.resources.sources; for (let key in this.sources) { - if (this.sources.hasOwnProperty(key)) { - this.sourcesOptions.push(this.sources[key]); - } + this.sourcesOptions.push(key); } - console.log(this.sourcesOptions); + //console.log(this.sourcesOptions); }) } + onChange() { + console.log(this.editor.get()) + }; + + selected(value){ + console.log(value); + this.sourcesData=this.sources[value]; + return this.sourcesData; + } + drop(event: CdkDragDrop<string[]>) { if (event.previousContainer === event.container) { moveItemInArray(event.container.data, event.previousIndex, event.currentIndex); |