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:
tanshu
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
overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts
+47 -45
View File
@@ -1,12 +1,12 @@
import { AfterViewInit, Component, ElementRef, OnInit, 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';
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 { Product } from '../../core/product';
import { ProductSku } from '../../core/product-sku';
@@ -30,7 +30,21 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
@ViewChild('ingredientElement', { static: true }) ingredientElement?: ElementRef;
public itemsObservable = new BehaviorSubject<RecipeItem[]>([]);
dataSource: RecipeDetailDatasource = new RecipeDetailDatasource(this.itemsObservable);
form: UntypedFormGroup;
form: FormGroup<{
validFrom: FormControl<Date>;
validTill: FormControl<Date>;
recipeYield: FormControl<string | null>;
costPrice: FormControl<string | null>;
salePrice: FormControl<string | null>;
costPercentage: FormControl<number | null>;
product: FormControl<ProductSku | string | null>;
addRow: FormGroup<{
ingredient: FormControl<string | null>;
quantity: FormControl<string>;
rate: FormControl<string>;
}>;
}>;
product: ProductSku | null;
products: Observable<ProductSku[]>;
ingredient: ProductSku | null;
@@ -42,7 +56,6 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
constructor(
private route: ActivatedRoute,
private router: Router,
private fb: UntypedFormBuilder,
private dialog: MatDialog,
private toaster: ToasterService,
private math: MathService,
@@ -51,33 +64,30 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
) {
this.product = null;
this.ingredient = null;
this.form = this.fb.group({
validFrom: '',
validTill: '',
recipeYield: '',
salePrice: '',
costPrice: '',
costPercentage: '',
product: new Product(),
addRow: this.fb.group({
ingredient: '',
quantity: '',
rate: '',
this.form = new FormGroup({
validFrom: new FormControl(new Date(), { nonNullable: true }),
validTill: new FormControl(new Date(), { nonNullable: true }),
recipeYield: new FormControl<string | null>(null),
costPrice: new FormControl<string | null>(null),
salePrice: new FormControl<string | null>(null),
costPercentage: new FormControl<number | null>(null),
product: new FormControl<ProductSku | string | null>(new ProductSku()),
addRow: new FormGroup({
ingredient: new FormControl(''),
quantity: new FormControl('', { nonNullable: true }),
rate: new FormControl('', { nonNullable: true }),
}),
});
// Setup Product Autocomplete
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(),
switchMap((x) => (x === null ? observableOf([]) : this.productSer.autocompleteSku(x, false))),
);
// Setup Product Autocomplete
this.ingredients = (
(this.form.get('addRow') as UntypedFormControl).get('ingredient') as UntypedFormControl
).valueChanges.pipe(
startWith(null),
this.ingredients = this.form.controls.addRow.controls.ingredient.valueChanges.pipe(
map((x) => (x !== null && x.length >= 1 ? x : null)),
debounceTime(150),
distinctUntilChanged(),
@@ -100,10 +110,10 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
this.form.setValue({
validFrom: moment(item.validFrom, 'DD-MMM-YYYY').toDate(),
validTill: moment(item.validTill, 'DD-MMM-YYYY').toDate(),
recipeYield: '' + item.recipeYield,
salePrice: '' + item.salePrice,
costPrice: '' + item.costPrice,
costPercentage: '',
recipeYield: `${item.recipeYield}`,
salePrice: `${item.salePrice}`,
costPrice: `${item.costPrice}`,
costPercentage: null,
product: item.sku,
addRow: {
ingredient: null,
@@ -133,8 +143,8 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
productSelected(event: MatAutocompleteSelectedEvent): void {
const product: ProductSku = event.option.value;
this.item.sku = product;
(this.form.get('product') as UntypedFormControl).setValue(product);
(this.form.get('salePrice') as UntypedFormControl).setValue('' + (product.salePrice ?? 0));
this.form.controls.product.setValue(product);
this.form.controls.salePrice.setValue('' + (product.salePrice ?? 0));
}
ingredientSelected(event: MatAutocompleteSelectedEvent): void {
@@ -143,15 +153,11 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
const item = this.getItem();
this.ser
.getIngredientDetails(ingredient.id, item.validFrom, item.validTill)
.subscribe((x) =>
(
(this.form.get('addRow') as UntypedFormControl).get('rate') as UntypedFormControl
).setValue('' + x.costPrice),
);
.subscribe((x) => this.form.controls.addRow.controls.rate.setValue('' + x.costPrice));
}
addRow() {
const formValue = (this.form.get('addRow') as UntypedFormControl).value;
const formValue = this.form.value.addRow!;
const quantity = this.math.parseAmount(formValue.quantity, 2);
const rate = this.math.parseAmount(formValue.rate, 2);
if (this.ingredient === null || quantity <= 0 || rate <= 0) {
@@ -176,11 +182,7 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
}
resetAddRow() {
(this.form.get('addRow') as UntypedFormControl).reset({
ingredient: null,
quantity: '',
rate: '',
});
this.form.controls.addRow.reset();
this.ingredient = null;
setTimeout(() => {
if (this.ingredientElement) {
@@ -195,13 +197,13 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
this.item.items.map((x) => x.quantity * x.price).reduce((p, c) => p + c, 0),
2,
);
(this.form.get('costPrice') as UntypedFormControl).setValue(costPrice);
const salePrice = this.math.parseAmount(this.form.value.salePrice, 2);
this.form.controls.costPrice.setValue(`${costPrice}`);
const salePrice = this.math.parseAmount(this.form.value.salePrice!, 2);
if (salePrice < 0) {
return;
}
const costPercentage = round((100 * costPrice) / salePrice, 2);
(this.form.get('costPercentage') as UntypedFormControl).setValue(costPercentage);
this.form.controls.costPercentage.setValue(costPercentage);
}
deleteRow(row: RecipeItem) {
@@ -250,9 +252,9 @@ export class RecipeDetailComponent implements OnInit, AfterViewInit {
const formModel = this.form.value;
this.item.validFrom = moment(formModel.validFrom).format('DD-MMM-YYYY');
this.item.validTill = moment(formModel.validTill).format('DD-MMM-YYYY');
this.item.recipeYield = this.math.parseAmount(formModel.recipeYield, 2);
this.item.salePrice = this.math.parseAmount(formModel.salePrice, 2);
this.item.costPrice = this.math.parseAmount(formModel.costPrice, 2);
this.item.recipeYield = this.math.parseAmount(formModel.recipeYield!, 2);
this.item.salePrice = this.math.parseAmount(formModel.salePrice!, 2);
this.item.costPrice = this.math.parseAmount(formModel.costPrice!, 2);
return this.item;
}
}
overlord/src/app/recipe/recipe-list/recipe-list.component.ts
+14 -9
View File
@@ -1,5 +1,5 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ActivatedRoute } from '@angular/router';
@@ -19,7 +19,12 @@ import { RecipeListDatasource } from './recipe-list-datasource';
export class RecipeListComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator?: MatPaginator;
@ViewChild(MatSort, { static: true }) sort?: MatSort;
form: UntypedFormGroup;
form: FormGroup<{
validFrom: FormControl<Date>;
validTill: FormControl<Date>;
productGroup: FormControl<ProductGroup | string | null>;
}>;
productGroups: ProductGroup[] = [];
validFromFilter: BehaviorSubject<Date | null> = new BehaviorSubject<Date | null>(null);
validTillFilter: BehaviorSubject<Date | null> = new BehaviorSubject<Date | null>(null);
@@ -36,11 +41,11 @@ export class RecipeListComponent implements OnInit {
/** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
displayedColumns = ['name', 'validity', 'salePrice', 'costPrice', 'costPercentage'];
constructor(private route: ActivatedRoute, private fb: UntypedFormBuilder) {
this.form = this.fb.group({
validFrom: '',
validTill: '',
productGroup: '',
constructor(private route: ActivatedRoute) {
this.form = new FormGroup({
validFrom: new FormControl(new Date(), { nonNullable: true }),
validTill: new FormControl(new Date(), { nonNullable: true }),
productGroup: new FormControl<ProductGroup | string | null>(null),
});
}
@@ -72,8 +77,8 @@ export class RecipeListComponent implements OnInit {
});
this.productGroups = data.productGroups;
this.form.setValue({
validFrom: vf === null ? '' : moment(vf, 'DD-MMM-YYYY').toDate(),
validTill: vt === null ? '' : moment(vt, 'DD-MMM-YYYY').toDate(),
validFrom: vf === null ? new Date() : moment(vf, 'DD-MMM-YYYY').toDate(),
validTill: vt === null ? new Date() : moment(vt, 'DD-MMM-YYYY').toDate(),
productGroup: '',
});
this.data.next(data.list);