Group data set profile form components to one folder.

Add page model and the relative component.
Add the ability to add or remove pages on the form.
Change section form page control to a selection, with it's values derived from the available pages of the form.
This commit is contained in:
krommydas kyriakos 2017-12-20 18:46:52 +02:00
parent b1e4787a92
commit 2c4a9c42cf
34 changed files with 254 additions and 126 deletions

View File

@ -1,4 +1,4 @@
import { BrowserModule } from '@angular/platform-browser';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
//import { HttpModule, Http, Response, RequestOptions, RequestMethod, Headers, URLSearchParams } from '@angular/http';
@ -61,12 +61,13 @@ import { DatareposEditorComponent } from './managers/datarepos-editor/datarepos-
import { DatasetprofileEditorComponent } from './managers/datasetprofile-editor/datasetprofile-editor.component';
import { DatasetProfileGUIEditorComponent } from './dataset-profile-gui-editor/dataset-profile-gui-editor.component';
import { FieldFormComponent } from './field-form/field-form.component';
import { FormComponent } from './form/form.component';
import { GroupFieldFormComponent } from './groupfield-form/groupfield-form.component';
import { RuleFormComponent } from './rule-component/rule.component';
import { SectionFormComponent } from './section-form/section-form.component';
import { CompositeFieldFormComponent } from './compositefield-form/compositefield-form.component';
import { FieldFormComponent } from './dataset-profile-form/field-form/field-form.component';
import { FormComponent } from './dataset-profile-form/form/form.component';
import { GroupFieldFormComponent } from './dataset-profile-form/groupfield-form/groupfield-form.component';
import { RuleFormComponent } from './dataset-profile-form/rule-component/rule.component';
import { SectionFormComponent } from './dataset-profile-form/section-form/section-form.component';
import { PageFormComponent } from './dataset-profile-form/page-form/page-component';
import { CompositeFieldFormComponent } from './dataset-profile-form/compositefield-form/compositefield-form.component';
import { ComboboxComponent } from './combobox/combobox-component';
import { AutocompleteComponent } from './autocomplete/autocomplete-component';
import { WordlistComponent } from './wordlist/wordlist-component';
@ -93,7 +94,8 @@ import { RadioBoxComponent } from './radiobox/radiobox-component';
FormComponent,
GroupFieldFormComponent,
RuleFormComponent,
SectionFormComponent,
SectionFormComponent,
PageFormComponent,
CompositeFieldFormComponent,
ComboboxComponent,
AutocompleteComponent,

View File

@ -1,9 +1,9 @@
import { FormGroup } from '@angular/forms';
import { Field } from '../models/Field';
import { FormGroup } from '@angular/forms';
import { Field } from 'app/models/DataSetProfile/Field';
import { Component, Input, OnInit } from '@angular/core';
import { AutocompleteData } from '../models/DataField/AutocompleteData';
import { AutocompleteData } from 'app/models/DataField/AutocompleteData';
import { FormArray } from '@angular/forms/src/model';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
@Component({
selector: 'autocomplete-component',

View File

@ -1,5 +1,5 @@
import { FormGroup } from '@angular/forms';
import { Field } from '../models/Field';
import { FormGroup } from '@angular/forms';
import { Field } from 'app/models/DataSetProfile/Field';
import { Component, Input, OnInit } from '@angular/core';
@Component({

View File

@ -1,7 +1,7 @@
import { Component, Input } from '@angular/core';
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { CompositeField } from '../models/CompositeField';
import { Field } from '../models/Field';
import { CompositeField } from 'app/models/DataSetProfile/CompositeField';
import { Field } from 'app/models/DataSetProfile/Field';
import { FormArray, FormControl } from '@angular/forms/src/model';
@Component({

View File

@ -1,10 +1,10 @@
import { Component, Input } from '@angular/core';
import { Component, Input } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { Field } from '../models/Field';
import { Rule } from '../models/Rule';
import { Multiplicity } from '../models/Multiplicity';
import { Field } from 'app/models/DataSetProfile/Field';
import { Rule } from 'app/models/DataSetProfile/Rule';
import { Multiplicity } from 'app/models/DataSetProfile/Multiplicity';
import { FormArray } from '@angular/forms/src/model';
import { ComboboxComponent } from '../combobox/combobox-component';
import { ComboboxComponent } from 'app/combobox/combobox-component';
@Component({
selector: 'field-form',

View File

@ -1,4 +1,4 @@
<div class="container">
<div class="container">
<div style="background-color: #f5f5f5;border: 1px solid #e3e3e3;padding: 24px;">
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
<div class="row">
@ -29,12 +29,39 @@
</div>
</div>
<div style="margin-top:20px; padding-left: 15px;">
<div class="panel-group" style="margin-top:10px;">
<div *ngFor="let page of dataModel.pages; let i=index;" class="panel panel-default">
<div class="panel-heading clearfix">
<a *ngIf="form.get('pages').at(i).get('title').value" data-toggle="collapse" href="#{{'p' + i}}" class="panel-title pull-left"
style="padding-top: 7.5px;">{{i + 1}}.{{form.get('pages').at(i).get('title').value}}</a>
<a *ngIf="!form.get('pages').at(i).get('title').value" data-toggle="collapse" href="#{{'p' + i}}" class="panel-title pull-left"
style="padding-top: 7.5px;">{{i + 1}}. Page{{i + 1}}</a>
<div class="btn-group pull-right">
<button type="button" class="btn btn-sm" style="margin-left:5px;" (click)="DeletePage(i);">
<span class="glyphicon glyphicon-erase"></span>
</button>
</div>
</div>
<div id="{{'p' + i}}" class="panel-collapse collapse in">
<div class="panel-body">
<page-form [form]="form.get('pages').at(i)" [dataModel]="page"></page-form>
</div>
</div>
</div>
</div>
<div style="margin-top:20px; padding-left: 15px;" class="row">
<a (click)="addSection()" style="cursor: pointer">
Add Section +
</a>
</div>
<div style="margin-top:20px; padding-left: 15px;" class="row">
<a (click)="addPage()" style="cursor: pointer">
Add Page +
</a>
</div>
<button class="btn btn-primary" style="margin-top:20px;" type="submit">Save</button>
</form>
</div>

View File

@ -1,15 +1,17 @@
import { DatasetProfileService } from '../services/dataset-profile.service';
import { DatasetProfileService } from 'app/services/dataset-profile.service';
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
import { SectionFormComponent } from '../section-form/section-form.component';
import { Section } from '../models/Section';
import { FieldGroup } from '../models/FieldGroup';
import { DatasetProfileModel } from '../models/DatasetProfileModel';
import { TestModel } from '../testModel/testModel';
import { Section } from 'app/models/DataSetProfile/Section';
import { FieldGroup } from 'app/models/DataSetProfile/FieldGroup';
import { DatasetProfileModel } from 'app/models/DataSetProfile/DatasetProfileModel';
import { TestModel } from 'app/testModel/testModel';
import { FormArray } from '@angular/forms/src/model';
import { RestBase } from '../services/rest-base';
import { RestBase } from 'app/services/rest-base';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
import { Page } from 'app/models/DataSetProfile/Page'
import { PageFormComponent } from '../page-form/page-component'
@Component({
selector: 'form-comp',
@ -41,7 +43,8 @@ export class FormComponent {
}
else{
this.addSection();
this.addSection();
this.addPage(0);
}
// this.dataModel = new JsonSerializer<DatasetProfileModel>().fromJSONObject(TestModel, DatasetProfileModel);
@ -61,11 +64,22 @@ export class FormComponent {
(<FormArray>this.form.get("sections")).push(section.buildForm());
}
addPage(number) {
let page: Page = new Page(this.dataModel.pages.length);
this.dataModel.pages.push(page);
(<FormArray>this.form.get("pages")).push(page.buildForm());
}
DeleteSection(index) {
this.dataModel.sections.splice(index,1);
(<FormArray>this.form.get("sections")).removeAt(index)
}
DeletePage(index) {
this.dataModel.pages.splice(index, 1);
(<FormArray>this.form.get("pages")).removeAt(index)
}
createForm(data) {
return this.restBase.post("/admin/addDmp", data);
}

View File

@ -1,9 +1,9 @@
import { Component, Input, OnInit } from '@angular/core';
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FieldGroup } from '../models/FieldGroup';
import { CompositeField } from '../models/CompositeField';
import { FieldGroup } from 'app/models/DataSetProfile/FieldGroup';
import { CompositeField } from 'app/models/DataSetProfile/CompositeField';
import { FormArray } from '@angular/forms/src/model';
import { Field } from '../models/Field';
import { Field } from 'app/models/DataSetProfile/Field';
@Component({
selector: 'groupfield-form',

View File

@ -0,0 +1,8 @@
<div>
<div [formGroup]="form" class="row">
<div class="col-md-4">
<label>Title</label>
<input type="text" class="form-control" formControlName="title">
</div>
</div>
</div>

View File

@ -0,0 +1,18 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms'
import { Page } from 'app/models/DataSetProfile/Page'
@Component({
selector: 'page-form',
templateUrl: './page-component.html',
styleUrls: []
})
export class PageFormComponent {
@Input() form: FormGroup;
@Input() dataModel: Page;
TargetValidation() {
}
}

View File

@ -1,6 +1,6 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormGroup } from '@angular/forms'
import { Rule } from '../models/Rule'
import { Rule } from 'app/models/DataSetProfile/Rule'
@Component({
selector: 'rule-form',

View File

@ -1,4 +1,4 @@
<div class="section-container">
<div class="section-container">
<div class="row" [formGroup]="form">
<div class="row">
<div class="form-group col-md-4">
@ -15,7 +15,10 @@
</div>
<div class="form-group col-md-2">
<label>Page</label>
<input type="number" class="form-control" formControlName="page">
<select class="form-control" formControlName="page">
<option *ngFor="let pageGroup of form.root.get('pages').controls;" [value]="pageGroup.get('id').value">{{pageGroup.get('title').value}}</option>
</select>
<div *ngIf="form.get('page').invalid && (form.get('page').dirty || form.get('page').touched)" class="alert alert-danger">Page is required</div>
</div>
<div class="form-group col-md-2">
<label class="radio control-label">Default Visibility</label>

View File

@ -1,12 +1,13 @@
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Section } from '../models/Section';
import { FieldGroup } from '../models/FieldGroup';
import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { Section } from 'app/models/DataSetProfile/Section';
import { FieldGroup } from 'app/models/DataSetProfile/FieldGroup';
import { FormArray } from '@angular/forms/src/model';
import { DatasetProfileModel } from '../models/DatasetProfileModel';
import { CompositeField } from '../models/CompositeField';
import { Field } from '../models/Field';
import { DatasetProfileModel } from 'app/models/DataSetProfile/DatasetProfileModel';
import { CompositeField } from 'app/models/DataSetProfile/CompositeField';
import { Field } from 'app/models/DataSetProfile/Field';
import { Page } from 'app/models/DataSetProfile/Page';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
@Component({
selector: 'section-form',
@ -23,7 +24,11 @@ export class SectionFormComponent {
constructor() { }
ngOnInit() {
//this.addGroupField(); //for new DatasetProfile
var self = this;
this.form.root.get("pages").valueChanges.subscribe(function(value) {
self.keepPageSelectionValid(value);
});
}
addGroupField() {
@ -60,4 +65,10 @@ export class SectionFormComponent {
(<FormArray>this.form.get("sections")).removeAt(index);
}
keepPageSelectionValid(pagesJson: Array<any>) {
let selectedPage = this.form.get("page").value as number;
let pages: Array<Page> = new JsonSerializer<Page>().fromJSONArray(pagesJson, Page);
if (!isNaN(selectedPage) && pages.find(elem => elem.id === selectedPage) === undefined)
this.form.get("page").reset();
}
}

View File

@ -1,7 +1,7 @@
import { FormGroup } from '@angular/forms';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Serializable } from './interfaces/Serializable';
import { BaseModel } from './BaseModel';
import { FormGroup } from '@angular/forms';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
import { Serializable } from '../interfaces/Serializable';
import { BaseModel } from '../BaseModel';
import {Field} from './Field'
import {Multiplicity} from './Multiplicity'

View File

@ -0,0 +1,43 @@
import { BaseModel } from '../BaseModel';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { FormGenerator } from '../interfaces/FormGenerator';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
import { Section } from './Section';
import { Serializable } from '../interfaces/Serializable';
import { Page } from "./Page";
export class DatasetProfileModel extends BaseModel implements Serializable<DatasetProfileModel>,FormGenerator<FormGroup>{
public sections: Array<Section> = new Array<Section>();
public pages: Array<Page> = new Array<Page>();
public label: string;
fromJSONObject(item:any):DatasetProfileModel{
this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections, Section);
this.pages = new JsonSerializer<Page>().fromJSONArray(item.pages, Page);
this.label = item.label;
return this;
}
buildForm():FormGroup{
let formGroup: FormGroup = new FormBuilder().group({});
let sectionsFormArray = new Array<FormGroup>();
this.sections.forEach(item => {
let form: FormGroup = item.buildForm();
sectionsFormArray.push(form)
})
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
let pagesFormArray = new Array<FormGroup>();
this.pages.forEach(item => {
let form: FormGroup = item.buildForm();
pagesFormArray.push(form)
})
formGroup.addControl('pages', this.formBuilder.array(pagesFormArray));
formGroup.addControl('label', new FormControl(this.label));
return formGroup;
}
}

View File

@ -1,7 +1,7 @@
import { BaseModel } from './BaseModel';
import { BaseModel } from '../BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { Serializable } from './interfaces/Serializable';
import { FormGenerator } from '../interfaces/FormGenerator';
import { Serializable } from '../interfaces/Serializable';
export class DefaultValue extends BaseModel implements Serializable<DefaultValue>,FormGenerator<FormGroup>{
public type:string;

View File

@ -1,12 +1,12 @@
import { RadioBoxData } from './DataField/RadioBoxData';
import { WordListData } from './DataField/WordListData';
import { AutocompleteData } from './DataField/AutocompleteData';
import { DataField } from './DataField/DataField';
import { BaseModel } from './BaseModel';
import { RadioBoxData } from '../DataField/RadioBoxData';
import { WordListData } from '../DataField/WordListData';
import { AutocompleteData } from '../DataField/AutocompleteData';
import { DataField } from '../DataField/DataField';
import { BaseModel } from '../BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Serializable } from './interfaces/Serializable';
import { FormGenerator } from '../interfaces/FormGenerator';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
import { Serializable } from '../interfaces/Serializable';
import {Rule} from './Rule';
import {Multiplicity} from './Multiplicity';
import {DefaultValue} from './DefaultValue';

View File

@ -1,11 +1,11 @@
import { CompositeField } from './CompositeField';
import { BaseModel } from './BaseModel';
import { CompositeField } from './CompositeField';
import { BaseModel } from '../BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { Validation } from './Validation';
import { FormGenerator } from '../interfaces/FormGenerator';
import { Validation } from '../Validation';
import { Rule } from './Rule';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Serializable } from './interfaces/Serializable';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
import { Serializable } from '../interfaces/Serializable';
import { Field } from './Field';
export class FieldGroup extends BaseModel implements Serializable<FieldGroup>, FormGenerator<FormGroup>{

View File

@ -1,7 +1,7 @@
import { BaseModel } from './BaseModel';
import { BaseModel } from '../BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { Serializable } from './interfaces/Serializable';
import { FormGenerator } from '../interfaces/FormGenerator';
import { Serializable } from '../interfaces/Serializable';
export class Multiplicity extends BaseModel implements Serializable<Multiplicity>,FormGenerator<FormGroup>{
public min:number;
public max:string;

View File

@ -0,0 +1,30 @@
import { BaseModel } from '../BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from '../interfaces/FormGenerator';
import { Serializable } from '../interfaces/Serializable';
export class Page extends BaseModel implements Serializable<Page>, FormGenerator<FormGroup>{
public title: string;
public id: number;
constructor(id?: number) {
super();
if (isNaN(id)) this.id = 0;
else this.id = id;
}
fromJSONObject(item: any): Page {
this.title = item.title;
this.id = item.id;
return this;
}
buildForm(): FormGroup {
let formGroup = this.formBuilder.group({
title: [this.title],
id: [this.id]
});
return formGroup;
}
}

View File

@ -1,7 +1,7 @@
import { BaseModel } from './BaseModel';
import { BaseModel } from '../BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { Serializable } from './interfaces/Serializable';
import { FormGenerator } from '../interfaces/FormGenerator';
import { Serializable } from '../interfaces/Serializable';
export class Rule extends BaseModel implements Serializable<Rule>,FormGenerator<FormGroup>{
public sourceField:string;
public target:string;

View File

@ -1,9 +1,10 @@
import { BaseModel } from './BaseModel';
import { FormGenerator } from './interfaces/FormGenerator';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Serializable } from './interfaces/Serializable';
import { BaseModel } from '../BaseModel';
import { FormGenerator } from '../interfaces/FormGenerator';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
import { Serializable } from '../interfaces/Serializable';
import { FieldGroup } from './FieldGroup';
export class Section extends BaseModel implements Serializable<Section>, FormGenerator<FormGroup>{
public sections: Array<Section> = new Array<Section>();
public fieldGroups: Array<FieldGroup> = new Array<FieldGroup>();
@ -44,8 +45,8 @@ export class Section extends BaseModel implements Serializable<Section>, FormGen
}
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
formGroup.addControl('fieldGroups', this.formBuilder.array(fieldGroupsFormArray));
formGroup.addControl('defaultVisibility', new FormControl(this.defaultVisibility));
formGroup.addControl('page', new FormControl(this.page));
formGroup.addControl('defaultVisibility', new FormControl(this.defaultVisibility));
formGroup.addControl('page', new FormControl(this.page, [Validators.required]));
formGroup.addControl('id', new FormControl(this.id));
formGroup.addControl('title', new FormControl(this.title));
formGroup.addControl('description', new FormControl(this.description));

View File

@ -1,7 +1,7 @@
import { BaseModel } from './BaseModel';
import { BaseModel } from '../BaseModel';
import { FormGroup } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { Serializable } from './interfaces/Serializable';
import { FormGenerator } from '../interfaces/FormGenerator';
import { Serializable } from '../interfaces/Serializable';
export class ViewStyle extends BaseModel implements Serializable<ViewStyle>,FormGenerator<FormGroup>{
public cssClass:string;

View File

@ -1,9 +1,9 @@
import { BaseModel } from './BaseModel';
import { BaseModel } from '../BaseModel';
import { Rule } from "./Rule";
import { FormGenerator } from "./interfaces/FormGenerator";
import { FormGenerator } from "../interfaces/FormGenerator";
import { FormGroup } from '@angular/forms';
import { Serializable } from './interfaces/Serializable';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Serializable } from '../interfaces/Serializable';
import { JsonSerializer } from 'app/utilities/JsonSerializer';
export class Visibility extends BaseModel implements Serializable<Visibility>, FormGenerator<FormGroup>{
public rules: Array<Rule> = new Array<Rule>();

View File

@ -1,30 +0,0 @@
import { BaseModel } from './BaseModel';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { FormGenerator } from './interfaces/FormGenerator';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Section } from './Section';
import { Serializable } from './interfaces/Serializable';
export class DatasetProfileModel extends BaseModel implements Serializable<DatasetProfileModel>,FormGenerator<FormGroup>{
public sections:Array<Section> = new Array<Section>();
public label: string;
fromJSONObject(item:any):DatasetProfileModel{
this.sections = new JsonSerializer<Section>().fromJSONArray(item.sections,Section);
this.label = item.label;
return this;
}
buildForm():FormGroup{
let formGroup:FormGroup = new FormBuilder().group({});
let sectionsFormArray = new Array<FormGroup>();
this.sections.forEach(item => {
let form: FormGroup = item.buildForm();
sectionsFormArray.push(form)
})
formGroup.addControl('sections', this.formBuilder.array(sectionsFormArray));
formGroup.addControl('label', new FormControl(this.label));
return formGroup;
}
}

View File

@ -1,5 +1,5 @@
import { FormGroup } from '@angular/forms';
import { Field } from '../models/Field';
import { FormGroup } from '@angular/forms';
import { Field } from '../models/DataSetProfile/Field';
import { Component, Input, OnInit } from '@angular/core';
import { RadioBoxData } from '../models/DataField/RadioBoxData';
import { FormArray } from '@angular/forms/src/model';

View File

@ -1,4 +1,4 @@
import { FormComponent } from './form/form.component';
import { FormComponent } from './dataset-profile-form/form/form.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

View File

@ -1,5 +1,5 @@
import { FormGroup } from '@angular/forms';
import { Field } from '../models/Field';
import { FormGroup } from '@angular/forms';
import { Field } from '../models/DataSetProfile/Field';
import { Component, Input, OnInit } from '@angular/core';
import { WordListData } from '../models/DataField/WordListData';
import { FormArray } from '@angular/forms/src/model';

View File

@ -1,7 +1,8 @@
{
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",