templates/kmapi/index.html.twig line 1

Open in your IDE?
  1. {% extends '_lista2.html.twig' %}
  2. {% block custom_table %}true{% endblock %}
  3. {% block css %}
  4.     <style>
  5.         .table.dataTable td {
  6.             font-size: 0.7em;
  7.         }
  8.         .table.dataTable th {
  9.             font-size: 0.7em;
  10.         }
  11.             
  12.     </style>
  13. {% endblock %}
  14. {% block body %}<br>
  15. <div class="container m-5">
  16.  <div class="page-title b-0 bg-white d-flex align-items-center">
  17.     <img src="{{ asset('imagens/appkm.png')}}" alt="Logo KM" class="img-fluid" style="max-width: 100px;">
  18.     <h1 class="h4 mt-4 mb-0 px-3 font-weight-normal">
  19.         PESQUISA
  20.     </h1>
  21. </div>
  22. <form method="POST" action="{{ path('app_kmapi') }}" class="bs-validate" novalidate="true" id="_form_0">
  24.     <div class="row _form_normal_0 align-items-center">
  25.         
  26.           <div class="col-3">
  27.                     <div class="form-label-group mb-2">                    
  28.                             <select name="tipoOperacao" id="tipoOperacao" 
  29.                                    class="form-control form-control-clean  border-primary">                            
  30.                                 <option value="pagamento" {% if 'pagamento' in tipoOperacao %} selected {% endif %}>Pagamento</option>
  31.                                 <option value="recebimentos" {% if 'recebimentos' in tipoOperacao %} selected {% endif %}>Recebimento</option>
  32.                                 <option value="baixas" {% if 'baixas' in tipoOperacao %} selected {% endif %}>Baixas</option>
  33.                             </select>
  34.                             <label for="">Operação</label>
  35.                     
  36.                     </div>                    
  37.         </div>
  39.         <div class="col-2">
  40.             <div class="form-label-group mb-2">
  41.                 <input autocomplete="off" type="text" name="dataIni"
  42.                        class="form-control form-control-clean datepicker border-primary"
  43.                        value="{% if dini is defined %}{{ dini }}{% else %}{{ "now"|date("d/m/Y") }}{% endif %}"
  44.                        required data-format="DD/MM/YYYY"
  45.                        data-quick-locale='{
  46.                     "days": ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
  47.                     "daysShort": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
  48.                     "daysMin": ["Do", "Se", "Te", "Qu", "Qi", "Se", "Sa"],
  49.                     "months": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
  50.                     "monthsShort": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
  51.                     "today": "Hoje",
  52.                     "clear": "limpar",
  53.                     "titleFormat": "MM yyyy"
  54.                 }'>
  55.                 <label for="">Data Inicial</label>
  56.             </div>
  57.         </div>
  58.         <div class="col-2">
  59.             <div class="form-label-group mb-2">
  60.                 <input autocomplete="off" type="text" name="dataFim"
  61.                        class="form-control form-control-clean datepicker border-primary"
  62.                        value="{% if dfim is defined %}{{ dfim }}{% else %}{{ "now"|date("d/m/Y") }}{% endif %}"
  63.                        required data-format="DD/MM/YYYY"
  64.                        data-quick-locale='{
  65.                     "days": ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"],
  66.                     "daysShort": ["Dom", "Seg", "Ter", "Qua", "Qui", "Sex", "Sab"],
  67.                     "daysMin": ["Do", "Se", "Te", "Qu", "Qi", "Se", "Sa"],
  68.                     "months": ["Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro"],
  69.                     "monthsShort": ["Jan", "Fev", "Mar", "Abr", "Mai", "Jun", "Jul", "Ago", "Set", "Out", "Nov", "Dez"],
  70.                     "today": "Hoje",
  71.                     "clear": "limpar",
  72.                     "titleFormat": "MM yyyy"
  73.                 }'>
  74.                 <label for="">Data Final</label>
  75.             </div>
  76.         </div>
  77.          <div class="col-4">
  78.               <div class="form-label-group mb-2">                    
  79.                 <input autocomplete="off" type="text" name="nomForne"
  80.                        class="form-control form-control-clean border-primary"
  81.                        value="{% if nomForne is defined %}{{ nomForne }}{% else %}{{ "" }}{% endif %}">
  82.                 <label for="">Nome Fornecedor/Cliente</label>
  83.             </div>
  84.         </div>
  85.                   <div class="col-4">
  86.                     <div class="form-label-group mb-2">                    
  87.                             <select name="realtime" id="realtime" 
  88.                                    class="form-control form-control-clean  border-primary">                            
  89.                                 <option value="1" {% if '1' in realtime %} selected {% endif %}>Em Tempo Real</option>
  90.                                 <option value="2" {% if '2' in realtime %} selected {% endif %}>24h Atrás</option>                                
  91.                             </select>
  92.                             <label for="">OnLine? (+ performace)</label>
  93.                     
  94.                     </div>                    
  95.         </div>
  96.         <div class="col-3">
  97.             <button type="submit" class="btn btn-success btn-sm save fs--12">
  98.                 <i class="fi fi-check"></i>
  99.                 Processar
  100.             </button>
  101.         </div>
  103.     </div>
  104. </form>
  105. <section class="p--20 bg-white ">
  106.     {% set theadDefault = '' %}
  107.     {% if table|length > 0 %}
  108.         {% for columnName in table[0]|keys %}            
  109.             {% set theadDefault = theadDefault ~ '<th>' ~ columnName ~ '</th>\n' %}
  110.         {% endfor %}
  112.        
  113.             <div class="">
  114.                 <div class="row " id="_list_">
  115.                     <div class="col-md-12">
  116.                         <div class="">
  117.                             <div class="">
  118.                                 <table id="lista_tabela" class="table-datatable table table-bordered table-hover table-striped" 
  119.                                 data-lng-empty="Sem dados disponíveis na tabela" 
  120.     data-lng-page-info="Exibindo _START_ até _END_ de _TOTAL_ Pagamentos" 
  121.     data-lng-filtered="(Filtrado de _MAX_ total entries)" 
  122.     data-lng-loading="Carregando..." 
  123.     data-lng-processing="Processando..." 
  124.     data-lng-search="Procurando..." 
  125.     data-lng-norecords="Nenhum registro correspondente encontrado" 
  126.     data-lng-sort-ascending=": Clique para classificar a coluna em ordem crescente" 
  127.     data-lng-sort-descending=": Clique para classificar a coluna em ordem decrescente" 
  128.     data-lng-column-visibility="Visibilidade da coluna" 
  129.     data-lng-csv="CSV" 
  130.     data-lng-pdf="PDF"
  131.     data-lng-xls="XLS" 
  132.     data-lng-copy="Copiar" 
  133.     data-lng-print="Imprimir" 
  134.     data-lng-all="Tudo" 
  135.     data-main-search="true" 
  136.     data-column-search="false" 
  137.     data-row-reorder="false" 
  138.     data-col-reorder="true" 
  139.     data-responsive="true" 
  140.     data-header-fixed="true" 
  141.     data-select-onclick="true" 
  142.     data-enable-paging="true" 
  143.     data-enable-col-sorting="true" 
  144.     data-autofill="true" 
  145.     data-group="false" 
  146.     data-items-per-page="30" 
  147.     data-lng-export="<i class='fi fi-squared-dots fs--8 line-height-1'></i>" 
  148.     data-export-pdf-disable-mobile="true" 
  149.     data-export='["csv", "pdf", "xls"]' 
  150.     data-options='["copy", "print"]'
  151.     style="width: 100%;">
  152.                                     <thead>
  153.                                         <tr>
  154.                                             {{theadDefault | raw}}                                        
  155.                                         </tr>
  156.                                     </thead>
  157.                                     <tbody>
  158. {% for row in table %}
  159.     <tr>
  160.            {% for key, value in row %}
  161.                                     {# Adicione classes de alinhamento com base no nome da coluna #}
  162.                                     {% set alignmentClass = 'text-left' %}
  163.                                     {% if 'VLR' in key %}
  164.                                         {% set alignmentClass = 'text-right' %}
  165.                                         {% set formattedValue = value|number_format(2, ',', '.') %}
  166.                                     {% else %}
  167.                                         {% set formattedValue = value %}
  168.                                     {% endif %}
  170.                                     {# Aplica formatação correspondente para datas #}
  171.                                     {% if 'VCT' in key or 'DAT' in key or 'ULTPGT' in key %}
  172.                                         {% if value is defined and value is not empty %}
  173.                                             {% set formattedValue = value|date('d/m/Y') %}
  174.                                         {% endif %}
  175.                                     {% endif %}
  177.                                     {# Renderiza a célula com a classe de alinhamento #}
  178.                                     <td class="{{ alignmentClass }}">{{ formattedValue }}</td>
  179.                                 {% endfor %}
  180.     </tr>
  181. {% endfor %}
  182.                                     </tbody>
  183.                                     {# <tfoot>
  184.                                         <tr>
  185.                                             {{theadDefault | raw}} 
  186.                                         </tr>
  187.                                     </tfoot> #}
  188.                                     
  189.                                 </table>
  190.                             </div>
  191.                         </div>
  192.                         <!--  CARDSHOW -->
  193.                     </div>
  194.                 </div>
  195.             </div>
  196.         
  197.     {% else %}
  198.         <p>A tabela está vazia.</p>
  199.         </div>
  200.     {% endif %}
  201.         </section>
  203. {% block javascript %}
  204.    
  205.   <script src="{{ asset('smarty/js/vendor.datatables.js') }}"></script> 
  206.   <script type="text/javascript">
  207.     //  $('#tblSetores').removeClass('table-datatable');
  208.     //  $('#tblSetores').addClass('table-datatable');
  210.           new DataTable('#lista_tabela', {
  211.               // var table = $('#lista_tabela').DataTable({
  212.                   sort: true,
  213.     searching: true,
  214.     stateSave: true,
  215.     fixedColumns: true,
  216.     paging: false,
  217.     scrollCollapse: true,
  218.     scrollX: true,
  219.     scrollY: 300,
  221.     //   fixedColumns: {
  222.         //     left: 2
  223.     // }
  225.      //dom:        'lfrtip<"bottom"B>', 
  226.      dom: 'ftipB', // https://datatables.net/reference/option/dom,
  227.      order: [
  228.          [2, 'asc']
  229.      ],
  230.      buttons: [{
  231.          extend: 'print',
  232.          text: 'Imprimir',
  233.          exportOptions: {
  234.              columns: [0, 1, 2, 3, 4] //Your Colume value those you want
  235.          }
  236.        },
  237.        {
  238.            extend: 'excel',
  239.          text: 'Exportar Excel',
  240.          exportOptions: {
  241.              columns: [0, 1, 2, 3, 4] //Your Colume value those you want
  242.          },
  243.        }
  244.      ],
  245.      language: {
  246.          "decimal": "",
  247.        "emptyTable": "Sem dados disponíveis na tabela",
  248.        "info": "Mostrando _START_ até _END_ de _TOTAL_ registros",
  249.        "infoEmpty": "Mostrando 0 até 0 de 0 registro",
  250.        "infoFiltered": "(Filtrado de _MAX_ registros)",
  251.        "infoPostFix": "",
  252.        "thousands": ",",
  253.        "lengthMenu": "Exibir _MENU_ registros",
  254.        "loadingRecords": "Carregando...",
  255.        "processing": "Processando...",
  256.        "search": "Localizar:",
  257.        "zeroRecords": "Nenhum registro correspondente encontrado",
  258.        "paginate": {
  259.            "first": "Primeiro",
  260.          "last": "Último",
  261.          "next": "Próximo",
  262.          "previous": "Anterior"
  263.        },
  264.        "aria": {
  265.            "sortAscending": ": classificar a coluna em ordem crescente",
  266.          "sortDescending": ": classificar a coluna em ordem decrescente"
  267.        }
  268.      }
  269.      /*
  270.      rowGroup: {
  271.          dataSrc: 2 
  272.      }, 
  273.      */
  274.     });
  275.         </script>
  276.     {% endblock %}
  277. {% endblock %}