Este abstração possui todos os métodos necessárias para uma página de CRUD, utilizando todo o potencial do Cat UI.
C (CREATE)
Para a parte de criação existe a opção padrão que é utilizando , ou, caso queira, poderá abrir uma ou navegar para uma nova página.
Para abrir um dialog com seu formulário utilize o método openFormDialog.
O método openFormDialog utiliza por padrão o componente de , permitindo a configuração de um com formulário sem a necessidade de criar arquivos para tal.
import { NgModule } from '@angular/core';
import { PageCRUDExampleComponent } from './page-crud-example.component';
import { CommonModule } from '@angular/common';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { CatFormModule } from '@catrx/ui/form';
import { CatDatatableModule } from '@catrx/ui/datatable';
import { CatDialogModule } from '@catrx/ui/dialog';
import { CatConfirmModule } from '@catrx/ui/confirm';
import { PageCRUDExampleRoutingModule } from './page-crud-example.routing.module';
import { CatPrimaryButtonComponent } from '@catrx/ui/button';
import { CatIconButtonModule } from '@catrx/ui/icon-button';
import { CatPhotoComponent } from './cat-photo.component';
@NgModule({
declarations: [PageCRUDExampleComponent, CatPhotoComponent],
imports: [
CommonModule,
CatToolbarModule,
CatFormModule,
CatDatatableModule,
CatDialogModule,
CatConfirmModule,
CatIconButtonModule,
CatPrimaryButtonComponent,
PageCRUDExampleRoutingModule,
],
})
export class PageCRUDExampleModule {}
5. Configurando xlsx
app.module.ts
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CatUiModule } from '@catrx/ui/core';
import { environment } from '../environments/environment';
@NgModule({
declarations: [AppComponent],
imports: [CatUiModule.forRoot(environment, {
xlsxConfig: {
headerBackgroundColor: '#212121',
headerFontColor: '#f1f1f1',
normalizeHeader: true
}
}), AppRoutingModule],
bootstrap: [AppComponent],
})
export class AppModule {}
Ao realizar o submit no formulário gerado, já será realizado o disparo de no botão de submit junto com seu bloqueio...após o retorno da API em caso de sucesso ou error um será exibido de acordo e em caso de sucesso o será fechado e um comando de reloadList será disparado, em seguida o componente de será recarregado.
Para a parte de leitura, teremos aqui a utilização do componente de , onde teremos que configurar o mesmo, passando as colunas que serão exibidas, habilitando seletores, botões de ação e filtro.
A parte de leitura também existe a possibilidade de exportação em .csv ou .xlsx, e para isso, utilizaremos o método exportByService presente na .
Terá a mesma implementação do , porém, precisará informar o objeto que deseja editar, para que após a abertura do formulário, o mesmo seja automaticamente preenchido e um comando de PUT seja enviado após o submit.
O componente de , possui em suas configurações, a opção de habilitar seletores ou incluir botões de ação. Aproveitando este recurso, iremos implementar a ação de DELETE por meio de seletores na lista.