passage liste des membres en ajax

webroot/controllers/members.php

@@ -287,26 +287,10 @@ class MembersController extends AppController {
     }
 
     function _list() {
-        try {
-            if($this->format == "json" && $_REQUEST["i"] != "") {
-                $member = Member::fetch($GLOBALS["data"]->db_escape_string($_REQUEST["i"]));
-                if($member->id != 0) {
-                    echo json_encode($member);
-                } else {
-                    
-                }
-                exit();
-            }
-            Member::fetch_all($members);
         if($this->format == "json") {
-                echo json_encode($members);
-                exit();
+            parent::_list();
         }
-            $this->set("members", $members);
         return "members/list";
-        } catch(data_exception $e) {
-			return "data_exception";
-		}
     }
 
 }

webroot/views/games/list.html

@@ -7,15 +7,19 @@
     <span style="font-size: 150%; font-weight: bold">
     Jeux
     </span>
-
-    <button type="button" class="btn btn-success btn-md" style="float: right"
-        id="new_button">
+    <span class="btn btn-success btn-md" id="export_button">
+        <i class="glyphicon glyphicon-th-list"></i>
+        <span>Exporter la liste des jeux</span>
+    </span>
+    <span class="btn btn-success btn-md" style="float: right" id="new_button">
         <i class="glyphicon glyphicon-plus"></i>
         <span>Nouveau jeu...</span>
-    </button>
+    </span>
   </div>
   <div class="panel-body">
 
+    {% include 'ihm_messages.html' %}
+
 <table id="list_games"> 
     <thead>
         <tr>
@@ -113,11 +117,8 @@ $(document).ready(function() {
             {"data": "label"},
             {"data": "loan_status"},
             {"data": null}
-
         ],
         "fnDrawCallback": function() {
-            $(this).show();
-
             $('.toggle_archive_button').on("click", function(e) {
                 var button = $(e.currentTarget);
                 $.ajax({url: 'api.php?o=games&a=toggle_archive&i=' + button.data('id'),

webroot/views/members/list.html

@@ -6,6 +6,7 @@
     <span style="font-size: 150%;" class="glyphicon glyphicon-user"></span>
     <span style="font-size: 150%; font-weight: bold">
     Adhérents
+    </span>
     <span class="btn btn-success btn-md" id="export_button">
         <i class="glyphicon glyphicon-th-list"></i>
         <span>Exporter la liste des adhérents</span>
@@ -15,77 +16,139 @@
         <span>Nouvel adhérent...</span>
     </span>
   </div>
-
-</div>
-<div class="panel-body">
+  <div class="panel-body">
 
     {% include 'ihm_messages.html' %}
 
-<div class="col-sm-12" align="center">
-<table id="list_member" style="display:none">
+<table id="list_members">
     <thead>
         <tr>
             <th>Nom</th>
             <th>Ville</th>
-		<th>Adhésion / Prêts en cours / Compte</th>
+            <th>Adhésion</th>
+            <th>Prêts en cours</th>
+            <th>Compte</th>
+            <th>Actions</th>
         </tr>
     </thead>
     <tbody>
-    {% for key, val in members %}
-	<tr>
-		<td>
-			<a href="index.php?o=members&a=edit&i={{ val.id }}">{{ val.lastname }} {{ val.firstname }}</a>
-		</td>
-        <td>
-            {{ val.po_town }}
-		</td>
-		<td>
-            <span style="margin:0.25em;" class="label 
-            {% if val.subscription_status == 'Non trouvée' %}
-                label-warning
-            {% else %}
-                {% if val.subscription_status == 'Expirée' %} label-danger {% else %} label-primary {% endif %}
-            {% endif %}">
-            {{ val.subscription_status }}
-            {{ val.subscription_end_date }}
-                </span>
-            {% if val.num_loans %}
-                <span class="label label-default" style="margin:0.25em;">{{ val.num_loans }} prêt(s) en cours</span>
-            {% endif %}
-            {% if val.account_id %}
-                <span class="label label-info" style="margin:0.25em;">Compte #{{ val.account_id }}</span>
-            {% endif %}
-		</td>
-	</tr>
-    {% endfor %}
     </tbody>
 </table>
-</div>
+
   <!-- end of panel -->
   </div>
 </div>
+<style>
+.dataTables_length {
+    padding-top: 0.25em;
+}
+</style>
 <script>
 $(document).ready(function() {
-    $('#list_member').DataTable({
+    $.fn.dataTableExt.afnFiltering.push(
+        function( oSettings, aData, iDataIndex ) {
+            var row = oSettings.aoData[iDataIndex].nTr;
+            var show = $(".toggle_row_display").val();
+            var subscription_status = oSettings.aoData[iDataIndex]._aData.subscription_status;
+
+            if(show === "expired") {
+                return (subscription_status == 'Expirée');
+            } else if(show === "no_subscription") {
+                return (subscription_status == 'Non trouvée');
+            } else {
+                return (subscription_status == 'Valide');
+            }
+        }
+    );
+
+    var table = $('#list_members').DataTable({
         "autoWidth": false,
+        "dom": '<"filter_comp">frtlp',
+        "ajax": "api.php?o=members&a=list&dt_format=1",
         "language": {
-            "emptyTable": "Aucun membre trouvé"
+            "url": "/cdn/js/jquery/datatables/1.10.9/dataTables.french.json"
         },
+        "columnDefs": [
+            {
+                "targets": [2,3,4,5],
+                className: "text-center"
+            },{
+                "targets": 2, // subscription_status
+                render: function(data, type, row) {
+                    var color = 'primary';
+                    if(row.subscription_status == 'Non trouvée') {
+                        color = 'warning';
+                    } else {
+                        if(row.subscription_status == 'Expirée') {
+                            color = 'danger';
+                        }
+                    }
+                    return '<span style="margin:0.25em;" '
+                        + ' class="label label-' + color + '">'
+                        + row.subscription_status + ' ' 
+                        + (row.subscription_end_date !== null ? row.subscription_end_date : '')
+                        + '</span>';
+                }
+            },{
+                "targets": 3, // num loans
+                render: function(data, type, row) {
+                    return (row.num_loans > 0) 
+                        ? ('<span class="label label-default" style="margin:0.25em;">'
+                            + row.num_loans + ' prêt(s) en cours</span>')
+                        : '';
+                }
+            },{
+                "targets": 4, // account_id
+                render: function(data, type, row) {
+                    return (row.account_id > 0) 
+                        ? ('<span class="label label-info" style="margin:0.25em;">'
+                            + 'compte #' + row.account_id + '</span>')
+                        : '';
+                }
+            },{
+                "targets": 5, // action
+                "render": function(data, type, row) {
+                    return '<button type="button" class="btn btn-primary btn-xs edit_button" '
+                        + ' data-toggle="tooltip" title="Editer" '
+                        + ' data-id="' + row.id + '"><i class="glyphicon glyphicon-edit"></i></button> ';
+                }
+            }
+        ],
+        "columns": [
+            {"data": "lastname"},
+            {"data": "po_town"},
+            {"data": "subscription_status"},
+            {"data": "num_loans"},
+            {"data": "account_id"},
+            {"data": null}
+        ],
         "fnDrawCallback": function() {
-           $(this).show();
+            $('.edit_button').on("click", function(e) {
+                var button = $(e.currentTarget);
+                window.location.href='index.php?o=members&a=edit&i=' + button.data('id');
+            });
+
+            if($("div.filter_comp").html() === "") {
+                $("div.filter_comp").html('<select class="toggle_row_display pull-left" style="margin-top: 5px">'
+                                + '<option value="subscribed">Membres actuels</option>'
+                                + '<option value="expired">Adhésions expirées</option>'
+                                + '<option value="no_subscription">Sans adhésion</option></select>');
+
+                $(".toggle_row_display").on("change", function() {
+                    table.draw();
+                });
             }
-    })
+        }
+    });
+
     $('#new_button').click(function(){
-		$('#a').val('new');
-		defaultform.submit();
+        window.location.href='index.php?o=members&a=new';
     });
+
     $('#export_button').click(function(){
         $('#a').val('export');
         defaultform.submit();
     });
 });
-/* FIXME : translation of the table
-see https://datatables.net/plug-ins/i18n/French
-*/
 </script>
 {% endblock %}