O Cat Ui utiliza um conceito de builder onde com chamadas de métodos encadeados permitirá a criação de formulários sem a necessidade de HTML e CSS, focando apenas na regra de negócio, garantindo assim, mais produtividade.
API
hasActions
Permite a inclusão de botões de ação para cada item da lista.
Possui um parâmetro opcional para ativação e desativação para casos de permissões de acesso.
hasSelection
Permite a seleção de dados na lista.
Possui um parâmetro opcional para ativação e desativação para casos de permissões de acesso.
setService
Informe uma function que passa como parâmetro o filtro recebido em e retorne um Observable ou requisições HTTP de HttpClient.
Este método possui um parâmetro opcional onde, poderá informar a forma de carga dos dados, o indice de localização da lista e do contador total de dados, para casos de retorno de um objeto ao invés de uma lista direta.
setFilter
Este método permite incluir um Observable para a realização de filtros...ideal para inclusão de valueChanges do FormGroup ou Observables customizados.
Os dados passados no observable são fornecidos no método para que possa utilizar em requisições HTTP ou filtrando em memória utilizando o datasource fornecido em .
setColumns
Inclua a partir deste método os nomes das colunas que serão exibidas no cabeçalho da tabela.
setItemLine
setActionButton
Permite a configuração de um botão de ação de forma totalmente personalizável.
getSelection
Fornece um objeto contendo todas as informações com relação a itens seletionados na lista.
getDatasouce
Uso
page-datatable-example.module.ts
import { NgModule } from "@angular/core";
import { PageDatatableExampleRoutingModule } from "./page-datatable-example.routing.module";
import { PageDatatableExampleComponent } from "./page-datatable-example.component";
import { CatDatatableModule } from "@catrx/ui/datatable";
import { CatFormModule } from "@catrx/ui/form";
@NgModule({
declarations: [PageDatatableExampleComponent],
imports: [
CatFormModule,
CatDatatableModule,
PageDatatableExampleRoutingModule
]
})
export class PageDatatableExampleModule {}
page-datatable-example.service.ts
import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { delay } from "rxjs/internal/operators/delay";
import { first } from "rxjs/internal/operators/first";
import { map } from "rxjs/internal/operators/map";
@Injectable({providedIn: 'root'})
export class PageDatatableExampleService {
constructor(private http: HttpClient) {
}
public getAll(filter: any) {
let endpoint = 'municipios';
if (filter.uf) {
endpoint = `estados/${filter.uf}/municipios`;
}
return this.http
.get<any[]>(`https://servicodados.ibge.gov.br/api/v1/localidades/${endpoint}`)
.pipe(
map((response) =>
response.map((item) => {
return {
estado: item['regiao-imediata']['regiao-intermediaria'].UF.nome,
municipio: item.nome,
};
})
),
delay(2000),
first()
);
}
}