array of pages
This commit is contained in:
annampak
parent
24ce69db63
commit
12062b0ef9
|
|
@ -13,7 +13,7 @@
|
|||
</auto-complete> -->
|
||||
<mat-form-field>
|
||||
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" formControlName="profile">
|
||||
<mat-option *ngFor="let profile of availableProfiles" [value]=" formGroup.get('profile').value">
|
||||
<mat-option *ngFor="let profile of availableProfiles" [value]="profile">
|
||||
{{profile.label}}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,48 @@
|
|||
<div class="dynamic-form-editor">
|
||||
<!-- <mat-sidenav-container class="ng-sidebar-container"> -->
|
||||
<!-- <mat-sidenav mode="push" position="right" [(opened)]="visibleSidebar">
|
||||
<!-- <mat-sidenav mode="push" position="right" [(opened)]="visibleSidebar">
|
||||
<table-of-content class="toc-container full-height" [model]="datasetProfileDefinitionModel"></table-of-content>
|
||||
</mat-sidenav> -->
|
||||
|
||||
<!-- <mat-sidenav-content> -->
|
||||
<!-- <button mat-raised-button color="primary" style="margin: 15px;" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button> -->
|
||||
<form *ngIf="form" novalidate [formGroup]="form">
|
||||
<button mat-raised-button color="primary" *ngIf="dataModel&&dataModel.status.toString() != 1"
|
||||
style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="save();" type="button">Save</button>
|
||||
<button mat-raised-button color="primary" *ngIf="dataModel&&dataModel?.status != 1"
|
||||
style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="saveFinalize();" type ="button">Save and Finalize</button>
|
||||
<div>
|
||||
<div class="alignment-center">
|
||||
<!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> -->
|
||||
<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <mat-sidenav-content> -->
|
||||
<!-- <button mat-raised-button color="primary" style="margin: 15px;" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button> -->
|
||||
<form *ngIf="form" novalidate [formGroup]="form">
|
||||
<button mat-raised-button color="primary" *ngIf="dataModel&&dataModel.status.toString() != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
|
||||
(click)="save();" type="button">Save</button>
|
||||
<button mat-raised-button color="primary" *ngIf="dataModel&&dataModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
|
||||
(click)="saveFinalize();" type="button">Save and Finalize</button>
|
||||
<div>
|
||||
<div class="alignment-center">
|
||||
<!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> -->
|
||||
<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12" id="form-container">
|
||||
<!-- <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> -->
|
||||
<mat-vertical-stepper #stepper [linear]="false">
|
||||
<div *ngFor="let page of pages let z=index;">
|
||||
<div *ngFor="let section of datasetProfileDefinitionModel.sections; let i = index;">
|
||||
<div *ngIf="section.page == z">
|
||||
<mat-step [stepControl]="section">
|
||||
<ng-template matStepLabel>{{section.title}}</ng-template>
|
||||
<div *ngIf="stepper.selectedIndex == z">
|
||||
<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
|
||||
<!-- <div>
|
||||
<div class="col-md-12" id="form-container">
|
||||
<!-- <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> -->
|
||||
<mat-vertical-stepper #stepper [linear]="false">
|
||||
<div *ngFor="let page of datasetProfileDefinitionModel.pages let z=index;">
|
||||
<div *ngFor="let section of page.sections; let i = index;">
|
||||
<mat-step [stepControl]="section">
|
||||
<ng-template matStepLabel>{{page.title}}</ng-template>
|
||||
<div *ngIf="stepper.selectedIndex == z">
|
||||
<df-section [section]="section" [form]="form.get('pages').get(''+z).get('sections').get(''+i)" [path]="z+1" [pathName]="'pages.'+z+'.sections.'+i"></df-section>
|
||||
<!-- <div>
|
||||
<button mat-button matStepperNext>Next</button>
|
||||
</div> -->
|
||||
</div>
|
||||
</mat-step>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</mat-vertical-stepper>
|
||||
<!-- <div *ngFor="let section of datasetProfileDefinitionModel.sections; let i = index;">
|
||||
</mat-step>
|
||||
</div>
|
||||
</div>
|
||||
</mat-vertical-stepper>
|
||||
<!-- <div *ngFor="let section of datasetProfileDefinitionModel.sections; let i = index;">
|
||||
<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1"
|
||||
[pathName]="'sections.'+i"></df-section>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
</form>
|
||||
<!-- </mat-sidenav-content>
|
||||
</div>
|
||||
</form>
|
||||
<!-- </mat-sidenav-content>
|
||||
</mat-sidenav-container> -->
|
||||
</div>
|
||||
<!-- <p>Form value: {{ form.value | json }}</p> -->
|
||||
|
|
@ -61,7 +61,7 @@ export class DynamicFormComponent implements OnInit {
|
|||
|
||||
ngOnInit() {
|
||||
this.datasetProfileDefinitionModel = this.dataModel.datasetProfileDefinition
|
||||
this.pages = this.getPages(this.datasetProfileDefinitionModel);
|
||||
//this.pages = this.getPages(this.datasetProfileDefinitionModel);
|
||||
this.createPagination();
|
||||
this.form = this.datasetProfileDefinitionModel.buildForm();
|
||||
this.visibilityRulesService.formGroup = this.form;
|
||||
|
|
@ -109,15 +109,15 @@ export class DynamicFormComponent implements OnInit {
|
|||
this.visibleSidebar = !this.visibleSidebar;
|
||||
}
|
||||
|
||||
getPages(model: DatasetProfileDefinitionModel): Array<number> {
|
||||
let pageSet = new Set<number>();
|
||||
// getPages(model: DatasetProfileDefinitionModel): Array<number> {
|
||||
// let pageSet = new Set<number>();
|
||||
|
||||
model.sections.forEach(section => {
|
||||
pageSet.add(section.page);
|
||||
});
|
||||
// model.sections.forEach(section => {
|
||||
// pageSet.add(section.page);
|
||||
// });
|
||||
|
||||
return Array.from(pageSet).sort((a, b) => a - b);
|
||||
}
|
||||
// return Array.from(pageSet).sort((a, b) => a - b);
|
||||
// }
|
||||
|
||||
shouldDisplaySection(section: Section): Boolean {
|
||||
return (section.page) == this.currentPageIndex;
|
||||
|
|
|
|||
|
|
@ -5,25 +5,35 @@ import { FormGenerator } from './interfaces/FormGenerator';
|
|||
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||
import { Section } from './Section';
|
||||
import { Serializable } from './interfaces/Serializable';
|
||||
export class DatasetProfileDefinitionModel extends BaseModel implements Serializable<DatasetProfileDefinitionModel>,FormGenerator<FormGroup>{
|
||||
public status:number
|
||||
public rules:Rule[];
|
||||
public sections:Array<Section>
|
||||
fromJSONObject(item:any):DatasetProfileDefinitionModel{
|
||||
import { Page } from '@app/models/Page';
|
||||
export class DatasetProfileDefinitionModel extends BaseModel implements Serializable<DatasetProfileDefinitionModel>, FormGenerator<FormGroup>{
|
||||
public status: number
|
||||
public pages: Array<Page>;
|
||||
public rules: Rule[];
|
||||
//public sections:Array<Section>
|
||||
fromJSONObject(item: any): DatasetProfileDefinitionModel {
|
||||
this.status = item.status;
|
||||
this.sections = JsonSerializer.fromJSONArray(item.sections,Section);
|
||||
this.rules = JsonSerializer.fromJSONArray(item.rules,Rule);
|
||||
//this.sections = JsonSerializer.fromJSONArray(item.sections,Section);
|
||||
this.rules = JsonSerializer.fromJSONArray(item.rules, Rule);
|
||||
this.pages = JsonSerializer.fromJSONArray(item.pages, Page);
|
||||
return this;
|
||||
}
|
||||
|
||||
buildForm():FormGroup{
|
||||
let formGroup:FormGroup = new FormBuilder().group({});
|
||||
let sectionsFormArray = new Array<FormGroup>();
|
||||
this.sections.forEach(item => {
|
||||
buildForm(): FormGroup {
|
||||
let formGroup: FormGroup = new FormBuilder().group({});
|
||||
let pagesFormArray = new Array<FormGroup>();
|
||||
// let sectionsFormArray = new Array<FormGroup>();
|
||||
// this.pages.forEach (page => {
|
||||
// page.sections.forEach(item => {
|
||||
// let form: FormGroup = item.buildForm();
|
||||
// sectionsFormArray.push(form)
|
||||
// })
|
||||
// })
|
||||
this.pages.forEach(item => {
|
||||
let form: FormGroup = item.buildForm();
|
||||
sectionsFormArray.push(form)
|
||||
pagesFormArray.push(form)
|
||||
})
|
||||
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
|
||||
formGroup.addControl('pages', this.formBuilder.array(pagesFormArray));
|
||||
return formGroup;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,30 @@
|
|||
import { Section } from "@app/models/Section";
|
||||
import { BaseModel } from './BaseModel';
|
||||
import { FormGenerator } from './interfaces/FormGenerator';
|
||||
import { Serializable } from './interfaces/Serializable';
|
||||
import { JsonSerializer } from '../utilities/JsonSerializer';
|
||||
import { FormBuilder, FormGroup } from '@angular/forms';
|
||||
|
||||
export class Page extends BaseModel implements Serializable<Page> {
|
||||
public ordinal: number;
|
||||
public title: string;
|
||||
public sections: Array<Section>;
|
||||
|
||||
fromJSONObject(item:any):Page{
|
||||
this.ordinal = item.ordinal;
|
||||
this.title = item.title;
|
||||
this.sections = JsonSerializer.fromJSONArray(item.sections,Section);
|
||||
return this;
|
||||
}
|
||||
|
||||
buildForm():FormGroup{
|
||||
let formGroup:FormGroup = new FormBuilder().group({});
|
||||
let sectionsFormArray = new Array<FormGroup>();
|
||||
this.sections.forEach(item => {
|
||||
let form: FormGroup = item.buildForm();
|
||||
sectionsFormArray.push(form)
|
||||
})
|
||||
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
|
||||
return formGroup;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue