{"id":22008920,"url":"https://github.com/letsfullstack/angular-framework-core","last_synced_at":"2025-03-23T07:26:03.945Z","repository":{"id":47443156,"uuid":"269214273","full_name":"letsfullstack/angular-framework-core","owner":"letsfullstack","description":"Lets core frontend framework using Angular 1.4.1.","archived":false,"fork":false,"pushed_at":"2021-05-11T19:49:39.000Z","size":561,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-28T14:17:13.673Z","etag":null,"topics":["angular","core","crm"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/letsfullstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-03T23:16:07.000Z","updated_at":"2022-07-20T19:06:13.000Z","dependencies_parsed_at":"2022-08-23T18:41:42.020Z","dependency_job_id":null,"html_url":"https://github.com/letsfullstack/angular-framework-core","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letsfullstack%2Fangular-framework-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letsfullstack%2Fangular-framework-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letsfullstack%2Fangular-framework-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/letsfullstack%2Fangular-framework-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/letsfullstack","download_url":"https://codeload.github.com/letsfullstack/angular-framework-core/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245068904,"owners_count":20555850,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","core","crm"],"created_at":"2024-11-30T02:07:45.456Z","updated_at":"2025-03-23T07:26:03.922Z","avatar_url":"https://github.com/letsfullstack.png","language":"JavaScript","readme":"Lets Comunica Angular Framework Core\n=============\n\nThis repository was organized within the [AngularJS 1.4.1](https://docs.angularjs.org/api) framework. This repo covers all the core functionalities that our company front-end projects basically needs.\n\nAuthor: Lets Comunica\n\nE-mail: marlon@letscomunica.com.br\n\n**LAST VERSION: 1.0.0**\n\nInstallation\n=====\n\nInstall in you angular project:\n\n```bash\n  npm install --save https://github.com/letsfullstack/angular-framework-core.git#v1.0.0\n```\n\nFunctionalities\n===== \n  This list shows the current supported functionalities.\n  In order to use one of those just follow the necessary steps, pay attention on the highlighted lines.\n\n## Autocomplete\n  With this feature, if corrected configured on backend, you can set fields to show the values of foreign keys.\n\n  Just use *true* on *autocomplete* key, inside your fields options:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"fieldType\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 100,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": true,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## Autocomplete Table\n  Same of autocomplete but with tables.\n\n  Set the autocomplete key as true and use *autocomplete_table* on customOptions. It expects 'table_name' and 'table_columns' as keys:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"string\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": true,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n    \"autocomplete_table\": {\n         \"table_name\": \"medicamentos\",\n         \"table_columns\": [\n           {\n             \"name\": \"nome_apresentacao\",\n             \"label\": \"Descrição do Produto\"\n           },\n           {\n             \"name\": \"tipo.label\",\n             \"label\": \"Tipo\"\n           },\n           {\n             \"name\": \"tarja.label\",\n             \"label\": \"Tarja\"\n           }\n         ]\n      }\n    }\n  }\n  ```\n## Boolean\n  Simple boolean type input, with toogle.\n\n  Just use *boolean* on *type* key, inside your fields options:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"boolean\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": [\n        \"statusTrueText\": \"Yes\",\n        \"statusFalseText\": \"No\",\n        \"default\": true\n    ]\n  }\n  ```\n\n## Help Info\n\n  Just set the *help* key as *field string* and you are good to go:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"boolean\",\n    \"help\":\"This field is very important!\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": [\n        \"statusTrueText\": \"Yes\",\n        \"statusFalseText\": \"No\",\n        \"default\": true\n    ]\n  }\n\n## CNPJ\n  Masked input for CNPJ.\n\n  Set the *type* key as *string* and use *cnpj* as *true* on the customOptions key:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"string\",\n    \"notnull\": false,\n    \"length\": 100,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n      \"cnpj\": true\n    }\n  }\n  ```\n## CPF\n  Masked input for CPF.\n\n  Set the *type* key as *string* and use *cpf* as *true* on the customOptions key:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"string\",\n    \"notnull\": false,\n    \"length\": 100,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n       \"cpf\": true\n    }\n  }\n  ```\n## CPF/CNPJ\n  With this feature the masked input accepts either CPF or CNPJ, according to its lenght.\n\n  Set the *type* key as *string* and use *documento* as *true* on the customOptions key:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"string\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"CPF/CNPJ\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n      \"documento\": true\n    }\n  }\n  ```\n## Ckeditor\n  With this feature you can use a rich text editor.\n\n  Set the *type* key as *text* and use *rich* as *true* on the customOptions key.\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"text\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": false,\n    \"viewable\": false,\n    \"autocomplete\": false,\n    \"quickAdd\": false,\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n      \"rich\":true\n    }\n  }\n  ```\n## Currency\n  Masked input for BRL currency values.\n\n  Set the *type* key as *float* and use *currency* as *true* on the customOptions key.\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"float\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n      \"currency\": true,\n    }\n  }\n  ```\n## Custom\n  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.\n\n  In order to use it set *type* key as *custom* and \"make\" it on *toString* key:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"custom\",\n    \"notnull\": false,\n    \"length\": null,\n    \"precision\": null,\n    \"label\": \"fieldLabel\",\n    \"editable\": false,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": [],\n    \"toString\": function (data) {\n        var btn = $('\u003cbutton class=\"btn btn-default\" onclick=\"\"\u003e\u003cspan class=\"glyphicon glyphicon-copy\"\u003e\u003c/span\u003e\u003c/button\u003e');\n        var messageWindow;\n        var corpo = data.corpo;\n        \n        btn.click(function () {\n            messageWindow = window.open(\"\", \"messageWindow\", \"width=600, height=400\");\n            messageWindow.document.write(\"\u003cpre\u003e\" + corpo + \"\u003c/pre\u003e\");\n        });\n        return btn;\n    }\n  }\n  ```\n## Date\n  A masked input with date picker.\n\n  Just use *date* as *type*.\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"date\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## Drag and Drop Upload\n  A drag and drop field for file uploads.\n\n  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:\n  ```javascript\n  {\n    \"name\": \"lan_anexo\",\n    \"type\": \"string\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"Anexo\",\n    \"editable\": true,\n    \"viewable\": false,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n        \"file\":{\n            \"container\":\"exames\",\n            \"preview\":true,\n            \"dad\":true,\n            \"acceptedFiles\":[\"image/*\"]\n        }\n    }\n  }\n  ```\n## Email\n  Set the *type* key as *string* and use *email* as *true* on the customOptions key:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"string\",\n    \"notnull\": true,\n    \"length\": 100,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": false,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n      \"email\": true\n    }\n  }\n  ```\n## Float\n  A simple float input\n\n  Just set the *type* key as *float* and you are good to go:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"float\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## List\n  A select field with custom labels.\n\n  Fill the \"*type*\" key with the value \"*number*\", set \"*autocomplete*\" as *true* and create your list on \"*customOptions*\" key as below:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"number\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldName\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": true,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n        \"list\":[\n            {\"id\":1, \"label\":\"Janeiro\"},\n            {\"id\":2, \"label\":\"Fevereiro\"},\n            {\"id\":3, \"label\":\"Março\"},\n            {\"id\":4, \"label\":\"Abril\"},\n            {\"id\":5, \"label\":\"Maio\"},\n            {\"id\":6, \"label\":\"Junho\"},\n            {\"id\":7, \"label\":\"Julho\"},\n            {\"id\":8, \"label\":\"Agosto\"},\n            {\"id\":9, \"label\":\"Setembro\"},\n            {\"id\":10, \"label\":\"Outubro\"},\n            {\"id\":11, \"label\":\"Novembro\"},\n            {\"id\":12, \"label\":\"Dezembro\"},\n        ],\n        \"select\":true\n    }\n  }\n  ```\n## Number or Integer\n  A number input.\n\n  Just set the *type* key as *number* or *integer* and you are good to go:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"number\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": false,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## Number or Integer with Range\n  A number input with range.\n\n  Just set the *type* key as *number*, fill *range* object with the 'min' and 'max' values inside customOptions value and you're done:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"number\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n        \"range\": {\n           \"min\": 0,\n           \"max\": 10000\n        }\n    }\n  }\n  ```\n## Password\n  Password input.\n\n  Just set the *type* key as *password* and you are good to go:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"password\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": false,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## Simplecolor\n  A simple color picker.\n\n  Set the *type* key as *simplecolor* and fill *colors* array with the desired colors:\n  ```javascript\n  {\n    \"name\": \"cor\",\n    \"type\": \"simplecolor\",\n    \"notnull\": false,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"Sinalização\",\n    \"editable\": true,\n    \"viewable\": false,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n      colors: ['green', 'yellow', 'orange', 'red']\n    }\n  }\n  ```\n## String\n  Just set the *type* key as *string* and you are good to go:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"string\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## Textarea\n  Just set the *type* key as *text* and you are good to go:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"text\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## Time\n  A time picker.\n\n  Just set the *type* key as *time*:\n  ```javascript\n  {\n    \"name\": \"fieldName\",\n    \"type\": \"time\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"fieldLabel\",\n    \"editable\": true,\n    \"viewable\": true,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": []\n  }\n  ```\n## Upload\n  File upload field with simple button.\n\n  In order to use it set *type* key as *string* and fill *file* object, *container* must be a folders name:\n  ```javascript\n  {\n    \"name\": \"lan_anexo\",\n    \"type\": \"string\",\n    \"notnull\": true,\n    \"length\": null,\n    \"precision\": 10,\n    \"label\": \"Anexo\",\n    \"editable\": true,\n    \"viewable\": false,\n    \"autocomplete\": false,\n    \"quickAdd\": [],\n    \"autocomplete_dependencies\": [],\n    \"customOptions\": {\n      \"file\": {\n          \"container\": \"anexos\"\n      }\n    }\n  }\n  ```\n\nUpdates\n=====\n\nMade 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:\n\n1\\. Commit and push your updates using Let's Github credentials\n\n2\\. Change and commit a new tag version (always check and update the last version here and in package.json):\n\n```bash\n$ git tag -a vX.X.X -m \"version_message\"\n```\n\n3\\. Push the new tag version to remote repository:\n\n```bash\n$ git push origin vX.X.X  # Version needs to be the same from commit\n```\n\n4\\. Run npm installation with the newest version:\n\n```bash\n  bower install --save https://github.com/letsfullstack/angular-framework-core.git#vX.X.X\n```\n\nTodo\n----------\n1\\. Convert ng-includes from URL images to directives (in order to access templates from inside this module)\n\n2\\. Start gulp automation to render all src files to single lets-angular-framework-core.module.js in a minified version\n\n3\\. Separate input types in different directives\n\n4\\. Isolate scope to vm and change all scope parents and childs access\n\nHistory\n----------\n\n**v0.0.20**\n\n[09/06/18] Started repository\n\n**v1.0.0**\n\n[30/11/2020] Update Documentation","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletsfullstack%2Fangular-framework-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fletsfullstack%2Fangular-framework-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fletsfullstack%2Fangular-framework-core/lists"}