nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-1451: Add input field to pagination component (#1341) 

* TSK-1451: add input field

* TSK-1451: update
This commit is contained in:
Franzi321 2020-11-16 21:29:11 +01:00 committed by GitHub
parent b4d0e0c947
commit 6b1443fdfb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/src/app/shared/components/pagination/pagination.component.html
View File

@ -3,9 +3,12 @@
<div class="pagination__go-to">
<div class="pagination__go-to-label">Page: </div>
<mat-form-field>
<mat-select [(ngModel)]="pageSelected" (selectionChange)="goToPage(pageSelected)">
<mat-option *ngFor="let pageNumber of pageNumbers" [value]="pageNumber">{{ pageNumber }}</mat-option>
</mat-select>
<input #inputTypeAhead matInput type="text" [matAutocomplete]="auto" [(ngModel)]="value" name="accessId"
(ngModelChange)="filter(value)"/>
<mat-autocomplete #autoComplete autoActiveFirstOption (optionSelected)="goToPage($event.option.value)"
#auto="matAutocomplete">
<mat-option *ngFor="let pageNumber of filteredPages" [value]="pageNumber">{{ pageNumber }}</mat-option>
</mat-autocomplete>
</mat-form-field>
</div>
</div>
</div>

8
web/src/app/shared/components/pagination/pagination.component.ts
View File

@ -26,6 +26,8 @@ export class PaginationComponent implements OnInit, OnChanges {
hasItems = true;
pageSelected = 1;
pageNumbers: number[];
filteredPages: string[] = [];
value: number;
ngOnInit() {
// Custom label: EG. "1-7 of 21 workbaskets"
@ -42,6 +44,7 @@ export class PaginationComponent implements OnInit, OnChanges {
return `${start} - ${end} of ${length}`;
}
};
this.value = 1;
}
ngOnChanges(changes: SimpleChanges): void {
if (changes.page && changes.page.currentValue) {
@ -75,4 +78,9 @@ export class PaginationComponent implements OnInit, OnChanges {
this.pageSelected = page;
this.changePage.emit(page);
}
filter(filterVal) {
const filterValue = filterVal.toString();
this.filteredPages = this.pageNumbers.map(String).filter((value) => value.includes(filterValue));
}
}