Add possibility to assign groups to newly added entries from the beginning

Signed-off-by: DL6ER <dl6er@dl6er.de>

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-md-3">
                         <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-md-3">
+                        <label for="new_group">Group assignment:</label>
+                        <div><select class="selectpicker" 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-md-3 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-md-3 form-group">
+                                    <label for="new_domain_group">Group assignment:</label>
+                                    <div><select class="selectpicker" 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="form-group col-md-3">
                                     <label for="new_regex_comment">Comment:</label>
                                     <input id="new_regex_comment" type="text" class="form-control" placeholder="Description (optional)">
                                 </div>
+                                <div class="col-md-3 form-group">
+                                    <label for="new_regex_group">Group assignment:</label>
+                                    <div><select class="selectpicker" 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-md-3">
                         <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-md-3">
+                        <label for="new_group">Group assignment:</label>
+                        <div><select class="selectpicker" 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);