Préparation annulation sur page Historique

- JS d'annulation de commande passé de `kpsul.html` vers `history.js`
- Fix orthographe
- Champs de filtres sur la page `Historique` plus propre

kfet/static/kfet/js/history.js

@@ -48,19 +48,25 @@ function KHistory(options={}) {
             $ope_html.find('.addcost').text('('+amountDisplay(addcost_amount, is_cof)+'UKF pour '+addcost_for+')');
         }
 
-        if (ope['canceled_at']) {
+        if (ope['canceled_at'])
-            var canceled_at = dateUTCToParis(ope['canceled_at']);
+            this.cancelOpe(ope, $ope_html);
-            var canceled_by = ope['canceled_by__trigramme'];
-            var cancel = 'Annulé';
-            if (canceled_by)
-                cancel += ' par '+canceled_by;
-            cancel += ' le '+canceled_at.format('DD/MM/YY à HH:mm:ss');
-            $ope_html.addClass('canceled').find('.canceled').text(cancel);
-        }
 
         return $ope_html;
     }
 
+    this.cancelOpe = function(ope, $ope = null) {
+        if (!$ope)
+            $ope = this.findOpe(ope['id']);
+
+        var cancel = 'Annulé';
+        var canceled_at = dateUTCToParis(ope['canceled_at']);
+        if (ope['canceled_by__trigramme'])
+            cancel += ' par '+ope['canceled_by__trigramme'];
+        cancel += ' le '+canceled_at.format('DD/MM/YY à HH:mm:ss');
+
+        $ope.addClass('canceled').find('.canceled').text(cancel);
+    }
+
     this._opeGroupHtml = function(opegroup) {
         var $opegroup_html = $(this.template_opegroup);
 
@@ -83,7 +89,6 @@ function KHistory(options={}) {
         if (opegroup['valid_by__trigramme'])
             $opegroup_html.find('.valid_by').text('Par '+opegroup['valid_by__trigramme']);
 
-
         return $opegroup_html;
     }
 
@@ -98,6 +103,27 @@ function KHistory(options={}) {
         var $day = $(this.template_day).prependTo(this.$container);
         return $day.data('date', at_ser).text(at.format('D MMMM'));
     }
+
+    this.findOpeGroup = function(id) {
+        return this.$container.find('.opegroup').filter(function() {
+            return $(this).data('opegroup') == id
+        });
+    }
+
+    this.findOpe = function(id) {
+        return this.$container.find('.ope').filter(function() {
+            return $(this).data('ope') == id
+        });
+    }
+
+    this.cancelOpeGroup = function(opegroup) {
+        var $opegroup = this.findOpeGroup(opegroup['id']);
+        var trigramme = $opegroup.find('.trigramme').text();
+        var amount = amountDisplay(
+                parseFloat(opegroup['amount'], opegroup['is_cof'], trigramme));
+        $opegroup.find('.amount').text(amount);
+    }
+
 }
 
 KHistory.default_options = {

kfet/templates/kfet/history.html

@@ -29,10 +29,10 @@
         <div class="line line-bigsub">opérations</div>
         <div class="block">
           <h2>Filtres</h2>
-          <div class="line" style="position:relative"><b>De</b> <input type="text" id="from_date"></div>
+          <div class="line" style="position:relative"><b>De</b> <input type="text" id="from_date" class="form-control"></div>
-          <div class="line" style="position:relative"><b>à</b> <input type="text" id="to_date"></div>
+          <div class="line" style="position:relative"><b>à</b> <input type="text" id="to_date" class="form-control"></div>
           <div class="line"><b>Caisses</b> {{ filter_form.checkouts }}</div>
-          <div class="line"><b>Comtpes</b> {{ filter_form.accounts }}</div>
+          <div class="line"><b>Comptes</b> {{ filter_form.accounts }}</div>
         </div>
       </div>
     </div>
@@ -124,7 +124,7 @@ $(document).ready(function() {
     });
 
     $("select").multipleSelect({
-        width: 200,
+        width: '100%',
         filter: true,
     });
 

kfet/templates/kfet/kpsul.html

@@ -1086,28 +1086,6 @@ $(document).ready(function() {
         }
     });
 
-    function cancelOpeGroup(opegroup) {
-        var $opegroup = khistory.$container.find('.opegroup').filter(function() {
-            return $(this).data('opegroup') == opegroup['id']
-        });
-        var tri = $opegroup.find('.trigramme').text();
-        var amount = amountDisplay(
-                parseFloat(opegroup['amount'], opegroup['is_cof'], tri))
-        $opegroup.find('.amount').text(amount);
-    }
-
-    function cancelOpe(ope) {
-        var $ope = khistory.$container.find('.ope').filter(function() {
-            return $(this).data('ope') == ope['id']
-        });
-        var cancel = 'Annulé';
-        var canceled_at = dateUTCToParis(ope['canceled_at']);
-        if (ope['canceled_by__trigramme'])
-            cancel += ' par '+ope['canceled_by__trigramme'];
-        cancel += ' le '+canceled_at.format('DD/MM/YY à HH:mm:ss');
-        $ope.addClass('canceled').find('.canceled').text(cancel);
-    }
-
     // -----
     // Synchronization
     // -----
@@ -1120,14 +1098,14 @@ $(document).ready(function() {
 
         for (var i=0; i<data['opegroups'].length; i++) {
             if (data['opegroups'][i]['add']) {
-                addOpeGroup(data['opegroups'][i]);
+                khistory.addOpeGroup(data['opegroups'][i]);
             } else if (data['opegroups'][i]['cancellation']) {
-                cancelOpeGroup(data['opegroups'][i]);
+                khistory.cancelOpeGroup(data['opegroups'][i]);
             }
         }
         for (var i=0; i<data['opes'].length; i++) {
             if (data['opes'][i]['cancellation']) {
-                cancelOpe(data['opes'][i]);
+                khistory.cancelOpe(data['opes'][i]);
             }
         }
         for (var i=0; i<data['checkouts'].length; i++) {