Add category headers to groups

domain-server/resources/describe-settings.json

@@ -455,12 +455,13 @@
           "name": "group_permissions",
           "type": "table",
           "caption": "Permissions for Users in Groups",
-          "can_add_new_rows": true,
+          "categorize_by_key": "permissions_id",
+          "can_add_new_categories": true,
 
           "groups": [
             {
-              "label": "Group",
+              "label": "Rank",
-              "span": 2
+              "span": 1
             },
             {
               "label": "Permissions <a data-toggle='tooltip' data-html='true' title='<p><strong>Domain-Wide User Permissions</strong></p><ul><li><strong>Connect</strong><br />Sets whether users in specific groups can connect to the domain.</li><li><strong>Lock / Unlock</strong><br />Sets whether users in specific groups can change the &ldquo;locked&rdquo; property of an entity (either from on to off or off to on).</li><li><strong>Rez</strong><br />Sets whether users in specific groups can create new entities.</li><li><strong>Rez Temporary</strong><br />Sets whether users in specific groups can create new entities with a finite lifetime.</li><li><strong>Write Assets</strong><br />Sets whether users in specific groups can make changes to the domain&rsquo;s asset-server assets.</li><li><strong>Ignore Max Capacity</strong><br />Sets whether user in specific groups can connect even if the domain has reached or exceeded its maximum allowed agents.</li></ul><p>Permissions granted to a specific user will be a union of the permissions granted to the groups they are in, as well as permissions from the previous section.  Group permissions are only granted if the user doesn&rsquo;t have their own row in the per-account section, below.</p>'>?</a>",
@@ -471,7 +472,9 @@
           "columns": [
             {
               "name": "permissions_id",
-              "label": "Group Name"
+              "label": "Group Name",
+              "readonly": true,
+              "hidden": true
             },
             {
               "name": "rank_id",
@@ -487,7 +490,7 @@
             },
             {
               "name": "rank_name",
-              "label": "Rank Name",
+              "label": "",
               "readonly": true
             },
             {
@@ -548,8 +551,8 @@
 
           "groups": [
             {
-              "label": "Group",
+              "label": "Rank",
-              "span": 2
+              "span": 1
             },
             {
               "label": "Permissions <a data-toggle='tooltip' data-html='true' title='<p><strong>Domain-Wide User Permissions</strong></p><ul><li><strong>Connect</strong><br />Sets whether users in specific groups can connect to the domain.</li><li><strong>Lock / Unlock</strong><br />Sets whether users in specific groups can change the &ldquo;locked&rdquo; property of an entity (either from on to off or off to on).</li><li><strong>Rez</strong><br />Sets whether users in specific groups can create new entities.</li><li><strong>Rez Temporary</strong><br />Sets whether users in specific groups can create new entities with a finite lifetime.</li><li><strong>Write Assets</strong><br />Sets whether users in specific groups can make changes to the domain&rsquo;s asset-server assets.</li><li><strong>Ignore Max Capacity</strong><br />Sets whether user in specific groups can connect even if the domain has reached or exceeded its maximum allowed agents.</li></ul><p>Permissions granted to a specific user will be a union of the permissions granted to the groups they are in.  Group permissions are only granted if the user doesn&rsquo;t have their own row in the per-account section, below.</p>'>?</a>",
@@ -560,7 +563,8 @@
           "columns": [
             {
               "name": "permissions_id",
-              "label": "Group Name"
+              "label": "Group Name",
+              "hidden": true
             },
             {
               "name": "rank_id",
@@ -574,7 +578,7 @@
             },
             {
               "name": "rank_name",
-              "label": "Rank Name",
+              "label": "",
               "readonly": true
             },
             {

domain-server/resources/web/css/style.css

@@ -20,7 +20,9 @@ body {
   top: 40px;
 }
 
-.table .value-row td, .table .inputs td {
+.table .value-row td,
+.table .value-category td,
+.table .inputs td {
     vertical-align: middle;
 }
 

domain-server/resources/web/settings/js/settings.js

@@ -7,10 +7,13 @@ var Settings = {
   TRIGGER_CHANGE_CLASS: 'trigger-change',
   DATA_ROW_CLASS: 'value-row',
   DATA_COL_CLASS: 'value-col',
+  DATA_CATEGORY_CLASS: 'value-category',
   ADD_ROW_BUTTON_CLASS: 'add-row',
   ADD_ROW_SPAN_CLASSES: 'glyphicon glyphicon-plus add-row',
   DEL_ROW_BUTTON_CLASS: 'del-row',
   DEL_ROW_SPAN_CLASSES: 'glyphicon glyphicon-remove del-row',
+  DEL_CATEGORY_BUTTON_CLASS: 'del-category',
+  DEL_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-remove del-category',
   MOVE_UP_BUTTON_CLASS: 'move-up',
   MOVE_UP_SPAN_CLASSES: 'glyphicon glyphicon-chevron-up move-up',
   MOVE_DOWN_BUTTON_CLASS: 'move-down',
@@ -164,19 +167,23 @@ $(document).ready(function(){
   });
 
   $('#' + Settings.FORM_ID).on('click', '.' + Settings.ADD_ROW_BUTTON_CLASS, function(){
-    addTableRow(this);
+    addTableRow($(this).closest('tr'));
   });
 
   $('#' + Settings.FORM_ID).on('click', '.' + Settings.DEL_ROW_BUTTON_CLASS, function(){
-    deleteTableRow(this);
+    deleteTableRow($(this).closest('tr'));
+  });
+
+  $('#' + Settings.FORM_ID).on('click', '.' + Settings.DEL_CATEGORY_BUTTON_CLASS, function(){
+    deleteTableCategory($(this).closest('tr'));
   });
 
   $('#' + Settings.FORM_ID).on('click', '.' + Settings.MOVE_UP_BUTTON_CLASS, function(){
-    moveTableRow(this, true);
+    moveTableRow($(this).closest('tr'), true);
   });
 
   $('#' + Settings.FORM_ID).on('click', '.' + Settings.MOVE_DOWN_BUTTON_CLASS, function(){
-    moveTableRow(this, false);
+    moveTableRow($(this).closest('tr'), false);
   });
 
   $('#' + Settings.FORM_ID).on('keyup', function(e){
@@ -924,7 +931,6 @@ $('body').on('click', '.save-button', function(e){
 
 function makeTable(setting, keypath, setting_value, isLocked) {
   var isArray = !_.has(setting, 'key');
-  var isHash = !isArray;
 
   if (!isArray && setting.can_order) {
     setting.can_order = false;
@@ -974,25 +980,60 @@ function makeTable(setting, keypath, setting_value, isLocked) {
     html += "<td class='key'><strong>" + setting.key.label + "</strong></td>" // Key
   }
 
+  var numVisibleColumns = 0;
   _.each(setting.columns, function(col) {
+    if (!col.hidden) numVisibleColumns++;
     html += "<td " + (col.hidden ? "style='display: none;'" : "") + "class='data " +
       (col.class ? col.class : '') + "'><strong>" + col.label + "</strong></td>" // Data
   })
 
   if (!isLocked && !setting.read_only) {
     if (setting.can_order) {
+      numVisibleColumns++;
       html += "<td class='" + Settings.REORDER_BUTTONS_CLASSES +
               "'><a href='javascript:void(0);' class='glyphicon glyphicon-sort'></a></td>";
     }
-    html += "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES + "'></td></tr>"
+    numVisibleColumns++;
+    html += "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES + "'></td></tr>";
   }
 
   // populate rows in the table from existing values
   var row_num = 1;
 
   if (keypath.length > 0 && _.size(setting_value) > 0) {
+    var rowIsObject = setting.columns.length > 1;
+
     _.each(setting_value, function(row, rowIndexOrName) {
-      html += "<tr class='" + Settings.DATA_ROW_CLASS + "'" + (isArray ? "" : "name='" + keypath + "." + rowIndexOrName + "'") + ">"
+      var categoryKey = setting.categorize_by_key;
+      var isCategorized = !!categoryKey;
+      var categoryData = "";
+      if (isCategorized && isArray) {
+        var predicate = {};
+        var categoryValue = row[categoryKey];
+        predicate[categoryKey] = categoryValue;
+        categoryValue = rowIsObject ? row[categoryKey] : row;
+        categoryData = "data-category='" + categoryValue + "'";
+
+        if (_.findIndex(setting_value, predicate) === rowIndexOrName) {
+          html +=
+            "<tr class='" + Settings.DATA_CATEGORY_CLASS + "' " + categoryData + ">" +
+              "<td colspan='" + (numVisibleColumns - 1) + "'>" +
+                categoryValue +
+              "</td>" +
+              ((setting.can_add_new_categories) ? (
+                "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES + "'>" +
+                  "<a href='javascript:void(0);' class='" + Settings.DEL_CATEGORY_SPAN_CLASSES + "'></a>" +
+                "</td>"
+              ) : (
+                "<td></td>"
+              )) +
+            "</tr>";
+        }
+      }
+
+      html +=
+        "<tr class='" + Settings.DATA_ROW_CLASS + "' " + categoryData + " " +
+             (isArray ? "" : "name='" + keypath + "." + rowIndexOrName + "'") + ">"
 
       if (setting.numbered === true) {
         html += "<td class='numbered'>" + row_num + "</td>"
@@ -1006,8 +1047,8 @@ function makeTable(setting, keypath, setting_value, isLocked) {
 
       _.each(setting.columns, function(col) {
 
+        var colValue, colName;
         if (isArray) {
-          rowIsObject = setting.columns.length > 1;
           colValue = rowIsObject ? row[col.name] : row;
           colName = keypath + "[" + rowIndexOrName + "]" + (rowIsObject ? "." + col.name : "");
         } else {
@@ -1019,18 +1060,25 @@ function makeTable(setting, keypath, setting_value, isLocked) {
           || (nonDeletableRowKey === col.name && nonDeletableRowValues.indexOf(colValue) !== -1);
 
         if (isArray && col.type === "checkbox" && col.editable) {
-          html += "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>"
+          html +=
-                  + "<input type='checkbox' class='form-control table-checkbox' "
+            "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>" +
-                  + "name='" + colName + "'" + (colValue ? " checked" : "") + " /></td>";
+              "<input type='checkbox' class='form-control table-checkbox' " +
+                     "name='" + colName + "'" + (colValue ? " checked" : "") + "/>" +
+            "</td>";
         } else if (isArray && col.type === "time" && col.editable) {
-          html += "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>"
+          html +=
-                  + "<input type='time' class='form-control table-time' "
+            "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>" +
-                  + "name='" + colName + "' value='" + (colValue || col.default || "00:00") + "' /></td>";
+              "<input type='time' class='form-control table-time' name='" + colName + "' " +
+                     "value='" + (colValue || col.default || "00:00") + "'/>" +
+            "</td>";
         } else {
           // Use a hidden input so that the values are posted.
-          html += "<td " + (col.hidden ? "style='display: none;'" : "") + "class='" + Settings.DATA_COL_CLASS +
+          html +=
-            "' name='" + colName + "'>" + colValue + "<input type='hidden' name='" + colName +
+            "<td class='" + Settings.DATA_COL_CLASS + "' " + (col.hidden ? "style='display: none;'" : "") +
-            "' value='" + colValue + "'/></td>";
+                "name='" + colName + "'>" +
+              colValue +
+              "<input type='hidden' name='" + colName + "' value='" + colValue + "'/>" +
+            "</td>";
         }
 
       })
@@ -1138,9 +1186,7 @@ function badgeSidebarForDifferences(changedElement) {
   $("a[href='#" + panelParentID + "'] .badge").html(badgeValue);
 }
 
-function addTableRow(add_glyphicon) {
+function addTableRow(row) {
-  var row = $(add_glyphicon).closest('tr')
-
   var table = row.parents('table')
   var isArray = table.data('setting-type') === 'array'
 
@@ -1279,9 +1325,7 @@ function addTableRow(add_glyphicon) {
   row.parent().append(input_clone)
 }
 
-function deleteTableRow(delete_glyphicon) {
+function deleteTableRow(row) {
-  var row = $(delete_glyphicon).closest('tr')
-
   var table = $(row).closest('table')
   var isArray = table.data('setting-type') === 'array'
 
@@ -1298,12 +1342,13 @@ function deleteTableRow(delete_glyphicon) {
       row.remove()
     } else {
       // this is the last row, we can't remove it completely since we need to post an empty array
-
+      row
-      row.removeClass(Settings.DATA_ROW_CLASS).removeClass(Settings.NEW_ROW_CLASS)
+        .removeClass(Settings.DATA_ROW_CLASS)
-      row.addClass('empty-array-row')
+        .removeClass(Settings.NEW_ROW_CLASS)
-
+        .removeAttr("data-category")
-      row.html("<input type='hidden' class='form-control' name='" + table.attr("name").replace('[]', '')
+        .addClass('empty-array-row')
-        + "' data-changed='true' value=''>");
+        .html("<input type='hidden' class='form-control' name='" + table.attr("name").replace('[]', '') + "' " +
+              "data-changed='true' value=''>");
     }
   }
 
@@ -1311,9 +1356,18 @@ function deleteTableRow(delete_glyphicon) {
   badgeSidebarForDifferences($(table))
 }
 
-function moveTableRow(move_glyphicon, move_up) {
+function deleteTableCategory(categoryHeaderRow) {
-  var row = $(move_glyphicon).closest('tr')
+  var categoryName = categoryHeaderRow.data("category");
 
+  categoryHeaderRow
+    .closest("table")
+    .find("tr[data-category='" + categoryName + "']")
+    .each(function () {
+      deleteTableRow($(this));
+    });
+}
+
+function moveTableRow(row, move_up) {
   var table = $(row).closest('table')
   var isArray = table.data('setting-type') === 'array'
   if (!isArray) {