DgCrud

This library was generated with Angular CLI version 12.1.0.

Por questão de compatibilidade essa lib funcionará apenas a partir do @angular/core 12.1.0

Desenvolvida para gerir CRUD's de maneira rápida e eficiente.

• Inicio rápido
• Diretivas
• Decorators

Início rápdido

• Inicio rápido
  • Cadastrando Modulo
  • Cadastrando Rotas
  • Extendendo a AbstractEntity
  • Extendendo o AbstractService
  • Montando a tabela
  • Montando component Inert/Edit

Essa biblioteca utilizará um cliclo de vida totalmente baseado nas extensões de suas classes principais.

Para melhor exemplificar a utilização, usaremos um CRUD fictício de 'Produtos'

Cadastrando Modulo

@NgModule({
  declarations: [
    ProdutosTableComponent, // seu componente de tabela
    ProdutosInsertEditComponent // seu componente de indersão e edição
  ],
  imports: [
    ...
    DgCrudModule
  ]
})
export class ProdutosModule { }

Cadastrando Rotas

Esse passo é importante pois o id será necessário para a montagem da tela de insert/edit

const routes: Routes = [
  {
    path: 'produtos',
    component: ProdutosTableComponent
  },
  {
    path: 'produtos',
    children: [
      { path: ':id', component: ProdutosInsertEditComponent },
    ]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Extendendo a AbstractEntity

Comece extendendo a class AbstractEntity, ela servirá de suporte para todas as outras classes; É aqui que informarremos todos os atributos que iremos utilizar em nosso crud.

Aqui também podem ser setados dados de tabelas, paginações e filtros, feitos por meio de anotações.

Por hora veremos apenas o básico de @DgTableColumn pois essa anotação será importante para a construção da tabela de exibição. Sendo a partir dela, que informaremos o nome a ser exibido na coluna da babela.

import {AbstractEntity, DgTableColumn} from "dg-crud";

export class ProdutosEntity extends AbstractEntity {

  constructor(
    id?: number | string,
    nomeProduto?: string,
    valorProduto?: number,
    codicoProduto?: string
  ) {
    super();
    this.id = id;
    this.nomeProduto = nomeProduto;
    this.valorProduto = valorProduto;
    this.codicoProduto = codicoProduto;
  }

  @DgTableColumn({ columnName: 'Nome do produto' })
  public nomeProduto: string | undefined;

  @DgTableColumn({ columnName: 'Valor do produto' })
  public valorProduto: number | undefined;

  public codicoProduto: string | undefined;
}

Extendendo o AbstractService

O service será responsável por buscar os dados no servidor e por isso será necessário para os próximos passos.

import {AbstractHttpService} from "dg-crud";

@Injectable({
  providedIn: 'root'
})
export class ProdutosService extends AbstractHttpService<ExemploEntity>{

  constructor(
    public config: ConfigDgCrudService,
    public http: HttpClient,
    public location: Location
  ) {
    super(
        {
          http, 
          location
        },
      'http:localhost:3000', // BASE_DO_SEU_SERVIDOR,
      'api/produtos' // URL_BASE_DO_SEU_FLUXO
    );
  }
}

Montando a tabela

Após fazer as abstrações acima, teremos tudo necessário para iniciar uma tabela dinâmica. para isso faça o seguinte em seu componente;

ProdutosTableComponent #TS

@Component({
  selector: 'app-produtos-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})
export class ProdutosTableComponent implements OnInit {

  public entity = new ProdutosEntity()

  constructor(
    public service: ProdutosService
  ) {
      // use o metodo setConfigTable() para gerar os dados da tabela
      this.entity.setConfigTable()
  }

  ngOnInit(): void {
  }

}

setConfigTable( {pagination} | null | undefined )

Esse metodo aceitará 3 configurações

• NULL
  • não passará nenhum parametro de paginação
• Nenhum parametro (undefined)
  • serão utilizados os valores padrões de paginação (os valores utilizados para exemplificar a alteração são os valores padrões)
• Valores alterados

ProdutosTableComponent #HTML

<crud-data-table
  [entityMap]="entity"
  [service]="service"
>
</crud-data-table>
<button crud-adicionar> novo </button>

Montando component Inert/Edit

ProdutosInsertEditComponent #TS

@Component({
  selector: 'app-produtos-insert-edit',
  templateUrl: './produtos-insert-edit.component.html',
  styleUrls: ['./produtos-insert-edit.component.scss']
})
export class ProdutosInsertEditComponent extends AbstractInsertEdit<ProdutosEntity> implements OnInit {

  public form = new FormGroup({
    nomeProduto: new FormControl('', [Validators.required]),
    valorProduto: new FormControl('', [Validators.required]),
    codicoProduto: new FormControl('', [Validators.required])
  })

  constructor(
    public service: ProdutosService,
    public http: HttpClient,
    public location: Location
  ) {
    super(service, {http, location})
  }

  ngOnInit(): void {
    super.ngOnInit()
  }

  /**
   * adicione os valores da entidade no formulário
   */
  afterFetchEntity() {
    this.form.patchValue({
      ...this.entity
    })
  }
  /**
   * Inicie uma entidade nova caso se trate de uma insersão
   */
  initNewEntity(): void {
    this.entity = new ProdutosEntity();
  }

  /**
   * Verifique os valores, ou faça as validações que achar necessário
   * ao final retorne um boolean para continuar ou parar a execução
   */

  beforeSaveEntity(): boolean{
    if (!this.form.valid) {
      this.form.markAllAsTouched();
      return false;
    }
    this.entity = {
      ...this.form.value
    }
    return true;
  }
}

ProdutosInsertEditComponent #HTML

<form [formGroup]="form">
  <input formControlName="nomeProduto">
  <br>
  <input formControlName="valorProduto">
  <br>
  <input formControlName="codicoProduto">
</form>

<button crud-voltar> voltar </button>
<button crud-salvar> Salvar </button>

Diretivas

As diretivas do angular são usadas para controle de estados e funções. Use as diretivas para iniciar a criação de novos registros, chamar medoto de salvamento, voltar a tela anterior e caso necessário, criar um botão de excluir registro.

veja todas as diretivas;

crud-adicionar

Redirecionará você para uma tela de url igual a atual com o acrescímo do valor '/novo' no final. Seguindo o padrão de declaração de rotas aqui proposto.

<button crud-adicionar> Novo </button>

crud-salvar

Essa diretiva chamará o metodo save() que dará início ao processo de salvamento dos dados. Essa diretiva aceirará um complemento de url a ser adicionado a url, ure-o para criar botões de salvamento com finalidades diferentes dentro de uma mesma entidade.

veja o cilco completo XXXXXXX-ADICIONAR LINK DO TÓPICO - XXXXXXX.

<button crud-salvar> Salvar </button> <!-- SALVARÁ EM LINK PADRÃO -->
<button crud-salvar endpoint="salvar_parcial_de_dados"> Salvar </button>

crud-voltar

Como proposto pelo nome, essa diretiva voltara uma página no roteamento, o que normalmente levará o usuário a pagina de tabela de registro.

Perceba o uso da palavra "normalmente", se o usuário vier de outro lugar se não do caminho padrão, ele será redirecionado para o lugar de onde veio. Isso ocorre pois usamos o roteamento do angular para realizar as trocas de tela.

<button crud-voltar> Novo </button>

crud-deletar

Iniciará um popup de confirmação para que o usuário confirme a exclusão do registro, após isso, a tabela de dados será automaticamente atualizada.

Essa diretiva só funcionará se usada dentro do conponente que extender o AbstractInserEditComponent

<button crud-deletar> Novo </button>

Decorators

Os decorators sãos os principais agentes de criação das tabelas. Feitos para serem usados nas Entidades, eles serão os criadores de colunas, filtros e ações apresentadas nas tabelas. Com a finalidade de simplificar, foram criados 2 decorators diferentes, um referente as colunas e outro referente as ações da tabela, abaixo segue explicação respectivamente.

@DgTableColumn( interfaceDgTableColumn{} )

Esse decorator é responsável por criar a tabela de fato, veja abaixo os valores aceitos.

| Valor | Tipo | Explicação | |------------------------|---------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | columnName | string | Nome da coluna na tabela | | mask | 'cpf' / 'cnpj' / 'cep' / 'telefone' / 'celular' / 'rg' / 'conta' / 'egencia' / string | (Funcionará apenas em numeros) Use uma das mas simples já definidas ou informe a sua própria mascara. Para isso, a lib dg-crud carrega como dependencia a lib NgxMask, clique para ir a documentação externa | | resource | Function / Array / Object | Função, array ou objeto aplicado a celula da tabela, servirá para criar filtros dinamicos. Em casos de array ou objetos o index/nome do atributo será utilizado. Para saber mais sobre o funcionamento da função clique aqui | | declaratResourceMethod | 'func' / array' / 'obj' | Declare qual tipo de resolução deseja no resourcer. Isso servirá em casos de erro na identificação por parte da lib, é opicional, apenas lembre disso se o resultado do resouce não for o esperado. | | columnClassName | string | Adicione classes as celulas da coluna | | width | string | Determine de maneira fixa o tamanho da coluna | | fixedColumnEnd | boolean | Fixar coluna no final da tabela | | fixedColumnStart | boolean | Fixar coluna no início da tabela |

Exemplos

Resource

Function(celula, row)

Neste caso, 2 parâmetros serão passados a função, sendo esses;

• celula : o valor individual da celula (o campo da entidade)
• row: o valor total da row (a entidade completa retornada, independente se os dados estão ou não na tabela)

Object

A celula buscará pelo nome dentro do objeto

Array

A celula usará o numero retornado no index do array

Seguem abaixo os exemplos

import {AbstractEntity, DgTableColumn} from "dg-crud";

const status = ['inativo', 'ativo'];

const categorias = {
  cama_mesa_banho: 'Cama, Mesa e Banho',
  decoração: '<span style="...">Decoração</span>'
}

const estoque = (cel: number) => {
    if (cel > 0) {
        return cel
    }
    
    return '<span> Estoque zerado </span>'
}

const acaoEstoqeue = (cel: undefined, row: ProdutosEntity) => {
    if (row.estoque > 1500) {
        return 'inicie uma promoção'
    } else if (row.estoque > 10) {
        return 'contatar fornecedor'
    }
}

export class ProdutosEntity extends AbstractEntity {

  constructor(
    id?: number | string,
    estoque?: number,
    status?: number,
    categoria?: string
  ) {
    super();
    this.id = id;
    this.nomeProduto = nomeProduto;
    this.estoque = valorProduto;
    this.status = codicoProduto;
  }

  @DgTableColumn({ columnName: 'Estoque', resource: estoqeue })
  public estoque: number | undefined;

  @DgTableColumn({ columnName: 'Status', resource: status, declaratResourceMethod: 'array' })
  public status: number | undefined;
  
  @DgTableColumn({ columnName: 'Categoria', resource: status, declaratResourceMethod: 'obj' })
  public categoria: string | undefined;

  @DgTableColumn({ columnName: 'Ação estoque', resource: acaoEstoqeue })
  public acaoEstoque: undefined 
}

@DgActionsTable()

FINALIZAR ANTES DE UPAR

• adicionar link de topico em * Diretivas > crud-salvar