bastian/teamwallet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/cash-flow-presentation'

Browse Source 
# Conflicts:
#	myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.ts
#	myteamwallet_frontend_modern/src/app/features/team/overview/overview.spec.ts
#	myteamwallet_frontend_modern/src/app/features/team/overview/overview.ts
This commit is contained in:
Bastian Wagner
2026-08-02 09:49:30 +02:00
parent 26391b5b2c 367533f1f5
commit 6eeaa3a624
23 changed files with 546 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
myteamwallet_frontend_modern/src/app/features/public-team/public-player.html
View File

@@ -21,8 +21,8 @@
} @else {
<div class="transactions">
@for (transaction of transactions(); track transaction.id) {
<mat-card
><div class="icon"><mat-icon>receipt_long</mat-icon></div>
<mat-card>
<div class="icon"><mat-icon>receipt_long</mat-icon></div>
<div>
<strong>{{ typeLabel(transaction) }}</strong
><span>{{ transaction.date | date: 'dd.MM.yyyy' }}</span>
@@ -30,10 +30,14 @@
<small>{{ transaction.note }}</small>
}
</div>
<strong class="amount">{{
displayAmount(transaction) | currency: 'EUR'
}}</strong></mat-card
>
<strong>
<app-transaction-amount
[amount]="transaction.amount"
[type]="transaction.type"
context="player"
/>
</strong>
</mat-card>
}
</div>
}

3
myteamwallet_frontend_modern/src/app/features/public-team/public-player.scss
View File

@@ -74,9 +74,6 @@ main {
.transactions small {
color: var(--mat-sys-on-surface-variant);
}
.amount {
font-variant-numeric: tabular-nums;
}
.state {
min-height: 300px;
display: grid;

27
myteamwallet_frontend_modern/src/app/features/public-team/public-player.spec.ts
View File

@@ -32,6 +32,20 @@ describe('PublicPlayer', () => {
{
id: 1,
date: '2026-07-31',
amount: 12,
note: 'Beitrag',
type: { id: 0, name: 'payment' },
},
{
id: 2,
date: '2026-07-30',
amount: -3,
note: 'Korrektur',
type: { id: 0, name: 'payment' },
},
{
id: 3,
date: '2026-07-29',
amount: 5,
note: 'Training',
type: { id: 11, name: 'fine' },
@@ -48,6 +62,17 @@ describe('PublicPlayer', () => {
expect(fixture.nativeElement.textContent).toContain('Ada Lovelace');
expect(fixture.nativeElement.textContent).toContain('Training');
expect(fixture.nativeElement.textContent).toContain('-5,00');
const amounts = [
...fixture.nativeElement.querySelectorAll(
'app-transaction-amount [data-testid="transaction-amount"]',
),
] as HTMLElement[];
expect(amounts).toHaveLength(3);
expect(amounts[0].classList).toContain('inflow');
expect(amounts[1].classList).toContain('outflow');
expect(amounts[2].classList).toContain('neutral');
expect(
amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
).toEqual(['+', '−', '']);
});
});

10
myteamwallet_frontend_modern/src/app/features/public-team/public-player.ts
View File

@@ -1,4 +1,4 @@
import { CurrencyPipe, DatePipe, registerLocaleData } from '@angular/common';
import { DatePipe, registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import { Component, LOCALE_ID, inject, signal } from '@angular/core';
import { ActivatedRoute, RouterLink } from '@angular/router';
@@ -8,21 +8,21 @@ import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { PublicTeamApi } from '../../core/team/public-team-api';
import { PlayerTransaction } from '../../models/transaction.model';
import { signedTransactionAmount } from '../../models/transaction-amount';
import { PublicPlayer as PublicPlayerModel } from '../../models/public-access.model';
import { TransactionAmount } from '../../shared/transaction-amount/transaction-amount';
registerLocaleData(localeDe);
@Component({
selector: 'app-public-player',
imports: [
CurrencyPipe,
DatePipe,
RouterLink,
MatButtonModule,
MatCardModule,
MatIconModule,
MatProgressSpinnerModule,
TransactionAmount,
],
providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
templateUrl: './public-player.html',
@@ -72,8 +72,4 @@ export class PublicPlayer {
)[type] ?? type
);
}
protected displayAmount(transaction: PlayerTransaction): number {
return signedTransactionAmount(transaction.amount, transaction.type);
}
}

8
myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.html
View File

@@ -176,7 +176,13 @@
<small>{{ activity.note }}</small>
}
</div>
<strong class="amount">{{ displayAmount(activity) | currency: 'EUR' }}</strong>
<strong>
<app-transaction-amount
[amount]="activity.amount"
[type]="activity.type"
[context]="activity.isTeamWalletTransaction ? 'team' : 'player'"
/>
</strong>
@if (canReverse(activity)) {
<button
mat-icon-button

10
myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.scss
View File

@@ -37,12 +37,7 @@ h1 {
gap: 4px;
min-width: 160px;
background: linear-gradient(
135deg,
#5ca34c 0%,
#4f8f46 55%,
#3f7f3c 100%
);
background: linear-gradient(135deg, #5ca34c 0%, #4f8f46 55%, #3f7f3c 100%);
color: #ffffff;
}
@@ -135,9 +130,6 @@ form button {
.activity-copy small {
color: var(--mat-sys-on-surface-variant);
}
.amount {
font-variant-numeric: tabular-nums;
}
.state {
min-height: 160px;
display: grid;

41
myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.spec.ts
View File

@@ -49,9 +49,26 @@ describe('Cashbox', () => {
id: 9,
date: '2026-07-31T10:00:00.000Z',
amount: 12,
type: 'payment',
note: 'Beitrag',
playerName: 'Bea Test',
isTeamWalletTransaction: false,
},
{
id: 10,
date: '2026-07-30T10:00:00.000Z',
amount: 8,
type: 'expense',
note: 'Material',
isTeamWalletTransaction: true,
},
{
id: 11,
date: '2026-07-29T10:00:00.000Z',
amount: 5,
type: 'fine',
note: 'Training',
playerName: 'Bea Test',
playerName: 'Alex Muster',
isTeamWalletTransaction: false,
},
];
@@ -105,9 +122,7 @@ describe('Cashbox', () => {
provide: ActivatedRoute,
useValue: {
snapshot: {
queryParamMap: convertToParamMap(
penaltyIdParam ? { penaltyId: penaltyIdParam } : {},
),
queryParamMap: convertToParamMap(penaltyIdParam ? { penaltyId: penaltyIdParam } : {}),
},
},
},
@@ -137,11 +152,27 @@ describe('Cashbox', () => {
const { fixture } = await setup();
expect(fixture.nativeElement.textContent).toContain('Bea Test');
expect(fixture.nativeElement.textContent).toContain('-12,00');
expect(fixture.nativeElement.querySelector('[data-testid="player-booking"]')).not.toBeNull();
expect(fixture.nativeElement.textContent).toContain('Buchungen verstehen');
});
it('renders inflow, outflow, and neutral activity amounts with their cash-flow meaning', async () => {
const { fixture } = await setup();
const amounts = [
...fixture.nativeElement.querySelectorAll(
'app-transaction-amount [data-testid="transaction-amount"]',
),
] as HTMLElement[];
expect(amounts).toHaveLength(3);
expect(amounts[0].classList).toContain('inflow');
expect(amounts[1].classList).toContain('outflow');
expect(amounts[2].classList).toContain('neutral');
expect(
amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
).toEqual(['+', '−', '']);
});
it('submits cent-preserving split transactions for selected players', async () => {
const { component, createPlayerTransactions, refreshTeam } = await setup();
component['playerForm'].setValue({

14
myteamwallet_frontend_modern/src/app/features/team/cashbox/cashbox.ts
View File

@@ -24,9 +24,9 @@ import {
TeamActivity,
} from '../../../models/transaction.model';
import { ConfirmDialog, ConfirmDialogData } from '../../../shared/confirm-dialog/confirm-dialog';
import { splitAmounts } from './transaction-calculation';
import { signedTransactionAmount } from '../../../models/transaction-amount';
import { ContextHelp } from '../../../shared/context-help/context-help';
import { TransactionAmount } from '../../../shared/transaction-amount/transaction-amount';
import { splitAmounts } from './transaction-calculation';
registerLocaleData(localeDe);
@@ -48,6 +48,7 @@ const HIGH_AMOUNT_CONFIRM_THRESHOLD = 300;
MatSelectModule,
MatSnackBarModule,
ContextHelp,
TransactionAmount,
],
providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
templateUrl: './cashbox.html',
@@ -64,9 +65,8 @@ export class Cashbox {
private readonly teamStore = inject(TeamStore);
private readonly transactionsApi = inject(TransactionsApi);
private loadedTeamId: number | null = null;
private pendingPenaltyId: number | null = Number(
this.route.snapshot.queryParamMap.get('penaltyId'),
) || null;
private pendingPenaltyId: number | null =
Number(this.route.snapshot.queryParamMap.get('penaltyId')) || null;
protected readonly team = this.teamStore.team;
protected readonly activities = signal<TeamActivity[]>([]);
@@ -241,10 +241,6 @@ export class Cashbox {
);
}
protected displayAmount(activity: TeamActivity): number {
return signedTransactionAmount(activity.amount, activity.type);
}
private createPlayerTransactions(transactions: CreatePlayerTransaction[]): void {
this.saving.set(true);
this.transactionsApi.createPlayerTransactions(transactions).subscribe({

10
myteamwallet_frontend_modern/src/app/features/team/members/player-detail.html
View File

@@ -49,9 +49,13 @@
>{{ transaction.date | date: 'dd.MM.yyyy' }} · {{ typeName(transaction) }}</span
>
</div>
<strong [class.negative]="displayAmount(transaction) < 0">{{
displayAmount(transaction) | currency: 'EUR'
}}</strong>
<strong>
<app-transaction-amount
[amount]="transaction.amount"
[type]="transaction.type"
context="player"
/>
</strong>
</article>
}
</div>

74
myteamwallet_frontend_modern/src/app/features/team/members/player-detail.spec.ts
View File

@@ -38,7 +38,11 @@ describe('PlayerDetail', () => {
};
}
async function create(team: ReturnType<typeof makeTeam>, user: unknown) {
async function create(
team: ReturnType<typeof makeTeam>,
user: unknown,
transactions: unknown[] = [],
) {
refreshTeam = vi.fn();
currentUser = signal(user);
closeDialog = new Subject<boolean>();
@@ -50,7 +54,10 @@ describe('PlayerDetail', () => {
provideHttpClient(),
provideHttpClientTesting(),
provideRouter([]),
{ provide: TeamStore, useValue: { team: signal(team), loading: signal(false), refreshTeam } },
{
provide: TeamStore,
useValue: { team: signal(team), loading: signal(false), refreshTeam },
},
{ provide: AuthStore, useValue: { currentUser } },
{ provide: MatDialog, useValue: dialog },
{
@@ -62,7 +69,7 @@ describe('PlayerDetail', () => {
const fixture = TestBed.createComponent(PlayerDetail);
fixture.detectChanges();
httpMock = TestBed.inject(HttpTestingController);
httpMock.expectOne(`${teamsApiUrl}/players/7/transactions`).flush([]);
httpMock.expectOne(`${teamsApiUrl}/players/7/transactions`).flush(transactions);
await fixture.whenStable();
fixture.detectChanges();
return fixture;
@@ -71,26 +78,59 @@ describe('PlayerDetail', () => {
afterEach(() => httpMock.verify());
it('renders the selected player and transaction history', async () => {
const fixture = await create(
makeTeam({ balance: -12 }),
{ id: 99, role: { id: 2 } },
);
const fixture = await create(makeTeam({ balance: -12 }), { id: 99, role: { id: 2 } });
expect(fixture.nativeElement.textContent).toContain('Alex Muster');
expect(fixture.nativeElement.textContent).toContain('-12,00');
});
it('renders player inflow, reversal outflow, and neutral amounts with their cash-flow meaning', async () => {
const fixture = await create(makeTeam(), { id: 99, role: { id: 2 } }, [
{
id: 1,
date: '2026-07-31',
amount: 12,
type: { id: 0, name: 'payment' },
},
{
id: 2,
date: '2026-07-30',
amount: -3,
type: { id: 0, name: 'payment' },
},
{
id: 3,
date: '2026-07-29',
amount: 5,
type: { id: 11, name: 'fine' },
},
]);
const amounts = [
...fixture.nativeElement.querySelectorAll(
'app-transaction-amount [data-testid="transaction-amount"]',
),
] as HTMLElement[];
expect(amounts).toHaveLength(3);
expect(amounts[0].classList).toContain('inflow');
expect(amounts[1].classList).toContain('outflow');
expect(amounts[2].classList).toContain('neutral');
expect(
amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
).toEqual(['+', '−', '']);
});
it('hides the manage controls for a user without team-manager rights', async () => {
const fixture = await create(makeTeam(), { id: 99, role: { id: 2 } });
const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
b.textContent?.includes('Deaktivieren'),
const button = [...fixture.nativeElement.querySelectorAll('button')].find(
(b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
);
expect(button).toBeUndefined();
});
it('shows the manage controls for a global admin', async () => {
const fixture = await create(makeTeam(), { id: 1, role: { id: 1 } });
const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
b.textContent?.includes('Deaktivieren'),
const button = [...fixture.nativeElement.querySelectorAll('button')].find(
(b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
);
expect(button).toBeDefined();
});
@@ -100,16 +140,16 @@ describe('PlayerDetail', () => {
makeTeam({ user: { id: 42 }, teamRole: { id: 3, name: 'captain' } }),
{ id: 42, role: { id: 2 } },
);
const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
b.textContent?.includes('Deaktivieren'),
const button = [...fixture.nativeElement.querySelectorAll('button')].find(
(b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
);
expect(button).toBeDefined();
});
it('deactivates the player on confirm and refreshes the team', async () => {
const fixture = await create(makeTeam(), { id: 1, role: { id: 1 } });
const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
b.textContent?.includes('Deaktivieren'),
const button = [...fixture.nativeElement.querySelectorAll('button')].find(
(b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
) as HTMLButtonElement;
button.click();
@@ -128,8 +168,8 @@ describe('PlayerDetail', () => {
it('does not call the API when the confirmation dialog is dismissed', async () => {
const fixture = await create(makeTeam(), { id: 1, role: { id: 1 } });
const button = [...fixture.nativeElement.querySelectorAll('button')].find((b: HTMLButtonElement) =>
b.textContent?.includes('Deaktivieren'),
const button = [...fixture.nativeElement.querySelectorAll('button')].find(
(b: HTMLButtonElement) => b.textContent?.includes('Deaktivieren'),
) as HTMLButtonElement;
button.click();
closeDialog.next(false);

11
myteamwallet_frontend_modern/src/app/features/team/members/player-detail.ts
View File

@@ -15,8 +15,8 @@ import { AuthStore } from '../../../core/auth/auth-store';
import { TeamStore } from '../../../core/team/team-store';
import { TeamsApi } from '../../../core/team/teams-api';
import { PlayerTransaction } from '../../../models/transaction.model';
import { signedTransactionAmount } from '../../../models/transaction-amount';
import { ConfirmDialog } from '../../../shared/confirm-dialog/confirm-dialog';
import { TransactionAmount } from '../../../shared/transaction-amount/transaction-amount';
registerLocaleData(localeDe);
@@ -32,6 +32,7 @@ registerLocaleData(localeDe);
MatIconModule,
MatProgressSpinnerModule,
MatSelectModule,
TransactionAmount,
],
providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
templateUrl: './player-detail.html',
@@ -88,10 +89,6 @@ export class PlayerDetail {
: (transaction.type?.name ?? 'Buchung');
}
protected displayAmount(transaction: PlayerTransaction): number {
return signedTransactionAmount(transaction.amount, transaction.type);
}
protected changeActive(): void {
const team = this.team();
const player = this.player();
@@ -117,7 +114,9 @@ export class PlayerDetail {
.subscribe({
next: () => this.teamStore.refreshTeam(),
error: (error: HttpErrorResponse) =>
this.mutationError.set(this.errorMessage(error, 'Status konnte nicht geändert werden.')),
this.mutationError.set(
this.errorMessage(error, 'Status konnte nicht geändert werden.'),
),
});
});
}

10
myteamwallet_frontend_modern/src/app/features/team/overview/overview.html
View File

@@ -126,9 +126,13 @@
><span>{{ activity.note || activity.type }}</span
><small>{{ activity.date | date: 'dd.MM.yyyy' }}</small>
</div>
<strong class="activity__amount" [class.negative]="displayAmount(activity) < 0">{{
displayAmount(activity) | currency: 'EUR'
}}</strong>
<strong>
<app-transaction-amount
[amount]="activity.amount"
[type]="activity.type"
[context]="activity.isTeamWalletTransaction ? 'team' : 'player'"
/>
</strong>
</article>
}
</div>

14
myteamwallet_frontend_modern/src/app/features/team/overview/overview.scss
View File

@@ -44,12 +44,7 @@ h2 {
.balance-card--primary {
// background: var(--mat-sys-primary-container);
// color: var(--mat-sys-on-primary-container);
background: linear-gradient(
135deg,
#5ca34c 0%,
#4f8f46 55%,
#3f7f3c 100%
);
background: linear-gradient(135deg, #5ca34c 0%, #4f8f46 55%, #3f7f3c 100%);
color: #ffffff;
}
@@ -76,7 +71,6 @@ h2 {
border-radius: 14px;
background: var(--mat-sys-secondary-container);
color: var(--mat-sys-on-secondary-container);
}
.activity__copy {
display: flex;
@@ -90,12 +84,6 @@ h2 {
text-overflow: ellipsis;
white-space: nowrap;
}
.activity__amount {
color: var(--mat-sys-primary);
}
.activity__amount.negative {
color: var(--mat-sys-error);
}
.state {
min-height: 180px;
display: flex;

32
myteamwallet_frontend_modern/src/app/features/team/overview/overview.spec.ts
View File

@@ -90,11 +90,28 @@ describe('Overview', () => {
id: 1,
date: '2026-07-31',
amount: 12,
type: 'fine',
type: 'payment',
note: 'Beitrag',
playerName: 'Alex',
isTeamWalletTransaction: false,
},
{
id: 2,
date: '2026-07-30',
amount: 8,
type: 'expense',
note: 'Material',
isTeamWalletTransaction: true,
},
{
id: 3,
date: '2026-07-29',
amount: 5,
type: 'fine',
note: 'Training',
playerName: 'Bea',
isTeamWalletTransaction: false,
},
]);
flushStats(sampleStats);
await fixture.whenStable();
@@ -103,7 +120,18 @@ describe('Overview', () => {
expect(fixture.nativeElement.textContent).toContain('125,00');
expect(fixture.nativeElement.textContent).toContain('Alex');
expect(fixture.nativeElement.textContent).toContain('Beitrag');
expect(fixture.nativeElement.textContent).toContain('-12,00');
const amounts = [
...fixture.nativeElement.querySelectorAll(
'app-transaction-amount [data-testid="transaction-amount"]',
),
] as HTMLElement[];
expect(amounts).toHaveLength(3);
expect(amounts[0].classList).toContain('inflow');
expect(amounts[1].classList).toContain('outflow');
expect(amounts[2].classList).toContain('neutral');
expect(
amounts.map((amount) => amount.querySelector('.transaction-amount__sign')?.textContent),
).toEqual(['+', '−', '']);
routeParams.next(convertToParamMap({ id: '6' }));
flushTransactions(

9
myteamwallet_frontend_modern/src/app/features/team/overview/overview.ts
View File

@@ -12,9 +12,9 @@ import { ChartCanvas } from '../../../shared/chart-canvas/chart-canvas';
import { TeamStore } from '../../../core/team/team-store';
import { TransactionsApi } from '../../../core/team/transactions-api';
import { TeamStatsApi } from '../../../core/team/team-stats-api';
import { TeamActivity } from '../../../models/transaction.model';
import { TeamOverviewStats } from '../../../models/team-stats.model';
import { signedTransactionAmount } from '../../../models/transaction-amount';
import { TeamActivity } from '../../../models/transaction.model';
import { TransactionAmount } from '../../../shared/transaction-amount/transaction-amount';
import { of } from 'rxjs';
import { catchError, distinctUntilChanged, map, switchMap, tap } from 'rxjs/operators';
@@ -42,6 +42,7 @@ function formatMonthLabel(month: string): string {
MatProgressSpinnerModule,
RouterLink,
ChartCanvas,
TransactionAmount,
],
providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
templateUrl: './overview.html',
@@ -183,8 +184,4 @@ export class Overview {
protected activityIcon(activity: TeamActivity): string {
return activity.isTeamWalletTransaction ? 'account_balance' : 'person';
}
protected displayAmount(activity: TeamActivity): number {
return signedTransactionAmount(activity.amount, activity.type);
}
}

92
myteamwallet_frontend_modern/src/app/models/transaction-amount.spec.ts
View File

@@ -1,13 +1,83 @@
import { signedTransactionAmount } from './transaction-amount';
import { presentCashFlow } from './transaction-amount';
describe('signedTransactionAmount', () => {
it('shows debit transaction types as negative amounts', () => {
expect(signedTransactionAmount(12, 'fine')).toBe(-12);
expect(signedTransactionAmount(12, { id: 14, name: 'expense' })).toBe(-12);
});
it('keeps credits and negative reversal amounts unchanged', () => {
expect(signedTransactionAmount(12, 'credit')).toBe(12);
expect(signedTransactionAmount(-12, { id: 1, name: 'credit' })).toBe(-12);
});
describe('presentCashFlow', () => {
it.each([
{
amount: 12,
type: 0,
context: 'player' as const,
expected: { direction: 'inflow', amount: 12, sign: '+' },
},
{
amount: -12,
type: 'payment',
context: 'player' as const,
expected: { direction: 'outflow', amount: 12, sign: '−' },
},
{
amount: 8.5,
type: { id: 1, name: 'credit' },
context: 'team' as const,
expected: { direction: 'inflow', amount: 8.5, sign: '+' },
},
{
amount: 8.5,
type: { id: 14, name: 'expense' },
context: 'team' as const,
expected: { direction: 'outflow', amount: 8.5, sign: '−' },
},
{
amount: 7,
type: 'fine',
context: 'player' as const,
expected: { direction: 'neutral', amount: 7, sign: '' },
},
{
amount: 6,
type: 'credit',
context: 'player' as const,
expected: { direction: 'neutral', amount: 6, sign: '' },
},
{
amount: 5,
type: 'levy',
context: 'player' as const,
expected: { direction: 'neutral', amount: 5, sign: '' },
},
{
amount: 4,
type: 'fee',
context: 'player' as const,
expected: { direction: 'neutral', amount: 4, sign: '' },
},
{
amount: 3,
type: 'payment',
context: 'team' as const,
expected: { direction: 'neutral', amount: 3, sign: '' },
},
{
amount: 2,
type: 'expense',
context: 'player' as const,
expected: { direction: 'neutral', amount: 2, sign: '' },
},
{
amount: -7,
type: 'unknown',
context: 'player' as const,
expected: { direction: 'neutral', amount: 7, sign: '' },
},
{
amount: -9,
type: 'unknown',
context: 'team' as const,
expected: { direction: 'neutral', amount: 9, sign: '' },
},
])(
'presents $context $type transactions with their cash-flow direction',
({ amount, type, context, expected }) => {
expect(presentCashFlow(amount, type, context)).toEqual(expected);
},
);
});

43
myteamwallet_frontend_modern/src/app/models/transaction-amount.ts
View File

@@ -1,12 +1,41 @@
export type TransactionTypeLike =
string | number | { id?: number; name?: string } | null | undefined;
const debitTypeNames = new Set(['fine', 'levy', 'fee', 'expense']);
export type CashFlowDirection = 'inflow' | 'outflow' | 'neutral';
export type CashFlowContext = 'player' | 'team';
export function signedTransactionAmount(amount: number, type: TransactionTypeLike): number {
const typeId = typeof type === 'number' ? type : typeof type === 'object' ? type?.id : undefined;
const typeName =
typeof type === 'string' ? type : typeof type === 'object' ? type?.name : undefined;
const isDebit = (typeId ?? 0) > 10 || debitTypeNames.has(typeName ?? '');
return isDebit ? -Math.abs(amount) : amount;
export interface CashFlowPresentation {
direction: CashFlowDirection;
amount: number;
sign: '+' | '−' | '';
}
export function presentCashFlow(
amount: number,
type: TransactionTypeLike,
context: CashFlowContext,
): CashFlowPresentation {
const typeId = typeof type === 'number' ? type : typeof type === 'object' ? type?.id : undefined;
const typeName = (
typeof type === 'string' ? type : typeof type === 'object' ? type?.name : undefined
)
?.trim()
.toLowerCase();
const direction =
context === 'player' && (typeId === 0 || typeName === 'payment')
? amount < 0
? 'outflow'
: 'inflow'
: context === 'team' && (typeId === 1 || typeName === 'credit')
? 'inflow'
: context === 'team' && (typeId === 14 || typeName === 'expense')
? 'outflow'
: 'neutral';
return {
direction,
amount: Math.abs(amount),
sign: direction === 'inflow' ? '+' : direction === 'outflow' ? '−' : '',
};
}

9
myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.html Normal file
View File

@@ -0,0 +1,9 @@
<span
data-testid="transaction-amount"
class="transaction-amount"
[class]="presentation().direction"
>
<span class="transaction-amount__direction">{{ directionLabel() }}</span>
<span class="transaction-amount__sign" aria-hidden="true">{{ presentation().sign }}</span>
{{ presentation().amount | currency: 'EUR' }}
</span>

33
myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.scss Normal file
View File

@@ -0,0 +1,33 @@
.transaction-amount {
font-variant-numeric: tabular-nums;
white-space: nowrap;
&.inflow {
color: var(--mat-sys-primary);
}
&.outflow {
color: var(--mat-sys-error);
}
&.neutral {
color: var(--mat-sys-on-surface-variant);
}
}
.transaction-amount__direction {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.transaction-amount__sign {
display: inline-block;
min-width: 0.8ch;
}

60
myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.spec.ts Normal file
View File

@@ -0,0 +1,60 @@
import { TestBed } from '@angular/core/testing';
import { TransactionAmount } from './transaction-amount';
describe('TransactionAmount', () => {
it.each([
{
amount: 12.5,
type: 'payment',
context: 'player' as const,
sign: '+',
semanticClass: 'inflow',
direction: 'Einzahlung',
text: 'Einzahlung 12,50 \u20ac',
},
{
amount: 12.5,
type: 'expense',
context: 'team' as const,
sign: '−',
semanticClass: 'outflow',
direction: 'Auszahlung',
text: 'Auszahlung 12,50 \u20ac',
},
{
amount: 12.5,
type: 'fine',
context: 'player' as const,
sign: '',
semanticClass: 'neutral',
direction: 'Keine Kassenbewegung',
text: 'Keine Kassenbewegung 12,50 \u20ac',
},
])(
'renders the $semanticClass cash-flow meaning accessibly',
async ({ amount, type, context, sign, semanticClass, direction, text }) => {
await TestBed.configureTestingModule({ imports: [TransactionAmount] }).compileComponents();
const fixture = TestBed.createComponent(TransactionAmount);
fixture.componentRef.setInput('amount', amount);
fixture.componentRef.setInput('type', type);
fixture.componentRef.setInput('context', context);
fixture.detectChanges();
const element = fixture.nativeElement.querySelector('[data-testid="transaction-amount"]');
const signElement = element.querySelector('.transaction-amount__sign');
const directionElement = element.querySelector('.transaction-amount__direction');
const accessibleElement = element.cloneNode(true);
accessibleElement
.querySelectorAll('[aria-hidden=true]')
.forEach((node: Element) => node.remove());
expect(element.classList).toContain(semanticClass);
expect(signElement.textContent).toBe(sign);
expect(signElement.getAttribute('aria-hidden')).toBe('true');
expect(directionElement.textContent).toBe(direction);
expect(accessibleElement.textContent.replace(/\s+/g, ' ').trim()).toBe(text);
expect(element.getAttribute('aria-label')).toBeNull();
expect(getComputedStyle(element).whiteSpace).toBe('nowrap');
expect(getComputedStyle(directionElement).position).toBe('absolute');
},
);
});

36
myteamwallet_frontend_modern/src/app/shared/transaction-amount/transaction-amount.ts Normal file
View File

@@ -0,0 +1,36 @@
import { CurrencyPipe, registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';
import { Component, computed, input, LOCALE_ID } from '@angular/core';
import {
CashFlowContext,
presentCashFlow,
TransactionTypeLike,
} from '../../models/transaction-amount';
registerLocaleData(localeDe);
@Component({
selector: 'app-transaction-amount',
imports: [CurrencyPipe],
providers: [{ provide: LOCALE_ID, useValue: 'de-DE' }],
templateUrl: './transaction-amount.html',
styleUrl: './transaction-amount.scss',
})
export class TransactionAmount {
readonly amount = input.required<number>();
readonly type = input.required<TransactionTypeLike>();
readonly context = input.required<CashFlowContext>();
protected readonly presentation = computed(() =>
presentCashFlow(this.amount(), this.type(), this.context()),
);
protected readonly directionLabel = computed(
() =>
({
inflow: 'Einzahlung',
outflow: 'Auszahlung',
neutral: 'Keine Kassenbewegung',
})[this.presentation().direction],
);
}