feat: add current accounts list module with redesigned UI
- New accounts module with list, routing, and service - Redesigned accounts-list UI with modern card layout, status badges, and action buttons - Fixed totalRecords formatting (removed formatNumber pipe from integer count) - Register accounts module in app.module and shell navigation Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Jaanu423
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
43bab670a0
commit
45d4397b0e
@@ -0,0 +1,327 @@
|
||||
/**
|
||||
* Copyright since 2025 Mifos Initiative
|
||||
*
|
||||
* This Source Code Form is subject to the terms of the Mozilla Public
|
||||
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
* file, You can obtain one at http://mozilla.org/MPL/2.0/.
|
||||
*/
|
||||
|
||||
import { Component, OnInit, OnDestroy, ViewChild, inject } from '@angular/core';
|
||||
import { ActivatedRoute, Router } from '@angular/router';
|
||||
import { FormControl, ReactiveFormsModule } from '@angular/forms';
|
||||
import { MatPaginator, PageEvent } from '@angular/material/paginator';
|
||||
import { MatSort, MatSortHeader, Sort } from '@angular/material/sort';
|
||||
import {
|
||||
MatTableDataSource,
|
||||
MatTable,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow
|
||||
} from '@angular/material/table';
|
||||
import { Subject } from 'rxjs';
|
||||
import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
|
||||
import { NgClass, NgIf } from '@angular/common';
|
||||
import { FaIconComponent } from '@fortawesome/angular-fontawesome';
|
||||
import { MatCardModule } from '@angular/material/card';
|
||||
import { MatTooltipModule } from '@angular/material/tooltip';
|
||||
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { FormatNumberPipe } from '../../pipes/format-number.pipe';
|
||||
import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
|
||||
import { AccountsService } from '../accounts.service';
|
||||
|
||||
export type AccountType = 'savings' | 'current' | 'fixed-deposits' | 'recurring-deposits';
|
||||
|
||||
interface AccountConfig {
|
||||
label: string;
|
||||
icon: string;
|
||||
color: string;
|
||||
accentClass: string;
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'mifosx-accounts-list',
|
||||
templateUrl: './accounts-list.component.html',
|
||||
styleUrls: ['./accounts-list.component.scss'],
|
||||
standalone: true,
|
||||
imports: [
|
||||
...STANDALONE_SHARED_IMPORTS,
|
||||
ReactiveFormsModule,
|
||||
FaIconComponent,
|
||||
MatTable,
|
||||
MatSort,
|
||||
MatSortHeader,
|
||||
MatColumnDef,
|
||||
MatHeaderCellDef,
|
||||
MatHeaderCell,
|
||||
MatCellDef,
|
||||
MatCell,
|
||||
MatHeaderRowDef,
|
||||
MatHeaderRow,
|
||||
MatRowDef,
|
||||
MatRow,
|
||||
MatPaginator,
|
||||
NgClass,
|
||||
NgIf,
|
||||
MatCardModule,
|
||||
MatTooltipModule,
|
||||
MatProgressSpinnerModule,
|
||||
MatButtonModule,
|
||||
FormatNumberPipe
|
||||
]
|
||||
})
|
||||
export class AccountsListComponent implements OnInit, OnDestroy {
|
||||
private route = inject(ActivatedRoute);
|
||||
private router = inject(Router);
|
||||
private accountsService = inject(AccountsService);
|
||||
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
accountType: AccountType = 'savings';
|
||||
displayedColumns = [
|
||||
'accountNo',
|
||||
'depositType',
|
||||
'clientName',
|
||||
'productName',
|
||||
'balance',
|
||||
'status',
|
||||
'actions'
|
||||
];
|
||||
dataSource = new MatTableDataSource<any>([]);
|
||||
|
||||
totalRecords = 0;
|
||||
pageSize = 20;
|
||||
pageIndex = 0;
|
||||
isLoading = false;
|
||||
|
||||
searchControl = new FormControl('');
|
||||
searchType: 'accountNo' | 'clientName' = 'accountNo';
|
||||
|
||||
@ViewChild(MatPaginator) paginator!: MatPaginator;
|
||||
@ViewChild(MatSort) sort!: MatSort;
|
||||
|
||||
readonly configs: Record<AccountType, AccountConfig> = {
|
||||
savings: { label: 'Savings Accounts', icon: 'piggy-bank', color: '#1976d2', accentClass: 'accent--saving' },
|
||||
current: { label: 'Current Accounts', icon: 'building', color: '#00796b', accentClass: 'accent--current' },
|
||||
'fixed-deposits': {
|
||||
label: 'Fixed Deposit Accounts',
|
||||
icon: 'lock',
|
||||
color: '#6a1b9a',
|
||||
accentClass: 'accent--fd'
|
||||
},
|
||||
'recurring-deposits': {
|
||||
label: 'Recurring Deposit Accounts',
|
||||
icon: 'sync',
|
||||
color: '#e65100',
|
||||
accentClass: 'accent--rd'
|
||||
}
|
||||
};
|
||||
|
||||
get config(): AccountConfig {
|
||||
return this.configs[this.accountType];
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
this.route.data.pipe(takeUntil(this.destroy$)).subscribe((data) => {
|
||||
this.accountType = data['accountType'] as AccountType;
|
||||
this.pageIndex = 0;
|
||||
this.searchControl.setValue('', { emitEvent: false });
|
||||
this.loadAccounts();
|
||||
});
|
||||
|
||||
this.searchControl.valueChanges
|
||||
.pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
|
||||
.subscribe(() => {
|
||||
this.pageIndex = 0;
|
||||
this.loadAccounts();
|
||||
});
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
loadAccounts() {
|
||||
this.isLoading = true;
|
||||
const search = (this.searchControl.value || '').trim();
|
||||
const params = {
|
||||
offset: this.pageIndex * this.pageSize,
|
||||
limit: this.pageSize,
|
||||
accountNo: this.searchType === 'accountNo' ? search : undefined,
|
||||
clientName: this.searchType === 'clientName' ? search : undefined
|
||||
};
|
||||
|
||||
const obs$ =
|
||||
this.accountType === 'savings'
|
||||
? this.accountsService.getSavingsAccounts(params)
|
||||
: this.accountType === 'current'
|
||||
? this.accountsService.getCurrentAccounts(params)
|
||||
: this.accountType === 'fixed-deposits'
|
||||
? this.accountsService.getFixedDepositAccounts(params)
|
||||
: this.accountsService.getRecurringDepositAccounts(params);
|
||||
|
||||
obs$.pipe(takeUntil(this.destroy$)).subscribe({
|
||||
next: (res) => {
|
||||
let items: any[] = Array.isArray(res) ? res : (res?.pageItems ?? []);
|
||||
|
||||
// Client-side deposit type filter (safety net until backend rebuild)
|
||||
const depositTypeFilter = this.getDepositTypeId();
|
||||
if (depositTypeFilter !== null) {
|
||||
items = items.filter((a: any) => a?.depositType?.id === depositTypeFilter);
|
||||
}
|
||||
|
||||
// Client-side search fallback (for when backend search isn't rebuilt yet)
|
||||
const searchTerm = (this.searchControl.value || '').trim().toLowerCase();
|
||||
if (searchTerm) {
|
||||
items = items.filter((a: any) => {
|
||||
if (this.searchType === 'accountNo') {
|
||||
return (a?.accountNo || '').toLowerCase().includes(searchTerm);
|
||||
}
|
||||
return (a?.clientName || '').toLowerCase().includes(searchTerm);
|
||||
});
|
||||
}
|
||||
|
||||
this.totalRecords = Array.isArray(res) ? items.length : (res?.totalFilteredRecords ?? items.length);
|
||||
this.dataSource.data = items;
|
||||
this.isLoading = false;
|
||||
},
|
||||
error: () => {
|
||||
this.isLoading = false;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onPageChange(event: PageEvent) {
|
||||
this.pageIndex = event.pageIndex;
|
||||
this.pageSize = event.pageSize;
|
||||
this.loadAccounts();
|
||||
}
|
||||
|
||||
onSortChange(sort: Sort) {
|
||||
this.pageIndex = 0;
|
||||
this.loadAccounts();
|
||||
}
|
||||
|
||||
toggleSearchType() {
|
||||
this.searchType = this.searchType === 'accountNo' ? 'clientName' : 'accountNo';
|
||||
if (this.searchControl.value) {
|
||||
this.loadAccounts();
|
||||
}
|
||||
}
|
||||
|
||||
clearSearch() {
|
||||
this.searchControl.setValue('');
|
||||
}
|
||||
|
||||
getDepositTypeId(): number | null {
|
||||
// Only filter on savings page — FD/RD endpoints already return correct type
|
||||
return this.accountType === 'savings' ? 100 : null;
|
||||
}
|
||||
|
||||
getDepositTypeBadgeClass(_account: any): string {
|
||||
switch (this.accountType) {
|
||||
case 'savings':
|
||||
return 'dtype--sb';
|
||||
case 'fixed-deposits':
|
||||
return 'dtype--fd';
|
||||
case 'recurring-deposits':
|
||||
return 'dtype--rd';
|
||||
default:
|
||||
return 'dtype--ca';
|
||||
}
|
||||
}
|
||||
|
||||
getDepositTypeLabel(_account: any): string {
|
||||
switch (this.accountType) {
|
||||
case 'savings':
|
||||
return 'SB';
|
||||
case 'fixed-deposits':
|
||||
return 'FD';
|
||||
case 'recurring-deposits':
|
||||
return 'RD';
|
||||
default:
|
||||
return 'CA';
|
||||
}
|
||||
}
|
||||
|
||||
viewAccount(account: any) {
|
||||
const id = account.id;
|
||||
switch (this.accountType) {
|
||||
case 'savings':
|
||||
this.router.navigate([
|
||||
'/clients',
|
||||
account.clientId,
|
||||
'savings-accounts',
|
||||
id,
|
||||
'general'
|
||||
]);
|
||||
break;
|
||||
case 'current':
|
||||
this.router.navigate([
|
||||
'/clients',
|
||||
account.clientId,
|
||||
'current-accounts',
|
||||
id,
|
||||
'general'
|
||||
]);
|
||||
break;
|
||||
case 'fixed-deposits':
|
||||
this.router.navigate([
|
||||
'/clients',
|
||||
account.clientId,
|
||||
'fixed-deposits-accounts',
|
||||
id,
|
||||
'general'
|
||||
]);
|
||||
break;
|
||||
case 'recurring-deposits':
|
||||
this.router.navigate([
|
||||
'/clients',
|
||||
account.clientId,
|
||||
'recurring-deposits-accounts',
|
||||
id,
|
||||
'general'
|
||||
]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
getBalance(account: any): number {
|
||||
return account?.summary?.accountBalance ?? account?.accountBalance ?? 0;
|
||||
}
|
||||
|
||||
getCurrencySymbol(account: any): string {
|
||||
return account?.currency?.displaySymbol || account?.currency?.code || '₹';
|
||||
}
|
||||
|
||||
getStatusClass(account: any): string {
|
||||
const id = account?.status?.id ?? account?.statusId;
|
||||
switch (id) {
|
||||
case 100:
|
||||
return 'status--submitted';
|
||||
case 200:
|
||||
return 'status--approved';
|
||||
case 300:
|
||||
return 'status--active';
|
||||
case 400:
|
||||
return 'status--withdrawn';
|
||||
case 500:
|
||||
return 'status--rejected';
|
||||
case 600:
|
||||
return 'status--closed';
|
||||
default:
|
||||
return 'status--default';
|
||||
}
|
||||
}
|
||||
|
||||
getStatusLabel(account: any): string {
|
||||
return account?.status?.value ?? account?.statusValue ?? 'Unknown';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user