Affichage annulation historique

- Les infos d'annulations apparaissent sur les historiques (K-Psul et
  standard)
- Les infos de validation apparaissent sur l'historique standard si la
  personne est de l'équipe
- Si la ligne contenant les données d'une opération est trop longue,
  celle-ci est scrollable (exemple : opé annulée sur K-Psul)

kfet/static/kfet/css/history.css

@@ -49,6 +49,7 @@
     line-height:24px;
     font-size:12px;
     padding-left:15px;
+    overflow:auto;
 }
 
 #history .ope .amount {
@@ -65,6 +66,10 @@
     padding-left:15px;
 }
 
+#history .ope .canceled {
+    padding-left:20px;
+}
+
 #history div.general.ui-selected, #history div.general.ui-selecting,
 #history div.ope.ui-selected, #history div.ope.ui-selecting {
     background-color:rgba(200,16,46,0.6);

kfet/templates/kfet/account_read.html

@@ -48,6 +48,9 @@
                     {{ ope.group.amount|ukf:ope.group.is_cof }}
                   {% endif %}
                 </span>
+                {% if perms.kfet.is_team %}
+                  <span class="valid_by">Par {{ ope.group.valid_by.trigramme }}</span>
+                {% endif %}
               </div>
             {% endifchanged %}
             <div class="ope {% if ope.canceled_at %}canceled{% endif %}" data-ope="{{ ope.pk }}" data-opegroup="{{ ope.group.pk }}">
@@ -65,6 +68,15 @@
                     {% if ope.type == "deposit" %}Charge{% else %}Retrait{% endif %}
                 </span>
               {% endif %}
+              {% if ope.canceled_at %}
+                {% if perms.kfet.is_team and ope.canceled_by %}
+                  <span class="canceled">
+                    Annulé par {{ ope.canceled_by.trigramme }} le {{ ope.canceled_at }}
+                  </span>
+                {% else %}
+                  <span class="canceled">Annulé le {{ ope.canceled_at }}</span>
+                {% endif %}
+              {% endif %}
             </div>
           {% endfor %}
           {% endspaceless %}

kfet/templates/kfet/kpsul.html

@@ -946,7 +946,7 @@ $(document).ready(function() {
 
     var history_container = $('#history');
     var history_operationgroup_html = '<div class="opegroup"><span class="time"></span><span class="trigramme"></span><span class="amount"></span><span class="valid_by"></span></div>';
-    var history_operation_html = '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span></div>';
+    var history_operation_html = '<div class="ope"><span class="amount"></span><span class="infos1"></span><span class="infos2"></span><span class="canceled"></span></div>';
 
     function getOpeHtml(ope, is_cof=false, trigramme='') {
         var ope_html = $(history_operation_html);
@@ -974,8 +974,15 @@ $(document).ready(function() {
             .find('.infos1').text(infos1).end()
             .find('.infos2').text(infos2).end();
 
-        if (ope['canceled_at'])
+        if (ope['canceled_at']) {
             ope_html.addClass('canceled');
+            if (ope['canceled_by__trigramme']) {
+                var cancel = 'Annulé par '+ope['canceled_by__trigramme']+' le '+ope['canceled_at'];
+            } else {
+                var cancel = 'Annulé le '+ope['canceled_at'];
+            }
+            ope_html.find('.canceled').text(cancel);
+        }
 
         return ope_html;
     }
@@ -1168,6 +1175,12 @@ $(document).ready(function() {
     function cancelOpe(ope) {
         var ope_html = history_container.find('[data-ope='+ope['id']+']');
         ope_html.addClass('canceled');
+        if (ope['canceled_by__trigramme']) {
+            var cancel = 'Annulé par '+ope['canceled_by__trigramme']+' le '+ope['canceled_at'];
+        } else {
+            var cancel = 'Annulé le '+ope['canceled_at'];
+        }
+        ope_html.find('.canceled').text(cancel);
     }
 
     // -----