templates/article/index.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  2. {% block title %}LouvreBible, gestion des contenus{% endblock %}
  3. {% block content %}
  5. <a title="Nouvel article" class="btn btn-primary" href="{{ path('insert_article_global') }}">Nouvel Article</a>
  7.     <div id="toolbar-ujuo">
  8.       <div class="form-inline" role="form">
  9.         <h4 style="color:purple;">Articles un jour une oeuvre</h4>
  10.       </div>
  11.     </div>
  12.     <table     id="articles-ujuo-table" name="articles-ujuo-table" class="w-100 table-striped clickable-row" 
  13.             data-url="{{ path('articles_un_jour_une_oeuvre_list_json') }}"
  14.             data-show-export="true"
  15.             data-export-types="['excel','csv']"
  16.             data-smart-display="true" 
  17.             data-pagination="true"
  18.             data-page-list="[10, 25, 50, 100, 500, 1000, 5000]"
  19.             data-page-size="20"
  20.             data-show-pagination-switch="true" 
  21.             data-show-toggle="false" 
  22.             data-id-field="id"
  23.             data-cache="false"
  24.             data-show-refresh="true" 
  25.             data-show-columns="false"  
  26.             data-search="true"
  27.             data-filter-control="false"
  28.             data-toolbar="#toolbar-ujuo"
  29.             >
  30.         <thead>
  31.             <tr>
  32.                 <th data-field="id"  data-sortable="true" data-visible="true">#</th>
  33.                 <th data-field="status"  data-sortable="true" data-visible="true">Statut</th>
  34.                 <th data-field="title"  data-sortable="true" data-visible="true">Titre de l'article</th>
  35.                 <th data-field="last_update" data-formatter="dateFormatHour" data-sortable="false" data-visible="true" >MAJ</th>
  36.                 <th data-field="to_show" data-sortable="true" data-visible="true" >En avant (MM-JJ)</th>
  37.                 <th data-field="bible_book_name_verse" data-sortable="true" data-visible="true" >Livre</th>
  38.                 <th data-field="operate" data-formatter="operateFormatter" data-sortable="true">Actions</th>
  39.             </tr>
  40.         </thead>
  41.     </table>
  43.     <div id="toolbar-lbi">
  44.       <div class="form-inline" role="form">
  45.         <h4 style="color:purple;">Articles la Bible illustrée</h4>
  46.       </div>
  47.     </div>
  48.     <table     id="articles-lbi-table" name="articles-lbi-table" class="w-100 table-striped clickable-row" 
  49.             data-url="{{ path('articles_lbi_list_json') }}"
  50.             data-show-export="true"
  51.             data-export-types="['excel','csv']"
  52.             data-smart-display="true" 
  53.             data-pagination="true"
  54.             data-page-list="[10, 25, 50, 100, 500, 1000, 5000]"
  55.             data-page-size="20"
  56.             data-show-pagination-switch="true" 
  57.             data-show-toggle="false" 
  58.             data-id-field="id"
  59.             data-cache="false"
  60.             data-show-refresh="true" 
  61.             data-show-columns="false"  
  62.             data-search="true"
  63.             data-filter-control="false"
  64.             data-toolbar="#toolbar-lbi"
  65.             >
  66.         <thead>
  67.             <tr>
  68.                 <th data-field="id"  data-sortable="true" data-visible="true">#</th>
  69.                 <th data-field="status"  data-sortable="true" data-visible="true">Statut</th>
  70.                 <th data-field="title"  data-sortable="true" data-visible="true">Titre de l'article</th>
  71.                 <th data-field="last_update" data-formatter="dateFormatHour" data-sortable="false" data-visible="true" >MAJ</th>
  72.                 <th data-field="to_show" data-sortable="true" data-visible="true" >En avant (MM-JJ)</th>
  73.                 <th data-field="bible_book_name_verse" data-sortable="true" data-visible="true" >Livre</th>
  74.                 <th data-field="operate" data-formatter="operateFormatter" data-sortable="true">Actions</th>
  75.             </tr>
  76.         </thead>
  77.     </table>
  79.     <div id="toolbar-only">
  80.       <div class="form-inline" role="form">
  81.         <h4 style="color:purple;">Autres articles du site</h4>
  82.       </div>
  83.     </div>
  84.     <table     id="articles-only-table" name="articles-only-table" class="w-100 table-striped clickable-row" 
  85.             data-url="{{ path('articles_list_json') }}"
  86.             data-show-export="true"
  87.             data-export-types="['excel','csv']"
  88.             data-smart-display="true" 
  89.             data-pagination="true"
  90.             data-page-list="[10, 25, 50, 100, 500, 1000, 5000]"
  91.             data-page-size="20"
  92.             data-show-pagination-switch="true" 
  93.             data-show-toggle="false" 
  94.             data-id-field="id"
  95.             data-cache="false"
  96.             data-show-refresh="true" 
  97.             data-show-columns="false"  
  98.             data-search="true"
  99.             data-filter-control="false"
  100.             data-toolbar="#toolbar-only"
  101.             >
  102.         <thead>
  103.             <tr>
  104.                 <th data-field="id"  data-sortable="true" data-visible="true">#</th>
  105.                 <th data-field="status"  data-sortable="true" data-visible="true">Statut</th>
  106.                 <th data-field="title"  data-sortable="true" data-visible="true">Titre de l'article</th>
  107.                 <th data-field="last_update" data-formatter="dateFormatHour" data-sortable="false" data-visible="true" >MAJ</th>
  108.                 <th data-field="to_show" data-sortable="true" data-visible="true" >En avant (MM-JJ)</th>
  109.                 <th data-field="operate" data-formatter="operateFormatter" data-sortable="true">Actions</th>
  110.             </tr>
  111.         </thead>
  112.     </table>
  116. <div class="modal" id="deleteArticleModal" tabindex="-1" aria-labelledby="deleteArticleModalLabel" aria-hidden="true">
  117.     <div class="modal-dialog">
  118.     <div class="modal-content">
  119.         <div class="modal-header">
  120.             <h5 class="modal-title" id="deleteArticleModalLabel">Suppression de l'article</h5>
  121.             <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  122.         </div>
  123.         <div class="modal-body">
  124.             <label for="articleDelId">Êtes-vous certain de supprimer l'article no:</label>
  125.             <p id="articleDelId">#</p>
  126.         </div>
  127.         <div class="modal-footer">
  128.             <button type="button" class="btn btn-light" data-dismiss="modal">Fermer</button>
  129.             <button id="submitButton" type="button" class="btn btn-danger" value="" >Valider</button> 
  130.         </div>
  131.     </div>
  132.     </div>
  133. </div>
  135. <script>
  136.     $('#titlenav').html('Gestion des articles');
  137.     //<i class="fas fa-exclamation"></i>&nbsp;&nbsp;
  138.     function operateFormatter(value, row, index) {
  139.         var actions = '';
  140.         console.log('value : '+ value); console.log('index : '+ index); console.log('row.id : '+row.id);
  141.         var articleEditUrl = "{{ path('edit_article_global') }}/"+row.id;
  142.         console.log('articleEditUrl: '+articleEditUrl);
  143.         var articleCopyUrl = "{{ path('insert_article_global') }}/"+row.id;
  144.         console.log('articleCopyUrl: '+articleCopyUrl);
  145.         actions +="<a title='Modifier' class='btn btn-warning edit_item mx-2'  href="+articleEditUrl+"><i class='far fa-file-alt fa-2x'></i></a>";
  146.         actions +="<a title='Dupliquer' class='btn btn-outline-info mx-2'  href="+articleCopyUrl+"><i class='far fa-copy fa-2x'></i></a>";
  147.         actions +="<button type='button' title='Supprimer' class='btn btn-danger mx-2'  data-toggle='modal' data-target='#deleteArticleModal' data-whatever="+row.id+"><i class='fas fa-trash fa-2x'></i></button>";
  148.         return [ actions ].join('');
  149.     }
  150.     
  151.     // CALLBACKS
  152.     
  153.     $('#deleteArticleModal').on('show.bs.modal', function (event) {
  154.         var button = $(event.relatedTarget); // Button that triggered the modal
  155.         var recipient = button.data('whatever'); // Extract info from data-* attributes
  156.         console.log('data-whatever : '+ recipient); 
  157.           // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
  158.           // Update the modal's content.
  159.         var modal = $(this);
  160.         modal.find('.modal-body p').text(recipient);
  161.         modal.find('.modal-footer #submitButton').val(recipient);
  162.     });
  163.     
  164.     $( "#submitButton" ).on( "click", function() {
  165.         console.log("submitButton val is :" + $( this ).val() );
  166.         // RETRIEVE
  167.         var id_article = $( this ).val();
  168.         // CREATE JSON
  169.         var donnees = JSON.stringify({
  170.             "id_article":id_article
  171.         });
  172.         console.log(donnees);
  173.         // SEND REQUEST
  174.         $.ajax({
  175.                 type:'POST',
  176.                 url:'{{ path("delete_article_global") }}',
  177.                 data:{'parametres':donnees},
  178.                 dataType:'json',
  179.                 success: function(data){
  180.                     if ( (data['retour']=="O") || (data['retour']=="N") ){
  181.                         /*if(confirm(data['message']+". Voulez vous recharger la page ?") ){
  182.                             location.reload();
  183.                         }
  184.                         else{ }*/
  185.                         $('#articles-ujuo-table').bootstrapTable('refresh');
  186.                         $('#articles-lbi-table').bootstrapTable('refresh');
  187.                         $('#articles-only-table').bootstrapTable('refresh');
  188.                         $('#deleteArticleModal').modal('hide');
  189.                     }
  190.                 },
  191.                 error: function(request, status, error){
  192.                     alert("Erreur interne");
  193.                     console.log("Appel AJAX : "+error);
  194.                 }
  195.         });
  196.     });
  197.     
  198.     
  199. </script>
  200. {% endblock %}
  201. {% block document_ready %}
  202.     $('#articles-only-table').bootstrapTable();    
  203.     $('#articles-only-table').on('dbl-click-row.bs.table', function (row, element, field) {
  204.         $('#articles-only-table tbody tr').removeClass("selected");
  205.         field.addClass("selected");
  206.         var params = "{{ path('edit_article_global') }}/"+element.id;
  207.         $(location).attr('href', params);    
  208.     });
  209.     
  210.     $('#articles-ujuo-table').bootstrapTable();    
  211.     $('#articles-ujuo-table').on('dbl-click-row.bs.table', function (row, element, field) {
  212.         $('#articles-ujuo-table tbody tr').removeClass("selected");
  213.         field.addClass("selected");
  214.         var params = "{{ path('edit_article_global') }}/"+element.id;
  215.         $(location).attr('href', params);    
  216.     });
  218.     $('#articles-lbi-table').bootstrapTable();    
  219.     $('#articles-lbi-table').on('dbl-click-row.bs.table', function (row, element, field) {
  220.         $('#articles-lbi-table tbody tr').removeClass("selected");
  221.         field.addClass("selected");
  222.         var params = "{{ path('edit_article_global') }}/"+element.id;
  223.         $(location).attr('href', params);    
  224.     });
  226. {% endblock %}