# Tela de Adoção

A propota desta tela é a de cadatrar Pets para adoção, onde teremos um [Dialog ](/janelas-e-alertas/dialog.md)de [Formulário](/formulario/formulario-dinamico.md) para Cadastro e Edição, um filtro e um [Datatable](/exibicao-de-dados/datatable.md) 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

{% code title="page-adoption.component.html" %}

```html
<cat-toolbar [config]="getToolbarInfo()"></cat-toolbar>
```

{% endcode %}

{% hint style="info" %}
Iremo fazer apenas um primeiro start para a classe de serviço e daremos continuidade nela na parte de [Serviço HTTP](/guias/criando-uma-aplicacao-de-crud/servico-http.md).
{% endhint %}

{% code title="app/shared/services/adoption/adoption.service.ts" lineNumbers="true" %}

```typescript
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.');
  }
}
```

{% endcode %}

{% code title="page-adoption.component.ts" lineNumbers="true" %}

```typescript
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.');
  }
}
```

{% endcode %}

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

{% hint style="info" %}
Incluiremos nesta rota o CatAuthGuard para a proteção da rota, onde apenas usuários autenticados terão acesso.
{% endhint %}

{% code title="page-adoption.routing.module.ts" lineNumbers="true" %}

```typescript
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 {}
```

{% endcode %}

{% code title="page-adoption.module.ts" lineNumbers="true" %}

```typescript
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 {}
```

{% endcode %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.catui.igordrangel.com.br/guias/criando-uma-aplicacao-de-crud/tela-de-adocao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.