lib-frontframe

Package to help you develop an Angular+ frontend.

Deploy

Use package manager npm.

npm install
ng build frontframe
npm publish

Installation

npm i lib-frontframe --save-dev

Usage

import { FormComponent } from 'lib-frontframe/dist/frontframe';
import { BreadcrumbService } from 'lib-frontframe/dist/frontframe';

Confirmation Dialog

Example

import { ConfirmacaoComponent } from 'lib-frontframe/dist/frontframe';

constructor(
    private confirmacaoComponent: ConfirmacaoComponent
){}

ngOnInit () {
    this.confirmacaoComponent.confirmarSimples(() => console.log('callback sucesso'),
                                               () => console.log('callback falha'));
}

Most common forms of Dialog Box

public confirmarExclusao(fnAccept: any, fnReject?: any);

public confirmarAtualizacao(fnAccept: any, fnReject?: any);

public confirmar(titulo: string, mensagem: string, fa_icon: string, fnAccept: any, fnReject?: any) {

Enums

Align

| Value | | ------------- | | LEFT | | CENTER | | RIGHT |

ButtonType

| Value | | ------------- | | EXCLUIR | | EDITAR | | DOWNLOAD | | LISTA |

DataType

| Value | Description | | ------------- |-------------| | TEXT | common text| | NUMBER | common number | | DECIMAL | numbers with decimal places | | DATE | dd/MM/yyyy | | DATETIME | not developed | | TIMESTAMP | not developed | | BUTTON | ButtonType | | OBJECT | json object |

sort-direction

| Value | | ------------- | | ASC | | DESC |

Framework

my-autocomplete

Example

<span class="md-inputfield">
  <p-autoComplete
      name="autocomplete"
      [tabindex]=4
      field="nome"
      [(ngModel)]="autocomplete.itemSelecionado"
      [suggestions]="autocomplete.resultset"
      [dropdown]="true"
      [size]="autocomplete.resultsetMaxSize"
      [forceSelection]="true"
      [required]="true"
      (completeMethod)="autocomplete.buscarItem($event)"
      (onSelect)="autocomplete.onSelectItem($event)"
      (onClear)="autocomplete.onClearItem()">
    </p-autoComplete>
    <label>My autocomplete label</label>
</span>

public autocomplete: MyAutocomplete<T>;

constructor() {
  this.autocomplete = new MyAutocomplete(
                            httpClient,
                            errorHandlerService,
                            TService.URL,
                            null,
                            { status: Status.ATIVO }
                          );

  this.autocomplete.itemSubject
      .subscribe ((t: T) => {
        console.log(t);
      });                          
}

Description

Build an autocomplete input using an API resource ( you can pass a resource URL for it ) with a easy way to get a callback after cleaning or setting a value in the component.

my-time

n/a

mydate

Example

<div class="ui-g-8">{{o.value | myDate}}</div>

mydatetime

Example

<div class="ui-g-8">{{o.value | myDatetime}}</div>

popover-dropdownlist

Example

<lib-app-popover-dropdownlist
    #poddl [carregarDropdown] ="carregarPopoverDropdown">
</lib-app-popover-dropdownlist>

@ViewChild('poddl') public poddl: PopoverDropdownlistComponent;

carregarPopoverDropdown(service: any) {
    service.list(null)
    .subscribe(elementos => {
        return elementos;
    });
}

Description

Build a DropDownList with objects from a method invocation.

popover-input

Example

<lib-app-popover-input #poi></lib-app-popover-input>

@ViewChild('poi') public poi: PopoverInputComponent;

poi.show(event)
    .pipe(
      map(novaQuantidade => +novaQuantidade)
    )
    .subscribe(novaQuantidade => {
      console.log(novaQuantidade)
      // unsubscribe esta sendo realizado no próprio popover-input onAfterHide()
    });

Description

Build an input inside a popover component. Can be used in the List component too.

toaster

Example

import { ToasterService } from 'lib-frontframe/dist/frontframe';

constructor(public toasterService: ToasterService) {}

this.toasterService.warning('Aviso ao usuário...');

Description

Displays messages on the interface that automatically disappear.

 TYPES: error, success, info, warning, loading, wait

Methods

wait(titulo?: string, toasterWaitId?: number) {}

Create a message with an infinite timeout. It's possible to set up an ID for it.

clearWait(toasterWaitId?: number) {}

Removes all messages from the interface. If a toasterWaitId is passed, only that message will be remove.

breadcrumb

Example

import { BreadcrumbService } from 'lib-frontframe/dist/frontframe';

constructor(private breadcrumbService: BreadcrumbService) {}

ngOnInit() {
  this.breadcrumbService.setMenuConfig(
    this.breadcrumbService.getOrCreateMenuConfig()
      .setContext(this.context)
      .setShowExcluir(this.pId > 0)
      .setShowNovo(true, ['/page/cadastro-novo/0'])
  );  
}

metodoAvulso() {
  this.breadcrumbService.setMenuConfig(
    this.breadcrumbService.getMenuConfig()
        .setExtraButtons([
        {
          title: 'Salvar...',
          mat_icon: 'save',
          command: (event) => this.atualizar(),
          visible: true
        }])
  );
}

Description

Controls breadcrumb information and form buttons (Save, delete and buttons created on the fly).

default-service

Description

It provides common methods to search by ID, list, update, insert and remove, integrated with the backend REST API.

error-handler

Handles HTTP error messages in a simple way and attempts to deal with generic error messages.

http-interceptor

Description

Responsible for intercepting to add the validation token to Http Header. If the token does not exist or is invalid, the interceptor must be able to perform the Token Refresh on the Backend.

ATTENTION! For this to happen it is necessary that the library has access to some parameters.

This passing of parameters between the main frontend application and the lib-frontend library is not developed.

MenuItemCustom

Description

Class responsible for customizing a menu item. At first it is possible to pass an icon from the Font-Awsome library, Material Icon or generic arguments to be captured later.

Estrutura da classe MenuItemCustom

  mat_icon?: string;
  fa_icon?: string;
  args?: any;

Framework/Utils

date-time-util

Example

import { DateTimeUtil } from 'lib-frontframe/dist/frontframe';

Description

Date utility class

Methods

converterSegundosParaDate(seconds: number): Date

getPrimeiroDiaDoMes(): Date

getUltimoDiaDoMes(): Date

string-util

Example

import { StringUtil } from 'lib-frontframe/dist/frontframe';

Description

String utility class

unidade-medida-util

Example

import { UnidadeMedidaUtil } from 'lib-frontframe/dist/frontframe';

Description

String utility class

Methods

converterMetrosParaKilometros(metros: number)

List

Example

  @Component({
  selector: 'lib-app-lista',
  template: `<lib-app-lista 
                  [controller]="this"
                  [tipoLista]="'inventario'"
                  [pHasCaption]="true"></lib-app-lista>`})

  export class ExemploListaComponent implements OnInit, ILista { 

    constructor(private router: Router,
                , private exemploService: ExemploService) {
    }

    // triggered after double-click in a row
    aoSelecionarLinha(e: any, dataKey: any): void {
      this.router.navigate(['/exemplo/nova-pagina']);
    }      

    // ExemploService must extend DefaultService<T> from lib-frontframe
    getService() {
      return this.exemploService;
    }

    // this must return Metadata[] from lib-frontend
    getMetadata(): Metadata[] {
      return ExemploMetadata.getMetadata(this.router);
    }

    // OPTIONAL
    // another option to provide the data to the List interface is to use getListaObservable():
    getListaObservable?(): Observable<ListaResultset<T>> {
      const filter = {};
      filter.status = 'A';

      // Method .lista() must return an Observable of ListaResultset<T>
      /*
       listar(filter: any, listComponent?: ListaComponent): Observable<ListaResultset<T>> {} 
       */ 
      return this.exemploService.listar(filter, this.listaComponent);      
    }
  }

Description

The Lista component provides a fast way to create a List Interface in the application.

You will need this objects to use it:

1. Your class must implement ILista interface from lib-frontframe.
2. Set up a <lib-app-lista> component in a html file or like the example above.
3. Create your entity metadata file. Example below.
4. Implement getService() OR getListaObservable() methods.

metadata

Example

export class ExampleMetadata {
    static getMetadata(router: Router): Metadata[] {
        return DefaultMetadata.getMetadata().concat(
            [
                {
                    fieldId: 'nome',
                    fieldName: 'Nome',
                    align: Align.LEFT,
                    dataType: DataType.TEXT
                }
                , {
                    fieldId: 'descricao',
                    fieldName: 'Descrição',
                    align: Align.LEFT,
                    dataType: DataType.TEXT
                }
                , {
                    fieldId: '',
                    dataType: DataType.BUTTON,
                    buttonType: ButtonType.EDITAR,
                    align: Align.CENTER,
                    title: 'Ir p/ nova página...',
                    fnClick: function(event: any, data: any) {
                        router.navigate(['/exemplo/nova-pagina', data.id]);
                    }
                }
            ]
        );
    }
}

grid-util

Example

public setHtmlNaCelula(event: any, html: string, celula?: any)

celulaCarregando(event: any, celula?: any)

celulaComErro(event: any, celula?: any)

celulaComSucesso(event: any, celula?: any)

getLinhaElement(event: any, rowIndex: number)

Description

Helper class to manipulate a grid in List component.

Multitenancy

The lib-frontend will resolve the JWT authorization flow with the backend. It will need some development and additional documentation.

Wireframes

Form

Example

export class EquipamentoComponent extends FormComponent implements OnInit {


  atualizar() {
      this.exampleService.atualizar(this.pId, this.object)
      .subscribe(() => {
          this.toaster.success();
      });
  }

  inserir() {
      this.exampleService.inserir(this.object)
      .subscribe(object => {
          this.pId = object.id;
          this.toaster.success();
      });
  }

  excluir() {
      this.exampleService.excluir(this.pId)
      .subscribe(() => {
          this.toaster.success();
          this.router.navigate(['/list', 'example']);
      });
  }
}

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

License

GNU General Public License v3.0