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

135 lines
4.4 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';
2018-09-06 14:50:38 +02:00
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation, AfterViewInit, ChangeDetectionStrategy } from '@angular/core';
2018-01-30 10:35:26 +01:00
import { FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
import 'rxjs/add/operator/switchMap';
import { Location } from '@angular/common';
import { MatSidenavModule } from '@angular/material/sidenav';
declare function simple_notifier(type: string, title: string, message: string): any;
@Component({
selector: 'dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: [
'./dynamic-form.component.scss'
],
providers: [
],
encapsulation: ViewEncapsulation.None,
})
export class DynamicFormComponent implements OnInit {
2018-09-06 14:50:38 +02:00
2018-01-30 10:35:26 +01:00
@Input() dataModel: DatasetWizardModel = new DatasetWizardModel();
@Input() path: string;
@Input() form: FormGroup;
id: string;
2018-09-06 14:50:38 +02:00
trackByFn = (index,item) => item["id"]
pageTrackByFn = (index,item) => item["id"]
2018-08-31 10:14:56 +02:00
2018-01-30 10:35:26 +01:00
// @Input() datasetId: string;
pathName: string;
pages: Array<number>;
activeStepperIndex: number = 1;
visibleSidebar: boolean = false;
datasetProfileDefinitionModel: DatasetProfileDefinitionModel
private progressbar: boolean = false;
private currentPageIndex: number = 0;
private fragment: string;
constructor(private router: Router,
private _location: Location,
private route: ActivatedRoute,
private visibilityRulesService: VisibilityRulesService,
private http: BaseHttpService,
private datasetWizardService: DatasetWizardService,
) {
//this.datasetId = route.snapshot.params['id'];
}
getSubForm(subformName) {
return this.form.controls[subformName];
}
ngOnInit() {
2018-08-31 10:14:56 +02:00
2018-03-05 17:18:45 +01:00
let rules: Rule[] = JsonSerializer.fromJSONArray(this.dataModel.datasetProfileDefinition.rules, Rule);
2018-01-30 10:35:26 +01:00
this.visibilityRulesService.formGroup = this.form;
this.visibilityRulesService.buildVisibilityRules(rules)
2018-03-05 17:18:45 +01:00
this.datasetProfileDefinitionModel = this.dataModel.datasetProfileDefinition
2018-09-06 14:50:38 +02:00
this.visibilityRulesService.setModel(this.datasetProfileDefinitionModel)
2018-03-05 17:18:45 +01:00
this.createPagination();
2018-01-30 10:35:26 +01:00
this.progressbar = true;
this.route.fragment.subscribe((fragment: string) => {
var self = this;
setTimeout(function () { self.scrollTo(fragment) });
});
this.route.queryParams.subscribe((params) => {
if (params && "page" in params)
this.changeCurrentPage(params["page"]);
});
}
2018-09-06 14:50:38 +02:00
2018-01-30 10:35:26 +01:00
toggleSidebar() {
this.visibleSidebar = !this.visibleSidebar;
}
// getPages(model: DatasetProfileDefinitionModel): Array<number> {
// let pageSet = new Set<number>();
// model.sections.forEach(section => {
// pageSet.add(section.page);
// });
// return Array.from(pageSet).sort((a, b) => a - b);
// }
shouldDisplaySection(section: Section): Boolean {
return (section.page) == this.currentPageIndex;
}
createPagination() {
/*this.pages.forEach(item => {
this.stepperItems.push({
label: '',
})
});*/
}
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;
var element = document.querySelector('#' + sectionID);
if (!element) return;
element.scrollIntoView();
this.visibleSidebar = true;
var scrollElement = document.querySelector('.scrollableContent');
//scrollElement.scrollTop = topElement.offsetTop;
}
changeCurrentPage(pageString: string) {
if (!pageString) return;
var page = parseInt(pageString);
if (isNaN(page)) return;
var pageIndex = this.pages.indexOf(page);
if (pageIndex === -1) return;
this.currentPageIndex = page;
}
2018-05-28 11:50:42 +02:00
}