From 80115ed3cf10cca841f87bde805b53ec42c4a683 Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Tue, 5 Dec 2017 18:56:21 +0200
Subject: [PATCH 01/19] table of contents + pagination

---
 .../xmlmodels/viewstyledefinition/Field.java  |   7 ++
 .../viewstyledefinition/FieldGroup.java       |  11 +-
 .../viewstyledefinition/Section.java          |  15 ++-
 .../src/main/java/managers/AdminManager.java  |   4 +-
 .../admin/composite/DatasetProfile.java       |  12 +-
 .../commons/datafield/ComboBoxData.java       |  13 ++-
 .../main/java/models/properties/Field.java    |  41 +++++++
 .../main/java/models/properties/FieldSet.java |  30 +++++
 .../main/java/models/properties/Group.java    |  28 +++++
 .../properties/PropertiesGenerator.java       |   7 ++
 .../models/properties/PropertiesModel.java    |  24 ++++
 .../main/java/models/properties/Section.java  |  32 +++++
 .../user/components/datasetprofile/Field.java |  10 +-
 .../components/datasetprofile/FieldSet.java   |  10 +-
 .../user/components/datasetprofile/Group.java |   9 +-
 .../components/datasetprofile/Section.java    |   9 +-
 .../models/user/composite/DatasetProfile.java |   9 +-
 .../composite/PropertiesModelBuilder.java     |   7 ++
 .../src/main/java/rest/entities/Admin.java    |  31 ++++-
 .../entities/DatasetProfileController.java    |  43 ++++++-
 .../java/utilities/builders/XmlBuilder.java   |  15 +++
 dmp-frontend/asdk.json                        |   1 +
 dmp-frontend/src/app/app-routing.module.ts    |   2 +-
 dmp-frontend/src/app/app.module.ts            |  32 ++++-
 .../dynamic-field-dropdown.html               |   2 +-
 .../dynamic-field-radiobox.component.html     |   2 +-
 .../dynamic-form-field.component.html         |  83 +++++++------
 .../dynamic-form-field.component.ts           |   7 +-
 .../dynamic-form-composite-field.html         |   6 +-
 .../dynamic-form-composite-field.ts           |   1 +
 .../dynamic-form-group.component.html         |   8 +-
 .../dynamic-form-group.component.ts           |   4 +-
 .../dynamic-form-section.html                 |  26 +++--
 .../dynamic-form-section.ts                   |   2 +-
 .../src/app/form/dynamic-form.component.html  |  79 ++++++-------
 .../src/app/form/dynamic-form.component.ts    | 110 ++++++++----------
 .../pprogress-bar/progress-bar.component.html |   1 +
 .../pprogress-bar/progress-bar.component.ts   |  51 ++++++++
 .../base-table-of-content.component.ts        |   9 ++
 .../table-of-content-field.component.html     |   2 +
 .../table-of-content-field.component.ts       |  22 ++++
 .../table-of-content-fieldset.component.html  |   7 ++
 .../table-of-content-fieldset.component.ts    |  25 ++++
 .../table-of-content-group.component.html     |   5 +
 .../table-of-content-group.component.ts       |  29 +++++
 .../table-of-content-section.component.html   |  14 +++
 .../table-of-content-section.component.ts     |  27 +++++
 .../table-of-contents.component.html          |   7 ++
 .../table-of-contents.component.ts            |  26 +++++
 .../form/tableOfContents/toc.component.html   |  20 ----
 .../app/form/tableOfContents/toc.component.ts |  31 -----
 dmp-frontend/src/app/models/Field.ts          |   8 +-
 dmp-frontend/src/app/models/FieldGroup.ts     |   4 +-
 dmp-frontend/src/app/models/Section.ts        |   4 +-
 dmp-frontend/src/app/services/rest-base.ts    |   2 +-
 .../src/app/services/server.service.ts        |  10 +-
 .../dmp-detailed/dmp-detailed.component.ts    |   2 +-
 .../visibility-rules.service.ts               |   2 +-
 58 files changed, 767 insertions(+), 273 deletions(-)
 create mode 100644 dmp-backend/src/main/java/models/properties/Field.java
 create mode 100644 dmp-backend/src/main/java/models/properties/FieldSet.java
 create mode 100644 dmp-backend/src/main/java/models/properties/Group.java
 create mode 100644 dmp-backend/src/main/java/models/properties/PropertiesGenerator.java
 create mode 100644 dmp-backend/src/main/java/models/properties/PropertiesModel.java
 create mode 100644 dmp-backend/src/main/java/models/properties/Section.java
 create mode 100644 dmp-backend/src/main/java/models/user/composite/PropertiesModelBuilder.java
 create mode 100644 dmp-frontend/asdk.json
 create mode 100644 dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.html
 create mode 100644 dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
 create mode 100644 dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.ts
 delete mode 100644 dmp-frontend/src/app/form/tableOfContents/toc.component.html
 delete mode 100644 dmp-frontend/src/app/form/tableOfContents/toc.component.ts

diff --git a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java
index 30e911ac8..529c48581 100644
--- a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java
+++ b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Field.java
@@ -89,12 +89,16 @@ public class Field implements DatabaseViewStyleDefinition,XmlSerializable<Field>
 		Element description = doc.createElement("description");
 		description.setTextContent(this.description);
 		
+		Element title = doc.createElement("title");
+		title.setTextContent(this.title);
+		
 		Element viewStyle = doc.createElement("viewStyle");
 		viewStyle.setAttribute("renderstyle", this.viewStyle.getRenderStyle());
 		viewStyle.setAttribute("cssClass", this.viewStyle.getCssClass());
 		
 		Element visibility = this.visible.toXml(doc);
 		
+		rootElement.appendChild(title);
 		rootElement.appendChild(visibility);
 		rootElement.appendChild(extendedDescription);
 		rootElement.appendChild(viewStyle);
@@ -114,6 +118,9 @@ public class Field implements DatabaseViewStyleDefinition,XmlSerializable<Field>
 		Element description = (Element)element.getElementsByTagName("description").item(0);
 		this.description = description.getTextContent();
 		
+		Element title = (Element)element.getElementsByTagName("title").item(0);
+		this.title = title.getTextContent();
+		
 		this.viewStyle = new ViewStyle();
 		Element viewStyle = (Element)element.getElementsByTagName("viewStyle").item(0);
 		this.viewStyle.setRenderStyle(viewStyle.getAttribute("renderstyle"));
diff --git a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java
index c61ce0584..1fad73e63 100644
--- a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java
+++ b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/FieldGroup.java
@@ -10,6 +10,7 @@ import org.w3c.dom.NodeList;
 
 import entities.xmlmodels.modeldefinition.DatabaseModelDefinition;
 import utilities.XmlSerializable;
+import utilities.builders.XmlBuilder;
 
 public class FieldGroup implements DatabaseViewStyleDefinition,XmlSerializable<FieldGroup>{
 	private String id;
@@ -97,6 +98,9 @@ public class FieldGroup implements DatabaseViewStyleDefinition,XmlSerializable<F
 		
 		return root;
 	}
+	
+	
+	 
 	@Override
 	public FieldGroup fromXml(Element element) {
 		this.id = element.getAttribute("id");
@@ -104,12 +108,15 @@ public class FieldGroup implements DatabaseViewStyleDefinition,XmlSerializable<F
 		this.defaultVisibility = Boolean.getBoolean(element.getAttribute("defaultVisibility"));
 		this.page = Integer.parseInt(element.getAttribute("page"));
 		
-		Element title = (Element)element.getElementsByTagName("title").item(0);
+		Element title = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"title");
 		this.title = title.getTextContent();
 		
-		Element extendedDescription = (Element)element.getElementsByTagName("extendedDescription").item(0);
+		Element extendedDescription = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"extendedDescription");
 		this.extendedDescription = extendedDescription.getTextContent();
 		
+		Element description = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"description");
+		this.description  = description .getTextContent();
+		
 		this.fieldSets = new LinkedList();
 		Element fieldSets = (Element)element.getElementsByTagName("fieldsets").item(0);
 		if(fieldSets!=null){
diff --git a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java
index 1f4aa2b69..6a43ab461 100644
--- a/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java
+++ b/dmp-backend/src/main/java/entities/xmlmodels/viewstyledefinition/Section.java
@@ -10,6 +10,7 @@ import org.w3c.dom.NodeList;
 
 import entities.xmlmodels.modeldefinition.DatabaseModelDefinition;
 import utilities.XmlSerializable;
+import utilities.builders.XmlBuilder;
 
 public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Section>{
 	private String id;
@@ -91,6 +92,9 @@ public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Sect
 		Element extendedDescription = doc.createElement("extendedDescription");
 		extendedDescription.setTextContent(this.extendedDescription);
 		
+		Element title = doc.createElement("title");
+		title.setTextContent(this.title);
+		
 		if(sections!=null){
 			Element sections = doc.createElement("sections");
 			for(Section section : this.sections){
@@ -106,6 +110,8 @@ public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Sect
 			}
 			rootElement.appendChild(formGroups);
 		}
+		
+		rootElement.appendChild(title);
 		rootElement.appendChild(extendedDescription);
 		rootElement.appendChild(description);
 		
@@ -119,11 +125,14 @@ public class Section implements DatabaseViewStyleDefinition,XmlSerializable<Sect
 		this.defaultVisibility = Boolean.getBoolean(element.getAttribute("defaultVisibility"));
 		this.page = Integer.parseInt(element.getAttribute("page"));
 		
-		Element description = (Element)element.getElementsByTagName("description").item(0);
+		Element description = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"description");
 		if(description!=null) this.description = description.getTextContent();
 		
-		Element extendedDescription = (Element)element.getElementsByTagName("extendedDescription").item(0);
-		if(extendedDescription != null) this.extendedDescription = description.getTextContent();
+		Element extendedDescription = XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"extendedDescription");
+		if(extendedDescription != null) this.extendedDescription = extendedDescription.getTextContent();
+		
+		Element title =XmlBuilder.getNodeFromListByTagName(element.getChildNodes(),"title");
+		if(title!=null) this.title = title.getTextContent();
 		
 		this.sections = new LinkedList<Section>();
 		Element sections = (Element)element.getElementsByTagName("sections").item(0);
diff --git a/dmp-backend/src/main/java/managers/AdminManager.java b/dmp-backend/src/main/java/managers/AdminManager.java
index b47e31adc..998bceca6 100644
--- a/dmp-backend/src/main/java/managers/AdminManager.java
+++ b/dmp-backend/src/main/java/managers/AdminManager.java
@@ -33,7 +33,7 @@ public class AdminManager {
 		entities.DatasetProfile datasetProfile = new entities.DatasetProfile();
 		datasetProfile.setDefinition(xml);
 		datasetProfile.setStatus((short)1);
-		datasetProfile.setLabel("dasd");
+		datasetProfile.setLabel(profile.getLabel());
 		datasetProfile.setCreated(new Date());
 		return datasetProfile;
 	}
@@ -48,7 +48,7 @@ public class AdminManager {
 		
 		DatasetProfileViewstyle datasetProfileViewstyle = new DatasetProfileViewstyle();
 		datasetProfileViewstyle.setDefinition(xml);
-		datasetProfileViewstyle.setLabel("skdjal");
+		datasetProfileViewstyle.setLabel(profile.getLabel());
 		return datasetProfileViewstyle;
 	}
 	
diff --git a/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java b/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java
index 9c613bae6..cd39aab47 100644
--- a/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java
+++ b/dmp-backend/src/main/java/models/admin/composite/DatasetProfile.java
@@ -8,6 +8,7 @@ import java.util.List;
 import models.admin.components.datasetprofile.*;
 
 public class DatasetProfile {
+	private String label;
 	private List<Section> sections;
 
 	public List<Section> getSections() {
@@ -16,9 +17,16 @@ public class DatasetProfile {
 
 	public void setSections(List<Section> sections) {
 		this.sections = sections;
-	}	
-	
+	}		
 	
+	public String getLabel() {
+		return label;
+	}
+
+	public void setLabel(String label) {
+		this.label = label;
+	}
+
 	public void buildProfile(entities.xmlmodels.modeldefinition.FieldGroup fieldGroup,entities.xmlmodels.viewstyledefinition.ViewStyleModel viewStyle){
 		this.sections = new ModelBuilder().fromViewStyleDefinition(viewStyle.getSections(), Section.class);
 		updateProfile(fieldGroup,viewStyle);
diff --git a/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java b/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java
index 8ba4a7c82..258cc18b6 100644
--- a/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java
+++ b/dmp-backend/src/main/java/models/components/commons/datafield/ComboBoxData.java
@@ -102,11 +102,22 @@ public class ComboBoxData extends FieldData<ComboBoxData>{
 	}
 	@Override
 	public ComboBoxData fromData(Object data) {
+		this.options = new LinkedList();
+
 		if(data!=null){
 			this.type = (String)((Map<String,Object>)data).get("type");
 			this.url = (String)((Map<String,Object>)data).get("url");
-			this.options = (List<Option>)((Map<String,Object>)data).get("options");
+			List<Map<String,String>> options = ((Map<String,List<Map<String,String>>>)data).get("options");		
+			if(options!=null){
+					for(Map<String,String> map : options){
+						Option newOption = new Option();
+						newOption.setLabel(map.get("label"));
+						newOption.setValue(map.get("value"));
+						this.options.add(newOption);
+					}
+			}
 		}
+		
 		return this;
 	}
 	@Override
diff --git a/dmp-backend/src/main/java/models/properties/Field.java b/dmp-backend/src/main/java/models/properties/Field.java
new file mode 100644
index 000000000..5d9f4dbbf
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/Field.java
@@ -0,0 +1,41 @@
+package models.properties;
+
+import java.util.Map;
+
+import com.fasterxml.jackson.annotation.JsonIgnore;
+import com.fasterxml.jackson.annotation.JsonProperty;
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlProperty;
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlRootElement;
+
+import models.components.commons.DefaultValue;
+import models.components.commons.Multiplicity;
+import models.components.commons.ViewStyle;
+import models.components.commons.Visibility;
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class Field implements PropertiesGenerator{
+	private String id;
+	
+	private String value;
+	
+	public String getId() {
+		return id;
+	}
+	public void setId(String id) {
+		this.id = id;
+	}
+	
+	public String getValue() {
+		return value;
+	}
+	public void setValue(String value) {
+		this.value = value;
+	}
+	
+	public void toMap(Map<String,String> fieldValues){
+		fieldValues.put(this.id, this.value);
+	}
+			
+}
\ No newline at end of file
diff --git a/dmp-backend/src/main/java/models/properties/FieldSet.java b/dmp-backend/src/main/java/models/properties/FieldSet.java
new file mode 100644
index 000000000..58b78230c
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/FieldSet.java
@@ -0,0 +1,30 @@
+package models.properties;
+
+import java.util.LinkedList;
+import java.util.List;
+import java.util.Map;
+
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
+
+import models.components.commons.Multiplicity;
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class FieldSet implements PropertiesGenerator{	
+	private List<Field> fields;
+
+	public List<Field> getFields() {
+		return fields;
+	}
+
+	public void setFields(List<Field> fields) {
+		this.fields = fields;
+	}
+
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.fields.forEach(item->item.toMap(fieldValues));
+	}	
+
+}
diff --git a/dmp-backend/src/main/java/models/properties/Group.java b/dmp-backend/src/main/java/models/properties/Group.java
new file mode 100644
index 000000000..787826a34
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/Group.java
@@ -0,0 +1,28 @@
+package models.properties;
+
+import java.util.List;
+import java.util.Map;
+
+import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
+
+import entities.xmlmodels.viewstyledefinition.FieldGroup;
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class Group implements PropertiesGenerator{
+	private List<FieldSet> compositeFields;
+	
+	
+	public List<FieldSet> getCompositeFields() {
+		return compositeFields;
+	}
+	public void setCompositeFields(List<FieldSet> compositeFields) {
+		this.compositeFields = compositeFields;
+	}
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.compositeFields.forEach(item->item.toMap(fieldValues));
+	}
+	
+}
diff --git a/dmp-backend/src/main/java/models/properties/PropertiesGenerator.java b/dmp-backend/src/main/java/models/properties/PropertiesGenerator.java
new file mode 100644
index 000000000..cede0d8ee
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/PropertiesGenerator.java
@@ -0,0 +1,7 @@
+package models.properties;
+
+import java.util.Map;
+
+public interface PropertiesGenerator {
+	void toMap(Map<String,String> fieldValues);
+}
diff --git a/dmp-backend/src/main/java/models/properties/PropertiesModel.java b/dmp-backend/src/main/java/models/properties/PropertiesModel.java
new file mode 100644
index 000000000..527ed3553
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/PropertiesModel.java
@@ -0,0 +1,24 @@
+package models.properties;
+
+import java.util.HashMap;
+import java.util.List;
+import java.util.Map;
+
+public class PropertiesModel implements PropertiesGenerator{
+	private List<Section> sections;
+
+	public List<Section> getSections() {
+		return sections;
+	}
+
+	public void setSections(List<Section> sections) {
+		this.sections = sections;
+	}
+
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.sections.forEach(item->item.toMap(fieldValues));
+		
+	}
+		
+}
diff --git a/dmp-backend/src/main/java/models/properties/Section.java b/dmp-backend/src/main/java/models/properties/Section.java
new file mode 100644
index 000000000..514dba2bd
--- /dev/null
+++ b/dmp-backend/src/main/java/models/properties/Section.java
@@ -0,0 +1,32 @@
+package models.properties;
+
+import java.util.List;
+import java.util.Map;
+
+import utilities.ModelDefinition;
+import utilities.ViewStyleDefinition;
+import utilities.builders.ModelBuilder;
+
+public class Section implements PropertiesGenerator{
+
+	private List<Section> sections;
+	private List<Group> fieldGroups; 
+	
+	public List<Section> getSections() {
+		return sections;
+	}
+	public void setSections(List<Section> sections) {
+		this.sections = sections;
+	}
+	public List<Group> getFieldGroups() {
+		return fieldGroups;
+	}
+	public void setFieldGroups(List<Group> fieldGroups) {
+		this.fieldGroups = fieldGroups;
+	}
+	@Override
+	public void toMap(Map<String, String> fieldValues) {
+		this.sections.forEach(item->item.toMap(fieldValues));
+		this.fieldGroups.forEach(item->item.toMap(fieldValues));
+	}	
+}
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java
index 6d9806628..a9f1e999c 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/Field.java
@@ -1,5 +1,7 @@
 package models.user.components.datasetprofile;
 
+import java.util.Map;
+
 import com.fasterxml.jackson.annotation.JsonIgnore;
 import com.fasterxml.jackson.annotation.JsonProperty;
 import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlProperty;
@@ -9,11 +11,12 @@ import models.components.commons.DefaultValue;
 import models.components.commons.Multiplicity;
 import models.components.commons.ViewStyle;
 import models.components.commons.Visibility;
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class Field implements ModelDefinition<entities.xmlmodels.modeldefinition.Field>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Field>{
+public class Field implements PropertiesModelBuilder, ModelDefinition<entities.xmlmodels.modeldefinition.Field>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Field>{
 	private String id;
 	private int ordinal;
 	private String title;
@@ -150,6 +153,11 @@ public class Field implements ModelDefinition<entities.xmlmodels.modeldefinition
 		this.title = item.getTitle();
 		this.viewStyle = item.getViewStyle();
 		this.data = item.getData();
+	}
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.value = (String)properties.get(this.id);
+		
 	}				
 	
 }
\ No newline at end of file
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java
index fca59c0c4..894956608 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/FieldSet.java
@@ -2,15 +2,17 @@ package models.user.components.datasetprofile;
 
 import java.util.LinkedList;
 import java.util.List;
+import java.util.Map;
 
 import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
 
 import models.components.commons.Multiplicity;
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class FieldSet implements ModelDefinition<entities.xmlmodels.modeldefinition.FieldSet>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldSet>{
+public class FieldSet implements PropertiesModelBuilder, ModelDefinition<entities.xmlmodels.modeldefinition.FieldSet>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldSet>{
 	private String id;
 	private int ordinal;
 	private Multiplicity multiplicity;
@@ -80,6 +82,12 @@ public class FieldSet implements ModelDefinition<entities.xmlmodels.modeldefinit
 		this.id = item.getId();
 		this.ordinal = item.getOrdinal();
 	}
+
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.fields.forEach(item->item.fromJsonObject(properties));
+		
+	}
 	
 	
 }
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java
index f92fdd62b..363ef74ec 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/Group.java
@@ -1,15 +1,17 @@
 package models.user.components.datasetprofile;
 
 import java.util.List;
+import java.util.Map;
 
 import com.fasterxml.jackson.dataformat.xml.annotation.JacksonXmlElementWrapper;
 
 import entities.xmlmodels.viewstyledefinition.FieldGroup;
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class Group implements ModelDefinition<entities.xmlmodels.modeldefinition.FieldGroup>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldGroup>{
+public class Group implements PropertiesModelBuilder, ModelDefinition<entities.xmlmodels.modeldefinition.FieldGroup>,ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.FieldGroup>{
 	private String id;
 	private String title;
 	private String section;
@@ -115,4 +117,9 @@ public class Group implements ModelDefinition<entities.xmlmodels.modeldefinition
 		// TODO Auto-generated method stub
 		
 	}
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.compositeFields.forEach(item->item.fromJsonObject(properties));
+		
+	}
 }
diff --git a/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java b/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java
index ee796a0d7..7ddc7ca95 100644
--- a/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java
+++ b/dmp-backend/src/main/java/models/user/components/datasetprofile/Section.java
@@ -1,12 +1,14 @@
 package models.user.components.datasetprofile;
 
 import java.util.List;
+import java.util.Map;
 
+import models.user.composite.PropertiesModelBuilder;
 import utilities.ModelDefinition;
 import utilities.ViewStyleDefinition;
 import utilities.builders.ModelBuilder;
 
-public class Section implements ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Section>{
+public class Section implements ViewStyleDefinition<entities.xmlmodels.viewstyledefinition.Section>,PropertiesModelBuilder{
 	private List<Section> sections;
 	private List<Group> fieldGroups; 
 	private Boolean defaultVisibility;
@@ -87,6 +89,11 @@ public class Section implements ViewStyleDefinition<entities.xmlmodels.viewstyle
 		this.sections = new ModelBuilder().fromViewStyleDefinition(item.getSections(),Section.class);
 		this.title = item.getTitle();		
 	}
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.sections.forEach(item->item.fromJsonObject(properties));
+		this.fieldGroups.forEach(item->item.fromJsonObject(properties));
+	}
 	
 	
 }
diff --git a/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java b/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java
index 7bd23da17..32fc87ef2 100644
--- a/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java
+++ b/dmp-backend/src/main/java/models/user/composite/DatasetProfile.java
@@ -4,11 +4,12 @@ import utilities.builders.ModelBuilder;
 import utilities.helpers.ModelBuilderCollector;
 
 import java.util.List;
+import java.util.Map;
 
 import models.user.components.datasetprofile.*;
 import models.user.components.commons.Rule;
 
-public class DatasetProfile {
+public class DatasetProfile implements PropertiesModelBuilder{
 	private List<Section> sections;
 	private List<Rule> rules;
 	public List<Section> getSections() {
@@ -38,5 +39,11 @@ public class DatasetProfile {
 		this.rules = ModelBuilderCollector.collectRules(viewStyle.getSections());
 
 	}
+
+	@Override
+	public void fromJsonObject(Map<String, Object> properties) {
+		this.sections.forEach(item->item.fromJsonObject(properties));
+		
+	}
 	
 }
diff --git a/dmp-backend/src/main/java/models/user/composite/PropertiesModelBuilder.java b/dmp-backend/src/main/java/models/user/composite/PropertiesModelBuilder.java
new file mode 100644
index 000000000..6d72c2c1b
--- /dev/null
+++ b/dmp-backend/src/main/java/models/user/composite/PropertiesModelBuilder.java
@@ -0,0 +1,7 @@
+package models.user.composite;
+
+import java.util.Map;
+
+public interface PropertiesModelBuilder {
+	void fromJsonObject(Map<String,Object> properties);
+}
diff --git a/dmp-backend/src/main/java/rest/entities/Admin.java b/dmp-backend/src/main/java/rest/entities/Admin.java
index c94db349c..dc1349e16 100644
--- a/dmp-backend/src/main/java/rest/entities/Admin.java
+++ b/dmp-backend/src/main/java/rest/entities/Admin.java
@@ -4,11 +4,10 @@ import java.util.List;
 import java.util.UUID;
 import java.util.stream.Collectors;
 
-import javax.transaction.Transactional;
-
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
+import org.springframework.transaction.annotation.Transactional;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.RequestBody;
@@ -62,6 +61,34 @@ public class Admin {
 		}
 	} 
 	
+	@Transactional
+	@RequestMapping(method = RequestMethod.POST, value = { "/admin/addDmp/{id}" },consumes = "application/json", produces="application/json")
+	public ResponseEntity<Object> updateDmp(@PathVariable String id,@RequestBody DatasetProfile profile){
+		try{
+			entities.DatasetProfile modelDefinition = AdminManager.generateModelDefinition(profile);
+			entities.DatasetProfileViewstyle viewStyleDefinition = AdminManager.generateViewStyleDefinition(profile);
+
+			
+			entities.DatasetProfile datasetprofile = datasetProfileDao.read(UUID.fromString(id));
+
+			entities.DatasetProfileViewstyle oldviewStyle = datasetProfileViewstyleDao.read((datasetprofile.getViewstyle().getId()));
+			oldviewStyle.setDefinition(viewStyleDefinition.getDefinition());
+			datasetProfileViewstyleDao.update(oldviewStyle);
+
+			
+			if(!datasetprofile.getDataset().isEmpty())throw new Exception ("Cannot edit a Profile that has Datasets assigned");
+			
+			datasetprofile.setViewstyle(oldviewStyle);
+			datasetprofile.setDefinition(modelDefinition.getDefinition());
+			datasetProfileDao.update(datasetprofile);
+			
+			return ResponseEntity.status(HttpStatus.OK).body(datasetprofile);
+		}catch(Exception ex){
+			ex.printStackTrace();
+			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("{\"reason\":\""+ex.getMessage()+"\"}");
+		}
+	} 
+	
 	@RequestMapping(method = RequestMethod.GET, value = { "/admin/get/{id}" }, produces="application/json")
 	public ResponseEntity<Object> get(@PathVariable String id){
 		try{
diff --git a/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java b/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java
index dd7acb517..a54e07ceb 100644
--- a/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java
+++ b/dmp-backend/src/main/java/rest/entities/DatasetProfileController.java
@@ -1,23 +1,31 @@
 package rest.entities;
 
+import java.util.HashMap;
 import java.util.List;
+import java.util.Map;
 import java.util.UUID;
 
+import org.json.JSONObject;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.http.HttpStatus;
 import org.springframework.http.ResponseEntity;
 import org.springframework.web.bind.annotation.CrossOrigin;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.springframework.web.bind.annotation.RequestBody;
 import org.springframework.web.bind.annotation.RequestMapping;
 import org.springframework.web.bind.annotation.RequestMethod;
 import org.springframework.web.bind.annotation.RestController;
 
+import com.google.gson.JsonObject;
+
+import dao.entities.DatasetDao;
 import dao.entities.DatasetProfileDao;
 import dao.entities.DatasetProfileRulesetDao;
 import dao.entities.DatasetProfileViewstyleDao;
 import helpers.SerializerProvider;
 import managers.AdminManager;
 import managers.UserManager;
+import models.properties.PropertiesModel;
 
 @RestController
 @CrossOrigin
@@ -26,17 +34,40 @@ public class DatasetProfileController {
 	@Autowired private DatasetProfileDao datasetProfileDao;
 	@Autowired private DatasetProfileRulesetDao datasetProfileRulesetDao;
 	@Autowired private DatasetProfileViewstyleDao datasetProfileViewstyleDao;
-	
-	@RequestMapping(method = RequestMethod.GET, value = { "/datasetprofile/get/{id}" }, produces="application/json")
-	public ResponseEntity<Object> get(@PathVariable String id){
-		try {
-			entities.DatasetProfile profile = datasetProfileDao.read(UUID.fromString(id));
-			models.user.composite.DatasetProfile datasetprofile = UserManager.generateDatasetProfileModel(profile);
+	@Autowired private DatasetDao datasetDao;
 
+	@RequestMapping(method = RequestMethod.GET, value = { "/datasetprofile/get/{id}" }, produces="application/json")
+	public ResponseEntity<Object> getSingle(@PathVariable String id){
+		try {
+			entities.Dataset dataset = datasetDao.read(UUID.fromString(id));
+			models.user.composite.DatasetProfile datasetprofile = UserManager.generateDatasetProfileModel(dataset.getProfile());
+			if(dataset.getProperties()!=null){
+				JSONObject jobject = new JSONObject(dataset.getProperties());
+				Map<String,Object> properties = (Map<String, Object>)jobject.toMap();
+				datasetprofile.fromJsonObject(properties);				
+			}
 			return ResponseEntity.status(HttpStatus.OK).body(datasetprofile);
 		}
 		catch(Exception ex) {
 			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Serialization issue: "+ex.getMessage());
 		}
 	} 
+	
+	
+	@RequestMapping(method = RequestMethod.POST, value = { "/datasetprofile/save/{id}" }, consumes="application/json",produces="application/json")
+	public ResponseEntity<Object> postDataset(@PathVariable String id,@RequestBody PropertiesModel properties){
+		try {
+			entities.Dataset dataset = datasetDao.read(UUID.fromString(id));
+			Map<String,String> values = new HashMap();
+			properties.toMap(values);
+			JSONObject jobject = new JSONObject(values);
+			dataset.setProperties(jobject.toString());
+			datasetDao.update(dataset);
+
+			return ResponseEntity.status(HttpStatus.OK).body(properties);
+		}
+		catch(Exception ex) {
+			return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("Serialization issue: "+ex.getMessage());
+		}
+	} 
 }
diff --git a/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java b/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java
index 00c56c0af..25d7e9453 100644
--- a/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java
+++ b/dmp-backend/src/main/java/utilities/builders/XmlBuilder.java
@@ -15,9 +15,14 @@ import javax.xml.transform.dom.DOMSource;
 import javax.xml.transform.stream.StreamResult;
 
 import org.w3c.dom.Document;
+import org.w3c.dom.Element;
+import org.w3c.dom.Node;
+import org.w3c.dom.NodeList;
 import org.xml.sax.InputSource;
 import org.xml.sax.SAXException;
 
+import entities.xmlmodels.viewstyledefinition.FieldSet;
+
 
 public class XmlBuilder {
 
@@ -66,4 +71,14 @@ public class XmlBuilder {
 			return null;
 		}
 	}
+	
+	public static Element getNodeFromListByTagName(NodeList list, String tagName) {
+		for (int temp = 0; temp < list.getLength(); temp++) {
+			Node element = list.item(temp);				
+			if (element.getNodeType() == Node.ELEMENT_NODE) {
+				if(element.getNodeName().equals(tagName))return (Element) element;
+			}
+		}
+		return null;
+	}
 }
diff --git a/dmp-frontend/asdk.json b/dmp-frontend/asdk.json
new file mode 100644
index 000000000..6b50d9113
--- /dev/null
+++ b/dmp-frontend/asdk.json
@@ -0,0 +1 @@
+{"sections":[{"sections":[],"fieldGroups":[{"id":"dataSummaryGroup","title":"Data Summary","value":null,"description":null,"extendedDescription":null,"defaultVisibility":true,"page":null,"ordinal":"1","compositeFields":[{"id":"dataSummaryFS","ordinal":1,"fields":[{"id":"dataSummary","title":null,"description":null,"extendedDescription":null,"defaultVisibility":null,"page":null,"ordinal":1,"multiplicity":{"min":1,"max":1},"defaultValue":{"type":null,"value":null},"viewStyle":{"cssClass":null,"renderStyle":"textarea"},"visible":{"style":null,"rules":[]}}],"multiplicity":{"min":1,"max":1}}]}],"defaultVisibility":true,"page":null,"id":"datasummary","title":"Data Summary","description":null,"ordinal":"1"},{"sections":[{"sections":[],"fieldGroups":[{"id":"FindDataMetadataGroup","title":null,"value":null,"description":null,"extendedDescription":null,"defaultVisibility":true,"page":null,"ordinal":"2","compositeFields":[{"id":"useMetadataQ211FS","ordinal":1,"fields":[{"id":"useMetadataQ211","title":"Q2.1.1 Will you use metadata to describe the data?","description":"User can select from a list of metadata standards. If they cannot find the standard in the list provided then they should choose \"not listed\". Selecting this will result in a field in which the user can insert the URL to the description of the metadata scheme used. A \"comments\" box should exist to allow users to add comments. They may select more than one metadata standard. They may specify more than one URL when selecting \"not listed\". They are also presented with a field in which to specify the location of the metadata service.                              Users can select the \"no metadata\" button to specify no metadata will be used to describe the data.","extendedDescription":null,"defaultVisibility":true,"page":null,"ordinal":1,"multiplicity":{"min":1,"max":1},"defaultValue":{"type":null,"value":null},"viewStyle":{"cssClass":null,"renderStyle":"booleanDesicion"},"visible":{"style":null,"rules":[]}}],"multiplicity":{"min":1,"max":1}}]}],"defaultVisibility":true,"page":null,"id":"dataMetadata","title":"2.1 Making data findable, including provisions for metadata","description":null,"ordinal":"3"}],"fieldGroups":[],"defaultVisibility":null,"page":null,"id":"fairData","title":"2 Fair Data","description":null,"ordinal":null}],"label":"Horizon 2020 template"}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 376a60808..a632a6cb7 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -49,7 +49,7 @@ const appRoutes: Routes = [
     RouterModule.forRoot(
       appRoutes
       ,{ 
-        useHash: true
+        useHash: false
         //,enableTracing: true <-- debugging purposes only
       } 
     )
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 69958aef7..aaa4628f6 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -1,3 +1,17 @@
+import {
+    TableOfContentsFieldComponent,
+} from './form/tableOfContents/table-of-content-field/table-of-content-field.component';
+import { ProgressBarComponent } from './form/pprogress-bar/progress-bar.component';
+import {
+    TableOfContentsSectionComponent,
+} from './form/tableOfContents/table-of-content-section/table-of-content-section.component';
+import {
+    TableOfContentsGroupComponent,
+} from './form/tableOfContents/table-of-content-group/table-of-content-group.component';
+import {
+    TableOfContentsFieldSetComponent,
+} from './form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component';
+import { TableOfContentsComponent } from './form/tableOfContents/table-of-contents.component';
 import {
     DynamicFieldRadioBoxComponent,
 } from './form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component';
@@ -19,7 +33,7 @@ import { RouterModule, Routes, Router } from '@angular/router';
 //import {DataTableModule } from 'angular-4-data-table-bootstrap-4';
 import { DataTableModule } from "angular2-datatable";
 
-//import { OrganisationTableFilterPipe } from './pipes/organisation-table-filter.pipe';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { AppComponent } from './app.component';
 import { RestBase } from './services/rest-base';
@@ -34,7 +48,6 @@ import { AppRoutingModule } from './app-routing.module';
 import { AuthGuard } from './guards/auth.guard';
 import { PageNotFoundComponent } from './not-found.component';
 import { HomepageComponent } from './homepage/homepage.component';
-import { TocComponent } from './form/tableOfContents/toc.component';
 import { ConfirmationComponent } from './widgets/confirmation/confirmation.component';
 
 
@@ -53,7 +66,7 @@ import { NguiAutoCompleteModule } from '@ngui/auto-complete';
 
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
-import { BreadcrumbModule, MenuItem } from 'primeng/primeng';
+import { BreadcrumbModule,PanelModule, MenuItem } from 'primeng/primeng';
 
 import { CommonModule } from '@angular/common';
 
@@ -81,8 +94,7 @@ import { BreadcrumbComponent } from './widgets/breadcrumb/breadcrumb.component';
 import { DmpDetailedComponent } from './viewers/dmp-detailed/dmp-detailed.component';
 import { ProjectDetailedComponent } from './viewers/project-detailed/project-detailed.component';
 
-
-
+import {ProgressBarModule} from 'primeng/primeng';
 
 @NgModule({
   declarations: [
@@ -93,7 +105,10 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
     DynamicFormCompositeFieldComponent,
     DynamicFieldBooleanDecisionComponent,
     DynamicFieldRadioBoxComponent,
-    TocComponent,
+    TableOfContentsComponent,
+    TableOfContentsFieldSetComponent,
+    TableOfContentsGroupComponent,
+    TableOfContentsSectionComponent,
     GooggleSignInComponent,
     MainSignInComponent,
     PageNotFoundComponent,
@@ -113,6 +128,8 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
     DatasetTableFilterPipe,
     DatasetStatusFilterPipe,
     StatusToString,
+    TableOfContentsFieldComponent,
+    ProgressBarComponent,
     DynamicFieldCheckBoxComponent,
     BreadcrumbComponent, DmpDetailedComponent, ProjectDetailedComponent
   ],
@@ -131,6 +148,9 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
     Ng4LoadingSpinnerModule,
     NguiAutoCompleteModule,
     BreadcrumbModule,
+    ProgressBarModule,
+    PanelModule,
+    BrowserAnimationsModule,
     SidebarModule.forRoot()
 
   ],
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
index 28eaae771..45208ee16 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
@@ -2,6 +2,6 @@
     <label>{{field.description}}</label>
     <div>{{field.extendedDescription}}</div>
   <select class="form-control" formControlName="value">
-      <option *ngFor="let opt of field.data.values" [value]="opt.value">{{opt.label}}</option>
+      <option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
     </select>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
index 130d96d9f..d89f0b684 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
@@ -2,6 +2,6 @@
     <label>{{field.description}}</label>
     <div>{{field.extendedDescription}}</div>
   <div *ngFor="let option of this.field.data.options">
-    <input type="radio" formControlName="value" value="option.value">{{option.label}}<br>
+    <input type="radio" formControlName="value" [value]="option.value">{{option.label}}<br>
   </div>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
index 7945c060a..54b6613c8 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
@@ -26,22 +26,21 @@
 
 </div> -->
 
-<div *ngIf="this.visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" class="form-group" [ngSwitch]="field.viewStyle.renderStyle">
-  <div [ngClass]="{true:'show', false:'hide'}[field.visible]">
+<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
 
 
-      <label>{{field.title}}</label>
-      
-    <div *ngSwitchCase="'freetext'">
-        <label>{{field.description}}</label>
-        <div>{{field.extendedDescription}}</div>
-      <input class="form-control" formControlName="value">
-    </div>
+  <label>{{path+' '+field.title}}</label>
 
-    <!--input or change event
+  <div *ngSwitchCase="'freetext'">
+    <label>{{field.description}}</label>
+    <div>{{field.extendedDescription}}</div>
+    <input class="form-control" formControlName="value">
+  </div>
+
+  <!--input or change event
       on change event the listener is triggered on blur -->
 
-    <!-- <div *ngSwitchCase="'dropdown'">
+  <!-- <div *ngSwitchCase="'dropdown'">
 
         <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
         
@@ -50,51 +49,49 @@
         </select>
       </div> -->
 
-    <div *ngSwitchCase="'combobox'">
-      <!--TODO-->
-      <div *ngIf="this.field.data.type === 'autocomplete'">
-        <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
-      </div>
-      <div *ngIf="this.field.data.type === 'wordlist'">
-        <df-dropdown [form]="form" [field]="field"></df-dropdown>  
-      </div>      
+  <div *ngSwitchCase="'combobox'">
+    <!--TODO-->
+    <div *ngIf="this.field.data.type === 'autocomplete'">
+      <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
     </div>
+    <div *ngIf="this.field.data.type === 'wordlist'">
+      <df-dropdown [form]="form" [field]="field"></df-dropdown>
+    </div>
+  </div>
 
 
-    <!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
+  <!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
         <label class="checkBoxLabelCustom">
             <input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
             (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
         </label>
       </div> -->
 
-    <div *ngSwitchCase="'checkBox'" class="checkbox">
-      <df-checkbox [form]="form" [field]="field"></df-checkbox>      
-    </div>
-
-    <div *ngSwitchCase="'textarea'">
-      <textarea class="form-control" formControlName="value"> </textarea>
-    </div>
-
-    <div *ngSwitchCase="'booleanDecision'">
-      <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
-    </div>
-
-    <div *ngSwitchCase="'radiobox'">
-      <df-radiobox [form]="form" [field]="field"></df-radiobox>
-    </div>
-    
+  <div *ngSwitchCase="'checkBox'" class="checkbox">
+    <df-checkbox [form]="form" [field]="field"></df-checkbox>
   </div>
 
-  <div *ngSwitchCase="'label'"> </div>
-
-
-  <div [hidden]="isValid">
-    <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
-    <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
-    <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
+  <div *ngSwitchCase="'textarea'">
+    <textarea class="form-control" formControlName="value"> </textarea>
   </div>
 
+  <div *ngSwitchCase="'booleanDecision'">
+    <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
+  </div>
+
+  <div *ngSwitchCase="'radiobox'">
+    <df-radiobox [form]="form" [field]="field"></df-radiobox>
+  </div>
+
+<div *ngSwitchCase="'label'"> </div>
+
+
+<div [hidden]="isValid">
+  <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
+  <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
+  <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
+</div>
+
 
 </div>
 
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
index fd2ce1078..049b0fbde 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
@@ -19,9 +19,8 @@ export class DynamicFormFieldComponent {
     @Input() field: Field;
     @Input() form: FormGroup;
     @Input() pathName:string;
+    @Input() path:string;
     
-    private fragment: string;
-
     constructor(private route: ActivatedRoute,private visibilityRulesService:VisibilityRulesService) { }
 
     ngOnChanges(changeRecord) {
@@ -41,8 +40,4 @@ export class DynamicFormFieldComponent {
         return this.form.get("value").hasError("forbiddenName");
     }
 
-    public ngOnInit() {                 
-        this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
-    }
-
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
index 55876bae5..940ed0085 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
@@ -1,7 +1,9 @@
-<div [formGroup]="form">
+<div [id]="compositeField.id" [formGroup]="form">
     <h4>{{compositeField.title}}</h4>
+    <h4>{{compositeField.description}}</h4>
+    <h4>{{compositeField.extendedDescription}}</h4>
     <div *ngFor="let field of compositeField.fields; let i = index;">
-        <df-field [field]="field" [form]="form.get('fields').get(''+i)" [pathName]="pathName+'.fields.'+i"></df-field>
+        <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
     </div>
 
 </div>
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
index dccd82325..c37171d5b 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
@@ -11,6 +11,7 @@ import { Component, Input, OnInit } from '@angular/core';
     @Input() compositeField: CompositeField
     @Input() form: FormGroup;
     @Input() pathName:string;
+    @Input() path:string;
     
     constructor(){}
 
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
index 3086b9765..21f0da77f 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
@@ -1,7 +1,9 @@
-<div [formGroup]="form" >
-    <h4 >{{group.title}}</h4>
+<div [id]="group.id" [formGroup]="form" >
+    <h4 >{{path+' '+group.title}}</h4>
+    <h4 >{{group.description}}</h4>
+    <h4 >{{group.extendedDescription}}</h4>
     <div *ngFor="let compositeField of group.compositeFields; let i = index;">
-        <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+        <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)"  [path]="path+'.'+(i+1)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
     </div>
 
 </div>
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
index f90638974..8f21e7b14 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
@@ -16,8 +16,8 @@ export class DynamicFormGroupComponent implements OnInit {
   @Input() form: FormGroup;
   @Input() pathName:string;
   
-  @Input() customStyle: {};
-  @Input() classFromJson: string;
+  @Input() path:string;
+  
 
   constructor() {
   }
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
index e280016de..bda872ad4 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
@@ -1,13 +1,17 @@
-<div [formGroup]="form">
-    <h3>{{section.title}}</h3>
-    <div *ngIf="section.fieldGroups">
-        <div *ngFor="let group of section.fieldGroups; let j = index;">
-            <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
+<p-panel [header]="path+' '+section.title" [toggleable]="true">
+
+    <div [id]="section.id" [formGroup]="form">
+        <h4>{{section.description}}</h4>
+        <h4>{{section.extendedDescription}}</h4>
+        <div *ngIf="section.fieldGroups">
+            <div *ngFor="let group of section.fieldGroups; let j = index;">
+                <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
+            </div>
+        </div>
+        <div *ngIf="section.sections">
+            <div *ngFor="let itemsection of section.sections; let j = index;">
+                <df-section [section]="itemsection" [form]="form.get('sections').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.sections.'+j"></df-section>
+            </div>
         </div>
     </div>
-    <div *ngIf="section.sections">
-        <div *ngFor="let itemsection of section.sections; let j = index;">
-            <df-section [section]="itemsection" [form]="form.get('sections').get(''+j)" [pathName]="pathName+'.sections.'+j"></df-section>
-        </div>
-    </div>   
-</div>
\ No newline at end of file
+</p-panel>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
index 798c451bc..4c22083c5 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
@@ -10,7 +10,7 @@ import { Component, Input, OnInit } from '@angular/core';
     @Input() section: Section
     @Input() form: FormGroup;
     @Input() pathName:string;
-
+    @Input() path:string;
     constructor(){}
 
     ngOnInit(){
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 60fe2fc6a..1a8da42f0 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,53 +1,42 @@
-<div class="parent-div">
-		
-	<div class=" child-div-left" [ngClass]="{true:'col-md-8 col-sm-9', false:'col-md-12 col-sm-12'}[expandedToc]">
-		
+<div class="ui-g">
+	
+	<div class="ui-g-8" >
+
 		<div class="col-md-12 form-body-container" id="form-container">
 
-			<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
-					
-				<div *ngFor = "let section of dataModel.sections; let i = index;">							
-					<df-section [section]="section" [form]="form.get('sections').get(''+i)" [pathName]="'sections.'+i"></df-section>
+			<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
+
+				<div *ngFor="let section of dataModel.sections; let i = index;">
+					<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
 				</div>
-	
-				<!-- <div *ngFor="let group of dataModel.groups">
-					<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
-				</div> -->
-	
-	
 			</form>
 		</div>
-	
 
+		<div class="col-md-12 form-footer-container">
+			<div>
+				<progress-bar *ngIf="progressbar" [formGroup]=form></progress-bar>
+			</div>
+		</div>
 		<!-- <div class="col-md-12 form-footer-seperator" >
 		</div>
 
 	
-		<div class="col-md-12 form-footer-container" >
-			
-				<div >
-					<div class="progress">
-						<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
-						</div>
-					</div>
-				</div>
+		
 
 			<div>
 				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
 				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
 			</div>
 	 -->
-			<!--
+		<!--
 			<div *ngIf="payLoad" class="form-row">
 				<strong>Saved the following values</strong><br>{{payLoad}}
 			</div>
 			-->
-			
-			
-			<p>Form value: {{ form.value | json }}</p>
-		
-	
-			
+
+
+
+
 		<!-- 	<div class="text-center">
 				<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
 					<li [ngClass]="{disabled:pagination.currentPage === 1}">
@@ -68,32 +57,35 @@
 				</ul>
 			</div> -->
 
-	</div>	
+	</div>
 
 
-<!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
- -->		<!--
+	<!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
+ -->
+	<!--
 		<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
 		-->
-<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
+	<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
 	</div>
 	
 	<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
 		<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
 		<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
-			<!--
+	<!--
 			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
 			-->
-		<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
+	<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
 		</div> 
 	</div>
+ -->
+	<div class="ui-g-4">
+		<table-of-content [model]="dataModel"></table-of-content>
+	</div>
+
+	<div class="col-md-12 form-footer-container">
+		<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+	</div>
 
-	<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'shrink-width' }[expandedToc]" id="toc-container">
-		<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
-	</div> -->
-				
-		
-			
 </div>
 
 
@@ -116,5 +108,4 @@
 			</div>
 		</div>
 	</div>
-</div> -->
-		
\ No newline at end of file
+</div> -->
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 1bc148088..77460d458 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -17,36 +17,36 @@ import { PaginationService } from '../../app/services/pagination.service';
 import { TokenService, TokenProvider } from '../services/login/token.service';
 import { ModalComponent } from '../modal/modal.component';
 
-import {Location} from '@angular/common';
+import { Location } from '@angular/common';
 
 import { AngularDraggableModule } from 'angular2-draggable';
 
-import {MenuItem} from 'primeng/primeng';
+import { MenuItem } from 'primeng/primeng';
 
-import {PDFService} from '../services/transformers/pdf.service';
+import { PDFService } from '../services/transformers/pdf.service';
 
 import './../../assets/xml2json.min.js';
 declare var X2JS: any;
 
 var flatten = require('flat');
-declare var $ :any;
+declare var $: any;
 
 
 import * as scroll from '../../assets/jquery.scrollTo.min.js';
 
 
 import '../../assets/custom.js';
-declare function simple_notifier(type: string, title: string, message:string): any;
+declare function simple_notifier(type: string, title: string, message: string): any;
 
 
 //import '../../assets/perfect-scrollbar/perfect-scrollbar.js';
-declare var PerfectScrollbar : any;
+declare var PerfectScrollbar: any;
 
 @Component({
   selector: 'dynamic-form',
   templateUrl: './dynamic-form.component.html',
   styleUrls: [
-    './dynamic-form.component.css', 
+    './dynamic-form.component.css',
     '../../assets/perfect-scrollbar/perfect-scrollbar.css'
   ],
   providers: [
@@ -56,27 +56,17 @@ declare var PerfectScrollbar : any;
 export class DynamicFormComponent implements OnInit {
 
   @Input() dataModel: DatasetModel = new DatasetModel();
+  @Input() path:string;
   form: FormGroup;
-  payLoad = '';
-  @Input() dirtyValues: number = 0;
-  // pagination object
-  @Input() pagination: any = {};
-  finalizeStatus:boolean = false;
   id: string;
   datasetId: string;
-  pathName:string;
-  //datasetProperties:string; 
+  pathName: string;
 
-  private fragment: string;
-  xml2jsonOBJ: any;
-
-  expandedToc : boolean = true;
+  private progressbar:boolean = false;
 
 
-  constructor(private qcs: FieldControlService, private serverService: ServerService, private router: Router, private pdfService : PDFService,
-    private _location: Location, private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService,private visibilityRulesService:VisibilityRulesService) {
-    this.form = this.qcs.toFormGroup(new Array(), new Array());
-    this.xml2jsonOBJ = new X2JS();
+  constructor(private qcs: FieldControlService, private serverService: ServerService, private router: Router, private pdfService: PDFService,
+    private _location: Location, private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService, private visibilityRulesService: VisibilityRulesService) {
   }
 
   getSubForm(subformName) {
@@ -85,13 +75,41 @@ export class DynamicFormComponent implements OnInit {
 
 
   ngOnInit() {
-    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) 
+    //this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(new DatasetModel(), DatasetModel);
+    //this.form = this.dataModel.buildForm();
+    let sub = this.route.queryParams.subscribe(params => {
+
+      let dmpid = params.id;
+      this.datasetId = params.datasetId;
+      this.serverService.getDmp(this.datasetId).subscribe(
+        response => {
+          this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
+          this.form = this.dataModel.buildForm();
+          this.visibilityRulesService.formGroup = this.form;
+          let rules:Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules,Rule);
+          this.visibilityRulesService.buildVisibilityRules(rules)
+          this.progressbar = true;
+        },
+        error => {
+          console.log("Could not load dmp");
+        }
+      )
+
+      /* 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(){
+    this.serverService.updateDataset(this.datasetId,this.form.value).subscribe()
+  }
   /* scrollToElemID(elemID) {
     scroll("#" + elemID);
   }
@@ -116,39 +134,7 @@ export class DynamicFormComponent implements OnInit {
     } catch (e) { }
   }
 
-  submitForm(final){
-    debugger;
-    this.serverService.getDatasetByID(this.datasetId).subscribe(
-      (data) => {
-        if (final) data.status = 2;
-        
-        //data.properties = "<root><formValues><![CDATA["+JSON.stringify(this.form.value)+"]]></formValues><dataModel><![CDATA["+JSON.stringify(this.dataModel)+"]]></dataModel></root>";
-        data.properties = JSON.stringify(this.form.value);
-
-        data.profile = {"id": data.profile.id};
-
-        this.serverService.setDataset(data).subscribe(
-          (data) => {
-             
-            console.log("Updated dataset");  
-            
-            if (final){
-              this._location.back();
-              simple_notifier("success",null,"Finalized form progress");
-            }
-            else{
-              simple_notifier("success",null,"Saved form progress");
-            }
-
-          },
-          (err) => {
-            simple_notifier("danger",null,"Could not save form progress");
-          });
-      },
-      (err) => {
-        simple_notifier("danger",null,"Could not save form progress");
-      });
-  }
+  
 
   SaveForm() {
     let final = false;
@@ -198,8 +184,8 @@ export class DynamicFormComponent implements OnInit {
  */
 
   createPDF(elementID : string, pdffilename : string){
-    this.pdfService.toPDF(elementID, pdffilename);
-  }
+        this.pdfService.toPDF(elementID, pdffilename);
+      }
 
 
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.html b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.html
new file mode 100644
index 000000000..7fac72e73
--- /dev/null
+++ b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.html
@@ -0,0 +1 @@
+<p-progressBar [value]="value"></p-progressBar>
diff --git a/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
new file mode 100644
index 000000000..d39adbb48
--- /dev/null
+++ b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
@@ -0,0 +1,51 @@
+
+import { Component, Input, OnInit } from '@angular/core';
+import { FormGroup, FormControl, FormArray } from '@angular/forms'
+@Component({
+    selector: 'progress-bar',
+    templateUrl: './progress-bar.component.html',
+})
+export class ProgressBarComponent implements OnInit {
+    @Input() formGroup: FormGroup
+
+    private value: number;
+    ngOnInit() {
+        this.formGroup
+            .valueChanges
+            .subscribe(control => {
+                this.value = (this.getDirtyValues(this.formGroup) / this.getFormControlDepthLength(this.formGroup)) * 100
+            })
+    }
+
+    getDirtyValues(form: FormGroup): number {
+        let value = 0;
+        Object.keys(form.controls).forEach(key => {
+            let control = form.controls[key]
+            if (control instanceof FormGroup) value += this.getDirtyValues(control);
+            else if (control instanceof FormArray) {
+                let formArray = (<FormArray>control);
+                for (let i = 0; i < formArray.length; i++) {
+                    value += this.getDirtyValues(<FormGroup>formArray.get("" + i))
+                }
+            }
+            else if (control.valid) value++;
+        });
+        return value;
+    }
+
+    getFormControlDepthLength(form: FormGroup): number {
+        let value = 0;
+        Object.keys(form.controls).forEach(key => {
+            let control = form.controls[key]
+            if (control instanceof FormGroup) value += this.getFormControlDepthLength(control);
+            else if (control instanceof FormArray) {
+                let formArray = (<FormArray>control);
+                for (let i = 0; i < formArray.length; i++) {
+                    value += this.getFormControlDepthLength(<FormGroup>formArray.get("" + i))
+                }
+            }
+            else if (control instanceof FormControl) value++;
+        });
+        return value;
+    }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
new file mode 100644
index 000000000..e7802e191
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
@@ -0,0 +1,9 @@
+import { ActivatedRouteSnapshot,Router,ActivatedRoute } from '@angular/router';
+
+export class BaseTableOfContent{
+    constructor(public router: Router,public route:ActivatedRoute){}
+    
+    scrollToId(elementId) {
+      this.router.navigate([this.route.snapshot.url], { fragment: elementId });    
+    } 
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
new file mode 100644
index 000000000..f443528b0
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
@@ -0,0 +1,2 @@
+<a (click)="scrollToId(model.id)">{{path+' '+model.title}}</a>
+    
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
new file mode 100644
index 000000000..c98811255
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
@@ -0,0 +1,22 @@
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { CompositeField } from '../../../models/CompositeField';
+import { Field } from '../../../models/Field';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {Router,  ActivatedRoute} from '@angular/router'
+
+
+@Component({
+    selector: 'table-of-contents-field',
+    templateUrl: '/table-of-content-field.component.html',
+    providers:  []
+  })
+export class TableOfContentsFieldComponent extends BaseTableOfContent{
+    @Input() model:Field;
+    @Input() index:number;
+    @Input() public path:string;
+
+    constructor(public router: Router, public route: ActivatedRoute) {
+        super(router, route)
+      }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
new file mode 100644
index 000000000..902d178af
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
@@ -0,0 +1,7 @@
+<!-- All contents in the first page -->
+
+<ul>
+    <li *ngFor="let field of model.fields let i = index">
+        <table-of-contents-field [model]="field" [index]="i" [path]="path"> </table-of-contents-field>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
new file mode 100644
index 000000000..f412d411c
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
@@ -0,0 +1,25 @@
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { CompositeField } from '../../../models/CompositeField';
+import { FieldGroup } from '../../../models/FieldGroup';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Router, ActivatedRoute } from '@angular/router'
+
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+
+@Component({
+  selector: 'table-of-contents-fieldset',
+  templateUrl: '/table-of-content-fieldset.component.html',
+  providers: []
+})
+export class TableOfContentsFieldSetComponent extends BaseTableOfContent {
+
+  @Input() model: CompositeField;
+  @Input() index: number;
+  @Input() public path: string;
+
+  constructor(public router: Router, public route: ActivatedRoute) {
+    super(router, route)
+  }
+}
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
new file mode 100644
index 000000000..9f9df4a09
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
@@ -0,0 +1,5 @@
+<a (click)="scrollToId(model.id)">{{path+' '+model.title}}</a>
+    
+    <div *ngFor="let fieldsetModel of model.compositeFields let i = index">
+        <table-of-contents-fieldset [model]="fieldsetModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-fieldset>
+    </div>
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
new file mode 100644
index 000000000..f44e073fb
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
@@ -0,0 +1,29 @@
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { FieldGroup } from '../../../models/FieldGroup';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import {Router,  ActivatedRoute} from '@angular/router'
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+
+@Component({
+  selector: 'table-of-contents-group',
+  templateUrl: '/table-of-content-group.component.html',
+  providers: []
+})
+export class TableOfContentsGroupComponent extends BaseTableOfContent  {
+
+  @Input() model: FieldGroup;
+  @Input() index: number;
+  @Input() public path: string;
+
+  /*   @Output()
+    setPage:EventEmitter<number> = new EventEmitter<number>();
+
+ */
+  constructor(public router: Router, public route: ActivatedRoute) {
+    super(router, route)
+  }
+
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
new file mode 100644
index 000000000..f073dff1e
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
@@ -0,0 +1,14 @@
+<!-- All contents in the first page -->
+<a (click)="scrollToId(model.id)">{{path+' '+model.title}}</a>
+
+<ul>
+    <li *ngFor="let groupModel of model.fieldGroups let i = index">
+        <table-of-contents-group [model]="groupModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-group>
+    </li>
+</ul>
+<!-- All contents in the first page -->
+<ul>
+        <li *ngFor="let sectionModel of model.sections let i = index">
+            <table-of-contents-section [model]="sectionModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-section>
+        </li>
+    </ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
new file mode 100644
index 000000000..c4ee2f115
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
@@ -0,0 +1,27 @@
+import { BaseTableOfContent } from '../base-table-of-content.component';
+import { Section } from '../../../models/Section';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { ActivatedRouteSnapshot,Router,ActivatedRoute } from '@angular/router';
+
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+
+@Component({
+  selector: 'table-of-contents-section',
+  templateUrl: '/table-of-content-section.component.html',
+  providers: []
+})
+export class TableOfContentsSectionComponent extends BaseTableOfContent implements OnInit {
+
+  @Input() model: Section;
+  @Input() index: number;
+  @Input() public path: string;
+
+  constructor(public router: Router,public route:ActivatedRoute){
+    super(router,route)
+  }
+  ngOnInit() {
+
+  }
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
new file mode 100644
index 000000000..468ce8f7a
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
@@ -0,0 +1,7 @@
+<!-- All contents in the first page -->
+<ul>
+    <li *ngFor="let section of model.sections let i = index">
+        <!-- && field.label for sections without field label as data summery -->
+        <table-of-contents-section [model]="section" [index]="i+1" [path]="i+1"> </table-of-contents-section>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.ts
new file mode 100644
index 000000000..de349847b
--- /dev/null
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.ts
@@ -0,0 +1,26 @@
+import { Model } from '../../entities/model/model';
+import { DatasetModel } from '../../models/DatasetModel';
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+//import * as $ from '../../../../node_modules/jquery/dist/jquery'
+
+import * as scroll from '../../../assets/jquery.scrollTo.min.js';
+
+@Component({
+  selector: 'table-of-content',
+  templateUrl: '/table-of-contents.component.html',
+  styleUrls: ['./toc.component.css'],
+  providers:  []
+})
+export class TableOfContentsComponent implements OnInit{ 
+
+    @Input() model:DatasetModel;
+    public path:string="";
+  /*   @Output()
+    setPage:EventEmitter<number> = new EventEmitter<number>();
+
+ */    ngOnInit(){     
+
+       }
+
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
deleted file mode 100644
index 45a50bf33..000000000
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<body data-spy="scroll" data-target="#toc">
-    <nav id="toc" data-toggle="toc">
-        <ul class="nav flex-column">
-            <li class="nav-item">              
-                <div  *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
-                    <ul>
-                        <li>
-                            <a class="cursor-hand" (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
-                            <ul *ngFor="let field of group.groupFields">
-                                <li *ngIf="field.visible == 'true' && field.label"> <!-- && field.label for sections without field label as data summery -->
-                                    <a class="cursor-hand" (click)='scrollToElemID(field.key, group.page)'>{{field.label}}  </a>
-                                </li>
-                            </ul>
-                        </li>
-                    </ul>
-                </div>
-            </li>
-        </ul>
-    </nav>
-</body>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
deleted file mode 100644
index 35853cc17..000000000
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
-
-//import * as $ from '../../../../node_modules/jquery/dist/jquery'
-
-import * as scroll from '../../../assets/jquery.scrollTo.min.js';
-
-@Component({
-  selector: 'toc',
-  templateUrl: '/toc.component.html',
-  styleUrls: ['./toc.component.css'],
-  providers:  []
-})
-export class TocComponent implements OnInit{ 
-
-    private headers = new Array();
-
-    @Output()
-    setPage:EventEmitter<number> = new EventEmitter<number>();
-
-    ngOnInit(){     
-
-    }
-
-    scrollToElemID(elemID, _page){
-      console.log("going to id:"+elemID)
-      var page = parseInt(_page)
-      this.setPage.emit(page);
-      scroll("#"+elemID, {}, {offset: top});
-    }
-
-}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/models/Field.ts b/dmp-frontend/src/app/models/Field.ts
index fdfe32a7a..ad4c93edc 100644
--- a/dmp-frontend/src/app/models/Field.ts
+++ b/dmp-frontend/src/app/models/Field.ts
@@ -29,15 +29,15 @@ export class Field extends BaseModel implements Serializable<Field>,FormGenerato
 
     buildForm():FormGroup{
         let formGroup = this.formBuilder.group({
-            id: [this.id],
-            title: [this.title],
-            value: [this.value],
+             id: [this.id],
+           /* title: [this.title], */
+            value: [this.value]/* ,
             description: [this.description],
             extendedDescription:[this.extendedDescription],
             viewStyle: [this.viewStyle],
             defaultVisibility:[this.defaultVisibility],
             page:[this.page],
-            data:[this.data]            
+            data:[this.data]        */     
         });        
         return formGroup;
     }
diff --git a/dmp-frontend/src/app/models/FieldGroup.ts b/dmp-frontend/src/app/models/FieldGroup.ts
index 1c1c3ed88..ae608f78f 100644
--- a/dmp-frontend/src/app/models/FieldGroup.ts
+++ b/dmp-frontend/src/app/models/FieldGroup.ts
@@ -33,13 +33,13 @@ export class FieldGroup extends BaseModel implements Serializable<FieldGroup>, F
 
     buildForm(): FormGroup {
         let formGroup: FormGroup = this.formBuilder.group({
-            id: [this.id],
+            /* id: [this.id],
             title: [this.title],
             value: [this.value],
             description: [this.description],
             extendedDescription: [this.extendedDescription],
             defaultVisibility: [this.defaultVisibility],
-            page: [this.page]
+            page: [this.page] */
         });
         let compositeFieldsFormArray = new Array<FormGroup>();
         if (this.compositeFields) {
diff --git a/dmp-frontend/src/app/models/Section.ts b/dmp-frontend/src/app/models/Section.ts
index cae737010..484906077 100644
--- a/dmp-frontend/src/app/models/Section.ts
+++ b/dmp-frontend/src/app/models/Section.ts
@@ -42,11 +42,11 @@ 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('defaultVisibility', new FormControl(this.defaultVisibility))
         formGroup.addControl('page', new FormControl(this.page))
         formGroup.addControl('id', new FormControl(this.id))
         formGroup.addControl('title', new FormControl(this.title))
-        formGroup.addControl('description', new FormControl(this.description))        
+        formGroup.addControl('description', new FormControl(this.description))    */     
         return formGroup;
     }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/services/rest-base.ts b/dmp-frontend/src/app/services/rest-base.ts
index cb190b3ef..b0210c108 100644
--- a/dmp-frontend/src/app/services/rest-base.ts
+++ b/dmp-frontend/src/app/services/rest-base.ts
@@ -18,7 +18,7 @@ export class RestBase {
     
 
     protocol: string = "http";
-    hostname: string ="dionysus.di.uoa.gr"
+    hostname: string ="localhost"
     port: number = 8080;
     webappname: string = "dmp-backend";
     
diff --git a/dmp-frontend/src/app/services/server.service.ts b/dmp-frontend/src/app/services/server.service.ts
index d1aab087e..d3341d59a 100644
--- a/dmp-frontend/src/app/services/server.service.ts
+++ b/dmp-frontend/src/app/services/server.service.ts
@@ -47,11 +47,8 @@ export class ServerService {
     return this.restBase.get("dmp/listDMPLabelID");
   } 
 
-  public getDmp(dmpid : string, eager? : boolean){
-    if(eager && eager==true)
-      return this.restBase.get("dmps/"+dmpid, {"eager": true});
-    else
-      return this.restBase.get("dmps/"+dmpid, {"eager": false});
+  public getDmp(dmpid : string){
+      return this.restBase.get("datasetprofile/get/"+dmpid);
   }
 
   public getDmpHistory(dmpid: string){
@@ -160,6 +157,9 @@ export class ServerService {
   }
 
 
+  public updateDataset(id:string,properties:any){
+    return this.restBase.post("datasetprofile/save/"+id,properties);
+  }
 /*
   logOut() {
     this.tokenService.logout();
diff --git a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
index a33fb1c01..f56117c97 100644
--- a/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
+++ b/dmp-frontend/src/app/viewers/dmp-detailed/dmp-detailed.component.ts
@@ -30,7 +30,7 @@ export class DmpDetailedComponent implements OnInit {
     let sub = this.route.queryParams.subscribe(params => {
 
       let dmpid = params.dmpid;
-      this.serverService.getDmp(dmpid, true).subscribe(
+      this.serverService.getDmp(dmpid).subscribe(
         response => {
           
           this.dmp = response;
diff --git a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
index 372a4617a..ac22b1e47 100644
--- a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
+++ b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
@@ -21,7 +21,7 @@ export class VisibilityRulesService {
         let sourceVisibilityRules = visibilityRule.sourceVisibilityRules;
         for (let i = 0; i < sourceVisibilityRules.length; i++) {
             let sourceVisibilityRule = sourceVisibilityRules[i];
-            if (!this.formGroup.get( this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value'))continue;
+            if (!this.formGroup.get( this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value'))return false; //TODO
             if(sourceVisibilityRule.sourceControlValue != ''+this.formGroup.get( this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value').value) return false;
         }
         return true;

From f3d9597a54da57f9d3d63ec11b43ec99124bd0e6 Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Wed, 6 Dec 2017 10:46:05 +0200
Subject: [PATCH 02/19] ui changes

---
 dmp-frontend/src/app/app.component.html       |  98 +++++----
 dmp-frontend/src/app/app.module.ts            |   9 +-
 .../src/app/form/dynamic-form.component.css   | 127 ++----------
 .../src/app/form/dynamic-form.component.html  | 196 +++++++++---------
 .../src/app/form/dynamic-form.component.ts    |  43 +++-
 5 files changed, 228 insertions(+), 245 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index f36df178a..57546e87d 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,14 +1,13 @@
-
 <div>
   <nav class="navbar navbar-default shadowed">
-    <div class="col-md-5" >
+    <div class="col-md-5">
       <!--
       <button class="btn btn-primary " [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'>
         <span style="font-size:20px;cursor:pointer" >&#9776;</span>
       </button>
     -->
       <div class="nav navbar-nav navbar-left">
-          <!--
+        <!--
           <div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
               <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Go To <span class="caret"></span> </button>
               <ul class="dropdown-menu">
@@ -17,44 +16,65 @@
               </ul>
             </div>
           -->
-          <li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate
-              <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                  <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
-                  <li><a class="cursor" (click)="goToProjects()">Projects</a></li>
-              </ul>
+        <li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="cursor" (click)="goToDMPs()">My DMPs</a>
             </li>
-
-
-        
-
-      </div>
-    </div>
-    
-
-
-    <div class="col-md-3" >
-        <h3 class="navbar-title">Data Management Plans Creator</h3>
-    </div>
-
-    <div class="col-md-4" >
-        <ul class="nav navbar-nav navbar-right">
-            <li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li role="separator" class="divider"></li>
-                <li><a href="#">Separated link</a></li>
-              </ul>
+            <li>
+              <a class="cursor" (click)="goToProjects()">Projects</a>
             </li>
-            <li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"><a>{{tokenService.getEmail()}}</a></li>
-            <li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()"><a>Logout</a></li>
-            <li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()" ><a>Login</a></li>
           </ul>
+        </li>
+
+
+
+
       </div>
+    </div>
+
+
+
+    <div class="col-md-3">
+      <h3 class="navbar-title">Data Management Plans Creator</h3>
+    </div>
+
+    <div class="col-md-4">
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <a href="#">Action</a>
+            </li>
+            <li>
+              <a href="#">Another action</a>
+            </li>
+            <li>
+              <a href="#">Something else here</a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href="#">Separated link</a>
+            </li>
+          </ul>
+        </li>
+        <li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
+          <a>{{tokenService.getEmail()}}</a>
+        </li>
+        <li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()">
+          <a>Logout</a>
+        </li>
+        <li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()">
+          <a>Login</a>
+        </li>
+      </ul>
+    </div>
 
   </nav>
 
@@ -82,9 +102,7 @@
 
 
   <div id="appBody" class="child_div_right">
-      
-    <router-outlet></router-outlet> 
-
+      <router-outlet></router-outlet>
   </div>
 
 
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index aaa4628f6..8008a69d5 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -66,7 +66,7 @@ import { NguiAutoCompleteModule } from '@ngui/auto-complete';
 
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
-import { BreadcrumbModule,PanelModule, MenuItem } from 'primeng/primeng';
+import { BreadcrumbModule, PanelModule } from 'primeng/primeng';
 
 import { CommonModule } from '@angular/common';
 
@@ -95,6 +95,8 @@ import { DmpDetailedComponent } from './viewers/dmp-detailed/dmp-detailed.compon
 import { ProjectDetailedComponent } from './viewers/project-detailed/project-detailed.component';
 
 import {ProgressBarModule} from 'primeng/primeng';
+import {StepsModule,MenuItem} from 'primeng/primeng';
+import {SidebarModule as NgSidebarModule} from 'primeng/primeng';
 
 @NgModule({
   declarations: [
@@ -151,8 +153,9 @@ import {ProgressBarModule} from 'primeng/primeng';
     ProgressBarModule,
     PanelModule,
     BrowserAnimationsModule,
-    SidebarModule.forRoot()
-
+    SidebarModule.forRoot(),
+    StepsModule,
+    NgSidebarModule
   ],
   providers: [{
     provide: HTTP_INTERCEPTORS,
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index 80406e064..263b37ebf 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -1,111 +1,30 @@
-.hide{
-    display:none;
+.full-width {
+    width: 100%;
 }
 
-.show {
-    display:block;
+.ui-steps .ui-steps-item {
+    width: 25%;
 }
 
-.btncustom{
-    background-color:#337ab7;
-    color:white;
-    margin-top:15px;
+.ui-steps.steps-custom {
+    margin-bottom: 30px;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
+    height: 10px;
+    padding: 0 1em;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
+    background-color: #0081c2;
+    color: #FFFFFF;
+    display: inline-block;
+    width: 36px;
+    border-radius: 50%;
+    margin-top: -14px;
+    margin-bottom: 10px;
 }
 
-.parent-div {
-    height: calc(100vh - 60px - 32px); /*  is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) */
-    width:100%;
-}
-
-
-
-.child-div-left{
-
-    -webkit-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-    box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-
-    padding:0px;
-    height: 100%;
-    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: width 0.5s;
-
-}
-
-
-.collapsed-div-caret{
-    position: absolute;
-    width: 120px;
-    left: 98%;
-    top: 103px;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    font-size: 1.3em;
-    cursor: pointer;
-}
-
-.child-div-caret{
-    position: absolute;
-    left: 120%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    font-size: 1.3em;
-    cursor: pointer;
-}
-
-
-.child-div-right {
-    overflow-y: scroll;
-    
-    height: calc(100% - 44px);  
-
-    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: width 0.5s;
-    
-}
-
-.shrink-width{
-    width: 0px;
-    /*visibility:hidden;*/
-}
-
-
-
-.form-body-container{
-    padding-bottom: 10px;
-    height: calc(100vh - 85px - 32px - 138px);  /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) - height_of(form-footer-bar) */
-    overflow-y:scroll; 
-}
-
-.form-footer-seperator{
-
-    border-style: solid;
-    border-width: 1px;
-    border-color: rgb(112, 112, 112);
-
-    /*
-    -webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    */
-
-    /*border-width: thin;*/
-    width:100%;
-}
-
-.form-footer-container {
-
-    /*
-    -webkit-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    -moz-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    */
-
-    height: 138px;
-}
-
-.progress{
-    margin-top: 8px;
-    margin-bottom: 0px;
+.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
+    color: #555555;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 1a8da42f0..a18af6b7e 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,111 +1,119 @@
-<div class="ui-g">
-	
-	<div class="ui-g-8" >
+<div class="ui-g dynamic-form">
+	<ng-sidebar-container class="ui-g" style="height: 100vh;">
+		<ng-sidebar mode="push" style="height: 100vh;" position="right" [(opened)]="visibleSidebar">
+			<table-of-content [model]="dataModel"></table-of-content>
+		</ng-sidebar>
 
-		<div class="col-md-12 form-body-container" id="form-container">
+		<div class="ui-g" ng-sidebar-content>
+			<button class="ui-g" pButton type="button" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
+			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+			<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
+			<div class="ui-g-12">
+				<p-steps [model]="stepperItems" [(activeIndex)]="activeStepperIndex" [readonly]="false"></p-steps>
+			</div>
+			<div class="col-md-12 form-body-container" id="form-container">
 
-			<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
+				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 
-				<div *ngFor="let section of dataModel.sections; let i = index;">
-					<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
-				</div>
-			</form>
-		</div>
-
-		<div class="col-md-12 form-footer-container">
-			<div>
-				<progress-bar *ngIf="progressbar" [formGroup]=form></progress-bar>
+					<div *ngFor="let section of dataModel.sections; let i = index;">
+						<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
+					</div>
+				</form>
 			</div>
 		</div>
-		<!-- <div class="col-md-12 form-footer-seperator" >
-		</div>
 
+	</ng-sidebar-container>
+</div>
+
+<!-- <div class="col-md-12 form-footer-container">
+				<div>
+					
+				</div>
+			</div> -->
+<!-- <div class="col-md-12 form-footer-seperator" >
+			</div>
 	
 		
-
-			<div>
-				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
-				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
-			</div>
-	 -->
-		<!--
-			<div *ngIf="payLoad" class="form-row">
-				<strong>Saved the following values</strong><br>{{payLoad}}
-			</div>
-			-->
-
-
-
-
-		<!-- 	<div class="text-center">
-				<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
-					<li [ngClass]="{disabled:pagination.currentPage === 1}">
-						<a (click)="setPage(1)" class="cursor-link" >First</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === 1}">
-						<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
-					</li>
-					<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
-						<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-						<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-						<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
-					</li>
-				</ul>
-			</div> -->
-
-	</div>
-
-
-	<!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
- -->
-	<!--
-		<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
-		-->
-	<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
-	</div>
+			
 	
-	<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
-		<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
-		<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
-	<!--
-			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
+				<div>
+					<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
+					<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
+				</div>
+		 -->
+<!--
+				<div *ngIf="payLoad" class="form-row">
+					<strong>Saved the following values</strong><br>{{payLoad}}
+				</div>
+				-->
+
+
+
+
+<!-- 	<div class="text-center">
+					<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
+						<li [ngClass]="{disabled:pagination.currentPage === 1}">
+							<a (click)="setPage(1)" class="cursor-link" >First</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === 1}">
+							<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
+						</li>
+						<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
+							<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+							<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+							<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
+						</li>
+					</ul>
+				</div> -->
+
+
+
+
+<!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
+	 -->
+<!--
+			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
 			-->
-	<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
-		</div> 
-	</div>
- -->
-	<div class="ui-g-4">
-		<table-of-content [model]="dataModel"></table-of-content>
-	</div>
+<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
+		</div>
+		
+		<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
+			<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
+			<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
+<!--
+				<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
+				-->
+<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
+			</div> 
+		</div>
+	 -->
 
-	<div class="col-md-12 form-footer-container">
-		<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
-	</div>
-
-</div>
+<!-- <div class="col-md-12 form-footer-container">
+			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+		</div> -->
 
 
 <!--Modal for Confirmation -->
 <!-- <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-					</button>
-			</div>
-			<div class="modal-body">
-				<p>Are you sure you want to save and finalize?</p>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-				<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+						</button>
+				</div>
+				<div class="modal-body">
+					<p>Are you sure you want to save and finalize?</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
+				</div>
 			</div>
 		</div>
-	</div>
-</div> -->
\ No newline at end of file
+	</div> -->
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 77460d458..d06305912 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -4,7 +4,7 @@ import { DatasetModel } from '../models/DatasetModel';
 import { Rule } from '../models/Rule';
 
 import { JsonSerializer } from '../utilities/JsonSerializer';
-import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef } from '@angular/core';
+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';
@@ -46,12 +46,12 @@ declare var PerfectScrollbar: any;
   selector: 'dynamic-form',
   templateUrl: './dynamic-form.component.html',
   styleUrls: [
-    './dynamic-form.component.css',
-    '../../assets/perfect-scrollbar/perfect-scrollbar.css'
+    './dynamic-form.component.css'
   ],
   providers: [
     FieldControlService, ServerService
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFormComponent implements OnInit {
 
@@ -62,6 +62,10 @@ export class DynamicFormComponent implements OnInit {
   datasetId: string;
   pathName: string;
 
+  stepperItems: MenuItem[];
+  activeStepperIndex: number = 1;
+  visibleSidebar: boolean = false;
+
   private progressbar:boolean = false;
 
 
@@ -77,6 +81,33 @@ export class DynamicFormComponent implements OnInit {
   ngOnInit() {
     //this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(new DatasetModel(), DatasetModel);
     //this.form = this.dataModel.buildForm();
+
+    this.stepperItems = [{
+      label: 'Personal',
+      command: (event: any) => {
+          this.activeStepperIndex = 0;
+      }
+  },
+  {
+      label: 'Seat',
+      command: (event: any) => {
+          this.activeStepperIndex = 1;
+      }
+  },
+  {
+      label: 'Payment',
+      command: (event: any) => {
+          this.activeStepperIndex = 2;
+      }
+  },
+  {
+      label: 'Confirmation',
+      command: (event: any) => {
+          this.activeStepperIndex = 3;
+      }
+  }
+];
+
     let sub = this.route.queryParams.subscribe(params => {
 
       let dmpid = params.id;
@@ -110,6 +141,10 @@ export class DynamicFormComponent implements OnInit {
   submit(){
     this.serverService.updateDataset(this.datasetId,this.form.value).subscribe()
   }
+
+  toggleSidebar() {
+    this.visibleSidebar = !this.visibleSidebar;
+  }
   /* scrollToElemID(elemID) {
     scroll("#" + elemID);
   }

From 00aeab6490f3bbb384a8730b4a38c779c866d60b Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 10:58:50 +0200
Subject: [PATCH 03/19] no message

---
 dmp-frontend/src/app/app-routing.module.ts                | 2 +-
 dmp-frontend/src/app/datasets/dataset.component.ts        | 2 +-
 dmp-frontend/src/app/form/dynamic-form.component.ts       | 8 +++-----
 .../tableOfContents/base-table-of-content.component.ts    | 2 +-
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index a632a6cb7..0d2ea6119 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -15,7 +15,7 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
 
 const appRoutes: Routes = [
   
-  { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
+  { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
   { path: 'dataset', component: DatasetsComponent },
   { path: 'login', component: MainSignInComponent},
   { path: 'projects', component: ProjectsComponent},
diff --git a/dmp-frontend/src/app/datasets/dataset.component.ts b/dmp-frontend/src/app/datasets/dataset.component.ts
index 69aa4a209..21273a751 100644
--- a/dmp-frontend/src/app/datasets/dataset.component.ts
+++ b/dmp-frontend/src/app/datasets/dataset.component.ts
@@ -240,7 +240,7 @@ export class DatasetsComponent implements OnInit {
   }
 
   describeDataset(item) {
-    this.router.navigate(['/dynamic-form'], { queryParams: {id: item.profile.id, datasetId:item.id, label: item.label}});
+    this.router.navigate(['/dynamic-form/'+item.id]);
     //this.ngZone.run(() => this.router.navigate(['dynamic-form', {id: item.profile.id, datasetId:item.id, label: item.label}]));
   }
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 77460d458..01ebc4f3e 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -67,7 +67,8 @@ export class DynamicFormComponent implements OnInit {
 
   constructor(private qcs: FieldControlService, private serverService: ServerService, private router: Router, private pdfService: PDFService,
     private _location: Location, private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService, private visibilityRulesService: VisibilityRulesService) {
-  }
+      this.datasetId = route.snapshot.params['id'];
+    }
 
   getSubForm(subformName) {
     return this.form.controls[subformName];
@@ -75,12 +76,9 @@ export class DynamicFormComponent implements OnInit {
 
 
   ngOnInit() {
-    //this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(new DatasetModel(), DatasetModel);
-    //this.form = this.dataModel.buildForm();
+
     let sub = this.route.queryParams.subscribe(params => {
 
-      let dmpid = params.id;
-      this.datasetId = params.datasetId;
       this.serverService.getDmp(this.datasetId).subscribe(
         response => {
           this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
diff --git a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
index e7802e191..a4304868a 100644
--- a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
@@ -4,6 +4,6 @@ export class BaseTableOfContent{
     constructor(public router: Router,public route:ActivatedRoute){}
     
     scrollToId(elementId) {
-      this.router.navigate([this.route.snapshot.url], { fragment: elementId });    
+      this.router.navigate([this.route.snapshot.url[0]+"/"+this.route.snapshot.url[1]], { fragment: elementId });    
     } 
 }
\ No newline at end of file

From eec410cead2c41e191457d30514ac6f0e7999b49 Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 11:04:55 +0200
Subject: [PATCH 04/19] no message

---
 dmp-frontend/src/app/app.component.html       |  98 +++++----
 dmp-frontend/src/app/app.module.ts            |   9 +-
 .../src/app/form/dynamic-form.component.css   | 127 ++----------
 .../src/app/form/dynamic-form.component.html  | 196 +++++++++---------
 4 files changed, 189 insertions(+), 241 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index f36df178a..57546e87d 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,14 +1,13 @@
-
 <div>
   <nav class="navbar navbar-default shadowed">
-    <div class="col-md-5" >
+    <div class="col-md-5">
       <!--
       <button class="btn btn-primary " [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'>
         <span style="font-size:20px;cursor:pointer" >&#9776;</span>
       </button>
     -->
       <div class="nav navbar-nav navbar-left">
-          <!--
+        <!--
           <div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
               <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Go To <span class="caret"></span> </button>
               <ul class="dropdown-menu">
@@ -17,44 +16,65 @@
               </ul>
             </div>
           -->
-          <li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
-              <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate
-              <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                  <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
-                  <li><a class="cursor" (click)="goToProjects()">Projects</a></li>
-              </ul>
+        <li class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
+          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Quick Navigate
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <a class="cursor" (click)="goToDMPs()">My DMPs</a>
             </li>
-
-
-        
-
-      </div>
-    </div>
-    
-
-
-    <div class="col-md-3" >
-        <h3 class="navbar-title">Data Management Plans Creator</h3>
-    </div>
-
-    <div class="col-md-4" >
-        <ul class="nav navbar-nav navbar-right">
-            <li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
-              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links <span class="caret"></span></a>
-              <ul class="dropdown-menu">
-                <li><a href="#">Action</a></li>
-                <li><a href="#">Another action</a></li>
-                <li><a href="#">Something else here</a></li>
-                <li role="separator" class="divider"></li>
-                <li><a href="#">Separated link</a></li>
-              </ul>
+            <li>
+              <a class="cursor" (click)="goToProjects()">Projects</a>
             </li>
-            <li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]"><a>{{tokenService.getEmail()}}</a></li>
-            <li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()"><a>Logout</a></li>
-            <li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()" ><a>Login</a></li>
           </ul>
+        </li>
+
+
+
+
       </div>
+    </div>
+
+
+
+    <div class="col-md-3">
+      <h3 class="navbar-title">Data Management Plans Creator</h3>
+    </div>
+
+    <div class="col-md-4">
+      <ul class="nav navbar-nav navbar-right">
+        <li class="dropdown" [ngClass]="{true:'invisible'}[loggedInAs == null]">
+          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Quick links
+            <span class="caret"></span>
+          </a>
+          <ul class="dropdown-menu">
+            <li>
+              <a href="#">Action</a>
+            </li>
+            <li>
+              <a href="#">Another action</a>
+            </li>
+            <li>
+              <a href="#">Something else here</a>
+            </li>
+            <li role="separator" class="divider"></li>
+            <li>
+              <a href="#">Separated link</a>
+            </li>
+          </ul>
+        </li>
+        <li [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
+          <a>{{tokenService.getEmail()}}</a>
+        </li>
+        <li class="cursor" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]" (click)="logout()">
+          <a>Logout</a>
+        </li>
+        <li class="cursor" [ngClass]="{true:'invisible'}[tokenService.isLoggedIn() == true]" (click)="login()">
+          <a>Login</a>
+        </li>
+      </ul>
+    </div>
 
   </nav>
 
@@ -82,9 +102,7 @@
 
 
   <div id="appBody" class="child_div_right">
-      
-    <router-outlet></router-outlet> 
-
+      <router-outlet></router-outlet>
   </div>
 
 
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index aaa4628f6..8008a69d5 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -66,7 +66,7 @@ import { NguiAutoCompleteModule } from '@ngui/auto-complete';
 
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
-import { BreadcrumbModule,PanelModule, MenuItem } from 'primeng/primeng';
+import { BreadcrumbModule, PanelModule } from 'primeng/primeng';
 
 import { CommonModule } from '@angular/common';
 
@@ -95,6 +95,8 @@ import { DmpDetailedComponent } from './viewers/dmp-detailed/dmp-detailed.compon
 import { ProjectDetailedComponent } from './viewers/project-detailed/project-detailed.component';
 
 import {ProgressBarModule} from 'primeng/primeng';
+import {StepsModule,MenuItem} from 'primeng/primeng';
+import {SidebarModule as NgSidebarModule} from 'primeng/primeng';
 
 @NgModule({
   declarations: [
@@ -151,8 +153,9 @@ import {ProgressBarModule} from 'primeng/primeng';
     ProgressBarModule,
     PanelModule,
     BrowserAnimationsModule,
-    SidebarModule.forRoot()
-
+    SidebarModule.forRoot(),
+    StepsModule,
+    NgSidebarModule
   ],
   providers: [{
     provide: HTTP_INTERCEPTORS,
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index 80406e064..263b37ebf 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -1,111 +1,30 @@
-.hide{
-    display:none;
+.full-width {
+    width: 100%;
 }
 
-.show {
-    display:block;
+.ui-steps .ui-steps-item {
+    width: 25%;
 }
 
-.btncustom{
-    background-color:#337ab7;
-    color:white;
-    margin-top:15px;
+.ui-steps.steps-custom {
+    margin-bottom: 30px;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-menuitem-link {
+    height: 10px;
+    padding: 0 1em;
+}
+ 
+.ui-steps.steps-custom .ui-steps-item .ui-steps-number {
+    background-color: #0081c2;
+    color: #FFFFFF;
+    display: inline-block;
+    width: 36px;
+    border-radius: 50%;
+    margin-top: -14px;
+    margin-bottom: 10px;
 }
 
-.parent-div {
-    height: calc(100vh - 60px - 32px); /*  is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) */
-    width:100%;
-}
-
-
-
-.child-div-left{
-
-    -webkit-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-    box-shadow: 0px 0px 9px 2px rgba(0,0,0,0.75);
-
-    padding:0px;
-    height: 100%;
-    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: width 0.5s;
-
-}
-
-
-.collapsed-div-caret{
-    position: absolute;
-    width: 120px;
-    left: 98%;
-    top: 103px;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    font-size: 1.3em;
-    cursor: pointer;
-}
-
-.child-div-caret{
-    position: absolute;
-    left: 120%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    font-size: 1.3em;
-    cursor: pointer;
-}
-
-
-.child-div-right {
-    overflow-y: scroll;
-    
-    height: calc(100% - 44px);  
-
-    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: width 0.5s;
-    
-}
-
-.shrink-width{
-    width: 0px;
-    /*visibility:hidden;*/
-}
-
-
-
-.form-body-container{
-    padding-bottom: 10px;
-    height: calc(100vh - 85px - 32px - 138px);  /* is height_of(window) - heigh_of(app-header-bar) - height_of(breadcrumb) - height_of(form-footer-bar) */
-    overflow-y:scroll; 
-}
-
-.form-footer-seperator{
-
-    border-style: solid;
-    border-width: 1px;
-    border-color: rgb(112, 112, 112);
-
-    /*
-    -webkit-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    -moz-box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    box-shadow: 0px 0px 11px 1px rgba(0,0,0,0.75);
-    */
-
-    /*border-width: thin;*/
-    width:100%;
-}
-
-.form-footer-container {
-
-    /*
-    -webkit-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    -moz-box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    box-shadow: 0px -3px 5px 0px rgba(128,128,128,1);
-    */
-
-    height: 138px;
-}
-
-.progress{
-    margin-top: 8px;
-    margin-bottom: 0px;
+.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
+    color: #555555;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 1a8da42f0..a18af6b7e 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,111 +1,119 @@
-<div class="ui-g">
-	
-	<div class="ui-g-8" >
+<div class="ui-g dynamic-form">
+	<ng-sidebar-container class="ui-g" style="height: 100vh;">
+		<ng-sidebar mode="push" style="height: 100vh;" position="right" [(opened)]="visibleSidebar">
+			<table-of-content [model]="dataModel"></table-of-content>
+		</ng-sidebar>
 
-		<div class="col-md-12 form-body-container" id="form-container">
+		<div class="ui-g" ng-sidebar-content>
+			<button class="ui-g" pButton type="button" (click)="toggleSidebar()" icon="fa-arrow-left">Table Of Contents</button>
+			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+			<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
+			<div class="ui-g-12">
+				<p-steps [model]="stepperItems" [(activeIndex)]="activeStepperIndex" [readonly]="false"></p-steps>
+			</div>
+			<div class="col-md-12 form-body-container" id="form-container">
 
-			<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
+				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 
-				<div *ngFor="let section of dataModel.sections; let i = index;">
-					<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
-				</div>
-			</form>
-		</div>
-
-		<div class="col-md-12 form-footer-container">
-			<div>
-				<progress-bar *ngIf="progressbar" [formGroup]=form></progress-bar>
+					<div *ngFor="let section of dataModel.sections; let i = index;">
+						<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
+					</div>
+				</form>
 			</div>
 		</div>
-		<!-- <div class="col-md-12 form-footer-seperator" >
-		</div>
 
+	</ng-sidebar-container>
+</div>
+
+<!-- <div class="col-md-12 form-footer-container">
+				<div>
+					
+				</div>
+			</div> -->
+<!-- <div class="col-md-12 form-footer-seperator" >
+			</div>
 	
 		
-
-			<div>
-				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
-				<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
-			</div>
-	 -->
-		<!--
-			<div *ngIf="payLoad" class="form-row">
-				<strong>Saved the following values</strong><br>{{payLoad}}
-			</div>
-			-->
-
-
-
-
-		<!-- 	<div class="text-center">
-				<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
-					<li [ngClass]="{disabled:pagination.currentPage === 1}">
-						<a (click)="setPage(1)" class="cursor-link" >First</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === 1}">
-						<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
-					</li>
-					<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
-						<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-						<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
-					</li>
-					<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
-						<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
-					</li>
-				</ul>
-			</div> -->
-
-	</div>
-
-
-	<!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
- -->
-	<!--
-		<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
-		-->
-	<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
-	</div>
+			
 	
-	<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
-		<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
-		<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
-	<!--
-			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
+				<div>
+					<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveForm();">Save</button>
+					<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
+				</div>
+		 -->
+<!--
+				<div *ngIf="payLoad" class="form-row">
+					<strong>Saved the following values</strong><br>{{payLoad}}
+				</div>
+				-->
+
+
+
+
+<!-- 	<div class="text-center">
+					<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
+						<li [ngClass]="{disabled:pagination.currentPage === 1}">
+							<a (click)="setPage(1)" class="cursor-link" >First</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === 1}">
+							<a (click)="setPage(pagination.currentPage - 1)" class="cursor-link">Previous</a>
+						</li>
+						<li *ngFor="let page of pagination.pages" [ngClass]="{active:pagination.currentPage === page}">
+							<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+							<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
+						</li>
+						<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
+							<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
+						</li>
+					</ul>
+				</div> -->
+
+
+
+
+<!-- 	<div *ngIf="!expandedToc" class="collapsed-div-caret" (click)="toggleTOC()">
+	 -->
+<!--
+			<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Show ToC</div></i>
 			-->
-	<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
-		</div> 
-	</div>
- -->
-	<div class="ui-g-4">
-		<table-of-content [model]="dataModel"></table-of-content>
-	</div>
+<!-- 		<i class="fa toc-toggler" aria-hidden="true" ><div>Show ToC</div></i>
+		</div>
+		
+		<div *ngIf="expandedToc" class="col-md-12" style="width:200px; text-align: center;">
+			<h4 style="display: inline-block; text-align: center; width:150px;">Table of Contents</h4>
+			<div class="child-div-caret" style="display: inline-block; width:50px;" (click)="toggleTOC()"> -->
+<!--
+				<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ><div>Shrink</div></i>
+				-->
+<!-- 	<i class="fa toc-toggler" aria-hidden="true"><div>(hide)</div></i>
+			</div> 
+		</div>
+	 -->
 
-	<div class="col-md-12 form-footer-container">
-		<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
-	</div>
-
-</div>
+<!-- <div class="col-md-12 form-footer-container">
+			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
+		</div> -->
 
 
 <!--Modal for Confirmation -->
 <!-- <div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
-	<div class="modal-dialog" role="document">
-		<div class="modal-content">
-			<div class="modal-header">
-				<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
-				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
-					<span aria-hidden="true">&times;</span>
-					</button>
-			</div>
-			<div class="modal-body">
-				<p>Are you sure you want to save and finalize?</p>
-			</div>
-			<div class="modal-footer">
-				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-				<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
+		<div class="modal-dialog" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="exampleModalLabel">Confirmation Message</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+						</button>
+				</div>
+				<div class="modal-body">
+					<p>Are you sure you want to save and finalize?</p>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+					<button type="button" class="btn btn-primary" (click)="SaveFinalizeForm();">Save and Finalize</button>
+				</div>
 			</div>
 		</div>
-	</div>
-</div> -->
\ No newline at end of file
+	</div> -->
\ No newline at end of file

From bc2ca1764c450d6f5471810aa3a7109214319479 Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 11:06:02 +0200
Subject: [PATCH 05/19] no message

---
 dmp-frontend/src/app/form/dynamic-form.component.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index d7f87dbff..fa82fee99 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -109,7 +109,6 @@ export class DynamicFormComponent implements OnInit {
   }
 ];
 
-    let sub = this.route.queryParams.subscribe(params => {
 
       this.serverService.getDmp(this.datasetId).subscribe(
         response => {
@@ -134,7 +133,6 @@ export class DynamicFormComponent implements OnInit {
       this.visibilityRulesService.formGroup = this.form;
       let rules:Rule[] = new JsonSerializer<Rule>().fromJSONArray(TestModel.rules,Rule);
       this.visibilityRulesService.buildVisibilityRules(rules)  */
-    });
   }
 
   submit(){

From 8efe88c5fa8abce6aafcbb7112f7260a9a7bfa0d Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Wed, 6 Dec 2017 12:35:50 +0200
Subject: [PATCH 06/19] more form ui changes

---
 .../src/app/entities/model/section.ts         |   4 +-
 .../dynamic-form-field.component.html         | 103 +++++++++---------
 .../dynamic-form-composite-field.css          |  18 +++
 .../dynamic-form-composite-field.html         |  20 ++--
 .../dynamic-form-composite-field.ts           |   6 +-
 .../dynamic-form-group.component.css          |  15 +++
 .../dynamic-form-group.component.html         |  21 ++--
 .../dynamic-form-group.component.ts           |   5 +-
 .../dynamic-form-section.css                  |   0
 .../dynamic-form-section.html                 |  11 +-
 .../dynamic-form-section.ts                   |  30 ++---
 11 files changed, 144 insertions(+), 89 deletions(-)
 create mode 100644 dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css
 create mode 100644 dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css

diff --git a/dmp-frontend/src/app/entities/model/section.ts b/dmp-frontend/src/app/entities/model/section.ts
index 67cae3207..9234283d8 100644
--- a/dmp-frontend/src/app/entities/model/section.ts
+++ b/dmp-frontend/src/app/entities/model/section.ts
@@ -3,9 +3,9 @@ import { Injectable } from '@angular/core';
 @Injectable()
 export class Section {
   title: string;
-  description:string;
+  description: string;
   id: string;
   defaultVisibility: boolean;
   ordinal: number;
-  page:number;
+  page: number;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
index 54b6613c8..5e6a7e85b 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
@@ -1,3 +1,52 @@
+<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
+
+
+  <label>{{path+' '+field.title}}</label>
+
+  <div *ngSwitchCase="'freetext'">
+    <label>{{field.description}}</label>
+    <div>{{field.extendedDescription}}</div>
+    <input class="form-control" formControlName="value">
+  </div>
+
+  <div *ngSwitchCase="'combobox'">
+    <!--TODO-->
+    <div *ngIf="this.field.data.type === 'autocomplete'">
+      <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
+    </div>
+    <div *ngIf="this.field.data.type === 'wordlist'">
+      <df-dropdown [form]="form" [field]="field"></df-dropdown>
+    </div>
+  </div>
+
+  <div *ngSwitchCase="'checkBox'" class="checkbox">
+    <df-checkbox [form]="form" [field]="field"></df-checkbox>
+  </div>
+
+  <div *ngSwitchCase="'textarea'">
+    <textarea class="form-control" formControlName="value"> </textarea>
+  </div>
+
+  <div *ngSwitchCase="'booleanDecision'">
+    <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
+  </div>
+
+  <div *ngSwitchCase="'radiobox'">
+    <df-radiobox [form]="form" [field]="field"></df-radiobox>
+  </div>
+
+  <div *ngSwitchCase="'label'"> </div>
+
+
+  <div [hidden]="isValid">
+    <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
+    <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
+    <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
+  </div>
+
+
+</div>
+
 <!-- <div [formGroup]="form" class="form-group">
 
 
@@ -26,21 +75,11 @@
 
 </div> -->
 
-<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
 
-
-  <label>{{path+' '+field.title}}</label>
-
-  <div *ngSwitchCase="'freetext'">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <input class="form-control" formControlName="value">
-  </div>
-
-  <!--input or change event
+<!--input or change event
       on change event the listener is triggered on blur -->
 
-  <!-- <div *ngSwitchCase="'dropdown'">
+<!-- <div *ngSwitchCase="'dropdown'">
 
         <autocomplete-remote *ngIf="field.url" formControlName="value" [url]="field.url" ></autocomplete-remote>
         
@@ -49,52 +88,16 @@
         </select>
       </div> -->
 
-  <div *ngSwitchCase="'combobox'">
-    <!--TODO-->
-    <div *ngIf="this.field.data.type === 'autocomplete'">
-      <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
-    </div>
-    <div *ngIf="this.field.data.type === 'wordlist'">
-      <df-dropdown [form]="form" [field]="field"></df-dropdown>
-    </div>
-  </div>
 
 
-  <!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
+
+<!--     <div *ngSwitchCase="'checkbox'" class="checkbox">
         <label class="checkBoxLabelCustom">
             <input *ngSwitchCase="'checkbox'" class="form-check" formControlName="value" [type]="field.type"
             (change)="toggleVisibility($event, field, true)"  [required]="field.required" [checked]="form.get(field.key).value">{{field.label}}
         </label>
       </div> -->
 
-  <div *ngSwitchCase="'checkBox'" class="checkbox">
-    <df-checkbox [form]="form" [field]="field"></df-checkbox>
-  </div>
-
-  <div *ngSwitchCase="'textarea'">
-    <textarea class="form-control" formControlName="value"> </textarea>
-  </div>
-
-  <div *ngSwitchCase="'booleanDecision'">
-    <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
-  </div>
-
-  <div *ngSwitchCase="'radiobox'">
-    <df-radiobox [form]="form" [field]="field"></df-radiobox>
-  </div>
-
-<div *ngSwitchCase="'label'"> </div>
-
-
-<div [hidden]="isValid">
-  <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
-  <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
-  <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
-</div>
-
-
-</div>
-
 <!-- <div [formGroup]="form" class="form-group" [ngSwitch]="field.controlType">
     <div *ngIf= "field.rules; else  elseBlock ">
       <div *ngIf="field.rules.length > 0; else elseBlock">
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css
new file mode 100644
index 000000000..e19052935
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.css
@@ -0,0 +1,18 @@
+.full-width {
+    width: 100%;
+}
+
+.fieldset-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.fieldset-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
index 940ed0085..3e1f24e6c 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
@@ -1,10 +1,12 @@
-<div [id]="compositeField.id" [formGroup]="form">
-    <h4>{{compositeField.title}}</h4>
-    <h4>{{compositeField.description}}</h4>
-    <h4>{{compositeField.extendedDescription}}</h4>
-    <div *ngFor="let field of compositeField.fields; let i = index;">
-        <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
+<div class="fieldset-component" [id]="compositeField.id" [formGroup]="form">
+    <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
+    <div class="content-left-margin">
+        <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
+        <h4 *ngIf="compositeField.extendedDescription">
+            <i>{{compositeField.extendedDescription}}</i>
+        </h4>
+        <div *ngFor="let field of compositeField.fields; let i = index;">
+            <df-field [field]="field" [form]="form.get('fields').get(''+i)" [path]="path" [pathName]="pathName+'.fields.'+i"></df-field>
+        </div>
     </div>
-
-</div>
-<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
index c37171d5b..89b759c2b 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
@@ -1,10 +1,14 @@
 import { CompositeField } from '../../models/CompositeField';
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
     selector: 'df-composite-field',
     templateUrl: './dynamic-form-composite-field.html',
+    styleUrls: [
+      './dynamic-form-composite-field.css'
+    ],
+    encapsulation: ViewEncapsulation.None,
   })
   export class DynamicFormCompositeFieldComponent implements OnInit{
 
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css
index a5d0bf7e9..7657b454e 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.css
@@ -4,4 +4,19 @@
 
 .show {
     display:block;
+}
+
+.group-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.group-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
index 21f0da77f..f7b39cc62 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
@@ -1,10 +1,13 @@
-<div [id]="group.id" [formGroup]="form" >
-    <h4 >{{path+' '+group.title}}</h4>
-    <h4 >{{group.description}}</h4>
-    <h4 >{{group.extendedDescription}}</h4>
-    <div *ngFor="let compositeField of group.compositeFields; let i = index;">
-        <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)"  [path]="path+'.'+(i+1)" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+<div class="group-component" [id]="group.id" [formGroup]="form">
+    <h4>{{path + ' ' + group.title}}</h4>
+    <div class="content-left-margin">
+        <h5 *ngIf="group.description">{{group.description}}</h5>
+        <h5 *ngIf="group.extendedDescription" class="group-extended-desc">
+            <i>{{group.extendedDescription}}</i>
+        </h5>
+        <div *ngFor="let compositeField of group.compositeFields; let i = index;">
+            <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path+'.'+(i+1)"
+                [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+        </div>
     </div>
-
-</div>
-<!-- class = "form-group" [class]="customStyle"  [ngStyle] = "customStyle"-->
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
index 8f21e7b14..ae0765fe4 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
@@ -1,5 +1,5 @@
 import { FieldGroup } from '../../models/FieldGroup';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, Validators, FormControl } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { Rule } from '../../entities/common/rule';
@@ -9,7 +9,8 @@ import { Rule } from '../../entities/common/rule';
 @Component({
   selector: 'df-group',
   templateUrl: './dynamic-form-group.component.html',
-  styleUrls: ['./dynamic-form-group.component.css']
+  styleUrls: ['./dynamic-form-group.component.css'],
+  encapsulation: ViewEncapsulation.None,
 })
 export class DynamicFormGroupComponent implements OnInit {
   @Input() group: FieldGroup
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
index bda872ad4..b03241ef6 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
@@ -1,8 +1,13 @@
-<p-panel [header]="path+' '+section.title" [toggleable]="true">
+<p-panel [toggleable]="true">
+    <p-header>
+        <div class="ui-helper-clearfix">
+                <h2>{{path}} {{section.title}}</h2>
+        </div>
+    </p-header>
 
     <div [id]="section.id" [formGroup]="form">
-        <h4>{{section.description}}</h4>
-        <h4>{{section.extendedDescription}}</h4>
+        <h3 *ngIf="section.description">{{section.description}}</h3>
+        <h4 *ngIf="section.extendedDescription">{{section.extendedDescription}}</h4>
         <div *ngIf="section.fieldGroups">
             <div *ngFor="let group of section.fieldGroups; let j = index;">
                 <df-group [group]="group" [form]="form.get('fieldGroups').get(''+j)" [path]="path+'.'+(j+1)" [pathName]="pathName+'.fieldGroups.'+j"></df-group>
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
index 4c22083c5..ef0009717 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
@@ -1,19 +1,23 @@
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 @Component({
-    selector: 'df-section',
-    templateUrl: './dynamic-form-section.html',
-  })
-  export class DynamicFormSectionComponent implements OnInit{
+  selector: 'df-section',
+  templateUrl: './dynamic-form-section.html',
+  styleUrls: [
+    './dynamic-form-section.css'
+  ],
+  encapsulation: ViewEncapsulation.None,
+})
+export class DynamicFormSectionComponent implements OnInit {
 
-    @Input() section: Section
-    @Input() form: FormGroup;
-    @Input() pathName:string;
-    @Input() path:string;
-    constructor(){}
+  @Input() section: Section
+  @Input() form: FormGroup;
+  @Input() pathName: string;
+  @Input() path: string;
+  constructor() { }
 
-    ngOnInit(){
+  ngOnInit() {
 
-    }
-  }
\ No newline at end of file
+  }
+}
\ No newline at end of file

From 584a2521198e9561db86ae328ced93ad163c3eb9 Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 12:41:11 +0200
Subject: [PATCH 07/19] no message

---
 dmp-frontend/src/app/form/dynamic-form.component.ts       | 5 +----
 .../tableOfContents/base-table-of-content.component.ts    | 8 ++++++--
 dmp-frontend/src/app/models/CompositeField.ts             | 7 +++++--
 3 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index fa82fee99..c5e130a81 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -68,7 +68,7 @@ export class DynamicFormComponent implements OnInit {
 
   private progressbar:boolean = false;
 
-
+  private fragment:string;
   constructor(private qcs: FieldControlService, private serverService: ServerService, private router: Router, private pdfService: PDFService,
     private _location: Location, private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService, private visibilityRulesService: VisibilityRulesService) {
       this.datasetId = route.snapshot.params['id'];
@@ -80,8 +80,6 @@ export class DynamicFormComponent implements OnInit {
 
 
   ngOnInit() {
-    //this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(new DatasetModel(), DatasetModel);
-    //this.form = this.dataModel.buildForm();
 
     this.stepperItems = [{
       label: 'Personal',
@@ -109,7 +107,6 @@ export class DynamicFormComponent implements OnInit {
   }
 ];
 
-
       this.serverService.getDmp(this.datasetId).subscribe(
         response => {
           this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
diff --git a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
index a4304868a..2bace6c66 100644
--- a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
@@ -1,9 +1,13 @@
 import { ActivatedRouteSnapshot,Router,ActivatedRoute } from '@angular/router';
 
 export class BaseTableOfContent{
-    constructor(public router: Router,public route:ActivatedRoute){}
+    constructor(public router: Router,public route:ActivatedRoute){
+        this.route.fragment.subscribe((fragment: string) => {
+            if(fragment)document.querySelector('#' + fragment).scrollIntoView();            
+        })
+    }
     
     scrollToId(elementId) {
       this.router.navigate([this.route.snapshot.url[0]+"/"+this.route.snapshot.url[1]], { fragment: elementId });    
-    } 
+    }   
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/models/CompositeField.ts b/dmp-frontend/src/app/models/CompositeField.ts
index 4de8a6122..6362821f3 100644
--- a/dmp-frontend/src/app/models/CompositeField.ts
+++ b/dmp-frontend/src/app/models/CompositeField.ts
@@ -5,16 +5,19 @@ import { BaseModel } from './BaseModel';
 import {Field} from './Field' 
 export class CompositeField extends BaseModel implements Serializable<CompositeField> {
     public fields:Array<Field> = new Array<Field>();
-    
+    public ordinal:number
 
     fromJSONObject(item:any):CompositeField{
         
         this.fields = new JsonSerializer<Field>().fromJSONArray(item.fields,Field);
+        this.ordinal = item.ordinal;
         return this;
     }
 
     buildForm():FormGroup{
-        let formGroup = this.formBuilder.group({});
+        let formGroup = this.formBuilder.group({
+            ordinal:this.ordinal
+        });
 
         let fieldsFormArray = new Array<FormGroup>();        
         this.fields.forEach(item => {

From 07a4433f344132bcb2121b9ca4bb83b8962c8554 Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Wed, 6 Dec 2017 13:39:49 +0200
Subject: [PATCH 08/19] field ui changes

---
 .../autocomplete-remote.component.html        |  3 -
 .../autocomplete-remote.component.ts          |  9 +-
 ...namic-field-boolean-decision.component.css |  3 +
 ...amic-field-boolean-decision.component.html |  7 +-
 ...ynamic-field-boolean-decision.component.ts |  8 +-
 .../dynamic-field-checkbox.css                |  8 +-
 .../dynamic-field-checkbox.html               |  8 +-
 .../dynamic-field-checkbox.ts                 | 18 ++--
 .../dynamic-field-dropdown.html               |  2 -
 .../dynamic-field-dropdown.ts                 | 12 ++-
 .../dynamic-field-radiobox.component.css      |  3 +
 .../dynamic-field-radiobox.component.html     |  7 +-
 .../dynamic-field-radiobox.component.ts       | 12 ++-
 .../dynamic-field-radiobox/field-radiobox.css |  1 -
 .../dynamic-form-field.component.css          | 18 ++++
 .../dynamic-form-field.component.html         | 87 ++++++++++---------
 .../dynamic-form-field.component.ts           | 11 ++-
 .../dynamic-form-composite-field.html         |  2 +-
 .../dynamic-form-section.css                  |  3 +
 .../dynamic-form-section.html                 |  4 +-
 20 files changed, 136 insertions(+), 90 deletions(-)
 create mode 100644 dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css
 create mode 100644 dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css
 delete mode 100644 dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css
 create mode 100644 dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css

diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html
index cc7bfc7e9..b5547d2e0 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.html
@@ -1,6 +1,3 @@
 <div [formGroup]="textFormGroup">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <label>{{field.title}}</label>
     <input auto-complete class="form-control autocomplete" formControlName="text" [source]="values">
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts
index 1e95a360e..6f57b24ef 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-autocomplete/autocomplete-remote.component.ts
@@ -1,5 +1,5 @@
 import { Field } from '../../../models/Field';
-import { Component, OnInit, Input, Output, EventEmitter, forwardRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, forwardRef, ViewEncapsulation } from '@angular/core';
 import { ControlValueAccessor, FormControl, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 
 import { ServerService } from '../../../services/server.service';
@@ -12,7 +12,8 @@ declare var $: any;
 @Component({
   selector: 'df-autocomplete',
   templateUrl: './autocomplete-remote.component.html',
-  styleUrls: ['./autocomplete-remote.component.css']
+  styleUrls: ['./autocomplete-remote.component.css'],
+  encapsulation: ViewEncapsulation.None
 })
 
 
@@ -23,11 +24,11 @@ export class AutocompleteRemoteComponent implements OnInit/* , ControlValueAcces
   @Input() field: Field;
   @Input() form: FormGroup;
 
-  private textFormGroup = new FormGroup({text:new FormControl("")});
+  private textFormGroup = new FormGroup({ text: new FormControl("") });
   private loading: boolean;
   values: any[] = new Array();
   typeaheadMS: number = 1400;
-  
+
   constructor(private serverService: ServerService) {
 
   }
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css
new file mode 100644
index 000000000..f7be5b613
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.css
@@ -0,0 +1,3 @@
+.radio-label {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
index 011d7b413..21392c66a 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
@@ -1,6 +1,5 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <input type="radio" formControlName="value" value="true">Yes<br>
-    <input type="radio" formControlName="value" value="false">No
+    <input type="radio" id="{{field.id + 'true'}}" formControlName="value" value="true"><label for="{{field.id + 'true'}}" class="radio-label">Yes</label>
+    <br>
+    <input type="radio" id="{{field.id + 'false'}}" formControlName="value" value="false"><label for="{{field.id + 'false'}}" class="radio-label">No</label>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts
index 3366c2912..1535432af 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.ts
@@ -1,11 +1,15 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-booleanDecision',
-    templateUrl: './dynamic-field-boolean-decision.component.html'
+    templateUrl: './dynamic-field-boolean-decision.component.html',
+    styleUrls: [
+        './dynamic-field-boolean-decision.component.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
 export class DynamicFieldBooleanDecisionComponent implements OnInit{
     @Input() field: Field;
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css
index bf67b66d0..f947dfb22 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.css
@@ -1 +1,7 @@
-@CHARSET "UTF-8";
\ No newline at end of file
+.checkbox-label {
+    margin-left: 10px;
+}
+
+.checkbox-icon {
+    margin-left: 0px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
index df499a335..6fb8d5d5e 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
@@ -1,6 +1,4 @@
-
-<div [formGroup]="form" class="form-group" >
-        <label>{{field.description}}</label>
-        <div>{{field.extendedDescription}}</div>
-    <input formControlName="value" type = "checkbox">
+<div [formGroup]="form" class="form-group">
+    <input id="{{field.id + 'checkboc'}}" class="checkbox-icon" formControlName="value" type="checkbox">
+    <label for="{{field.id + 'checkboc'}}" class="checkbox-label">Test</label>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts
index 0d5060d29..33f1bf6eb 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.ts
@@ -1,14 +1,18 @@
 import { Field } from '../../../models/Field';
 import { FormGroup } from '@angular/forms';
-import { Component, Input } from '@angular/core';
-import {FieldBase} from '../field-base';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
+import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-checkbox',
-    templateUrl: './dynamic-field-checkbox.html'
+    templateUrl: './dynamic-field-checkbox.html',
+    styleUrls: [
+        './dynamic-field-checkbox.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldCheckBoxComponent{
-    @Input() field:Field;
-    @Input() form:FormGroup;
-    
+export class DynamicFieldCheckBoxComponent {
+    @Input() field: Field;
+    @Input() form: FormGroup;
+
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
index 45208ee16..a44884360 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
@@ -1,6 +1,4 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
   <select class="form-control" formControlName="value">
       <option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
     </select>
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts
index 902c56fb4..d18c78f35 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.ts
@@ -1,17 +1,21 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-dropdown',
-    templateUrl: './dynamic-field-dropdown.html'
+    templateUrl: './dynamic-field-dropdown.html',
+    styleUrls: [
+        './dynamic-field-dropdown.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldDropdownComponent implements OnInit{
+export class DynamicFieldDropdownComponent implements OnInit {
     @Input() field: Field;
     @Input() form: FormGroup;
 
-    ngOnInit(){
+    ngOnInit() {
 
     }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css
new file mode 100644
index 000000000..f7be5b613
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.css
@@ -0,0 +1,3 @@
+.radio-label {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
index d89f0b684..328e47ce4 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
@@ -1,7 +1,6 @@
 <div [formGroup]="form">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-  <div *ngFor="let option of this.field.data.options">
-    <input type="radio" formControlName="value" [value]="option.value">{{option.label}}<br>
+  <div *ngFor="let option of this.field.data.options let index = index">
+    <input type="radio" formControlName="value" [value]="option.value" id="{{field.id + index}}"/><label for="{{field.id + index}}" class="radio-label">{{option.label}}</label>
+    <br>
   </div>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts
index fd3a4e1fc..c107b156d 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.ts
@@ -1,17 +1,21 @@
 import { FormGroup } from '@angular/forms';
 import { Field } from '../../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FieldBase } from '../field-base';
 
 @Component({
     selector: 'df-radiobox',
-    templateUrl: './dynamic-field-radiobox.component.html'
+    templateUrl: './dynamic-field-radiobox.component.html',
+    styleUrls: [
+        './dynamic-field-radiobox.component.css'
+    ],
+    encapsulation: ViewEncapsulation.None
 })
-export class DynamicFieldRadioBoxComponent implements OnInit{
+export class DynamicFieldRadioBoxComponent implements OnInit {
     @Input() field: Field;
     @Input() form: FormGroup;
 
-    ngOnInit(){
+    ngOnInit() {
 
     }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css
deleted file mode 100644
index bf67b66d0..000000000
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/field-radiobox.css
+++ /dev/null
@@ -1 +0,0 @@
-@CHARSET "UTF-8";
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css
new file mode 100644
index 000000000..ad1e6a6d6
--- /dev/null
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.css
@@ -0,0 +1,18 @@
+.full-width {
+    width: 100%;
+}
+
+.field-component {
+    border:1px solid grey;
+    border-radius: 2px;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.field-extended-desc {
+    color: lightslategray;
+}
+
+.content-left-margin {
+    margin-left: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
index 5e6a7e85b..b0f325df7 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.html
@@ -1,50 +1,53 @@
-<div [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form" [ngSwitch]="field.viewStyle.renderStyle">
+<div class="field-component" [id]="field.id" *ngIf="visibilityRulesService.isElementVisible(pathName,field.id)" [formGroup]="form"
+  [ngSwitch]="field.viewStyle.renderStyle">
 
+  <h5 *ngIf="field.title">{{path + ' ' + field.title}}</h5>
+  <h5 *ngIf="field.description">{{field.description}}</h5>
+  <h5 *ngIf="field.extendedDescription" class="field-extended-desc">
+    <i>{{field.extendedDescription}}</i>
+  </h5>
 
-  <label>{{path+' '+field.title}}</label>
-
-  <div *ngSwitchCase="'freetext'">
-    <label>{{field.description}}</label>
-    <div>{{field.extendedDescription}}</div>
-    <input class="form-control" formControlName="value">
-  </div>
-
-  <div *ngSwitchCase="'combobox'">
-    <!--TODO-->
-    <div *ngIf="this.field.data.type === 'autocomplete'">
-      <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
+  <div class="content-left-margin">
+    <div *ngSwitchCase="'freetext'">
+      <input class="form-control" formControlName="value">
     </div>
-    <div *ngIf="this.field.data.type === 'wordlist'">
-      <df-dropdown [form]="form" [field]="field"></df-dropdown>
+
+    <div *ngSwitchCase="'combobox'">
+      <!--TODO-->
+      <div *ngIf="this.field.data.type === 'autocomplete'">
+        <df-autocomplete [form]="form" [field]="field"></df-autocomplete>
+      </div>
+      <div *ngIf="this.field.data.type === 'wordlist'">
+        <df-dropdown [form]="form" [field]="field"></df-dropdown>
+      </div>
     </div>
+
+    <div *ngSwitchCase="'checkBox'" class="checkbox">
+      <df-checkbox [form]="form" [field]="field"></df-checkbox>
+    </div>
+
+    <div *ngSwitchCase="'textarea'">
+      <textarea class="form-control" formControlName="value"> </textarea>
+    </div>
+
+    <div *ngSwitchCase="'booleanDecision'">
+      <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
+    </div>
+
+    <div *ngSwitchCase="'radiobox'">
+      <df-radiobox [form]="form" [field]="field"></df-radiobox>
+    </div>
+
+    <div *ngSwitchCase="'label'"> </div>
+
+
+    <div [hidden]="isValid">
+      <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
+      <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
+    </div>
+
   </div>
-
-  <div *ngSwitchCase="'checkBox'" class="checkbox">
-    <df-checkbox [form]="form" [field]="field"></df-checkbox>
-  </div>
-
-  <div *ngSwitchCase="'textarea'">
-    <textarea class="form-control" formControlName="value"> </textarea>
-  </div>
-
-  <div *ngSwitchCase="'booleanDecision'">
-    <df-booleanDecision [form]="form" [field]="field"></df-booleanDecision>
-  </div>
-
-  <div *ngSwitchCase="'radiobox'">
-    <df-radiobox [form]="form" [field]="field"></df-radiobox>
-  </div>
-
-  <div *ngSwitchCase="'label'"> </div>
-
-
-  <div [hidden]="isValid">
-    <div class="invalid-feedbackCustom" *ngIf="isValidRequired">The field "{{field.label}}" is required</div>
-    <div class="invalid-feedbackCustom" *ngIf="isValidPattern">The field {{field.label}} must match a regular expression {{field.regex}}</div>
-    <div class="invalid-feedbackCustom" *ngIf="isValidCustom">The field {{field.label}} custom Validation</div>
-  </div>
-
-
 </div>
 
 <!-- <div [formGroup]="form" class="form-group">
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
index 049b0fbde..b26bec162 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-form-field.component.ts
@@ -1,7 +1,7 @@
 import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { VisibilityRuleSource } from '../../visibility-rules/models/VisibilityRuleSource';
 import { Field } from '../../models/Field';
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
 import { ActivatedRoute } from '@angular/router';
 
@@ -12,7 +12,11 @@ import { RuleStyle } from '../../entities/common/rulestyle';
 @Component({
     selector: 'df-field',
     templateUrl: './dynamic-form-field.component.html',
-    styles: ['.checkBoxLabelCustom {font-weight: 700;}']
+    // styles: ['.checkBoxLabelCustom {font-weight: 700;}']
+    styleUrls: [
+        './dynamic-form-field.component.css'
+      ],
+      encapsulation: ViewEncapsulation.None
 })
 
 export class DynamicFormFieldComponent {
@@ -24,9 +28,9 @@ export class DynamicFormFieldComponent {
     constructor(private route: ActivatedRoute,private visibilityRulesService:VisibilityRulesService) { }
 
     ngOnChanges(changeRecord) {
+    
     }
 
-
     get isValid() {
         return this.form.get("value").valid;
     }
@@ -39,5 +43,4 @@ export class DynamicFormFieldComponent {
     get isValidCustom() {
         return this.form.get("value").hasError("forbiddenName");
     }
-
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
index 3e1f24e6c..aa4d741ba 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
@@ -2,7 +2,7 @@
     <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
     <div class="content-left-margin">
         <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
-        <h4 *ngIf="compositeField.extendedDescription">
+        <h4 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
             <i>{{compositeField.extendedDescription}}</i>
         </h4>
         <div *ngFor="let field of compositeField.fields; let i = index;">
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
index e69de29bb..2f6ca0157 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.css
@@ -0,0 +1,3 @@
+.section-component {
+    margin-bottom: 10px;
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
index b03241ef6..c6bb68701 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
@@ -1,7 +1,7 @@
-<p-panel [toggleable]="true">
+<p-panel class="section-component" [toggleable]="true">
     <p-header>
         <div class="ui-helper-clearfix">
-                <h2>{{path}} {{section.title}}</h2>
+            <h2>{{path}} {{section.title}}</h2>
         </div>
     </p-header>
 

From 902116e0392043106ba8defed5d73dffb16666cc Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 14:16:31 +0200
Subject: [PATCH 09/19] checkbox with label

---
 .../commons/datafield/CheckBoxData.java       |  23 +++-
 .../src/main/java/rest/entities/Admin.java    |   4 +-
 .../java/utilities/builders/ModelBuilder.java |   3 +-
 .../dynamic-field-checkbox.html               |   2 +-
 .../src/app/form/dynamic-form.component.ts    | 113 +++++++++---------
 .../table-of-content-section.component.html   |   8 +-
 6 files changed, 82 insertions(+), 71 deletions(-)

diff --git a/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java b/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
index aea083a39..d6719874d 100644
--- a/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
+++ b/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
@@ -1,27 +1,42 @@
 package models.components.commons.datafield;
 
+import java.util.Map;
+
 import org.w3c.dom.Document;
 import org.w3c.dom.Element;
 
 import utilities.XmlSerializable;
 
 public class CheckBoxData extends FieldData<CheckBoxData>{
+	private String label;
+
+	
+	public String getLabel() {
+		return label;
+	}
+
+	public void setLabel(String label) {
+		this.label = label;
+	}
 
 	@Override
 	public Element toXml(Document doc) {
-		// TODO Auto-generated method stub
-		return doc.createElement("data");
+		Element root = doc.createElement("data");
+		root.setAttribute("label", this.label);
+		return root;
 	}
 
 	@Override
 	public CheckBoxData fromXml(Element item) {
-		// TODO Auto-generated method stub
+		this.label = item.getAttribute("label");
 		return this;
 	}
 
 	@Override
 	public CheckBoxData fromData(Object data) {
-		// TODO Auto-generated method stub
+		if(data!=null){
+			this.label= (String)((Map<String,Object>)data).get("label");
+		}
 		return this;
 	}
 
diff --git a/dmp-backend/src/main/java/rest/entities/Admin.java b/dmp-backend/src/main/java/rest/entities/Admin.java
index dc1349e16..38ea376ba 100644
--- a/dmp-backend/src/main/java/rest/entities/Admin.java
+++ b/dmp-backend/src/main/java/rest/entities/Admin.java
@@ -76,13 +76,13 @@ public class Admin {
 			datasetProfileViewstyleDao.update(oldviewStyle);
 
 			
-			if(!datasetprofile.getDataset().isEmpty())throw new Exception ("Cannot edit a Profile that has Datasets assigned");
+			//if(!datasetprofile.getDataset().isEmpty())throw new Exception ("Cannot edit a Profile that has Datasets assigned");
 			
 			datasetprofile.setViewstyle(oldviewStyle);
 			datasetprofile.setDefinition(modelDefinition.getDefinition());
 			datasetProfileDao.update(datasetprofile);
 			
-			return ResponseEntity.status(HttpStatus.OK).body(datasetprofile);
+			return ResponseEntity.status(HttpStatus.OK).body(null);
 		}catch(Exception ex){
 			ex.printStackTrace();
 			return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("{\"reason\":\""+ex.getMessage()+"\"}");
diff --git a/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java b/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java
index 09524d9ab..d7b094568 100644
--- a/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java
+++ b/dmp-backend/src/main/java/utilities/builders/ModelBuilder.java
@@ -5,6 +5,7 @@ import java.util.List;
 
 import entities.xmlmodels.modeldefinition.DatabaseModelDefinition;
 import entities.xmlmodels.viewstyledefinition.DatabaseViewStyleDefinition;
+import models.components.commons.datafield.CheckBoxData;
 import models.components.commons.datafield.ComboBoxData;
 import models.components.commons.datafield.FieldData;
 import models.components.commons.datafield.RadioBoxData;
@@ -66,7 +67,7 @@ public class ModelBuilder {
 		if(type.equals("combobox")) return (U) new ComboBoxData().fromData(data);
 		if(type.equals("booleanDecision"))return null;
 		if(type.equals("radiobox"))return (U) new RadioBoxData().fromData(data);
-		if(type.equals("checkBox"))return null;
+		if(type.equals("checkBox"))return (U) new CheckBoxData().fromData(data);
 		if(type.equals("freetext"))return null;
 		return null;
 	}
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
index 6fb8d5d5e..8410ea7d8 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
@@ -1,4 +1,4 @@
 <div [formGroup]="form" class="form-group">
     <input id="{{field.id + 'checkboc'}}" class="checkbox-icon" formControlName="value" type="checkbox">
-    <label for="{{field.id + 'checkboc'}}" class="checkbox-label">Test</label>
+    <label for="{{field.id + 'checkboc'}}" class="checkbox-label">{{field.data.label}}</label>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index c5e130a81..73954be82 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -56,23 +56,23 @@ declare var PerfectScrollbar: any;
 export class DynamicFormComponent implements OnInit {
 
   @Input() dataModel: DatasetModel = new DatasetModel();
-  @Input() path:string;
+  @Input() path: string;
   form: FormGroup;
   id: string;
   datasetId: string;
   pathName: string;
-
-  stepperItems: MenuItem[];
+  pages: Set<number>;
+  stepperItems: MenuItem[] = new Array<MenuItem>();
   activeStepperIndex: number = 1;
   visibleSidebar: boolean = false;
 
-  private progressbar:boolean = false;
+  private progressbar: boolean = false;
 
-  private fragment:string;
+  private fragment: string;
   constructor(private qcs: FieldControlService, private serverService: ServerService, private router: Router, private pdfService: PDFService,
     private _location: Location, private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService, private visibilityRulesService: VisibilityRulesService) {
-      this.datasetId = route.snapshot.params['id'];
-    }
+    this.datasetId = route.snapshot.params['id'];
+  }
 
   getSubForm(subformName) {
     return this.form.controls[subformName];
@@ -81,64 +81,59 @@ export class DynamicFormComponent implements OnInit {
 
   ngOnInit() {
 
-    this.stepperItems = [{
-      label: 'Personal',
-      command: (event: any) => {
-          this.activeStepperIndex = 0;
+    this.serverService.getDmp(this.datasetId).subscribe(
+      response => {
+        this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
+        this.pages = this.getPages(this.dataModel);
+        this.createPagination();
+        this.form = this.dataModel.buildForm();
+        this.visibilityRulesService.formGroup = this.form;
+        let rules: Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules, Rule);
+        this.visibilityRulesService.buildVisibilityRules(rules)
+        this.progressbar = true;
+      },
+      error => {
+        console.log("Could not load dmp");
       }
-  },
-  {
-      label: 'Seat',
-      command: (event: any) => {
-          this.activeStepperIndex = 1;
-      }
-  },
-  {
-      label: 'Payment',
-      command: (event: any) => {
-          this.activeStepperIndex = 2;
-      }
-  },
-  {
-      label: 'Confirmation',
-      command: (event: any) => {
-          this.activeStepperIndex = 3;
-      }
-  }
-];
+    )
 
-      this.serverService.getDmp(this.datasetId).subscribe(
-        response => {
-          this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(response, DatasetModel);
-          this.form = this.dataModel.buildForm();
-          this.visibilityRulesService.formGroup = this.form;
-          let rules:Rule[] = new JsonSerializer<Rule>().fromJSONArray(response.rules,Rule);
-          this.visibilityRulesService.buildVisibilityRules(rules)
-          this.progressbar = true;
-        },
-        error => {
-          console.log("Could not load dmp");
-        }
-      )
-
-      /* 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)  */
+    /* 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(){
-    this.serverService.updateDataset(this.datasetId,this.form.value).subscribe()
+  submit() {
+    this.serverService.updateDataset(this.datasetId, this.form.value).subscribe()
   }
 
   toggleSidebar() {
     this.visibleSidebar = !this.visibleSidebar;
   }
+
+  getPages(model: DatasetModel): Set<number> {
+    let pageSet = new Set<number>();
+    model.sections.forEach(section => {
+      pageSet.add(section.page);
+    })
+    return pageSet;
+  }
+
+  createPagination() {
+    this.pages.forEach(item => {
+      this.stepperItems.push({
+        label: '',
+        command: (event: any) => {
+          this.activeStepperIndex = item;
+        }
+      })
+    })
+  }
   /* scrollToElemID(elemID) {
     scroll("#" + elemID);
   }
@@ -212,9 +207,9 @@ export class DynamicFormComponent implements OnInit {
   }
  */
 
-  createPDF(elementID : string, pdffilename : string){
-        this.pdfService.toPDF(elementID, pdffilename);
-      }
+  createPDF(elementID: string, pdffilename: string) {
+    this.pdfService.toPDF(elementID, pdffilename);
+  }
 
 
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
index f073dff1e..41da8ffec 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
@@ -8,7 +8,7 @@
 </ul>
 <!-- All contents in the first page -->
 <ul>
-        <li *ngFor="let sectionModel of model.sections let i = index">
-            <table-of-contents-section [model]="sectionModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-section>
-        </li>
-    </ul>
\ No newline at end of file
+    <li *ngFor="let sectionModel of model.sections let i = index">
+        <table-of-contents-section [model]="sectionModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-section>
+    </li>
+</ul>
\ No newline at end of file

From e83c54f37f3fd05c95ec56944b86dba1d06b076d Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 14:42:28 +0200
Subject: [PATCH 10/19] no message

---
 .../table-of-content-field.component.ts                  | 3 ++-
 .../table-of-content-fieldset.component.html             | 9 ++++++---
 .../table-of-content-fieldset.component.ts               | 3 ++-
 .../table-of-content-group.component.ts                  | 3 ++-
 .../table-of-content-section.component.ts                | 3 ++-
 .../src/app/visibility-rules/visibility-rules.service.ts | 8 ++++----
 6 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
index c98811255..34e141ebf 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { CompositeField } from '../../../models/CompositeField';
 import { Field } from '../../../models/Field';
@@ -16,7 +17,7 @@ export class TableOfContentsFieldComponent extends BaseTableOfContent{
     @Input() index:number;
     @Input() public path:string;
 
-    constructor(public router: Router, public route: ActivatedRoute) {
+    constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
         super(router, route)
       }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
index 902d178af..f685911fc 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
@@ -1,7 +1,10 @@
 <!-- All contents in the first page -->
 
 <ul>
-    <li *ngFor="let field of model.fields let i = index">
-        <table-of-contents-field [model]="field" [index]="i" [path]="path"> </table-of-contents-field>
-    </li>
+    <div *ngFor="let field of model.fields let i = index">
+        <li *ngIf="visibilityRulesService.isElementVisible(null,field.id)">
+            <table-of-contents-field [model]="field" [index]="i" [path]="path">
+            </table-of-contents-field>
+        </li>
+    </div>
 </ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
index f412d411c..c52977995 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { CompositeField } from '../../../models/CompositeField';
 import { FieldGroup } from '../../../models/FieldGroup';
@@ -19,7 +20,7 @@ export class TableOfContentsFieldSetComponent extends BaseTableOfContent {
   @Input() index: number;
   @Input() public path: string;
 
-  constructor(public router: Router, public route: ActivatedRoute) {
+  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
     super(router, route)
   }
 }
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
index f44e073fb..4431738a1 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { FieldGroup } from '../../../models/FieldGroup';
 import { Section } from '../../../models/Section';
@@ -21,7 +22,7 @@ export class TableOfContentsGroupComponent extends BaseTableOfContent  {
     setPage:EventEmitter<number> = new EventEmitter<number>();
 
  */
-  constructor(public router: Router, public route: ActivatedRoute) {
+  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
     super(router, route)
   }
 
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
index c4ee2f115..dda835ba0 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { Section } from '../../../models/Section';
 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@@ -17,7 +18,7 @@ export class TableOfContentsSectionComponent extends BaseTableOfContent implemen
   @Input() index: number;
   @Input() public path: string;
 
-  constructor(public router: Router,public route:ActivatedRoute){
+  constructor(public router: Router,public route:ActivatedRoute,private visibilityRulesService: VisibilityRulesService){
     super(router,route)
   }
   ngOnInit() {
diff --git a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
index ac22b1e47..048e29020 100644
--- a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
+++ b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
@@ -9,9 +9,9 @@ export class VisibilityRulesService {
     public formGroup: FormGroup;
     public visibilityRuleContext: VisibilityRulesContext;
     public fieldsPathMemory: any = {};
-    
+
     public isElementVisible(pathKey: string, id: string) {
-        if (!this.fieldsPathMemory[id]) this.fieldsPathMemory[id] = pathKey;
+        if (!this.fieldsPathMemory[id] && pathKey) this.fieldsPathMemory[id] = pathKey;
         let visibilityRule = this.visibilityRuleContext.getRulesFromKey(id);
         if (!visibilityRule) return true;
         return this.checkElementVisibility(visibilityRule);
@@ -21,8 +21,8 @@ export class VisibilityRulesService {
         let sourceVisibilityRules = visibilityRule.sourceVisibilityRules;
         for (let i = 0; i < sourceVisibilityRules.length; i++) {
             let sourceVisibilityRule = sourceVisibilityRules[i];
-            if (!this.formGroup.get( this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value'))return false; //TODO
-            if(sourceVisibilityRule.sourceControlValue != ''+this.formGroup.get( this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value').value) return false;
+            if (!this.formGroup.get(this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value')) return false; //TODO
+            if (sourceVisibilityRule.sourceControlValue != '' + this.formGroup.get(this.fieldsPathMemory[sourceVisibilityRule.sourceControlId] + '.value').value) return false;
         }
         return true;
     }

From a7b2188a908bc3d0158b7538b1947dbfc20bf68c Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Wed, 6 Dec 2017 14:44:40 +0200
Subject: [PATCH 11/19] no message

---
 dmp-frontend/src/app/app.module.ts                            | 4 ++--
 .../dynamic-field-checkbox/dynamic-field-checkbox.html        | 3 +--
 .../dynamic-field-dropdown/dynamic-field-dropdown.html        | 4 ++--
 dmp-frontend/src/app/services/rest-base.ts                    | 2 +-
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 8008a69d5..0ff937e2c 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -96,7 +96,7 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
 
 import {ProgressBarModule} from 'primeng/primeng';
 import {StepsModule,MenuItem} from 'primeng/primeng';
-import {SidebarModule as NgSidebarModule} from 'primeng/primeng';
+import {CheckboxModule} from 'primeng/primeng';
 
 @NgModule({
   declarations: [
@@ -155,7 +155,7 @@ import {SidebarModule as NgSidebarModule} from 'primeng/primeng';
     BrowserAnimationsModule,
     SidebarModule.forRoot(),
     StepsModule,
-    NgSidebarModule
+    CheckboxModule
   ],
   providers: [{
     provide: HTTP_INTERCEPTORS,
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
index 6fb8d5d5e..870c04e1c 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
@@ -1,4 +1,3 @@
 <div [formGroup]="form" class="form-group">
-    <input id="{{field.id + 'checkboc'}}" class="checkbox-icon" formControlName="value" type="checkbox">
-    <label for="{{field.id + 'checkboc'}}" class="checkbox-label">Test</label>
+    <p-checkbox [formControl]="form" label="Test"></p-checkbox>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
index a44884360..47df16539 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-dropdown/dynamic-field-dropdown.html
@@ -1,5 +1,5 @@
 <div [formGroup]="form">
-  <select class="form-control" formControlName="value">
-      <option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
+    <select class="form-control" formControlName="value">
+        <option *ngFor="let opt of field.data.options" [value]="opt.value">{{opt.label}}</option>
     </select>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/services/rest-base.ts b/dmp-frontend/src/app/services/rest-base.ts
index b0210c108..868eeab67 100644
--- a/dmp-frontend/src/app/services/rest-base.ts
+++ b/dmp-frontend/src/app/services/rest-base.ts
@@ -18,7 +18,7 @@ export class RestBase {
     
 
     protocol: string = "http";
-    hostname: string ="localhost"
+    hostname: string ="192.168.32.103"
     port: number = 8080;
     webappname: string = "dmp-backend";
     

From 3ced6b5236eb99baebbce213606ddd00946bb85a Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 14:48:29 +0200
Subject: [PATCH 12/19] no message

---
 dmp-frontend/src/app/form/dynamic-form.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 73954be82..818b918e0 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -129,7 +129,7 @@ export class DynamicFormComponent implements OnInit {
       this.stepperItems.push({
         label: '',
         command: (event: any) => {
-          this.activeStepperIndex = item;
+          this.activeStepperIndex = item - 1;
         }
       })
     })

From 5fc7a67eb75575013764252ddb3d5bf48efa160c Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Wed, 6 Dec 2017 14:53:48 +0200
Subject: [PATCH 13/19] no message

---
 .../dynamic-field-checkbox/dynamic-field-checkbox.html          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
index 870c04e1c..8eab571a5 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
@@ -1,3 +1,3 @@
 <div [formGroup]="form" class="form-group">
-    <p-checkbox [formControl]="form" label="Test"></p-checkbox>
+    <p-checkbox [formControl]="form.get('value')" label="{{field.data.label}}"></p-checkbox>
 </div>
\ No newline at end of file

From cc822f0797f39b46dd921cd3915da6f4be107816 Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 15:00:04 +0200
Subject: [PATCH 14/19] no message

---
 .../dynamic-field-checkbox/dynamic-field-checkbox.html          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
index 8eab571a5..51c61f4f0 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-checkbox/dynamic-field-checkbox.html
@@ -1,3 +1,3 @@
 <div [formGroup]="form" class="form-group">
-    <p-checkbox [formControl]="form.get('value')" label="{{field.data.label}}"></p-checkbox>
+    <p-checkbox [formControl]="form.get('value')" label="{{field.data.label}}" binary="true"></p-checkbox>
 </div>
\ No newline at end of file

From fe6ab0d125421e351f1a036609a8918ce1131980 Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Wed, 6 Dec 2017 15:06:07 +0200
Subject: [PATCH 15/19] no message

---
 dmp-frontend/src/app/app.module.ts                            | 4 +++-
 .../dynamic-field-boolean-decision.component.html             | 4 ++--
 .../dynamic-field-radiobox.component.html                     | 3 +--
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 0ff937e2c..3f30b1be2 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -97,6 +97,7 @@ import { ProjectDetailedComponent } from './viewers/project-detailed/project-det
 import {ProgressBarModule} from 'primeng/primeng';
 import {StepsModule,MenuItem} from 'primeng/primeng';
 import {CheckboxModule} from 'primeng/primeng';
+import {RadioButtonModule} from 'primeng/primeng';
 
 @NgModule({
   declarations: [
@@ -155,7 +156,8 @@ import {CheckboxModule} from 'primeng/primeng';
     BrowserAnimationsModule,
     SidebarModule.forRoot(),
     StepsModule,
-    CheckboxModule
+    CheckboxModule,
+    RadioButtonModule
   ],
   providers: [{
     provide: HTTP_INTERCEPTORS,
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
index 21392c66a..014de001c 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="form">
-    <input type="radio" id="{{field.id + 'true'}}" formControlName="value" value="true"><label for="{{field.id + 'true'}}" class="radio-label">Yes</label>
+    <p-radioButton name="{{field.id}}" value="true" label="Yes" formControlName="value"></p-radioButton>
     <br>
-    <input type="radio" id="{{field.id + 'false'}}" formControlName="value" value="false"><label for="{{field.id + 'false'}}" class="radio-label">No</label>
+    <p-radioButton name="{{field.id}}" value="false" label="No" formControlName="value"></p-radioButton>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
index 328e47ce4..459050352 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-radiobox/dynamic-field-radiobox.component.html
@@ -1,6 +1,5 @@
 <div [formGroup]="form">
   <div *ngFor="let option of this.field.data.options let index = index">
-    <input type="radio" formControlName="value" [value]="option.value" id="{{field.id + index}}"/><label for="{{field.id + index}}" class="radio-label">{{option.label}}</label>
-    <br>
+    <p-radioButton name="{{field.id}}" [value]="option.value" label="{{option.label}}" formControlName="value"></p-radioButton>
   </div>
 </div>
\ No newline at end of file

From 5cb2d081c57c3639d19966759d64c026eecd987f Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Wed, 6 Dec 2017 17:22:45 +0200
Subject: [PATCH 16/19] Switched to "first" as default fetching strategy

---
 .../java/proxy/fetching/RemoteFetcher.java    | 43 +++++++++----------
 .../src/main/resources/ExternalUrls.xml       | 12 +++---
 2 files changed, 27 insertions(+), 28 deletions(-)

diff --git a/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java b/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java
index 9b73ea5b5..741718649 100644
--- a/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java
+++ b/dmp-backend/src/main/java/proxy/fetching/RemoteFetcher.java
@@ -26,7 +26,9 @@ import com.jayway.jsonpath.DocumentContext;
 import com.jayway.jsonpath.JsonPath;
 
 import proxy.config.ConfigLoader;
+import proxy.config.FetchStrategy;
 import proxy.config.UrlConfig;
+import proxy.config.entities.ServiceUrls;
 import proxy.config.exceptions.HugeResultSet;
 import proxy.config.exceptions.NoURLFound;
 
@@ -39,59 +41,52 @@ public class RemoteFetcher {
 //	private static int MAX_RESULTS = 30;
 	
 	
-//	public static void main(String [] args) throws Exception {
-//		
-//		String path = "https://eestore.paas2.uninett.no/api/datarepo";
-//		String query = "her";
-//		
-//		RemoteFetcher remoteFetcher = new RemoteFetcher();
-//		List<Map<String, String>> repos = remoteFetcher.getAllResultsFromUrl(path, query);
-//		
-////		List<Map<String, String>> repos = remoteFetcher.getRepositories(query);
-//		System.out.println(repos.size());
-//		
-//	}
-	
 	@Cacheable("repositories")
 	public List<Map<String, String>> getRepositories(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getRepositories().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getRepositories().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("projects")
 	public List<Map<String, String>> getProjects(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getProjects().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getProjects().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("organisations")
 	public List<Map<String, String>> getOrganisations(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getOrganisations().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getOrganisations().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("registries")
 	public List<Map<String, String>> getRegistries(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getRegistries().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getRegistries().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("services")
 	public List<Map<String, String>> getServices(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getServices().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getServices().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	@Cacheable("researchers")
 	public List<Map<String, String>> getResearchers(String query) throws NoURLFound, HugeResultSet {
 		List<UrlConfig> urlConfigs = configLoader.getExternalUrls().getResearchers().getUrls();
-		return getAll(urlConfigs, query);
+		FetchStrategy fetchStrategy = configLoader.getExternalUrls().getResearchers().getFetchMode();
+		return getAll(urlConfigs, fetchStrategy, query);
 	}
 	
 	
 	
 	
-	private List<Map<String, String>> getAll(List<UrlConfig> urlConfigs, String query) throws NoURLFound, HugeResultSet{
+	private List<Map<String, String>> getAll(List<UrlConfig> urlConfigs, FetchStrategy fetchStrategy, String query) throws NoURLFound, HugeResultSet{
 		
 		if(urlConfigs == null || urlConfigs.isEmpty())
 			throw new NoURLFound("No Repository urls found in configuration");
@@ -101,7 +96,7 @@ public class RemoteFetcher {
 		//for the time being, we only get the first one. in the near future we can add more than one (parallel stream)
 		//urlConfigs.parallelStream().map(mapper).reduce() etc etc
 		
-		return getAllResultsFromUrl(urlConfigs.get(0).getUrl(), urlConfigs.get(0).getDataPath(), urlConfigs.get(0).getPaginationPath(), query);
+		return getAllResultsFromUrl(urlConfigs.get(0).getUrl(), fetchStrategy, urlConfigs.get(0).getDataPath(), urlConfigs.get(0).getPaginationPath(), query);
 		
 	}
 	
@@ -109,7 +104,7 @@ public class RemoteFetcher {
 	
 	
 	
-	private List<Map<String, String>> getAllResultsFromUrl(String path, final String jsonDataPath, final String jsonPaginationPath, String query) throws HugeResultSet {
+	private List<Map<String, String>> getAllResultsFromUrl(String path, FetchStrategy fetchStrategy, final String jsonDataPath, final String jsonPaginationPath, String query) throws HugeResultSet {
 		Set<Integer> pages = new HashSet<Integer>();
 		
 		final String searchQuery = (query!=null) && !query.isEmpty() ? "&search="+query : "";
@@ -117,6 +112,10 @@ public class RemoteFetcher {
 		//first call
 		Results results = getResultsFromUrl(path + "?page=1" + searchQuery,  jsonDataPath, jsonPaginationPath);
 		
+		//if fetch strategy is to get only first page, then return that
+		if(fetchStrategy == FetchStrategy.FIRST)
+			return results.getResults();
+		
 		if(results.getPagination()!= null && results.getPagination().get("pages") != null) //if has more pages, add them to the pages set
 			for(int i = 2; i <= results.getPagination().get("pages") ; i++)
 				pages.add(i);
diff --git a/dmp-backend/src/main/resources/ExternalUrls.xml b/dmp-backend/src/main/resources/ExternalUrls.xml
index ddf4f0f6d..fbd4c3608 100644
--- a/dmp-backend/src/main/resources/ExternalUrls.xml
+++ b/dmp-backend/src/main/resources/ExternalUrls.xml
@@ -15,7 +15,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	</registries>
 
 	
@@ -31,7 +31,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	
 	</projects>
 	
@@ -47,7 +47,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 		
 	</repositories>
 	
@@ -64,7 +64,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	</services>
 
 
@@ -80,7 +80,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	</researchers>
 
 
@@ -97,7 +97,7 @@
 			
 		</urls>
 
-		<fetchMode>ALL</fetchMode>
+		<fetchMode>FIRST</fetchMode>  <!-- EITHER 'FIRST' OR 'ALL' -->
 	
 	</organisations>
 

From a9c05943e0b5fde6cbfaad8eea8da3a0069c68b9 Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Wed, 6 Dec 2017 18:45:54 +0200
Subject: [PATCH 17/19] no message

---
 .../commons/datafield/CheckBoxData.java       |  2 +-
 dmp-frontend/src/app/app.module.ts            |  4 ++--
 .../dynamic-form-composite-field.html         |  2 +-
 .../dynamic-form-composite-field.ts           |  3 ++-
 .../dynamic-form-group.component.html         |  2 +-
 .../dynamic-form-group.component.ts           |  3 ++-
 .../dynamic-form-section.html                 |  2 +-
 .../dynamic-form-section.ts                   |  3 ++-
 .../src/app/form/dynamic-form.component.html  |  4 ++--
 .../src/app/form/dynamic-form.component.ts    | 11 ++++++----
 .../app/form/pagination/pagination-service.ts | 18 ++++++++++++++++
 .../base-table-of-content.component.ts        | 21 ++++++++++++-------
 .../table-of-content-field.component.html     |  2 +-
 .../table-of-content-field.component.ts       |  7 ++++---
 .../table-of-content-fieldset.component.html  |  2 +-
 .../table-of-content-fieldset.component.ts    |  7 ++++---
 .../table-of-content-group.component.html     |  4 ++--
 .../table-of-content-group.component.ts       |  7 ++++---
 .../table-of-content-section.component.html   |  6 +++---
 .../table-of-content-section.component.ts     |  7 ++++---
 .../table-of-contents.component.html          |  2 +-
 .../visibility-rules.service.ts               |  7 ++++++-
 22 files changed, 82 insertions(+), 44 deletions(-)
 create mode 100644 dmp-frontend/src/app/form/pagination/pagination-service.ts

diff --git a/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java b/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
index d6719874d..8f37abb4d 100644
--- a/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
+++ b/dmp-backend/src/main/java/models/components/commons/datafield/CheckBoxData.java
@@ -28,7 +28,7 @@ public class CheckBoxData extends FieldData<CheckBoxData>{
 
 	@Override
 	public CheckBoxData fromXml(Element item) {
-		this.label = item.getAttribute("label");
+		this.label = item!=null?item.getAttribute("label"):""; //TODO
 		return this;
 	}
 
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 3f30b1be2..8baafd160 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -1,3 +1,4 @@
+import { PaginationService } from './form/pagination/pagination-service';
 import {
     TableOfContentsFieldComponent,
 } from './form/tableOfContents/table-of-content-field/table-of-content-field.component';
@@ -51,7 +52,6 @@ import { HomepageComponent } from './homepage/homepage.component';
 import { ConfirmationComponent } from './widgets/confirmation/confirmation.component';
 
 
-import { PaginationService } from './services/pagination.service';
 import { EestoreService } from './services/eestore.service';
 import { GlobalInterceptor } from './services/interceptor';
 import { PDFService } from './services/transformers/pdf.service';
@@ -164,7 +164,7 @@ import {RadioButtonModule} from 'primeng/primeng';
     useClass: GlobalInterceptor,
     multi: true,
   },
-    ServerService, VisibilityRulesService, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService, NativeLoginService, PDFService
+    ServerService, VisibilityRulesService,PaginationService, GlobalVariables, AuthGuard, TokenService, LocalStorageService, RestBase, EestoreService, NativeLoginService, PDFService
   ],
   bootstrap: [AppComponent]
 })
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
index aa4d741ba..b13e9ed85 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.html
@@ -1,4 +1,4 @@
-<div class="fieldset-component" [id]="compositeField.id" [formGroup]="form">
+<div *ngIf="visibilityRulesService.isElementVisible(pathName,compositeField.id)" class="fieldset-component" [id]="compositeField.id" [formGroup]="form">
     <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
     <div class="content-left-margin">
         <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
diff --git a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
index 89b759c2b..7e4c3885a 100644
--- a/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-composite-field/dynamic-form-composite-field.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { CompositeField } from '../../models/CompositeField';
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
@@ -17,7 +18,7 @@ import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
     @Input() pathName:string;
     @Input() path:string;
     
-    constructor(){}
+    constructor(private visibilityRulesService:VisibilityRulesService){}
 
     ngOnInit(){
 
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
index f7b39cc62..c8f4256f9 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.html
@@ -1,4 +1,4 @@
-<div class="group-component" [id]="group.id" [formGroup]="form">
+<div *ngIf="visibilityRulesService.isElementVisible(pathName,group.id)"  class="group-component" [id]="group.id" [formGroup]="form">
     <h4>{{path + ' ' + group.title}}</h4>
     <div class="content-left-margin">
         <h5 *ngIf="group.description">{{group.description}}</h5>
diff --git a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
index ae0765fe4..7c59a7047 100644
--- a/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-group/dynamic-form-group.component.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { FieldGroup } from '../../models/FieldGroup';
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormGroup, Validators, FormControl } from '@angular/forms';
@@ -20,7 +21,7 @@ export class DynamicFormGroupComponent implements OnInit {
   @Input() path:string;
   
 
-  constructor() {
+  constructor(private visibilityRulesService:VisibilityRulesService) {
   }
 
   ngOnInit() {
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
index c6bb68701..cc859b146 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.html
@@ -1,4 +1,4 @@
-<p-panel class="section-component" [toggleable]="true">
+<p-panel *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="section-component" [toggleable]="true">
     <p-header>
         <div class="ui-helper-clearfix">
             <h2>{{path}} {{section.title}}</h2>
diff --git a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
index ef0009717..1e96b0067 100644
--- a/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
+++ b/dmp-frontend/src/app/form/dynamic-form-section/dynamic-form-section.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 import { FormGroup } from '@angular/forms';
 import { Section } from '../../entities/model/section';
 import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core';
@@ -15,7 +16,7 @@ export class DynamicFormSectionComponent implements OnInit {
   @Input() form: FormGroup;
   @Input() pathName: string;
   @Input() path: string;
-  constructor() { }
+  constructor(private visibilityRulesService:VisibilityRulesService) { }
 
   ngOnInit() {
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index a18af6b7e..1cde376ed 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -9,14 +9,14 @@
 			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
 			<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
 			<div class="ui-g-12">
-				<p-steps [model]="stepperItems" [(activeIndex)]="activeStepperIndex" [readonly]="false"></p-steps>
+				<p-steps [model]="stepperItems" [activeIndex]="this.paginationService.getCurrentIndex()"  (activeIndex)="this.paginationService.setCurrentIndex($event)"[readonly]="false"></p-steps>
 			</div>
 			<div class="col-md-12 form-body-container" id="form-container">
 
 				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 
 					<div *ngFor="let section of dataModel.sections; let i = index;">
-						<df-section [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
+						<df-section *ngIf='this.paginationService.isElementVisible(section.page)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
 					</div>
 				</form>
 			</div>
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 818b918e0..71bb27980 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -1,3 +1,4 @@
+import { PaginationService } from './pagination/pagination-service';
 import { VisibilityRulesService } from '../visibility-rules/visibility-rules.service';
 import { TestModel } from '../testModel/testmodel';
 import { DatasetModel } from '../models/DatasetModel';
@@ -13,7 +14,6 @@ import 'rxjs/add/operator/switchMap';
 //import { FieldBase } from '../../app/form/fields/field-base';
 import { FieldControlService } from '../../app/services/field-control.service';
 import { ServerService } from '../../app/services/server.service';
-import { PaginationService } from '../../app/services/pagination.service';
 import { TokenService, TokenProvider } from '../services/login/token.service';
 import { ModalComponent } from '../modal/modal.component';
 
@@ -69,8 +69,11 @@ export class DynamicFormComponent implements OnInit {
   private progressbar: boolean = false;
 
   private fragment: string;
-  constructor(private qcs: FieldControlService, private serverService: ServerService, private router: Router, private pdfService: PDFService,
-    private _location: Location, private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService, private visibilityRulesService: VisibilityRulesService) {
+  constructor(private serverService: ServerService, private router: Router, private pdfService: PDFService,
+    private _location: Location, private route: ActivatedRoute, private tokenService: TokenService
+    , private visibilityRulesService: VisibilityRulesService
+    , private paginationService:PaginationService
+  ) {
     this.datasetId = route.snapshot.params['id'];
   }
 
@@ -129,7 +132,7 @@ export class DynamicFormComponent implements OnInit {
       this.stepperItems.push({
         label: '',
         command: (event: any) => {
-          this.activeStepperIndex = item - 1;
+          this.paginationService.setCurrentIndex(event.index)          
         }
       })
     })
diff --git a/dmp-frontend/src/app/form/pagination/pagination-service.ts b/dmp-frontend/src/app/form/pagination/pagination-service.ts
new file mode 100644
index 000000000..181928ffe
--- /dev/null
+++ b/dmp-frontend/src/app/form/pagination/pagination-service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core'
+@Injectable()
+export class PaginationService {
+
+    private currentPageIndex: number;
+
+    public setCurrentIndex(currentPageIndex: number): void {
+        this.currentPageIndex = currentPageIndex;
+    }
+
+    public getCurrentIndex():number{
+        return this.currentPageIndex;
+    }
+
+    public isElementVisible(elementPage: number):boolean {
+        return elementPage - 1  == this.currentPageIndex ; //TODO
+    }
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
index 2bace6c66..2022cacb7 100644
--- a/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/base-table-of-content.component.ts
@@ -1,13 +1,18 @@
-import { ActivatedRouteSnapshot,Router,ActivatedRoute } from '@angular/router';
+import { PaginationService } from '../pagination/pagination-service';
+import { ActivatedRouteSnapshot, Router, ActivatedRoute } from '@angular/router';
 
-export class BaseTableOfContent{
-    constructor(public router: Router,public route:ActivatedRoute){
+export class BaseTableOfContent {
+    constructor(public router: Router, public route: ActivatedRoute, public paginationService: PaginationService) {
         this.route.fragment.subscribe((fragment: string) => {
-            if(fragment)document.querySelector('#' + fragment).scrollIntoView();            
+            setTimeout(function() {
+                if (fragment) document.querySelector('#' + fragment).scrollIntoView();    
+            }, );
+            
         })
     }
-    
-    scrollToId(elementId) {
-      this.router.navigate([this.route.snapshot.url[0]+"/"+this.route.snapshot.url[1]], { fragment: elementId });    
-    }   
+
+    scrollToId(elementId, page: number) {
+        this.paginationService.setCurrentIndex(page-1);
+        this.router.navigate([this.route.snapshot.url[0] + "/" + this.route.snapshot.url[1]], { fragment: elementId });
+    }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
index f443528b0..9f1f17ae9 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.html
@@ -1,2 +1,2 @@
-<a (click)="scrollToId(model.id)">{{path+' '+model.title}}</a>
+<a (click)="scrollToId(model.id,page)">{{path+' '+model.title}}</a>
     
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
index 34e141ebf..958216811 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-field/table-of-content-field.component.ts
@@ -1,3 +1,4 @@
+import { PaginationService } from '../../pagination/pagination-service';
 import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { CompositeField } from '../../../models/CompositeField';
@@ -16,8 +17,8 @@ export class TableOfContentsFieldComponent extends BaseTableOfContent{
     @Input() model:Field;
     @Input() index:number;
     @Input() public path:string;
-
-    constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
-        super(router, route)
+    @Input() public page: number;
+    constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
+        super(router, route,paginationService)
       }
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
index f685911fc..0d638e32c 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.html
@@ -3,7 +3,7 @@
 <ul>
     <div *ngFor="let field of model.fields let i = index">
         <li *ngIf="visibilityRulesService.isElementVisible(null,field.id)">
-            <table-of-contents-field [model]="field" [index]="i" [path]="path">
+            <table-of-contents-field [page]='page' [model]="field" [index]="i" [path]="path">
             </table-of-contents-field>
         </li>
     </div>
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
index c52977995..6d346a97f 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-fieldset/table-of-content-fieldset.component.ts
@@ -1,3 +1,4 @@
+import { PaginationService } from '../../pagination/pagination-service';
 import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { CompositeField } from '../../../models/CompositeField';
@@ -19,8 +20,8 @@ export class TableOfContentsFieldSetComponent extends BaseTableOfContent {
   @Input() model: CompositeField;
   @Input() index: number;
   @Input() public path: string;
-
-  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
-    super(router, route)
+  @Input() public page: number;
+  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
+    super(router, route,paginationService)
   }
 }
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
index 9f9df4a09..08081cf53 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.html
@@ -1,5 +1,5 @@
-<a (click)="scrollToId(model.id)">{{path+' '+model.title}}</a>
+<a (click)="scrollToId(model.id,page)">{{path+' '+model.title}}</a>
     
     <div *ngFor="let fieldsetModel of model.compositeFields let i = index">
-        <table-of-contents-fieldset [model]="fieldsetModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-fieldset>
+        <table-of-contents-fieldset [page]='page' [model]="fieldsetModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-fieldset>
     </div>
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
index 4431738a1..1090e5af3 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-group/table-of-content-group.component.ts
@@ -1,3 +1,4 @@
+import { PaginationService } from '../../pagination/pagination-service';
 import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { FieldGroup } from '../../../models/FieldGroup';
@@ -17,13 +18,13 @@ export class TableOfContentsGroupComponent extends BaseTableOfContent  {
   @Input() model: FieldGroup;
   @Input() index: number;
   @Input() public path: string;
-
+  @Input() public page: number;
   /*   @Output()
     setPage:EventEmitter<number> = new EventEmitter<number>();
 
  */
-  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService) {
-    super(router, route)
+  constructor(public router: Router, public route: ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService) {
+    super(router, route,paginationService)
   }
 
 
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
index 41da8ffec..71747739b 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.html
@@ -1,14 +1,14 @@
 <!-- All contents in the first page -->
-<a (click)="scrollToId(model.id)">{{path+' '+model.title}}</a>
+<a (click)="scrollToId(model.id,page)">{{path+' '+model.title}}</a>
 
 <ul>
     <li *ngFor="let groupModel of model.fieldGroups let i = index">
-        <table-of-contents-group [model]="groupModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-group>
+        <table-of-contents-group [page]='page' [model]="groupModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-group>
     </li>
 </ul>
 <!-- All contents in the first page -->
 <ul>
     <li *ngFor="let sectionModel of model.sections let i = index">
-        <table-of-contents-section [model]="sectionModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-section>
+        <table-of-contents-section [page]='page' [model]="sectionModel" [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-section>
     </li>
 </ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
index dda835ba0..b3463ac7c 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-content-section/table-of-content-section.component.ts
@@ -1,3 +1,4 @@
+import { PaginationService } from '../../pagination/pagination-service';
 import { VisibilityRulesService } from '../../../visibility-rules/visibility-rules.service';
 import { BaseTableOfContent } from '../base-table-of-content.component';
 import { Section } from '../../../models/Section';
@@ -17,9 +18,9 @@ export class TableOfContentsSectionComponent extends BaseTableOfContent implemen
   @Input() model: Section;
   @Input() index: number;
   @Input() public path: string;
-
-  constructor(public router: Router,public route:ActivatedRoute,private visibilityRulesService: VisibilityRulesService){
-    super(router,route)
+  @Input() public page: number;
+  constructor(public router: Router,public route:ActivatedRoute,private visibilityRulesService: VisibilityRulesService,public paginationService:PaginationService){
+    super(router,route,paginationService)
   }
   ngOnInit() {
 
diff --git a/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
index 468ce8f7a..78fa65451 100644
--- a/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/table-of-contents.component.html
@@ -2,6 +2,6 @@
 <ul>
     <li *ngFor="let section of model.sections let i = index">
         <!-- && field.label for sections without field label as data summery -->
-        <table-of-contents-section [model]="section" [index]="i+1" [path]="i+1"> </table-of-contents-section>
+        <table-of-contents-section [page]='section.page' [model]="section" [index]="i+1" [path]="i+1"> </table-of-contents-section>
     </li>
 </ul>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
index 048e29020..42318060d 100644
--- a/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
+++ b/dmp-frontend/src/app/visibility-rules/visibility-rules.service.ts
@@ -14,7 +14,12 @@ export class VisibilityRulesService {
         if (!this.fieldsPathMemory[id] && pathKey) this.fieldsPathMemory[id] = pathKey;
         let visibilityRule = this.visibilityRuleContext.getRulesFromKey(id);
         if (!visibilityRule) return true;
-        return this.checkElementVisibility(visibilityRule);
+        if (this.checkElementVisibility(visibilityRule)) {
+            return true
+        } else {
+            if (pathKey) this.formGroup.get(pathKey + '.value').patchValue(null)
+            return false;
+        }
     }
 
     public checkElementVisibility(visibilityRule: VisibilityRule): boolean {

From 73c38f3ff3d29cb4056b6eeaa3b929a5fa828a9c Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Thu, 7 Dec 2017 11:26:06 +0200
Subject: [PATCH 18/19] addition of progress bar

---
 .../dynamic-field-boolean-decision.component.html |  4 ++--
 .../src/app/form/dynamic-form.component.html      |  9 +++++++--
 .../form/pprogress-bar/progress-bar.component.ts  | 15 +++++++++------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
index 014de001c..dd0eaa6ad 100644
--- a/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
+++ b/dmp-frontend/src/app/form/dynamic-fields/dynamic-field-boolean-decision/dynamic-field-boolean-decision.component.html
@@ -1,5 +1,5 @@
 <div [formGroup]="form">
-    <p-radioButton name="{{field.id}}" value="true" label="Yes" formControlName="value"></p-radioButton>
+    <p-radioButton name="{{field.id}}" [value]="true" label="Yes" formControlName="value"></p-radioButton>
     <br>
-    <p-radioButton name="{{field.id}}" value="false" label="No" formControlName="value"></p-radioButton>
+    <p-radioButton name="{{field.id}}" [value]="false" label="No" formControlName="value"></p-radioButton>
 </div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 1cde376ed..2195b0308 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -9,14 +9,19 @@
 			<button type="button" class="btn btn-primary" (click)="submit();">Save and Finalize</button>
 			<progress-bar class="ui-g" *ngIf="progressbar" [formGroup]=form></progress-bar>
 			<div class="ui-g-12">
-				<p-steps [model]="stepperItems" [activeIndex]="this.paginationService.getCurrentIndex()"  (activeIndex)="this.paginationService.setCurrentIndex($event)"[readonly]="false"></p-steps>
+				<p-steps [model]="stepperItems" [activeIndex]="this.paginationService.getCurrentIndex()" (activeIndex)="this.paginationService.setCurrentIndex($event)"
+				 [readonly]="false"></p-steps>
+			</div>
+			<div class="ui-g-12">
+				<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>
 			</div>
 			<div class="col-md-12 form-body-container" id="form-container">
 
 				<form *ngIf="form" novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
 
 					<div *ngFor="let section of dataModel.sections; let i = index;">
-						<df-section *ngIf='this.paginationService.isElementVisible(section.page)' [section]="section" [form]="form.get('sections').get(''+i)" [path]="i+1" [pathName]="'sections.'+i"></df-section>
+						<df-section *ngIf='this.paginationService.isElementVisible(section.page)' [section]="section" [form]="form.get('sections').get(''+i)"
+						 [path]="i+1" [pathName]="'sections.'+i"></df-section>
 					</div>
 				</form>
 			</div>
diff --git a/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
index d39adbb48..fd1c7ec66 100644
--- a/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
+++ b/dmp-frontend/src/app/form/pprogress-bar/progress-bar.component.ts
@@ -1,3 +1,4 @@
+import { VisibilityRulesService } from '../../visibility-rules/visibility-rules.service';
 
 import { Component, Input, OnInit } from '@angular/core';
 import { FormGroup, FormControl, FormArray } from '@angular/forms'
@@ -8,27 +9,29 @@ import { FormGroup, FormControl, FormArray } from '@angular/forms'
 export class ProgressBarComponent implements OnInit {
     @Input() formGroup: FormGroup
 
+    constructor(private visibilityRulesService: VisibilityRulesService) { }
+
     private value: number;
     ngOnInit() {
         this.formGroup
             .valueChanges
             .subscribe(control => {
-                this.value = (this.getDirtyValues(this.formGroup) / this.getFormControlDepthLength(this.formGroup)) * 100
+                this.value = (this.countFormControlsWithValue(this.formGroup) / this.getFormControlDepthLength(this.formGroup)) * 100
             })
     }
 
-    getDirtyValues(form: FormGroup): number {
+    countFormControlsWithValue(form: FormGroup): number {
         let value = 0;
         Object.keys(form.controls).forEach(key => {
             let control = form.controls[key]
-            if (control instanceof FormGroup) value += this.getDirtyValues(control);
+            if (control instanceof FormGroup) value += this.countFormControlsWithValue(control);
             else if (control instanceof FormArray) {
                 let formArray = (<FormArray>control);
                 for (let i = 0; i < formArray.length; i++) {
-                    value += this.getDirtyValues(<FormGroup>formArray.get("" + i))
+                    value += this.countFormControlsWithValue(<FormGroup>formArray.get("" + i))
                 }
             }
-            else if (control.valid) value++;
+            else if (key === "value" && control.value != null) value++;
         });
         return value;
     }
@@ -44,7 +47,7 @@ export class ProgressBarComponent implements OnInit {
                     value += this.getFormControlDepthLength(<FormGroup>formArray.get("" + i))
                 }
             }
-            else if (control instanceof FormControl) value++;
+            else if (key === "value" && this.visibilityRulesService.isElementVisible(null, form.controls["id"].value)) value++;
         });
         return value;
     }

From b8a391752296d443eb3f63193d91b4c5d9a6b406 Mon Sep 17 00:00:00 2001
From: annabakouli <annabakouli@gmail.com>
Date: Thu, 7 Dec 2017 15:36:12 +0200
Subject: [PATCH 19/19] no message

---
 dmp-frontend/src/app/app.component.ts         | 37 ------------------
 .../googgle-sign-in.component.html            |  2 +-
 .../googgle-sign-in.component.ts              | 38 +++++++++++++++++--
 .../main-sign-in/main-sign-in.component.ts    |  1 +
 4 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index a18742d99..fb0b02d02 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -35,45 +35,8 @@ export class AppComponent implements OnInit {
   }
 
   ngOnInit() {
-    //this.initiateExternalProviders();
   }
 
-  initiateExternalProviders(){
-
-
-    //initiate google
-    var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
-    var scope = [
-      'profile',
-      'email'
-    ].join(' ');
-    
-    if(gapi.auth2 == undefined){
-    
-        gapi.load('auth2', () => {
-          
-          gapi.auth2.init({
-            client_id: clientId,
-            cookiepolicy: 'single_host_origin',
-            scope: scope
-          });
-          
-          
-    
-          //RE-Render the button (due to known issues of google-button with angular's lifecycle)
-          gapi.signin2.render('googleBtn');
-    
-          //var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
-          //this.attachSignin(buttonElement);
-          
-        });
-    
-    }
-
-  }
-
-
-
   slideNav(){
 
     $("#appSidebar").toggleClass("expanded");
diff --git a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html
index e84f17f92..b7e7cd8f9 100644
--- a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html
+++ b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.html
@@ -2,7 +2,7 @@
 <table class="table">
     <tbody>
         <tr align="center">
-            <div class="g-signin2" id="googleBtn"></div>
+            <div  class="g-signin2" id="googleBtn"></div>
         </tr>
     </tbody>
 </table>
diff --git a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
index d0f2dca38..7b0f37c58 100644
--- a/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
+++ b/dmp-frontend/src/app/login/googgle-sign-in/googgle-sign-in.component.ts
@@ -14,7 +14,7 @@ declare function simple_notifier(type: string, title: string, message:string): a
   templateUrl: './googgle-sign-in.component.html',
   styleUrls: ['./googgle-sign-in.component.css']
 })
-export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable {
+export class GooggleSignInComponent implements OnInit, Injectable {
 
   
 
@@ -22,17 +22,47 @@ export class GooggleSignInComponent implements OnInit, AfterViewInit, Injectable
     
   }
 
+  
   ngOnInit() {
+    this.initiateExternalProviders();
+  }
+
+  initiateExternalProviders(){
+
+    var clientId = '1010962018903-glegmqudqtl1lub0150vacopbu06lgsg.apps.googleusercontent.com';
+    var scope = [
+      'profile',
+      'email'
+    ].join(' ');
+    
+    if(gapi.auth2 == undefined){
+    
+        gapi.load('auth2', () => {
+          
+          gapi.auth2.init({
+            client_id: clientId,
+            cookiepolicy: 'single_host_origin',
+            scope: scope
+          }).then(()=>this.renderButton());
+          
+        });
+    
+    }else{
+      gapi.auth2.init({
+        client_id: clientId,
+        cookiepolicy: 'single_host_origin',
+        scope: scope
+      }).then(()=>this.renderButton());
+    }
 
   }
 
-  ngAfterViewInit() {
 
+  renderButton() {
 
-    //RE-Render the button (due to known issues of google-button with angular's lifecycle)
     gapi.signin2.render('googleBtn');
     var buttonElement = this.element.nativeElement.querySelector('#googleBtn'); 
-    this.attachSignin(buttonElement);
+    if(buttonElement)this.attachSignin(buttonElement);
     
   }
   
diff --git a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts b/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
index 31290388e..e1b5702cd 100644
--- a/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
+++ b/dmp-frontend/src/app/login/main-sign-in/main-sign-in.component.ts
@@ -4,6 +4,7 @@ import { NativeLoginService } from '../../services/login/native-login.service';
 import { TokenService, TokenProvider } from '../../services/login/token.service';
 import {Router} from '@angular/router';
 import {MenuItem} from 'primeng/primeng';
+declare const gapi: any;
 
 import '../../../assets/custom.js';
 declare function simple_notifier(type: string, title: string, message:string): any;