diff --git a/dmp-frontend/src/app/datasets/dataset.html b/dmp-frontend/src/app/datasets/dataset.html index 490077f35..58dc1c8b5 100644 --- a/dmp-frontend/src/app/datasets/dataset.html +++ b/dmp-frontend/src/app/datasets/dataset.html @@ -52,10 +52,10 @@ {{dataset.id}} {{dataset?.label}} - {{dataset?.status}} {{dataset?.uri}} {{dataset?.profile?.label}} {{dataset?.description}} + {{dataset?.status}} diff --git a/dmp-frontend/src/app/form/dynamic-form.component.html b/dmp-frontend/src/app/form/dynamic-form.component.html index 4ff9f1b4e..e3a5665a6 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.html +++ b/dmp-frontend/src/app/form/dynamic-form.component.html @@ -2,12 +2,12 @@
-
-
-

{{section.title}}

-
- -
+
+
+

{{section.title}}

+
+ +

{{section.title}}

@@ -25,7 +25,8 @@
-->
- + +
@@ -44,7 +45,7 @@
- +
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts index e3142bb60..910d88a0c 100644 --- a/dmp-frontend/src/app/form/dynamic-form.component.ts +++ b/dmp-frontend/src/app/form/dynamic-form.component.ts @@ -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 { @@ -42,18 +43,18 @@ export class DynamicFormComponent implements OnInit { @Input() dirtyValues: number = 0; // pagination object @Input() pagination: any = {}; - id:string; - datasetId:string; + id: string; + datasetId: string; //datasetProperties:string; - + private fragment: string; xml2jsonOBJ: any; - + constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, - private route: ActivatedRoute, private pagerService: PaginationService, private tokenService : TokenService) { + private route: ActivatedRoute, private pagerService: PaginationService, private tokenService: TokenService) { this.form = this.qcs.toFormGroup(new Array(), new Array()); this.xml2jsonOBJ = new X2JS(); } @@ -70,18 +71,18 @@ export class DynamicFormComponent implements OnInit { //let id = this.route.snapshot.paramMap.get('id'); //get the project id - let sub = this.route.params.subscribe(params => { + let sub = this.route.params.subscribe(params => { this.id = params.id; this.datasetId = params.datasetId; //this.datasetProperties = params.datasetProperties - }); - + }); - this.serverService.getDatasetByID(this.datasetId).subscribe( + + this.serverService.getDatasetByID(this.datasetId).subscribe( (data) => { var flatList; - var formValues; - if(data.properties){ + var formValues = ""; + if (data.properties) { console.log("Found already submitted form, loading that one!"); //console.log(data.properties) @@ -94,101 +95,115 @@ export class DynamicFormComponent implements OnInit { //this.patchForm(flatList); } - //η κληση για το dataset profile pou htan prin pio panw anexarthth - this.serverService.getDatasetProfileByID(this.id).subscribe( - - response => { - - console.log("response"); - console.log(response); - - const data = response; - - //replace the xmls {model,view,rule} definitions with json -- https://github.com/abdmob/x2js library - data.definition = this.xml2jsonOBJ.xml_str2json(data.definition); - data.ruleset.definition = this.xml2jsonOBJ.xml_str2json(data.ruleset.definition); - data.viewstyle.definition = this.xml2jsonOBJ.xml_str2json(data.viewstyle.definition); - //can be converted back to xml (which shouldn't be needed) with this.xml2jsonOBJ.json2xml_str - - console.log("this.serverService.getFields"); - - console.log("data.dataset") - console.log(data.definition) - console.log(data.ruleset.definition) - console.log(data.viewstyle.definition) - - - this.dataModel = new DataModel(); - this.dataModel = this.dataModelService.getDataModel(data, formValues);debugger; - - this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups); - - this.form.valueChanges.subscribe(data => { - // console.log('Form changes', data); - let dirtyValuesArray: Array = []; - let count = 0; - let countDirtyValues = 0; - Object.keys(this.form.controls).forEach((c) => { - //count++; - let currentControl = this.form.controls[c]; - if (currentControl.dirty) - dirtyValuesArray.push(currentControl.value); - + //η κληση για το dataset profile pou htan prin pio panw anexarthth + this.serverService.getDatasetProfileByID(this.id).subscribe( + + response => { + + console.log("response"); + console.log(response); + + const data = response; + + //replace the xmls {model,view,rule} definitions with json -- https://github.com/abdmob/x2js library + data.definition = this.xml2jsonOBJ.xml_str2json(data.definition); + data.ruleset.definition = this.xml2jsonOBJ.xml_str2json(data.ruleset.definition); + data.viewstyle.definition = this.xml2jsonOBJ.xml_str2json(data.viewstyle.definition); + //can be converted back to xml (which shouldn't be needed) with this.xml2jsonOBJ.json2xml_str + + console.log("this.serverService.getFields"); + + console.log("data.dataset") + console.log(data.definition) + console.log(data.ruleset.definition) + console.log(data.viewstyle.definition) + + + this.dataModel = new DataModel(); + this.dataModel = this.dataModelService.getDataModel(data, formValues); debugger; + + this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups); + + this.form.valueChanges.subscribe(data => { + // console.log('Form changes', data); + let dirtyValuesArray: Array = []; + let count = 0; + let countDirtyValues = 0; + let percentage = 0; + Object.keys(this.form.controls).forEach((c) => { + //count++; + let currentControl = this.form.controls[c]; + if (currentControl.dirty) + 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++; - }); + + + }); + + + this.dataModel.groups.forEach(grp => { + grp.groupFields.forEach((fld) => { + if (fld.visible == true || fld.visible == "true") + count++; + // 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); - this.dirtyValues = percentage; - }) - - //this.form = this.qcs.toFormGroup(this.fields); - - console.log("SUMMARY: ======>"); - console.log(this.dataModel); - console.log(this.form); - - this.route.paramMap //this is how i get the projects's id - - // initialize to page 1 - this.setPage(1); - - }, - err => { - console.log("There was an error fetching the data from server"); - console.log(err); - } - ); - - //end- klhsh gia to dataset profiel + }); + //console.log(count); + // var percentage = Math.floor(dirtyValuesArray.length * 100 / count); + percentage = Math.floor(countDirtyValues * 100 / count); + this.dirtyValues = percentage; + }) + + //this.form = this.qcs.toFormGroup(this.fields); + + console.log("SUMMARY: ======>"); + console.log(this.dataModel); + console.log(this.form); + + this.route.paramMap //this is how i get the projects's id + + // initialize to page 1 + this.setPage(1); + + }, + err => { + console.log("There was an error fetching the data from server"); + console.log(err); + } + ); + + //end- klhsh gia to dataset profiel }, (err) => { - + }); - + } - scrollToElemID(elemID){ - scroll("#"+elemID); + scrollToElemID(elemID) { + scroll("#" + elemID); } - private patchForm(flatList : any){ - + 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; + if (prop.endsWith('.id') || prop.endsWith('.answer') || prop.endsWith('.value')) continue; //console.log("updating value of "+prop +" to "+flatList[prop].valueOf()) this.form.get(prop).setValue(flatList[prop].valueOf()); } @@ -207,23 +222,23 @@ export class DynamicFormComponent implements OnInit { onSubmit() { - - this.serverService.getDatasetByID(this.datasetId).subscribe( + + this.serverService.getDatasetByID(this.datasetId).subscribe( (data) => { //is xml, so transform them to xml (it's json) //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"); - - //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"); + + //VALE EDW NA SE PIGAINEI PISW KAI NA SOU VGAZEI ENA MHNYMA SUCCESS... (to success tha to valw egw an thes) }, - (err) => { - - }); + (err) => { + + }); }, (err) => { @@ -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,33 +273,34 @@ export class DynamicFormComponent implements OnInit { } setPage(page: number) { + if (page < 1 || page > this.pagination.totalPages) { - return; + return; } var pagesize = 3; // get pagination object from service - this.pagination = this.pagerService.getPagination(this.dataModel.groups,this.dataModel.groups.length, page, pagesize); - + this.pagination = this.pagerService.getPagination(this.dataModel.groups, this.dataModel.groups.length, page, pagesize); - // 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); - } + + //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.pagination.startIndex, this.pagination.endIndex + 1); + } + + signOut2() { + var auth2 = gapi.auth2.getAuthInstance(); + auth2.signOut().then(function () { + console.log('User signed out.'); + localStorage.removeItem('currentUser'); }); - //this.dataModel.groups = this.dataModel.groups.slice(this.pager.startIndex, this.pager.endIndex + 1); -} + this.tokenService.setToken(null); //kanonika prepei na mpei mesa sthn function..... + } -signOut2() { -     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) { + onValueChanged(data?: any) { if (!this.form) { return; } const form = this.form; diff --git a/dmp-frontend/src/app/form/dynamic-form.css b/dmp-frontend/src/app/form/dynamic-form.css new file mode 100644 index 000000000..21ef9b93a --- /dev/null +++ b/dmp-frontend/src/app/form/dynamic-form.css @@ -0,0 +1,5 @@ +.btncustom{ + background-color:#337ab7; + color:white; + margin-top:15px; +} \ No newline at end of file diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html index cb0700595..f54f1e29f 100644 --- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html +++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html @@ -33,16 +33,16 @@
{{field.description}}
- + @@ -50,7 +50,7 @@
- +
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts index 6392360a5..eb65e2988 100644 --- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts +++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts @@ -23,9 +23,9 @@ export class DynamicFormFieldComponent { constructor(private route: ActivatedRoute) { } - ngOnChanges(changeRecord) { - } - + ngOnChanges(changeRecord) { + } + get isValid() { return this.form.controls[this.field.key].valid; @@ -43,13 +43,14 @@ export class DynamicFormFieldComponent { public ngOnInit() { //dropdown lists take only one of the available sources for (var i = 0, len = this.dataModel.groups.length; i < len; i++) { let dropdownField: any; - dropdownField = this.dataModel.groups[i].groupFields.find(x => x.controlType == "dropdown"); + dropdownField = this.dataModel.groups[i].groupFields.find(x => x.controlType == "dropdown"); if (dropdownField != undefined) { 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 { @@ -121,12 +123,14 @@ export class DynamicFormFieldComponent { if (this.form.controls[rule._target].hasError("pattern")) this.form.controls[rule._target].reset(); //the regex error message didn't remove without field reset this.form.controls[rule._target].clearValidators(); // when a field is hidden must clear the validators and the errors - this.form.controls[rule._target].updateValueAndValidity(); + this.form.controls[rule._target].updateValueAndValidity(); } 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") { @@ -169,5 +173,5 @@ export class DynamicFormFieldComponent { }; } - + } \ No newline at end of file diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.html b/dmp-frontend/src/app/form/tableOfContents/toc.component.html index 851bb5570..e0793696d 100644 --- a/dmp-frontend/src/app/form/tableOfContents/toc.component.html +++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.html @@ -5,7 +5,7 @@
  • - {{group.title}} {{group.page}} + {{group.title}}
    • {{field.label}} diff --git a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts index e767efb6b..9a6035e82 100644 --- a/dmp-frontend/src/app/form/tableOfContents/toc.component.ts +++ b/dmp-frontend/src/app/form/tableOfContents/toc.component.ts @@ -16,7 +16,7 @@ export class TocComponent implements OnInit{ private headers = new Array(); @Output() - setPage:EventEmitter = new EventEmitter(); + setPage:EventEmitter = 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); } diff --git a/dmp-frontend/src/app/services/dataModelBuilder.service.ts b/dmp-frontend/src/app/services/dataModelBuilder.service.ts index 7ef9cf1a1..88f99e43e 100644 --- a/dmp-frontend/src/app/services/dataModelBuilder.service.ts +++ b/dmp-frontend/src/app/services/dataModelBuilder.service.ts @@ -122,15 +122,16 @@ export class dataModelBuilder { private getGroups(fieldGroups: any, fields: any[] , dataValues) { let groups: GroupBase[] = []; - + if (fieldGroups.length > 1) { fieldGroups.forEach(fieldGroup => { // each fiedgroup fills with its fields from json let newfldGroup = new GroupBase(); newfldGroup.groupFields = new Array(); fields.forEach(field => { if (fieldGroup._id == field.group) { - if(dataValues[fieldGroup._id][field.key] != undefined) - field.value = dataValues[fieldGroup._id][field.key].value == undefined ? dataValues[fieldGroup._id][field.key] : dataValues[fieldGroup._id][field.key].value; + 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 { //this.dataModel.fields.push(field); @@ -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) }); } diff --git a/dmp-frontend/src/app/services/pagination.service.ts b/dmp-frontend/src/app/services/pagination.service.ts index 3e36abb98..a7d5385c5 100644 --- a/dmp-frontend/src/app/services/pagination.service.ts +++ b/dmp-frontend/src/app/services/pagination.service.ts @@ -1,18 +1,7 @@ export class PaginationService { getPagination(groups, totalGroups: number, currentPage: number = 1, pageSize: number = 3) { // 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 totalPages = Math.ceil(totalGroups / pageSize); let startPage: number, endPage: number;