2017-12-08 18:12:31 +01:00
|
|
|
|
import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
|
2017-11-23 12:26:22 +01:00
|
|
|
|
import { TestModel } from '../testModel/testmodel';
|
|
|
|
|
import { DatasetModel } from '../models/DatasetModel';
|
|
|
|
|
import { Rule } from '../models/Rule';
|
2017-12-08 18:12:31 +01:00
|
|
|
|
import { Section } from '../models/Section';
|
2017-11-23 12:26:22 +01:00
|
|
|
|
|
|
|
|
|
import { JsonSerializer } from '../utilities/JsonSerializer';
|
2017-12-06 09:46:05 +01:00
|
|
|
|
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
|
2017-11-10 10:53:01 +01:00
|
|
|
|
import { FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
|
2017-09-14 12:37:36 +02:00
|
|
|
|
import { NgForm } from '@angular/forms';
|
2017-10-30 15:56:50 +01:00
|
|
|
|
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
|
2017-09-28 17:05:46 +02:00
|
|
|
|
import 'rxjs/add/operator/switchMap';
|
2017-09-14 12:37:36 +02:00
|
|
|
|
|
2017-12-13 13:01:43 +01:00
|
|
|
|
//import { FieldBase } from '../../app/form/fields/field-base';
|
2017-09-14 12:37:36 +02:00
|
|
|
|
import { FieldControlService } from '../../app/services/field-control.service';
|
|
|
|
|
import { ServerService } from '../../app/services/server.service';
|
2017-11-01 18:18:27 +01:00
|
|
|
|
import { TokenService, TokenProvider } from '../services/login/token.service';
|
2017-11-07 15:40:32 +01:00
|
|
|
|
import { ModalComponent } from '../modal/modal.component';
|
2017-09-14 12:37:36 +02:00
|
|
|
|
|
2017-12-05 17:56:21 +01:00
|
|
|
|
import { Location } from '@angular/common';
|
2017-11-20 11:29:42 +01:00
|
|
|
|
|
2017-11-01 10:09:47 +01:00
|
|
|
|
import { AngularDraggableModule } from 'angular2-draggable';
|
|
|
|
|
|
2017-12-05 17:56:21 +01:00
|
|
|
|
import { MenuItem } from 'primeng/primeng';
|
2017-11-15 16:11:35 +01:00
|
|
|
|
|
2017-12-05 17:56:21 +01:00
|
|
|
|
import { PDFService } from '../services/transformers/pdf.service';
|
2017-11-29 11:20:17 +01:00
|
|
|
|
|
2017-10-17 11:13:10 +02:00
|
|
|
|
import './../../assets/xml2json.min.js';
|
|
|
|
|
declare var X2JS: any;
|
|
|
|
|
|
2017-11-01 10:09:47 +01:00
|
|
|
|
var flatten = require('flat');
|
2017-12-05 17:56:21 +01:00
|
|
|
|
declare var $: any;
|
2017-11-01 10:09:47 +01:00
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import * as scroll from '../../assets/jquery.scrollTo.min.js';
|
|
|
|
|
|
|
|
|
|
|
2017-11-10 12:38:18 +01:00
|
|
|
|
import '../../assets/custom.js';
|
2017-12-05 17:56:21 +01:00
|
|
|
|
declare function simple_notifier(type: string, title: string, message: string): any;
|
2017-11-10 12:38:18 +01:00
|
|
|
|
|
2017-11-01 10:09:47 +01:00
|
|
|
|
|
2017-11-10 12:38:18 +01:00
|
|
|
|
//import '../../assets/perfect-scrollbar/perfect-scrollbar.js';
|
2017-12-05 17:56:21 +01:00
|
|
|
|
declare var PerfectScrollbar: any;
|
2017-11-01 10:09:47 +01:00
|
|
|
|
|
2017-09-14 12:37:36 +02:00
|
|
|
|
@Component({
|
|
|
|
|
selector: 'dynamic-form',
|
|
|
|
|
templateUrl: './dynamic-form.component.html',
|
2017-11-10 12:38:18 +01:00
|
|
|
|
styleUrls: [
|
2017-12-06 09:46:05 +01:00
|
|
|
|
'./dynamic-form.component.css'
|
2017-11-10 12:38:18 +01:00
|
|
|
|
],
|
2017-11-10 11:24:20 +01:00
|
|
|
|
providers: [
|
2017-11-27 14:40:16 +01:00
|
|
|
|
FieldControlService, ServerService
|
2017-12-06 09:46:05 +01:00
|
|
|
|
],
|
|
|
|
|
encapsulation: ViewEncapsulation.None,
|
2017-09-14 12:37:36 +02:00
|
|
|
|
})
|
|
|
|
|
export class DynamicFormComponent implements OnInit {
|
|
|
|
|
|
2017-11-23 12:26:22 +01:00
|
|
|
|
@Input() dataModel: DatasetModel = new DatasetModel();
|
2017-12-06 13:16:31 +01:00
|
|
|
|
@Input() path: string;
|
2017-10-04 11:39:45 +02:00
|
|
|
|
form: FormGroup;
|
2017-11-03 18:14:32 +01:00
|
|
|
|
id: string;
|
|
|
|
|
datasetId: string;
|
2017-12-05 17:56:21 +01:00
|
|
|
|
pathName: string;
|
2017-12-11 15:21:49 +01:00
|
|
|
|
pages: Array<number>;
|
2017-12-06 13:16:31 +01:00
|
|
|
|
stepperItems: MenuItem[] = new Array<MenuItem>();
|
2017-12-06 09:46:05 +01:00
|
|
|
|
activeStepperIndex: number = 1;
|
|
|
|
|
visibleSidebar: boolean = false;
|
|
|
|
|
|
2017-12-06 13:16:31 +01:00
|
|
|
|
private progressbar: boolean = false;
|
2017-12-11 15:21:49 +01:00
|
|
|
|
private currentPageIndex: number = 0;
|
2017-10-10 16:10:00 +02:00
|
|
|
|
|
2017-12-06 13:16:31 +01:00
|
|
|
|
private fragment: string;
|
2017-12-06 17:45:54 +01:00
|
|
|
|
constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService,
|
|
|
|
|
private _location: Location, private route: ActivatedRoute, private tokenService: TokenService
|
2017-12-13 13:01:43 +01:00
|
|
|
|
, private visibilityRulesService: VisibilityRulesService
|
2017-12-06 17:45:54 +01:00
|
|
|
|
) {
|
2017-12-06 13:16:31 +01:00
|
|
|
|
this.datasetId = route.snapshot.params['id'];
|
|
|
|
|
}
|
2017-10-04 11:39:45 +02:00
|
|
|
|
|
|
|
|
|
getSubForm(subformName) {
|
2017-09-29 18:16:37 +02:00
|
|
|
|
return this.form.controls[subformName];
|
|
|
|
|
}
|
2017-10-04 11:39:45 +02:00
|
|
|
|
|
|
|
|
|
|
2017-09-14 12:37:36 +02:00
|
|
|
|
ngOnInit() {
|
2017-12-06 09:46:05 +01:00
|
|
|
|
|
2017-12-07 16:15:28 +01:00
|
|
|
|
this.serverService.getSingleDataset(this.datasetId).subscribe(
|
2017-12-06 13:16:31 +01:00
|
|
|
|
response => {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
|
|
|
|
|
this.pages = this.getPages(this.dataModel);
|
2017-12-11 10:20:27 +01:00
|
|
|
|
this.createPagination();
|
2017-12-06 13:16:31 +01:00
|
|
|
|
this.form = this.dataModel.buildForm();
|
|
|
|
|
this.visibilityRulesService.formGroup = this.form;
|
|
|
|
|
let rules: Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules, Rule);
|
|
|
|
|
this.visibilityRulesService.buildVisibilityRules(rules)
|
2017-12-11 10:20:27 +01:00
|
|
|
|
this.progressbar = true;
|
|
|
|
|
|
2017-12-13 13:01:43 +01:00
|
|
|
|
this.route.fragment.subscribe((fragment: string) => {
|
|
|
|
|
var self = this;
|
|
|
|
|
setTimeout(function () { self.scrollTo(fragment) });
|
2017-12-11 10:20:27 +01:00
|
|
|
|
});
|
2017-12-13 13:01:43 +01:00
|
|
|
|
|
2017-12-11 10:20:27 +01:00
|
|
|
|
this.route.queryParams.subscribe((params) => {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
if (params && "page" in params)
|
|
|
|
|
this.changeCurrentPage(params["page"]);
|
2017-12-11 10:20:27 +01:00
|
|
|
|
});
|
2017-12-06 13:16:31 +01:00
|
|
|
|
},
|
|
|
|
|
error => {
|
|
|
|
|
console.log("Could not load dmp");
|
2017-12-06 09:46:05 +01:00
|
|
|
|
}
|
2017-12-06 13:16:31 +01:00
|
|
|
|
)
|
2017-12-05 17:56:21 +01:00
|
|
|
|
|
2017-12-06 13:16:31 +01:00
|
|
|
|
/* else{
|
|
|
|
|
|
|
|
|
|
this.addSection();
|
|
|
|
|
}
|
|
|
|
|
this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(TestModel,DatasetModel);
|
|
|
|
|
this.form = this.dataModel.buildForm();
|
|
|
|
|
this.visibilityRulesService.formGroup = this.form;
|
|
|
|
|
let rules:Rule[] = new JsonSerializer<Rule>().fromJSONArray(TestModel.rules,Rule);
|
|
|
|
|
this.visibilityRulesService.buildVisibilityRules(rules) */
|
2017-11-01 10:09:47 +01:00
|
|
|
|
}
|
|
|
|
|
|
2017-12-06 13:16:31 +01:00
|
|
|
|
submit() {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
this.serverService.updateDataset(this.datasetId, this.form.value).subscribe()
|
2017-12-05 17:56:21 +01:00
|
|
|
|
}
|
2017-12-13 13:01:43 +01:00
|
|
|
|
|
2017-12-06 09:46:05 +01:00
|
|
|
|
toggleSidebar() {
|
|
|
|
|
this.visibleSidebar = !this.visibleSidebar;
|
|
|
|
|
}
|
2017-12-06 13:16:31 +01:00
|
|
|
|
|
2017-12-11 15:21:49 +01:00
|
|
|
|
getPages(model: DatasetModel): Array<number> {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
let pageSet = new Set<number>();
|
2017-12-11 15:21:49 +01:00
|
|
|
|
|
2017-12-13 13:01:43 +01:00
|
|
|
|
model.sections.forEach(section => {
|
|
|
|
|
pageSet.add(section.page);
|
|
|
|
|
});
|
2017-12-11 15:21:49 +01:00
|
|
|
|
|
2017-12-13 13:01:43 +01:00
|
|
|
|
return Array.from(pageSet).sort((a, b) => a - b);
|
2017-12-06 13:16:31 +01:00
|
|
|
|
}
|
|
|
|
|
|
2017-12-08 18:12:31 +01:00
|
|
|
|
shouldDisplaySection(section: Section): Boolean {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
return (section.page) == this.currentPageIndex;
|
2017-12-11 10:20:27 +01:00
|
|
|
|
}
|
2017-12-11 11:36:29 +01:00
|
|
|
|
|
2017-12-11 10:20:27 +01:00
|
|
|
|
createPagination() {
|
|
|
|
|
this.pages.forEach(item => {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
this.stepperItems.push({
|
|
|
|
|
label: '',
|
|
|
|
|
})
|
2017-12-11 10:20:27 +01:00
|
|
|
|
});
|
2017-12-06 13:16:31 +01:00
|
|
|
|
}
|
2017-12-11 15:21:49 +01:00
|
|
|
|
|
|
|
|
|
changePageIndex(index: any) {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
this.router.navigate([this.route.snapshot.url[0] + "/" + this.route.snapshot.url[1]], { queryParams: { page: this.pages[index-1] } });
|
2017-12-11 15:21:49 +01:00
|
|
|
|
}
|
|
|
|
|
|
2017-12-11 17:39:32 +01:00
|
|
|
|
scrollTo(sectionID: string) {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
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;
|
2017-12-11 17:39:32 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
changeCurrentPage(pageString: string) {
|
2017-12-13 13:01:43 +01:00
|
|
|
|
if (!pageString) return;
|
|
|
|
|
var page = parseInt(pageString);
|
|
|
|
|
if (isNaN(page)) return;
|
|
|
|
|
var pageIndex = this.pages.indexOf(page);
|
|
|
|
|
if (pageIndex === -1) return;
|
|
|
|
|
this.currentPageIndex = page;
|
|
|
|
|
}
|
|
|
|
|
/* scrollToElemID(elemID) {
|
|
|
|
|
scroll("#" + elemID);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
private patchForm(flatList: any) {
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
for (var prop in flatList) {
|
|
|
|
|
if (flatList.hasOwnProperty(prop)) {
|
|
|
|
|
if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue;
|
|
|
|
|
//console.log("updating value of "+prop +" to "+flatList[prop].valueOf())
|
|
|
|
|
this.form.get(prop).setValue(flatList[prop].valueOf());
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
ngAfterViewChecked(): void { //navigate to certain section of the page
|
|
|
|
|
try {
|
|
|
|
|
document.querySelector('#' + this.fragment).scrollIntoView();
|
|
|
|
|
} catch (e) { }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
SaveForm() {
|
|
|
|
|
let final = false;
|
|
|
|
|
this.submitForm(false);
|
|
|
|
|
|
|
|
|
|
this.payLoad = JSON.stringify(this.form.value);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
SaveFinalizeForm(){
|
|
|
|
|
$("#confirmModal").modal("hide");
|
|
|
|
|
let final = true;
|
|
|
|
|
this.submitForm(final);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
shouldIShow(element) { //pagination , pages are declared in xml for every groupfield
|
|
|
|
|
|
|
|
|
|
if (this.pagination.currentPage == element.page){
|
|
|
|
|
return true;
|
|
|
|
|
}
|
|
|
|
|
else
|
|
|
|
|
return false;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
setPage(page: number) {
|
|
|
|
|
|
|
|
|
|
if (page < 1 || page > this.pagination.totalPages) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
var pagesize = 4;
|
|
|
|
|
// get pagination object from service
|
|
|
|
|
this.pagination = this.pagerService.getPagination(this.dataModel.groups, this.dataModel.groups.length, page, pagesize);
|
|
|
|
|
|
|
|
|
|
//get current page of items
|
|
|
|
|
// this.dataModel.sections.forEach(section => {
|
|
|
|
|
// if (section.groupFields.length > 0) {
|
|
|
|
|
// section.groupFields = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
//this.dataModel.groups = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
toggleTOC(){
|
|
|
|
|
this.expandedToc = !this.expandedToc;
|
2017-12-11 15:21:49 +01:00
|
|
|
|
}
|
2017-12-13 13:01:43 +01:00
|
|
|
|
*/
|
2017-11-29 11:20:17 +01:00
|
|
|
|
|
2017-12-06 13:16:31 +01:00
|
|
|
|
createPDF(elementID: string, pdffilename: string) {
|
|
|
|
|
this.pdfService.toPDF(elementID, pdffilename);
|
|
|
|
|
}
|
2017-11-29 11:20:17 +01:00
|
|
|
|
|
|
|
|
|
|
2017-09-14 12:37:36 +02:00
|
|
|
|
}
|