From 5b36fa198d5a651b915ee8edbe02899d50e0433c Mon Sep 17 00:00:00 2001
From: Richard Schreiber <schreiber@rami.io>
Date: Wed, 24 Feb 2021 09:59:07 +0100
Subject: [PATCH] Bulk action improvements: buttons (wording, color, icons,
 disabled-state), hide select-on-all-pages if only one results-page (#1973)

---
 .../pretixcontrol/subevents/index.html        | 20 +++----
 src/pretix/static/pretixcontrol/js/ui/main.js | 52 +++++++++----------
 2 files changed, 36 insertions(+), 36 deletions(-)

diff --git a/src/pretix/control/templates/pretixcontrol/subevents/index.html b/src/pretix/control/templates/pretixcontrol/subevents/index.html
index 89ed7f4be..1d3e13ed9 100644
--- a/src/pretix/control/templates/pretixcontrol/subevents/index.html
+++ b/src/pretix/control/templates/pretixcontrol/subevents/index.html
@@ -90,10 +90,10 @@
                         </th>
                         <th></th>
                     </tr>
-                    {% if "can_change_event_settings" in request.eventpermset %}
+                    {% if "can_change_event_settings" in request.eventpermset and page_obj.paginator.num_pages > 1 %}
                         <tr class="table-select-all warning hidden">
                             <td>
-                                <input type="checkbox" name="__ALL" id="__all">
+                                <input type="checkbox" name="__ALL" id="__all" data-results-total="{{ page_obj.paginator.count }}">
                             </td>
                             <td colspan="5">
                                 <label for="__all">
@@ -108,7 +108,7 @@
                         <tr>
                             <td>
                                 {% if "can_change_event_settings" in request.eventpermset %}
-                                    <label aria-label="{% trans "select row for batch-operation" %}" class="batch-select-label"><input type="checkbox" name="subevent" class="" value="{{ s.pk }}"/></label>
+                                    <label aria-label="{% trans "select row for batch-operation" %}" class="batch-select-label"><input type="checkbox" name="subevent" class="batch-select-checkbox" value="{{ s.pk }}"/></label>
                                 {% endif %}
                             </td>
                             <td>
@@ -167,19 +167,21 @@
                 </table>
             </div>
             {% if "can_change_event_settings" in request.eventpermset %}
-                <button type="submit" class="btn btn-default btn-save" name="action" value="delete">
-                    {% trans "Delete selected" %}
+            <div class="batch-select-actions">
+                <button type="submit" class="btn btn-danger btn-save" name="action" value="delete">
+                    <i class="fa fa-trash"></i>{% trans "Delete selected" %}
                 </button>
-                <button type="submit" class="btn btn-default btn-save" name="action" value="disable"
+                <button type="submit" class="btn btn-primary btn-save" name="action" value="disable"
                         formaction="{% url "control:event.subevents.bulkedit"  organizer=request.event.organizer.slug event=request.event.slug %}">
-                    {% trans "Change selected" %}
+                    <i class="fa fa-edit"></i>{% trans "Edit selected" %}
                 </button>
                 <button type="submit" class="btn btn-default btn-save" name="action" value="enable">
-                    {% trans "Enable selected" %}
+                    <i class="fa fa-check"></i>{% trans "Activate selected" %}
                 </button>
                 <button type="submit" class="btn btn-default btn-save" name="action" value="disable">
-                    {% trans "Disable selected" %}
+                    <i class="fa fa-ban"></i>{% trans "Deactivate selected" %}
                 </button>
+            </div>
             {% endif %}
         </form>
         {% include "pretixcontrol/pagination.html" %}
diff --git a/src/pretix/static/pretixcontrol/js/ui/main.js b/src/pretix/static/pretixcontrol/js/ui/main.js
index 73b6d3bce..8fada437f 100644
--- a/src/pretix/static/pretixcontrol/js/ui/main.js
+++ b/src/pretix/static/pretixcontrol/js/ui/main.js
@@ -690,6 +690,8 @@ $(function () {
     // Tables with bulk selection, e.g. subevent list
     $("input[data-toggle-table]").each(function (ev) {
         var $toggle = $(this);
+        var $actionButtons = $(".batch-select-actions button", this.form);
+        var countLabels = $("<span></span>").appendTo($actionButtons);
         var $table = $toggle.closest("table");
         var $selectAll = $table.find(".table-select-all");
         var $rows = $table.find("tbody tr");
@@ -758,37 +760,33 @@ $(function () {
             });
         });
 
+        var update = function() {
+            var nrOfChecked = $checkboxes.filter(":checked").length;
+            var allChecked = nrOfChecked == $checkboxes.length;
 
-        var update = function () {
-            var all_same;
-            var checkboxes = $checkboxes.toArray();
-            var i = checkboxes.length;
-            while (i--) {
-                if (all_same === undefined) {
-                    all_same = checkboxes[i].checked;
-                    continue;
-                }
-                if (all_same != checkboxes[i].checked) {
-                    $toggle.prop("checked", false).prop("indeterminate", true).trigger("change");
-                    return;
-                }
-            }
-            $toggle.prop("checked", all_same).prop("indeterminate", false).trigger("change");
-        };
+            if (!nrOfChecked) countLabels.empty();
+            else countLabels.text(" ("+nrOfChecked+")");
 
-        var debounceUpdate;
-        $checkboxes.change(function() {
-            //$(this).closest("tr").toggleClass("warning", this.checked);
-            // when changing the $toggle’s checked-property, lots of change events 
-            // get triggered => debounce
-            if (debounceUpdate) window.clearTimeout(debounceUpdate);
-            debounceUpdate = window.setTimeout(update, 10);
-        });
+            if (!allChecked) $selectAll.find("input").prop("checked", false); 
+
+            $actionButtons.attr("disabled", !nrOfChecked);
+            $toggle.prop("checked", allChecked).prop("indeterminate", nrOfChecked > 0 && !allChecked);
+            $selectAll.toggleClass("hidden", nrOfChecked !== $checkboxes.length).prop("hidden", nrOfChecked !== $checkboxes.length);
+
+        }
+
+        $checkboxes.change(update);
         $toggle.change(function (ev) {
-            if (!this.indeterminate) $checkboxes.prop("checked", this.checked);//.trigger("change");
-            $selectAll.toggleClass("hidden", !this.checked).prop("hidden", !this.checked);
-            if (!this.checked) $selectAll.find("input").prop("checked", false);
+            this.indeterminate = false;
+            $checkboxes.prop("checked", this.checked);
+            update();
         });
+        $selectAll.find("input").change(function(ev) {
+            if (this.checked) countLabels.text(" ("+this.getAttribute("data-results-total")+")");
+            else countLabels.text(" ("+$checkboxes.filter(":checked").length+")");
+        })
+
+        update();
     });
 
     // Items and categories