datatype, new statuses and merged changes
This commit is contained in:
annampak
commit
2f8e693b0f
|
|
@ -4,36 +4,28 @@
|
|||
margin-top:15px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.styled-scrollbar::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
|
||||
background-color: #F5F5F5;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.styled-scrollbar::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-image: -webkit-gradient(linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0.44, rgb(122,153,217)),
|
||||
color-stop(0.72, rgb(73,125,189)),
|
||||
color-stop(0.86, rgb(28,58,148)));
|
||||
}
|
||||
|
||||
.parent-div {
|
||||
height: calc(100vh - 80px);
|
||||
width:100%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.child-div-left{
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.child-div-right {
|
||||
overflow-y: scroll;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.form-body-container{
|
||||
height: calc(100vh - 80px - 130px);
|
||||
overflow-y:scroll;
|
||||
}
|
||||
|
||||
.form-footer-container {
|
||||
height: 130px;
|
||||
}
|
||||
|
|
@ -1,83 +1,94 @@
|
|||
<div class="parent-div">
|
||||
|
||||
|
||||
<div class="col-md-8 col-sm-9 child-div-left styled-scrollbar" >
|
||||
<div class="col-md-8 col-sm-9 child-div-left" >
|
||||
|
||||
|
||||
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
|
||||
<div class="col-md-12 form-body-container" id="form-container">
|
||||
|
||||
<div *ngFor = "let section of dataModel.sections; let i = index;">
|
||||
<div *ngIf="section.groupFields.length>0 else sectionHeader">
|
||||
<div *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
|
||||
<div *ngFor="let group of section.groupFields">
|
||||
<div *ngIf="shouldIShow(group);" >
|
||||
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||
|
||||
<div *ngFor = "let section of dataModel.sections; let i = index;">
|
||||
<div *ngIf="section.groupFields.length>0 else sectionHeader">
|
||||
<div *ngIf="shouldIShow(section);"><h3>{{section.title}}</h3></div>
|
||||
<div *ngFor="let group of section.groupFields">
|
||||
<div *ngIf="shouldIShow(group);" >
|
||||
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<ng-template *ngIf="shouldIShow(section);" #sectionHeader>
|
||||
<h2>{{section.title}}</h2>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let field of dataModel.fields">
|
||||
<div [formGroup]="form" class="form-group">
|
||||
<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
|
||||
</div>
|
||||
</div>
|
||||
<ng-template *ngIf="shouldIShow(section);" #sectionHeader>
|
||||
<h2>{{section.title}}</h2>
|
||||
</ng-template>
|
||||
</div>
|
||||
|
||||
<div *ngFor="let field of dataModel.fields">
|
||||
<div [formGroup]="form" class="form-group">
|
||||
<df-field [field]="field" [form]="form" [dataModel]="dataModel" ></df-field>
|
||||
|
||||
<!-- <div *ngFor="let group of dataModel.groups">
|
||||
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
||||
</div> -->
|
||||
|
||||
<!--
|
||||
<p>Form value: {{ form.value | json }}</p>
|
||||
-->
|
||||
<div *ngIf="payLoad" class="form-row">
|
||||
<strong>Saved the following values</strong><br>{{payLoad}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div *ngFor="let group of dataModel.groups">
|
||||
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
||||
</div> -->
|
||||
|
||||
<div>
|
||||
<button type="submit" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus">Save</button>
|
||||
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus" data-toggle="modal" data-target="#confirmModal">Finalize</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="col-md-12 form-footer-container" >
|
||||
|
||||
<div class="text-center">
|
||||
<!-- pagination -->
|
||||
<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="payLoad" class="form-row">
|
||||
<strong>Saved the following values</strong><br>{{payLoad}}
|
||||
<div class="text-center">
|
||||
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" (click)="SaveFinalize();">Save</button>
|
||||
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" data-toggle="modal" data-target="#confirmModal">Finalize</button>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<p>Form value: {{ form.value | json }}</p>
|
||||
|
||||
|
||||
|
||||
<div class="text-center">
|
||||
<!-- pagination -->
|
||||
<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 class="progress">
|
||||
<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
|
||||
{{dirtyValues}}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-md-4 col-sm-3 child-div-right styled-scrollbar">
|
||||
<div class="col-md-4 col-sm-3 child-div-right" id="toc-container">
|
||||
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -24,17 +24,23 @@ var flatten = require('flat');
|
|||
declare var $ :any;
|
||||
|
||||
|
||||
//import * as $ from '../../../node_modules/jquery/dist/jquery'
|
||||
|
||||
import * as scroll from '../../assets/jquery.scrollTo.min.js';
|
||||
|
||||
|
||||
import '../../assets/custom.js';
|
||||
declare function simple_notifier(type: string, title: string, message:string): any;
|
||||
|
||||
|
||||
//import '../../assets/perfect-scrollbar/perfect-scrollbar.js';
|
||||
declare var PerfectScrollbar : any;
|
||||
|
||||
@Component({
|
||||
selector: 'dynamic-form',
|
||||
templateUrl: './dynamic-form.component.html',
|
||||
styleUrls: ['./dynamic-form.component.css'],
|
||||
styleUrls: [
|
||||
'./dynamic-form.component.css',
|
||||
'../../assets/perfect-scrollbar/perfect-scrollbar.css'
|
||||
],
|
||||
providers: [
|
||||
FieldControlService, ServerService, dataModelBuilder
|
||||
]
|
||||
|
|
@ -185,6 +191,10 @@ export class DynamicFormComponent implements OnInit {
|
|||
(err) => {
|
||||
|
||||
});
|
||||
|
||||
var formScroller = new PerfectScrollbar("#form-container");
|
||||
var tocScroller = new PerfectScrollbar("#toc-container");
|
||||
|
||||
}
|
||||
|
||||
scrollToElemID(elemID) {
|
||||
|
|
@ -194,7 +204,7 @@ export class DynamicFormComponent implements OnInit {
|
|||
|
||||
private patchForm(flatList: any) {
|
||||
|
||||
debugger;
|
||||
|
||||
for (var prop in flatList) {
|
||||
if (flatList.hasOwnProperty(prop)) {
|
||||
if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue;
|
||||
|
|
@ -206,6 +216,7 @@ export class DynamicFormComponent implements OnInit {
|
|||
}
|
||||
|
||||
ngAfterViewChecked(): void { //navigate to certain section of the page
|
||||
|
||||
try {
|
||||
document.querySelector('#' + this.fragment).scrollIntoView();
|
||||
} catch (e) { }
|
||||
|
|
@ -219,18 +230,18 @@ export class DynamicFormComponent implements OnInit {
|
|||
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
|
||||
data.properties = JSON.stringify(this.form.value);
|
||||
|
||||
this.serverService.setDataset(data).subscribe((data) => {
|
||||
console.log("Updated dataset");
|
||||
this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
|
||||
//VALE EDW NA SE PIGAINEI PISW KAI NA SOU VGAZEI ENA MHNYMA SUCCESS... (to success tha to valw egw an thes)
|
||||
|
||||
},
|
||||
this.serverService.setDataset(data).subscribe(
|
||||
(data) => {
|
||||
console.log("Updated dataset");
|
||||
//simple_notifier("success",null,"Saved form progress");
|
||||
this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
|
||||
},
|
||||
(err) => {
|
||||
|
||||
simple_notifier("danger",null,"Could not save form progress");
|
||||
});
|
||||
},
|
||||
(err) => {
|
||||
|
||||
simple_notifier("danger",null,"Could not save form progress");
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
.autocomplete{
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
|
||||
<label *ngIf="label" for="{{id}}">{{label}}</label>
|
||||
<input auto-complete class="form-control" id="{{id}}" [(ngModel)]="value" (ngModelChange)="updateByQuery($event)" [source]="values" >
|
||||
<input auto-complete class="form-control autocomplete" id="{{id}}" [(ngModel)]="value" (ngModelChange)="updateByQuery($event)" [source]="values" >
|
||||
|
||||
|
|
|
|||
|
|
@ -12,6 +12,15 @@ export class GlobalVariables {
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
getFormHasPaging() : boolean{
|
||||
return this.storage.retrieve('form-paging-flag');
|
||||
}
|
||||
|
||||
setFormHasPaging(formHasPaging : boolean){
|
||||
this.storage.store('form-paging-flag',formHasPaging);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
/*
|
||||
* Container style
|
||||
*/
|
||||
.ps {
|
||||
overflow: hidden !important;
|
||||
overflow-anchor: none;
|
||||
-ms-overflow-style: none;
|
||||
touch-action: auto;
|
||||
-ms-touch-action: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar rail styles
|
||||
*/
|
||||
.ps__rail-x {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
height: 15px;
|
||||
/* there must be 'bottom' or 'top' for ps__rail-x */
|
||||
bottom: 0px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
transition: background-color .2s linear, opacity .2s linear;
|
||||
-webkit-transition: background-color .2s linear, opacity .2s linear;
|
||||
width: 15px;
|
||||
/* there must be 'right' or 'left' for ps__rail-y */
|
||||
right: 0;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps--active-x > .ps__rail-x,
|
||||
.ps--active-y > .ps__rail-y {
|
||||
display: block;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.ps:hover > .ps__rail-x,
|
||||
.ps:hover > .ps__rail-y,
|
||||
.ps--focus > .ps__rail-x,
|
||||
.ps--focus > .ps__rail-y,
|
||||
.ps--scrolling-x > .ps__rail-x,
|
||||
.ps--scrolling-y > .ps__rail-y {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover,
|
||||
.ps__rail-y:hover,
|
||||
.ps__rail-x:focus,
|
||||
.ps__rail-y:focus {
|
||||
background-color: #eee;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/*
|
||||
* Scrollbar thumb styles
|
||||
*/
|
||||
.ps__thumb-x {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, height .2s ease-in-out;
|
||||
-webkit-transition: background-color .2s linear, height .2s ease-in-out;
|
||||
height: 6px;
|
||||
/* there must be 'bottom' for ps__thumb-x */
|
||||
bottom: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__thumb-y {
|
||||
background-color: #aaa;
|
||||
border-radius: 6px;
|
||||
transition: background-color .2s linear, width .2s ease-in-out;
|
||||
-webkit-transition: background-color .2s linear, width .2s ease-in-out;
|
||||
width: 6px;
|
||||
/* there must be 'right' for ps__thumb-y */
|
||||
right: 2px;
|
||||
/* please don't change 'position' */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.ps__rail-x:hover > .ps__thumb-x,
|
||||
.ps__rail-x:focus > .ps__thumb-x {
|
||||
background-color: #999;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.ps__rail-y:hover > .ps__thumb-y,
|
||||
.ps__rail-y:focus > .ps__thumb-y {
|
||||
background-color: #999;
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
/* MS supports */
|
||||
@supports (-ms-overflow-style: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
|
||||
.ps {
|
||||
overflow: auto !important;
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -38,6 +38,12 @@
|
|||
<!-- font-awesome css -->
|
||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
||||
|
||||
|
||||
<!-- Customized scrollbars source: https://github.com/utatti/perfect-scrollbar -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/perfect-scrollbar/perfect-scrollbar.css">
|
||||
<script src="assets/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
|
||||
|
||||
<!-- my custom global code and css -->
|
||||
<link rel="stylesheet" type="text/css" href="assets/custom.css">
|
||||
<script src="assets/custom.js"></script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue