argos/dmp-frontend/src/app/form/dynamic-form/dynamic-form.component.ts

134 lines
5.0 KiB
TypeScript
Raw Normal View History

2018-01-30 10:35:26 +01:00
import { Section } from '../../models/Section';
import { JsonSerializer } from '../../utilities/JsonSerializer';
import { Rule } from '../../models/Rule';
import { DatasetWizardService } from '../../services/dataset-wizard/dataset-wizard.service';
import { BaseHttpService } from '../../utilities/cite-http-service-module/base-http.service';
2018-05-28 11:50:42 +02:00
import { VisibilityRulesService } from '../../utilities/visibility-rules/visibility-rules.service';
2018-01-30 10:35:26 +01:00
import { DatasetProfileDefinitionModel } from '../../models/DatasetProfileDefinitionModel';
import { DatasetWizardModel } from '../../models/datasets/DatasetWizardModel';
import { Component, Input, OnInit, ViewEncapsulation, AfterViewInit, ViewChild } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
2018-01-30 10:35:26 +01:00
import 'rxjs/add/operator/switchMap';
import '../../utilities/enhancers/flatJoinOn';
2018-01-30 10:35:26 +01:00
import { Location } from '@angular/common';
import { MarkForConsiderationService } from '../../utilities/mark-for-considerations/mark-for-consideration.service';
import { FormFocusService } from '../../utilities/form-focus-service/form-focus.service';
import { CompositeField } from '../../models/CompositeField';
import { Pair } from '../../models/helpers/Pair';
import { MatStepper } from '@angular/material';
2018-01-30 10:35:26 +01:00
@Component({
2018-10-05 17:00:54 +02:00
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: [
'./dynamic-form.component.scss'
],
providers: [
FormFocusService
2018-10-05 17:00:54 +02:00
],
encapsulation: ViewEncapsulation.None,
2018-01-30 10:35:26 +01:00
})
2018-09-18 14:41:24 +02:00
export class DynamicFormComponent implements OnInit, AfterViewInit {
2018-01-30 10:35:26 +01:00
2018-10-05 17:00:54 +02:00
pathName: string;
pages: Array<number>;
activeStepperIndex = 1;
visibleSidebar = false;
datasetProfileDefinitionModel: DatasetProfileDefinitionModel;
private progressbar = false;
private currentPageIndex = 0;
@ViewChild('stepper') stepper: MatStepper;
2018-10-05 17:00:54 +02:00
@Input() dataModel: DatasetWizardModel = new DatasetWizardModel();
@Input() path: string;
@Input() form: FormGroup;
id: string;
trackByFn = (index, item) => item ? item['id'] : null;
pageTrackByFn = (index, item) => item['id'];
// @Input() datasetId: string;
constructor(
private router: Router,
2018-10-05 17:00:54 +02:00
private route: ActivatedRoute,
private visibilityRulesService: VisibilityRulesService,
private formFocusService: FormFocusService
2018-10-05 17:00:54 +02:00
) {
//this.datasetId = route.snapshot.params['id'];
}
getSubForm(subformName) {
return this.form.controls[subformName];
}
ngOnInit() {
const rules: Rule[] = JsonSerializer.fromJSONArray(this.dataModel.datasetProfileDefinition.rules, Rule);
this.visibilityRulesService.formGroup = this.form;
this.visibilityRulesService.buildVisibilityRules(rules);
this.datasetProfileDefinitionModel = this.dataModel.datasetProfileDefinition;
this.visibilityRulesService.setModel(this.datasetProfileDefinitionModel);
2018-10-05 17:00:54 +02:00
this.createPagination();
this.progressbar = true;
const sections: Pair<Section[], number>[] = this.datasetProfileDefinitionModel.pages.map(page => new Pair<Section[], number>(page.sections, page.ordinal)).filter(x => x);
const compositeFields: Pair<CompositeField[], number>[] = sections.map(section => new Pair<CompositeField[], number>(section.left.flatMap(sec => sec.compositeFields), section.right)).filter(x => x);
const nestedSections: Pair<Section[], number>[] = sections.map(section => new Pair<Section[], number>(section.left.flatMap(x => x.sections), section.right)).filter(x => x);
const nestedCompositeFields: Pair<CompositeField[], number>[] = nestedSections.map(section => new Pair<CompositeField[], number>(section.left.flatMap(x => x.compositeFields), section.right)).filter(x => x);
const compositeFieldsUnion: Pair<CompositeField[], number>[] = compositeFields.concat(nestedCompositeFields);
//const fields = compositeFieldsUnion.flatJoinOn(x => x.right);
this.formFocusService.setFields(compositeFieldsUnion);
2018-10-05 17:00:54 +02:00
this.route.fragment.subscribe((fragment: string) => {
const self = this;
setTimeout(function () { self.scrollTo(fragment); });
});
}
2018-10-05 17:00:54 +02:00
ngAfterViewInit() {
this.visibilityRulesService.triggerVisibilityEvaluation();
2018-10-05 17:00:54 +02:00
this.route.queryParams.subscribe((params) => {
if (params && 'page' in params) {
this.changeCurrentPage(params['page']);
}
});
}
toggleSidebar() {
this.visibleSidebar = !this.visibleSidebar;
}
shouldDisplaySection(section: Section): Boolean {
return (section.page) === this.currentPageIndex;
}
createPagination() {
2018-10-05 17:00:54 +02:00
}
changePageIndex(index: any) {
this.router.navigate([this.route.snapshot.url[0] + '/' + this.route.snapshot.url[1]], { queryParams: { page: this.pages[index - 1] } });
}
scrollTo(sectionID: string) {
if (!sectionID) { return; }
const element = document.querySelector('#' + sectionID);
if (!element) { return; }
element.scrollIntoView();
this.visibleSidebar = true;
}
changeCurrentPage(pageString: string) {
//if (!pageString) { return; }
2018-10-05 17:00:54 +02:00
const page = parseInt(pageString);
/*if (isNaN(page)) { return; }
2018-10-05 17:00:54 +02:00
const pageIndex = this.pages.indexOf(page);
if (pageIndex === -1) { return; }*/
this.stepper.selectedIndex = page;
2018-10-05 17:00:54 +02:00
}
2018-05-28 11:50:42 +02:00
}