FrontEnd - Guia para componentes customizados

Owned by Lucas Prestes, created
Last updated: yesterday at 1:27 pm
2 min read

Guia para tirar as dúvidas básicas de desenvolvimento de componentes customizados do front-end novo, exemplo: “como pego a unidade logada?”.

 Instruções

Unidade logada, como obter?

  • Adicione o private app: AppMainComponentno construtor

  • this.app?.unidadeAtual?.id

Operador logado, como obter?

  • Adicione o private loginService: LoginService no construtor

  • this.loginService.usuario

Como obter os Parâmetros (Comerciais e GTK) ?

Como abrir uma Outra Tela (em aba)?

  • De preferência no service, adicione private abaService: AbasService no construtor

  • para a chamada execute:

    • this.abaService.abrirDin(titulo, 'PedidoTransportadorComponent', {pedido}, AbasService.modTMSEmbarcador) ;

    • Nesse caso esta chamando um componente custom em uma nova aba

  • Caso queira um componente dinâmico em nova aba:

    • this.abaService.abrirDin(titulo, 'ListaComponent', {nomeFormulario: 'nomeDoSeuFormDinamico'}, AbasService.modDin)

Como abrir uma Modal (Child)?

  • De preferência no service, adicione private formService: FormulariosService no construtor

  • no seu método que abrirá:

    • this.formService.exibirFormularioAuxiliar('nomeDoForm',{obj: objParaOFormDinamico}, 50, 40);

    • os dois últimos parâmetros são o tamanho da modal em %, são opcionais.

  • Para abrir um customizado a chamada se da da mesma forma, porém, no cadastro do form, é necessário informar o modulo e componente custom.

Como Fechar a Aba atual?

  • Adicione uma propriedade no componente: public aba: Aba;

  • Adicione no construtor: private abaService: AbasService

  • No código, onde quer fechar: this.abaService.removerAba(this.aba);

Como Disparar uma ação para uma tela “pai”?

Quando você possui uma tela que gerou outra tela, e quer ter a opção de disparar uma ação para a tela que originou a atual.

  • Adicione as propriedades:

    callback: Function; outerThis: any;

    na tela ‘filha’

  • Ao abrir a tela filha, no componente ‘pai’ deve ser enviado pelo parâmetro a referência do método de callback e o outerThis do componente pai.

    • this.abaService.abrirDin(titulo, 'PedidoTransportadorComponent', {pedido,callback,outerThis}, AbasService.modTMSEmbarcador) ;

  • No ngOnInit do componente filho deve receber os parâmetros, exemplo:

let params = (this.aba!=null && this.aba.params!=null ) ? this.aba.params : {callback: null, outerThis:null};     this.callback = params.callback ?? null;     this.outerThis = params.outerThis ?? null;

  • No momento que quiser executar o callback:

if(this.callback!=null)       this.callback.call(this.outerThis);



Destaque informações importantes em um painel como este. Para editar a cor ou o estilo desse painel, selecione uma das opções no menu.

 Artigos relacionados