├── events └── .gitkeep ├── reports └── .gitkeep ├── workflow ├── .gitkeep ├── diagrams │ └── .gitkeep ├── literals │ └── .gitkeep └── scripts │ └── .gitkeep ├── mechanisms └── .gitkeep ├── wcm ├── layout │ └── .gitkeep └── widget │ └── wgt_crud_01 │ └── src │ └── main │ ├── resources │ ├── wgt_crud_01.properties │ ├── wgt_crud_01_es.properties │ ├── wgt_crud_01_en_US.properties │ ├── wgt_crud_01_pt_BR.properties │ ├── edit.ftl │ ├── tpl_dataTableUsers.ftl │ ├── application.info │ ├── view.ftl │ ├── tpl_formModalView.ftl │ ├── tpl_formModalNew.ftl │ └── tpl_formModalUpdate.ftl │ └── webapp │ ├── resources │ ├── images │ │ ├── icon.png │ │ ├── sort_asc.png │ │ ├── sort_both.png │ │ ├── sort_desc.png │ │ ├── ajax-loader.gif │ │ ├── sort_asc_disabled.png │ │ ├── sort_desc_disabled.png │ │ └── empyt-list.svg │ ├── js │ │ ├── widget_utils.js │ │ ├── widget_pdfMake.js │ │ ├── libs │ │ │ ├── toastr.min.js │ │ │ └── jquery.mask.min.js │ │ ├── widget_modals.js │ │ ├── widget_dataTables.js │ │ ├── widget_services.js │ │ ├── widget_forms.js │ │ └── widget_main.js │ └── css │ │ ├── toastr.min.css │ │ ├── widget_styles.css │ │ ├── buttons.dataTables.min.css │ │ ├── jquery.dataTables.css │ │ └── sweetalert2.min.css │ └── WEB-INF │ ├── jboss-web.xml │ └── web.xml ├── .gitignore ├── .settings ├── org.eclipse.core.resources.prefs └── .jsdtscope ├── forms └── form_cadastroPessoas01 │ ├── listagem_registros.png │ ├── modal_criacao_registro.png │ ├── modal_edicao_registro.png │ ├── modal_visualizacao_registro.png │ ├── events │ ├── enableFields.js │ ├── validateForm.js │ └── utils.js │ ├── custom.js │ └── form_cadastroPessoas01.html ├── .project └── README.md /events/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reports/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /workflow/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /mechanisms/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /wcm/layout/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /workflow/diagrams/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /workflow/literals/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /workflow/scripts/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/wgt_crud_01.properties: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/wgt_crud_01_es.properties: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/wgt_crud_01_en_US.properties: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/wgt_crud_01_pt_BR.properties: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /wcm/widget/wgt_crud_01/target/ 2 | /forms/form_cadastroPessoas01/.metadata -------------------------------------------------------------------------------- /.settings/org.eclipse.core.resources.prefs: -------------------------------------------------------------------------------- 1 | eclipse.preferences.version=1 2 | encoding/=UTF-8 3 | -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/listagem_registros.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/forms/form_cadastroPessoas01/listagem_registros.png -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/modal_criacao_registro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/forms/form_cadastroPessoas01/modal_criacao_registro.png -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/modal_edicao_registro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/forms/form_cadastroPessoas01/modal_edicao_registro.png -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/modal_visualizacao_registro.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/forms/form_cadastroPessoas01/modal_visualizacao_registro.png -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/edit.ftl: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/wcm/widget/wgt_crud_01/src/main/webapp/resources/images/icon.png -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_asc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_asc.png -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_both.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_both.png -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_desc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_desc.png -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/ajax-loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/wcm/widget/wgt_crud_01/src/main/webapp/resources/images/ajax-loader.gif -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_asc_disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_asc_disabled.png -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_desc_disabled.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sergiomachadosilva/wgtCadastroPessoas/HEAD/wcm/widget/wgt_crud_01/src/main/webapp/resources/images/sort_desc_disabled.png -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/WEB-INF/jboss-web.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | /wgt_crud_01 4 | false 5 | 6 | -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/events/enableFields.js: -------------------------------------------------------------------------------- 1 | function enableFields(form){ 2 | disableAllFields(form); 3 | 4 | form.setEnabled("atividadeRemunerada", true); 5 | } 6 | 7 | function disableAllFields(form) { 8 | var fields = form.getCardData(); 9 | var keys = fields.keySet().toArray(); 10 | for (var k in keys) { 11 | var field = keys[k]; 12 | form.setEnabled(field, false); 13 | } 14 | } -------------------------------------------------------------------------------- /.settings/.jsdtscope: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/WEB-INF/web.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 7 | 8 | 9 | 30 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/events/validateForm.js: -------------------------------------------------------------------------------- 1 | function validateForm(form){ 2 | form.setHidePrintLink(true); 3 | try { 4 | var nome = String(form.getValue("nome")); 5 | var profissao = String(form.getValue("profissao")); 6 | 7 | if (!nome) { 8 | throw "Informe o Nome"; 9 | } 10 | 11 | if (!profissao) { 12 | throw "Informe a Profissão"; 13 | } 14 | 15 | // Validar tabela dinâmica de endereços 16 | validarEnderecos(form) 17 | 18 | }catch(ex) { 19 | throw ex 20 | } 21 | } -------------------------------------------------------------------------------- /.project: -------------------------------------------------------------------------------- 1 | 2 | 3 | wgtCadastroPessoas 4 | 5 | 6 | 7 | 8 | 9 | org.eclipse.wst.validation.validationbuilder 10 | 11 | 12 | 13 | 14 | 15 | org.eclipse.wst.jsdt.core.jsNature 16 | com.totvs.tds.ecm.designer.nature 17 | 18 | 19 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/tpl_dataTableUsers.ftl: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/custom.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | // Insere o contador de linhas nas tabelas pai e filho 3 | tableLineCount(); 4 | 5 | FLUIGC.switcher.isReadOnly('#atividadeRemunerada', true); 6 | }); 7 | 8 | 9 | /** 10 | * Insere a numeração correspondente a cada linha da tabela pai e filho de forma 11 | * automática. 12 | * 13 | * @param {String} tablename Parâmetro obrigatório, tablename da tabela pai e filho. 14 | * Quando informado um valor válido para tablename, o script irá 15 | * percorre apenas as linhas da própia tabela. Se informar o valor 16 | * false para o parâmetro tablename, o script irá percorrer todas as 17 | * tabelas. Recomendado apenas para o carregamento do formulário. 18 | * @return {void} 19 | * @author Sérgio Machado 20 | */ 21 | function tableLineCount(tablename) { 22 | try { 23 | let atributo = "[tablename]"; 24 | if(tablename){ 25 | atributo = `[tablename='${tablename}']` 26 | } 27 | $.each($(atributo), function(index) { 28 | const tabelaRow = $(this).find('tbody tr').not(':first'); 29 | tabelaRow.each(function(i) { 30 | tabelaRow.eq(i).find('td.count').html(`${i + 1}`); 31 | }); 32 | }); 33 | } catch (ex) { 34 | console.error("function " + arguments.callee.name + " => " + ex) 35 | } 36 | } -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/events/utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Realiza validação da tabela para e filho de Endereços 3 | * @param {object} form Parâmetro obrigatório, objeto formController 4 | * @return {throw} 5 | * @author Sérgio Machado 6 | */ 7 | function validarEnderecos(form) { 8 | var indexes = form.getChildrenIndexes("enderecos"); 9 | if (indexes.length > 0) { 10 | for (var i = 0; i < indexes.length; i++) { 11 | var row = indexes[i]; 12 | var cep = String(form.getValue("cep___" + row)); 13 | var endereco = String(form.getValue("endereco___" + row)); 14 | var numero = String(form.getValue("numero___" + row)); 15 | var cidade = String(form.getValue("cidade___" + row)); 16 | var estado = String(form.getValue("estado___" + row)); 17 | 18 | if(!cep){ 19 | throw "CEP não informado na linha " + (i + 1); 20 | } else if(!validarCep(cep)){ 21 | throw "CEP "+cep+" inválido na linha " + (i + 1); 22 | } 23 | if(!endereco){ 24 | throw "Endereço não informado na linha " + (i + 1); 25 | } 26 | 27 | if(!numero){ 28 | throw "Número não informado na linha " + (i + 1); 29 | } 30 | 31 | if(!cidade){ 32 | throw "Cidade não informada na linha " + (i + 1); 33 | } 34 | 35 | if(!estado){ 36 | throw "Estado não informado na linha " + (i + 1); 37 | } 38 | } 39 | }else{ 40 | throw "Por favor, adicione pelo menos 01 Endereço na lista"; 41 | } 42 | } 43 | 44 | 45 | /** 46 | * Valida se o cep esta no formato 00000-000 47 | * @param {String} cep Parâmetro obrigatório, cep que deseja validar 48 | * @return {boolean} Retorna verdadeiro caso o cep seja válido, caso contrário retorna false 49 | * @author Sérgio Machado 50 | */ 51 | function validarCep(cep) { 52 | var expressao = new RegExp(/^\d{2}\.\d{3}-\d{3}$/); 53 | if (cep == '' || !expressao.test(cep)) { 54 | return false; 55 | } 56 | return true 57 | } -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/application.info: -------------------------------------------------------------------------------- 1 | application.type=widget 2 | application.code=wgt_crud_01 3 | application.title=Crud de Pessoas 01 4 | application.description=Cadastre, altere e remova registros do Cadastro de Pessoas 5 | application.category=Cadastros 6 | application.renderer=freemarker 7 | developer.code=sergio.machado 8 | developer.name=Sergio Machado 9 | developer.url=https://www.linkedin.com/in/sergio-machado-analista-fluig 10 | application.uiwidget=true 11 | application.mobileapp=true 12 | application.version=${build.version}-${build.revision} 13 | view.file=view.ftl 14 | edit.file=edit.ftl 15 | locale.file.base.name=wgt_crud_01 16 | 17 | application.resource.css.1=/resources/css/jquery.dataTables.css 18 | application.resource.css.2=/resources/css/buttons.dataTables.min.css 19 | application.resource.css.3=/resources/css/sweetalert2.min.css 20 | application.resource.css.4=/resources/css/toastr.min.css 21 | application.resource.css.5=/resources/css/widget_styles.css 22 | 23 | application.resource.js.6=/resources/js/libs/jquery.dataTables.min.js 24 | application.resource.js.7=/resources/js/libs/dataTables.buttons.min.js 25 | application.resource.js.8=/resources/js/libs/jszip.min.js 26 | application.resource.js.9=/resources/js/libs/buttons.html5.min.js 27 | application.resource.js.10=/resources/js/libs/pdfmake.min.js 28 | application.resource.js.11=/resources/js/libs/vfs_fonts.min.js 29 | application.resource.js.12=/resources/js/libs/jquery.mask.min.js 30 | application.resource.js.13=/resources/js/libs/jquery.validate.min.js 31 | application.resource.js.14=/resources/js/libs/sweetalert2.min.js 32 | application.resource.js.15=/resources/js/libs/toastr.min.js 33 | application.resource.js.16=/resources/js/widget_main.js 34 | application.resource.js.17=/resources/js/widget_utils.js 35 | application.resource.js.18=/resources/js/widget_dataTables.js 36 | application.resource.js.19=/resources/js/widget_forms.js 37 | application.resource.js.20=/resources/js/widget_modals.js 38 | application.resource.js.21=/resources/js/widget_pdfMake.js 39 | application.resource.js.22=/resources/js/widget_services.js 40 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/images/empyt-list.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/js/widget_utils.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Exibe modal com mensagem do erro na tela 3 | * @param {string} title Parâmetro obrigatório, título da mensagem do erro 4 | * @param {string} ex Parâmetro obrigatório, exception lançada pela função 5 | * @return {string} 6 | * @author Sérgio Machado 7 | */ 8 | MyWidget.utils.handleError = function(title, ex) { 9 | var messageError = this.utils.handleErrorValidateForm(ex); 10 | console.error(messageError) 11 | this.loading.hide(); 12 | Swal.fire( 13 | 'Erro!', 14 | `${title}:
${messageError}`, 15 | 'error' 16 | ); 17 | }.bind(MyWidget); 18 | 19 | 20 | /** 21 | * Trata a mensagem de erro removendo a parte '(validateForm#xx)' 22 | * @param {string} str Parâmetro obrigatório, mensagem de erro 23 | * @return {string} 24 | * @author Sérgio Machado 25 | */ 26 | MyWidget.utils.handleErrorValidateForm = function(str) { 27 | var regex = /(\(validateForm#\d+\))|(JavaException: com\.fluig\.ecm\.exception\.validation\.ECMCardIndexUpdateException:)/g; 28 | // expressão regular que captura a parte (validateForm#xx) ou a string "JavaException: com.fluig.ecm.exception.validation.ECMCardIndexUpdateException:" 29 | return str.replace(regex, ''); 30 | }.bind(MyWidget); 31 | 32 | 33 | /** 34 | * Método para facilitar a criação de objetos que representam uma constraint 35 | * @param {string} field Parâmetro obrigatório, nome do campo que será filtrado 36 | * @param {string | number | boolean | null} initialValue Parâmetro obrigatório, valor inicial do campo a ser filtrado 37 | * @param {string | number | boolean | null} finalValue Parâmetro opcional, valor final do campo a ser filtrado 38 | * @param {?number} type Parâmetro opcional, tipo da condição que podem ser (1 - MUST, 2 - SHOULD, 3 - MUST_NOT) 39 | * @param {?boolean} likeSearch Parâmetro opcional 40 | * @return {object} 41 | * @author Sérgio Machado 42 | */ 43 | MyWidget.utils.createConstraint = function(field, initialValue, finalValue = initialValue, type = 1, likeSearch = false) { 44 | if (typeof field !== "string" || typeof initialValue === "undefined") { 45 | throw new TypeError("Os parâmetros field e initialValue são obrigatórios e initialValue não pode ser undefined"); 46 | } 47 | if (![1, 2, 3].includes(type)) { 48 | throw new TypeError("O parâmetro type deve ser um número válido (1, 2 ou 3)"); 49 | } 50 | if (typeof likeSearch !== "boolean") { 51 | throw new TypeError("O parâmetro likeSearch deve ser um valor booleano"); 52 | } 53 | 54 | return { 55 | _field: field, 56 | _initialValue: initialValue, 57 | _finalValue: finalValue, 58 | _type: type, 59 | _likeSearch: likeSearch 60 | }; 61 | 62 | }.bind(MyWidget); -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/js/widget_pdfMake.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Gera PDF com o PDFMake 3 | * @param {object[]} dados Parâmetro obrigatório, lista de dados para geração do PDF 4 | * @return {void} 5 | * @author Sérgio Machado 6 | */ 7 | MyWidget.pdfMake.generatePDF = function(dados) { 8 | try{ 9 | const usuarioNome = this.currentUser.fullName; 10 | const dataCorrente = moment().format('DD/MM/YYYY [às] HH:mm'); 11 | const tableBody = dados.map((obj, index) => [ 12 | {text: (index +1), alignment: 'center', bold: true}, 13 | {text: obj.documentId}, 14 | {text: obj.dataCriacao, noWrap: true}, 15 | {text: obj.nome}, 16 | {text: obj.profissao}, 17 | {text: obj.dataNascimento}, 18 | {text: obj.atividadeRemuneradaText} 19 | ]).map((row, index) => { 20 | row.forEach(cell => { 21 | cell.margin = [5, 5, 5, 5]; 22 | cell.fontSize = 9; 23 | if (index % 2 === 0) { 24 | cell.fillColor = '#f4f4f4'; 25 | } 26 | }); 27 | return row; 28 | }); 29 | 30 | const docDefinition = { 31 | styles: { 32 | pageTitle: { 33 | fontSize: 22, 34 | bold: true, 35 | alignment: 'center', 36 | color: '#f7734e', 37 | margin: [0, 0, 0, 5] 38 | }, 39 | pageSubTitle: { 40 | fontSize: 9, 41 | alignment: 'center', 42 | color: '#333', 43 | margin: [0, 0, 0, 30] 44 | }, 45 | tableHeader:{ 46 | fillColor: '#2ac4c0', 47 | color: '#fff', 48 | margin: [5, 5, 5, 5], 49 | bold: true, 50 | fontSize: 11, 51 | } 52 | }, 53 | content: [ 54 | { text: 'Dados do Relatório', style: 'pageTitle' }, 55 | { text: `Emitido por: ${usuarioNome} em ${dataCorrente}`, style: 'pageSubTitle' }, 56 | { 57 | table: { 58 | headerRows: 1, 59 | widths: ['auto', 'auto', 'auto', '*', '*', '*', '*'], 60 | body: [ 61 | [ 62 | { text: '#', style: 'tableHeader', alignment: 'center'}, 63 | { text: 'ID', style: 'tableHeader'}, 64 | { text: 'Data Criação', style: 'tableHeader'}, 65 | { text: 'Nome', style: 'tableHeader'}, 66 | { text: 'Profissão', style: 'tableHeader'}, 67 | { text: 'Nascimento', style: 'tableHeader'}, 68 | { text: 'Empregado', style: 'tableHeader'} 69 | ], 70 | ...tableBody 71 | ], 72 | }, 73 | layout: 'noBorders' 74 | } 75 | ], 76 | footer: function (currentPage, pageCount) { 77 | return [ 78 | { 79 | text: ' Página ' + currentPage.toString() + ' de ' + pageCount, 80 | alignment: 'center', 81 | color: '#666', 82 | fontSize: 10, 83 | }, 84 | ] 85 | }, 86 | pageSize: 'A4', 87 | pageMargins: [36, 36, 36, 50], 88 | pageOrientation: 'portrait', 89 | }; 90 | 91 | //pdfMake.createPdf(docDefinition).download('relatorio.pdf'); 92 | pdfMake.createPdf(docDefinition).open(); 93 | 94 | }catch (ex) { 95 | console.error(ex) 96 | Swal.fire( 97 | 'Erro!', 98 | `Erro ao gerar o PDF:
${ex}`, 99 | 'error' 100 | ) 101 | } 102 | }.bind(MyWidget); -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/view.ftl: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 |
6 |
7 |
8 |

Filtro

9 |
10 |
    11 |
  • 12 | 15 |
    • 16 |
17 |
18 |
19 |
20 |
21 | 22 |
23 |
24 |
25 | 26 |
27 | 28 | 29 | 30 | 31 |
32 |
33 |
34 |
35 |
36 | 37 |
38 | 39 | 40 | 41 | 42 |
43 |
44 |
45 |
46 | 47 | Buscar Dados 48 | 49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 |
#IDData CriaçãoCriado PorNomeProfissãoNascimentoEmpregadoAções
71 |
72 |
73 |
74 |
75 |
76 | 77 | 78 | <#include "tpl_formModalNew.ftl"> 79 | <#include "tpl_formModalUpdate.ftl"> 80 | <#include "tpl_formModalView.ftl"> 81 | <#include "tpl_dataTableUsers.ftl"> 82 | 83 |
84 | 85 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Widget com CRUD completo com tabelas Pai e Filho 2 | 3 | Este projeto aborda a criação de um crud completo com tabelas pai e filho dentro de uma widget para a plataforma [Fluig](https://www.totvs.com/fluig/). 4 | 5 | ## Visão Geral 6 | 7 | A widget que criei permite a criação, leitura, atualização e exclusão (CRUD) de registros dentro de uma interface fluída e intuitiva. Além disso, o projeto aborda o conceito de tabelas pai e filho, proporcionando a capacidade de adicionar, atualizar e excluir linhas de registros relacionados. 8 | 9 | A solução visa melhorar a experiência do usuário ao simplificar o pré-cadastro e tornar as operações mais eficientes. Ao utilizar esta widget, os usuários poderão realizar todas as operações CRUD de forma direta e fácil. 10 | 11 | ## Bibliotecas Utilizadas 12 | 13 | A widget utiliza as seguintes bibliotecas: 14 | 15 | - [Toastr](https://github.com/CodeSeven/toastr): Biblioteca para exibir notificações de alerta. 16 | - [SweetAlert2](https://sweetalert2.github.io/): Biblioteca para criar modais de alerta personalizados. 17 | - [PDFMAKE](https://pdfmake.github.io/docs/): Biblioteca para gerar arquivos PDF dinamicamente. 18 | - [jQuery Validation Plugin](https://jqueryvalidation.org/): Biblioteca para validar formulários utilizando jQuery. 19 | - [jQuery Mask Plugin](https://igorescobar.github.io/jQuery-Mask-Plugin/): Biblioteca para aplicar máscaras em campos de formulário. 20 | - [DataTables plug-in for jQuery](https://datatables.net/): Biblioteca para criação e manipulação de tabelas interativas. 21 | 22 | 23 | ## Recursos e Aprendizados 24 | Ao explorar este projeto, você encontrará os seguintes recursos e tópicos de aprendizado: 25 | 26 | - Construção de um dataset avançado; 27 | - Tratamento de erros no lado do back-end e do front-end; 28 | - Execução de dataset via API REST; 29 | - Consumo de serviço SOAP; 30 | - Utilização do SDK do Fluig para atualização de registros em formulários; 31 | - Modularização da widget em vários arquivos JS sem perder o escopo principal; 32 | - Utilização de Promises, API Fetch e async/await dentro da widget; 33 | - Retorno de um objeto único contendo os dados do formulário principal e dos dados das tabelas dinâmicas; 34 | - Renderização de dados com Mustache; 35 | - Separação da widget em vários templates FTL; 36 | - Importação de bibliotecas externas na widget; 37 | - Filtragem de registros de um formulário com base em um intervalo de datas; 38 | - Geração de relatório com PDFMake. 39 | 40 | ## Instalação 41 | 1. Faça o download deste repositório para o seu ambiente local. 42 | 2. Importe o projeto no Eclipse ou Visual Studio Code, dependendo da sua preferência de ambiente de desenvolvimento. 43 | 3. Exporte o formulário form_cadastroPessoas01 para o servidor, seguindo as orientações da documentação [Exportando formulários](https://tdn.totvs.com/pages/releaseview.action?pageId=239018344#samples-3). 44 | 4. Exporte o dataset avançado *crud_cadastroPessoas01* para o servidor. Ao fazer isso, preste atenção nos seguintes tópicos: 45 | 46 | 1. Verifique se o valor da variável **datasetForm** no dataset corresponde exatamente ao código do dataset exportado no item 3. 47 | 48 | 2. No final do dataset, há uma função construtora chamada **getWebServiceFluig**. Informe as credenciais de acesso de um usuário do seu ambiente. 49 | 50 | 3. Verifique se os serviços SOAP 'ECMCardService' e 'ECMDocumentService' estão cadastrados no seu ambiente. Se estiverem cadastrados com um código diferente, altere os métodos **getCardService** e **getDocumentService**. 51 | 52 | 5. Exporte sua Widget para o servidor Fluig. Antes de fazer a exportação, verifique se a propriedade 'datasetCrud' no arquivo JS principal da widget contém o valor do código do dataset avançado exportado no item 4 53 | 54 | 6. Após exportar a widget, crie uma nova página seguindo as orientações da documentação [Criar página](https://tdn.totvs.com/pages/releaseview.action?pageId=234455933). Adicione a widget em algum slot do layout e publique a página. 55 | 56 | 57 | ## Capturas de Telas 58 | 59 | A seguir, estão algumas capturas de telas da widget em diferentes etapas do CRUD: 60 | 61 | *Figura 1: Tela de listagem dos registros.* 62 | ![Tela de Listagem dos Registros](https://github.com/sergiomachadosilva/wgtCadastroPessoas/blob/master/forms/form_cadastroPessoas01/listagem_registros.png) 63 | 64 | *Figura 2: Tela de criação de um novo registro.* 65 | ![Tela de Criação de um novo Registro](https://github.com/sergiomachadosilva/wgtCadastroPessoas/blob/master/forms/form_cadastroPessoas01/modal_criacao_registro.png) 66 | 67 | *Figura 3: Tela de visualização de um registro específico.* 68 | ![Tela de Visualização de um Registro Específico](https://github.com/sergiomachadosilva/wgtCadastroPessoas/blob/master/forms/form_cadastroPessoas01/modal_visualizacao_registro.png) 69 | 70 | *Figura 4: Tela de edição de um registro específico.* 71 | ![Tela de Edição de um Registro Específico](https://github.com/sergiomachadosilva/wgtCadastroPessoas/blob/master/forms/form_cadastroPessoas01/modal_edicao_registro.png) 72 | 73 | 74 | ## Contribuições 75 | 76 | Sinta-se à vontade para explorar, aprimorar e contribuir com este projeto. Caso tenha sugestões, correções ou novos recursos a adicionar, entre em contato comigo através do LinkedIn: 77 | 78 | [Sérgio Machado](https://www.linkedin.com/in/sergio-machado-analista-fluig) -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/js/libs/toastr.min.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Note that this is toastr v2.1.3, the "latest" version in url has no more maintenance, 3 | * please go to https://cdnjs.com/libraries/toastr.js and pick a certain version you want to use, 4 | * make sure you copy the url from the website since the url may change between versions. 5 | * */ 6 | !function(e){e(["jquery"],function(e){return function(){function t(e,t,n){return g({type:O.error,iconClass:m().iconClasses.error,message:e,optionsOverride:n,title:t})}function n(t,n){return t||(t=m()),v=e("#"+t.containerId),v.length?v:(n&&(v=d(t)),v)}function o(e,t,n){return g({type:O.info,iconClass:m().iconClasses.info,message:e,optionsOverride:n,title:t})}function s(e){C=e}function i(e,t,n){return g({type:O.success,iconClass:m().iconClasses.success,message:e,optionsOverride:n,title:t})}function a(e,t,n){return g({type:O.warning,iconClass:m().iconClasses.warning,message:e,optionsOverride:n,title:t})}function r(e,t){var o=m();v||n(o),u(e,o,t)||l(o)}function c(t){var o=m();return v||n(o),t&&0===e(":focus",t).length?void h(t):void(v.children().length&&v.remove())}function l(t){for(var n=v.children(),o=n.length-1;o>=0;o--)u(e(n[o]),t)}function u(t,n,o){var s=!(!o||!o.force)&&o.force;return!(!t||!s&&0!==e(":focus",t).length)&&(t[n.hideMethod]({duration:n.hideDuration,easing:n.hideEasing,complete:function(){h(t)}}),!0)}function d(t){return v=e("
").attr("id",t.containerId).addClass(t.positionClass),v.appendTo(e(t.target)),v}function p(){return{tapToDismiss:!0,toastClass:"toast",containerId:"toast-container",debug:!1,showMethod:"fadeIn",showDuration:300,showEasing:"swing",onShown:void 0,hideMethod:"fadeOut",hideDuration:1e3,hideEasing:"swing",onHidden:void 0,closeMethod:!1,closeDuration:!1,closeEasing:!1,closeOnHover:!0,extendedTimeOut:1e3,iconClasses:{error:"toast-error",info:"toast-info",success:"toast-success",warning:"toast-warning"},iconClass:"toast-info",positionClass:"toast-top-right",timeOut:5e3,titleClass:"toast-title",messageClass:"toast-message",escapeHtml:!1,target:"body",closeHtml:'',closeClass:"toast-close-button",newestOnTop:!0,preventDuplicates:!1,progressBar:!1,progressClass:"toast-progress",rtl:!1}}function f(e){C&&C(e)}function g(t){function o(e){return null==e&&(e=""),e.replace(/&/g,"&").replace(/"/g,""").replace(/'/g,"'").replace(//g,">")}function s(){c(),u(),d(),p(),g(),C(),l(),i()}function i(){var e="";switch(t.iconClass){case"toast-success":case"toast-info":e="polite";break;default:e="assertive"}I.attr("aria-live",e)}function a(){E.closeOnHover&&I.hover(H,D),!E.onclick&&E.tapToDismiss&&I.click(b),E.closeButton&&j&&j.click(function(e){e.stopPropagation?e.stopPropagation():void 0!==e.cancelBubble&&e.cancelBubble!==!0&&(e.cancelBubble=!0),E.onCloseClick&&E.onCloseClick(e),b(!0)}),E.onclick&&I.click(function(e){E.onclick(e),b()})}function r(){I.hide(),I[E.showMethod]({duration:E.showDuration,easing:E.showEasing,complete:E.onShown}),E.timeOut>0&&(k=setTimeout(b,E.timeOut),F.maxHideTime=parseFloat(E.timeOut),F.hideEta=(new Date).getTime()+F.maxHideTime,E.progressBar&&(F.intervalId=setInterval(x,10)))}function c(){t.iconClass&&I.addClass(E.toastClass).addClass(y)}function l(){E.newestOnTop?v.prepend(I):v.append(I)}function u(){if(t.title){var e=t.title;E.escapeHtml&&(e=o(t.title)),M.append(e).addClass(E.titleClass),I.append(M)}}function d(){if(t.message){var e=t.message;E.escapeHtml&&(e=o(t.message)),B.append(e).addClass(E.messageClass),I.append(B)}}function p(){E.closeButton&&(j.addClass(E.closeClass).attr("role","button"),I.prepend(j))}function g(){E.progressBar&&(q.addClass(E.progressClass),I.prepend(q))}function C(){E.rtl&&I.addClass("rtl")}function O(e,t){if(e.preventDuplicates){if(t.message===w)return!0;w=t.message}return!1}function b(t){var n=t&&E.closeMethod!==!1?E.closeMethod:E.hideMethod,o=t&&E.closeDuration!==!1?E.closeDuration:E.hideDuration,s=t&&E.closeEasing!==!1?E.closeEasing:E.hideEasing;if(!e(":focus",I).length||t)return clearTimeout(F.intervalId),I[n]({duration:o,easing:s,complete:function(){h(I),clearTimeout(k),E.onHidden&&"hidden"!==P.state&&E.onHidden(),P.state="hidden",P.endTime=new Date,f(P)}})}function D(){(E.timeOut>0||E.extendedTimeOut>0)&&(k=setTimeout(b,E.extendedTimeOut),F.maxHideTime=parseFloat(E.extendedTimeOut),F.hideEta=(new Date).getTime()+F.maxHideTime)}function H(){clearTimeout(k),F.hideEta=0,I.stop(!0,!0)[E.showMethod]({duration:E.showDuration,easing:E.showEasing})}function x(){var e=(F.hideEta-(new Date).getTime())/F.maxHideTime*100;q.width(e+"%")}var E=m(),y=t.iconClass||E.iconClass;if("undefined"!=typeof t.optionsOverride&&(E=e.extend(E,t.optionsOverride),y=t.optionsOverride.iconClass||y),!O(E,t)){T++,v=n(E,!0);var k=null,I=e("
"),M=e("
"),B=e("
"),q=e("
"),j=e(E.closeHtml),F={intervalId:null,hideEta:null,maxHideTime:null},P={toastId:T,state:"visible",startTime:new Date,options:E,map:t};return s(),r(),a(),f(P),E.debug&&console&&console.log(P),I}}function m(){return e.extend({},p(),b.options)}function h(e){v||(v=n()),e.is(":visible")||(e.remove(),e=null,0===v.children().length&&(v.remove(),w=void 0))}var v,C,w,T=0,O={error:"error",info:"info",success:"success",warning:"warning"},b={clear:r,remove:c,error:t,getContainer:n,info:o,options:{},subscribe:s,success:i,version:"2.1.3",warning:a};return b}()})}("function"==typeof define&&define.amd?define:function(e,t){"undefined"!=typeof module&&module.exports?module.exports=t(require("jquery")):window.toastr=t(window.jQuery)}); 7 | //# sourceMappingURL=toastr.js.map 8 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/css/toastr.min.css: -------------------------------------------------------------------------------- 1 | /* * Note that this is toastr v2.1.3, the "latest" version in url has no more maintenance, * please go to https://cdnjs.com/libraries/toastr.js and pick a certain version you want to use, * make sure you copy the url from the website since the url may change between versions. * */ .toast-title{font-weight:700}.toast-message{-ms-word-wrap:break-word;word-wrap:break-word}.toast-message a,.toast-message label{color:#FFF}.toast-message a:hover{color:#CCC;text-decoration:none}.toast-close-button{position:relative;right:-.3em;top:-.3em;float:right;font-size:20px;font-weight:700;color:#FFF;-webkit-text-shadow:0 1px 0 #fff;text-shadow:0 1px 0 #fff;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80);line-height:1}.toast-close-button:focus,.toast-close-button:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}.rtl .toast-close-button{left:-.3em;float:left;right:.3em}button.toast-close-button{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none}.toast-top-center{top:0;right:0;width:100%}.toast-bottom-center{bottom:0;right:0;width:100%}.toast-top-full-width{top:0;right:0;width:100%}.toast-bottom-full-width{bottom:0;right:0;width:100%}.toast-top-left{top:12px;left:12px}.toast-top-right{top:12px;right:12px}.toast-bottom-right{right:12px;bottom:12px}.toast-bottom-left{bottom:12px;left:12px}#toast-container{position:fixed;z-index:999999;pointer-events:none}#toast-container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#toast-container>div{position:relative;pointer-events:auto;overflow:hidden;margin:0 0 6px;padding:15px 15px 15px 50px;width:300px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background-position:15px center;background-repeat:no-repeat;-moz-box-shadow:0 0 12px #999;-webkit-box-shadow:0 0 12px #999;box-shadow:0 0 12px #999;color:#FFF;opacity:.8;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);filter:alpha(opacity=80)}#toast-container>div.rtl{direction:rtl;padding:15px 50px 15px 15px;background-position:right 15px center}#toast-container>div:hover{-moz-box-shadow:0 0 12px #000;-webkit-box-shadow:0 0 12px #000;box-shadow:0 0 12px #000;opacity:1;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);filter:alpha(opacity=100);cursor:pointer}#toast-container>.toast-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=)!important}#toast-container>.toast-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=)!important}#toast-container>.toast-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==)!important}#toast-container>.toast-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=)!important}#toast-container.toast-bottom-center>div,#toast-container.toast-top-center>div{width:300px;margin-left:auto;margin-right:auto}#toast-container.toast-bottom-full-width>div,#toast-container.toast-top-full-width>div{width:96%;margin-left:auto;margin-right:auto}.toast{background-color:#030303}.toast-success{background-color:#51A351}.toast-error{background-color:#BD362F}.toast-info{background-color:#2F96B4}.toast-warning{background-color:#F89406}.toast-progress{position:absolute;left:0;bottom:0;height:4px;background-color:#000;opacity:.4;-ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=40);filter:alpha(opacity=40)}@media all and (max-width:240px){#toast-container>div{padding:8px 8px 8px 50px;width:11em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:241px) and (max-width:480px){#toast-container>div{padding:8px 8px 8px 50px;width:18em}#toast-container>div.rtl{padding:8px 50px 8px 8px}#toast-container .toast-close-button{right:-.2em;top:-.2em}#toast-container .rtl .toast-close-button{left:-.2em;right:.2em}}@media all and (min-width:481px) and (max-width:768px){#toast-container>div{padding:15px 15px 15px 50px;width:25em}#toast-container>div.rtl{padding:15px 50px 15px 15px}} -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/css/widget_styles.css: -------------------------------------------------------------------------------- 1 | #visualizacaoPagina .layout-1-1{ 2 | margin-bottom: 10px; 3 | } 4 | 5 | #visualizacaoPagina h2.pageTitle{ 6 | color: #58595b; 7 | font-size: 28px; 8 | margin-top: 0px; 9 | } 10 | 11 | .wcm-all-content .wcm_widget{ 12 | padding: 0px; 13 | margin: 0px; 14 | } 15 | 16 | /* Custom panel */ 17 | .fluig-style-guide .panel-custom{ 18 | border: solid 1px #1eaad9!important; 19 | } 20 | 21 | .fluig-style-guide .panel-custom.panel-fullscreen{ 22 | border: solid 1px #FFF!important; 23 | display: block; 24 | border-radius: 0; 25 | z-index: 1060; 26 | position: fixed; 27 | width: 100% !important; 28 | height: 100% !important; 29 | top: 0; 30 | right: 0; 31 | left: 0; 32 | bottom: 0; 33 | overflow: auto; 34 | } 35 | 36 | .fluig-style-guide .panel-custom > .panel-heading{ 37 | border-bottom: 1px solid rgba(235, 237, 242); 38 | } 39 | 40 | .fluig-style-guide .panel-custom > .panel-heading .heading-elements{ 41 | background-color: inherit; 42 | position: absolute; 43 | top: 3px; 44 | right: 5px; 45 | } 46 | 47 | .fluig-style-guide .panel-custom > .panel-heading .heading-elements button{ 48 | border: transparent; 49 | background: none; 50 | } 51 | 52 | .fluig-style-guide .panel-custom > .panel-heading .heading-elements button:focus{ 53 | box-shadow: none; 54 | } 55 | 56 | .fluig-style-guide .panel-custom > .panel-heading .heading-elements button:focus-visible{ 57 | outline: none 58 | } 59 | 60 | #tabela td.count{ 61 | font-weight: bold; 62 | text-align: center; 63 | } 64 | 65 | 66 | #toast-container > .toast { 67 | opacity: 1 !important; 68 | } 69 | 70 | #toast-container .toast-title { 71 | margin-bottom: 7px; 72 | } 73 | 74 | #toast-container .toast-message { 75 | line-height: 1.25; 76 | } 77 | 78 | .swal2-container{ 79 | z-index: 1070; 80 | } 81 | .dataTables_wrapper .dataTables_empty p{ 82 | color: #58595b; 83 | } 84 | 85 | .dataTables_wrapper .dt-buttons .btn{ 86 | transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out 87 | } 88 | 89 | .dataTables_wrapper .dt-buttons .btn-sm{ 90 | padding: 3px 6px; 91 | } 92 | 93 | .dataTables_wrapper .dt-buttons .btn:focus{ 94 | outline: 0!important; 95 | } 96 | 97 | .dataTables_wrapper .dt-buttons .buttons-excel{ 98 | background-color: rgba(79,206,93,.1); 99 | color: #4fce5d; 100 | } 101 | 102 | .dataTables_wrapper .dt-buttons .buttons-excel:hover, 103 | .dataTables_wrapper .dt-buttons .buttons-excel:focus{ 104 | background-color: #4fce5d; 105 | color: #fff; 106 | } 107 | 108 | .dataTables_wrapper .dt-buttons .btn-pdf{ 109 | background-color: rgba(196,48,43,.1); 110 | color: #F44336; 111 | } 112 | 113 | .dataTables_wrapper .dt-buttons .btn-pdf:hover, 114 | .dataTables_wrapper .dt-buttons .btn-pdf:focus{ 115 | background-color: #F44336; 116 | color: #fff; 117 | } 118 | 119 | .dataTables_wrapper .dt-buttons .btn-atualizar{ 120 | background-color: rgba(18,165,244,.1); 121 | color: #12a5f4; 122 | } 123 | 124 | .dataTables_wrapper .dt-buttons .btn-atualizar:hover, 125 | .dataTables_wrapper .dt-buttons .btn-atualizar:focus{ 126 | background-color: #12a5f4; 127 | color: #fff; 128 | } 129 | 130 | .dataTables_wrapper tbody td{ 131 | padding: 6px 16px!important; 132 | } 133 | 134 | .dataTables_wrapper tbody td.btn-actions .btn{ 135 | padding: 2px 7px; 136 | } 137 | 138 | .dataTables_wrapper tbody td.btn-actions .btn i{ 139 | font-size: 16px; 140 | top: 2px; 141 | } 142 | 143 | .fluig-style-guide .modal-body fieldset{ 144 | border: solid 1px #ccc; 145 | padding: 10px 20px 15px; 146 | margin-bottom: 30px; 147 | background-color: #f7f7f7; 148 | border-radius: 3px; 149 | } 150 | .fluig-style-guide .modal-body fieldset > legend{ 151 | margin-bottom: 0; 152 | width: initial; 153 | padding: 0 10px; 154 | border-bottom: none; 155 | font-size: 13px; 156 | font-weight: bold; 157 | line-height: 24px; 158 | background-color: #14ccb9; 159 | color: #fff; 160 | border-radius: 3px; 161 | } 162 | 163 | .fluig-style-guide .modal-body table{ 164 | background-color: #FFF; 165 | } 166 | .fluig-style-guide .modal-body table{ 167 | margin-top: 10px; 168 | } 169 | 170 | .fluig-style-guide .modal-body table thead{ 171 | background-color: #14ccb9; 172 | } 173 | 174 | .fluig-style-guide .modal-body table thead th{ 175 | padding: 8px 16px!important; 176 | color: #fff; 177 | } 178 | 179 | .fluig-style-guide .modal-body table thead th, 180 | .fluig-style-guide .modal-body table tbody td, 181 | .fluig-style-guide .modal-body table tbody th{ 182 | border: solid 2px #fff!important; 183 | } 184 | 185 | 186 | /* Custom input-group */ 187 | .fluig-style-guide .input-group.input-group-custom{ 188 | width: 100%; 189 | } 190 | 191 | .fluig-style-guide .input-group.input-group-custom .form-control{ 192 | border-right: none; 193 | color: #07a; 194 | font-weight: bold; 195 | } 196 | 197 | .fluig-style-guide .input-group.input-group-custom .input-group-addon{ 198 | color: #fff; 199 | padding: 4px 7px; 200 | } 201 | 202 | .fluig-style-guide .input-group.input-group-custom .search{ 203 | border-color: #1eaad9; 204 | background-color: #1eaad9; 205 | border-right: 1px solid #fff; 206 | } 207 | 208 | .fluig-style-guide .input-group.input-group-custom .search:hover{ 209 | border-color: #088bb8; 210 | background-color: #088bb8; 211 | border-right: 1px solid #fff; 212 | } 213 | 214 | .fluig-style-guide .input-group.input-group-custom .trash{ 215 | border-color: #f64747; 216 | background-color: #f64747; 217 | } 218 | 219 | .fluig-style-guide .input-group.input-group-custom .trash:hover{ 220 | border-color: #dc2f2f; 221 | background-color: #dc2f2f; 222 | } 223 | 224 | /* Custom dataTable users */ 225 | #renderDataTable #datatable-area{ 226 | padding-top: 0; 227 | padding-bottom: 0; 228 | } 229 | 230 | #renderDataTable .table>tbody>tr>td{ 231 | padding: 2px 16px; 232 | } 233 | 234 | #renderDataTable .table>tbody>tr>td.isSelected .flaticon-square-check{ 235 | display: none; 236 | } 237 | 238 | #renderDataTable .table>tbody>tr.success>td.isSelected .flaticon-square-check{ 239 | display: inline; 240 | } 241 | 242 | #renderDataTable .table>tbody>tr.success>td.isSelected .flaticon-square{ 243 | display: none; 244 | } 245 | 246 | 247 | /* Custom icon trash */ 248 | 249 | .fluig-style-guide .table>tbody>tr>td .btnLixeira i{ 250 | font-size: 20px; 251 | opacity: 0.8; 252 | transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out; 253 | } 254 | 255 | .fluig-style-guide .table>tbody>tr>td .btnLixeira i:hover{ 256 | transform: scale(1.2); 257 | opacity: 1; 258 | } -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/tpl_formModalView.ftl: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/js/widget_modals.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Monta o modal para incluir um novo registro 3 | * @return {void} 4 | * @author Sérgio Machado 5 | */ 6 | MyWidget.modals.modalFormCreate = function() { 7 | let self = this; 8 | try{ 9 | indexes['dependentes'] = 0; // zera o contador dos indíces da tabela dinâmica de Dependentes 10 | indexes['enderecos'] = 0; // zera o contador dos indíces da tabela dinâmica de Endereços 11 | 12 | const idModal = 'modalNew'; 13 | const modalNew = FLUIGC.modal({ 14 | title: 'Novo Registro', 15 | content: Mustache.render($("#tpl_formModalNew").html()), 16 | id: idModal, 17 | size: 'full', 18 | formModal: true, 19 | actions: [{ 20 | 'label': 'Salvar', 21 | 'autoClose': false, 22 | 'classType': 'btn-success' 23 | },{ 24 | 'label': 'Cancelar', 25 | 'autoClose': true, 26 | 'classType': 'btn-primary btnCancelar' 27 | }] 28 | 29 | }, function(err, data) { 30 | if (!err) { 31 | self.forms.initFormValidate(`#${idModal} form.modal-content`); 32 | self.forms.addMasksForm(); 33 | self.forms.addRulesForm(); 34 | self.forms.initComponentsForm(); 35 | 36 | $(`#${idModal} form.modal-content`).on('submit', function(e) { 37 | e.preventDefault(); 38 | const formIsValid = $(this).valid(); 39 | if(formIsValid){ 40 | Swal.fire({ 41 | title: 'Confirmação!', 42 | text: "Tem certeza que deseja realizar este cadastro?", 43 | icon: 'warning', 44 | showCancelButton: true, 45 | confirmButtonColor: '#3085d6', 46 | cancelButtonColor: '#d33', 47 | confirmButtonText: 'Sim, quero cadastrar!', 48 | cancelButtonText: 'Cancelar' 49 | }).then((result) => { 50 | if (result.isConfirmed) { 51 | 52 | const arrayObjectFormData = $(this) 53 | .find('input, select, textarea') 54 | .not('tr:hidden input, tr:hidden select, tr:hidden textarea') 55 | .serializeArray(); 56 | 57 | const formData = self.forms.convertFormDataToObject(arrayObjectFormData); 58 | self.executeCreate(formData, modalNew); 59 | } 60 | }) 61 | }else{ 62 | toastr.warning('Erro durante a validação do formulário.', 'Atenção!', { 63 | positionClass: "toast-top-right", 64 | closeButton: true 65 | }); 66 | } 67 | }) 68 | } 69 | }); 70 | 71 | } catch(ex){ 72 | console.error(ex) 73 | } 74 | }.bind(MyWidget); 75 | 76 | 77 | /** 78 | * Monta o modal para visualizar um registro específico 79 | * @param {object} dados Parâmetro obrigatório, objeto com dados do registro principal e das tabelas dinâmicas 80 | * @return {void} 81 | * @author Sérgio Machado 82 | */ 83 | MyWidget.modals.modalFormView = function(dados) { 84 | let self = this; 85 | try{ 86 | const idModal = 'modalView'; 87 | FLUIGC.modal({ 88 | title: 'Visualização do Registro', 89 | content: Mustache.render($("#tpl_formModalView").html(), dados), 90 | id: idModal, 91 | size: 'full', 92 | actions: [{ 93 | 'label': 'Fechar', 94 | 'autoClose': true, 95 | 'classType': 'btn-primary btnCancelar' 96 | }] 97 | 98 | }, function(err, data) { 99 | if (!err) { 100 | self.loading.hide(); 101 | } 102 | }); 103 | 104 | } catch(ex){ 105 | console.error(ex) 106 | } 107 | }.bind(MyWidget); 108 | 109 | 110 | /** 111 | * Monta o modal para atualizar um registro específico 112 | * @param {object} dados Parâmetro obrigatório, objeto com dados do registro principal e das tabelas dinâmicas 113 | * @return {void} 114 | * @author Sérgio Machado 115 | */ 116 | MyWidget.modals.modalFormUpdate = function(dados) { 117 | let self = this; 118 | try{ 119 | indexes['dependentes'] = 0; // zera o contador dos indíces da tabela dinâmica de Dependentes 120 | indexes['enderecos'] = 0; // zera o contador dos indíces da tabela dinâmica de Endereços 121 | 122 | const idModal = 'modalUpdate'; 123 | const modalUpdate = FLUIGC.modal({ 124 | title: 'Atualizar Registro', 125 | content: Mustache.render($("#tpl_formModalUpdate").html(), dados), 126 | id: idModal, 127 | size: 'full', 128 | formModal: true, 129 | actions: [{ 130 | 'label': 'Atualizar', 131 | 'autoClose': false, 132 | 'classType': 'btn-success' 133 | },{ 134 | 'label': 'Cancelar', 135 | 'autoClose': true, 136 | 'classType': 'btn-primary btnCancelar' 137 | }] 138 | 139 | }, function(err, data) { 140 | if (!err) { 141 | self.loading.hide(); 142 | self.forms.initFormValidate(`#${idModal} form.modal-content`); 143 | self.forms.addMasksForm() 144 | self.forms.addRulesForm(); 145 | self.forms.addValuesIntoRowTableDep(dados.dependentes); 146 | self.forms.addValuesIntoRowTable(dados.enderecos); 147 | self.forms.initComponentsForm(); 148 | 149 | $(`#${idModal} form.modal-content`).on('submit', function(e) { 150 | e.preventDefault(); 151 | const formIsValid = $(this).valid(); 152 | if(formIsValid){ 153 | Swal.fire({ 154 | title: 'Confirmação!', 155 | text: "Tem certeza que deseja atualizar este cadastro?", 156 | icon: 'warning', 157 | showCancelButton: true, 158 | confirmButtonColor: '#3085d6', 159 | cancelButtonColor: '#d33', 160 | confirmButtonText: 'Sim, quero atualizar!', 161 | cancelButtonText: 'Cancelar' 162 | }).then((result) => { 163 | if (result.isConfirmed) { 164 | 165 | const arrayObjectFormData = $(this) 166 | .find('input, select, textarea') 167 | .not('tr:hidden input, tr:hidden select, tr:hidden textarea') 168 | .serializeArray(); 169 | 170 | const formData = self.forms.convertFormDataToObject(arrayObjectFormData); 171 | self.executeUpdate(dados.documentId, formData, modalUpdate); 172 | } 173 | }) 174 | }else{ 175 | toastr.warning('Erro durante a validação do formulário.', 'Atenção!', { 176 | positionClass: "toast-top-right", 177 | closeButton: true 178 | }); 179 | } 180 | }) 181 | } 182 | }); 183 | 184 | } catch(ex){ 185 | console.error(ex) 186 | } 187 | }.bind(MyWidget); 188 | 189 | 190 | /** 191 | * Monta o modal com DataTable de usuários 192 | * @return {void} 193 | * @author Sérgio Machado 194 | */ 195 | MyWidget.modals.modalListUsers = function() { 196 | let self = this; 197 | return new Promise((resolve, reject) => { 198 | try{ 199 | const idModal = 'modalListaUsers'; 200 | const modalDataTableUsers = FLUIGC.modal({ 201 | title: 'Usuários', 202 | content: '
', 203 | id: idModal, 204 | size: 'full', 205 | actions: [{ 206 | 'label': 'Inserir', 207 | 'autoClose': false, 208 | 'classType': 'btn-success', 209 | 'classType': 'btn-success btnInserir' 210 | },{ 211 | 'label': 'Cancelar', 212 | 'autoClose': true, 213 | 'classType': 'btn-primary' 214 | }] 215 | 216 | }, function(err, data) { 217 | if (!err) { 218 | setTimeout(() => { 219 | resolve({ 220 | instancia: modalDataTableUsers, 221 | idModal 222 | }) 223 | }, 100) 224 | } 225 | }); 226 | }catch(ex){ 227 | reject(ex) 228 | } 229 | }); 230 | }.bind(MyWidget); -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/js/libs/jquery.mask.min.js: -------------------------------------------------------------------------------- 1 | // jQuery Mask Plugin v1.14.16 2 | // github.com/igorescobar/jQuery-Mask-Plugin 3 | var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.findInternal=function(a,n,f){a instanceof String&&(a=String(a));for(var p=a.length,k=0;kg?h=10*d:e>=h&&e!==g?c.maskDigitPosMapOld[h]||(e=h,h=h-(k-l)-a,c.maskDigitPosMap[h]&&(h=e)):h>e&&(h=h+(l-k)+f)}return h},behaviour:function(d){d= 11 | d||window.event;c.invalid=[];var e=b.data("mask-keycode");if(-1===a.inArray(e,l.byPassKeys)){e=c.getMasked();var h=c.getCaret(),g=b.data("mask-previus-value")||"";setTimeout(function(){c.setCaret(c.calculateCaretPosition(g))},a.jMaskGlobals.keyStrokeCompensation);c.val(e);c.setCaret(h);return c.callbacks(d)}},getMasked:function(a,b){var h=[],f=void 0===b?c.val():b+"",g=0,k=d.length,n=0,p=f.length,m=1,r="push",u=-1,w=0;b=[];if(e.reverse){r="unshift";m=-1;var x=0;g=k-1;n=p-1;var A=function(){return-1< 12 | g&&-1 2 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/resources/tpl_formModalUpdate.ftl: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/css/buttons.dataTables.min.css: -------------------------------------------------------------------------------- 1 | @keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}button.dtb-hide-drop{display:none !important}div.dt-button-collection-title{text-align:center;padding:.3em 0 .5em;font-size:.9em}div.dt-button-collection-title:empty{display:none}button.dt-button,div.dt-button,a.dt-button,input.dt-button{position:relative;display:inline-block;box-sizing:border-box;margin-right:.333em;margin-bottom:.333em;padding:.5em 1em;border:1px solid rgba(0, 0, 0, 0.3);border-radius:2px;cursor:pointer;font-size:.88em;line-height:1.6em;color:black;white-space:nowrap;overflow:hidden;background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(230, 230, 230, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)");-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;outline:none;text-overflow:ellipsis}button.dt-button.disabled,div.dt-button.disabled,a.dt-button.disabled,input.dt-button.disabled{cursor:default;opacity:.4}button.dt-button:active:not(.disabled),button.dt-button.active:not(.disabled),div.dt-button:active:not(.disabled),div.dt-button.active:not(.disabled),a.dt-button:active:not(.disabled),a.dt-button.active:not(.disabled),input.dt-button:active:not(.disabled),input.dt-button.active:not(.disabled){background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(179, 179, 179, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)");box-shadow:inset 1px 1px 3px #999}button.dt-button:active:not(.disabled):hover:not(.disabled),button.dt-button.active:not(.disabled):hover:not(.disabled),div.dt-button:active:not(.disabled):hover:not(.disabled),div.dt-button.active:not(.disabled):hover:not(.disabled),a.dt-button:active:not(.disabled):hover:not(.disabled),a.dt-button.active:not(.disabled):hover:not(.disabled),input.dt-button:active:not(.disabled):hover:not(.disabled),input.dt-button.active:not(.disabled):hover:not(.disabled){box-shadow:inset 1px 1px 3px #999;background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(128, 128, 128, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)")}button.dt-button:hover,div.dt-button:hover,a.dt-button:hover,input.dt-button:hover{text-decoration:none}button.dt-button:hover:not(.disabled),div.dt-button:hover:not(.disabled),a.dt-button:hover:not(.disabled),input.dt-button:hover:not(.disabled){border:1px solid #666;background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(153, 153, 153, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)")}button.dt-button:focus:not(.disabled),div.dt-button:focus:not(.disabled),a.dt-button:focus:not(.disabled),input.dt-button:focus:not(.disabled){border:1px solid #426c9e;text-shadow:0 1px 0 #c4def1;outline:none;background-color:#79ace9;background:-webkit-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:-moz-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:-ms-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:-o-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:linear-gradient(to bottom, #d1e2f7 0%, #79ace9 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#d1e2f7", EndColorStr="#79ace9")}button.dt-button span.dt-down-arrow,div.dt-button span.dt-down-arrow,a.dt-button span.dt-down-arrow,input.dt-button span.dt-down-arrow{position:relative;top:-2px;color:rgba(70, 70, 70, 0.75);font-size:8px;padding-left:10px}.dt-button embed{outline:none}div.dt-buttons{position:relative;float:left}div.dt-buttons.buttons-right{float:right}div.dataTables_layout_cell div.dt-buttons{float:none}div.dataTables_layout_cell div.dt-buttons.buttons-right{float:none}div.dt-button-collection{position:absolute;top:0;left:0;width:200px;margin-top:3px;padding:4px 4px 0 4px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.4);background-color:white;overflow:hidden;z-index:2002;border-radius:5px;box-shadow:3px 3px 5px rgba(0, 0, 0, 0.3);box-sizing:border-box}div.dt-button-collection button.dt-button,div.dt-button-collection div.dt-button,div.dt-button-collection a.dt-button{position:relative;left:0;right:0;width:100%;display:block;float:none;margin-bottom:4px;margin-right:0}div.dt-button-collection button.dt-button:active:not(.disabled),div.dt-button-collection button.dt-button.active:not(.disabled),div.dt-button-collection div.dt-button:active:not(.disabled),div.dt-button-collection div.dt-button.active:not(.disabled),div.dt-button-collection a.dt-button:active:not(.disabled),div.dt-button-collection a.dt-button.active:not(.disabled){background-color:#dadada;background:-webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:-moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:-ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:-o-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:linear-gradient(to bottom, #f0f0f0 0%, #dadada 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#f0f0f0", EndColorStr="#dadada");box-shadow:inset 1px 1px 3px #666}div.dt-button-collection button.dt-button:first-child,div.dt-button-collection div.dt-button:first-child,div.dt-button-collection a.dt-button:first-child{border-top-left-radius:3px;border-top-right-radius:3px}div.dt-button-collection button.dt-button:last-child,div.dt-button-collection div.dt-button:last-child,div.dt-button-collection a.dt-button:last-child{border-bottom-left-radius:3px;border-bottom-right-radius:3px}div.dt-button-collection div.dt-btn-split-wrapper{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-content:flex-start;align-items:flex-start}div.dt-button-collection div.dt-btn-split-wrapper button.dt-button{margin-right:0px;display:inline-block;width:0;flex-grow:1;flex-shrink:0;flex-basis:50px}div.dt-button-collection div.dt-btn-split-wrapper button.dt-btn-split-drop{min-width:20px;margin-left:-1px;flex-grow:0;flex-shrink:0;flex-basis:0}div.dt-button-collection.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}div.dt-button-collection.fixed.two-column{margin-left:-200px}div.dt-button-collection.fixed.three-column{margin-left:-225px}div.dt-button-collection.fixed.four-column{margin-left:-300px}div.dt-button-collection>:last-child{display:block !important;-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}div.dt-button-collection>:last-child>*{-webkit-column-break-inside:avoid;break-inside:avoid}div.dt-button-collection.two-column{width:400px}div.dt-button-collection.two-column>:last-child{padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}div.dt-button-collection.three-column{width:450px}div.dt-button-collection.three-column>:last-child{padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}div.dt-button-collection.four-column{width:600px}div.dt-button-collection.four-column>:last-child{padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}div.dt-button-collection .dt-button{border-radius:0}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);background:-ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:-moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:-o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:-webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));background:-webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);z-index:2001}@media screen and (max-width: 640px){div.dt-buttons{float:none !important;text-align:center}}button.dt-button.processing,div.dt-button.processing,a.dt-button.processing{color:rgba(0, 0, 0, 0.2)}button.dt-button.processing:after,div.dt-button.processing:after,a.dt-button.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:" ";border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}button.dt-btn-split-drop{margin-left:calc(-1px - 0.333em);padding-left:.333em;padding-right:.333em;padding-bottom:calc(0.5em - 1px);border-radius:0px 1px 1px 0px;color:rgba(70, 70, 70, 0.9)}button.dt-btn-split-drop span.dt-btn-split-drop-arrow{font-size:10px}button.dt-btn-split-drop:hover{z-index:2}div.dt-btn-split-wrapper{display:inline-block}button.buttons-split{border-right:1px solid rgba(70, 70, 70, 0);border-radius:1px 0px 0px 1px}button.dt-btn-split-drop-button{background-color:white}button.dt-btn-split-drop-button:hover{background-color:white} 2 | -------------------------------------------------------------------------------- /forms/form_cadastroPessoas01/form_cadastroPessoas01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 |
12 | 13 | 14 | 15 | 16 |
17 |

Cadastro de Pessoas

18 |
19 | 20 |
21 |
22 |

23 | Dados da Pessoa 24 |

25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 |
33 |
34 |
35 |
36 | 37 | 38 |
39 |
40 |
41 |
42 | 43 |
44 | 45 | 46 | 47 | 48 |
49 |
50 |
51 |
52 |
53 | 54 | 55 |
56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 |

64 | Dependentes 65 |

66 |
67 |
68 |
69 |
70 |
71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 89 | 94 | 99 | 104 | 105 | 106 |
#NomeMatrículaLoginE-mail
85 |
86 | 87 |
88 | 		90 |
91 | 92 |
93 | 		95 |
96 | 97 |
98 | 		100 |
101 | 102 |
103 |
107 |
108 |
109 |
110 |
111 |
112 | 113 | 114 |
115 |
116 |

117 | Endereços 118 |

119 |
120 |
121 |
122 |
123 |
124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 144 | 149 | 154 | 159 | 164 | 198 | 199 | 200 |
#CEPEndereçoNúmeroBairroCidadeEstado
140 |
141 | 142 |
143 | 		145 |
146 | 147 |
148 | 		150 |
151 | 152 |
153 | 		155 |
156 | 157 |
158 | 		160 |
161 | 162 |
163 | 		165 |
166 | 196 |
197 |
201 |
202 |
203 |
204 |
205 |
206 | 207 | 208 |
209 |
210 |
211 |
212 |
213 | 214 | 215 | 216 |
217 |
218 |
219 |
220 | 221 | 222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
230 | 231 | 232 | 233 |
234 |
235 |
236 |
237 | 238 | 239 |
240 |
241 |
242 |
243 |
244 | 245 |
246 |
247 | 248 | 249 | 250 | -------------------------------------------------------------------------------- /wcm/widget/wgt_crud_01/src/main/webapp/resources/js/widget_dataTables.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Renderiza dados na tabela usando a biblioteca DataTables 3 | * @param {object[]} dados Parâmetro obrigatório, Lista de dados 4 | * @return {Promise} 5 | * @author Sérgio Machado 6 | */ 7 | MyWidget.dataTables.exibirDados = function(dados){ 8 | let self = this; 9 | return new Promise((resolve, reject) => { 10 | try{ 11 | $('#tabela').DataTable({ 12 | data: dados, 13 | processing: true, 14 | responsive: true, 15 | dom: 'Bfr<"fs-full-width fs-sm-margin-bottom table-responsive"t>ip', 16 | buttons: [ 17 | { 18 | text: ' Novo', 19 | className: 'btn btn-success btn-incluir fs-sm-margin-right', 20 | action: function () { 21 | self.modals.modalFormCreate(); 22 | }, 23 | }, 24 | { 25 | text: '', 26 | className: 'btn btn-sm fs-sm-margin-right', 27 | extend: 'excel', 28 | filename: 'dados-relatorio', 29 | }, 30 | { 31 | text: '', 32 | className: 'btn btn-sm btn-pdf fs-sm-margin-right', 33 | action: async function () { 34 | try { 35 | self.loading.show(); 36 | let constraints = []; 37 | 38 | let dataCadastroDe = moment($('#dataCadastroDe').val(), "DD/MM/YYYY").format('YYYY/MM/DD'); 39 | let dataCadastroAte = moment($('#dataCadastroAte').val(), "DD/MM/YYYY").format('YYYY/MM/DD'); 40 | 41 | if (dataCadastroDe && dataCadastroAte){ 42 | constraints.push(self.utils.createConstraint("dataCadastro", dataCadastroDe, dataCadastroAte)); 43 | } 44 | 45 | constraints.push(self.utils.createConstraint('method', 'read')); 46 | constraints.push(self.utils.createConstraint('readingType', 'getAll')); 47 | 48 | let dados = await self.services.getAll(constraints); 49 | self.pdfMake.generatePDF(dados) 50 | 51 | } catch (ex) { 52 | self.utils.handleError('Erro ao obter lista de dados', ex); 53 | } finally { 54 | self.loading.hide(); 55 | } 56 | }, 57 | }, 58 | { 59 | text: '', 60 | className: 'btn btn-sm btn-atualizar', 61 | action: async function () { 62 | try { 63 | self.loading.show(); 64 | await self.executeGetAll(); 65 | } catch (ex) { 66 | self.utils.handleError('Erro ao recarregar os dados', ex); 67 | } finally { 68 | self.loading.hide(); 69 | } 70 | }, 71 | } 72 | ], 73 | initComplete: function () { 74 | $('.buttons-excel').removeClass('dt-button').prop('title', 'Exportar para Excel'); 75 | $('.btn-incluir').removeClass('dt-button').prop('title', 'Incluir novo registro'); 76 | $('.btn-pdf').removeClass('dt-button').prop('title', 'Gerar PDF'); 77 | $('.btn-atualizar').removeClass('dt-button').prop('title', 'Recarregar dados'); 78 | }, 79 | columns: [ 80 | { 81 | data: null, 82 | className: 'count text-nowrap fs-v-align-middle', 83 | render: function (data, type, row, meta) { 84 | return meta.row + meta.settings._iDisplayStart + 1; 85 | } 86 | }, 87 | { data: 'documentId', className: 'text-nowrap fs-v-align-middle'}, 88 | { data: 'dataCriacao', className: 'text-nowrap fs-v-align-middle'}, 89 | { data: 'usuarioCriacao', className: 'text-nowrap fs-v-align-middle'}, 90 | { data: 'nome', className: 'text-nowrap fs-v-align-middle'}, 91 | { data: 'profissao', className: 'text-nowrap fs-v-align-middle'}, 92 | { data: 'dataNascimento', className: 'text-nowrap fs-v-align-middle'}, 93 | { data: 'atividadeRemuneradaText', className: 'text-nowrap fs-v-align-middle'}, 94 | { 95 | className: 'text-nowrap text-center fs-v-align-middle btn-actions', 96 | render: function ( data, type, row, meta ) { 97 | let btnVisualizar = ``; 102 | 103 | let btnAtualizar = ``; 108 | 109 | let btnDestroy = ``; 115 | 116 | return `${btnVisualizar} ${btnAtualizar} ${btnDestroy}`; 117 | } 118 | } 119 | 120 | ], 121 | order: [], 122 | pagingType: "numbers", 123 | pageLength: 25, 124 | language: { 125 | lengthMenu: "Mostrar _MENU_ registros", 126 | info: "Mostrando _START_ até _END_ de _TOTAL_ registros", 127 | infoEmpty: "Mostrando 0 até 0 de 0 registros", 128 | infoFiltered: "(Filtrados de _MAX_ registros)", 129 | loadingRecords: "Carregando...", 130 | processing: "Processando...", 131 | search: "Pesquisar:", 132 | zeroRecords: function(){ 133 | return $('
') 134 | .addClass('text-center') 135 | .append( 136 | $('') 137 | .attr('src', '/wgt_crud_01/resources/images/not-found.svg') 138 | .css({ 139 | 'max-width': '175px', 140 | 'margin': '20px 0', 141 | }) 142 | ) 143 | .append($('

').text('Nenhum registro foi encontrado para sua busca')); 144 | }, 145 | emptyTable: function(){ 146 | 147 | var btnOpenModal = $('