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. Comece por aqui

3. Estrutura da aplicação

Previous2. Aplicando TemaNext4. Segurança

Last updated 2 years ago

Was this helpful?

O Cat UI possui uma estrutura inicial, onde será disponibilizada toda a "casca" necessária para sua aplicação, como:

  • Sistema de autenticação JWT ou ;

  • Sistema de Notificações com PushNotification (Não notifica com a aba ou browser fechados);

  • SideBar Menu;

  • Modo Claro e Noturno (Sincroniza com o tema padrão do usuário no navegador);

  • Definição de Logotipo (Modo claro e noturno);

Uso

1. Configurando environment

O Cat UI possui uma interface de environment própria, onde fornece configurações de segurança e nomeação de variáveis no localStorage.

import { CatEnvironmentInterface } from "@catrx/ui/common";

export const environment: CatEnvironmentInterface = {
  production: false,
  storageTokenName: 'app-example-token'
};

2. Importando módulo principal

import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CatUiModule } from '@catrx/ui';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [AppComponent],
  imports: [CatUiModule.forRoot(environment), AppRoutingModule],
  bootstrap: [AppComponent],
})
export class AppModule {}

3. Configurando app.component

ATENÇÃO

O token deve possuir o atributo login para que o nome desejado apareça no menu do usuário.

import { Component } from '@angular/core';
import { CatLogotypeApp, CatTokenService } from '@catrx/ui';
import { CatFormModule, CatFormService } from '@catrx/ui/form';
import {
  CatDynamicComponentDataInterface,
  CatDynamicComponentModule,
} from '@catrx/ui/dynamic-component';
import { Observable } from 'rxjs';
import { CatFormBase } from '@catrx/ui/common';
import { CommonModule } from '@angular/common';
import { CatButtonModule } from '@catrx/ui/button';

@Component({
  standalone: true,
  imports: [
    CommonModule,
    CatDynamicComponentModule,
    CatFormModule,
    CatButtonModule,
  ],
  template: `
    <form class="login-content" (submit)="submit($event)">
      <cat-dynamic-component class="logotype" [component]="data" />

      <cat-form #form [config]="loginFormConfig" />

      <button
        catButton="primary"
        [showLoader]="submitLoader$ | async"
        class="w-100"
        type="submit"
      >
        Entrar
      </button>
    </form>
  `,
  styles: [
    '.login-content { width: 250px; }',
    '.logotype { display: flex; justify-content: center; margin: 0 0 40px; } ',
  ],
})
export class LoginComponent
  extends CatFormBase
  implements CatDynamicComponentDataInterface
{
  data: CatLogotypeApp;

  loginFormConfig = this.formService
    .build()
    .text('Usuário', 'login', (builder) =>
      builder.focus().setRequired().generate()
    )
    .password('Senha', 'password', (builder) =>
      builder.setRequired().generate()
    )
    .onSubmit(
      (data) =>
        new Observable((observe) => {
          setTimeout(() => {
            this.tokenService.setDecodedToken(data, 'demo');
            observe.next();
            observe.complete();
          }, 1000);
        })
    )
    .generate();

  constructor(
    private formService: CatFormService,
    private tokenService: CatTokenService
  ) {
    super();
  }
}
import { Component } from '@angular/core';
import { CatAppService } from '@catrx/ui';
import { UserService } from './shared/services/user/user.service';
import { LoginComponent } from './login.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  appConfig = this.appService
    .build('Cat UI', {    
      autoAuth: false,
      jwt: {
        loginComponent: LoginComponent
      },
      onAuth: (decodedToken) => this.userService.getMenu(decodedToken),
    })
    .setLogotype({
      default: '../assets/logotype.svg',
      defaultForUncollapse: '../assets/logo.svg',
      negative: '../assets/logotype-negative.svg',
      negativeForUncollapse: '../assets/logo-negative.svg',
    })
    .enableDarkMode()
    .generate();

  constructor(
    private appService: CatAppService,
    private userService: UserService) {}
}
<cat-app-container [config]="appConfig">
  <ng-container router-container>
    <router-outlet></router-outlet>
  </ng-container>
</cat-app-container>
OpenID