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] 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