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
  • 1. Criando componente de página
  • 2. Criando módulo da página e seu arquivo de rotas

Was this helpful?

  1. Guias
  2. Criando uma Aplicação de CRUD

Tela de Adoção

PreviousMenuNextServiço HTTP

Last updated 2 years ago

Was this helpful?

A propota desta tela é a de cadatrar Pets para adoção, onde teremos um de para Cadastro e Edição, um filtro e um para listagem, exportação e exclusão do dados.

Iremos incluir Pets informando Raça, Sexo, Peso, Vacinas Tomadas e idade, sendo Vacinas e Idade opcionais.

1. Criando componente de página

page-adoption.component.html
<cat-toolbar [config]="getToolbarInfo()"></cat-toolbar>

Iremo fazer apenas um primeiro start para a classe de serviço e daremos continuidade nela na parte de .

app/shared/services/adoption/adoption.service.ts
import { Injectable } from '@angular/core';
import { CatServiceBase } from '@catrx/ui/common';
import { HttpClient } from '@angular/common/http';
import { CatDatatableDataHttpResponse } from '@catrx/ui/datatable';
import { Observable } from 'rxjs/internal/Observable';

@Injectable({ providedIn: 'root' })
export class AdoptionService extends CatServiceBase {
  constructor(httpClient: HttpClient) {
    super(httpClient, 'adoption', {
      useMockup: true,
    });
  }

  getDatatable(filter: any): Observable<CatDatatableDataHttpResponse<any>> {
    throw new Error('Method not implemented.');
  }
}
page-adoption.component.ts
import { AdoptionService } from './../../shared/services/adoption/adoption.service';
import { Component } from '@angular/core';
import { CatCRUDComponentBase } from '@catrx/ui/common';
import { CatDatatableService, DatatableConfig } from '@catrx/ui/datatable';
import { CatFormService } from '@catrx/ui/form';

@Component({
  templateUrl: './page-adoption.component.html',
})
export class PageAdoptionComponent extends CatCRUDComponentBase {
  listConfig: DatatableConfig<any>;

  constructor(
    formService: CatFormService,
    datatableService: CatDatatableService,
    protected override service: AdoptionService
  ) {
    super(formService, datatableService, service);
  }

  export(filename: string): void {
    throw new Error('Method not implemented.');
  }
}

2. Criando módulo da página e seu arquivo de rotas

Incluiremos nesta rota o CatAuthGuard para a proteção da rota, onde apenas usuários autenticados terão acesso.

page-adoption.routing.module.ts
import { Routes, RouterModule } from '@angular/router';
import { CatAuthGuard } from '@catrx/ui/core';
import { PageAdoptionComponent } from './page-adoption.component';
import { NgModule } from '@angular/core';

const routes: Routes = [
  {path: '', component: PageAdoptionComponent, canActivate: [CatAuthGuard]}
]

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class PageAdoptionRoutingModule {}
page-adoption.module.ts
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { CatPrimaryButtonComponent } from '@catrx/ui/button/primary';
import { CatConfirmModule } from '@catrx/ui/confirm';
import { CatDatatableModule } from '@catrx/ui/datatable';
import { CatDialogModule } from '@catrx/ui/dialog';
import { CatFormModule } from '@catrx/ui/form';
import { CatIconButtonModule } from '@catrx/ui/icon-button';
import { CatToolbarModule } from '@catrx/ui/toolbar';
import { PageAdoptionComponent } from './page-adoption.component';
import { PageAdoptionRoutingModule } from './page-adoption.routing.module';

@NgModule({
  declarations: [PageAdoptionComponent],
  imports: [
    CommonModule,
    CatToolbarModule,
    CatFormModule,
    CatDatatableModule,
    CatDialogModule,
    CatConfirmModule,
    CatIconButtonModule,
    CatPrimaryButtonComponent,
    PageAdoptionRoutingModule,
  ],
})
export class PageAdoptionModule {}
Dialog
Formulário
Datatable
Serviço HTTP