Support date query param for journal / payment / reciept voucher

overlord/src/app/payment/payment.component.ts

@@ -2,38 +2,20 @@ import { COMMA, ENTER } from '@angular/cdk/keycodes';
 import { AsyncPipe, CurrencyPipe } from '@angular/common';
 import { AfterViewInit, Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
-import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
-import { MatButton, MatIconButton } from '@angular/material/button';
-import {
-  MatCard,
-  MatCardActions,
-  MatCardContent,
-  MatCardHeader,
-  MatCardTitle,
-  MatCardTitleGroup,
-} from '@angular/material/card';
-import { MatChipGrid, MatChipInput, MatChipInputEvent, MatChipRemove, MatChipRow } from '@angular/material/chips';
-import { MatOption } from '@angular/material/core';
-import { MatDatepicker, MatDatepickerInput, MatDatepickerToggle } from '@angular/material/datepicker';
+import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
+import { MatOptionModule } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
 import { MatDialog } from '@angular/material/dialog';
-import { MatFormField, MatHint, MatLabel, MatPrefix, MatSuffix } from '@angular/material/form-field';
-import { MatIcon } from '@angular/material/icon';
-import { MatInput } from '@angular/material/input';
-import { MatSelect } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { MatSort } from '@angular/material/sort';
-import {
-  MatCell,
-  MatCellDef,
-  MatColumnDef,
-  MatHeaderCell,
-  MatHeaderCellDef,
-  MatHeaderRow,
-  MatHeaderRowDef,
-  MatRow,
-  MatRowDef,
-  MatTable,
-} from '@angular/material/table';
+import { MatSortModule } from '@angular/material/sort';
+import { MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { round } from 'mathjs';
 import moment from 'moment';
@@ -65,44 +47,19 @@ import { PaymentDialogComponent } from './payment-dialog.component';
   templateUrl: './payment.component.html',
   styleUrls: ['./payment.component.css'],
   imports: [
-    MatCard,
-    MatCardHeader,
-    MatCardTitleGroup,
-    MatCardTitle,
-    MatIcon,
-    MatSuffix,
-    MatCardContent,
+    MatCardModule,
+    MatIconModule,
     ReactiveFormsModule,
-    MatFormField,
-    MatLabel,
-    MatInput,
-    MatDatepickerInput,
-    MatDatepickerToggle,
-    MatDatepicker,
-    MatSelect,
-    MatOption,
-    MatPrefix,
-    MatAutocompleteTrigger,
-    MatHint,
-    MatAutocomplete,
-    MatButton,
-    MatTable,
-    MatSort,
-    MatColumnDef,
-    MatHeaderCellDef,
-    MatHeaderCell,
-    MatCellDef,
-    MatCell,
-    MatIconButton,
-    MatHeaderRowDef,
-    MatHeaderRow,
-    MatRowDef,
-    MatRow,
-    MatChipGrid,
-    MatChipRow,
-    MatChipRemove,
-    MatChipInput,
-    MatCardActions,
+    MatFormFieldModule,
+    MatInputModule,
+    MatDatepickerModule,
+    MatSelectModule,
+    MatOptionModule,
+    MatAutocompleteModule,
+    MatButtonModule,
+    MatTableModule,
+    MatSortModule,
+    MatChipsModule,
     AsyncPipe,
     CurrencyPipe,
     AccountingPipe,
@@ -143,14 +100,22 @@ export class PaymentComponent implements OnInit, AfterViewInit {
     this.router.navigate(['receipt'], {
       queryParams: {
         a: this.form.controls.paymentAccount.value,
+        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
       },
+      queryParamsHandling: 'merge',
     });
   }
 
   @HostListener('window:keydown.f7', ['$event'])
   redirectToJournal(event: KeyboardEvent) {
     event.preventDefault();
-    this.router.navigate(['journal']);
+    this.router.navigate(['journal'], {
+      queryParams: {
+        a: this.form.controls.paymentAccount.value,
+        d: this.form.controls.date.value.format('DD-MMM-YYYY'),
+      },
+      queryParamsHandling: 'merge',
+    });
   }
 
   @HostListener('window:keydown.control.s', ['$event'])
@@ -173,7 +138,7 @@ export class PaymentComponent implements OnInit, AfterViewInit {
   public journalObservable = new BehaviorSubject<Journal[]>([]);
   dataSource: PaymentDataSource = new PaymentDataSource(this.journalObservable);
   form: FormGroup<{
-    date: FormControl<Date>;
+    date: FormControl<moment.Moment>;
     paymentAccount: FormControl<string>;
     paymentAmount: FormControl<number>;
     addRow: FormGroup<{
@@ -198,7 +163,7 @@ export class PaymentComponent implements OnInit, AfterViewInit {
   constructor() {
     this.account = null;
     this.form = new FormGroup({
-      date: new FormControl(new Date(), { nonNullable: true }),
+      date: new FormControl(moment(new Date()), { nonNullable: true }),
       paymentAccount: new FormControl('', { nonNullable: true }),
       paymentAmount: new FormControl({ value: 0, disabled: true }, { nonNullable: true }),
       addRow: new FormGroup({
@@ -221,12 +186,22 @@ export class PaymentComponent implements OnInit, AfterViewInit {
       map((tag: string | Tag | null) => (tag === null ? '' : typeof tag !== 'string' ? tag.name.toLowerCase() : tag)),
       switchMap((tag: string) => this.tagSer.autocomplete(tag)),
     );
+    // Listen to Date Change
+    this.form.controls.date.valueChanges.subscribe((x) =>
+      this.router.navigate([], {
+        relativeTo: this.route,
+        queryParams: { d: x.format('DD-MMM-YYYY') },
+        replaceUrl: true,
+        queryParamsHandling: 'merge',
+      }),
+    );
     // Listen to Payment Account Change
     this.form.controls.paymentAccount.valueChanges.subscribe((x) =>
       this.router.navigate([], {
         relativeTo: this.route,
         queryParams: { a: x },
         replaceUrl: true,
+        queryParamsHandling: 'merge',
       }),
     );
   }
@@ -248,7 +223,7 @@ export class PaymentComponent implements OnInit, AfterViewInit {
     this.voucher = voucher;
     [this.paymentJournal] = this.voucher.journals.filter((x) => x.debit === -1);
     this.form.setValue({
-      date: moment(this.voucher.date, 'DD-MMM-YYYY').toDate(),
+      date: moment(this.voucher.date, 'DD-MMM-YYYY'),
       paymentAccount: this.paymentJournal.account.id ?? '',
       paymentAmount: this.paymentJournal.amount,
       addRow: {

overlord/src/app/payment/payment.resolver.ts

@@ -7,11 +7,9 @@ import { VoucherService } from '../core/voucher.service';
 export const paymentResolver: ResolveFn<Voucher> = (route) => {
   const id = route.paramMap.get('id');
   const account = route.queryParamMap.get('a') || null;
+  const date = route.queryParamMap.get('d') || null;
   if (id !== null) {
     return inject(VoucherService).get(id, 'Payment');
   }
-  if (account !== null) {
-    return inject(VoucherService).getOfType('Payment', account);
-  }
-  return inject(VoucherService).getOfType('Payment');
+  return inject(VoucherService).getOfType('Payment', account, date);
 };