From 1e78d583c6e612663f481ceda643326dcb47c0b3 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Mon, 13 Nov 2017 18:19:43 +0200
Subject: [PATCH 1/7] --

---
 dmp-frontend/src/app/app.component.css        | 10 ++-
 dmp-frontend/src/app/app.component.html       |  2 +-
 .../src/app/form/dynamic-form.component.css   | 65 +++++++++++++++++-
 .../src/app/form/dynamic-form.component.html  | 29 ++++++--
 .../src/app/form/dynamic-form.component.ts    |  6 +-
 .../form/tableOfContents/toc.component.css    |  9 ++-
 .../form/tableOfContents/toc.component.html   | 68 +++++++++----------
 .../src/app/services/login/token.service.ts   |  1 +
 dmp-frontend/src/app/services/rest-base.ts    |  2 +-
 9 files changed, 142 insertions(+), 50 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.css b/dmp-frontend/src/app/app.component.css
index 69ad35423..1ee1ff12e 100644
--- a/dmp-frontend/src/app/app.component.css
+++ b/dmp-frontend/src/app/app.component.css
@@ -36,9 +36,15 @@
     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
-{
+
+.navbar-title {
     position: absolute;
     width: 100%;
     left: 0;
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index 8aefeb25f..eaa6b69a2 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,6 +1,6 @@
 
 <div>
-  <nav class="navbar navbar-default">
+  <nav class="navbar navbar-default shadowed">
     <div class="container-fluid">
       <!-- Brand and toggle get grouped for better mobile display -->
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index 81e4095c2..ac870791f 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -1,3 +1,11 @@
+.hide{
+    display:none;
+}
+
+.show {
+    display:block;
+}
+
 .btncustom{
     background-color:#337ab7;
     color:white;
@@ -5,27 +13,78 @@
 }
 
 .parent-div {
-    height: calc(100vh - 80px);
+    height: calc(100vh - 65px); /* is height of window  minus heigh of header bar */
     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: 0.5s; /* For Safari 3.1 to 6.0 */
+    transition: 0.5s;
+}
+
+.child-div-caret{
+    position: absolute;
+    left: 98%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+    font-size: 2em;
+    cursor: pointer;
+    
 }
 
 .child-div-right {
     overflow-y: scroll;
     height: 100%;
+    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
+    transition: 0.5s;
+    transition: visibility 0s, opacity 0.5s linear;
 }
 
 
 .form-body-container{
-    height: calc(100vh - 80px - 130px);
+    padding-bottom: 10px;
+    height: calc(100vh - 85px - 138px);  /* is height of window minus heigh of app header bar minus 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 {
-    height: 130px;
+
+    /*
+    -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;
 }
\ 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 2442caef7..171a40d4e 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -1,10 +1,8 @@
 <div class="parent-div">
 		
 		
-			<div class="col-md-8 col-sm-9 child-div-left" >
+			<div class=" child-div-left" [ngClass]="{true:'col-md-8 col-sm-9', false:'col-md-12 col-sm-12'}[expandedToc]">
 				
-		
-					
 				<div class="col-md-12 form-body-container" id="form-container">
 		
 					<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
@@ -38,8 +36,20 @@
 					</form>
 				</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" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
+								<!-- {{dirtyValues}}% -->
+								</div>
+							</div>
+						</div>
 		
 					<div>
 						<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" (click)="SaveFinalize();">Save</button>
@@ -88,12 +98,17 @@
 		
 			</div>	
 		
-		
-		
-			<div class="col-md-4  col-sm-3 child-div-right" id="toc-container">
+
+
+			<div class="child-div-caret" (click)="toggleTOC()">
+				<i class="fa toc-toggler" [ngClass]="{true:'fa-arrow-right', false:'fa-arrow-left'}[expandedToc]" aria-hidden="true" ></i>
+			</div>
+
+
+			<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'hide' }[expandedToc]" id="toc-container">
 				<toc [dataModel]="dataModel"  (setPage)="setPage($event)"></toc>
 			</div>
-		
+				
 		
 		
 			
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 2ac390bb8..3756df510 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -61,7 +61,6 @@ export class DynamicFormComponent implements OnInit {
   private fragment: string;
   xml2jsonOBJ: any;
 
-  expandedForm : boolean = false;
   expandedToc : boolean = true;
 
 
@@ -295,4 +294,9 @@ export class DynamicFormComponent implements OnInit {
     this.tokenService.setToken(null); //kanonika prepei na mpei mesa sthn function.....
   }
 
+  toggleTOC(){
+    console.log("toggling toc")
+    this.expandedToc = !this.expandedToc;
+  }
+
 }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.css b/dmp-frontend/src/app/form/tableOfContents/toc.component.css
index 97928ae22..50768fefa 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.css
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.css
@@ -1,3 +1,10 @@
 .cursor-hand{
     cursor: pointer;
-}
\ No newline at end of file
+}
+
+.toc-toggler {
+    position: absolute;
+    left: 0%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
index f707ac58d..776c9a513 100644
--- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html
+++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html
@@ -1,43 +1,43 @@
-<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>
-                   
+    <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>
+                    
 
 
-                
-                <!-- <div *ngFor="let group of dataModel.groups">
-                    <ul>
-                        <li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
-                            <ul *ngFor="let field of group.groupFields">
-                                <li *ngIf="field.visible == 'true'">
-                                    <a class="nav-link" href="#field.key">{{field.label}}</a>
-                                </li>
-                            </ul>
-                        </li>
+                    
+                    <!-- <div *ngFor="let group of dataModel.groups">
+                        <ul>
+                            <li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
+                                <ul *ngFor="let field of group.groupFields">
+                                    <li *ngIf="field.visible == 'true'">
+                                        <a class="nav-link" href="#field.key">{{field.label}}</a>
+                                    </li>
+                                </ul>
+                            </li>
 
-                    </ul>
+                        </ul>
 
 
-                </div> -->
+                    </div> -->
 
 
 
 
-            </li>
-        </ul>
-    </nav>
-</body>
\ No newline at end of file
+                </li>
+            </ul>
+        </nav>
+    </body>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/services/login/token.service.ts b/dmp-frontend/src/app/services/login/token.service.ts
index 7344c9b4b..8a503c4a2 100644
--- a/dmp-frontend/src/app/services/login/token.service.ts
+++ b/dmp-frontend/src/app/services/login/token.service.ts
@@ -83,6 +83,7 @@ export class TokenService {
 
 
   logout(){
+    debugger;
     //set the log out actions here
     this.setLoggedIn(false);
     this.setEmail(null);
diff --git a/dmp-frontend/src/app/services/rest-base.ts b/dmp-frontend/src/app/services/rest-base.ts
index 981357da9..b2d38eeb0 100644
--- a/dmp-frontend/src/app/services/rest-base.ts
+++ b/dmp-frontend/src/app/services/rest-base.ts
@@ -18,6 +18,7 @@ export class RestBase {
     
 
     
+    
     /*
     protocol: string = "http";
     hostname: string ="dl010.madgik.di.uoa.gr" ;//"localhost";//"dl010.madgik.di.uoa.gr";//
@@ -31,7 +32,6 @@ export class RestBase {
     hostname: string = "dionysus.di.uoa.gr" ;
     port: number = 7070;
     webappname: string = "dmp-backend";
-    
 
     
     proxyPath : string = this.protocol+"://"+this.hostname+":"+this.port+"/"+this.webappname+"/proxy/";

From 910173c90706251b788fc963f300a14524078a71 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Mon, 13 Nov 2017 18:41:07 +0200
Subject: [PATCH 2/7] --

---
 dmp-frontend/src/app/app.component.css  |  6 ++-
 dmp-frontend/src/app/app.component.html | 55 +++++++++++--------------
 2 files changed, 28 insertions(+), 33 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.css b/dmp-frontend/src/app/app.component.css
index 1ee1ff12e..7c3bd07bf 100644
--- a/dmp-frontend/src/app/app.component.css
+++ b/dmp-frontend/src/app/app.component.css
@@ -45,11 +45,13 @@
 
 
 .navbar-title {
-    position: absolute;
+    /*
     width: 100%;
+    position: absolute;
     left: 0;
-    text-align: center;
+    */
     margin:0 auto;
+    text-align: center;
 }
 .navbar-toggle {
     z-index:3;
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index eaa6b69a2..ca4ae1a85 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,41 +1,34 @@
 
 <div>
   <nav class="navbar navbar-default shadowed">
-    <div class="container-fluid">
-      <!-- Brand and toggle get grouped for better mobile display -->
+    <div class="col-md-5 form-footer-seperator" >
+        <button class="btn btn-primary navbar-btn navbar-left" [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'>
+            <span style="font-size:20px;cursor:pointer" >&#9776;</span>
+          </button>
+    </div>
 
-      <div class="navbar-header">
-          
-      </div>
-  
-      <!-- Collect the nav links, forms, and other content for toggling -->
-      <div class="collapse navbar-collapse">
-
-        <div class="nav navbar-nav navbar-left" >
-            <button class="btn btn-primary navbar-btn navbar-left" [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'>
-              <span style="font-size:20px;cursor:pointer" >&#9776;</span>
-            </button>
-        </div>
-        
+    <div class="col-md-3 form-footer-seperator" >
         <h3 class="navbar-title">Data Management Plans Creator</h3>
+    </div>
 
+    <div class="col-md-4 form-footer-seperator" >
         <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><!-- /.navbar-collapse -->
-    </div><!-- /.container-fluid -->
+            <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>
 
 </div>

From 6f605960e5ed2a86f78646460b32fa226ef12e21 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Mon, 13 Nov 2017 19:13:49 +0200
Subject: [PATCH 3/7] --

---
 dmp-frontend/src/app/app-routing.module.ts    |  6 ++--
 dmp-frontend/src/app/app.component.html       | 29 ++++++++++++++-----
 dmp-frontend/src/app/app.component.ts         |  9 ++++++
 .../src/app/form/dynamic-form.component.css   | 17 +++++++----
 .../src/app/form/dynamic-form.component.ts    |  3 +-
 .../main-sign-in/main-sign-in.component.ts    |  4 +--
 6 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 884023531..8e57a602c 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -14,10 +14,10 @@ import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component
 const appRoutes: Routes = [
   { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
   { path: 'login', component: MainSignInComponent},
-  //{ path: 'projects', component: ProjectsComponent},
-  //{ path: 'dmps', component: DmpComponent},
+  { path: 'projects', component: ProjectsComponent},
+  { path: 'dmps', component: DmpComponent},
   { path: 'workspace', component: UserWorkspaceComponent},
-  //{ path: '', component: EmptyComponent},
+  { path: 'welcome', component: EmptyComponent},
   { path: '',   redirectTo: '/login', pathMatch: 'full' },
   { path: '**', component: PageNotFoundComponent },
   /*
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index ca4ae1a85..5455350f2 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -1,17 +1,32 @@
 
 <div>
   <nav class="navbar navbar-default shadowed">
-    <div class="col-md-5 form-footer-seperator" >
-        <button class="btn btn-primary navbar-btn navbar-left" [ngClass]="{true:'visible', false:'invisible'}[tokenService.isLoggedIn() == true]" (click)='slideNav()'>
-            <span style="font-size:20px;cursor:pointer" >&#9776;</span>
-          </button>
-    </div>
+    <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 ">
+            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Manage <span class="caret"></span> </button>
+            <ul class="dropdown-menu">
+              <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
+              <li><a class="cursor" (click)="goToProjects()">My Projects</a></li>
+              <li><a class="cursor"></a></li>
+            </ul>
+          </div>
 
-    <div class="col-md-3 form-footer-seperator" >
+      </div>
+    </div>
+    
+
+
+    <div class="col-md-3" >
         <h3 class="navbar-title">Data Management Plans Creator</h3>
     </div>
 
-    <div class="col-md-4 form-footer-seperator" >
+    <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>
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index 721ed7562..9d73db78e 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -58,5 +58,14 @@ export class AppComponent implements OnInit {
   }
 
 
+  goToDMPs(){
+    this.router.navigate(['/dmps'], { queryParams: { /*refresh : Math.random() ,returnUrl: this.state.url*/ }});
+  }
+
+  goToProjects(){
+    this.router.navigate(['/projects'], { queryParams: { /*refresh : Math.random() ,returnUrl: this.state.url*/ }});
+  }
+
+
 }
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index ac870791f..97fdb3428 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -13,7 +13,7 @@
 }
 
 .parent-div {
-    height: calc(100vh - 65px); /* is height of window  minus heigh of header bar */
+    height: calc(100vh - 60px); /* is height of window  minus heigh of header bar */
     width:100%;
 }
 
@@ -27,8 +27,12 @@
 
     padding:0px;
     height: 100%;
-    -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: 0.5s;
+    -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
+    transition: width 0.5s;
+
+    -webkit-transition-delay: visibility 5.6s; /* Safari */
+    transition-delay: visibility 5.6s;
+
 }
 
 .child-div-caret{
@@ -45,9 +49,12 @@
 .child-div-right {
     overflow-y: scroll;
     height: 100%;
+
     -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
-    transition: 0.5s;
-    transition: visibility 0s, opacity 0.5s linear;
+    transition: width 0.5s;
+    
+    -webkit-transition-delay: visibility 5.6s; /* Safari */
+    transition-delay: visibility 5.6s;
 }
 
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 3756df510..2f24e18d6 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/dmp-frontend/src/app/form/dynamic-form.component.ts
@@ -233,7 +233,7 @@ export class DynamicFormComponent implements OnInit {
           (data) => {
             console.log("Updated dataset");  
             //simple_notifier("success",null,"Saved form progress");
-            this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});     
+            this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});     
           },
           (err) => {
             simple_notifier("danger",null,"Could not save form progress");
@@ -295,7 +295,6 @@ export class DynamicFormComponent implements OnInit {
   }
 
   toggleTOC(){
-    console.log("toggling toc")
     this.expandedToc = !this.expandedToc;
   }
 
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 41e26ef35..1a20c152d 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
@@ -39,7 +39,7 @@ export class MainSignInComponent implements OnInit {
     this.createProjectEditorForm();
     //debugger;
     if(this.tokenService.isLoggedIn()){
-      this.router.navigate(['workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
+      this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});
     }
   }
 
@@ -53,7 +53,7 @@ export class MainSignInComponent implements OnInit {
         simple_notifier("success",null,"Successful login");
         
         this.tokenService.login(response['token'], TokenProvider.native, this.creds.username, response['email']);
-        this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
+        this.router.navigate(['/welcome'], { queryParams: { /*returnUrl: this.state.url*/ }});
       },
       err => {
         simple_notifier("danger",null,"Failed to login");

From 26a2c765cc8e5be0428d1591d90315ca13afd3a4 Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Mon, 13 Nov 2017 19:19:10 +0200
Subject: [PATCH 4/7] --

---
 dmp-frontend/src/app/app.component.html              | 2 +-
 dmp-frontend/src/app/services/login/token.service.ts | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index 5455350f2..619855ccb 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -8,7 +8,7 @@
       </button>
     -->
       <div class="nav navbar-nav navbar-left">
-        <div class="dropdown ">
+        <div class="dropdown" [ngClass]="{false:'invisible'}[tokenService.isLoggedIn() == true]">
             <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Manage <span class="caret"></span> </button>
             <ul class="dropdown-menu">
               <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
diff --git a/dmp-frontend/src/app/services/login/token.service.ts b/dmp-frontend/src/app/services/login/token.service.ts
index 8a503c4a2..9d4fc5612 100644
--- a/dmp-frontend/src/app/services/login/token.service.ts
+++ b/dmp-frontend/src/app/services/login/token.service.ts
@@ -1,6 +1,7 @@
 import { Injectable, Inject} from '@angular/core';
 import { Observable } from 'rxjs';
 import {LocalStorageService} from 'ngx-webstorage';
+import {Router} from '@angular/router';
 import 'rxjs/add/operator/map';
 import { DOCUMENT } from '@angular/platform-browser';
 
@@ -13,7 +14,7 @@ declare function sign_out_google(): any;
 @Injectable()
 export class TokenService {
 
-  constructor (private storage : LocalStorageService, @Inject(DOCUMENT) private document) {
+  constructor (private storage : LocalStorageService, @Inject(DOCUMENT) private document, private router : Router) {
     //var csrfToken : string = jQuery(document).find('meta[name="csrf-token"]').attr('content');
     //this.setCSRFToken(csrfToken);
   }
@@ -96,7 +97,9 @@ export class TokenService {
 
     this.setProvider(null);
     
-    window.location.reload();
+    this.router.navigate(['/login'], { queryParams: { /*returnUrl: this.state.url*/ }});
+
+    //window.location.reload();
   }
 
 

From 1dc52a211c3e018b73f875f9dfd7b95c015a253d Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Mon, 13 Nov 2017 19:27:35 +0200
Subject: [PATCH 5/7] -

---
 dmp-frontend/src/app/form/dynamic-form.component.css  | 10 +++++-----
 dmp-frontend/src/app/form/dynamic-form.component.html |  2 +-
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/dmp-frontend/src/app/form/dynamic-form.component.css b/dmp-frontend/src/app/form/dynamic-form.component.css
index 97fdb3428..e3d90d93c 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.css
+++ b/dmp-frontend/src/app/form/dynamic-form.component.css
@@ -30,9 +30,6 @@
     -webkit-transition: width 0.5s; /* For Safari 3.1 to 6.0 */
     transition: width 0.5s;
 
-    -webkit-transition-delay: visibility 5.6s; /* Safari */
-    transition-delay: visibility 5.6s;
-
 }
 
 .child-div-caret{
@@ -53,8 +50,11 @@
     -webkit-transition: 0.5s; /* For Safari 3.1 to 6.0 */
     transition: width 0.5s;
     
-    -webkit-transition-delay: visibility 5.6s; /* Safari */
-    transition-delay: visibility 5.6s;
+}
+
+.shrink-width{
+    width: 0px;
+    /*visibility:hidden;*/
 }
 
 
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html
index 171a40d4e..6dc28e7b1 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.html
+++ b/dmp-frontend/src/app/form/dynamic-form.component.html
@@ -105,7 +105,7 @@
 			</div>
 
 
-			<div class="child-div-right" [ngClass]="{true:'col-md-4 col-sm-3', false:'hide' }[expandedToc]" id="toc-container">
+			<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>
 				

From 49bb22627ee8eb7c9770fc262e6d4cc743e616bc Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Tue, 14 Nov 2017 11:36:21 +0200
Subject: [PATCH 6/7] --

---
 dmp-frontend/package-lock.json                |  5 ++
 dmp-frontend/package.json                     |  1 +
 dmp-frontend/src/app/app-routing.module.ts    |  2 +
 dmp-frontend/src/app/app.module.ts            |  8 +--
 .../app/datasets/dataset-routing.module.ts    | 22 -------
 .../src/app/dmps/dmp-routing.module.ts        | 21 -------
 dmp-frontend/src/app/dmps/dmp.component.ts    |  4 +-
 dmp-frontend/src/app/dmps/dmps.html           | 61 +++++++++----------
 .../app/projects/project-routing.module.ts    | 22 -------
 9 files changed, 41 insertions(+), 105 deletions(-)
 delete mode 100644 dmp-frontend/src/app/datasets/dataset-routing.module.ts
 delete mode 100644 dmp-frontend/src/app/dmps/dmp-routing.module.ts
 delete mode 100644 dmp-frontend/src/app/projects/project-routing.module.ts

diff --git a/dmp-frontend/package-lock.json b/dmp-frontend/package-lock.json
index 862ae0bf5..553b276b5 100644
--- a/dmp-frontend/package-lock.json
+++ b/dmp-frontend/package-lock.json
@@ -6821,6 +6821,11 @@
         "utila": "0.4.0"
       }
     },
+    "primeng": {
+      "version": "5.0.0-rc.0",
+      "resolved": "https://registry.npmjs.org/primeng/-/primeng-5.0.0-rc.0.tgz",
+      "integrity": "sha1-fb5YXppO84emPfSyyR3VbeXpJVI="
+    },
     "process": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
diff --git a/dmp-frontend/package.json b/dmp-frontend/package.json
index 449ec6187..7002d5fa5 100644
--- a/dmp-frontend/package.json
+++ b/dmp-frontend/package.json
@@ -38,6 +38,7 @@
     "ng2-datepicker": "^2.1.3",
     "ng4-loading-spinner": "^1.0.27",
     "ngx-webstorage": "^1.8.0",
+    "primeng": "^5.0.0-rc.0",
     "rxjs": "^5.4.2",
     "zone.js": "^0.8.17"
   },
diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index 8e57a602c..d8ede8ba6 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -12,7 +12,9 @@ import { UserWorkspaceComponent } from './user-workspace/user-workspace.componen
 import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
 
 const appRoutes: Routes = [
+  //{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
   { path: 'dynamic-form', component: DynamicFormComponent, canActivate: [AuthGuard] },
+  //{ path: 'dataset', component: DatasetsComponent },
   { path: 'login', component: MainSignInComponent},
   { path: 'projects', component: ProjectsComponent},
   { path: 'dmps', component: DmpComponent},
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 7504a0c34..e690aa807 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -49,17 +49,16 @@ import { CommonModule }   from '@angular/common';
 import { DatasetTableFilterPipe } from './pipes/dataset-table-filter.pipe';
 import { DatasetStatusFilterPipe } from './pipes/dataset-status-filter.pipe';
 import { DatasetsComponent }  from './datasets/dataset.component';
-import { DatasetRoutingModule } from './datasets/dataset-routing.module';
+
 
 import { DmpComponent }  from './dmps/dmp.component';
 import { DmpTableFilterPipe } from './pipes/dmp-table-filter.pipe';
 import { DmpStatusFilterPipe } from './pipes/dmp-status-filter.pipe';
 import { DmpVersionFilterPipe } from './pipes/dmp-version-filter.pipe';
-import { DmpRoutingModule } from './dmps/dmp-routing.module';
+
 
 import { ProjectTableFilterPipe } from './pipes/project-table-filter.pipe';
 import { ProjectsComponent }  from './projects/projects.component';
-import { ProjectRoutingModule } from './projects/project-routing.module';
 import { ProjectDetailComponent } from './projects/project.detail';
 import { ModalComponent } from './modal/modal.component';
 import { NgDatepickerModule } from 'ng2-datepicker';
@@ -109,10 +108,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
     HttpModule,
     HttpClientModule,
     TabModule,
-    DmpRoutingModule,
     CommonModule,
-    DatasetRoutingModule,
-    ProjectRoutingModule,
     AppRoutingModule,
     AngularDraggableModule,
     DataTableModule,
diff --git a/dmp-frontend/src/app/datasets/dataset-routing.module.ts b/dmp-frontend/src/app/datasets/dataset-routing.module.ts
deleted file mode 100644
index 36b74623e..000000000
--- a/dmp-frontend/src/app/datasets/dataset-routing.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { DatasetsComponent }    from './dataset.component';
-//import { ProjectDetailComponent }    from './project.detail';
-import { DynamicFormComponent } from '../form/dynamic-form.component';
-import { AuthGuard } from '../guards/auth.guard';
-
-const datasetsRoutes: Routes = [
-  { path: 'dataset', component: DatasetsComponent },
-  { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(datasetsRoutes)
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class DatasetRoutingModule { }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/dmps/dmp-routing.module.ts b/dmp-frontend/src/app/dmps/dmp-routing.module.ts
deleted file mode 100644
index 6508ef00d..000000000
--- a/dmp-frontend/src/app/dmps/dmp-routing.module.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { DmpComponent }    from './dmp.component';
-import { DynamicFormComponent } from '../form/dynamic-form.component';
-import { AuthGuard } from '../guards/auth.guard';
-
-const projectsRoutes: Routes = [
-  //{ path: 'tabs/dmps', component: DmpComponent },
-  { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(projectsRoutes)
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class DmpRoutingModule { }
\ No newline at end of file
diff --git a/dmp-frontend/src/app/dmps/dmp.component.ts b/dmp-frontend/src/app/dmps/dmp.component.ts
index 587493cc9..e6ad711fc 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.ts
+++ b/dmp-frontend/src/app/dmps/dmp.component.ts
@@ -46,8 +46,8 @@ export class DmpComponent implements OnInit{
   public sortOrder = "asc";
 
   //visibility rules for containers
-  tableVisible: boolean = true;
-  editorVisible: boolean = true;
+  //tableVisible: boolean = true;
+  //editorVisible: boolean = true;
 
 
   // for tableIds
diff --git a/dmp-frontend/src/app/dmps/dmps.html b/dmp-frontend/src/app/dmps/dmps.html
index dee78a60f..f9270f95b 100644
--- a/dmp-frontend/src/app/dmps/dmps.html
+++ b/dmp-frontend/src/app/dmps/dmps.html
@@ -1,5 +1,3 @@
-<meta name="google-signin-client_id" content="524432312250-vhgidft856v8qftsc81kls4c74v87d8o.apps.googleusercontent.com">
-
 <table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
     #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
     <thead>
@@ -188,41 +186,40 @@
                             <input class="form-control" id="abbreviation-text" [(ngModel)]="dmp.version" name="version">
                         </div>
                 </form>
-                </div>
-                <div class="modal-footer">
-                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                    <button type="submit" class="btn btn-primary" (click)="cloneDMP(dmp);">Save Dmp</button>
-                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                <button type="submit" class="btn btn-primary" (click)="cloneDMP(dmp);">Save Dmp</button>
             </div>
         </div>
     </div>
+</div>
 
-    <div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
-            <div class="modal-dialog" role="document">
-              <div class="modal-content">
-                <div class="modal-header">
-                  <h5 class="modal-title">Change Staus</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>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
-                </div>
-                <div class="modal-footer">
-                  <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
-                </div>
-              </div>
-            </div>
-          </div>
+<div class="modal" tabindex="-1" id="messageForChangingStatus" role="dialog">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+        <div class="modal-header">
+            <h5 class="modal-title">Change Staus</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>The submitted status is available only when all the DMP's datasets are "Submitted" or "Cancel"</p>
+        </div>
+        <div class="modal-footer">
+            <button type="button" class="btn btn-secondary" data-dismiss="modal">OK</button>
+        </div>
+        </div>
+    </div>
+</div>
 
-    <!--Modal for DMPs-->
-    <!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
+<!--Modal for DMPs-->
+<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
 
-    <!--DATASET TABLE-->
-    <datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets]="dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
+<!--DATASET TABLE-->
+<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets]="dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
 
 
-    <!-- Confirmation module- do not delete -->
-    <confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure you want to delete this DMP ? This is not revertable !'"
-        (responseSender)="deleteDMP($event)"></confirmation>
\ No newline at end of file
+<!-- Confirmation module- do not delete -->
+<confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure you want to delete this DMP ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>
\ No newline at end of file
diff --git a/dmp-frontend/src/app/projects/project-routing.module.ts b/dmp-frontend/src/app/projects/project-routing.module.ts
deleted file mode 100644
index 4cd05d95f..000000000
--- a/dmp-frontend/src/app/projects/project-routing.module.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { NgModule }             from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
-
-import { ProjectsComponent }    from './projects.component';
-import { ProjectDetailComponent }    from './project.detail';
-import { DynamicFormComponent } from '../form/dynamic-form.component';
-import { AuthGuard } from '../guards/auth.guard';
-
-const projectsRoutes: Routes = [
- // { path: 'tabs/projects', component: ProjectsComponent }, // canActivate: [AuthGuard]
-  { path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] }
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forChild(projectsRoutes)
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class ProjectRoutingModule { }
\ No newline at end of file

From e9d309fc5a1103cb13098cb8e894c2f2caf9fe9e Mon Sep 17 00:00:00 2001
From: Nikolaos Laskaris <laskarisn@di.uoa.gr>
Date: Tue, 14 Nov 2017 16:06:00 +0200
Subject: [PATCH 7/7] added breadcrumb

---
 dmp-frontend/.angular-cli.json                |   2 +
 dmp-frontend/src/app/app-routing.module.ts    |   3 +-
 dmp-frontend/src/app/app.component.html       |  11 +-
 dmp-frontend/src/app/app.component.ts         |  44 +++++++-
 dmp-frontend/src/app/app.module.ts            |   6 +-
 .../src/app/datasets/dataset.component.ts     |   4 -
 dmp-frontend/src/app/dmps/dmp.component.ts    | 100 ++++++++++--------
 dmp-frontend/src/app/dmps/dmps.html           |  39 ++++---
 .../src/app/services/breadcrumb.service.ts    |  23 ++++
 9 files changed, 161 insertions(+), 71 deletions(-)
 create mode 100644 dmp-frontend/src/app/services/breadcrumb.service.ts

diff --git a/dmp-frontend/.angular-cli.json b/dmp-frontend/.angular-cli.json
index f71ddd6e0..d2bdb2410 100644
--- a/dmp-frontend/.angular-cli.json
+++ b/dmp-frontend/.angular-cli.json
@@ -19,6 +19,8 @@
       "testTsconfig": "tsconfig.spec.json",
       "prefix": "app",
       "styles": [
+        "../node_modules/primeng/resources/themes/omega/theme.css" ,
+        "../node_modules/primeng/resources/primeng.css", 
         "./../node_modules/bootstrap/dist/css/bootstrap.min.css",
         "styles.css"
       ],
diff --git a/dmp-frontend/src/app/app-routing.module.ts b/dmp-frontend/src/app/app-routing.module.ts
index d8ede8ba6..c128949dd 100644
--- a/dmp-frontend/src/app/app-routing.module.ts
+++ b/dmp-frontend/src/app/app-routing.module.ts
@@ -10,6 +10,7 @@ import { DmpComponent } from './dmps/dmp.component';
 import { AppComponent } from './app.component';
 import { UserWorkspaceComponent } from './user-workspace/user-workspace.component';
 import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
+import { BreadcrumbService } from './services/breadcrumb.service';
 
 const appRoutes: Routes = [
   //{ path: 'dynamic-form/:id', component: DynamicFormComponent, canActivate: [AuthGuard] },
@@ -45,7 +46,7 @@ const appRoutes: Routes = [
     RouterModule
   ],
   providers: [
-
+    BreadcrumbService
   ]
 })
 export class AppRoutingModule { }
diff --git a/dmp-frontend/src/app/app.component.html b/dmp-frontend/src/app/app.component.html
index 619855ccb..c0605e7cc 100644
--- a/dmp-frontend/src/app/app.component.html
+++ b/dmp-frontend/src/app/app.component.html
@@ -9,11 +9,10 @@
     -->
       <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"> Manage <span class="caret"></span> </button>
+            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown"> Quick Navigate <span class="caret"></span> </button>
             <ul class="dropdown-menu">
               <li><a class="cursor" (click)="goToDMPs()">My DMPs</a></li>
               <li><a class="cursor" (click)="goToProjects()">My Projects</a></li>
-              <li><a class="cursor"></a></li>
             </ul>
           </div>
 
@@ -48,6 +47,12 @@
 
 </div>
 
+<!-- breadcrumb bar -->
+<div *ngIf="breadcrumbData.length!=0" class="col-md-12">
+    <p-breadcrumb [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>
+</div>
+
+
 <div class="parent_div">
 
   <div id="appSidebar" class="sidenav child_div_left">
@@ -67,10 +72,8 @@
        
       <router-outlet></router-outlet> 
 
-
       <!--this should be invisible -->
       <app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
-          
 
     </div>
 
diff --git a/dmp-frontend/src/app/app.component.ts b/dmp-frontend/src/app/app.component.ts
index 9d73db78e..b800a4376 100644
--- a/dmp-frontend/src/app/app.component.ts
+++ b/dmp-frontend/src/app/app.component.ts
@@ -5,6 +5,9 @@ import { JsonObjest } from '../app/entities/JsonObject.class';
 import { TokenService, TokenProvider } from './services/login/token.service';
 import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
+import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
+import { BreadcrumbService } from './services/breadcrumb.service';
+
 
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
@@ -22,21 +25,56 @@ export class AppComponent implements OnInit {
 
   sliderExpanded : boolean = false;
 
-  constructor(private tokenService : TokenService, private router: Router) {
+  
+  breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
+  breadcrumbData: MenuItem[] = new Array<MenuItem>();
+  
+
+
+  /*
+  breadcrumbData: MenuItem[] = [
+    {label:'Categories'},
+    {label:'Sports'},
+    {label:'Football'},
+    {label:'Countries'},
+    {label:'Spain'},
+    {label:'F.C. Barcelona'},
+    {label:'Squad'},
+    {label:'Lionel Messi', url: '/login'}
+  ];
+  */
+
+
+  constructor(private tokenService : TokenService, private router: Router, private breadcrumbService  : BreadcrumbService) {
 
   }
 
   ngOnInit() {
-    
+
+    this.breadcrumbService.breadcrumbDataEmitter.subscribe(
+      (data) => {
+        this.breadcrumbData = data;
+      }
+    );
+    this.breadcrumbService.breadcrumbHomeEmitter.subscribe(
+      (data) => {
+        this.breadcrumbHome = data;
+      }
+    );
+
   }
   
 
 
+  clearbreadCrumb(){
+    this.breadcrumbData.length = 0;
+  }
+
+
   slideNav(){
 
     $("#appSidebar").toggleClass("expanded");
     $("#appBody").toggleClass("expanded");
-    
 
   }
 
diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index e690aa807..b7ee0bb57 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/dmp-frontend/src/app/app.module.ts
@@ -35,6 +35,7 @@ import { GlobalInterceptor } from './services/interceptor';
 import { TabModule } from './tabs/tab.module';
 import { AngularDraggableModule } from 'angular2-draggable';
 
+import { BreadcrumbService } from './services/breadcrumb.service';
 import { NativeLoginService } from './services/login/native-login.service';
 import { GooggleSignInComponent } from './login/googgle-sign-in/googgle-sign-in.component';
 import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component';
@@ -42,7 +43,7 @@ import { NguiAutoCompleteModule } from '@ngui/auto-complete';
 
 import { HTTP_INTERCEPTORS } from '@angular/common/http';
 
-
+import {BreadcrumbModule,MenuItem} from 'primeng/primeng';
 
 import { CommonModule }   from '@angular/common';
 
@@ -115,6 +116,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
     NgDatepickerModule,
     Ng4LoadingSpinnerModule,
     NguiAutoCompleteModule,
+    BreadcrumbModule,
     SidebarModule.forRoot()
     
   ],
@@ -123,7 +125,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
                   useClass: GlobalInterceptor,
                   multi: true,
               },
-              ServerService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
+              ServerService, BreadcrumbService, dataModelBuilder, GlobalVariables, AuthGuard, PaginationService, TokenService, LocalStorageService, RestBase, EestoreService,NativeLoginService
             ],
   bootstrap: [AppComponent]
 })
diff --git a/dmp-frontend/src/app/datasets/dataset.component.ts b/dmp-frontend/src/app/datasets/dataset.component.ts
index 1fff01b91..2868e63bd 100644
--- a/dmp-frontend/src/app/datasets/dataset.component.ts
+++ b/dmp-frontend/src/app/datasets/dataset.component.ts
@@ -41,10 +41,6 @@ export class DatasetsComponent implements OnInit {
   public sortBy = "label";
   public sortOrder = "asc";
 
-  //visibility rules for containers
-  tableVisible: boolean = true;
-  editorVisible: boolean = false;
-
 
   // for tableIds
   showIDs : boolean = false;
diff --git a/dmp-frontend/src/app/dmps/dmp.component.ts b/dmp-frontend/src/app/dmps/dmp.component.ts
index e6ad711fc..fa0f93c23 100644
--- a/dmp-frontend/src/app/dmps/dmp.component.ts
+++ b/dmp-frontend/src/app/dmps/dmp.component.ts
@@ -16,6 +16,8 @@ import { FormGroup, FormControl }                 from '@angular/forms'; //na dw
 import { NgForm } from '@angular/forms';
 import { DatasetsComponent } from '../datasets/dataset.component';
 import { StatusToString } from '../pipes/various/status-to-string';
+import {MenuItem} from 'primeng/primeng';
+import { BreadcrumbService } from '../services/breadcrumb.service';
 
 declare var $ :any;
 
@@ -31,55 +33,70 @@ declare function simple_notifier(type: string, title: string, message:string): a
 
 export class DmpComponent implements OnInit{
 
-  // Start ALTERNATIVE
   //whole dmp data model
   tableData : any[] = new Array();
   
-  //organisation editor data model
-  editingOrganisation: any = {};
-  organisationEditorForm : any;
-
   //required by the table
   public filterQuery = "";
   public rowsOnPage = 10;
   public sortBy = "label";
   public sortOrder = "asc";
 
-  //visibility rules for containers
-  //tableVisible: boolean = true;
-  //editorVisible: boolean = true;
-
-
   // for tableIds
   showIDs : boolean = false;
-// END ALTERNATIVE
+
+  public stateConfig : any = {
+    "dmps" : {
+      "tableVisible" : true,
+      "selectedID" : null,
+      "selectedLabel" : null
+    },
+    "datasets" : {
+      "tableVisible" : false,
+      "selectedID" : null,
+      "selectedLabel" : null
+    }
+  }
+
+
+  breadcrumbHome: MenuItem = {icon: 'fa fa-home'};
+
+  /*
+  breadcrumbData: MenuItem[] = [];
+  */
+  
+  breadcrumbData: MenuItem[] = [
+    {label:'Categories'},
+    {label:'Sports'},
+    {label:'Football'},
+    {label:'Countries'},
+    {label:'Spain'},
+    {label:'F.C. Barcelona'},
+    {label:'Squad'},
+    {label:'Lionel Messi', url: 'https://en.wikipedia.org/wiki/Lionel_Messi'}
+  ];
+
+
+
 
   dmp:any;
-  @Input() dmpTableVisible: boolean;
-  @Input() dmpCount = 0;
+
   @Input() projectsDropDown:DropdownField;
-  @Input() dataSetVisibe:boolean;
   @Input() statusDropDown: DropdownField;
-  @Input() isSelected:boolean;
-  //@Input() projects: Project[];
-  dmpIdforDatasets: string;
-  dmpLabelforDatasets:string;
+  
   @ViewChild(DatasetsComponent) datasetsComponent:DatasetsComponent;
   
 
-  @ViewChild('isignOutBtn') isignOutBtn;
   constructor( 
     private serverService: ServerService,
     private route: ActivatedRoute,
+    private breadcrumbService : BreadcrumbService,
     private router: Router){
       this.projectsDropDown = new DropdownField();      
       this.projectsDropDown.options = [];
       this.statusDropDown = new DropdownField();
       this.statusDropDown.options= [{key:'', value:null},{key:'0', value:"Active"},{key:'1', value:"Inactive"}, {key:'2', value:"Submitted"}, {key:'3', value:"Cancel"}]
       //this.projects = [];
-      this.dmpTableVisible = false;
-      this.dataSetVisibe = false;
-      this.isSelected=false;
       
       this.dmp = {
         id: null,
@@ -110,6 +127,11 @@ export class DmpComponent implements OnInit{
         simple_notifier("danger",null,"Could not load User's Projects");
       }
     )
+
+    this.breadcrumbService.setData(this.breadcrumbData);
+    this.breadcrumbService.setData(this.breadcrumbData);
+    
+
   }
 
 
@@ -189,40 +211,30 @@ SaveDmp(){
 
 
 selectDmp(item){ 
-  this.dmpIdforDatasets = item.id;
-  this.dmpLabelforDatasets = item.label;
-  if(this.dataSetVisibe == false)
-    this.dataSetVisibe = true;
+  this.stateConfig.dmps.selectedID = item.id;
+  this.stateConfig.dmps.selectedLabel = item.label;
+  if(this.stateConfig.datasets.tableVisible == false)
+    this.stateConfig.datasets.tableVisible = true;
   else 
     this.datasetsComponent.getDatasetForDmpMethod(item.id);
 }
 
 editRow(item, elementId){ 
-  this.isSelected = true;
   if (elementId == "editDMP"){
-    this.dmp.label = item.label;
-    this.dmp.previous = item.previous;
-    this.dmp.version = item.version;
-    this.dmp.profile = item.profile;
-    this.dmp.profileData = item.profileData;
-    this.dmp.id = item.id;
+    this.dmp = item;
     this.dmp.project = item.project.id;
-    this.dmp.description = item.description;
-    this.dmp.status = item.status;
-    setTimeout(function() {
+    
+    //setTimeout(function() {
       $("#newDmpModal").modal("show");  
-    },0);
+    //},0);
     
   }
   if(elementId == "changeVersionDMP"){
-    this.dmp.label = item.label;
-    this.dmp.previous = item.previous;
-    this.dmp.version = item.version;
-    this.dmp.profile = item.profile;
-    this.dmp.profileData = item.profileData;
-    this.dmp.id = item.id;
+    
+
+    this.dmp = item;
     this.dmp.project = item.project.id;
-    this.dmp.description = item.description;
+    
     $("#newVersionDmpModal").modal("show");
   }
   
diff --git a/dmp-frontend/src/app/dmps/dmps.html b/dmp-frontend/src/app/dmps/dmps.html
index f9270f95b..e196b6e6b 100644
--- a/dmp-frontend/src/app/dmps/dmps.html
+++ b/dmp-frontend/src/app/dmps/dmps.html
@@ -1,4 +1,10 @@
-<table class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
+<!--
+<div class="col-md-12 ">
+    <p-breadcrumb  [model]="breadcrumbData" [home]="breadcrumbHome"></p-breadcrumb>
+</div>
+-->
+
+<table *ngIf="stateConfig.dmps.tableVisible" class="table table-striped customTable" [mfData]="tableData | dmpTableFilter : filterQuery | dmpVersionFilter : versionFilter |dmpstatusFilter: statusFilter"
     #mf="mfDataTable" [mfRowsOnPage]="rowsOnPage" [(mfSortBy)]="sortBy" [(mfSortOrder)]="sortOrder">
     <thead>
         <tr class="rowFilter">
@@ -68,14 +74,16 @@
             <td>{{dmp?.description}}</td>
             <td>{{dmp?.created | date:'yyyy-MM-dd HH:mm:ss Z'}}</td>
             <td>{{dmp?.status | statusToString }}</td>
-            <td><a href="#" class="editGridColumn" (click)="editRow(dmp, 'editDMP')"> <!--btn btn-primary btn-rounded css for button style -->
-                <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
-                <a href="#" class="editGridColumn" (click)="editRow(dmp, 'changeVersionDMP')">
+            <td>
+                <a class="editGridColumn cursor-link" (click)="editRow(dmp, 'editDMP')"> <!--btn btn-primary btn-rounded css for button style -->
+                    <i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit properties" id="editDMP"></i></a>
+                <a class="editGridColumn cursor-link" (click)="editRow(dmp, 'changeVersionDMP')">
                     <i class="fa fa-clone fa-fw" data-toggle="tooltip" title="create new version" id="changeVersionDMP"></i> </a>
-                <a href="#" class="editGridColumn" (click)="markDMPForDelete(dmp)">
+                <a class="editGridColumn cursor-link" (click)="markDMPForDelete(dmp)">
                     <i class="fa fa-eraser fa-fw" data-toggle="modal" data-target="#delete-dmp-confirm"  title="delete DMP"></i> </a>
-                <a href="#" class="editGridColumn" (click)="editRow(dmp, 'showDatasets')">
-                    <i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a></td>
+                <a class="editGridColumn cursor-link" (click)="editRow(dmp, 'showDatasets')">
+                    <i class="fa fa-table fa-fw" data-toggle="tooltip" title="show dataset for this DMP" id="showDatasets"></i></a>
+            </td>
         </tr>
     </tbody>
     <tfoot>
@@ -129,7 +137,8 @@
                         <label for="abbreviation-text" class="form-control-label">Description:</label>
                         <textarea rows="3" class="form-control" id="abbreviation-text" [(ngModel)]="dmp.description" name="description"></textarea>
                     </div>
-                    <!-- <div class="form-group">
+               <!-- 
+                    <div class="form-group">
                         <label for="reference-text" class="form-control-label">Profile Data:</label>
                         <textarea class="form-control" id="reference-text" [(ngModel)]="dmp.profileData" name="profileData"></textarea>
                     </div>
@@ -140,7 +149,8 @@
                     <div class="form-group">
                         <label for="end-date" class="form-control-label">End Date:</label>
                         <input class="form-control" id="endDate-date" [(ngModel)]= "dmp.endDate" name = "endDate">
-                    </div> -->
+                    </div> 
+                -->
                 </form>
             </div>
             <div class="modal-footer">
@@ -152,7 +162,6 @@
 </div>
 
 
-
 <!--Modal for changing version-->
 <div class="modal fade" id="newVersionDmpModal" tabindex="-1" role="dialog" aria-labelledby="newVersionDmpModalLabel" aria-hidden="true">
     <div class="modal-dialog" role="document">
@@ -214,12 +223,16 @@
     </div>
 </div>
 
+
 <!--Modal for DMPs-->
-<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="dataSetVisibe"></modal> -->
+<!-- <modal *ngIf="item && show" [(show)]="show" [item]="item" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></modal> -->
 
 <!--DATASET TABLE-->
-<datasets-table *ngIf="dataSetVisibe" [dmpIdforDatasets]="dmpIdforDatasets" [dmpLabelforDatasets]="dmpLabelforDatasets" [(dataSetVisibe)]="dataSetVisibe"></datasets-table>
+<datasets-table *ngIf="stateConfig.datasets.tableVisible" [dmpIdforDatasets]="stateConfig.dmps.selectedID" [dmpLabelforDatasets]="stateConfig.dmps.selectedLabel" [(dataSetVisibe)]="stateConfig.datasets.tableVisible"></datasets-table>
 
 
 <!-- Confirmation module- do not delete -->
-<confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure you want to delete this DMP ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>
\ No newline at end of file
+
+<confirmation [confirmationID]="'delete-dmp-confirm'" [confirmationTitle]="'Caution'" [confirmationDescr]="'This action will delete this DMP. Are you sure ? This is not revertable !'" (responseSender)="deleteDMP($event)"></confirmation>
+
+
diff --git a/dmp-frontend/src/app/services/breadcrumb.service.ts b/dmp-frontend/src/app/services/breadcrumb.service.ts
new file mode 100644
index 000000000..e7ad13548
--- /dev/null
+++ b/dmp-frontend/src/app/services/breadcrumb.service.ts
@@ -0,0 +1,23 @@
+import { Injectable, EventEmitter } from '@angular/core';
+import {Observable} from 'rxjs/Observable';
+import {MenuItem} from 'primeng/primeng';
+
+
+@Injectable()
+export class BreadcrumbService {
+
+
+    breadcrumbHomeEmitter : EventEmitter<MenuItem> = new EventEmitter<MenuItem>();
+    breadcrumbDataEmitter : EventEmitter<Array<MenuItem>> = new EventEmitter<Array<MenuItem>>();
+
+
+    setData(breadcrumbData : Array<MenuItem>){
+        this.breadcrumbDataEmitter.emit(breadcrumbData);
+    }
+
+    setHome(breadcrumbHome: MenuItem) {
+        this.breadcrumbHomeEmitter.emit(breadcrumbHome);
+    }
+
+
+}
\ No newline at end of file