improve multiselect

Signed-off-by: Th3M3 <the_me@outlook.de>

scripts/pi-hole/js/groups-adlists.js

@@ -26,6 +26,7 @@ function get_groups() {
 $(document).ready(function() {
   $("#btnAdd").on("click", addAdlist);
 
+  utils.bsSelect_defaults();
   get_groups();
 });
 
@@ -47,6 +48,8 @@ function initTable() {
     ],
     drawCallback: function() {
       $('button[id^="deleteAdlist_"]').on("click", deleteAdlist);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
     },
     rowCallback: function(row, data) {
       $(row).attr("data-id", data.id);
@@ -88,61 +91,74 @@ function initTable() {
 
       $("td:eq(3)", row).empty();
       $("td:eq(3)", row).append(
-        '<div id="selectHome_' +
-          data.id +
-          '">' +
-          '<select id="multiselect_' +
-          data.id +
-          '" multiple="multiple"></select></div>'
+        '<select class="selectpicker" id="multiselect_' + data.id + '" multiple></select>'
       );
       var selectEl = $("#multiselect_" + data.id, row);
       // Add all known groups
       for (var i = 0; i < groups.length; i++) {
-        var extra = "";
+        var data_sub = "";
         if (!groups[i].enabled) {
-          extra = " (disabled)";
+          data_sub = 'data-subtext="(disabled)"';
         }
 
         selectEl.append(
-          $("<option />")
+          $("<option " + data_sub + "/>")
             .val(groups[i].id)
-            .text(groups[i].name + extra)
+            .text(groups[i].name)
         );
       }
 
       // Select assigned groups
       selectEl.val(data.groups);
-      // Initialize multiselect
-      selectEl.multiselect({
-        includeSelectAllOption: true,
-        buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
-        maxHeight: 200,
-        onDropdownShown: function() {
-          var el = $("#container_" + data.id);
-          var top = el[0].getBoundingClientRect().top;
-          var bottom = $(window).height() - top - el.height();
-          if (bottom < 200) {
-            el.addClass("dropup");
+      // Initialize bootstrap-select
+      selectEl
+        // fix dropdown if it would stick out right of the viewport
+        .on("show.bs.select", function() {
+          var winWidth = $(window).width();
+          var dropdownEl = $("body > .bootstrap-select.dropdown");
+          if (dropdownEl.length > 0) {
+            dropdownEl.removeClass("align-right");
+            var width = dropdownEl.width();
+            var left = dropdownEl.offset().left;
+            if (left + width > winWidth) {
+              dropdownEl.addClass("align-right");
+            }
           }
-
-          if (bottom > 200) {
-            el.removeClass("dropup");
+        })
+        .on("changed.bs.select", function() {
+          // enable Apply button
+          if ($(ApplyBtn).prop("disabled")) {
+            $(ApplyBtn)
+              .addClass("btn-success")
+              .prop("disabled", false)
+              .on("click", function() {
+                editAdlist.call(selectEl);
+              });
           }
+        })
+        .on("hide.bs.select", function() {
+          // Restore values if drop-down menu is closed without clicking the Apply button
+          if (!$(ApplyBtn).prop("disabled")) {
+            $(this)
+              .val(data.groups)
+              .selectpicker("refresh");
+            $(ApplyBtn)
+              .removeClass("btn-success")
+              .prop("disabled", true)
+              .off("click");
+          }
+        })
+        .selectpicker()
+        .siblings(".dropdown-menu")
+        .find(".btn-group")
+        .parent()
+        .prepend(
+          '<button type="button" id=btn_apply_' +
+            data.id +
+            ' class="btn btn-block btn-sm" disabled>Apply</button>'
+        );
 
-          var offset = el.offset();
-          $("body").append(el);
-          el.css("position", "absolute");
-          el.css("top", offset.top + "px");
-          el.css("left", offset.left + "px");
-        },
-        onDropdownHide: function() {
-          var el = $("#container_" + data.id);
-          var home = $("#selectHome_" + data.id);
-          home.append(el);
-          el.removeAttr("style");
-        }
-      });
-      selectEl.on("change", editAdlist);
+      var ApplyBtn = "#btn_apply_" + data.id;
 
       var button =
         '<button class="btn btn-danger btn-xs" type="button" id="deleteAdlist_' +
@@ -230,6 +246,7 @@ function addAdlist() {
           "Successfully added adlist",
           address
         );
+        table.ajax.reload(null, false);
         $("#new_address").val("");
         $("#new_comment").val("");
         table.ajax.reload();
@@ -304,6 +321,7 @@ function editAdlist() {
           "Successfully " + done + " adlist ",
           address
         );
+        table.ajax.reload(null, false);
       } else {
         utils.showAlert(
           "error",
@@ -350,7 +368,8 @@ function deleteAdlist() {
         table
           .row(tr)
           .remove()
-          .draw(false);
+          .draw(false)
+          .ajax.reload(null, false);
       } else {
         utils.showAlert("error", "", "Error while deleting adlist with ID " + id, response.message);
       }