MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

Merge branch 'master' of git@gitlab.eudat.eu:dmp/OpenAIRE-EUDAT-DMP-service-pilot.git

This commit is contained in:
Nikolaos Laskaris 2017-10-12 15:04:57 +03:00
parent c23eb7dca3 74c7b083e6
commit c795b030ee
9 changed files with 158 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
dmp-frontend/src/app/app-routing.module.ts
View File

@ -17,7 +17,9 @@ const appRoutes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(
appRoutes)
appRoutes
// { enableTracing: true } // <-- debugging purposes only
)
],
exports: [
RouterModule

3
dmp-frontend/src/app/app.module.ts
View File

@ -18,6 +18,7 @@ import { AuthGuard } from './guards/auth.guard';
import { PageNotFoundComponent } from './not-found.component';
import { TocComponent } from './form/tableOfContents/toc.component';
import { ProjectsModule } from './projects/project.module';
import { PaginationService } from './services/pagination.service';
@NgModule({
declarations: [
@ -40,7 +41,7 @@ import { ProjectsModule } from './projects/project.module';
AppRoutingModule
],
providers: [ServerService, dataModelBuilder, AuthGuard],
providers: [ServerService, dataModelBuilder, AuthGuard, PaginationService],
bootstrap: [AppComponent]
})
export class AppModule {

21
dmp-frontend/src/app/form/dynamic-form.component.html
View File

@ -47,7 +47,26 @@
</div>
<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 class="panel-footer">
<div class="progress">

43
dmp-frontend/src/app/form/dynamic-form.component.ts
View File

@ -10,7 +10,7 @@ import { ServerService } from '../../app/services/server.service';
import { dataModelBuilder } from '../../app/services/dataModelBuilder.service';
import { DataModel } from '../entities/DataModel';
import { GroupBase } from './dynamic-form-group/group-base';
import { PaginationService } from '../../app/services/pagination.service';
@Component({
selector: 'dynamic-form',
@ -23,8 +23,13 @@ export class DynamicFormComponent implements OnInit {
form: FormGroup;
payLoad = '';
@Input() dirtyValues: number = 0;
// pagination object
@Input() pagination: any = {};
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router, private route: ActivatedRoute) {
private fragment: string;
constructor(private qcs: FieldControlService, private serverService: ServerService, private dataModelService: dataModelBuilder, private router: Router,
private route: ActivatedRoute, private pagerService: PaginationService) {
this.form = this.qcs.toFormGroup(new Array(), new Array());
}
@ -36,6 +41,8 @@ export class DynamicFormComponent implements OnInit {
ngOnInit() {
this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
console.log("DynamicFormComponent.ngOnInit() -- RUNNIGN");
let id = this.route.snapshot.paramMap.get('id'); //get the project id
@ -51,7 +58,7 @@ export class DynamicFormComponent implements OnInit {
this.form = this.qcs.toFormGroup(this.dataModel.fields, this.dataModel.groups);
this.form.valueChanges.subscribe(data => {
// console.log('Form changes', data);
// console.log('Form changes', data);
let dirtyValuesArray: Array<any> = [];
let count = 0;
let countDirtyValues = 0;
@ -66,12 +73,12 @@ export class DynamicFormComponent implements OnInit {
grp.groupFields.forEach((fld) => {
if (fld.visible == true || fld.visible == "true")
count++;
if(fld.value != undefined)
if (fld.value != undefined)
countDirtyValues++;
});
});
//console.log(count);
// var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
// var percentage = Math.floor(dirtyValuesArray.length * 100 / count);
var percentage = Math.floor(countDirtyValues * 100 / count);
this.dirtyValues = percentage;
})
@ -83,12 +90,21 @@ export class DynamicFormComponent implements OnInit {
console.log(this.form);
this.route.paramMap //this is how i get the projects's id
// initialize to page 1
this.setPage(1);
},
(error) => console.log(error)
);
}
ngAfterViewChecked(): void { //navigate to certain section of the page
try {
document.querySelector('#' + this.fragment).scrollIntoView();
} catch (e) { }
}
onSubmit() {
this.payLoad = JSON.stringify(this.form.value);
}
@ -103,6 +119,23 @@ export class DynamicFormComponent implements OnInit {
this.onValueChanged(); // (re)set validation messages now
}
setPage(page: number) {
if (page < 1 || page > this.pagination.totalPages) {
return;
}
// get pagination object from service
this.pagination = this.pagerService.getPagination(this.dataModel.groups.length, page);
// 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);
}
onValueChanged(data?: any) {
debugger;
if (!this.form) { return; }

7
dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
View File

@ -35,18 +35,19 @@
<input *ngSwitchCase="'textbox'" class="form-control" [formControlName]="field.key" [id]="field.key" [type]="field.type"
[(ngModel)]="field.value" [required]="field.required" [pattern] = "field.regex" (blur) = "toggleVisibility($event, field)">
<select [id]="field.key" *ngSwitchCase="'dropdown'" class="form-control" [formControlName]="field.key" [(ngModel)]="field.value" [required]="field.required">
<select *ngSwitchCase="'dropdown'" class="form-control" [id]="field.key" [formControlName]="field.key" [(ngModel)]="field.value" [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" [(ngModel)]="field.value" [id]="field.key" [type]="field.type"
(change)="toggleVisibility($event, field, ckb)" #ckb [required]="field.required"> <!--(change)="field.value = ckb.checked"-->
(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 -->
<div *ngSwitchCase="'radiobox'">
<ng-container *ngFor="let answrBase of field.answers">
<div style="display: inline-block;margin-right:10px;">
<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"/>
</div>

12
dmp-frontend/src/app/form/fields/dynamic-form-field.component.ts
View File

@ -1,6 +1,7 @@
import { DataModel } from '../../entities/DataModel';
import { Component, Input, OnInit } from '@angular/core';
import { FormGroup, ValidatorFn, AbstractControl, Validators } from '@angular/forms';
import { ActivatedRoute} from '@angular/router';
import { FieldBase } from './field-base';
import { GroupBase } from '../../form/dynamic-form-group/group-base';
@ -18,6 +19,10 @@ export class DynamicFormFieldComponent {
@Input() field: FieldBase<any>;
@Input() form: FormGroup;
private fragment: string;
constructor (private route: ActivatedRoute){}
get isValid() {
return this.form.controls[this.field.key].valid;
}
@ -41,8 +46,15 @@ export class DynamicFormFieldComponent {
}
}
this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); //navigate to certain section of the page
}
ngAfterViewChecked(): void { //navigate to certain section of the page
try {
document.querySelector('#' + this.fragment).scrollIntoView();
} catch (e) { }
}
ruleVisibleMethod(field, rule, dataModel) { //visibility rule -- checks if target field is visible
dataModel.fields.forEach(fld => {
if (fld.label == rule._target && fld.visible == true)

27
dmp-frontend/src/app/form/tableOfContents/toc.component.html
View File

@ -2,12 +2,29 @@
<nav id="toc" data-toggle="toc">
<ul class="nav flex-column">
<li class="nav-item">
<div *ngFor="let group of dataModel.groups">
<div *ngFor="let section of dataModel.sections">
<div *ngFor="let group of section.groupFields">
<ul>
<li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
<ul *ngFor="let field of group.groupFields">
<li *ngIf="field.visible == 'true'">
<a class="nav-link" [routerLink]="['.']" fragment="{{field.key}}">{{field.label}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- <div *ngFor="let group of dataModel.groups">
<ul>
<li><a class="nav-link" href="#{{group.key}}">{{group.title}}</a>
<li><a class="nav-link" [routerLink]="['.']" fragment="{{group.key}}">{{group.title}}</a>
<ul *ngFor="let field of group.groupFields">
<li *ngIf= "field.visible == 'true'" >
<a class="nav-link" href="#field.key">{{field.label}}</a>
<li *ngIf="field.visible == 'true'">
<a class="nav-link" href="#field.key">{{field.label}}</a>
</li>
</ul>
</li>
@ -15,7 +32,7 @@
</ul>
</div>
</div> -->

47
dmp-frontend/src/app/services/pagination.service.ts Normal file
View File

@ -0,0 +1,47 @@
export class PaginationService {
getPagination(totalGroups: number, currentPage: number = 1, pageSize: number = 3) {
// calculate total pages
let totalPages = Math.ceil(totalGroups / pageSize);
let startPage: number, endPage: number;
if (totalPages <= 10) {
// less than 10 total pages so show all
startPage = 1;
endPage = totalPages;
} else {
// more than 10 total pages so calculate start and end pages
if (currentPage <= 6) {
startPage = 1;
endPage = 10;
} else if (currentPage + 4 >= totalPages) {
startPage = totalPages - 9;
endPage = totalPages;
} else {
startPage = currentPage - 5;
endPage = currentPage + 4;
}
}
// calculate start and end item indexes
let startIndex = (currentPage - 1) * pageSize;
let endIndex = Math.min(startIndex + pageSize - 1, totalGroups - 1);
// create an array of pages to ng-repeat in the pagination control
let pages = [];
for (var i = 1; i <endPage + 1; i++)
pages.push(i);
// return object with all pagination properties required by the view
return {
totalGroups: totalGroups,
currentPage: currentPage,
pageSize: pageSize,
totalPages: totalPages,
startPage: startPage,
endPage: endPage,
startIndex: startIndex,
endIndex: endIndex,
pages: pages
};
}
}

4
dmp-frontend/src/styles.css
View File

@ -66,3 +66,7 @@ body {
border: 2px solid #A11515;
}
.cursor-link{
cursor: pointer;
}