Arquitetura Angular na UFG

Arquitetura frontend de sistemas em angular da universidade federal de Goiás.

Arquitetura

Este projeto é uma biblioteca de componentes com design e métodos reutilizaveis de front-end em Angular.

Instalação

Instale o pacote arquitetura via npm:

$ npm install --save arquitetura

Infelizmente, o npm não permite um pacote conter dependências de terceiros, desta forma, é necessário instalar os pacotes abaixo, se precefir, copie o trecho abaixo e cole em seu package.json:

"dependencies": {
    "@angular/animations": "~8.1.1",
    "@angular/cdk": "^8.1.1",
    "@angular/common": "^8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/flex-layout": "^8.0.0-beta.26",
    "@angular/material": "^8.1.1",
    "hammerjs": "^2.0.8"
}

Configuração

Inclua os seguintes atributos no arquivos do ambiente: (src/environments/environment.json):

api_url: '<API_URL>' //Example: https://mybackend.com

Importe o módulo da arquitetura no app.module.ts:

import { ArquiteturaModule } from 'arquitetura';

Declare o uso do módulo, passando como parâmetro o arquivo de environment:

ArquiteturaModule.forRoot(environment)

Adicione o componente lib-arquitetura no arquivo app.component.html:

<lib-arquitetura [titulo]="titulo" [menuPessoal]="menuPessoal" [login]="login" [sistema]="sistema" [perfilPadrao]="perfilPadrao">

Atributos

Atributo	Descrição	Tipo
titulo	Título do sistema	string
menuPessoal	Menu de configurações do usuário logado (Menu superior direito)	MenuPessoal
login	Usuário logado	string
sistema	Código do sistema no SAS	string
perfilPadrao	Perfil padrão do sistema no SAS	string

Exemplo de app-component.ts:

export class AppComponent implements OnInit {
  title = 'sicad-app';

  titulo: string = "Aplicação";
  menuPessoal: MenuPessoal[] = [];

  login: string = "ricardoborges";
  sistema: string = "SICAD";
  perfilPadrao: string = "SICAD_DEFAULT";

  ngOnInit() {
    this.menuPessoal.push(new MenuPessoal('Perfil', 'person', MenuPessoal.ICON_MATERIAL, '/#/'));
    this.menuPessoal.push(new MenuPessoal('Configurações', 'settings', MenuPessoal.ICON_MATERIAL, '/#/'));
    this.menuPessoal.push(new MenuPessoal('Sair', 'power_settings_new', MenuPessoal.ICON_MATERIAL, '/#/'));
  }
}

Arquivos Staticos

Importar arquivos estaticos no angular.json:

"styles": [
  "./node_modules/arquitetura/style/_styles.scss",
  "./node_modules/arquitetura/style/themes.scss",
  .
  .
  .
],

Componentes

Alert (html)

<arquitetura-alert [displayAlert]="displayAlert" [tipo]="tipo" [msgDestacada]="msgDestacada" [msg]="msg">
</arquitetura-alert>

Parâmetros	Descrição	Tipo	Obrigatório
displayAlert	Boolean que determina se será ou não exibido o alerta	boolean	Sim
tipo	Define o tipo de alerta a ser exibido	string	Sim
tipo = erro	#f2dede	-	-
tipo = ajuda	#e6e6e6	-	-
tipo = informacao	#d9edf7	-	-
tipo = sucesso	#dff0d8	-	-
tipo = alerta	#faf4d1	-	-
msgDestacada	Texto inicial em destaque	string	Não
msg	Texto descritivo	string	Sim

Alert (typescript)

  displayAlert: boolean;
  
  constructor(
    private emissorEventService: EmissorEventService
  ) { }
  
  ngOnInit() {
    this.emissorEventEmitter = this.emissorEventService.changeEmitted$.subscribe(
      resp => this.verificarEvento(resp)
    );
  }
  
  ngOnDestroy() {
    this.emissorEventEmitter.unsubscribe();
  }
  
  verificarEvento(res: Evento) {
    if (res.acao === 'fecharAlerta' && res.key === 'false') {
      this.displayAlert = false;
    }
  }

Botão Ação (html)

<arquitetura-botao-acao tipo="tipo"></arquitetura-botao-acao>

Parâmetros	Descrição	Tipo	Obrigatório
tipo	Define o tipo de alerta a ser exibido	string	Sim
tipo = avancar	normal = #28a745	hover = #1e7e34	-
tipo = buscar	normal = #007bff	hover = #0062cc	-
tipo = editar	normal = #ff7f00	hover = #ff5400	-
tipo = salvar	normal = #28a745	hover = #1e7e34	-
tipo = voltar	normal = #6c757d	hover = #545b62	-
tipo = cancelar	normal = #dc3545	hover = #bd2130	-

Botão Ação (typescript)

  emissorEventEmitter: Subscription;

  constructor(
    private emissorEventService: EmissorEventService
  ) { }

  ngOnInit() {
    this.emissorEventEmitter = this.emissorEventService.changeEmitted$.subscribe(
      resp => this.verificarEvento(resp)
    );
  }

  ngOnDestroy() {
    this.emissorEventEmitter.unsubscribe();
  }

  verificarEvento(res: Evento) {
    if (res.acao === 'botaoClicado' && res.key === 'tipo') {
      this.onTipo();
    }
  }

  onTipo() { }

OBS: Não é necessário implementar as ação de 'verificarEvento' para o botão cancelar.

Input (html)

<arquitetura-input matPrefix="{{matPrefix}}" type="type" fControlName="formControlName" value="value"
   placeholder="placeholder" readonly="readonly" matSuffix="{{matSuffix}}" matHintStart="matHintStart"
   matHintEnd="matHintEnd" [displayError]="validateFieldControls('formControlName')" msgError="{{msgError}}"
   fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="50" fxFlex.lg="33.33" fxFlex.xl="33.33">
</arquitetura-input>

Parâmetros	Descrição	Tipo	Obrigatório
matPrefix	Texto ou icone fixado no inicio da parte digitável do campo	string	Não
type	Define o tipo de entrada de dados do campo	string	Sim
fControlName	Nome dado ao elemento de controle do formulário, responsável por sincronizar um FormControl em um FormGroup	string	Sim
value	Valor a ser inserido no campo	string	Não
placeholder	Texto/Rótulo da informação esperada pelo campo	string	Sim
readonly	Define o campo como somente leitura	boolean	Não
matSuffix	Texto ou icone fixado no fim da parte digitável do campo	string	Não
matHintStart	Texto informativo fixado no inicio da parte inferior do campo	string	Não
matHintEnd	Texto informativo fixado no fim da parte inferior do campo	string	Não
displayError	Boolean que determina se será ou não exibido o erro	boolean	Não
msgError	Mensagem de erro a ser exibido para o campo	string	Não

Input (typescript)

  formulario: FormGroup;
  fieldErrorDescription: string;
  fieldErrorValue: string;
  
  constructor(
    private formBuilder: FormBuilder,
    private fieldValidationService: FieldValidationService
  ) { }
  
  ngOnInit() {
    this.formulario = this.formBuilder.group({
      control: [null, []]
    });
  }
  
  validateFieldControls(campo: string) {
    const retorno = this.fieldValidationService.validateFieldControls(this.formulario.get(campo));
    this.fieldErrorDescription = retorno[0];
    this.fieldErrorValue = retorno[1];
    return retorno[2];
  }

Author

👤 Ricardo Borges

• GitHub: @ricardoborges

👤 Max Veloso

• GitHub: @maxveloso