Add possibility to assign groups to newly added entries from the begi…

…nning (#3187)

groups-clients.lp

@@ -34,10 +34,14 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                             <option disabled selected>Loading...</option>
                         </select>
                     </div>
-                    <div class="form-group col-md-6">
+                    <div class="form-group col-lg-3 col-md-6">
                         <label for="new_comment">Comment:</label>
                         <input id="new_comment" type="text" class="form-control" placeholder="Client description (optional)">
                     </div>
+                    <div class="form-group col-lg-3 col-md-6">
+                        <label for="new_group">Group assignment:</label>
+                        <div><select class="selectpicker form-control" id="new_group" multiple></select></div>
+                    </div>
                 </div>
                 <div class="row">
                     <div class="col-md-12">

groups-domains.lp

@@ -46,10 +46,14 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                                         <div id="suggest_domains" class="table-responsive no-border"></div>
                                     </div>
                                 </div>
-                                <div class="col-md-6 form-group">
+                                <div class="col-lg-3 col-md-6 form-group">
                                     <label for="new_domain_comment">Comment:</label>
                                     <input id="new_domain_comment" type="text" class="form-control" placeholder="Description (optional)">
                                 </div>
+                                <div class="col-lg-3 col-md-6 form-group">
+                                    <label for="new_domain_group">Group assignment:</label>
+                                    <div><select class="selectpicker form-control" id="new_domain_group" multiple></select></div>
+                                </div>
                             </div>
                             <div class="row">
                                 <div class="col-md-12">
@@ -75,10 +79,14 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                                             regular expressions tutorial</a>.
                                     </div>
                                 </div>
-                                <div class="form-group col-md-6">
+                                <div class="col-lg-3 col-md-6 form-group">
                                     <label for="new_regex_comment">Comment:</label>
                                     <input id="new_regex_comment" type="text" class="form-control" placeholder="Description (optional)">
                                 </div>
+                                <div class="col-lg-3 col-md-6 form-group">
+                                    <label for="new_regex_group">Group assignment:</label>
+                                    <div><select class="selectpicker form-control" id="new_regex_group" multiple></select></div>
+                                </div>
                             </div>
                         </div>
                     </div>

groups-lists.lp

@@ -32,10 +32,14 @@ mg.include('scripts/lua/header_authenticated.lp','r')
                         <label for="new_address">Address:</label>
                         <input id="new_address" type="text" class="form-control" placeholder="URL" autocomplete="off" spellcheck="false" autocapitalize="none" autocorrect="off">
                     </div>
-                    <div class="form-group col-md-6">
+                    <div class="form-group col-lg-3 col-md-6">
                         <label for="new_comment">Comment:</label>
                         <input id="new_comment" type="text" class="form-control" placeholder="List description (optional)">
                     </div>
+                    <div class="form-group col-lg-3 col-md-6">
+                        <label for="new_group">Group assignment:</label>
+                        <div><select class="selectpicker form-control" id="new_group" multiple></select></div>
+                    </div>
                 </div>
             </div>
             <div class="box-footer clearfix">

scripts/js/groups-clients.js

@@ -75,7 +75,7 @@ function reloadClientSuggestions() {
 
 $(function () {
   $("#btnAdd").on("click", addClient);
-  $("select").select2({
+  $("#select").select2({
     tags: true,
     placeholder: "Select client...",
     allowClear: true,
@@ -353,6 +353,8 @@ function deleteClient() {
 
 function addClient() {
   const comment = $("#new_comment").val();
+  // Convert all group IDs to integers
+  const group = $("#new_group").val().map(Number);
 
   // Check if the user wants to add multiple IPs (space or newline separated)
   // If so, split the input and store it in an array
@@ -405,7 +407,7 @@ function addClient() {
     dataType: "json",
     processData: false,
     contentType: "application/json; charset=utf-8",
-    data: JSON.stringify({ client: ips, comment: comment }),
+    data: JSON.stringify({ client: ips, comment: comment, groups: group }),
     success: function (data) {
       utils.enableAll();
       utils.listsAlert("client", ips, data);

scripts/js/groups-common.js

@@ -7,17 +7,51 @@
 
 /* global apiFailure:false, utils:false, initTable:false, updateFtlInfo:false */
 
-// eslint-disable-next-line no-unused-vars
 var groups = [];
 
+function populateGroupSelect(selectEl) {
+  if (selectEl.length === 0) {
+    // No select element found, return
+    return;
+  }
+
+  // Add all known groups
+  for (var i = 0; i < groups.length; i++) {
+    var dataSub = "";
+    if (!groups[i].enabled) {
+      dataSub = 'data-subtext="(disabled)"';
+    }
+
+    selectEl.append(
+      $("<option " + dataSub + "/>")
+        .val(groups[i].id)
+        .text(groups[i].name)
+    );
+  }
+
+  // Initialize selectpicker
+  selectEl.val([0]);
+
+  // Refresh selectpicker
+  selectEl.selectpicker("refresh");
+}
+
 // eslint-disable-next-line no-unused-vars
-function getGroups() {
+function getGroups(groupSelector) {
   $.ajax({
     url: "/api/groups",
     type: "GET",
     dataType: "json",
     success: function (data) {
       groups = data.groups;
+
+      // Get all all <select> elements with the class "selectpicker"
+      var groupSelector = $(".selectpicker");
+      // Populate the groupSelector with the groups
+      for (var i = 0; i < groupSelector.length; i++) {
+        populateGroupSelect($(groupSelector[i]));
+      }
+
       // Actually load table contents
       initTable();
     },

scripts/js/groups-domains.js

@@ -455,18 +455,22 @@ function addDomain() {
   const wildcardChecked = wildcardEl.prop("checked");
 
   // current tab's inputs
-  var kind, domainEl, commentEl;
+  var kind, domainEl, commentEl, groupEl;
   if (tabHref === "#tab_domain") {
     kind = "exact";
     domainEl = $("#new_domain");
     commentEl = $("#new_domain_comment");
+    groupEl = $("#new_domain_group");
   } else if (tabHref === "#tab_regex") {
     kind = "regex";
     domainEl = $("#new_regex");
     commentEl = $("#new_regex_comment");
+    groupEl = $("#new_regex_group");
   }
 
   const comment = commentEl.val();
+  // Convert all group IDs to integers
+  const group = groupEl.val().map(Number);
 
   // Check if the user wants to add multiple domains (space or newline separated)
   // If so, split the input and store it in an array
@@ -511,6 +515,7 @@ function addDomain() {
       comment: comment,
       type: type,
       kind: kind,
+      groups: group,
     }),
     success: function (data) {
       utils.enableAll();

scripts/js/groups-lists.js

@@ -494,6 +494,8 @@ function deleteList() {
 function addList(event) {
   const type = event.data.type;
   const comment = $("#new_comment").val();
+  // Convert all group IDs to integers
+  const group = $("#new_group").val().map(Number);
 
   // Check if the user wants to add multiple domains (space or newline separated)
   // If so, split the input and store it in an array
@@ -522,7 +524,7 @@ function addList(event) {
     dataType: "json",
     processData: false,
     contentType: "application/json; charset=utf-8",
-    data: JSON.stringify({ address: addresses, comment: comment, type: type }),
+    data: JSON.stringify({ address: addresses, comment: comment, type: type, groups: group }),
     success: function (data) {
       utils.enableAll();
       utils.listsAlert(type + "list", addresses, data);

scripts/js/groups.js

@@ -235,11 +235,15 @@ function addGroup() {
   const comment = $("#new_comment").val();
 
   // Check if the user wants to add multiple groups (space or newline separated)
-  // If so, split the input and store it in an array
+  // If so, split the input and store it in an array, however, do not split
+  // group names enclosed in quotes
   var names = utils
     .escapeHtml($("#new_name"))
     .val()
-    .split(/[\s,]+/);
+    .match(/(?:[^\s"]+|"[^"]*")+/g)
+    .map(function (name) {
+      return name.replaceAll(/(^"|"$)/g, "");
+    });
   // Remove empty elements
   names = names.filter(function (el) {
     return el !== "";

style/themes/default-dark.css

@@ -654,3 +654,23 @@ input[type="password"]::-webkit-caps-lock-indicator {
   background: none;
   border-color: rgb(120, 127, 133);
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #353c42;
+  border-color: #3d444b;
+}
+.bootstrap-select > .dropdown-toggle:hover,
+.bootstrap-select > .dropdown-toggle:focus {
+  color: #fff;
+}
+.open > .dropdown-toggle.btn-default,
+.open > .dropdown-toggle.btn-default:active {
+  background-color: #353c42;
+  color: #bec5cb;
+  border: 1px solid #3d444b;
+}
+.open > .dropdown-toggle.btn-default:hover {
+  color: #fff;
+}

style/themes/default-darker.css

@@ -692,8 +692,7 @@ fieldset[disabled] .btn {
 .btn-default:active,
 .open > .dropdown-toggle.btn-default {
   color: rgb(200, 195, 188);
-  background-color: rgb(38, 41, 43);
-  background-image: none;
+  background: rgb(24, 26, 27);
   border-color: rgb(71, 77, 80);
 }
 .btn-default.active.focus,
@@ -706,9 +705,15 @@ fieldset[disabled] .btn {
 .open > .dropdown-toggle.btn-default:focus,
 .open > .dropdown-toggle.btn-default:hover {
   color: rgb(200, 195, 188);
-  background-color: rgb(48, 52, 54);
+  background: rgb(24, 26, 27);
   border-color: rgb(80, 87, 91);
 }
+
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background: rgb(24, 26, 27);
+}
+
 .btn-default.disabled.focus,
 .btn-default.disabled:focus,
 .btn-default.disabled:hover,

style/themes/default-light.css

@@ -311,3 +311,13 @@ select:-webkit-autofill {
 .page-header {
   border-color: #ddd;
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #fff;
+}
+.open > .dropdown-toggle.btn-default,
+.open > .dropdown-toggle.btn-default:active {
+  background-color: #fff;
+}

style/themes/high-contrast-dark.css

@@ -985,3 +985,19 @@ td.highlight {
   animation: none;
   border-radius: 6px;
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #2d363f;
+  border: 1px solid #3c4652;
+}
+
+.open > .dropdown-toggle.btn-default:active,
+.bootstrap-select > .dropdown-toggle:hover {
+  color: var(--main-text-color);
+}
+.bootstrap-select > .dropdown-toggle:focus {
+  border-color: #3c8dbc;
+  color: var(--main-text-color);
+}

style/themes/high-contrast.css

@@ -574,3 +574,13 @@ table.dataTable thead th:hover.sorting_desc_disabled::after {
   animation: none;
   border-radius: 6px;
 }
+
+/* Group assignment select */
+.bootstrap-select > .dropdown-toggle {
+  border-radius: 0;
+  background-color: #fff;
+}
+.bootstrap-select > .dropdown-toggle:hover {
+  color: #000;
+  background-color: #eee;
+}

style/themes/lcars.css

@@ -287,13 +287,19 @@ div.dataTables_wrapper div.dataTables_length select {
   border-radius: 8px;
 }
 
+/* Remove border from group assignment select */
+.form-control:has(.selectpicker) {
+  border: none;
+  color: #246;
+}
+
 /*** Overwrite chrome's input field auto-filling ***/
 input:-webkit-autofill,
 input:-webkit-autofill:focus,
 textarea:-webkit-autofill,
 select:-webkit-autofill {
   -webkit-text-fill-color: #fff !important;
-  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
+  -webkit-box-shadow: 0 0 0 1000px #000 inset;
   transition: background-color 1s ease-in-out 0s;
 }
 
@@ -528,15 +534,23 @@ p.login-box-msg,
   color: #456;
 }
 
-.bootstrap-select.bs-container .dropdown-menu {
+.bootstrap-select.bs-container .dropdown-menu,
+.open > .dropdown-menu {
   border-radius: 12px;
   border-width: 2px;
 }
 
-.bootstrap-select.bs-container .dropdown-menu.open {
+.bootstrap-select.bs-container .dropdown-menu.open,
+.open > .dropdown-menu.open {
   filter: invert(0.88) hue-rotate(180deg);
 }
 
+.open > .dropdown-toggle.btn-default,
+.open > .dropdown-toggle.btn-default:active {
+  background-color: #353c42;
+  color: #bec5cb;
+}
+
 /*** Set .dropdown-toggle width to fill the whole table cell ***/
 @media screen and (min-width: 661px) and (max-width: 767px), screen and (min-width: 960px) {
   .bootstrap-select.fit-width {
@@ -1147,6 +1161,10 @@ footer a:focus {
   color: #9ab;
 }
 
+.btn .box-title {
+  color: inherit;
+}
+
 .box {
   margin-bottom: 1.8em;
   background: #111;
@@ -1163,7 +1181,7 @@ footer a:focus {
 }
 
 .modal-body .overlay {
-  padding: 0px;
+  padding: 0;
   border-radius: 3px;
 }