Refactor pagination and fix password modal icons

Refactored transaction logs pagination by converting pagedItems to a getter and removing redundant state and methods. Fixed the password visibility toggle icons in the reset password modal and removed the minLength error message from the new password field.
mazdak/UX-2369
Mazdak Gibran 5 days ago
parent 8fd3b984aa
commit 1cb475cb9a

@ -193,7 +193,7 @@
</tr>
</thead>
<tbody>
<tr *ngFor="let log of filteredItems | tableFilter: searchText: [
<tr *ngFor="let log of pagedItems | tableFilter: searchText: [
'logId',
'porOrgacode',
'transactionID',

@ -29,7 +29,6 @@ export class TransactionLogsComponent implements OnInit, OnDestroy {
itemsPerPage: number = 10;
transactionLog: TransactionLog[] = [];
isLoading = false;
pagedItems: any[] = [];
errorMessage: string = '';
searchText: string = '';
allItems: TransactionLog[] = [];
@ -134,8 +133,7 @@ export class TransactionLogsComponent implements OnInit, OnDestroy {
} else {
this.totalCount = this.transactionLog.length;
}
this.updatePagedItems();
this.isLoading = false;
},
error: (err) => {
@ -144,7 +142,6 @@ export class TransactionLogsComponent implements OnInit, OnDestroy {
this.transactionLog = [];
this.allItems = [];
this.totalCount = 0;
this.pagedItems = [];
this.isLoading = false;
},
complete: () => {
@ -252,8 +249,9 @@ export class TransactionLogsComponent implements OnInit, OnDestroy {
}
totalPages(): number {
return Math.ceil(this.totalCount / this.itemsPerPage);
}
if (this.totalCount === 0) return 1;
return Math.ceil(this.totalCount / this.itemsPerPage);
}
previousPage(): void {
if (this.currentPage > 1) {
@ -262,14 +260,6 @@ export class TransactionLogsComponent implements OnInit, OnDestroy {
}
}
updatePagedItems(): void {
// For client-side display with table filter pipe
const startIndex = (this.currentPage - 1) * this.itemsPerPage;
const endIndex = startIndex + this.itemsPerPage;
this.pagedItems = this.allItems.slice(startIndex, endIndex);
}
nextPage(): void {
if (this.currentPage < this.totalPages()) {
this.currentPage++;
@ -341,4 +331,10 @@ export class TransactionLogsComponent implements OnInit, OnDestroy {
get isDateFilterActive(): boolean {
return !!this.fromDate || !!this.toDate;
}
get pagedItems(): TransactionLog[] {
const start = (this.currentPage - 1) * this.itemsPerPage;
return this.allItems.slice(start, start + this.itemsPerPage);
}
}

@ -58,8 +58,8 @@
(click)="togglePasswordType()"
[attr.disabled]="isSubmitting ? true : null"
>
<i class="fas" [class.fa-eye]="newPasswordType === 'password'"
[class.fa-eye-slash]="newPasswordType === 'text'"></i>
<i class="fas" [class.fa-eye]="newPasswordType === 'text'"
[class.fa-eye-slash]="newPasswordType === 'password'"></i>
</button>
</div>
@ -68,10 +68,7 @@
<div *ngIf="resetPasswordForm.get('newPassword')?.hasError('required')">
{{ 'fieldRequired' | translate }}
</div>
<div *ngIf="resetPasswordForm.get('newPassword')?.hasError('minlength')">
{{ 'passwordMinLength' | translate }}
</div>
<div *ngIf="resetPasswordForm.get('newPassword')?.hasError('maxlength')">
<div *ngIf="resetPasswordForm.get('newPassword')?.hasError('maxlength')">
{{ 'passwordMaxLength' | translate }}
</div>
<div *ngIf="resetPasswordForm.get('newPassword')?.hasError('pattern')">
@ -105,8 +102,8 @@
(click)="toggleConfirmPasswordType()"
[attr.disabled]="isSubmitting ? true : null"
>
<i class="fas" [class.fa-eye]="confirmPasswordType === 'password'"
[class.fa-eye-slash]="confirmPasswordType === 'text'"></i>
<i class="fas" [class.fa-eye]="confirmPasswordType === 'text'"
[class.fa-eye-slash]="confirmPasswordType === 'password'"></i>
</button>
</div>

Loading…
Cancel
Save