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/entries/entries.component.html
+3 -3
View File
@@ -44,9 +44,9 @@
fxLayoutAlign="space-around start"
>
<mat-radio-group fxFlex="40%" formControlName="posted" (change)="togglePosted($event)">
<mat-radio-button class="my-margin" value="true"> Posted </mat-radio-button>
<mat-radio-button class="my-margin" value="false"> Not Posted </mat-radio-button>
<mat-radio-button class="my-margin" value="null"> All </mat-radio-button>
<mat-radio-button class="my-margin" [value]="true"> Posted </mat-radio-button>
<mat-radio-button class="my-margin" [value]="false"> Not Posted </mat-radio-button>
<mat-radio-button class="my-margin" [value]="null"> All </mat-radio-button>
</mat-radio-group>
<mat-checkbox
fxFlex="40%"
overlord/src/app/entries/entries.component.ts
+24 -31
View File
@@ -1,5 +1,5 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
import { FormControl, FormGroup } from '@angular/forms';
import { MatPaginator } from '@angular/material/paginator';
import { MatRadioChange } from '@angular/material/radio';
import { MatSort, SortDirection } from '@angular/material/sort';
@@ -19,7 +19,13 @@ export class EntriesComponent implements OnInit {
@ViewChild(MatSort, { static: true }) sort?: MatSort;
info: Report = new Report();
dataSource: EntriesDatasource = new EntriesDatasource(this.info.report, 0);
form: UntypedFormGroup;
form: FormGroup<{
startDate: FormControl<Date>;
finishDate: FormControl<Date>;
posted: FormControl<boolean | null>;
issue: FormControl<boolean>;
}>;
displayedColumns = [
'date',
'voucherType',
@@ -32,16 +38,12 @@ export class EntriesComponent implements OnInit {
posted: boolean | null = null;
issue: boolean = false;
constructor(
private route: ActivatedRoute,
private router: Router,
private fb: UntypedFormBuilder,
) {
this.form = this.fb.group({
startDate: '',
finishDate: '',
posted: '',
issue: '',
constructor(private route: ActivatedRoute, private router: Router) {
this.form = new FormGroup({
startDate: new FormControl(new Date(), { nonNullable: true }),
finishDate: new FormControl(new Date(), { nonNullable: true }),
posted: new FormControl<boolean | null>(null),
issue: new FormControl<boolean>(false, { nonNullable: true }),
});
}
@@ -50,10 +52,8 @@ export class EntriesComponent implements OnInit {
const data = value as { info: Report };
this.info = data.info;
const queryMap = this.route.snapshot.queryParamMap;
const startDateO = queryMap.get('s');
const finishDateO = queryMap.get('f');
const startDate = startDateO !== null ? moment(startDateO, 'DD-MMM-YYYY').toDate() : '';
const finishDate = finishDateO !== null ? moment(finishDateO, 'DD-MMM-YYYY').toDate() : '';
const startDate = moment(queryMap.get('s') || undefined, 'DD-MMM-YYYY').toDate();
const finishDate = moment(queryMap.get('f') || undefined, 'DD-MMM-YYYY').toDate();
const postedO = queryMap.get('p');
this.posted = postedO !== null ? postedO === 'true' : null;
const pageSizeO = queryMap.get('ps');
@@ -69,13 +69,13 @@ export class EntriesComponent implements OnInit {
this.form.setValue({
startDate: startDate,
finishDate: finishDate,
posted: postedO ?? 'null',
posted: this.posted,
issue: this.issue,
});
if (this.posted === null || this.posted) {
(this.form.get('issue') as UntypedFormControl).enable();
this.form.controls.issue.enable();
} else {
(this.form.get('issue') as UntypedFormControl).disable();
this.form.controls.issue.disable();
}
this.dataSource = new EntriesDatasource(
this.info.report,
@@ -106,12 +106,8 @@ export class EntriesComponent implements OnInit {
refresh() {
const formModel = this.form.value;
const startDate = formModel.startDate
? moment(formModel.startDate).format('DD-MMM-YYYY')
: null;
const finishDate = formModel.finishDate
? moment(formModel.finishDate).format('DD-MMM-YYYY')
: null;
const startDate = moment(formModel.startDate).format('DD-MMM-YYYY');
const finishDate = moment(formModel.finishDate).format('DD-MMM-YYYY');
this.router.navigate([], {
relativeTo: this.route,
queryParams: { s: startDate, f: finishDate },
@@ -120,13 +116,10 @@ export class EntriesComponent implements OnInit {
}
togglePosted($event: MatRadioChange) {
if ($event.value === 'true') {
this.posted = true;
} else if ($event.value === 'false') {
this.posted = false;
console.log($event.value);
this.posted = $event.value;
if (this.posted === false) {
this.issue = false;
} else {
this.posted = null;
}
this.router.navigate([], {
relativeTo: this.route,