Merge branch 'aureplop/kfet-sticky_thead' into 'master'

kfet -- Tables are sortable

Closes #171

See merge request cof-geek/gestioCOF!277

kfet/static/kfet/css/base/misc.css

@@ -75,6 +75,10 @@ ul {
     padding:8px !important;
 }
 
+.table thead .sm-padding {
+    padding:3px !important;
+}
+
 .table tr.section {
     background: #c63b52 !important;
     color:#fff;

kfet/static/kfet/css/index.css

@@ -3,6 +3,7 @@
 
 /* Libs customizations */
 @import url("libs/jconfirm-kfet.css");
+@import url("libs/jquery-tablesorter-kfet.css");
 @import url("libs/multiple-select-kfet.css");
 
 /* Base */
@@ -54,6 +55,11 @@
     color: #C81022;
 }
 
+.table thead .glyphicon {
+    font-size: 12px;
+    opacity: 0.8;
+}
+
 
 /*
  * Pages tableaux seuls
@@ -82,6 +88,11 @@
     border-radius: 0;
 }
 
+.table td.small-width {
+    /* Header still extends the width of the column, but it will be minimal. */
+    width: 30px;
+}
+
 .auth-form {
     padding: 15px 0;
     background: #d86c7e;

kfet/static/kfet/js/kfet.js

@@ -235,3 +235,77 @@ function submit_url(el) {
     let url = $(el).data('url');
     create_form(url).appendTo($('body')).submit();
 }
+
+
+/**
+ * jquery-tablesorter
+ * https://mottie.github.io/tablesorter/docs/
+ *
+ * Known bugs (v2.29.0):
+ * - Sort order icons in sticky headers are not updated.
+ *   Status: Fixed in next release.
+ *
+ * TODO:
+ * - Handle i18n.
+ */
+
+
+function registerBoolParser(id, true_str, false_str) {
+    $.tablesorter.addParser({
+        id: id,
+        format: function(s) {
+            return s.toLowerCase()
+                .replace(true_str, 1)
+                .replace(false_str, 0);
+        },
+        type: 'numeric'
+    });
+}
+
+
+// Parsers for the text representations of boolean.
+registerBoolParser('yesno', 'oui', 'non');
+
+registerBoolParser('article__is_sold', 'en vente', 'non vendu');
+registerBoolParser('article__hidden', 'caché', 'affiché');
+
+
+// https://mottie.github.io/tablesorter/docs/index.html#variable-defaults
+$.extend(true, $.tablesorter.defaults, {
+    headerTemplate: '{content} {icon}',
+
+    cssIconAsc  : 'glyphicon glyphicon-chevron-up',
+    cssIconDesc : 'glyphicon glyphicon-chevron-down',
+    cssIconNone : 'glyphicon glyphicon-resize-vertical',
+
+    // Only four-digits format year is handled by the builtin parser
+    // 'shortDate'.
+    dateFormat: 'ddmmyyyy',
+
+    // Accented characters are replaced with their non-accented one.
+    sortLocaleCompare: true,
+    // French format: 1 234,56
+    usNumberFormat: false,
+
+    widgets: ['stickyHeaders'],
+    widgetOptions: {
+        stickyHeaders_offset: '.navbar',
+    }
+});
+
+
+// https://mottie.github.io/tablesorter/docs/index.html#variable-language
+$.extend($.tablesorter.language, {
+    sortAsc      : 'Trié par ordre croissant, ',
+    sortDesc     : 'Trié par ordre décroissant, ',
+    sortNone     : 'Non trié, ',
+    sortDisabled : 'tri désactivé et/ou non-modifiable',
+    nextAsc      : 'cliquer pour trier par ordre croissant',
+    nextDesc     : 'cliquer pour trier par ordre décroissant',
+    nextNone     : 'cliquer pour retirer le tri'
+});
+
+
+$( function() {
+    $('.sortable').tablesorter();
+});

kfet/templates/kfet/account.html

@@ -37,13 +37,16 @@
 
 <section>
   <div class="table-responsive">
-    <table class="table table-hover table-condensed">
+    <table
+        class="table table-hover table-condensed sortable"
+        {# Initial sort: [(trigramme,asc)] #}
+        data-sortlist="[[0,0]]">
       <thead>
         <tr>
           <td class="text-center">Tri.</td>
           <td>Nom</td>
           <td class="text-right">Balance</td>
-          <td class="text-center">COF</td>
+          <td class="text-center" data-sorter="yesno">COF</td>
           <td>Dpt</td>
           <td class="text-center">Promo</td>
         </tr>

kfet/templates/kfet/account_negative.html

@@ -35,16 +35,19 @@
 {% block main %}
 
 <div class="table-responsive">
-  <table class="table table-hover table-condensed">
+  <table
+      class="table table-hover table-condensed sortable"
+      {# Initial sort: [(trigramme,asc)] #}
+      data-sortlist="[[0,0]]">
     <thead>
       <tr>
         <td class="text-center">Tri.</td>
         <td>Nom</td>
         <td class="text-right">Balance</td>
         <td class="text-right">Réelle</td>
-        <td>Début</td>
+        <td data-sorter="shortDate">Début</td>
         <td>Découvert autorisé</td>
-        <td>Jusqu'au</td>
+        <td data-sorter="shortDate">Jusqu'au</td>
         <td>Balance offset</td>
       </tr>
     </thead>
@@ -63,9 +66,13 @@
             {{ neg.account.real_balance|floatformat:2 }}€
           {% endif %}
         </td>
-        <td>{{ neg.start|date:'d/m/Y H:i:s'}}</td>
+        <td title="{{ neg.start }}">
+          {{ neg.start|date:'d/m/Y H:i'}}
+        </td>
         <td>{{ neg.authz_overdraft_amount|default_if_none:'' }}</td>
-        <td>{{ neg.authz_overdrafy_until|default_if_none:'' }}</td>
+        <td title="{{ neg.authz_overdraft_until }}">
+          {{ neg.authz_overdraft_until|date:'d/m/Y H:i' }}
+        </td>
         <td>{{ neg.balance_offset|default_if_none:'' }}</td>
       </tr>
       {% endfor %}

kfet/templates/kfet/article.html

@@ -26,24 +26,30 @@
 
 {% block main %}
 <div class="table-responsive">
-  <table class="table table-hover table-condensed">
+  <table
+      class="table table-hover table-condensed sortable"
+      {# Initial sort: [(is_sold,desc), (name,asc)] #}
+      data-sortlist="[[3,1], [0,0]]">
     <thead>
       <tr>
         <td>Nom</td>
         <td class="text-right">Prix</td>
         <td class="text-right">Stock</td>
-        <td class="text-right">En vente</td>
+        <td class="text-right" data-sorter="article__is_sold">En vente</td>
-        <td class="text-right">Affiché</td>
+        <td class="text-right" data-sorter="article__hidden">Affiché</td>
-        <td class="text-right">Dernier inventaire</td>
+        <td class="text-right" data-sorter="shortDate">Dernier inventaire</td>
       </tr>
     </thead>
-    <tbody>
+    {% regroup articles by category as category_list %}
-      {% for article in articles %}
+
-      {% ifchanged article.category %}
+    {% for category in category_list %}
+      <tbody class="tablesorter-no-sort">
         <tr class="section">
-        <td colspan="6">{{ article.category.name }}</td>
+          <td colspan="6">{{ category.grouper }}</td>
         </tr>
-      {% endifchanged %}
+      </tbody>
+      <tbody>
+        {% for article in category.list %}
           <tr>
             <td>
               <a href="{% url 'kfet.article.read' article.pk %}">
@@ -54,12 +60,16 @@
             <td class="text-right">{{ article.stock }}</td>
             <td class="text-right">{{ article.is_sold | yesno:"En vente,Non vendu"}}</td>
             <td class="text-right">{{ article.hidden | yesno:"Caché,Affiché" }}</td>
-        <td class="text-right">{{ article.inventory.0.at }}</td>
+            {% with last_inventory=article.inventory.0 %}
+            <td class="text-right" title="{{ last_inventory.at }}">
+              {{ last_inventory.at|date:'d/m/Y H:i' }}
+            </td>
+            {% endwith %}
           </tr>
         {% endfor %}
       </tbody>
+    {% endfor %}
   </table>
 </div>
-</div>
 
 {% endblock %}

kfet/templates/kfet/article_inventories_snippet.html

@@ -1,7 +1,10 @@
-<table class="table table-hover table-condensed">
+<table
+    class="table table-hover table-condensed sortable"
+    {# Initial sort: [(inventory.at,desc)] #}
+    data-sortlist="[[0,1]]">
   <thead>
     <tr>
-      <td>Date</td>
+      <td data-sorter="shortDate">Date</td>
       <td>Stock</td>
       <td>Erreur</td>
     </tr>
@@ -9,9 +12,9 @@
   <tbody>
     {% for inventoryart in inventoryarts %}
     <tr>
-      <td>
+      <td title="{{ inventoryart.inventory.at }}">
         <a href="{% url "kfet.inventory.read" inventoryart.inventory.pk %}">
-          {{ inventoryart.inventory.at }}
+          {{ inventoryart.inventory.at|date:'d/m/Y H:i' }}
         </a>
       </td>
       <td>{{ inventoryart.stock_new }}</td>

kfet/templates/kfet/article_suppliers_snippet.html

@@ -1,7 +1,10 @@
-<table class="table table-hover table-condensed">
+<table
+    class="table table-hover table-condensed sortable"
+    {# Initial sort: [(at,desc)] #}
+    data-sortlist="[[0,1]]">
   <thead>
     <tr>
-      <td>Date</td>
+      <td data-sorter="shortDate">Date</td>
       <td>Fournisseur</td>
       <td>HT</td>
       <td>TVA</td>
@@ -11,7 +14,9 @@
   <tbody>
     {% for supplierart in supplierarts %}
     <tr>
-      <td>{{ supplierart.at }}</td>
+      <td title="{{ supplierart.at }}">
+        {{ supplierart.at|date:'d/m/Y' }}
+      </td>
       <td>{{ supplierart.supplier.name }}</td>
       <td>{{ supplierart.price_HT|default_if_none:"" }}</td>
       <td>{{ supplierart.TVA|default_if_none:"" }}</td>

kfet/templates/kfet/base.html

@@ -24,6 +24,7 @@
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
     <script type="text/javascript" src="{% static 'kfet/js/jquery-ui.min.js' %}"></script>
     <script type="text/javascript" src="{% static 'kfet/js/jquery-confirm.js' %}"></script>
+    <script type="text/javascript" src="{% static 'kfet/vendor/jquery-tablesorter/jquery.tablesorter.combined.js' %}"></script>
     <script type="text/javascript" src="{% static 'kfet/js/reconnecting-websocket.js' %}"></script>
     <script type="text/javascript" src="{% static 'kfet/js/moment.js' %}"></script>
     <script type="text/javascript" src="{% static 'kfet/js/moment-fr.js' %}"></script>

kfet/templates/kfet/category.html

@@ -17,12 +17,15 @@
 {% block main %}
 
 <div class="table-responsive">
-  <table class="table table-hover table-condensed">
+  <table
+      class="table table-hover table-condensed sortable"
+      {# Initial sort: [(name,asc)] #}
+      data-sortlist="[[0,0]]">
     <thead>
       <tr>
         <td>Nom</td>
         <td class="text-right">Nombre d'articles</td>
-        <td class="text-right">Peut être majorée</td>
+        <td class="text-right" data-sorter="yesno">Peut être majorée</td>
       </tr>
     </thead>
     <tbody>

kfet/templates/kfet/checkout.html

@@ -24,13 +24,16 @@
 {% block main %}
 
 <div class="table-responsive">
-  <table class="table table-hover table-condensed">
+  <table
+      class="table table-hover table-condensed sortable"
+      {# Initial sort: [(valid_to,desc)] #}
+      data-sortlist="[[3,1]]">
     <thead>
       <tr>
         <td>Nom</td>
         <td class="text-right">Balance</td>
-        <td class="text-right">Déb. valid.</td>
+        <td class="text-right" data-parser="shortDate">Déb. valid.</td>
-        <td class="text-right">Fin valid.</td>
+        <td class="text-right" data-parser="shortDate">Fin valid.</td>
         <td class="text-right">Protégée</td>
       </tr>
     </thead>
@@ -43,8 +46,12 @@
           </a>
         </td>
         <td class="text-right">{{ checkout.balance}}€</td>
-        <td class="text-right">{{ checkout.valid_from }}</td>
+        <td class="text-right" title="{{ checkout.valid_from }}">
-        <td class="text-right">{{ checkout.valid_to }}</td>
+          {{ checkout.valid_from|date:'d/m/Y H:i' }}
+        </td>
+        <td class="text-right" title="{{ checkout.valid_to }}">
+          {{ checkout.valid_to|date:'d/m/Y H:i' }}
+        </td>
         <td class="text-right">{{ checkout.is_protected|yesno }}</td>
       </tr>
       {% endfor %}

kfet/templates/kfet/checkout_read.html

@@ -14,10 +14,13 @@
     {% if not statements %}
       Pas de relevé
     {% else %}
-      <table class="table table-hover table-condensed">
+      <table
+          class="table table-hover table-condensed sortable"
+          {# Initial sort: [(at,desc)] #}
+          data-sortlist="[[0,1]]">
         <thead>
           <tr>
-            <td>Date/heure</td>
+            <td data-sorter="shortDate">Date/heure</td>
             <td>Montant pris</td>
             <td>Montant laissé</td>
             <td>Erreur</td>
@@ -25,9 +28,9 @@
         <tbody>
           {% for statement in statements %}
           <tr>
-            <td>
+            <td title="{{ statement.at }}">
               <a href="{% url 'kfet.checkoutstatement.update' checkout.pk statement.pk %}">
-                {{ statement.at }}
+                {{ statement.at|date:'d/m/Y H:i' }}
               </a>
             </td>
             <td>{{ statement.amount_taken }}</td>

kfet/templates/kfet/inventory.html

@@ -17,10 +17,13 @@
 {% block main %}
 
 <div class="table-responsive">
-  <table class="table table-hover table-condensed">
+  <table
+      class="table table-hover table-condensed sortable"
+      {# Initial sort: [(at,desc)] #}
+      data-sortlist="[[0,1]]">
     <thead>
       <tr>
-        <td>Date</td>
+        <td data-sorter="shortDate">Date</td>
         <td>Par</td>
         <td>Nb articles</td>
       </tr>
@@ -28,9 +31,9 @@
     <tbody>
       {% for inventory in inventories %}
       <tr>
-        <td>
+        <td title="{{ inventory.at }}">
           <a href="{% url 'kfet.inventory.read' inventory.pk %}">
-            <span>{{ inventory.at }}</span>
+            {{ inventory.at|date:'d/m/Y H:i' }}
           </a>
         </td>
         <td>{{ inventory.by }}</td>

kfet/templates/kfet/inventory_read.html

@@ -27,7 +27,10 @@
 {% block main %}
 
 <div class="table-responsive">
-  <table class="table table-condensed">
+  <table
+      class="table table-condensed table-hover table-striped sortable"
+      {# Initial sort: [(article.name,asc)] #}
+      data-sortlist="[[0,0]]">
     <thead>
       <tr>
         <td>Article</td>
@@ -36,13 +39,15 @@
         <td>Erreur</td>
       </tr>
     </thead>
-    <tbody>
+    {% regroup inventoryarts by article.category as category_list %}
-      {% for inventoryart in inventoryarts %}
+    {% for category in category_list %}
-        {% ifchanged inventoryart.article.category %}
+      <tbody class="tablesorter-no-sort">
         <tr class="section">
-            <td colspan="4">{{ inventoryart.article.category.name }}</td>
+          <td colspan="4">{{ category.grouper.name }}</td>
         </tr>
-        {% endifchanged %}
+      </tbody>
+      <tbody>
+        {% for inventoryart in category.list %}
           <tr>
             <td>
               <a href="{% url "kfet.article.read" inventoryart.article.id %}">
@@ -55,6 +60,7 @@
           </tr>
         {% endfor %}
       </tbody>
+    {% endfor %}
   </table>
 </div>
 

kfet/templates/kfet/order.html

@@ -55,11 +55,14 @@
 <section>
   <h2>Liste des commandes</h2>
   <div class="table-responsive">
-    <table class="table table-hover table-condensed">
+    <table
+        class="table table-hover table-condensed sortable"
+        {# Initial sort: [(at,desc)] #}
+        data-sortlist="[[1,1]]">
       <thead>
         <tr>
-          <td></td>
+          <td data-sorter="false"></td>
-          <td>Date</td>
+          <td data-parser="shortDate">Date</td>
           <td>Fournisseur</td>
           <td>Inventaire</td>
         </tr>
@@ -74,9 +77,9 @@
               </a>
             {% endif %}
           </td>
-          <td>
+          <td tile="{{ order.at }}">
             <a href="{% url 'kfet.order.read' order.pk %}">
-              {{ order.at }}
+              {{ order.at|date:'d/m/Y H:i' }}
             </a>
           </td>
           <td>{{ order.supplier }}</td>

kfet/templates/kfet/order_create.html

@@ -11,44 +11,62 @@
 <form action="" method="post">
   {% csrf_token %}
   <div class="table-responsive">
-  <table class="table table-hover table-condensed table-condensed-input text-center table-striped">
+  <table
+      class="table table-hover table-condensed table-condensed-input text-center table-striped sortable"
+      {# Initial sort: [(name,asc)] #}
+      data-sortlist="[[0,0]]">
     <thead>
       <tr>
         <td rowspan="2">Article</td>
-        <td colspan="{{ scale|length }}">Ventes
+        <td colspan="{{ scale|length }}">
-            <span class='glyphicon glyphicon-question-sign' title="Ventes des 5 dernières semaines" data-placement="bottom"></span>
+          Ventes
+          <i class='glyphicon glyphicon-question-sign' title="Ventes des 5 dernières semaines" data-placement="bottom"></i>
         </td>
-        <td rowspan="2">V. moy.<br>
+        <td rowspan="2">
-            <span class='glyphicon glyphicon-question-sign' title="Moyenne des ventes" data-placement="bottom"></span>
+          V. moy.
+          <br>
+          <i class='glyphicon glyphicon-question-sign' title="Moyenne des ventes" data-placement="bottom"></i>
         </td>
-        <td rowspan="2">E.T.<br>
+        <td rowspan="2" data-sorter="false">
-            <span class='glyphicon glyphicon-question-sign' title="Écart-type des ventes" data-placement="bottom"></span>
+          E.T.
+          <br>
+          <i class='glyphicon glyphicon-question-sign' title="Écart-type des ventes" data-placement="bottom"></i>
         </td>
-        <td rowspan="2">Prév.<br>
+        <td rowspan="2">
-            <span class='glyphicon glyphicon-question-sign' title="Prévision de ventes" data-placement="bottom"></span>
+          Prév.
+          <br>
+          <i class='glyphicon glyphicon-question-sign' title="Prévision de ventes" data-placement="bottom"></i>
         </td>
         <td rowspan="2">Stock</td>
-        <td rowspan="2">Box<br>
+        <td rowspan="2" data-sorter="false">
-            <span class='glyphicon glyphicon-question-sign' title="Capacité d'une boite" data-placement="bottom"></span>
+          Box
+          <br>
+          <i class='glyphicon glyphicon-question-sign' title="Capacité d'une boite" data-placement="bottom"></i>
         </td>
-        <td rowspan="2">Rec.<br>
+        <td rowspan="2">
-            <span class='glyphicon glyphicon-question-sign' title="Quantité conseillée" data-placement="bottom"></span>
+          Rec.
+          <br>
+          <i class='glyphicon glyphicon-question-sign' title="Quantité conseillée" data-placement="bottom"></i>
+        </td>
+        <td rowspan="2" data-sorter="false" class="small-width">
+          Commande
         </td>
-        <td rowspan="2">Commande</td>
       </tr>
       <tr>
         {% for label in scale.get_labels %}
-        <td>{{ label }}</td>
+        <td class="sm-padding">{{ label }}</td>
         {% endfor %}
       </tr>
     </thead>
-    <tbody>
+    {% regroup formset by category_name as category_list %}
-      {% for form in formset %}
+    {% for category in category_list %}
-        {% ifchanged form.category %}
+      <tbody class="tablesorter-no-sort">
         <tr class='section text-left'>
-            <td colspan="{{ scale|length|add:'8' }}">{{ form.category_name }}</td>
+          <td colspan="{{ scale|length|add:'8' }}">{{ category.grouper }}</td>
         </tr>
-        {% endifchanged %}
+      </tbody>
+      <tbody>
+        {% for form in category.list %}
           <tr>
             {{ form.article }}
             <td class="text-left">{{ form.name }}</td>
@@ -65,6 +83,7 @@
           </tr>
         {% endfor %}
       </tbody>
+    {% endfor %}
   </table>
   </div>
   {{ formset.management_form }}

kfet/templates/kfet/order_read.html

@@ -42,7 +42,10 @@
 <section>
   <h2>Détails</h2>
   <div class="table-responsive">
-    <table class="table table-condensed">
+    <table
+        class="table table-condensed table-hover table-striped sortable"
+        {# Initial sort: [(article.name,asc)] #}
+        data-sortlist="[[0,0]]">
       <thead>
         <tr>
           <td>Article</td>
@@ -51,13 +54,15 @@
           <td>Reçu</td>
         </tr>
       </thead>
-      <tbody>
+      {% regroup orderarts by article.category as category_list %}
-        {% for orderart in orderarts %}
+      {% for category in category_list %}
-          {% ifchanged orderart.article.category %}
+        <tbody class="tablesorter-no-sort">
           <tr class="section">
-              <td colspan="4">{{ orderart.article.category.name }}</td>
+            <td colspan="4">{{ category.grouper.name }}</td>
           </tr>
-          {% endifchanged %}
+        </tbody>
+        <tbody>
+          {% for orderart in category.list %}
             <tr>
               <td>
                 <a href="{% url "kfet.article.read" orderart.article.id %}">
@@ -77,6 +82,7 @@
             </tr>
           {% endfor %}
         </tbody>
+      {% endfor %}
     </table>
   </div>
 </section>