2019-01-18 18:03:45 +01:00
|
|
|
|
import { AfterViewInit, Component, Input, OnInit, ViewChild } from '@angular/core';
|
2018-10-30 12:03:02 +01:00
|
|
|
|
import { FormGroup } from '@angular/forms';
|
2018-11-27 18:33:17 +01:00
|
|
|
|
import { MatStepper } from '@angular/material';
|
|
|
|
|
import { ActivatedRoute, Router } from '@angular/router';
|
2018-01-30 10:35:26 +01:00
|
|
|
|
import 'rxjs/add/operator/switchMap';
|
2018-11-27 18:33:17 +01:00
|
|
|
|
import { takeUntil } from 'rxjs/operators';
|
2019-01-18 18:03:45 +01:00
|
|
|
|
import { Pair } from '../../../common/types/pair';
|
|
|
|
|
import { BaseComponent } from '../../../core/common/base/base.component';
|
|
|
|
|
import { CompositeField } from '../../../core/model/dataset-profile-definition/composite-field';
|
|
|
|
|
import { DatasetProfileDefinitionModel } from '../../../core/model/dataset-profile-definition/dataset-profile-definition';
|
|
|
|
|
import { Rule } from '../../../core/model/dataset-profile-definition/rule';
|
|
|
|
|
import { Section } from '../../../core/model/dataset-profile-definition/section';
|
|
|
|
|
import { DatasetDescriptionFormEditorModel } from './dataset-description-form.model';
|
|
|
|
|
import { FormFocusService } from './form-focus/form-focus.service';
|
|
|
|
|
import { VisibilityRulesService } from './visibility-rules/visibility-rules.service';
|
2018-01-30 10:35:26 +01:00
|
|
|
|
|
|
|
|
|
@Component({
|
2019-01-18 18:03:45 +01:00
|
|
|
|
selector: 'app-dataset-description-form',
|
|
|
|
|
templateUrl: './dataset-description-form.component.html',
|
|
|
|
|
styleUrls: ['./dataset-description-form.component.scss']
|
2018-01-30 10:35:26 +01:00
|
|
|
|
})
|
2019-01-18 18:03:45 +01:00
|
|
|
|
export class DatasetDescriptionFormComponent extends BaseComponent 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;
|
2019-01-18 18:03:45 +01:00
|
|
|
|
datasetProfileDefinitionModel: DatasetDescriptionFormEditorModel;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
private currentPageIndex = 0;
|
2018-11-01 17:02:15 +01:00
|
|
|
|
@ViewChild('stepper') stepper: MatStepper;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
|
2019-01-18 18:03:45 +01:00
|
|
|
|
@Input() dataModel: DatasetProfileDefinitionModel;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
@Input() path: string;
|
|
|
|
|
@Input() form: FormGroup;
|
|
|
|
|
id: string;
|
|
|
|
|
trackByFn = (index, item) => item ? item['id'] : null;
|
|
|
|
|
pageTrackByFn = (index, item) => item['id'];
|
|
|
|
|
|
|
|
|
|
// @Input() datasetId: string;
|
|
|
|
|
|
2018-10-16 13:11:15 +02:00
|
|
|
|
constructor(
|
|
|
|
|
private router: Router,
|
2018-10-05 17:00:54 +02:00
|
|
|
|
private route: ActivatedRoute,
|
|
|
|
|
private visibilityRulesService: VisibilityRulesService,
|
2018-11-01 17:02:15 +01:00
|
|
|
|
private formFocusService: FormFocusService
|
2018-10-05 17:00:54 +02:00
|
|
|
|
) {
|
2018-11-27 18:33:17 +01:00
|
|
|
|
super();
|
2018-10-05 17:00:54 +02:00
|
|
|
|
//this.datasetId = route.snapshot.params['id'];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
getSubForm(subformName) {
|
|
|
|
|
return this.form.controls[subformName];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ngOnInit() {
|
|
|
|
|
|
2019-01-18 18:03:45 +01:00
|
|
|
|
const rules: Rule[] = this.dataModel.rules;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
this.visibilityRulesService.formGroup = this.form;
|
|
|
|
|
this.visibilityRulesService.buildVisibilityRules(rules);
|
2019-01-18 18:03:45 +01:00
|
|
|
|
this.datasetProfileDefinitionModel = new DatasetDescriptionFormEditorModel().fromModel(this.dataModel);
|
2018-10-05 17:00:54 +02:00
|
|
|
|
this.visibilityRulesService.setModel(this.datasetProfileDefinitionModel);
|
2018-11-01 17:02:15 +01:00
|
|
|
|
|
2018-10-05 17:00:54 +02:00
|
|
|
|
this.createPagination();
|
|
|
|
|
|
2018-11-01 17:02:15 +01:00
|
|
|
|
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-11-27 18:33:17 +01:00
|
|
|
|
this.route.fragment
|
|
|
|
|
.pipe(takeUntil(this._destroyed))
|
|
|
|
|
.subscribe((fragment: string) => {
|
|
|
|
|
const self = this;
|
|
|
|
|
setTimeout(function () { self.scrollTo(fragment); });
|
|
|
|
|
});
|
2018-11-01 17:02:15 +01:00
|
|
|
|
}
|
2018-10-05 17:00:54 +02:00
|
|
|
|
|
2018-11-01 17:02:15 +01:00
|
|
|
|
ngAfterViewInit() {
|
|
|
|
|
this.visibilityRulesService.triggerVisibilityEvaluation();
|
2018-11-27 18:33:17 +01:00
|
|
|
|
this.route.queryParams
|
|
|
|
|
.pipe(takeUntil(this._destroyed))
|
|
|
|
|
.subscribe((params) => {
|
|
|
|
|
if (params && 'page' in params) {
|
|
|
|
|
this.changeCurrentPage(params['page']);
|
|
|
|
|
}
|
|
|
|
|
});
|
2018-10-05 17:00:54 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
toggleSidebar() {
|
|
|
|
|
this.visibleSidebar = !this.visibleSidebar;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
shouldDisplaySection(section: Section): Boolean {
|
|
|
|
|
return (section.page) === this.currentPageIndex;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
createPagination() {
|
2018-11-01 17:02:15 +01:00
|
|
|
|
|
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) {
|
2018-11-01 17:02:15 +01:00
|
|
|
|
//if (!pageString) { return; }
|
2018-10-05 17:00:54 +02:00
|
|
|
|
const page = parseInt(pageString);
|
2018-11-01 17:02:15 +01:00
|
|
|
|
/*if (isNaN(page)) { return; }
|
2018-10-05 17:00:54 +02:00
|
|
|
|
const pageIndex = this.pages.indexOf(page);
|
2018-11-01 17:02:15 +01:00
|
|
|
|
if (pageIndex === -1) { return; }*/
|
|
|
|
|
this.stepper.selectedIndex = page;
|
2018-10-05 17:00:54 +02:00
|
|
|
|
}
|
2018-05-28 11:50:42 +02:00
|
|
|
|
}
|