Added paginator to the home page

This commit is contained in:
Isaac Abadi
2020-12-05 03:40:59 -05:00
parent 1542436e96
commit bb18e1427e
2 changed files with 19 additions and 5 deletions

View File

@@ -30,8 +30,8 @@
<div> <div>
<div class="container"> <div class="container">
<div class="row justify-content-center"> <div class="row justify-content-center">
<ng-container *ngIf="normal_files_received"> <ng-container *ngIf="normal_files_received && paged_data">
<div *ngFor="let file of filtered_files; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]"> <div *ngFor="let file of paged_data; let i = index" class="mb-2 mt-2 d-flex justify-content-center" [ngClass]="[ postsService.card_size === 'small' ? 'col-2 small-col' : '', postsService.card_size === 'medium' ? 'col-6 col-lg-4 medium-col' : '', postsService.card_size === 'large' ? 'col-12 large-col' : '' ]">
<app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? '?jwt=' + this.postsService.token : ''"></app-unified-file-card> <app-unified-file-card [index]="i" [card_size]="postsService.card_size" [locale]="postsService.locale" (goToFile)="goToFile($event)" (goToSubscription)="goToSubscription($event)" [file_obj]="file" [use_youtubedl_archive]="postsService.config['Downloader']['use_youtubedl_archive']" [loading]="false" (deleteFile)="deleteFile($event)" [baseStreamPath]="postsService.path" [jwtString]="postsService.isLoggedIn ? '?jwt=' + this.postsService.token : ''"></app-unified-file-card>
</div> </div>
</ng-container> </ng-container>
@@ -42,4 +42,9 @@
</ng-container> </ng-container>
</div> </div>
</div> </div>
<mat-paginator *ngIf="paged_data && paged_data.length > 0" (page)="pageChangeEvent($event)" [length]="100"
[pageSize]="10"
[pageSizeOptions]="[5, 10, 25, 100, this.paged_data && this.paged_data.length > 100 ? this.paged_data.length : 250]">
</mat-paginator>
</div> </div>

View File

@@ -50,6 +50,8 @@ export class RecentVideosComponent implements OnInit {
}; };
filterProperty = this.filterProperties['upload_date']; filterProperty = this.filterProperties['upload_date'];
paged_data = null;
constructor(public postsService: PostsService, private router: Router) { constructor(public postsService: PostsService, private router: Router) {
// get cached file count // get cached file count
if (localStorage.getItem('cached_file_count')) { if (localStorage.getItem('cached_file_count')) {
@@ -133,6 +135,8 @@ export class RecentVideosComponent implements OnInit {
localStorage.setItem('cached_file_count', '' + this.files.length); localStorage.setItem('cached_file_count', '' + this.files.length);
this.normal_files_received = true; this.normal_files_received = true;
this.paged_data = this.filtered_files.slice(0, 10);
}); });
} }
@@ -280,9 +284,14 @@ export class RecentVideosComponent implements OnInit {
durationStringToNumber(dur_str) { durationStringToNumber(dur_str) {
let num_sum = 0; let num_sum = 0;
const dur_str_parts = dur_str.split(':'); const dur_str_parts = dur_str.split(':');
for (let i = dur_str_parts.length-1; i >= 0; i--) { for (let i = dur_str_parts.length - 1; i >= 0; i--) {
num_sum += parseInt(dur_str_parts[i])*(60**(dur_str_parts.length-1-i)); num_sum += parseInt(dur_str_parts[i]) * (60 ** (dur_str_parts.length - 1 - i));
} }
return num_sum; return num_sum;
} }
pageChangeEvent(event) {
const offset = ((event.pageIndex + 1) - 1) * event.pageSize;
this.paged_data = this.filtered_files.slice(offset).slice(0, event.pageSize);
}
} }