brewman/overlord/src/app/purchases/purchases.component.ts

import { CurrencyPipe, DecimalPipe } from '@angular/common';
import { Component, inject, linkedSignal, computed, signal, input } from '@angular/core';
import { form, FormField, FormRoot } from '@angular/forms/signals';
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 { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
import { MatSortModule, Sort } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { ActivatedRoute, Router, RouterModule } from '@angular/router';
import moment from 'moment';

import { ErrorStateComponent } from '../shared/error-state/error-state.component';
import { SkeletonLoaderComponent } from '../shared/skeleton-loader/skeleton-loader.component';
import { Purchases } from './purchases';
import { PurchasesItem } from './purchases-item';
import { PurchasesService } from './purchases.service';

export interface PurchasesFormData {
  startDate: Date;
  finishDate: Date;
}

@Component({
  selector: 'app-purchases',
  templateUrl: './purchases.component.html',
  styleUrls: ['./purchases.component.css'],
  host: {
    '(window:keydown.f2)': 'focusDate($event)',
  },

  imports: [
    FormField,
    FormRoot,
    MatFormFieldModule,
    MatInputModule,
    MatDatepickerModule,
    MatButtonModule,
    MatTableModule,
    MatSortModule,
    RouterModule,
    MatPaginatorModule,
    DecimalPipe,
    CurrencyPipe,
    SkeletonLoaderComponent,
    ErrorStateComponent,
  ],
})
export class PurchasesComponent {
  private route = inject(ActivatedRoute);
  private router = inject(Router);
  private ser = inject(PurchasesService);

  pageSize = signal(50);
  pageIndex = signal(0);
  sortActive = signal('');
  sortDirection = signal('');
  startDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
  finishDate = input(null, { transform: (v: string | null | undefined) => v ?? null });
  resource = this.ser.list(this.startDate, this.finishDate);

  info = computed(() => this.resource.value() ?? new Purchases());
  sortedList = computed(() => {
    const data = this.info().body ?? [];
    const active = this.sortActive();
    const direction = this.sortDirection();

    if (!active || direction === '') {
      return data;
    }

    return [...data].sort((a, b) => {
      const isAsc = direction === 'asc';
      switch (active) {
        case 'product':
          return compare(a.name, b.name, isAsc);
        case 'quantity':
          return compare(a.quantity, b.quantity, isAsc);
        case 'rate':
          return compare(a.rate, b.rate, isAsc);
        case 'amount':
          return compare(a.amount, b.amount, isAsc);
        default:
          return 0;
      }
    });
  });

  dataSource = computed(() => {
    const data = this.sortedList();
    const pageIndex = this.pageIndex();
    const pageSize = this.pageSize();
    return data.slice(pageIndex * pageSize, (pageIndex + 1) * pageSize);
  });

  formModel = linkedSignal({
    source: () => this.info(),
    computation: (info: Purchases): PurchasesFormData => ({
      startDate: info.startDate ? moment(info.startDate, 'DD-MMM-YYYY').toDate() : new Date(),
      finishDate: info.finishDate ? moment(info.finishDate, 'DD-MMM-YYYY').toDate() : new Date(),
    }),
  });

  form = form(this.formModel);

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

  focusDate(event: Event) {
    event.preventDefault();
    this.form().focusBoundControl();
  }

  show() {
    const l = this.prepareSubmit();
    if (this.startDate() === l.startDate && this.finishDate() === l.finishDate) {
      this.resource.reload();
    } else {
      this.router.navigate(['purchases'], {
        queryParams: {
          startDate: l.startDate,
          finishDate: l.finishDate,
        },
      });
    }
  }

  prepareSubmit(): Purchases {
    const formModel = this.formModel();

    return {
      startDate: moment(formModel.startDate).format('DD-MMM-YYYY'),
      finishDate: moment(formModel.finishDate).format('DD-MMM-YYYY'),
      body: [],
      footer: new PurchasesItem(),
    };
  }

  handlePageEvent(e: PageEvent) {
    this.pageSize.set(e.pageSize);
    this.pageIndex.set(e.pageIndex);
  }

  sortData(sort: Sort) {
    this.sortActive.set(sort.active);
    this.sortDirection.set(sort.direction);
  }
}
const compare = (a: string | number | boolean, b: string | number | boolean, isAsc: boolean) =>
  (a < b ? -1 : 1) * (isAsc ? 1 : -1);