Merge branch 'master' of git@gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot.git
This commit is contained in:
commit
92df56730c
|
@ -52,10 +52,10 @@
|
|||
<tr *ngFor="let dataset of mf.data" class="hover">
|
||||
<td [ngClass]="{true:'visible', false:'invisible'}[showIDs]">{{dataset.id}}</td>
|
||||
<td>{{dataset?.label}}</td>
|
||||
<td>{{dataset?.status}}</td>
|
||||
<td>{{dataset?.uri}}</td>
|
||||
<td>{{dataset?.profile?.label}}</td>
|
||||
<td>{{dataset?.description}}</td>
|
||||
<td>{{dataset?.status}}</td>
|
||||
<td><a class="editGridColumn" (click)="editRow(dataset, $event)"><i class="fa fa-pencil fa-fw" data-toggle="tooltip" title="edit Properties" id="editDataset"></i>
|
||||
<i class="fa fa-eraser fa-fw" data-toggle="tooltip" title="delete Dataset"></i>
|
||||
<i class="fa fa-list-alt fa-fw" data-toggle="tooltip" title="describe dataset" id="describeDataset"></i></a></td>
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div class="col-md-8 col-sm-9">
|
||||
<form [formGroup]="form" (ngSubmit)="onSubmit()" novalidate>
|
||||
|
||||
<div *ngFor = "let section of dataModel.sections">
|
||||
<div *ngFor = "let section of dataModel.sections; let i = index;">
|
||||
<div *ngIf="section.groupFields.length>0 else sectionHeader">
|
||||
<h3>{{section.title}}</h3>
|
||||
<div *ngFor="let group of section.groupFields">
|
||||
|
@ -25,7 +25,8 @@
|
|||
</div> -->
|
||||
|
||||
<div>
|
||||
<button type="submit" class="btn btn-default" [disabled]="!form.valid">Save</button>
|
||||
<button type="submit" class="btn btn-default btncustom" [disabled]="!form.valid">Save</button>
|
||||
<button type="submit" class="btn btn-default btncustom" [disabled]="!form.valid">Finalize</button>
|
||||
</div>
|
||||
|
||||
<div *ngIf="payLoad" class="form-row">
|
||||
|
@ -44,7 +45,7 @@
|
|||
</div>
|
||||
<div class="panel-body" id="collapse-panel" class="panel-collapse">
|
||||
<div *ngIf="dataModel.groups.length">
|
||||
<toc [dataModel]="dataModel" (setPage)="setPage(page)"></toc>
|
||||
<toc [dataModel]="dataModel" (setPage)="setPage(2)"></toc>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -32,6 +32,7 @@ import * as scroll from '../../assets/jquery.scrollTo.min.js';
|
|||
@Component({
|
||||
selector: 'dynamic-form',
|
||||
templateUrl: './dynamic-form.component.html',
|
||||
styleUrls: ['./dynamic-form.css'],
|
||||
providers: [FieldControlService, ServerService, dataModelBuilder]
|
||||
})
|
||||
export class DynamicFormComponent implements OnInit {
|
||||
|
@ -80,7 +81,7 @@ export class DynamicFormComponent implements OnInit {
|
|||
this.serverService.getDatasetByID(this.datasetId).subscribe(
|
||||
(data) => {
|
||||
var flatList;
|
||||
var formValues;
|
||||
var formValues = "";
|
||||
if (data.properties) {
|
||||
console.log("Found already submitted form, loading that one!");
|
||||
|
||||
|
@ -128,6 +129,7 @@ export class DynamicFormComponent implements OnInit {
|
|||
let dirtyValuesArray: Array<any> = [];
|
||||
let count = 0;
|
||||
let countDirtyValues = 0;
|
||||
let percentage = 0;
|
||||
Object.keys(this.form.controls).forEach((c) => {
|
||||
//count++;
|
||||
let currentControl = this.form.controls[c];
|
||||
|
@ -135,17 +137,30 @@ export class DynamicFormComponent implements OnInit {
|
|||
dirtyValuesArray.push(currentControl.value);
|
||||
|
||||
});
|
||||
|
||||
Object.keys(this.form.value).forEach((c) => {
|
||||
//count++;
|
||||
Object.keys(this.form.value[c]).forEach((item) => {
|
||||
let value = this.form.value[c][item]
|
||||
|
||||
if (value != undefined && value != "" && value != " ") countDirtyValues++; //TODO REMOVE SPACES FROM EMPTY STRING
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
this.dataModel.groups.forEach(grp => {
|
||||
grp.groupFields.forEach((fld) => {
|
||||
if (fld.visible == true || fld.visible == "true")
|
||||
count++;
|
||||
if (fld.value != undefined && fld.value !=" ")
|
||||
countDirtyValues++;
|
||||
// if (fld.value != undefined && fld.value != " ")
|
||||
// countDirtyValues++;
|
||||
});
|
||||
});
|
||||
//console.log(count);
|
||||
// var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
|
||||
var percentage = Math.floor(countDirtyValues * 100 / count);
|
||||
percentage = Math.floor(countDirtyValues * 100 / count);
|
||||
this.dirtyValues = percentage;
|
||||
})
|
||||
|
||||
|
@ -233,6 +248,20 @@ export class DynamicFormComponent implements OnInit {
|
|||
this.payLoad = JSON.stringify(this.form.value);
|
||||
}
|
||||
|
||||
shouldIShow(groupFields) {
|
||||
debugger;
|
||||
if (this.pagination.currentPage == groupFields[0].page){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
|
||||
|
||||
// if (i > this.pagination.startIndex && this.pagination.endIndex) {
|
||||
// return true;
|
||||
// }
|
||||
// return false;
|
||||
}
|
||||
|
||||
buildForm(): void {
|
||||
//this.form = this.qcs.toFormGroup(this.fields.
|
||||
|
||||
|
@ -244,6 +273,7 @@ export class DynamicFormComponent implements OnInit {
|
|||
}
|
||||
|
||||
setPage(page: number) {
|
||||
|
||||
if (page < 1 || page > this.pagination.totalPages) {
|
||||
return;
|
||||
}
|
||||
|
@ -253,22 +283,22 @@ export class DynamicFormComponent implements OnInit {
|
|||
|
||||
|
||||
//get current page of items
|
||||
this.dataModel.sections.forEach(section => {
|
||||
if(section.groupFields.length > 0){
|
||||
section.groupFields = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
|
||||
}
|
||||
});
|
||||
//this.dataModel.groups = this.dataModel.groups.slice(this.pager.startIndex, this.pager.endIndex + 1);
|
||||
// this.dataModel.sections.forEach(section => {
|
||||
// if (section.groupFields.length > 0) {
|
||||
// section.groupFields = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
|
||||
// }
|
||||
// });
|
||||
//this.dataModel.groups = this.dataModel.groups.slice(this.pagination.startIndex, this.pagination.endIndex + 1);
|
||||
}
|
||||
|
||||
signOut2() {
|
||||
var auth2 = gapi.auth2.getAuthInstance();
|
||||
auth2.signOut().then(function () {
|
||||
console.log('User signed out.');
|
||||
var auth2 = gapi.auth2.getAuthInstance();
|
||||
auth2.signOut().then(function () {
|
||||
console.log('User signed out.');
|
||||
localStorage.removeItem('currentUser');
|
||||
});
|
||||
});
|
||||
this.tokenService.setToken(null); //kanonika prepei na mpei mesa sthn function.....
|
||||
}
|
||||
}
|
||||
|
||||
onValueChanged(data?: any) {
|
||||
if (!this.form) { return; }
|
||||
|
|
|
@ -0,0 +1,5 @@
|
|||
.btncustom{
|
||||
background-color:#337ab7;
|
||||
color:white;
|
||||
margin-top:15px;
|
||||
}
|
|
@ -33,16 +33,16 @@
|
|||
<div>{{field.description}}</div>
|
||||
|
||||
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
|
||||
[required]="field.required" [pattern] = "field.regex" (ngModelChange) = "toggleVisibility($event, field)"> <!--input or change event
|
||||
[required]="field.required" [pattern] = "field.regex" (ngModelChange) = "toggleVisibility($event, field,false)"> <!--input or change event
|
||||
on change event the listener is triggered on blur -->
|
||||
|
||||
<select *ngSwitchCase="'dropdown'" class="form-control" [id]="field.key" [formControlName]="field.key" [required]="field.required">
|
||||
<option *ngFor="let opt of field.options" [value]="opt.key">{{opt.value}}</option>
|
||||
</select>
|
||||
|
||||
<input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [id]="field.key" [type]="field.type"
|
||||
(change)="toggleVisibility($event, field, ckb)" #ckb [required]="field.required" [checked] = "field.value"> <!--(change)="field.value = ckb.checked" has moved into the toggleVisibility
|
||||
// without property [checked] as pages change the checkboxes of the previous pages lose the checked pro -->
|
||||
<input *ngSwitchCase="'checkbox'" class="form-check" [formControlName]="field.key" [type]="field.type"
|
||||
(change)="toggleVisibility($event, field, true)" [required]="field.required" [checked]="form.get(field.key).value"> <!--(change)="field.value = ckb.checked" has moved into the toggleVisibility
|
||||
// without property [checked] as pages change the checkboxes of the previous pages lose the checked pro [checked] = "field.value" #ckb -->
|
||||
|
||||
|
||||
|
||||
|
@ -50,7 +50,7 @@
|
|||
<ng-container *ngFor="let answrBase of field.answers">
|
||||
<div style="display: inline-block;margin-right:10px;" [id]="field.key">
|
||||
<label for="{{answrBase.id}}" style="padding: 8px 10px; padding-right:5px;">{{answrBase.answer}}</label>
|
||||
<input type="radio" [formControlName]="field.key" [id]= "answrBase.id" [value]= "answrBase" [(ngModel)]="field.value" (change) = "toggleVisibility($event, field)" [required]="field.required"/>
|
||||
<input type="radio" [formControlName]="field.key" [id]= "answrBase.id" [value]= "answrBase.value" [(ngModel)]="field.value" (change) = "toggleVisibility($event, field,false)" [required]="field.required"/>
|
||||
</div>
|
||||
</ng-container>
|
||||
</div>
|
||||
|
|
|
@ -48,8 +48,9 @@ export class DynamicFormFieldComponent {
|
|||
if (dropdownField.attributes.sources != undefined)
|
||||
dropdownField.options = dropdownField.attributes.sources[0].params;
|
||||
}
|
||||
// this.toggleVisibility(null,this.field, null) to do
|
||||
|
||||
}
|
||||
this.toggleVisibility(null, this.field, this.field.controlType == "checkbox")
|
||||
|
||||
this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
|
||||
}
|
||||
|
@ -70,6 +71,7 @@ export class DynamicFormFieldComponent {
|
|||
}
|
||||
FieldValueRuleMethod(field, rule) { //fieldValue rule -- checks the value of target and apply rules, at the same time when the field becomes visible
|
||||
var targetField = this.dataModel.getFieldByKey(rule._target); //calling the AddvalidationRules we apply the validation rules for the new field
|
||||
var fieldValue = this.form.get(field.key).value;//to do: change field.value
|
||||
if (rule._ruleStyle == "range") {
|
||||
if (parseInt(rule._from) < parseInt(field.value) && parseInt(field.value) < parseInt(rule._to)) {
|
||||
console.log("visible" + field.value)
|
||||
|
@ -80,9 +82,9 @@ export class DynamicFormFieldComponent {
|
|||
}
|
||||
|
||||
}
|
||||
if (rule._ruleStyle == "boolean") { //boolean Decision field
|
||||
if (rule._ruleStyle == "boolean" && field.value !== undefined) { //boolean Decision field
|
||||
let ruleValue = rule.value.__text;
|
||||
if (field.value.value.toString() == ruleValue) {
|
||||
if (field.value.toString() == ruleValue) { //field.value.value.toString() == ruleValue
|
||||
targetField.visible = true;
|
||||
this.AddvalidationRules(rule._target);
|
||||
} else {
|
||||
|
@ -125,8 +127,10 @@ export class DynamicFormFieldComponent {
|
|||
}
|
||||
|
||||
toggleVisibility(e, field, ckb) { //ckb the checkbox only send this parameter, it's essential to change the field value
|
||||
if (ckb)
|
||||
field.value = ckb.checked;
|
||||
if (ckb){
|
||||
if(e) this.form.get(field.key).patchValue(e.target.checked)
|
||||
field.value = this.form.get(field.key).value;
|
||||
}
|
||||
if (field.rules.length != undefined && field.rules.length > 1)
|
||||
field.rules.forEach(rule => {
|
||||
if (rule._type == "fieldValue") {
|
||||
|
|
|
@ -5,7 +5,7 @@
|
|||
<div *ngFor="let group of dataModel.groups"> <!-- All contents in the first page -->
|
||||
<ul>
|
||||
<li>
|
||||
<a (click)='scrollToElemID(group.key, group.page)'>{{group.title}} {{group.page}}</a>
|
||||
<a (click)='scrollToElemID(group.key, group.page)'>{{group.title}}</a>
|
||||
<ul *ngFor="let field of group.groupFields">
|
||||
<li *ngIf="field.visible == 'true'">
|
||||
<a (click)='scrollToElemID(field.key)'>{{field.label}}</a>
|
||||
|
|
|
@ -16,7 +16,7 @@ export class TocComponent implements OnInit{
|
|||
private headers = new Array();
|
||||
|
||||
@Output()
|
||||
setPage:EventEmitter<string> = new EventEmitter();
|
||||
setPage:EventEmitter<number> = new EventEmitter();
|
||||
|
||||
ngOnInit(){
|
||||
var len = this.dataModel.groups.length; // I don't use headers , I use datamodel.groupfields
|
||||
|
@ -28,7 +28,7 @@ export class TocComponent implements OnInit{
|
|||
|
||||
scrollToElemID(elemID, page){
|
||||
console.log("going to id:"+elemID)
|
||||
this.setPage.emit(page);
|
||||
// this.setPage.emit(2);
|
||||
scroll("#"+elemID);
|
||||
}
|
||||
|
||||
|
|
|
@ -129,7 +129,8 @@ export class dataModelBuilder {
|
|||
newfldGroup.groupFields = new Array();
|
||||
fields.forEach(field => {
|
||||
if (fieldGroup._id == field.group) {
|
||||
if(dataValues[fieldGroup._id][field.key] != undefined)
|
||||
if(dataValues!="")
|
||||
if(dataValues[fieldGroup._id][field.key] != undefined) // to put values in fields
|
||||
field.value = dataValues[fieldGroup._id][field.key].value == undefined ? dataValues[fieldGroup._id][field.key] : dataValues[fieldGroup._id][field.key].value;
|
||||
newfldGroup.groupFields.push(field);
|
||||
} else {
|
||||
|
@ -142,6 +143,7 @@ export class dataModelBuilder {
|
|||
newfldGroup.section = fieldGroup._section;
|
||||
newfldGroup.style = fieldGroup.visible._style;
|
||||
newfldGroup.class = fieldGroup.visible._cssclass;
|
||||
newfldGroup.page = fieldGroup._page;
|
||||
groups.push(newfldGroup)
|
||||
});
|
||||
}
|
||||
|
|
|
@ -3,17 +3,6 @@ export class PaginationService {
|
|||
// calculate total pages
|
||||
let totalPages = Math.ceil(totalGroups / pageSize);
|
||||
|
||||
//each group get the number of its page for toc linking
|
||||
for (var x = 0; x < totalPages ; x++) {
|
||||
for (var i = 0; i < pageSize; i++) {
|
||||
if (x==0)
|
||||
groups[i].page = x+1;
|
||||
else
|
||||
groups[i+pageSize].page = x+1;
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
let startPage: number, endPage: number;
|
||||
if (totalPages <= 10) {
|
||||
|
|
Loading…
Reference in New Issue