ui changes

This commit is contained in:
Diamantis Tziotzios 2017-12-06 10:46:05 +02:00
parent 80115ed3cf
commit f3d9597a54
5 changed files with 228 additions and 245 deletions

View File

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

View File

@ -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,

View File

@ -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;
}

View File

@ -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> -->
</div> -->

View File

@ -4,7 +4,7 @@ import { DatasetModel } from '../models/DatasetModel';
import { Rule } from '../models/Rule';
import { JsonSerializer } from '../utilities/JsonSerializer';
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef } from '@angular/core';
import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef, ViewEncapsulation } from '@angular/core';
import { FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { NgForm } from '@angular/forms';
import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
@ -46,12 +46,12 @@ declare var PerfectScrollbar: any;
selector: 'dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: [
'./dynamic-form.component.css',
'../../assets/perfect-scrollbar/perfect-scrollbar.css'
'./dynamic-form.component.css'
],
providers: [
FieldControlService, ServerService
]
],
encapsulation: ViewEncapsulation.None,
})
export class DynamicFormComponent implements OnInit {
@ -62,6 +62,10 @@ export class DynamicFormComponent implements OnInit {
datasetId: string;
pathName: string;
stepperItems: MenuItem[];
activeStepperIndex: number = 1;
visibleSidebar: boolean = false;
private progressbar:boolean = false;
@ -77,6 +81,33 @@ export class DynamicFormComponent implements OnInit {
ngOnInit() {
//this.dataModel = new JsonSerializer<DatasetModel>().fromJSONObject(new DatasetModel(), DatasetModel);
//this.form = this.dataModel.buildForm();
this.stepperItems = [{
label: 'Personal',
command: (event: any) => {
this.activeStepperIndex = 0;
}
},
{
label: 'Seat',
command: (event: any) => {
this.activeStepperIndex = 1;
}
},
{
label: 'Payment',
command: (event: any) => {
this.activeStepperIndex = 2;
}
},
{
label: 'Confirmation',
command: (event: any) => {
this.activeStepperIndex = 3;
}
}
];
let sub = this.route.queryParams.subscribe(params => {
let dmpid = params.id;
@ -110,6 +141,10 @@ export class DynamicFormComponent implements OnInit {
submit(){
this.serverService.updateDataset(this.datasetId,this.form.value).subscribe()
}
toggleSidebar() {
this.visibleSidebar = !this.visibleSidebar;
}
/* scrollToElemID(elemID) {
scroll("#" + elemID);
}