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

Toc navigate to the same page, pagination cursor

This commit is contained in:
annampak 2017-10-10 17:10:00 +03:00
parent 996491cebe
commit bb98e7cfcf
7 changed files with 62 additions and 20 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

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

@ -48,24 +48,22 @@
<div class="text-center">
<p>Angular 2 - Pagination Example with logic like Google</p>
<!-- pagination -->
<ul *ngIf="pagination.pages && pagination.pages.length" class="pagination">
<li [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="setPage(1)">First</a>
<a (click)="setPage(1)" class="cursor-link" >First</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === 1}">
<a (click)="setPage(pagination.currentPage - 1)">Previous</a>
<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)">{{page}}</a>
<a (click)="setPage(page)" class="cursor-link">{{page}}</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.currentPage + 1)">Next</a>
<a (click)="setPage(pagination.currentPage + 1)" class="cursor-link">Next</a>
</li>
<li [ngClass]="{disabled:pagination.currentPage === pagination.totalPages}">
<a (click)="setPage(pagination.totalPages)">Last</a>
<a (click)="setPage(pagination.totalPages)" class="cursor-link">Last</a>
</li>
</ul>
</div>

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

@ -23,10 +23,11 @@ export class DynamicFormComponent implements OnInit {
form: FormGroup;
payLoad = '';
@Input() dirtyValues: number = 0;
// pagination object
@Input() pagination: any = {};
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());
@ -40,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
@ -96,6 +99,12 @@ export class DynamicFormComponent implements OnInit {
}
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);
}

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

@ -46,7 +46,7 @@
<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)

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

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

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

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