tanshu/brewman
1
0
Fork 0
Code Issues Pull Requests Releases Activity

Chore: Moved from Untyped to Stongly Typed forms.

Browse Source
This commit is contained in:
Amritanshu Agrawal
2022-07-15 13:24:25 +05:30
parent facf2df91e
commit 28f9bf2180
78 changed files with 1091 additions and 1004 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
overlord/src/app/purchase/purchase-dialog.component.ts
View File

@ -1,10 +1,10 @@
import { Component, Inject, OnInit } from '@angular/core';
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { round } from 'mathjs';
import { Observable, of as observableOf } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
import { Batch } from '../core/batch';
import { Inventory } from '../core/inventory';
@ -20,26 +20,32 @@ import { MathService } from '../shared/math.service';
})
export class PurchaseDialogComponent implements OnInit {
products: Observable<ProductSku[]>;
form: UntypedFormGroup;
form: FormGroup<{
product: FormControl<ProductSku | string | null>;
quantity: FormControl<string>;
price: FormControl<string>;
tax: FormControl<string>;
discount: FormControl<string>;
}>;
product: ProductSku = new ProductSku();
constructor(
public dialogRef: MatDialogRef<PurchaseDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: { inventory: Inventory },
private fb: UntypedFormBuilder,
private math: MathService,
private productSer: ProductService,
) {
this.form = this.fb.group({
product: '',
quantity: '',
price: '',
tax: '',
discount: '',
this.form = new FormGroup({
product: new FormControl<ProductSku | string | null>(null),
quantity: new FormControl('', { nonNullable: true }),
price: new FormControl('', { nonNullable: true }),
tax: new FormControl('', { nonNullable: true }),
discount: new FormControl('', { nonNullable: true }),
});
// Listen to Product Autocomplete Change
this.products = (this.form.get('product') as UntypedFormControl).valueChanges.pipe(
startWith(null),
this.products = this.form.controls.product.valueChanges.pipe(
map((x) => (x instanceof ProductSku ? x.name : x)),
map((x) => (x !== null && x.length >= 1 ? x : null)),
debounceTime(150),
distinctUntilChanged(),
@ -50,10 +56,10 @@ export class PurchaseDialogComponent implements OnInit {
ngOnInit() {
this.form.setValue({
product: this.data.inventory.batch?.sku,
quantity: this.data.inventory.quantity,
price: this.data.inventory.rate,
tax: this.data.inventory.tax,
discount: this.data.inventory.discount,
quantity: `${this.data.inventory.quantity}`,
price: `${this.data.inventory.rate}`,
tax: `${this.data.inventory.tax}`,
discount: `${this.data.inventory.discount}`,
});
this.product = this.data.inventory.batch?.sku;
}
@ -63,8 +69,22 @@ export class PurchaseDialogComponent implements OnInit {
}
productSelected(event: MatAutocompleteSelectedEvent): void {
this.product = event.option.value;
(this.form.get('price') as UntypedFormControl).setValue(this.product.costPrice);
const product: ProductSku = event.option.value;
this.product = product;
this.form.controls.price.setValue(`${product.costPrice}`);
if (product.isRateContracted) {
this.form.controls.price.disable();
this.form.controls.tax.disable();
this.form.controls.discount.disable();
this.form.controls.tax.setValue('RC');
this.form.controls.discount.setValue('RC');
} else {
this.form.controls.price.enable();
this.form.controls.tax.enable();
this.form.controls.discount.enable();
this.form.controls.tax.setValue('');
this.form.controls.discount.setValue('');
}
}
accept(): void {

108
overlord/src/app/purchase/purchase.component.ts
View File

@ -1,5 +1,5 @@
import { AfterViewInit, Component, ElementRef, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } from '@angular/forms';
import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
import { MatDialog } from '@angular/material/dialog';
import { ActivatedRoute, Router } from '@angular/router';
@ -7,7 +7,7 @@ import { Hotkey, HotkeysService } from 'angular2-hotkeys';
import { round } from 'mathjs';
import * as moment from 'moment';
import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
import { debounceTime, distinctUntilChanged, map, startWith, switchMap } from 'rxjs/operators';
import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
import { AuthService } from '../auth/auth.service';
import { Account } from '../core/account';
@ -42,7 +42,20 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
@ViewChild('dateElement', { static: true }) dateElement?: ElementRef;
public inventoryObservable = new BehaviorSubject<Inventory[]>([]);
dataSource: PurchaseDataSource = new PurchaseDataSource(this.inventoryObservable);
form: UntypedFormGroup;
form: FormGroup<{
date: FormControl<Date>;
account: FormControl<Account | string | null>;
amount: FormControl<number>;
addRow: FormGroup<{
product: FormControl<string | null>;
quantity: FormControl<string>;
price: FormControl<string>;
tax: FormControl<string>;
discount: FormControl<string>;
}>;
narration: FormControl<string>;
}>;
voucher: Voucher = new Voucher();
product: ProductSku | null = null;
accBal: AccountBalance | null = null;
@ -55,7 +68,6 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
constructor(
private route: ActivatedRoute,
private router: Router,
private fb: UntypedFormBuilder,
private dialog: MatDialog,
private hotkeys: HotkeysService,
private toaster: ToasterService,
@ -66,33 +78,30 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
private productSer: ProductService,
private accountSer: AccountService,
) {
this.form = this.fb.group({
date: '',
account: '',
amount: { value: '', disabled: true },
addRow: this.fb.group({
product: '',
quantity: '',
price: '',
tax: '',
discount: '',
this.form = new FormGroup({
date: new FormControl(new Date(), { nonNullable: true }),
account: new FormControl<Account | string | null>(null),
amount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
addRow: new FormGroup({
product: new FormControl(''),
quantity: new FormControl('', { nonNullable: true }),
price: new FormControl('', { nonNullable: true }),
tax: new FormControl('', { nonNullable: true }),
discount: new FormControl('', { nonNullable: true }),
}),
narration: '',
narration: new FormControl('', { nonNullable: true }),
});
this.accBal = null;
// Listen to Account Autocomplete Change
this.accounts = (this.form.get('account') as UntypedFormControl).valueChanges.pipe(
startWith(null),
this.accounts = this.form.controls.account.valueChanges.pipe(
map((x) => (x instanceof Account ? x.name : x)),
map((x) => (x !== null && x.length >= 1 ? x : null)),
debounceTime(150),
distinctUntilChanged(),
switchMap((x) => (x === null ? observableOf([]) : this.accountSer.autocomplete(x))),
);
// Listen to Product Autocomplete Change
this.products = (
(this.form.get('addRow') as UntypedFormControl).get('product') as UntypedFormControl
).valueChanges.pipe(
startWith(null),
this.products = this.form.controls.addRow.controls.product.valueChanges.pipe(
map((x) => (x !== null && x.length >= 1 ? x : null)),
debounceTime(150),
distinctUntilChanged(),
@ -103,7 +112,8 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
x,
true,
moment(this.form.value.date).format('DD-MMM-YYYY'),
this.form.value.account.id,
// this.form.value.account?.id,
'',
),
),
);
@ -167,7 +177,7 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
this.voucher = voucher;
this.form.setValue({
date: moment(this.voucher.date, 'DD-MMM-YYYY').toDate(),
account: this.voucher.vendor,
account: this.voucher.vendor || null,
amount: Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)),
addRow: {
product: '',
@ -191,7 +201,7 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
}
addRow() {
const formValue = (this.form.get('addRow') as UntypedFormControl).value;
const formValue = this.form.value.addRow!;
const quantity = this.math.parseAmount(formValue.quantity, 2);
if (this.product === null || quantity <= 0) {
return;
@ -228,19 +238,11 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
}
resetAddRow() {
(this.form.get('addRow') as UntypedFormControl).reset({
product: null,
quantity: '',
price: '',
tax: '',
discount: '',
});
this.form.controls.addRow.reset();
this.product = null;
((this.form.get('addRow') as UntypedFormControl).get('price') as UntypedFormControl).enable();
((this.form.get('addRow') as UntypedFormControl).get('tax') as UntypedFormControl).enable();
(
(this.form.get('addRow') as UntypedFormControl).get('discount') as UntypedFormControl
).enable();
this.form.controls.addRow.controls.price.enable();
this.form.controls.addRow.controls.tax.enable();
this.form.controls.addRow.controls.discount.enable();
setTimeout(() => {
if (this.productElement) {
this.productElement.nativeElement.focus();
@ -250,7 +252,7 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
updateView() {
this.inventoryObservable.next(this.voucher.inventories);
(this.form.get('amount') as UntypedFormControl).setValue(
this.form.controls.amount.setValue(
round(Math.abs(this.voucher.inventories.map((x) => x.amount).reduce((p, c) => p + c, 0)), 2),
);
}
@ -327,8 +329,10 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
getVoucher(): Voucher {
const formModel = this.form.value;
this.voucher.date = moment(formModel.date).format('DD-MMM-YYYY');
this.voucher.vendor = formModel.account;
this.voucher.narration = formModel.narration;
if (formModel.account instanceof Account) {
this.voucher.vendor = formModel.account;
}
this.voucher.narration = formModel.narration!;
return this.voucher;
}
@ -362,26 +366,26 @@ export class PurchaseComponent implements OnInit, AfterViewInit, OnDestroy {
}
accountSelected(event: MatAutocompleteSelectedEvent): void {
(this.form.get('account') as UntypedFormControl).setValue(event.option.value);
this.form.controls.account.setValue(event.option.value);
}
productSelected(event: MatAutocompleteSelectedEvent): void {
const product: ProductSku = event.option.value;
const addRowForm: UntypedFormControl = this.form.get('addRow') as UntypedFormControl;
const addRowForm = this.form.controls.addRow;
this.product = product;
(addRowForm.get('price') as UntypedFormControl).setValue(product.costPrice);
addRowForm.controls.price.setValue(`${product.costPrice}`);
if (product.isRateContracted) {
(addRowForm.get('price') as UntypedFormControl).disable();
(addRowForm.get('tax') as UntypedFormControl).disable();
(addRowForm.get('discount') as UntypedFormControl).disable();
(addRowForm.get('tax') as UntypedFormControl).setValue('RC');
(addRowForm.get('discount') as UntypedFormControl).setValue('RC');
addRowForm.controls.price.disable();
addRowForm.controls.tax.disable();
addRowForm.controls.discount.disable();
addRowForm.controls.tax.setValue('RC');
addRowForm.controls.discount.setValue('RC');
} else {
(addRowForm.get('price') as UntypedFormControl).enable();
(addRowForm.get('tax') as UntypedFormControl).enable();
(addRowForm.get('discount') as UntypedFormControl).enable();
(addRowForm.get('tax') as UntypedFormControl).setValue('');
(addRowForm.get('discount') as UntypedFormControl).setValue('');
addRowForm.controls.price.enable();
addRowForm.controls.tax.enable();
addRowForm.controls.discount.enable();
addRowForm.controls.tax.setValue('');
addRowForm.controls.discount.setValue('');
}
}