106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
import { CdkScrollableModule } from '@angular/cdk/scrolling';
|
|
import { CurrencyPipe } from '@angular/common';
|
|
import { Component, computed, inject, linkedSignal, signal } from '@angular/core';
|
|
import { form, FormField } from '@angular/forms/signals';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatTableModule } from '@angular/material/table';
|
|
|
|
import { ReceivePaymentItem } from '../../core/receive-payment-item';
|
|
import { SettleOptionService } from '../../settle-option/settle-option.service';
|
|
import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
|
|
import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
|
|
import { VoucherType } from '../bills/voucher-type';
|
|
|
|
export interface ReceivePaymentFormData {
|
|
amounts: ReceivePaymentItem[];
|
|
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,
|
|
ErrorStateComponent,
|
|
SkeletonLoaderComponent,
|
|
],
|
|
})
|
|
export class ReceivePaymentComponent {
|
|
private ser = inject(SettleOptionService);
|
|
dialogRef = inject<MatDialogRef<ReceivePaymentComponent>>(MatDialogRef);
|
|
data = inject<{
|
|
type: VoucherType;
|
|
amount: number;
|
|
}>(MAT_DIALOG_DATA);
|
|
|
|
type = this.data.type;
|
|
|
|
typeSignal = signal<VoucherType | undefined>(this.type);
|
|
settleOptionsResource = this.ser.listForType(this.typeSignal);
|
|
|
|
displayReason = computed(() => this.settleOptionsResource.value()?.some((n) => n.hasReason) ?? false);
|
|
displayTable = computed(() => (this.settleOptionsResource.value()?.length ?? 0) > 1);
|
|
|
|
formModel = linkedSignal({
|
|
source: () => this.settleOptionsResource.value(),
|
|
computation: (options): ReceivePaymentFormData => {
|
|
if (!options) {
|
|
return { amounts: [], son: '' };
|
|
}
|
|
const isTable = options.length > 1;
|
|
return {
|
|
amounts: options.map(
|
|
(y) =>
|
|
({
|
|
...y,
|
|
amount: !isTable ? this.data.amount : 0,
|
|
}) as ReceivePaymentItem,
|
|
),
|
|
son: '',
|
|
};
|
|
},
|
|
});
|
|
|
|
form = form(this.formModel);
|
|
|
|
balance = computed(() => {
|
|
return this.data.amount - this.formModel().amounts.reduce((a, c) => a + (c.amount ?? 0), 0);
|
|
});
|
|
|
|
displayedColumns = ['name', 'amount'];
|
|
|
|
reason = '';
|
|
|
|
trackByRow = (_: number, row: ReceivePaymentItem) => row.id ?? row.name ?? _;
|
|
|
|
select(reason: string) {
|
|
this.reason = reason.trim();
|
|
return true;
|
|
}
|
|
|
|
accept(): void {
|
|
this.dialogRef.close({ choices: this.formModel().amounts, reason: this.formModel().son.trim() || 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 };
|
|
});
|
|
}
|
|
}
|