templates/products/list.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block headerStyles %}
  4.     {{ parent() }}
  5.     <style>
  6.         .cabecera_filtrada{
  7.             cursor:pointer;
  8.             min-width:150px;
  9.         }
  10.         .cabecera_filtrada:after{
  11.             content: "↓";
  12.             right: 0.5em;
  13.             float:right;
  14.             bottom: 0.9em;
  15.             display: block;
  16.             opacity: .3;
  17.         }
  18.         .cabecera_filtrada:before{
  19.             right: 1em;
  20.             content: "↑";
  21.             float:right;
  22.             bottom: 0.9em;
  23.             display: block;
  24.             opacity: 1;
  25.         }
  26.     </style>
  27. {% endblock %}
  29. {% block content %}
  30.     <div class="page-content">
  31.          <div class="page-breadcrumb d-none d-sm-flex align-items-center mb-3">
  32.             <div class="breadcrumb-title pe-3">Productos</div>
  33.              <form action="{{ path("productos") }}" method="GET" class="ms-auto">
  34.                 <div class=" d-sm-flex align-items-center ms-auto">
  35.                     <div class="form-group pe-3">
  36.                      <input type="text" name="s" id="s" class="form-control" placeholder="Buscar por nombre" value="{{ s }}"/>
  37.                     </div>
  38.                     <div class="form-group pe-3">
  39.                         <button type="submit" class="btn btn-primary">Buscar</button>
  40.                     </div>
  41.                 
  42.                 </div>
  43.             </form>
  44.             <div class="ms-auto">
  45.                    
  46.                          <!--a href="?{{ app.request.query.all | url_encode() }}" class="btn btn-primary mx-3">Exportar datos</a-->  
  47.                          <a href="{{ path('add_product' , { 'page': productos.currentPageNumber }) }}" class="btn btn-primary" ><i class="bx bx-plus"></i></a>
  48.                    
  49.                 
  50.             </div>
  51.         </div>
  52.         <div class="row">
  53.             <div class="card">
  54.                     <div class="card-body">
  55.                             <table class="table mb-0">
  56.                                     <thead>
  57.                                             <tr>
  58.                                                     <th scope="col">Imagen</th>
  59.                                                     <th scope="col" class="cabecera_filtrada" data-filter="sku">SKU</th>
  60.                                                     <th scope="col" class="cabecera_filtrada" data-filter="name">Nombre</th>
  61.                                                     <th scope="col">Categoría</th>
  62.                                                     <th class="cabecera_filtrada" data-filter="price" scope="col">Precio</th>
  63.                                                     <th scope="col">IVA</th>
  64.                                                     <th scope="col" class="cabecera_filtrada" data-filter="globalStock">Stock</th>
  65.                                                     <th scope="col">Web</th>
  66.                                                     <th scope="col">Variacion principal</th>
  67.                                                     <th scope="col">Variaciones</th>
  68.                                                     <th scope="col">Detalles</th>
  69.                                                     
  70.                                             </tr>
  71.                                     </thead>
  72.                                     <tbody>
  73.                                         {% for prod in productos %}
  74.                                             <tr>
  75.                                                     <th scope="row">{% if prod.getImage()!="" and prod.getImage() != null %}<img src="{{ asset('assets/images/products/'~prod.getImage()) }}" class="product-img-2"/>{% else %}<img src="{{ asset('assets/images/logos/logo-nubes.png') }}" class="product-img-2"/>{% endif %}</th>
  76.                                                     <td>{{ prod.getSku() }}</td>
  77.                                                     <td>{{ prod.getName() }}</td>
  78.                                                     <td>{{ prod.getId() | getCatsName() }}</td>
  79.                                                     <td>{{ prod.getPrice() }}</td>
  80.                                                     <td>{{ prod.getIva() }}</td>
  81.                                                     <td>{{ prod.getGlobalStock() }}</td>
  82.                                                     <td>{% if(prod.getWpId()!="") %}Si{% else %}No{% endif %}</td>
  83.                                                     <td>
  84.                                                         {% set variacion = prod.getId() | getVariaciones() %}
  85.                                                         {%for key_atr,variat in variacion %}
  86.                                                         
  87.                                                         {{key_atr}} : {% for var_atr in variat %} | {{var_atr}} {% endfor %}<br/>
  88.                                                             
  89.                                                         {%endfor%}
  90.                                                     </td>
  91.                                                     {%set variations = prod.getId() | getProductVariations() %}
  92.                                                     <td>
  93.                                                     
  94.                                                     {%for key,variation in variations %}
  95.                                                     
  96.                                                     {{key}} : {% for var in variation %} | {{var}} {% endfor %}<br/>
  97.                                                         
  98.                                                     {%endfor%}
  99.                                                     </td>
  100.                                                     <td>
  101.                                                         <a href="{{ path('editProduct', { 'id': prod.getId(), 'page': productos.currentPageNumber }) }}" class="btn btn-outline-primary" ><i class="bx bx-pencil"></i></a>
  102.                                                         <a href="{{ path('addProductVariation') }}?id={{ prod.getId() }}" class="btn btn-outline-success" ><i class="bx bx-add-to-queue"></i></a>
  103.                                                         {%if (prod.getId() | getVariaconesNum()) > 0 %}
  104.                                                         <a href="{{ path('viewProductVariations') }}?id={{ prod.getId() }}" class="btn btn-outline-warning" ><i class="bx bx-file-find"></i></a>
  105.                                                         {%endif%}
  106.                                                         <button onclick="generaEtiqueta({{prod.getId()}})" class="btn btn-outline-dark" ><i class="bx bx-label"></i></button>
  107.                                                         <button data-bs-toggle="modal" data-bs-target="#deleteItem" onclick="jQuery('#delete_item_id').val({{prod.getId()}})" class="btn btn-outline-danger" ><i class="bx bx-trash"></i></button>
  108.                                                     </td>
  109.                                                   
  110.                                             </tr>
  111.                                         {% endfor %}
  112.                                     </tbody>
  113.                             </table>
  114.                                       <div class="mt-3 col-md-12 text-center align-content-center">
  115.                             {{ knp_pagination_render(productos) }}
  116.                             </div>
  117.                     </div>
  118.             </div>
  119.         </div>
  120.     
  121.     </div>
  122. {% endblock %}
  124. {% block modals %}
  125.     
  126.    <div class="modal fade" id="addItem" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  127.         <div class="modal-dialog modal-lg">
  128.             <div class="modal-content">
  129.                     <div class="modal-header">
  130.                             <h5 class="modal-title" id="exampleModalLabel">Añadir Cliente</h5>
  131.                             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  132.                     </div>
  133.                 <div class="modal-body" >
  134.                    
  135.                     
  136.                 </div>
  137.                 
  138.             </div>
  139.         </div>
  140.     </div>
  141.     <div class="modal fade" id="deleteItem" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  142.         <div class="modal-dialog modal-lg">
  143.             <div class="modal-content">
  144.                 <div class="modal-header ">
  145.                         <h5 class="modal-title" id="exampleModalLabel">Eliminar Producto</h5>
  146.                         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
  147.                 </div>
  148.                 <form action="{{ path('deleteProduct') }}" method="POST">
  149.                     <div class="modal-body text-center" >
  150.                         <h3>¿Estas seguro que deseas eliminar el producto?</h3>
  151.                         <p class="text-muted">Esta acción no se puede revertir</p>
  152.                         <input type="hidden" id="delete_item_id" name="id" value=""/>
  153.                         <input type="hidden" name="page" value="{{ productos.currentPageNumber }}"/>
  154.                     </div>
  155.                     <div class="modal-footer">
  156.                             <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
  157.                             <button type="submit" class="btn btn-danger">Eliminar</button>
  158.                     </div>
  159.                 </form>
  160.             </div>
  161.         </div>
  162.     </div>
  163. {% endblock %}
  165. {% block footerScripts %}
  166.     {{ parent() }}
  167.     <script>
  168.         var orden = "{{orden}}";
  169.         
  170.         $(document).ready(function(){
  171.             $(".cabecera_filtrada").click(function(){
  172.                 
  173.                 var query = "";
  174.                 if(orden == "ASC"){
  175.                     orden = "DESC";
  176.                 }else{
  177.                     orden = "ASC";
  178.                 }
  179.                 var filter = $(this).data("filter");
  180.                 {%set arr = app.request.query.all%}
  181.                 {%set arr2 = arr | filter((v, k)=> k !="orden") %}
  182.                 {%set arr3 = arr2 | filter((v, k)=> k !="filter") %}
  183.                 window.location.href="{{path('productos')}}?orden="+orden+"&filter="+filter+"&{{arr3 | url_encode |raw}}";
  184.                 
  185.             });
  186.         });
  187.         
  188.         function deleteItem(){
  189.             var id = $("#delete_item_id").val();
  190.             window.location.href="{{ path('deleteProduct' , { 'page': productos.currentPageNumber }) }}?id="+id;
  191.         }
  192.         
  193.         function generaEtiqueta(id){
  194.             $.ajax({
  195.                 url:'{{path("printLabel")}}',
  196.                 type:'POST',
  197.                 async:false,
  198.                 data: {id:id },
  199.                 success:function(html){
  200.                     var mywindow = window.open('', 'PRINT', 'height=400,width=600'); 
  201.                     mywindow.document.write(html);
  203.                     mywindow.document.close();
  204.                     mywindow.focus();
  205.                     setTimeout(mywindow.print(),2000);
  206.                     
  207.                     //mywindow.close();
  208.                 }
  209.             });
  210.         }
  211.         </script>
  212.     
  213. {% endblock %}