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

dmp-frontend/src/app/app-routing.module.ts

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

dmp-frontend/src/app/app.module.ts

@@ -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 {

dmp-frontend/src/app/form/dynamic-form.component.html

@@ -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">

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -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,11 +58,11 @@ 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;
-          Object.keys(this.form.controls).forEach((c) => {          
+          Object.keys(this.form.controls).forEach((c) => {
             //count++;
             let currentControl = this.form.controls[c];
             if (currentControl.dirty)
@@ -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; }

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

@@ -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>

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

@@ -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)

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

@@ -2,25 +2,42 @@
     <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'" >                                       
+                                <li *ngIf="field.visible == 'true'">
-                                      <a class="nav-link"  href="#field.key">{{field.label}}</a>
+                                    <a class="nav-link" href="#field.key">{{field.label}}</a>
-                                </li> 
+                                </li>
                             </ul>
                         </li>
 
                     </ul>
-                        
-                        
-                </div>               
 
-                        
+
+                </div> -->
+
+
 
 
             </li>
         </ul>
     </nav>
-</body>
+</body>

dmp-frontend/src/app/services/pagination.service.ts

@@ -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
+        };
+    }
+}

dmp-frontend/src/styles.css

@@ -65,4 +65,8 @@ body {
    .form-groupCustom {
     border: 2px solid #A11515;
   } 
+
+  .cursor-link{
+    cursor: pointer;
+  }