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

Was this helpful?

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

Serviço HTTP

adoption.interface.ts
import { CatFormListOptions } from "@catrx/ui/form";

export interface Pet {
  id?: number;
  race: string;
  sex: PetSexType;
  weight: string;
  vacines: PetVacines[];
  yearsOld?: string;
}

export type PetSexType = 'M' | 'F';
export const PetSexOptions: CatFormListOptions[] = [
  { value: 'M', name: 'Macho' },
  { value: 'F', name: 'Fêmea' },
];
export interface PetVacines {
  name: string;
  dateApplied: string;
}

export interface PetFilter {
  race?: string;
  sex?: PetSexType;
}
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 { map } from 'rxjs/internal/operators/map';
import { Observable } from 'rxjs/internal/Observable';
import { PetFilter, Pet } from './adoption.interface';
import { klArray } from '@koalarx/utils/operators/array';

@Injectable({ providedIn: 'root' })
export class AdoptionService extends CatServiceBase<
  PetFilter,
  Array<Pet>,
  Pet
> {
  constructor(httpClient: HttpClient) {
    super(httpClient, 'adoption', {
      useMockup: true,
      mockupStartBase: [
        {
          id: 1,
          race: 'Frajola',
          sex: 'M',
          weight: '7Kg',
          yearsOld: '3 anos',
          vacines: [
            {name: 'V5', dateApplied: '2023-01-05'}
          ]
        }
      ]
    });
  }

  getDatatable(
    filter: PetFilter
  ): Observable<CatDatatableDataHttpResponse<Pet>> {
    return this.getAll().pipe(map((petsBase) => {
      const pets = klArray(petsBase)
        .filter(filter?.race ?? '', 'race')
        .filter(filter?.sex ?? '', 'sex')
        .getValue();

      return {
        items: pets,
        count: pets.length
      };
    }));
  }

  exportPets(filter: PetFilter) {
    return this.exportByService(() => this.getDatatable(filter));
  }
}
PreviousTela de AdoçãoNextLista de Pets

Last updated 2 years ago

Was this helpful?