brewman/overlord/src/app/recipe/recipe-list/recipe-list.component.ts

import { Component, inject, input, computed, effect, signal } from '@angular/core';
import { form as createForm, FormField, FormRoot } from '@angular/forms/signals';
import { MatButtonModule } from '@angular/material/button';
import { MatOptionModule } from '@angular/material/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatPaginatorModule, PageEvent } from '@angular/material/paginator';
import { MatSelectModule } from '@angular/material/select';
import { MatSortModule, Sort } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { Router, RouterModule } from '@angular/router';

import { ProductGroup } from '../../core/product-group';
import { Period } from '../../period/period';
import { PeriodService } from '../../period/period.service';
import { ProductGroupService } from '../../product-group/product-group.service';
import { ErrorStateComponent } from '../../shared/error-state/error-state.component';
import { SkeletonLoaderComponent } from '../../shared/skeleton-loader/skeleton-loader.component';
import { RecipeService } from '../recipe.service';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css'],

  imports: [
    MatIconModule,
    RouterModule,
    FormField,
    FormRoot,
    MatDatepickerModule,
    MatFormFieldModule,
    MatSelectModule,
    MatOptionModule,
    MatTableModule,
    MatSortModule,
    MatPaginatorModule,
    MatButtonModule,
    SkeletonLoaderComponent,
    ErrorStateComponent,
  ],
})
export class RecipeListComponent {
  private ser = inject(RecipeService);
  private router = inject(Router);
  private periodSer = inject(PeriodService);
  private productGroupSer = inject(ProductGroupService);

  pageSize = signal(50);
  pageIndex = signal(0);
  sortActive = signal('');
  sortDirection = signal('');

  p = input<string>();
  model = signal({
    period: null as Period | null,
    productGroup: null as ProductGroup | string | null,
  });

  form = createForm(this.model);

  periodsResource = this.periodSer.list();
  periods = computed(() => this.periodsResource.value() ?? []);

  productGroupsResource = this.productGroupSer.list();
  productGroups = computed(() => this.productGroupsResource.value() ?? []);

  periodFilter = computed(() => this.p() || '');
  resource = this.ser.list(this.periodFilter);

  info = computed(() => this.resource.value() ?? []);
  sortedList = computed(() => {
    let data = this.info() ?? [];

    const pg = this.model().productGroup;
    if (pg) {
      const pgId = typeof pg === 'string' ? pg : pg.id;
      data = data.filter((r) => r.productGroupId === pgId);
    }

    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 'name':
          return compare(a.sku.name, b.sku.name, isAsc);
        case 'date':
          return compare(a.date, b.date, isAsc);
        case 'source':
          return compare(a.source, b.source, 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);
  });

  period = new Period();

  displayedColumns = ['name', 'yield', 'steps', 'photos', 'time', 'date', 'source'];

  constructor() {
    // Listen to Period Change
    effect(() => {
      const x = this.model().period;
      if (!x) return;
      this.router.navigate([], {
        queryParams: { p: x.id },
        replaceUrl: true,
        queryParamsHandling: 'merge',
      });
      this.period = x;
    });
  }

  filterProductGroup(val: string) {
    this.model.update((m) => ({ ...m, productGroup: val }));
  }

  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);