lib-frontframe v1.0.2
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:
- Your class must implement
ILista
interface fromlib-frontframe
.- Set up a
<lib-app-lista>
component in a html file or like the example above.- Create your entity metadata file. Example below.
- 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.