lib-frontframe
Package to help you develop an Angular+ frontend.
Deploy
Use package manager npm.
npm installng build frontframenpm publish
Installation
npm i lib-frontframe --save-dev
Usage
;;
Confirmation Dialog
Example
; {} { thisconfirmacaoComponent;}
Most common forms of Dialog Box
public ;
public ;
public {
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
My autocomplete label
public autocomplete: MyAutocomplete<T>; { thisautocomplete = httpClient errorHandlerService TServiceURL null status: StatusATIVO ; thisautocompleteitemSubject ; }
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
{{o.value | myDate}}
mydatetime
Example
{{o.value | myDatetime}}
popover-dropdownlist
Example
@ public poddl: PopoverDropdownlistComponent; { service ;}
Description
Build a DropDownList with objects from a method invocation.
popover-input
Example
@ public poi: PopoverInputComponent; poi ;
Description
Build an input inside a popover component. Can be used in the List component too.
toaster
Example
; {} thistoasterService;
Description
Displays messages on the interface that automatically disappear.
TYPES: error, success, info, warning, loading, wait
Methods
{}
Create a message with an infinite timeout. It's possible to set up an ID for it.
{}
Removes all messages from the interface. If a
toasterWaitId
is passed, only that message will be remove.
breadcrumb
Example
; {} { thisbreadcrumbService; } { thisbreadcrumbService;}
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
;
Description
Date utility class
Methods
: Date
: Date
: Date
string-util
Example
;
Description
String utility class
unidade-medida-util
Example
;
Description
String utility class
Methods
List
Example
@ implements OnInit ILista { } // triggered after double-click in a row : void thisrouter; // ExemploService must extend DefaultService<T> from lib-frontframe { return thisexemploService; } // this must return Metadata[] from lib-frontend : Metadata return ExemploMetadata; // OPTIONAL // another option to provide the data to the List interface is to use getListaObservable(): getListaObservable?: Observable<ListaResultset<T>> const filter = {}; filterstatus = 'A'; // Method .lista() must return an Observable of ListaResultset<T> /* listar(filter: any, listComponent?: ListaComponent): Observable<ListaResultset<T>> {} */ return thisexemploService;
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
static : Metadata return DefaultMetadata;
grid-util
Example
public
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
implements OnInit { thisexampleService ; } { thisexampleService ; } { thisexampleService ; }
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.