datatype, new statuses and merged changes
This commit is contained in:
commit
2f8e693b0f
|
@ -4,32 +4,14 @@
|
||||||
margin-top:15px;
|
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 {
|
.parent-div {
|
||||||
height: calc(100vh - 80px);
|
height: calc(100vh - 80px);
|
||||||
width:100%;
|
width:100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.child-div-left{
|
.child-div-left{
|
||||||
overflow-y: scroll;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -37,3 +19,13 @@
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.form-body-container{
|
||||||
|
height: calc(100vh - 80px - 130px);
|
||||||
|
overflow-y:scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-footer-container {
|
||||||
|
height: 130px;
|
||||||
|
}
|
|
@ -1,9 +1,13 @@
|
||||||
<div class="parent-div">
|
<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">
|
||||||
|
|
||||||
|
<form novalidate [formGroup]="form" (ngSubmit)="onSubmit()">
|
||||||
|
|
||||||
<div *ngFor = "let section of dataModel.sections; let i = index;">
|
<div *ngFor = "let section of dataModel.sections; let i = index;">
|
||||||
<div *ngIf="section.groupFields.length>0 else sectionHeader">
|
<div *ngIf="section.groupFields.length>0 else sectionHeader">
|
||||||
|
@ -30,19 +34,20 @@
|
||||||
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
<df-group [group]="group" [dataModel]="dataModel" [form]="getSubForm(group.key)"></df-group>
|
||||||
</div> -->
|
</div> -->
|
||||||
|
|
||||||
<div>
|
<!--
|
||||||
<button type="submit" class="btn btn-default btncustom" [disabled]="!form.valid || finalizeStatus">Save</button>
|
<p>Form value: {{ form.value | json }}</p>
|
||||||
<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">
|
<div *ngIf="payLoad" class="form-row">
|
||||||
<strong>Saved the following values</strong><br>{{payLoad}}
|
<strong>Saved the following values</strong><br>{{payLoad}}
|
||||||
</div>
|
</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>
|
</form>
|
||||||
<p>Form value: {{ form.value | json }}</p>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-md-12 form-footer-container" >
|
||||||
|
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<!-- pagination -->
|
<!-- pagination -->
|
||||||
|
@ -65,19 +70,25 @@
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div >
|
<div class="text-center">
|
||||||
<div class="progress">
|
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" (click)="SaveFinalize();">Save</button>
|
||||||
<div class="progress-bar" role="progressbar" aria-valuenow= "" aria-valuemin="0" aria-valuemax="100" [ngStyle]="{'width': dirtyValues + '%'}">
|
<button type="button" class="btn btn-default btncustom" [disabled]="!form.valid" data-toggle="modal" data-target="#confirmModal">Finalize</button>
|
||||||
{{dirtyValues}}%
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="col-md-4 col-sm-3 child-div-right styled-scrollbar">
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<div class="col-md-4 col-sm-3 child-div-right" id="toc-container">
|
||||||
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
|
<toc [dataModel]="dataModel" (setPage)="setPage($event)"></toc>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -24,17 +24,23 @@ var flatten = require('flat');
|
||||||
declare var $ :any;
|
declare var $ :any;
|
||||||
|
|
||||||
|
|
||||||
//import * as $ from '../../../node_modules/jquery/dist/jquery'
|
|
||||||
|
|
||||||
import * as scroll from '../../assets/jquery.scrollTo.min.js';
|
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({
|
@Component({
|
||||||
selector: 'dynamic-form',
|
selector: 'dynamic-form',
|
||||||
templateUrl: './dynamic-form.component.html',
|
templateUrl: './dynamic-form.component.html',
|
||||||
styleUrls: ['./dynamic-form.component.css'],
|
styleUrls: [
|
||||||
|
'./dynamic-form.component.css',
|
||||||
|
'../../assets/perfect-scrollbar/perfect-scrollbar.css'
|
||||||
|
],
|
||||||
providers: [
|
providers: [
|
||||||
FieldControlService, ServerService, dataModelBuilder
|
FieldControlService, ServerService, dataModelBuilder
|
||||||
]
|
]
|
||||||
|
@ -185,6 +191,10 @@ export class DynamicFormComponent implements OnInit {
|
||||||
(err) => {
|
(err) => {
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var formScroller = new PerfectScrollbar("#form-container");
|
||||||
|
var tocScroller = new PerfectScrollbar("#toc-container");
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
scrollToElemID(elemID) {
|
scrollToElemID(elemID) {
|
||||||
|
@ -194,7 +204,7 @@ export class DynamicFormComponent implements OnInit {
|
||||||
|
|
||||||
private patchForm(flatList: any) {
|
private patchForm(flatList: any) {
|
||||||
|
|
||||||
debugger;
|
|
||||||
for (var prop in flatList) {
|
for (var prop in flatList) {
|
||||||
if (flatList.hasOwnProperty(prop)) {
|
if (flatList.hasOwnProperty(prop)) {
|
||||||
if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue;
|
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
|
ngAfterViewChecked(): void { //navigate to certain section of the page
|
||||||
|
|
||||||
try {
|
try {
|
||||||
document.querySelector('#' + this.fragment).scrollIntoView();
|
document.querySelector('#' + this.fragment).scrollIntoView();
|
||||||
} catch (e) { }
|
} catch (e) { }
|
||||||
|
@ -219,18 +230,18 @@ export class DynamicFormComponent implements OnInit {
|
||||||
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
|
//data.properties = this.xml2jsonOBJ.json2xml_str(JSON.stringify(this.form.value));
|
||||||
data.properties = JSON.stringify(this.form.value);
|
data.properties = JSON.stringify(this.form.value);
|
||||||
|
|
||||||
this.serverService.setDataset(data).subscribe((data) => {
|
this.serverService.setDataset(data).subscribe(
|
||||||
|
(data) => {
|
||||||
console.log("Updated dataset");
|
console.log("Updated dataset");
|
||||||
|
//simple_notifier("success",null,"Saved form progress");
|
||||||
this.router.navigate(['/workspace'], { queryParams: { /*returnUrl: this.state.url*/ }});
|
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)
|
|
||||||
|
|
||||||
},
|
},
|
||||||
(err) => {
|
(err) => {
|
||||||
|
simple_notifier("danger",null,"Could not save form progress");
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
(err) => {
|
(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>
|
<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" >
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,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 -->
|
<!-- font-awesome css -->
|
||||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.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 -->
|
<!-- my custom global code and css -->
|
||||||
<link rel="stylesheet" type="text/css" href="assets/custom.css">
|
<link rel="stylesheet" type="text/css" href="assets/custom.css">
|
||||||
<script src="assets/custom.js"></script>
|
<script src="assets/custom.js"></script>
|
||||||
|
|
Loading…
Reference in New Issue