120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
import { CurrencyPipe } from '@angular/common';
|
|
import { Component, inject, signal, computed } from '@angular/core';
|
|
import { form, FormField } from '@angular/forms/signals';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MAT_DIALOG_DATA, MatDialogRef, MatDialogModule } from '@angular/material/dialog';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
import { map, tap } from 'rxjs/operators';
|
|
|
|
import { ReceivePaymentItem } from '../../core/receive-payment-item';
|
|
import { SettleOption } from '../../core/settle-option';
|
|
import { SettleOptionService } from '../../settle-option/settle-option.service';
|
|
import { VoucherType } from '../bills/voucher-type';
|
|
|
|
export interface ReceivePaymentFormData {
|
|
amounts: {
|
|
name: string;
|
|
amount: number;
|
|
}[];
|
|
son: string;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'app-receive-payment',
|
|
templateUrl: './receive-payment.component.html',
|
|
styleUrls: ['./receive-payment.component.css'],
|
|
imports: [
|
|
CdkScrollableModule,
|
|
CurrencyPipe,
|
|
MatButtonModule,
|
|
MatDialogModule,
|
|
MatFormFieldModule,
|
|
MatInputModule,
|
|
MatTableModule,
|
|
FormField,
|
|
],
|
|
})
|
|
export class ReceivePaymentComponent {
|
|
private ser = inject(SettleOptionService);
|
|
dialogRef = inject<MatDialogRef<ReceivePaymentComponent>>(MatDialogRef);
|
|
data = inject<{
|
|
type: VoucherType;
|
|
amount: number;
|
|
}>(MAT_DIALOG_DATA);
|
|
|
|
choices = signal<ReceivePaymentItem[]>([]);
|
|
choicesWithAmount = computed(() => {
|
|
const amounts = this.formModel().amounts;
|
|
return this.choices().map((c, i) => ({ ...c, amount: amounts[i]?.amount ?? 0 }));
|
|
});
|
|
|
|
type: VoucherType;
|
|
amount: number;
|
|
balance = computed(() => {
|
|
return this.amount - this.formModel().amounts.reduce((a, c) => a + (c.amount ?? 0), 0);
|
|
});
|
|
|
|
reason = '';
|
|
displayReason = signal<boolean | undefined>(undefined);
|
|
displayTable = signal<boolean | undefined>(undefined);
|
|
formModel = signal<ReceivePaymentFormData>({
|
|
amounts: [],
|
|
son: '',
|
|
});
|
|
|
|
form = form(this.formModel);
|
|
|
|
dataSource = this.choicesWithAmount;
|
|
|
|
displayedColumns = ['name', 'amount'];
|
|
|
|
constructor() {
|
|
const data = this.data;
|
|
this.type = data.type;
|
|
this.amount = data.amount;
|
|
this.displayReason.set(false);
|
|
this.displayTable.set(false);
|
|
this.ser
|
|
.listForType(data.type)
|
|
.pipe(
|
|
tap((x: SettleOption[]) => this.displayReason.set(x.reduce((o, n) => o || n.hasReason, this.displayReason()))),
|
|
tap((x: SettleOption[]) => this.displayTable.set(x.length > 1)),
|
|
map((x: SettleOption[]) =>
|
|
x.map((y) => ({ ...y, amount: !this.displayTable() ? this.amount : 0 }) as ReceivePaymentItem),
|
|
),
|
|
)
|
|
.subscribe((x) => {
|
|
this.choices.set(x);
|
|
this.formModel.update((f) => ({
|
|
...f,
|
|
amounts: x.map((y) => ({
|
|
name: y.name,
|
|
amount: y.amount === 0 ? 0 : this.amount,
|
|
})),
|
|
}));
|
|
});
|
|
}
|
|
|
|
select(reason: string) {
|
|
this.reason = reason.trim();
|
|
return true;
|
|
}
|
|
|
|
accept(): void {
|
|
this.dialogRef.close({ choices: this.choicesWithAmount(), reason: this.reason });
|
|
}
|
|
|
|
maxAmount(row: ReceivePaymentItem, index: number) {
|
|
this.formModel.update((f) => {
|
|
const newAmounts = [...f.amounts];
|
|
if (newAmounts[index]) {
|
|
newAmounts[index] = { ...newAmounts[index], amount: row.amount + this.balance() };
|
|
}
|
|
return { ...f, amounts: newAmounts };
|
|
});
|
|
}
|
|
}
|