Helper for CheckboxSelectMultiple widget which allows user to select/…

…unselect all available options.

docker-compose.yml

@@ -39,9 +39,10 @@ services:
       METADEFENDER_API_KEY:
     ports:
       - "8000:8000"
-    # Uncomment following to enable debug in development:
-    # stdin_open: true
-    # tty: true
+    # Following allows to execute `docker attach feder_web_1`
+    # necessary when using ipdb in development:
+    stdin_open: true
+    tty: true
 
   worker:
     command: python manage.py process_tasks

feder/assets/js/widget.js

@@ -0,0 +1,28 @@
+/**
+ * Adds additional utility buttons to form groups having "checkbox-utils" class
+ * which allows user to select unselect all options in CheckboxSelectMultiple widgets.
+ */
+$(function () {
+    var $inputs = $('.checkbox-utils');
+
+    $inputs.each(function (index) {
+        var $elem = $(this),
+            $label = $elem.find('label.control-label:first-child');
+
+        $label.after(
+            '<button class="btn btn-primary unselect-all-btn" type="button">' +
+                'Odznacz wszystkie' +
+            '</button>' +
+            '<button class="btn btn-primary select-all-btn" type="button">' +
+                'Zaznacz wszystkie' +
+            '</button>'
+        );
+
+        $('.checkbox-utils .select-all-btn').click(function (event) {
+            $elem.find('input[type="checkbox"]').prop("checked", true);
+        });
+        $('.checkbox-utils .unselect-all-btn').click(function (event) {
+            $elem.find('input[type="checkbox"]').prop("checked", false);
+        });
+    });
+});

feder/assets/scss/style.scss

@@ -155,3 +155,11 @@ $gray: #F0F0F0;
   max-height: 400px;
   overflow-y: scroll;
 }
+
+.checkbox-utils {
+  button.btn {
+    display: block;
+    float: right;
+    margin-left: 10px;
+  }
+}

feder/monitorings/forms.py

@@ -1,4 +1,4 @@
-from atom.ext.crispy_forms.forms import SingleButtonMixin
+from atom.ext.crispy_forms.forms import SingleButtonMixin, HelperMixin
 from atom.ext.guardian.forms import TranslatedUserObjectPermissionsForm
 from braces.forms import UserKwargModelFormMixin
 from crispy_forms.layout import Layout, Fieldset
@@ -42,10 +42,18 @@ class SelectUserForm(forms.Form):
     )
 
 
-class CheckboxTranslatedUserObjectPermissionsForm(TranslatedUserObjectPermissionsForm):
+class CheckboxTranslatedUserObjectPermissionsForm(
+    HelperMixin, TranslatedUserObjectPermissionsForm
+):
     def get_obj_perms_field_widget(self):
         return forms.CheckboxSelectMultiple
 
+    def __init__(self, *args, **kwargs):
+        super().__init__(*args, **kwargs)
+        self.helper.layout = Layout(
+            Fieldset("", "permissions", css_class="form-group checkbox-utils"),
+        )
+
 
 class SaveTranslatedUserObjectPermissionsForm(
     SingleButtonMixin, CheckboxTranslatedUserObjectPermissionsForm

feder/static/css/style.css

@@ -7477,3 +7477,8 @@ button.close {
 .scrollable-widget {
   max-height: 400px;
   overflow-y: scroll; }
+
+.checkbox-utils button.btn {
+  display: block;
+  float: right;
+  margin-left: 10px; }

feder/static/js/script.js

@@ -12143,3 +12143,32 @@ return jQuery;
   })
 
 }(jQuery);
+
+/**
+ * Adds additional utility buttons to form groups having "checkbox-utils" class
+ * which allows to select unselect all choices in CheckboxSelectMultiple widgets.
+ */
+$(function () {
+    var $inputs = $('.checkbox-utils');
+
+    $inputs.each(function (index) {
+        var $elem = $(this),
+            $label = $elem.find('label.control-label:first-child');
+
+        $label.after(
+            '<button class="btn btn-primary unselect-all-btn" type="button">' +
+                'Odznacz wszystkie' +
+            '</button>' +
+            '<button class="btn btn-primary select-all-btn" type="button">' +
+                'Zaznacz wszystkie' +
+            '</button>'
+        );
+
+        $('.checkbox-utils .select-all-btn').click(function (event) {
+            $elem.find('input[type="checkbox"]').prop("checked", true);
+        });
+        $('.checkbox-utils .unselect-all-btn').click(function (event) {
+            $elem.find('input[type="checkbox"]').prop("checked", false);
+        });
+    });
+});