CRUDComponentBase
Abstração para páginas de CRUD
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 Dialog, ou, caso queira, poderá abrir uma Janela Lateral ou navegar para uma nova página.
Para abrir um dialog com seu formulário utilize o método openFormDialog.
import { CatCRUDComponentBase } from "@catrx/ui/common";
@Component({...})
export class PageExempleComponent extends CatCRUDComponentBase {
...
openDialog(data?: any) {
this.openFormDialog(
this.formService
.build<Cat>(data)
.text('Raça', 'race', (builder) =>
builder.grid(6).setRequired().generate()
)
.select('Sexo', 'sex', (builder) =>
builder
.setOptions(CatSexSelectOptions)
.grid(6)
.setRequired()
.generate()
)
.url('URL da Foto', 'photo', (builder) =>
builder.setRequired().generate()
)
.onSubmit((cat) => this.service.save(cat, data?.id))
.generate(),
!!data,
{ title: 'Gato' }
);
}
}
R (READ)
Para a parte de leitura, teremos aqui a utilização do componente de Datatable, onde teremos que configurar o mesmo, passando as colunas que serão exibidas, habilitando seletores, botões de ação e filtro.
import { CatCRUDComponentBase } from "@catrx/ui/common";
@Component({...})
export class PageExempleComponent extends CatCRUDComponentBase {
filterConfig = this.filterFormBuilder
.search('Filtro', 'filter', (builder) => builder.grid(3).generate())
.onChange((data) => this.filterValueChanges$.next(data?.filter))
.generate();
listConfig = this.datatableService
.build(this.filterValueChanges$, (filter) =>
this.service.getDatatable(filter)
)
.setColumns(['Foto', 'Sexo', 'Raça'])
.setItemLine({
columnIndex: 0,
component: (item) => new CatDynamicComponent(CatPhotoComponent, item.photo),
})
.setItemLine({ columnIndex: 1, text: (item) => item.sex })
.setItemLine({ columnIndex: 2, text: (item) => item.race })
.setActionButton({
iconName: 'fa-solid fa-pencil',
tooltip: 'Editar',
fnAction: (item) => this.openDialog(item),
})
.getSelection((selection) => (this.selection = selection))
.getDatasource((datasource) => (this.datasource = datasource))
.hasSelection()
.hasActions()
.generate();
...
}
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 abstração de Serviços HTTP.
import { CatCRUDComponentBase } from "@catrx/ui/common";
@Component({...})
export class PageExempleComponent extends CatCRUDComponentBase {
...
export(filename: string): void {
this.exportByService({
xlsx: { filename, sheetName: 'Gatos' }
}, this.service.export());
}
}
...
<cat-form [config]="filterConfig"></cat-form>
<cat-datatable [config]="listConfig">
...
<nav list-actions>
<cat-icon-button
*ngIf="datasource?.length > 0"
(click)="export('Lista de Gatos')"
icon="fa-solid fa-download"
tooltip="Exportar Lista">
</cat-icon-button>
</nav>
</cat-datatable>
U (UPDATE)
Terá a mesma implementação do Create, 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.
D (DELETE)
O componente de Datatable, 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.
Neste caso, todo a implementação para delete já está pronta para uso, bastando chamar pelo método deleteSelected por meio do click do botão.
...
<cat-datatable [config]="listConfig">
<nav list-checked-actions>
<cat-icon-button
(click)="deleteSelected()"
icon="fa-solid fa-trash-can"
tooltip="Excluir Selecionados">
</cat-icon-button>
</nav>
...
</cat-datatable>
Overview
Implementação Completa
1. Implementando serviço HTTP
import { CatFormListOptions } from "@catrx/ui/form";
export interface CatFilter {
filter?: string;
}
export interface Cat {
id?: number;
photo: string;
race: string;
sex: CatSexType;
}
export type CatSexType = 'M' | 'F';
export const CatSexSelectOptions: CatFormListOptions[] = [
{ value: 'M', name: 'Macho' },
{ value: 'F', name: 'Fêmea' },
];
2. Implementando componente de foto
import { Component } from '@angular/core';
import { CatDynamicComponentDataInterface } from '@catrx/ui/dynamic-component';
@Component({
template: `<img [src]="data" alt="Foto de Gato" width="100" height="100" />`,
styles: [
`
img {
border-radius: 50%;
}
`,
],
})
export class CatPhotoComponent implements CatDynamicComponentDataInterface {
data: string;
}
3. Implementando componente de página
<cat-toolbar [config]="getToolbarInfo()">
<nav buttons>
<cat-primary-button (click)="openDialog()">Incluir Gato</cat-primary-button>
</nav>
</cat-toolbar>
<cat-form [config]="filterConfig"></cat-form>
<cat-datatable [config]="listConfig">
<nav list-checked-actions>
<cat-icon-button
(click)="deleteSelected()"
icon="fa-solid fa-trash-can"
tooltip="Excluir Selecionados">
</cat-icon-button>
</nav>
<nav list-actions>
<cat-icon-button
*ngIf="datasource?.length > 0"
(click)="export('Lista de Gatos')"
icon="fa-solid fa-download"
tooltip="Exportar Lista">
</cat-icon-button>
</nav>
</cat-datatable>
4. Implementando módulo
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
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 {}
Last updated
Was this helpful?