From ccbd1644b4447618c6322c1e1aceba572c5d6748 Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Mon, 11 Dec 2017 10:10:54 +0200
Subject: [PATCH 1/3] no message

---
 dmp-frontend/src/app/app.component.css        | 162 ++----------------
 dmp-frontend/src/app/app.component.html       |  24 +--
 dmp-frontend/src/app/app.component.ts         |   5 +-
 .../dynamic-form-field.component.css          |   4 +-
 .../dynamic-form-field.component.html         |  12 +-
 .../dynamic-form-composite-field.css          |   6 +-
 .../dynamic-form-composite-field.html         |  24 ++-
 .../dynamic-form-group.component.css          |   6 +-
 .../dynamic-form-group.component.html         |   8 +-
 .../dynamic-form-section.html                 |  44 +++--
 .../src/app/form/dynamic-form.component.css   |  39 ++---
 .../src/app/form/dynamic-form.component.html  | 103 +----------
 .../table-of-content-section.component.html   |  16 +-
 dmp-frontend/src/index.html                   |   2 +-
 14 files changed, 103 insertions(+), 352 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.css b/dmp-frontend/src/app/app.component.css
index 7c3bd07bf..31b04e3cf 100644
--- a/dmp-frontend/src/app/app.component.css
+++ b/dmp-frontend/src/app/app.component.css
@@ -1,160 +1,22 @@
-.hide{
-    display:none;
-}
-
-.show {
-    display:block;
-}
-
-.ng-valid[required], .ng-valid.required  {
-    border-left: 5px solid #42A948; /* green */
-  }
-  
-  .ng-invalid:not(form)  {
-    border-left: 5px solid #a94442; /* red */
-  }
-  
-
-.navbar-center {
-    position: absolute;
+.full-width {
     width: 100%;
-    left: 0;
-    text-align: center;
-    vertical-align: middle;
-    margin:0 auto;
 }
 
-.invisible {
-    display:none;
-}
-
-.visible {
-    display:block;
-}
-
-.cursor{
-    cursor: pointer;
-}
-
-.navbar {
-    -webkit-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
-    -moz-box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
-    box-shadow: 0px 0px 12px 2px rgba(0,0,0,0.73);
-    margin-bottom: 5px;
-}
-
-
-.navbar-title {
-    /*
-    width: 100%;
-    position: absolute;
-    left: 0;
-    */
-    margin:0 auto;
-    text-align: center;
-}
-.navbar-toggle {
-    z-index:3;
-}
-
-.arrange-horizontally > * {
-    display: inline-block;
-    /*text-align: center;*/
-    white-space: nowrap
-}
-.arrange-vertically > * {
-    display: block;
-}
-
-
-/* FOR THE SIDEBAR */
-
-.parent_div{
-    height:100%;
-    width:100%;
-    float:left;
-}
-
-.child_div_left{
-    height:100%;
-    float:left;
-}
-
-.child_div_right{
-    height:100%;
-    float:right;
-}
-
-
-.sidenav {
-
-    display:none;
-
-    border-radius: 15px;
-
-    z-index: 1;
-    width: 0px;
-    /*
-    top: 0px;
+.full-height {
     height: 100%;
-    left: 0px;
-    */
-    overflow-x: hidden;
-    background-color: #f8f8f8;
-    transition: 0.5s;
-    padding-top: 60px;
 }
 
-.sidenav.expanded{
-    width: 15%;
-   
+html,
+body {
+    height: 100%;
+    width: 100%;
+}
 
+app-root {
     display: block;
-
-    border-style: solid;
-    border-width: thin;
-
-    border-radius: 15px;
-    padding-top: 60px;
+    height: 100%;
 }
 
-#appBody {
-    width : 100%;
-    transition: 0.5s;
-}
-#appBody.expanded{
-    width: 85%;
-}
-
-
-
-.sidenav a {
-    padding: 8px 8px 8px 32px;
-    text-decoration: none;
-    font-size: 25px;
-    color: #818181;
-    display: block;
-    transition: 0.5s;
-}
-
-.sidenav a:hover {
-    color: #000;
-}
-
-.sidenav .closebtn {
-    position: absolute;
-    top: 0;
-    right: 25px;
-    font-size: 36px;
-    margin-left: 50px;
-}
-
-#main {
-    transition: margin-left .5s;
-    /*padding: 16px;*/
-}
-
-@media screen and (max-height: 450px) {
-  .sidenav {padding-top: 15px;}
-  .sidenav a {font-size: 18px;}
-}
+html {
+    overflow-y: hidden
+}
\ No newline at end of file
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index 57546e87d..9af984168 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -85,26 +85,4 @@
   <breadcrumb></breadcrumb>
 </div>
 
-
-<div class="parent_div">
-
-  <div id="appSidebar" class="sidenav child_div_left">
-    <a class="cursor">My Workspace</a>
-    <a class="cursor">Orphan Datasets</a>
-    <a class="cursor">...</a>
-    <a class="cursor">Basically</a>
-    <a class="cursor">George</a>
-    <a class="cursor">tell us</a>
-    <a class="cursor">what to</a>
-    <a class="cursor">put here</a>
-  </div>
-
-
-
-  <div id="appBody" class="child_div_right">
-      <router-outlet></router-outlet>
-  </div>
-
-
-
-</div>
\ No newline at end of file
+<router-outlet></router-outlet>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index fb0b02d02..1b14ed409 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit} from '@angular/core';
+import { Component, OnInit, ViewEncapsulation} from '@angular/core';
 import { ServerService } from './services/server.service';
 import { JsonObjest } from '../app/entities/JsonObject.class';
 import { TokenService, TokenProvider } from './services/login/token.service';
@@ -16,7 +16,8 @@ declare var $ :any;
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
-  providers:  []
+  providers:  [],
+  encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit {
   
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
index ad1e6a6d6..4e3148b1f 100644
--- 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
@@ -3,10 +3,10 @@
 }
 
 .field-component {
-    border:1px solid grey;
+    /* border:1px solid grey;
     border-radius: 2px;
     padding: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 10px; */
 }
 
 .field-extended-desc {
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 b0f325df7..79540284d 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
@@ -2,12 +2,14 @@
   [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>
 
-  <div class="content-left-margin">
+
+  <div [class.content-left-margin]="field.title">
+      <h5 *ngIf="field.description">{{field.description}}</h5>
+      <h5 *ngIf="field.extendedDescription" class="field-extended-desc">
+        <i>{{field.extendedDescription}}</i>
+      </h5>
+      
     <div *ngSwitchCase="'freetext'">
       <input class="form-control" formControlName="value">
     </div>
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
index e19052935..a8e80f398 100644
--- 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
@@ -3,10 +3,10 @@
 }
 
 .fieldset-component {
-    border:1px solid grey;
+    /* border:1px solid grey;
     border-radius: 2px;
     padding: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 10px; */
 }
 
 .fieldset-extended-desc {
@@ -14,5 +14,5 @@
 }
 
 .content-left-margin {
-    margin-left: 10px;
+    /* 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 b13e9ed85..a033f0711 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,12 +1,18 @@
-<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>
-        <h4 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
-            <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 *ngIf="visibilityRulesService.isElementVisible(pathName,compositeField.id)" [id]="compositeField.id" [formGroup]="form">
+
+
+    <df-field *ngIf="compositeField.fields.length == 1" [field]="compositeField.fields[0]" [form]="form.get('fields').get(''+0)" [path]="path" [pathName]="pathName+'.fields.'+0"></df-field>
+
+    <div *ngIf="compositeField.fields.length > 1" class="fieldset-component">
+        <h4 *ngIf="compositeField.title">{{compositeField.title}}</h4>
+        <div class="content-left-margin">
+            <h4 *ngIf="compositeField.description">{{compositeField.description}}</h4>
+            <h4 *ngIf="compositeField.extendedDescription" class="fieldset-extended-desc">
+                <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>
 </div>
\ No newline at end of file
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 7657b454e..2f19bc1c6 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
@@ -7,10 +7,10 @@
 }
 
 .group-component {
-    border:1px solid grey;
+    /* border:1px solid grey;
     border-radius: 2px;
     padding: 10px;
-    margin-bottom: 10px;
+    margin-bottom: 10px; */
 }
 
 .group-extended-desc {
@@ -18,5 +18,5 @@
 }
 
 .content-left-margin {
-    margin-left: 10px;
+    /* 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 c8f4256f9..fedb1603d 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,12 +1,12 @@
 <div *ngIf="visibilityRulesService.isElementVisible(pathName,group.id)"  class="group-component" [id]="group.id" [formGroup]="form">
-    <h4>{{path + ' ' + group.title}}</h4>
+    <!-- <h4>{{path + ' ' + group.title}}</h4> -->
     <div class="content-left-margin">
-        <h5 *ngIf="group.description">{{group.description}}</h5>
+        <!-- <h5 *ngIf="group.description">{{group.description}}</h5>
         <h5 *ngIf="group.extendedDescription" class="group-extended-desc">
             <i>{{group.extendedDescription}}</i>
-        </h5>
+        </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)"
+            <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path"
                 [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
         </div>
     </div>
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 cc859b146..d7d33753e 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,22 +1,32 @@
-<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>
-        </div>
-    </p-header>
-
-    <div [id]="section.id" [formGroup]="form">
-        <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>
+<div *ngIf="visibilityRulesService.isElementVisible(pathName,section.id)" class="panel-group" style="margin-top:10px;">
+    <div class="panel panel-default">
+        <div class="panel-heading clearfix">
+            <a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="padding-top: 7.5px;">{{path}} {{section.title}}</a>
+            <!-- <a *ngIf="!form.get('fieldGroups').get(''+i).get('title').value" data-toggle="collapse" href="#{{indexPath + 'g' + i}}" class="panel-title pull-left"
+        style="padding-top: 7.5px;">{{i + 1}}. Group {{i + 1}}</a> -->
+            <div class="btn-group pull-right">
+                <a data-toggle="collapse" href="#{{section.id}}" class="panel-title pull-left" style="margin-left:5px;padding-top: 7.5px;">
+                    <span class="glyphicon glyphicon-minus"></span>
+                </a>
             </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 id="{{section.id}}" class="panel-collapse collapse in">
+            <div class="panel-body">
+                <div [id]="section.id" [formGroup]="form">
+                    <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>
+                        </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>
         </div>
     </div>
-</p-panel>
\ No newline at end of file
+</div>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index a6a3e17b6..d2abf7208 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -1,34 +1,15 @@
-.full-width {
-    width: 100%;
-}
 
-.ui-steps .ui-steps-item {
-    width: 25%;
-}
-
-.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;
-}
-
-.ui-steps.steps-custom .ui-steps-item .ui-steps-title {
-    color: #555555;
-}
 
 .ng-sidebar {
     width: 40%;  
+}
+
+.toc-container {
+    background: #f9f9f9 none repeat scroll 0 0;
+    border: 1px solid #aaa;
+    display: table;
+    font-size: 95%;
+    margin-bottom: 1em;
+    padding: 20px;
+    width: auto;
 }
\ 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 c9508bebf..ad055ba48 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,7 +1,7 @@
-<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>
+<div class="ui-g dynamic-formc full-width full-height">
+	<ng-sidebar-container>
+		<ng-sidebar mode="push" position="right" [(opened)]="visibleSidebar">
+			<table-of-content class="toc-container full-height" [model]="dataModel"></table-of-content>
 		</ng-sidebar>
 
 		<div class="ui-g" ng-sidebar-content>
@@ -27,97 +27,4 @@
 			</div>
 		</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 *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>
-				-->
-<!-- 	<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> -->
-
-
-<!--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>
-			</div>
-		</div>
-	</div> -->
\ No newline at end of file
+</div>
\ 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 71747739b..758a6f56e 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,11 +1,15 @@
 <!-- All contents in the first page -->
-<a (click)="scrollToId(model.id,page)">{{path+' '+model.title}}</a>
+<a (click)="scrollToId(model.id,page)">{{path + ' ' + model.title}}</a>
+
+<div *ngIf="model.fieldGroups.length > 0">
+    <div *ngFor="let fieldsetModel of model.fieldGroups[0].compositeFields let i = index">
+        <table-of-contents-field *ngIf="model.fieldGroups[0].compositeFields[i].fields.length == 1" [page]='page' [model]="model.fieldGroups[0].compositeFields[i].fields[0]"
+            [index]="i" [path]="path+'.'+(i+1)"></table-of-contents-field>
+        <table-of-contents-fieldset *ngIf="model.fieldGroups[0].compositeFields[i].fields.length > 1" [page]='page' [model]="fieldsetModel"
+            [index]="i" [path]="path+'.'+(i+1)"> </table-of-contents-fieldset>
+    </div>
+</div>
 
-<ul>
-    <li *ngFor="let groupModel of model.fieldGroups let i = index">
-        <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">
diff --git a/dmp-frontend/src/index.html b/dmp-frontend/src/index.html
index e99d8e9c3..6ec9a46e2 100644
--- a/dmp-frontend/src/index.html
+++ b/dmp-frontend/src/index.html
@@ -51,6 +51,6 @@
 
 </head>
 <body>
-	<app-root></app-root>
+	<app-root class="full-height full-width"></app-root>
 </body>
 </html>
\ No newline at end of file

From 3acba4ceb6c64617beea6f026ac981d45f95a87b Mon Sep 17 00:00:00 2001
From: Diamadis Tziotzios <dtziotzios@cite.gr>
Date: Mon, 11 Dec 2017 10:40:11 +0200
Subject: [PATCH 2/3] no message

---
 .../dynamic-form-group/dynamic-form-group.component.html     | 5 ++---
 dmp-frontend/src/app/form/dynamic-form.component.html        | 4 ++--
 2 files changed, 4 insertions(+), 5 deletions(-)

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 fedb1603d..fca9cd0be 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 *ngIf="visibilityRulesService.isElementVisible(pathName,group.id)"  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>
@@ -6,8 +6,7 @@
             <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"
-                [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
+            <df-composite-field [compositeField]="compositeField" [form]="form.get('compositeFields').get(''+i)" [path]="path" [pathName]="pathName+'.compositeFields.'+i"></df-composite-field>
         </div>
     </div>
 </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 ad055ba48..ddeaacbc6 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -9,7 +9,7 @@
 			<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)"
+				<p-steps [model]="stepperItems" [activeIndex]="this.currentPage" (activeIndex)="this.paginationService.setCurrentIndex($event)"
 				 [readonly]="false"></p-steps>
 			</div>
 			<div class="ui-g-12">
@@ -20,7 +20,7 @@
 				<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)"
+						<df-section *ngIf='this.shouldDisplaySection(section)' [section]="section" [form]="form.get('sections').get(''+i)"
 						 [path]="i+1" [pathName]="'sections.'+i"></df-section>
 					</div>
 				</form>

From 9e0d989b67a9ffb4965d77d89d981db47408b25a Mon Sep 17 00:00:00 2001
From: krommydas kyriakos <krommydas@cite.gr>
Date: Mon, 11 Dec 2017 10:50:27 +0200
Subject: [PATCH 3/3] Small fix

---
 dmp-frontend/src/app/form/dynamic-form.component.html | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index ddeaacbc6..0732ad538 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,4 +1,4 @@
-<div class="ui-g dynamic-formc full-width full-height">
+<div class="ui-g dynamic-formc full-width full-height">
 	<ng-sidebar-container>
 		<ng-sidebar mode="push" position="right" [(opened)]="visibleSidebar">
 			<table-of-content class="toc-container full-height" [model]="dataModel"></table-of-content>
@@ -9,8 +9,7 @@
 			<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.currentPage" (activeIndex)="this.paginationService.setCurrentIndex($event)"
-				 [readonly]="false"></p-steps>
+				<p-steps [model]="stepperItems" [(activeIndex)]="this.currentPage" [readonly]="false"></p-steps>
 			</div>
 			<div class="ui-g-12">
 				<progress-bar *ngIf="form" [formGroup]="form"></progress-bar>