brewman/overlord/src/app/profit-loss/profit-loss.component.ts

import { CurrencyPipe } from '@angular/common';
import { Component, ElementRef, HostListener, inject, OnInit, ViewChild } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
import { MatSort, MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, Router } from '@angular/router';
import moment from 'moment';

import { ProfitLoss } from './profit-loss';
import { ProfitLossDataSource } from './profit-loss-datasource';

@Component({
  selector: 'app-profit-loss',
  templateUrl: './profit-loss.component.html',
  styleUrls: ['./profit-loss.component.css'],
  imports: [
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    CurrencyPipe,
  ],
})
export class ProfitLossComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private router = inject(Router);

  @ViewChild(MatPaginator, { static: true }) paginator!: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort!: MatSort;
  @ViewChild('startDateElement', { static: true }) startDate!: ElementRef<HTMLInputElement>;
  info: ProfitLoss = new ProfitLoss();
  dataSource: ProfitLossDataSource = new ProfitLossDataSource(this.info.body, this.paginator, this.sort);
  form: FormGroup<{
    startDate: FormControl<moment.Moment>;
    finishDate: FormControl<moment.Moment>;
  }>;

  selectedRowId = '';
  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['group', 'name', 'amount', 'total'];

  @HostListener('window:keydown.f2', ['$event'])
  focusDate(event: Event) {
    event.preventDefault();
    this.startDate.nativeElement.focus();
    this.startDate.nativeElement.select();
  }

  constructor() {
    this.form = new FormGroup({
      startDate: new FormControl(moment(new Date()), { nonNullable: true }),
      finishDate: new FormControl(moment(new Date()), { nonNullable: true }),
    });
  }

  ngOnInit() {
    this.route.data.subscribe((value) => {
      const data = value as { info: ProfitLoss };

      this.info = data.info;
      this.form.setValue({
        startDate: moment(this.info.startDate, 'DD-MMM-YYYY'),
        finishDate: moment(this.info.finishDate, 'DD-MMM-YYYY'),
      });
      this.dataSource = new ProfitLossDataSource(this.info.body, this.paginator, this.sort);
    });
  }

  show() {
    const l = this.prepareSubmit();
    this.router.navigate(['profit-loss'], {
      queryParams: {
        startDate: l.startDate,
        finishDate: l.finishDate,
      },
    });
  }

  prepareSubmit(): ProfitLoss {
    const formModel = this.form.value;

    return new ProfitLoss({
      startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
      finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
    });
  }
}