This repository was organized within the AngularJS 1.4.1 framework. This repo covers all the core functionalities that our company front-end projects basically needs.
Author: Lets Comunica
E-mail: [email protected]
LAST VERSION: 1.0.0
Install in you angular project:
npm install --save https://github.com/letsfullstack/angular-framework-core.git#v1.0.0This list shows the current supported functionalities. In order to use one of those just follow the necessary steps, pay attention on the highlighted lines.
With this feature, if corrected configured on backend, you can set fields to show the values of foreign keys.
Just use true on autocomplete key, inside your fields options:
{
"name": "fieldName",
"type": "fieldType",
"notnull": true,
"length": null,
"precision": 100,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": true,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}Same of autocomplete but with tables.
Set the autocomplete key as true and use autocomplete_table on customOptions. It expects 'table_name' and 'table_columns' as keys:
{
"name": "fieldName",
"type": "string",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": true,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"autocomplete_table": {
"table_name": "medicamentos",
"table_columns": [
{
"name": "nome_apresentacao",
"label": "Descrição do Produto"
},
{
"name": "tipo.label",
"label": "Tipo"
},
{
"name": "tarja.label",
"label": "Tarja"
}
]
}
}
}Simple boolean type input, with toogle.
Just use boolean on type key, inside your fields options:
{
"name": "fieldName",
"type": "boolean",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": [
"statusTrueText": "Yes",
"statusFalseText": "No",
"default": true
]
}Just set the help key as field string and you are good to go:
{
"name": "fieldName",
"type": "boolean",
"help":"This field is very important!",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": [
"statusTrueText": "Yes",
"statusFalseText": "No",
"default": true
]
}
## CNPJ
Masked input for CNPJ.
Set the *type* key as *string* and use *cnpj* as *true* on the customOptions key:
```javascript
{
"name": "fieldName",
"type": "string",
"notnull": false,
"length": 100,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"cnpj": true
}
}Masked input for CPF.
Set the type key as string and use cpf as true on the customOptions key:
{
"name": "fieldName",
"type": "string",
"notnull": false,
"length": 100,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"cpf": true
}
}With this feature the masked input accepts either CPF or CNPJ, according to its lenght.
Set the type key as string and use documento as true on the customOptions key:
{
"name": "fieldName",
"type": "string",
"notnull": true,
"length": null,
"precision": 10,
"label": "CPF/CNPJ",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"documento": true
}
}With this feature you can use a rich text editor.
Set the type key as text and use rich as true on the customOptions key.
{
"name": "fieldName",
"type": "text",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": false,
"viewable": false,
"autocomplete": false,
"quickAdd": false,
"autocomplete_dependencies": [],
"customOptions": {
"rich":true
}
}Masked input for BRL currency values.
Set the type key as float and use currency as true on the customOptions key.
{
"name": "fieldName",
"type": "float",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"currency": true,
}
}On this functionality you can create anything, the example below shows a button that only appears on data listing and formats a text that can be used as email.
In order to use it set type key as custom and "make" it on toString key:
{
"name": "fieldName",
"type": "custom",
"notnull": false,
"length": null,
"precision": null,
"label": "fieldLabel",
"editable": false,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": [],
"toString": function (data) {
var btn = $('<button class="btn btn-default" onclick=""><span class="glyphicon glyphicon-copy"></span></button>');
var messageWindow;
var corpo = data.corpo;
btn.click(function () {
messageWindow = window.open("", "messageWindow", "width=600, height=400");
messageWindow.document.write("<pre>" + corpo + "</pre>");
});
return btn;
}
}A masked input with date picker.
Just use date as type.
{
"name": "fieldName",
"type": "date",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}A drag and drop field for file uploads.
In order to use it set type key as string, use dad as true on the customOptions key and fill file object with 'container' and 'acceptedFiles' values, container must be a folders name and acceptedFiles a fileType:
{
"name": "lan_anexo",
"type": "string",
"notnull": true,
"length": null,
"precision": 10,
"label": "Anexo",
"editable": true,
"viewable": false,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"file":{
"container":"exames",
"preview":true,
"dad":true,
"acceptedFiles":["image/*"]
}
}
}Set the type key as string and use email as true on the customOptions key:
{
"name": "fieldName",
"type": "string",
"notnull": true,
"length": 100,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": false,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"email": true
}
}A simple float input
Just set the type key as float and you are good to go:
{
"name": "fieldName",
"type": "float",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}A select field with custom labels.
Fill the "type" key with the value "number", set "autocomplete" as true and create your list on "customOptions" key as below:
{
"name": "fieldName",
"type": "number",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldName",
"editable": true,
"viewable": true,
"autocomplete": true,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"list":[
{"id":1, "label":"Janeiro"},
{"id":2, "label":"Fevereiro"},
{"id":3, "label":"Março"},
{"id":4, "label":"Abril"},
{"id":5, "label":"Maio"},
{"id":6, "label":"Junho"},
{"id":7, "label":"Julho"},
{"id":8, "label":"Agosto"},
{"id":9, "label":"Setembro"},
{"id":10, "label":"Outubro"},
{"id":11, "label":"Novembro"},
{"id":12, "label":"Dezembro"},
],
"select":true
}
}A number input.
Just set the type key as number or integer and you are good to go:
{
"name": "fieldName",
"type": "number",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": false,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}A number input with range.
Just set the type key as number, fill range object with the 'min' and 'max' values inside customOptions value and you're done:
{
"name": "fieldName",
"type": "number",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"range": {
"min": 0,
"max": 10000
}
}
}Password input.
Just set the type key as password and you are good to go:
{
"name": "fieldName",
"type": "password",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": false,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}A simple color picker.
Set the type key as simplecolor and fill colors array with the desired colors:
{
"name": "cor",
"type": "simplecolor",
"notnull": false,
"length": null,
"precision": 10,
"label": "Sinalização",
"editable": true,
"viewable": false,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
colors: ['green', 'yellow', 'orange', 'red']
}
}Just set the type key as string and you are good to go:
{
"name": "fieldName",
"type": "string",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}Just set the type key as text and you are good to go:
{
"name": "fieldName",
"type": "text",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}A time picker.
Just set the type key as time:
{
"name": "fieldName",
"type": "time",
"notnull": true,
"length": null,
"precision": 10,
"label": "fieldLabel",
"editable": true,
"viewable": true,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": []
}File upload field with simple button.
In order to use it set type key as string and fill file object, container must be a folders name:
{
"name": "lan_anexo",
"type": "string",
"notnull": true,
"length": null,
"precision": 10,
"label": "Anexo",
"editable": true,
"viewable": false,
"autocomplete": false,
"quickAdd": [],
"autocomplete_dependencies": [],
"customOptions": {
"file": {
"container": "anexos"
}
}
}Made a modification or added a new feature? Test it at least in one project before submiting a version. It still needs unit testing and CI with projects. After everything seems perfectly up-to-date, don't forget to UPDATE THE README file and only then run the following steps:
1. Commit and push your updates using Let's Github credentials
2. Change and commit a new tag version (always check and update the last version here and in package.json):
$ git tag -a vX.X.X -m "version_message"3. Push the new tag version to remote repository:
$ git push origin vX.X.X # Version needs to be the same from commit4. Run npm installation with the newest version:
bower install --save https://github.com/letsfullstack/angular-framework-core.git#vX.X.X1. Convert ng-includes from URL images to directives (in order to access templates from inside this module)
2. Start gulp automation to render all src files to single lets-angular-framework-core.module.js in a minified version
3. Separate input types in different directives
4. Isolate scope to vm and change all scope parents and childs access
v0.0.20
[09/06/18] Started repository
v1.0.0
[30/11/2020] Update Documentation