From 2c4a9c42cf0544ea36a63bd4cb8adb27140135f5 Mon Sep 17 00:00:00 2001
From: krommydas kyriakos <krommydas@cite.gr>
Date: Wed, 20 Dec 2017 18:46:52 +0200
Subject: [PATCH] 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.

---
 dmp-admin/src/app/app.module.ts               | 18 ++++----
 .../autocomplete/autocomplete-component.ts    |  8 ++--
 .../src/app/combobox/combobox-component.ts    |  4 +-
 .../compositefield-form.component.html        |  0
 .../compositefield-form.component.ts          |  6 +--
 .../field-form/field-form.component.html      |  0
 .../field-form/field-form.component.ts        | 10 ++---
 .../form/form.component.html                  | 31 ++++++++++++-
 .../form/form.component.ts                    | 30 +++++++++----
 .../groupfield-form.component.html            |  0
 .../groupfield-form.component.ts              |  8 ++--
 .../page-form/page-component.html             |  8 ++++
 .../page-form/page-component.ts               | 18 ++++++++
 .../rule-component/rule.component.html        |  0
 .../rule-component/rule.component.ts          |  4 +-
 .../section-form/section-form.component.css   |  0
 .../section-form/section-form.component.html  |  7 ++-
 .../section-form/section-form.component.ts    | 29 +++++++++----
 .../{ => DataSetProfile}/CompositeField.ts    |  8 ++--
 .../DataSetProfile/DatasetProfileModel.ts     | 43 +++++++++++++++++++
 .../{ => DataSetProfile}/DefaultValue.ts      |  6 +--
 .../app/models/{ => DataSetProfile}/Field.ts  | 16 +++----
 .../models/{ => DataSetProfile}/FieldGroup.ts | 12 +++---
 .../{ => DataSetProfile}/Multiplicity.ts      |  6 +--
 .../src/app/models/DataSetProfile/Page.ts     | 30 +++++++++++++
 .../app/models/{ => DataSetProfile}/Rule.ts   |  6 +--
 .../models/{ => DataSetProfile}/Section.ts    | 15 ++++---
 .../models/{ => DataSetProfile}/ViewStyle.ts  |  6 +--
 .../models/{ => DataSetProfile}/Visibility.ts |  8 ++--
 .../src/app/models/DatasetProfileModel.ts     | 30 -------------
 .../src/app/radiobox/radiobox-component.ts    |  4 +-
 dmp-admin/src/app/routes.ts                   |  2 +-
 .../src/app/wordlist/wordlist-component.ts    |  4 +-
 dmp-admin/tsconfig.json                       |  3 +-
 34 files changed, 254 insertions(+), 126 deletions(-)
 rename dmp-admin/src/app/{ => dataset-profile-form}/compositefield-form/compositefield-form.component.html (100%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/compositefield-form/compositefield-form.component.ts (89%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/field-form/field-form.component.html (100%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/field-form/field-form.component.ts (80%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/form/form.component.html (58%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/form/form.component.ts (71%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/groupfield-form/groupfield-form.component.html (100%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/groupfield-form/groupfield-form.component.ts (79%)
 create mode 100644 dmp-admin/src/app/dataset-profile-form/page-form/page-component.html
 create mode 100644 dmp-admin/src/app/dataset-profile-form/page-form/page-component.ts
 rename dmp-admin/src/app/{ => dataset-profile-form}/rule-component/rule.component.html (100%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/rule-component/rule.component.ts (66%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/section-form/section-form.component.css (100%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/section-form/section-form.component.html (91%)
 rename dmp-admin/src/app/{ => dataset-profile-form}/section-form/section-form.component.ts (58%)
 rename dmp-admin/src/app/models/{ => DataSetProfile}/CompositeField.ts (85%)
 create mode 100644 dmp-admin/src/app/models/DataSetProfile/DatasetProfileModel.ts
 rename dmp-admin/src/app/models/{ => DataSetProfile}/DefaultValue.ts (76%)
 rename dmp-admin/src/app/models/{ => DataSetProfile}/Field.ts (87%)
 rename dmp-admin/src/app/models/{ => DataSetProfile}/FieldGroup.ts (86%)
 rename dmp-admin/src/app/models/{ => DataSetProfile}/Multiplicity.ts (76%)
 create mode 100644 dmp-admin/src/app/models/DataSetProfile/Page.ts
 rename dmp-admin/src/app/models/{ => DataSetProfile}/Rule.ts (85%)
 rename dmp-admin/src/app/models/{ => DataSetProfile}/Section.ts (82%)
 rename dmp-admin/src/app/models/{ => DataSetProfile}/ViewStyle.ts (78%)
 rename dmp-admin/src/app/models/{ => DataSetProfile}/Visibility.ts (80%)
 delete mode 100644 dmp-admin/src/app/models/DatasetProfileModel.ts

diff --git a/dmp-admin/src/app/app.module.ts b/dmp-admin/src/app/app.module.ts
index fd7dd5a74..1d56beb33 100644
--- a/dmp-admin/src/app/app.module.ts
+++ b/dmp-admin/src/app/app.module.ts
@@ -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,
diff --git a/dmp-admin/src/app/autocomplete/autocomplete-component.ts b/dmp-admin/src/app/autocomplete/autocomplete-component.ts
index 01c75b904..c4021147e 100644
--- a/dmp-admin/src/app/autocomplete/autocomplete-component.ts
+++ b/dmp-admin/src/app/autocomplete/autocomplete-component.ts
@@ -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',
diff --git a/dmp-admin/src/app/combobox/combobox-component.ts b/dmp-admin/src/app/combobox/combobox-component.ts
index 9441f28be..2a1a99000 100644
--- a/dmp-admin/src/app/combobox/combobox-component.ts
+++ b/dmp-admin/src/app/combobox/combobox-component.ts
@@ -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({
diff --git a/dmp-admin/src/app/compositefield-form/compositefield-form.component.html b/dmp-admin/src/app/dataset-profile-form/compositefield-form/compositefield-form.component.html
similarity index 100%
rename from dmp-admin/src/app/compositefield-form/compositefield-form.component.html
rename to dmp-admin/src/app/dataset-profile-form/compositefield-form/compositefield-form.component.html
diff --git a/dmp-admin/src/app/compositefield-form/compositefield-form.component.ts b/dmp-admin/src/app/dataset-profile-form/compositefield-form/compositefield-form.component.ts
similarity index 89%
rename from dmp-admin/src/app/compositefield-form/compositefield-form.component.ts
rename to dmp-admin/src/app/dataset-profile-form/compositefield-form/compositefield-form.component.ts
index c7f8345da..3ae8ef3f5 100644
--- a/dmp-admin/src/app/compositefield-form/compositefield-form.component.ts
+++ b/dmp-admin/src/app/dataset-profile-form/compositefield-form/compositefield-form.component.ts
@@ -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({
diff --git a/dmp-admin/src/app/field-form/field-form.component.html b/dmp-admin/src/app/dataset-profile-form/field-form/field-form.component.html
similarity index 100%
rename from dmp-admin/src/app/field-form/field-form.component.html
rename to dmp-admin/src/app/dataset-profile-form/field-form/field-form.component.html
diff --git a/dmp-admin/src/app/field-form/field-form.component.ts b/dmp-admin/src/app/dataset-profile-form/field-form/field-form.component.ts
similarity index 80%
rename from dmp-admin/src/app/field-form/field-form.component.ts
rename to dmp-admin/src/app/dataset-profile-form/field-form/field-form.component.ts
index bb07b5f19..1c3738fd0 100644
--- a/dmp-admin/src/app/field-form/field-form.component.ts
+++ b/dmp-admin/src/app/dataset-profile-form/field-form/field-form.component.ts
@@ -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',
diff --git a/dmp-admin/src/app/form/form.component.html b/dmp-admin/src/app/dataset-profile-form/form/form.component.html
similarity index 58%
rename from dmp-admin/src/app/form/form.component.html
rename to dmp-admin/src/app/dataset-profile-form/form/form.component.html
index cb6ccdda2..9d62ee778 100644
--- a/dmp-admin/src/app/form/form.component.html
+++ b/dmp-admin/src/app/dataset-profile-form/form/form.component.html
@@ -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>
diff --git a/dmp-admin/src/app/form/form.component.ts b/dmp-admin/src/app/dataset-profile-form/form/form.component.ts
similarity index 71%
rename from dmp-admin/src/app/form/form.component.ts
rename to dmp-admin/src/app/dataset-profile-form/form/form.component.ts
index ca50a49ed..fdd6cbaf7 100644
--- a/dmp-admin/src/app/form/form.component.ts
+++ b/dmp-admin/src/app/dataset-profile-form/form/form.component.ts
@@ -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);
   }
diff --git a/dmp-admin/src/app/groupfield-form/groupfield-form.component.html b/dmp-admin/src/app/dataset-profile-form/groupfield-form/groupfield-form.component.html
similarity index 100%
rename from dmp-admin/src/app/groupfield-form/groupfield-form.component.html
rename to dmp-admin/src/app/dataset-profile-form/groupfield-form/groupfield-form.component.html
diff --git a/dmp-admin/src/app/groupfield-form/groupfield-form.component.ts b/dmp-admin/src/app/dataset-profile-form/groupfield-form/groupfield-form.component.ts
similarity index 79%
rename from dmp-admin/src/app/groupfield-form/groupfield-form.component.ts
rename to dmp-admin/src/app/dataset-profile-form/groupfield-form/groupfield-form.component.ts
index 08682295a..31519b0ff 100644
--- a/dmp-admin/src/app/groupfield-form/groupfield-form.component.ts
+++ b/dmp-admin/src/app/dataset-profile-form/groupfield-form/groupfield-form.component.ts
@@ -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',
diff --git a/dmp-admin/src/app/dataset-profile-form/page-form/page-component.html b/dmp-admin/src/app/dataset-profile-form/page-form/page-component.html
new file mode 100644
index 000000000..3ad68805d
--- /dev/null
+++ b/dmp-admin/src/app/dataset-profile-form/page-form/page-component.html
@@ -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>
\ No newline at end of file
diff --git a/dmp-admin/src/app/dataset-profile-form/page-form/page-component.ts b/dmp-admin/src/app/dataset-profile-form/page-form/page-component.ts
new file mode 100644
index 000000000..5924b408a
--- /dev/null
+++ b/dmp-admin/src/app/dataset-profile-form/page-form/page-component.ts
@@ -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() {
+	}
+
+}
\ No newline at end of file
diff --git a/dmp-admin/src/app/rule-component/rule.component.html b/dmp-admin/src/app/dataset-profile-form/rule-component/rule.component.html
similarity index 100%
rename from dmp-admin/src/app/rule-component/rule.component.html
rename to dmp-admin/src/app/dataset-profile-form/rule-component/rule.component.html
diff --git a/dmp-admin/src/app/rule-component/rule.component.ts b/dmp-admin/src/app/dataset-profile-form/rule-component/rule.component.ts
similarity index 66%
rename from dmp-admin/src/app/rule-component/rule.component.ts
rename to dmp-admin/src/app/dataset-profile-form/rule-component/rule.component.ts
index 251371c34..01b70230f 100644
--- a/dmp-admin/src/app/rule-component/rule.component.ts
+++ b/dmp-admin/src/app/dataset-profile-form/rule-component/rule.component.ts
@@ -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',
diff --git a/dmp-admin/src/app/section-form/section-form.component.css b/dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.css
similarity index 100%
rename from dmp-admin/src/app/section-form/section-form.component.css
rename to dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.css
diff --git a/dmp-admin/src/app/section-form/section-form.component.html b/dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.html
similarity index 91%
rename from dmp-admin/src/app/section-form/section-form.component.html
rename to dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.html
index 42b549483..1b2348a8d 100644
--- a/dmp-admin/src/app/section-form/section-form.component.html
+++ b/dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.html
@@ -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>
diff --git a/dmp-admin/src/app/section-form/section-form.component.ts b/dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.ts
similarity index 58%
rename from dmp-admin/src/app/section-form/section-form.component.ts
rename to dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.ts
index 50239e796..da6bcb8ab 100644
--- a/dmp-admin/src/app/section-form/section-form.component.ts
+++ b/dmp-admin/src/app/dataset-profile-form/section-form/section-form.component.ts
@@ -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();
+  }
 }
\ No newline at end of file
diff --git a/dmp-admin/src/app/models/CompositeField.ts b/dmp-admin/src/app/models/DataSetProfile/CompositeField.ts
similarity index 85%
rename from dmp-admin/src/app/models/CompositeField.ts
rename to dmp-admin/src/app/models/DataSetProfile/CompositeField.ts
index cd3c54c66..e2d7dfb5b 100644
--- a/dmp-admin/src/app/models/CompositeField.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/CompositeField.ts
@@ -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' 
 
diff --git a/dmp-admin/src/app/models/DataSetProfile/DatasetProfileModel.ts b/dmp-admin/src/app/models/DataSetProfile/DatasetProfileModel.ts
new file mode 100644
index 000000000..ea68ee4c6
--- /dev/null
+++ b/dmp-admin/src/app/models/DataSetProfile/DatasetProfileModel.ts
@@ -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;
+    }
+
+}
\ No newline at end of file
diff --git a/dmp-admin/src/app/models/DefaultValue.ts b/dmp-admin/src/app/models/DataSetProfile/DefaultValue.ts
similarity index 76%
rename from dmp-admin/src/app/models/DefaultValue.ts
rename to dmp-admin/src/app/models/DataSetProfile/DefaultValue.ts
index c06ca586c..c2bec0ea5 100644
--- a/dmp-admin/src/app/models/DefaultValue.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/DefaultValue.ts
@@ -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;
diff --git a/dmp-admin/src/app/models/Field.ts b/dmp-admin/src/app/models/DataSetProfile/Field.ts
similarity index 87%
rename from dmp-admin/src/app/models/Field.ts
rename to dmp-admin/src/app/models/DataSetProfile/Field.ts
index 3261f432c..f74d1aba8 100644
--- a/dmp-admin/src/app/models/Field.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/Field.ts
@@ -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';
diff --git a/dmp-admin/src/app/models/FieldGroup.ts b/dmp-admin/src/app/models/DataSetProfile/FieldGroup.ts
similarity index 86%
rename from dmp-admin/src/app/models/FieldGroup.ts
rename to dmp-admin/src/app/models/DataSetProfile/FieldGroup.ts
index 3ec538c2d..18df097c1 100644
--- a/dmp-admin/src/app/models/FieldGroup.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/FieldGroup.ts
@@ -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>{
diff --git a/dmp-admin/src/app/models/Multiplicity.ts b/dmp-admin/src/app/models/DataSetProfile/Multiplicity.ts
similarity index 76%
rename from dmp-admin/src/app/models/Multiplicity.ts
rename to dmp-admin/src/app/models/DataSetProfile/Multiplicity.ts
index 66f85c3d8..a0d2069be 100644
--- a/dmp-admin/src/app/models/Multiplicity.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/Multiplicity.ts
@@ -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;
diff --git a/dmp-admin/src/app/models/DataSetProfile/Page.ts b/dmp-admin/src/app/models/DataSetProfile/Page.ts
new file mode 100644
index 000000000..36f70e76e
--- /dev/null
+++ b/dmp-admin/src/app/models/DataSetProfile/Page.ts
@@ -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;
+	}
+}
\ No newline at end of file
diff --git a/dmp-admin/src/app/models/Rule.ts b/dmp-admin/src/app/models/DataSetProfile/Rule.ts
similarity index 85%
rename from dmp-admin/src/app/models/Rule.ts
rename to dmp-admin/src/app/models/DataSetProfile/Rule.ts
index cc1a0f4b3..22f697967 100644
--- a/dmp-admin/src/app/models/Rule.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/Rule.ts
@@ -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;
diff --git a/dmp-admin/src/app/models/Section.ts b/dmp-admin/src/app/models/DataSetProfile/Section.ts
similarity index 82%
rename from dmp-admin/src/app/models/Section.ts
rename to dmp-admin/src/app/models/DataSetProfile/Section.ts
index 96313363f..c24365448 100644
--- a/dmp-admin/src/app/models/Section.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/Section.ts
@@ -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));      
diff --git a/dmp-admin/src/app/models/ViewStyle.ts b/dmp-admin/src/app/models/DataSetProfile/ViewStyle.ts
similarity index 78%
rename from dmp-admin/src/app/models/ViewStyle.ts
rename to dmp-admin/src/app/models/DataSetProfile/ViewStyle.ts
index 665a2bab6..c5ef91a9d 100644
--- a/dmp-admin/src/app/models/ViewStyle.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/ViewStyle.ts
@@ -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;
diff --git a/dmp-admin/src/app/models/Visibility.ts b/dmp-admin/src/app/models/DataSetProfile/Visibility.ts
similarity index 80%
rename from dmp-admin/src/app/models/Visibility.ts
rename to dmp-admin/src/app/models/DataSetProfile/Visibility.ts
index 979ee5adf..408053501 100644
--- a/dmp-admin/src/app/models/Visibility.ts
+++ b/dmp-admin/src/app/models/DataSetProfile/Visibility.ts
@@ -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>();
diff --git a/dmp-admin/src/app/models/DatasetProfileModel.ts b/dmp-admin/src/app/models/DatasetProfileModel.ts
deleted file mode 100644
index a0392fc84..000000000
--- a/dmp-admin/src/app/models/DatasetProfileModel.ts
+++ /dev/null
@@ -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;
-    }
-
-}
\ No newline at end of file
diff --git a/dmp-admin/src/app/radiobox/radiobox-component.ts b/dmp-admin/src/app/radiobox/radiobox-component.ts
index ca41461fb..16416990a 100644
--- a/dmp-admin/src/app/radiobox/radiobox-component.ts
+++ b/dmp-admin/src/app/radiobox/radiobox-component.ts
@@ -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';
diff --git a/dmp-admin/src/app/routes.ts b/dmp-admin/src/app/routes.ts
index 903c9dfde..a2036850e 100644
--- a/dmp-admin/src/app/routes.ts
+++ b/dmp-admin/src/app/routes.ts
@@ -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';
 
diff --git a/dmp-admin/src/app/wordlist/wordlist-component.ts b/dmp-admin/src/app/wordlist/wordlist-component.ts
index 5946a083c..a5deb7c5f 100644
--- a/dmp-admin/src/app/wordlist/wordlist-component.ts
+++ b/dmp-admin/src/app/wordlist/wordlist-component.ts
@@ -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';
diff --git a/dmp-admin/tsconfig.json b/dmp-admin/tsconfig.json
index a6c016bf3..b0cb5c676 100644
--- a/dmp-admin/tsconfig.json
+++ b/dmp-admin/tsconfig.json
@@ -1,7 +1,8 @@
-{
+{
   "compileOnSave": false,
   "compilerOptions": {
     "outDir": "./dist/out-tsc",
+    "baseUrl": "src",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",