Altitude/AltitudeWeb
5
0
Fork 0
Code Issues 12 Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination handling with pageSize and pageChange EventEmitter

Browse Source 
Introduced `pageSize` in `bans.component.ts` to manage pagination logic and updated `buttonActive` to account for page size constraints. Added `pageChange` EventEmitter in `history.component.ts` to notify the parent component of page changes. Updated the template to bind `pageChange` for dynamic page size updates.
This commit is contained in:
Teriuihi 2025-04-12 22:11:40 +02:00
parent d535dd1ba9
commit a5adb031bd
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/app/bans/bans.component.html
View File

@ -48,7 +48,8 @@
</div> </div>
<div class="historyTable"> <div class="historyTable">
<app-history [userType]="userType" [punishmentType]="punishmentType" <app-history [userType]="userType" [punishmentType]="punishmentType"
[page]="page" [searchTerm]="finalSearchTerm"></app-history> [page]="page" [searchTerm]="finalSearchTerm" (pageChange)="pageSize = $event">
</app-history>
</div> </div>
<div class="changePageButtons"> <div class="changePageButtons">
<button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)" <button [ngClass]="{'active': buttonActive(0)}" [disabled]="!buttonActive(0)"

5
frontend/src/app/bans/bans.component.ts
View File

@ -40,6 +40,7 @@ export class BansComponent implements OnInit {
public finalSearchTerm: string = ''; public finalSearchTerm: string = '';
public searchTerm: string = ''; public searchTerm: string = '';
public filteredNames: string[] = []; public filteredNames: string[] = [];
public pageSize = 0;
public historyCount: HistoryCount = { public historyCount: HistoryCount = {
bans: 0, bans: 0,
mutes: 0, mutes: 0,
@ -153,7 +154,9 @@ export class BansComponent implements OnInit {
} }
public buttonActive(compare: number): boolean { public buttonActive(compare: number): boolean {
if (compare !== 0 && this.pageSize < this.PAGE_SIZE) {
return false;
}
return this.page !== compare; return this.page !== compare;
} }
} }

5
frontend/src/app/bans/history/history.component.ts
View File

@ -1,4 +1,4 @@
import {Component, Input, OnChanges, OnInit} from '@angular/core'; import {Component, EventEmitter, Input, OnChanges, OnInit, Output} from '@angular/core';
import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api'; import {BASE_PATH, HistoryService, PunishmentHistoryInner} from '../../../api';
import {map, Observable, shareReplay} from 'rxjs'; import {map, Observable, shareReplay} from 'rxjs';
import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common'; import {NgForOf, NgIf, NgOptimizedImage} from '@angular/common';
@ -25,6 +25,8 @@ export class HistoryComponent implements OnInit, OnChanges {
@Input() page: number = 0; @Input() page: number = 0;
@Input() searchTerm: string = ''; @Input() searchTerm: string = '';
@Output() pageChange = new EventEmitter<number>();
private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/; private uuidRegex = /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$/;
public history: PunishmentHistoryInner[] = [] public history: PunishmentHistoryInner[] = []
@ -34,6 +36,7 @@ export class HistoryComponent implements OnInit, OnChanges {
ngOnChanges(): void { ngOnChanges(): void {
this.reloadHistory(); this.reloadHistory();
this.pageChange.emit(this.page);
} }
ngOnInit(): void { ngOnInit(): void {