MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

array of pages

This commit is contained in:
annampak 2018-01-19 15:56:27 +02:00
parent 24ce69db63
commit 12062b0ef9
5 changed files with 94 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dmp-frontend/src/app/dataset-wizard/dataset-wizard.component.html
View File

@ -13,7 +13,7 @@
</auto-complete> --> </auto-complete> -->
<mat-form-field> <mat-form-field>
<mat-select placeholder=" {{'DATASET-WIZARD.FIRST-STEP.PROFILE'| translate}}" formControlName="profile"> <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}} {{profile.label}}
</mat-option> </mat-option>
</mat-select> </mat-select>

66
dmp-frontend/src/app/form/dynamic-form.component.html
View File

@ -1,50 +1,48 @@
<div class="dynamic-form-editor"> <div class="dynamic-form-editor">
<!-- <mat-sidenav-container class="ng-sidebar-container"> --> <!-- <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> <table-of-content class="toc-container full-height" [model]="datasetProfileDefinitionModel"></table-of-content>
</mat-sidenav> --> </mat-sidenav> -->
<!-- <mat-sidenav-content> --> <!-- <mat-sidenav-content> -->
<!-- <button mat-raised-button color="primary" style="margin: 15px;" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button> --> <!-- <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"> <form *ngIf="form" novalidate [formGroup]="form">
<button mat-raised-button color="primary" *ngIf="dataModel&&dataModel.status.toString() != 1" <button mat-raised-button color="primary" *ngIf="dataModel&&dataModel.status.toString() != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="save();" type="button">Save</button> (click)="save();" type="button">Save</button>
<button mat-raised-button color="primary" *ngIf="dataModel&&dataModel?.status != 1" <button mat-raised-button color="primary" *ngIf="dataModel&&dataModel?.status != 1" style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;"
style="margin-top: 15px;margin-bottom: 15px;margin-right: 15px;" (click)="saveFinalize();" type ="button">Save and Finalize</button> (click)="saveFinalize();" type="button">Save and Finalize</button>
<div> <div>
<div class="alignment-center"> <div class="alignment-center">
<!-- <ngb-pagination *ngIf="pages" [collectionSize]="pages.length*10" [page]="currentPageIndex" (pageChange)="changePageIndex($event)" aria-label="Default pagination"></ngb-pagination> --> <!-- <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> <progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
</div> </div>
</div> </div>
<div class="col-md-12" id="form-container"> <div class="col-md-12" id="form-container">
<!-- <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> --> <!-- <form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()"> -->
<mat-vertical-stepper #stepper [linear]="false"> <mat-vertical-stepper #stepper [linear]="false">
<div *ngFor="let page of pages let z=index;"> <div *ngFor="let page of datasetProfileDefinitionModel.pages let z=index;">
<div *ngFor="let section of datasetProfileDefinitionModel.sections; let i = index;"> <div *ngFor="let section of page.sections; let i = index;">
<div *ngIf="section.page == z"> <mat-step [stepControl]="section">
<mat-step [stepControl]="section"> <ng-template matStepLabel>{{page.title}}</ng-template>
<ng-template matStepLabel>{{section.title}}</ng-template> <div *ngIf="stepper.selectedIndex == z">
<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>
<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section> <!-- <div>
<!-- <div>
<button mat-button matStepperNext>Next</button> <button mat-button matStepperNext>Next</button>
</div> --> </div> -->
</div>
</mat-step>
</div>
</div> </div>
</div> </mat-step>
</mat-vertical-stepper> </div>
<!-- <div *ngFor="let section of datasetProfileDefinitionModel.sections; let i = index;"> </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" <df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1"
[pathName]="'sections.'+i"></df-section> [pathName]="'sections.'+i"></df-section>
</div> --> </div> -->
</div> </div>
</form> </form>
<!-- </mat-sidenav-content> <!-- </mat-sidenav-content>
</mat-sidenav-container> --> </mat-sidenav-container> -->
</div> </div>
<!-- <p>Form value: {{ form.value | json }}</p> --> <!-- <p>Form value: {{ form.value | json }}</p> -->

16
dmp-frontend/src/app/form/dynamic-form.component.ts
View File

@ -61,7 +61,7 @@ export class DynamicFormComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.datasetProfileDefinitionModel = this.dataModel.datasetProfileDefinition this.datasetProfileDefinitionModel = this.dataModel.datasetProfileDefinition
this.pages = this.getPages(this.datasetProfileDefinitionModel); //this.pages = this.getPages(this.datasetProfileDefinitionModel);
this.createPagination(); this.createPagination();
this.form = this.datasetProfileDefinitionModel.buildForm(); this.form = this.datasetProfileDefinitionModel.buildForm();
this.visibilityRulesService.formGroup = this.form; this.visibilityRulesService.formGroup = this.form;
@ -109,15 +109,15 @@ export class DynamicFormComponent implements OnInit {
this.visibleSidebar = !this.visibleSidebar; this.visibleSidebar = !this.visibleSidebar;
} }
getPages(model: DatasetProfileDefinitionModel): Array<number> { // getPages(model: DatasetProfileDefinitionModel): Array<number> {
let pageSet = new Set<number>(); // let pageSet = new Set<number>();
model.sections.forEach(section => { // model.sections.forEach(section => {
pageSet.add(section.page); // 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 { shouldDisplaySection(section: Section): Boolean {
return (section.page) == this.currentPageIndex; return (section.page) == this.currentPageIndex;

36
dmp-frontend/src/app/models/DatasetProfileDefinitionModel.ts
View File

@ -5,25 +5,35 @@ import { FormGenerator } from './interfaces/FormGenerator';
import { JsonSerializer } from '../utilities/JsonSerializer'; import { JsonSerializer } from '../utilities/JsonSerializer';
import { Section } from './Section'; import { Section } from './Section';
import { Serializable } from './interfaces/Serializable'; import { Serializable } from './interfaces/Serializable';
export class DatasetProfileDefinitionModel extends BaseModel implements Serializable<DatasetProfileDefinitionModel>,FormGenerator<FormGroup>{ import { Page } from '@app/models/Page';
public status:number export class DatasetProfileDefinitionModel extends BaseModel implements Serializable<DatasetProfileDefinitionModel>, FormGenerator<FormGroup>{
public rules:Rule[]; public status: number
public sections:Array<Section> public pages: Array<Page>;
fromJSONObject(item:any):DatasetProfileDefinitionModel{ public rules: Rule[];
//public sections:Array<Section>
fromJSONObject(item: any): DatasetProfileDefinitionModel {
this.status = item.status; this.status = item.status;
this.sections = JsonSerializer.fromJSONArray(item.sections,Section); //this.sections = JsonSerializer.fromJSONArray(item.sections,Section);
this.rules = JsonSerializer.fromJSONArray(item.rules,Rule); this.rules = JsonSerializer.fromJSONArray(item.rules, Rule);
this.pages = JsonSerializer.fromJSONArray(item.pages, Page);
return this; return this;
} }
buildForm():FormGroup{ buildForm(): FormGroup {
let formGroup:FormGroup = new FormBuilder().group({}); let formGroup: FormGroup = new FormBuilder().group({});
let sectionsFormArray = new Array<FormGroup>(); let pagesFormArray = new Array<FormGroup>();
this.sections.forEach(item => { // 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(); 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; return formGroup;
} }

30
dmp-frontend/src/app/models/Page.ts Normal file
View File

@ -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;
}
}