ui changes
This commit is contained in:
parent
80115ed3cf
commit
f3d9597a54
|
|
@ -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" >☰</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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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">×</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">×</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> -->
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue