Cat UI
GitHub
  • Comece por aqui
    • 1. Instalação
      • Icones
      • Bootstrap
    • 2. Aplicando Tema
    • 3. Estrutura da aplicação
    • 4. Segurança
      • OpenID (Opcional)
      • Claims (Optional)
  • Menu
    • Sidenav
    • Toolbar
    • Dropdown
    • Tab
  • Exibição de Dados
    • Datatable
    • Componentes Dinâmicos
    • Exportação e Download de Dados
      • .csv
      • .xlsx
      • Visualizar .pdf
      • Download base64
    • Chip
  • Formulário
    • Formulário Dinâmico
    • Lista de Itens
    • Campos Personalizados
    • Stepper
    • Expansive Panel
    • Filtro Sobre Demanda
  • Janelas e Alertas
    • Dialog
    • Confirm
    • Alert
    • Snackbar
    • SideWindow
    • Notifications
    • Tooltip
  • Loaders
    • Spinner
    • Loader Page
  • Botões
    • Button
  • Abstrações
    • ServiceBase
    • ComponentBase
    • CRUDComponentBase
    • FormBase
  • Guias
    • Criando uma Aplicação de CRUD
      • Criando Projeto
      • Estrutura
      • Tela de Login
      • Menu
      • Tela de Adoção
      • Serviço HTTP
      • Lista de Pets
      • Formulário de Cadastro e Edição
      • Excluir Pet
      • Conclusão
Powered by GitBook
On this page
  • C (CREATE)
  • R (READ)
  • U (UPDATE)
  • D (DELETE)
  • Overview
  • Implementação Completa

Was this helpful?

  1. Abstrações

CRUDComponentBase

Abstração para páginas de CRUD

PreviousComponentBaseNextFormBase

Last updated 2 years ago

Was this helpful?

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 { 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)

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();

  ...
}
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)

D (DELETE)

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' },
];
import { Injectable } from "@angular/core";
import { CatServiceBase } from "@catrx/ui/common";
import { HttpClient } from '@angular/common/http';
import { Cat, CatFilter } from "./cat.interface";
import { CatDatatableDataHttpResponse } from "@catrx/ui/datatable";
import { map } from "rxjs/internal/operators/map";
import { Observable } from "rxjs/internal/Observable";

@Injectable({ providedIn: 'root' })
export class CatService extends CatServiceBase<CatFilter, Array<Cat>, Cat> {
  constructor(http: HttpClient) {
    super(http, 'cat', {
      useMockup: true,
      mockupStartBase: [
        {
          id: 1,
          race: 'Frajola',
          sex: 'M',
          photo:
            'https://static1.patasdacasa.com.br/articles/7/49/77/@/20775-o-gato-preto-e-branco-tem-um-charme-que-articles_media_mobile-2.jpg',
        },
        {
          id: 2,
          race: 'Tigrado',
          sex: 'M',
          photo:
            'https://t1.ea.ltmcdn.com/pt/posts/1/2/6/4_gato_europeu_23621_3_600.jpg',
        },
        {
          id: 3,
          race: 'Branco',
          sex: 'M',
          photo:
            'https://static1.patasdacasa.com.br/articles/5/29/95/@/12462-saiba-o-que-e-bolsa-primordial-e-sua-fun-articles_media_mobile-1.jpg',
        },
      ],
    });
  }

  public export() {
    return this.exportByService(() => this.getDatatable());
  }

  public getDatatable(filter?: CatFilter): Observable<CatDatatableDataHttpResponse<Cat>> {
    return this.getAll(filter).pipe(map(response => {
      return {
        count: response.length,
        items: response
      };
    }))
  }
}

2. Implementando componente de foto

cat-photo.component.ts
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>
import { Component } from '@angular/core';
import { CatCRUDComponentBase } from '@catrx/ui/common';
import { CatConfirmService } from '@catrx/ui/confirm';
import { CatDatatableService } from '@catrx/ui/datatable';
import { CatDialogService } from '@catrx/ui/dialog';
import { CatDynamicComponent } from '@catrx/ui/dynamic-component';
import { CatFormService } from '@catrx/ui/form';
import { CatLoaderPageService } from '@catrx/ui/loader-page';
import { CatSnackbarService } from '@catrx/ui/snackbar';
import { CatCsvService, CatXlsxService } from '@catrx/ui/utils';
import { CatPhotoComponent } from './cat-photo.component';
import { Cat, CatFilter, CatSexSelectOptions } from './services/cat.interface';
import { CatService } from './services/cat.service';

@Component({
  templateUrl: './page-crud-example.component.html',
  styles: [
    `
      cat-form {
        display: block;
        margin: 20px 20px 10px;
      }
    `,
  ],
})
export class PageCRUDExampleComponent extends CatCRUDComponentBase<
  CatFilter,
  Cat
> {
  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();

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

  export(filename: string): void {
    this.exportByService({ 
      xlsx: { filename, sheetName: 'Gatos' } 
    }, this.service.export());
  }

  openDialog(data?: Cat) {
    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' }
    );
  }
}

4. Implementando módulo

page-crud-example.module.ts
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.

Dialog
Janela Lateral
formulários dinâmicos
Dialog
spinner
Snackbar
Dialog
Datatable
Datatable
abstração de Serviços HTTP
Datatable
Create
CatUi
Logo