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

import { DatasetWizardModel } from '../models/datasets/DatasetWizardModel';
import { DatasetWizardComponent } from '../dataset-wizard/dataset-wizard.component';
import { DatasetProfileDefinitionModel } from '../models/DatasetProfileDefinitionModel';
import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
import { Rule } from '../models/Rule';
import { Section } from '../models/Section';

import { JsonSerializer } from '../utilities/JsonSerializer';
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
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';
import { BaseHttpService } from '../utilities/cite-http-service-module/base-http.service';
import { DatasetWizardService } from '../services/dataset-wizard/dataset-wizard.service';

declare function simple_notifier(type: string, title: string, message: string): any;

@Component({
  selector: 'dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: [
    './dynamic-form.component.css'
  ],
  providers: [
  ],
  encapsulation: ViewEncapsulation.None,
})
export class DynamicFormComponent implements OnInit {

  @Input() dataModel: DatasetWizardModel = new DatasetWizardModel();
  @Input() path: string;
  form: FormGroup;
  id: string;
  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() {
         this.datasetProfileDefinitionModel = this.dataModel.datasetProfileDefinition
         this.pages = this.getPages(this.datasetProfileDefinitionModel);
         this.createPagination();
         this.form = this.datasetProfileDefinitionModel.buildForm();
         this.visibilityRulesService.formGroup = this.form;
         let rules: Rule[] = JsonSerializer.fromJSONArray(this.datasetProfileDefinitionModel.rules, Rule);
         this.visibilityRulesService.buildVisibilityRules(rules)
         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"]);
         });
 
    /* 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)  */
  }

  submit() {
  }
  
  save(){    
    this.datasetWizardService.saveDataset(this.datasetId, this.form.value).subscribe(data => {
      this.router.navigateByUrl("/datasets");
    });
    
  }

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