crud-restful v1.0.196
crud-restful - UNDER DEVELOPMENT
UNDER DEVELOPMENT
This component aims to facilitate the construction of user interfaces in Angular 2. This component provides high-level interface components using PrimeNG. The use of this component generates a great gain of productivity and flexibility in the construction of the interfaces. All components are created at runtime based on Decorators and Metadatas that provides information such as field positioning, combos content and component configuration.
Libraries dependencies
Installation of dependencies:
- PrimeNG: http://www.primefaces.org/primeng/#/setup
- jQuery : https://www.npmjs.com/package/jquery
- ng2-translate : https://www.npmjs.com/package/ng2-translate
- moment : https://www.npmjs.com/package/moment
- font-awesome : https://www.npmjs.com/package/font-awesome
Library installation
To install this library, run:
$ npm install crud-restful --save
How to use
Describe your model with Decorators and Metadatas. Example:
import { Configure, Id, InputType, MultiSelect, Chips, Select, Calendar, Checkboxes, Table } from '../index';
@Table({
clazz : 'Login',
name : 'tableUser',
url : '/data/login.json',
rows : 10,
paginator : true,
pageLinks : 3,
sortField : 'id',
sortOrder : 1,
order : 0,
emptyMessageKey : 'MESSAGE.NO_DATA',
autoHide : true
})
@Configure({
clazz : 'Login',
i18nPath : './assets/i18n'
})
export class Login {
@InputType({
clazz : 'Login',
name : 'Id',
type : 'text',
readOnly : true,
disabled : true,
autoWidth : true,
order : 1,
tableColumn : 0,
sortable : true
})
id : number;
@InputType({
clazz : 'Login',
name : 'Email',
translateKey : 'EMAIL',
type : 'text',
autoWidth : true,
order : 2,
tableColumn : 2,
sortable : true,
required : true,
requiredMessageKey : 'MESSAGE.FIELD_REQUIRED',
regexp : "/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i",
regexpMessage : 'Email is invalid'
})
name : string;
@InputType({
clazz : 'Login',
name : 'Full Name',
translateKey : 'FULLNAME',
type : 'text',
autoWidth : true,
order : 3,
tableColumn : 1,
sortable : true,
required : true,
requiredMessageKey : 'MESSAGE.FIELD_REQUIRED',
style : 'color: blue;font-style: italic;'
})
fullname : string;
}
Result:
Import in your module:
import {CrudModule} from 'crud-restful/index';
In your HTML template:
<crud [clazz]="'Login'" [model]="login" [broadcast]="broadcast" [buttons]="'Save,Remove,Cancel'" (onSave)="handleOnSave($event)" (onRemove)="handleOnRemove($event)" (onCancel)="handleOnCancel()" (onOk)="handleOnOk($event)" [onTableLoaded]="onTableLoaded" [onTableRowSelected]="onTableRowSelected"></crud>
In the component, initialize your object model with default values (if necessary) and handle the events:
.
.
.
@ViewChild(CrudComponent) crudComponent : CrudComponent;
broadcast: EventEmitter<any> = new EventEmitter<any>();
onTableLoaded: EventEmitter<any> = new EventEmitter<any>();
login : Login;
constructor() {
this.login = new Login();
this.login.id = 1;
this.login.email = 'cmargulhano@gmail.com';
this.login.fullname = 'Cláudio Margulhano';
this.onTableLoaded.subscribe(() => {
console.log('table loaded');
})
this.onTableRowSelected.subscribe((event : any) => {
console.log(event);
});
this.onNewItem.subscribe((event : any) => {
console.log(event);
});
}
handleOnSave(login : Login) {
console.log('Save');
console.log(login);
}
handleOnRemove(login : Login) {
console.log('Remove');
console.log(login);
}
handleOnCancel() {
console.log('Cancel');
}
handleOnOk(login : Login) {
console.log(login);
}
refreshTable() {
this.broadcast.emit();
}
i18n() {
this.translate.use('pt-br');
this.crudComponent.notify();
}
changeEmail () {
this.broadcast.emit('{"email" : "cmargulhano@hotmail.com"}');
}
.
.
.
Playground of components: http://localhost:8080
git clone https://github.com/cmargulhano/crud-restful.git
npm install
npm start
Helper functions
To hide / show table:
this.crudComponent.showTable('none'); // hide
this.crudComponent.showTable('flex'); // show
To hide / show buttons:
this.crudComponent.showOkButton = false; // true to show
this.crudComponent.showSaveButton = false;
this.crudComponent.showRemoveButton = false;
this.crudComponent.showCancelButton = false;
Components
Table - class decorator
Example:
@Table({
clazz : 'Login',
name : 'tableUser',
url : '/data/login.json',
rows : 10,
paginator : true,
pageLinks : 3,
sortField : 'id',
sortOrder : 1,
order : 0,
emptyMessageKey : 'MESSAGE.NO_DATA',
autoHide : true
})
export class Login {
.
.
.
@InputType({
clazz : 'Login',
name : 'Email',
translateKey : 'EMAIL',
type : 'text',
autoWidth : true,
order : 2,
tableColumn : 2,
sortable : true,
required : true,
requiredMessageKey : 'MESSAGE.FIELD_REQUIRED',
regexp : "/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i",
regexpMessage : 'Email is invalid',
style : 'color: blue;font-style: italic;'
})
name : string;
.
.
.
}
The decorator @InputType needs to inform news parameters for the table component: tableColumn parameter defines the order of column in the table. sortable parameter defines if the column will be sortable.
InputType - property decorator
Examples:
@InputType({
clazz : 'Login',
name : 'Email',
translateKey : 'EMAIL',
type : 'text',
autoWidth : true,
order : 2,
tableColumn : 2,
sortable : true,
required : true,
requiredMessageKey : 'MESSAGE.FIELD_REQUIRED',
regexp : "/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i",
regexpMessage : 'Email is invalid',
style : 'color: blue;font-style: italic;'
})
email : string;
@InputType({
clazz : 'Login',
name : 'Phone Number',
type : 'text',
autoWidth : true,
order : 4,
tableColumn : 3,
sortable : true,
required : false,
requiredMessageKey : 'MESSAGE.FIELD_REQUIRED',
style : 'color: pink;'
mask : '(99) 999-9999'
})
phonenumber : string;
MultiSelect - property decorator
Example:
@MultiSelect({
clazz : 'Scheduling',
url : '/data/report.json',
modelSelect : 'reportList',
modelSelectClazz : Report,
modelSelectValue : 'id',
modelSelectLabel : 'name',
disabled : true,
order : 4
})
public reports: Report[];
Chips - property decorator
@Chips({
clazz : 'Scheduling',
name : 'Email',
disabled : false,
autoWidth : true,
regexp : "/^[a-z0-9!#$%&'*+\/=?^_`{|}~.-]+@[a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*$/i",
regexpMessage : 'Email is invalid'
order : 5
})
public mails: string[];
Select - property decorator
Example:
@Select({
clazz : 'Scheduling',
values : [{"value" : 1, "label" : "Value 1"}, {"value" : 2, "label" : "Value 2"}, {"value" : 3, "label" : "Value 3"}],
defaultValue : 2,
order : 5
})
public period: string;
Calendar - property decorator
Example:
Using string object:
@Calendar({
clazz : 'Scheduling',
disabled : false,
autoWidth : true,
order : 7,
format : 'DD/MM/YYYY'
})
public date : string;
You can also use Date object instead of string:
@Calendar({
clazz : 'Scheduling',
disabled : false,
autoWidth : true,
order : 7,
format : 'DD/MM/YYYY'
})
public date : Date;
Posible formats:
- DD/MM/YYYY
- MM/DD/YYYY
- YYYY/MM/DD
Checkboxes - property decorator
Example:
@Checkboxes({
clazz : 'Scheduling',
name : 'Itens:',
disabled : false,
autoWidth : true,
defaultValue : 1,
order : 10,
values : [new Item(1, 'Value 1', true),
new Item(2, 'Value 2', false),
new Item(3, 'Value 3', true)]
})
public itensCheckboxes : Item[];
Radioboxes - property decorator
Example:
@Radioboxes({
clazz : 'Scheduling',
name : 'Itens:',
disabled : false,
autoWidth : true,
defaultValue : 1,
order : 10,
values : [new Item(1, 'Value 1', true),
new Item(2, 'Value 2', false)],
target : 'selectedRadiobox'
})
public itensRadioboxes : Item[];
public selectedRadiobox : number;
Scheduling (under development)
Dual List Box (under development)
Internationalization
Crud-restful uses Ng2-translate component to translate the interface.
Configuration
By default, Crud-restful will search for files in assets/i18n/*.json. If you want you can customize this behavior by changing the path (attribute i18nPath) of the files with the decorator @Config, example:
@Configure({
clazz : 'Login',
i18nPath : './assets/i18n'
})
All decorators have the translateKey parameter which refers to the translation key of the json file. The exception is the @Table decorator that has the parameter emptyMessageKey that refers to the "Records not found" message.
If you change the used language of Ng2-Translate you need to refresh the translation in your App. Example:
export class App {
@ViewChild(CrudComponent) crudComponent : CrudComponent;
refreshI18N() {
this.translate.use('pt-br');
this.crudComponent.notify();
}
...
Auth
If you need, you can use bearer tokens in HTTP requests, for example:
import { Configuration } from 'crud-restful/index';
Configuration.token = 'bearer 96549c0e-dab8-4d05-9d62-33cbd320b152';
License
MIT © Claudio Margulhano
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago
7 years ago