Lista de Pets

page-adoption.component.ts

import { AdoptionService } from './../../shared/services/adoption/adoption.service';
import { Component } from '@angular/core';
import { CatCRUDComponentBase } from '@catrx/ui/common';
import { CatDatatableService } from '@catrx/ui/datatable';
import { CatFormService, CatFormListOptions } from '@catrx/ui/form';
import { CatDialogService } from '@catrx/ui/dialog';
import { CatLoaderPageService } from '@catrx/ui/loader-page';
import { CatSnackbarService } from '@catrx/ui/snackbar';
import { CatConfirmService } from '@catrx/ui/confirm';
import { CatXlsxService } from '@catrx/ui/utils/xlsx';
import { PetSexOptions } from '../../shared/services/adoption/adoption.interface';
import { klArray } from '@koalarx/utils/operators/array';

@Component({
  templateUrl: './page-adoption.component.html',
  styles: [
    `
      cat-form {
        display: block;
        margin: 20px 20px 10px;
      }
    `,
  ],
})
export class PageAdoptionComponent extends CatCRUDComponentBase {
  filterForm = this.formService
    .build()
    .search('Raça', 'race', (builder) => builder.grid(3).generate())
    .select('Sexo', 'sex', (builder) =>
      builder
        .setOptions(
          klArray<CatFormListOptions>([{ value: '', name: 'Todos' }])
            .merge(PetSexOptions)
            .getValue()
        )
        .grid(3)
        .generate()
    )
    .onChange((filter) => this.filterValueChanges$.next(filter))
    .generate();

  listConfig = this.datatableService
    .build(this.filterValueChanges$, (filter) =>
      this.service.getDatatable(filter)
    )
    .setColumns(['Raça', 'Sexo', 'Peso', 'Idade'])
    .setActionButton({
      iconName: 'fa-solid fa-pen',
      tooltip: 'Editar',
      fnAction: (item) => console.log(item),
    })
    .setItemLine({
      columnIndex: 0,
      text: (item) => item.race,
    })
    .setItemLine({
      columnIndex: 1,
      text: (item) => (item.sex === 'M' ? 'Macho' : 'Fêmea'),
    })
    .setItemLine({
      columnIndex: 2,
      text: (item) => item.weight,
    })
    .setItemLine({
      columnIndex: 3,
      text: (item) => item.yearsOld ?? '-',
    })
    .hasSelection()
    .hasActions()
    .getSelection((selection) => (this.selection = selection))
    .getDatasource((datasource) => (this.datasource = datasource))
    .generate();

  constructor(
    formService: CatFormService,
    datatableService: CatDatatableService,
    loaderService: CatLoaderPageService,
    snackbarService: CatSnackbarService,
    dialogService: CatDialogService,
    confirmService: CatConfirmService,
    xlsxService: CatXlsxService,
    protected override service: AdoptionService
  ) {
    super(
      formService,
      datatableService,
      service,
      loaderService,
      snackbarService,
      dialogService,
      confirmService,
      { xlsx: xlsxService }
    );
  }

  export(filename: string): void {
    this.exportByService(
      {
        xlsx: { filename, sheetName: 'Pets para Adoção' },
      },
      this.service.exportPets(this.filterValueChanges$.getValue())
    );
  }
}

page-adoption.component.html

<cat-toolbar [config]="getToolbarInfo()"></cat-toolbar>

<cat-form [config]="filterForm"></cat-form>

<cat-datatable [config]="listConfig">
  <nav list-actions>
    <cat-icon-button (click)="export('Pets para Adoção')" icon="fa-solid fa-download"></cat-icon-button>
  </nav>
</cat-datatable>