From 3234de9f9279323d2fdfa8718a58c45a14329f39 Mon Sep 17 00:00:00 2001
From: Zander Otavka <zotavka@gmail.com>
Date: Wed, 27 Jul 2016 11:59:18 -0700
Subject: [PATCH 1/5] Add category headers to groups

---
 .../resources/describe-settings.json          |  22 ++--
 domain-server/resources/web/css/style.css     |   4 +-
 .../resources/web/settings/js/settings.js     | 116 +++++++++++++-----
 3 files changed, 101 insertions(+), 41 deletions(-)

diff --git a/domain-server/resources/describe-settings.json b/domain-server/resources/describe-settings.json
index bb067877aa..c1fe975624 100644
--- a/domain-server/resources/describe-settings.json
+++ b/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",
-              "span": 2
+              "label": "Rank",
+              "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",
-              "span": 2
+              "label": "Rank",
+              "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
             },
             {
diff --git a/domain-server/resources/web/css/style.css b/domain-server/resources/web/css/style.css
index b019f59b4e..87764237f5 100644
--- a/domain-server/resources/web/css/style.css
+++ b/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;
 }
 
diff --git a/domain-server/resources/web/settings/js/settings.js b/domain-server/resources/web/settings/js/settings.js
index df4509a1ac..8e5ac25d9a 100644
--- a/domain-server/resources/web/settings/js/settings.js
+++ b/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 + "'>"
-                  + "<input type='checkbox' class='form-control table-checkbox' "
-                  + "name='" + colName + "'" + (colValue ? " checked" : "") + " /></td>";
+          html +=
+            "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>" +
+              "<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 + "'>"
-                  + "<input type='time' class='form-control table-time' "
-                  + "name='" + colName + "' value='" + (colValue || col.default || "00:00") + "' /></td>";
+          html +=
+            "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>" +
+              "<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 +
-            "' name='" + colName + "'>" + colValue + "<input type='hidden' name='" + colName +
-            "' value='" + colValue + "'/></td>";
+          html +=
+            "<td class='" + Settings.DATA_COL_CLASS + "' " + (col.hidden ? "style='display: none;'" : "") +
+                "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) {
-  var row = $(add_glyphicon).closest('tr')
-
+function addTableRow(row) {
   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) {
-  var row = $(delete_glyphicon).closest('tr')
-
+function deleteTableRow(row) {
   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.removeClass(Settings.DATA_ROW_CLASS).removeClass(Settings.NEW_ROW_CLASS)
-      row.addClass('empty-array-row')
-
-      row.html("<input type='hidden' class='form-control' name='" + table.attr("name").replace('[]', '')
-        + "' data-changed='true' value=''>");
+      row
+        .removeClass(Settings.DATA_ROW_CLASS)
+        .removeClass(Settings.NEW_ROW_CLASS)
+        .removeAttr("data-category")
+        .addClass('empty-array-row')
+        .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) {
-  var row = $(move_glyphicon).closest('tr')
+function deleteTableCategory(categoryHeaderRow) {
+  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) {

From 93f9f93b5a1f2a700ad6d3ab2e67034e3349ed99 Mon Sep 17 00:00:00 2001
From: Zander Otavka <zotavka@gmail.com>
Date: Wed, 27 Jul 2016 18:11:08 -0700
Subject: [PATCH 2/5] Enable adding groups

---
 .../resources/describe-settings.json          |   2 +
 domain-server/resources/web/css/style.css     |  13 ++
 .../resources/web/settings/js/settings.js     | 142 ++++++++++++++----
 3 files changed, 128 insertions(+), 29 deletions(-)

diff --git a/domain-server/resources/describe-settings.json b/domain-server/resources/describe-settings.json
index c1fe975624..5b60b1a82c 100644
--- a/domain-server/resources/describe-settings.json
+++ b/domain-server/resources/describe-settings.json
@@ -457,6 +457,8 @@
           "caption": "Permissions for Users in Groups",
           "categorize_by_key": "permissions_id",
           "can_add_new_categories": true,
+          "new_category_placeholder": "Add Group",
+          "new_category_needs_reload": true,
 
           "groups": [
             {
diff --git a/domain-server/resources/web/css/style.css b/domain-server/resources/web/css/style.css
index 87764237f5..809e9251c4 100644
--- a/domain-server/resources/web/css/style.css
+++ b/domain-server/resources/web/css/style.css
@@ -3,6 +3,10 @@ body {
   padding-bottom: 30px;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 .table-lead .lead-line {
   background-color: black;
 }
@@ -33,6 +37,15 @@ body {
     margin-right: auto;
 }
 
+.table .value-category {
+  font-weight: bold;
+}
+
+.table .value-category .message {
+  font-style: italic;
+  font-weight: normal;
+}
+
 .glyphicon-remove {
   font-size: 24px;
 }
diff --git a/domain-server/resources/web/settings/js/settings.js b/domain-server/resources/web/settings/js/settings.js
index 8e5ac25d9a..33afc72891 100644
--- a/domain-server/resources/web/settings/js/settings.js
+++ b/domain-server/resources/web/settings/js/settings.js
@@ -12,6 +12,8 @@ var Settings = {
   ADD_ROW_SPAN_CLASSES: 'glyphicon glyphicon-plus add-row',
   DEL_ROW_BUTTON_CLASS: 'del-row',
   DEL_ROW_SPAN_CLASSES: 'glyphicon glyphicon-remove del-row',
+  ADD_CATEGORY_BUTTON_CLASS: 'add-category',
+  ADD_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-plus add-category',
   DEL_CATEGORY_BUTTON_CLASS: 'del-category',
   DEL_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-remove del-category',
   MOVE_UP_BUTTON_CLASS: 'move-up',
@@ -174,6 +176,10 @@ $(document).ready(function(){
     deleteTableRow($(this).closest('tr'));
   });
 
+  $('#' + Settings.FORM_ID).on('click', '.' + Settings.ADD_CATEGORY_BUTTON_CLASS, function(){
+    addTableCategory($(this).closest('tr'));
+  });
+
   $('#' + Settings.FORM_ID).on('click', '.' + Settings.DEL_CATEGORY_BUTTON_CLASS, function(){
     deleteTableCategory($(this).closest('tr'));
   });
@@ -205,10 +211,11 @@ $(document).ready(function(){
           }
 
           if (sibling.hasClass(Settings.ADD_DEL_BUTTONS_CLASS)) {
-            sibling.find('.' + Settings.ADD_ROW_BUTTON_CLASS).click()
+            sibling.find('.' + Settings.ADD_ROW_BUTTON_CLASS).click();
+            sibling.find("." + Settings.ADD_CATEGORY_BUTTON_CLASS).click();
 
             // set focus to the first input in the new row
-            $target.closest('table').find('tr.inputs input:first').focus()
+            $target.closest('table').find('tr.inputs input:first').focus();
           }
         }
 
@@ -1013,21 +1020,8 @@ function makeTable(setting, keypath, setting_value, isLocked) {
         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 += makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, setting.can_add_new_categories, false);
         }
       }
 
@@ -1043,7 +1037,7 @@ function makeTable(setting, keypath, setting_value, isLocked) {
           html += "<td class='key'>" + rowIndexOrName + "</td>"
       }
 
-      var isNonDeletableRow = !setting.can_add_new_rows;
+      var isNonDeletableRow = !setting.can_add_new_rows && !setting.can_add_new_categories || setting.new_category_needs_reload;
 
       _.each(setting.columns, function(col) {
 
@@ -1104,19 +1098,47 @@ function makeTable(setting, keypath, setting_value, isLocked) {
   }
 
   // populate inputs in the table for new values
-  if (!isLocked && !setting.read_only && setting.can_add_new_rows) {
-     html += makeTableInputs(setting)
+  if (!isLocked && !setting.read_only) {
+    if (setting.can_add_new_categories) {
+      html += makeTableCategoryInput(setting, numVisibleColumns);
+    }
+    if (setting.can_add_new_rows || setting.can_add_new_categories) {
+      html += makeTableInputs(setting);
+    }
   }
   html += "</table>"
 
   return html;
 }
 
+function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, canRemove, needsReload) {
+  var html =
+    "<tr class='" + Settings.DATA_CATEGORY_CLASS + "' data-key='" + categoryKey + "' data-category='" + categoryValue + "'>" +
+      "<td colspan='" + (numVisibleColumns - 1) + "'>" +
+        "<span>" + categoryValue + "</span>" +
+        ((needsReload) ? (
+          "<span class='message'> - Reload to see contents.</span>"
+        ) : (
+          ""
+        )) +
+      "</td>" +
+      ((canRemove) ? (
+        "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES + "'>" +
+          "<a href='javascript:void(0);' class='" + Settings.DEL_CATEGORY_SPAN_CLASSES + "'></a>" +
+        "</td>"
+      ) : (
+        "<td></td>"
+      )) +
+    "</tr>";
+  return html;
+}
+
 function makeTableInputs(setting) {
-  var html = "<tr class='inputs'>"
+  var html = "<tr class='inputs'" + (setting.can_add_new_categories ? " hidden" : "") +
+                  (setting.categorize_by_key ? (" data-keep-field='" + setting.categorize_by_key + "'") : "") + ">";
 
   if (setting.numbered === true) {
-    html += "<td class='numbered'></td>"
+    html += "<td class='numbered'></td>";
   }
 
   if (setting.key) {
@@ -1142,12 +1164,28 @@ function makeTableInputs(setting) {
     html += "<td class='" + Settings.REORDER_BUTTONS_CLASSES + "'></td>"
   }
   html += "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES +
-    "'><a href='javascript:void(0);' class='glyphicon glyphicon-plus " + Settings.ADD_ROW_BUTTON_CLASS + "'></a></td>"
+    "'><a href='javascript:void(0);' class='" + Settings.ADD_ROW_SPAN_CLASSES + "'></a></td>"
   html += "</tr>"
 
   return html
 }
 
+function makeTableCategoryInput(setting, numVisibleColumns) {
+  var needsReload = setting.new_category_needs_reload;
+  var categoryKey = setting.categorize_by_key;
+  var placeholder = setting.new_category_placeholder ? setting.new_category_placeholder : "";
+  var html =
+    "<tr class='category-input inputs' data-needs-reload='" + needsReload + "' data-key='" + categoryKey + "'>" +
+      "<td class='" + Settings.DATA_CATEGORY_CLASS + "' colspan='" + (numVisibleColumns - 1) + "'>" +
+        "<input type='text' class='form-control' placeholder='" + placeholder + "'/>" +
+      "</td>" +
+      "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES + "'>" +
+        "<a href='javascript:void(0);' class='" + Settings.ADD_CATEGORY_SPAN_CLASSES + "'></a>" +
+      "</td>" +
+    "</tr>";
+  return html;
+}
+
 function badgeSidebarForDifferences(changedElement) {
   // figure out which group this input is in
   var panelParentID = changedElement.closest('.panel').attr('id');
@@ -1187,10 +1225,11 @@ function badgeSidebarForDifferences(changedElement) {
 }
 
 function addTableRow(row) {
-  var table = row.parents('table')
-  var isArray = table.data('setting-type') === 'array'
+  var table = row.parents('table');
+  var isArray = table.data('setting-type') === 'array';
+  var keepField = row.data("keep-field");
 
-  var columns = row.parent().children('.' + Settings.DATA_ROW_CLASS)
+  var columns = row.parent().children('.' + Settings.DATA_ROW_CLASS);
 
   if (!isArray) {
     // Check key spaces
@@ -1307,10 +1346,12 @@ function addTableRow(row) {
     } else {
       console.log("Unknown table element")
     }
-  })
+  });
 
-  input_clone.find('input').each(function(){
-    $(this).val($(this).attr('data-default'));
+  input_clone.children('td').each(function () {
+    if ($(this).attr("name") !== keepField) {
+      $(this).find("input").val($(this).attr('data-default'));
+    }
   });
 
   if (isArray) {
@@ -1322,7 +1363,7 @@ function addTableRow(row) {
 
   badgeSidebarForDifferences($(table))
 
-  row.parent().append(input_clone)
+  row.after(input_clone)
 }
 
 function deleteTableRow(row) {
@@ -1356,6 +1397,49 @@ function deleteTableRow(row) {
   badgeSidebarForDifferences($(table))
 }
 
+function addTableCategory($categoryInputRow) {
+  var $input = $categoryInputRow.find("input").first();
+  var $rowInput = $categoryInputRow.next(".inputs").clone();
+  if (!$rowInput) {
+    console.error("Error cloning inputs");
+  }
+
+  var needsReload = $categoryInputRow.data("needs-reload");
+  var categoryKey = $categoryInputRow.data("key");
+  var categoryValue = $input.prop("value");
+  var width = 0;
+  $categoryInputRow
+    .children("td")
+    .each(function () {
+      width += $(this).prop("colSpan") || 1;
+    });
+
+  $input
+    .prop("value", "")
+    .focus();
+
+  $rowInput.find("td[name='" + categoryKey + "'] > input").first()
+    .prop("value", categoryValue);
+  $rowInput
+    .attr("data-category", categoryValue)
+    .addClass(Settings.NEW_ROW_CLASS);
+
+  // TODO: create inputs on initial template load
+
+  var $newCategoryRow = $(makeTableCategoryHeader(categoryKey, categoryValue, width, true, needsReload));
+  $newCategoryRow.addClass(Settings.NEW_ROW_CLASS);
+
+  $categoryInputRow
+    .before($newCategoryRow)
+    .before($rowInput);
+
+  if (!needsReload) {
+    $rowInput.removeAttr("hidden");
+  } else {
+    addTableRow($rowInput);
+  }
+}
+
 function deleteTableCategory(categoryHeaderRow) {
   var categoryName = categoryHeaderRow.data("category");
 

From aa909a13663d27351d001c20bbd33b06bbe2dc12 Mon Sep 17 00:00:00 2001
From: Zander Otavka <zotavka@gmail.com>
Date: Thu, 28 Jul 2016 13:47:21 -0700
Subject: [PATCH 3/5] Polish category/row addition and deletion

---
 .../resources/describe-settings.json          |  11 +-
 domain-server/resources/web/css/style.css     |   7 +-
 .../resources/web/settings/js/settings.js     | 140 ++++++++++--------
 3 files changed, 93 insertions(+), 65 deletions(-)

diff --git a/domain-server/resources/describe-settings.json b/domain-server/resources/describe-settings.json
index 5b60b1a82c..f4ceb0f432 100644
--- a/domain-server/resources/describe-settings.json
+++ b/domain-server/resources/describe-settings.json
@@ -457,8 +457,9 @@
           "caption": "Permissions for Users in Groups",
           "categorize_by_key": "permissions_id",
           "can_add_new_categories": true,
+          "can_add_new_rows": false,
           "new_category_placeholder": "Add Group",
-          "new_category_needs_reload": true,
+          "new_category_message": "Reload to see ranks",
 
           "groups": [
             {
@@ -548,8 +549,12 @@
         {
           "name": "group_forbiddens",
           "type": "table",
-          "caption": "Permissions denied to Users in Groups",
-          "can_add_new_rows": true,
+          "caption": "Permissions Denied to Users in Groups",
+          "categorize_by_key": "permissions_id",
+          "can_add_new_categories": true,
+          "can_add_new_rows": false,
+          "new_category_placeholder": "Add Blacklist Group",
+          "new_category_message": "Reload to see ranks",
 
           "groups": [
             {
diff --git a/domain-server/resources/web/css/style.css b/domain-server/resources/web/css/style.css
index 809e9251c4..0a3dc3dab5 100644
--- a/domain-server/resources/web/css/style.css
+++ b/domain-server/resources/web/css/style.css
@@ -41,11 +41,16 @@ body {
   font-weight: bold;
 }
 
-.table .value-category .message {
+.table .value-category [message]::after {
+  content: attr(message);
   font-style: italic;
   font-weight: normal;
 }
 
+.table .value-category.inputs {
+  font-weight: normal;
+}
+
 .glyphicon-remove {
   font-size: 24px;
 }
diff --git a/domain-server/resources/web/settings/js/settings.js b/domain-server/resources/web/settings/js/settings.js
index 33afc72891..4b258fa9fb 100644
--- a/domain-server/resources/web/settings/js/settings.js
+++ b/domain-server/resources/web/settings/js/settings.js
@@ -42,7 +42,7 @@ var viewHelpers = {
     form_group = "<div class='form-group " + (isAdvanced ? Settings.ADVANCED_CLASS : "") + "' data-keypath='" + keypath + "'>";
     setting_value = _(values).valueForKeyPath(keypath);
 
-    if (typeof setting_value == 'undefined' || setting_value === null) {
+    if (_.isUndefined(setting_value) || _.isNull(setting_value)) {
       if (_.has(setting, 'default')) {
         setting_value = setting.default;
       } else {
@@ -56,11 +56,11 @@ var viewHelpers = {
     }
 
     function common_attrs(extra_classes) {
-      extra_classes = (typeof extra_classes !== 'undefined' ? extra_classes : "");
+      extra_classes = (!_.isUndefined(extra_classes) ? extra_classes : "");
       return " class='" + (setting.type !== 'checkbox' ? 'form-control' : '')
         + " " + Settings.TRIGGER_CHANGE_CLASS + " " + extra_classes + "' data-short-name='"
         + setting.name + "' name='" + keypath + "' "
-        + "id='" + (typeof setting.html_id !== 'undefined' ? setting.html_id : keypath) + "'";
+        + "id='" + (!_.isUndefined(setting.html_id) ? setting.html_id : keypath) + "'";
     }
 
     if (setting.type === 'checkbox') {
@@ -937,6 +937,7 @@ $('body').on('click', '.save-button', function(e){
 });
 
 function makeTable(setting, keypath, setting_value, isLocked) {
+  // TODO: enforce category sorting
   var isArray = !_.has(setting, 'key');
 
   if (!isArray && setting.can_order) {
@@ -952,9 +953,10 @@ function makeTable(setting, keypath, setting_value, isLocked) {
   var nonDeletableRowKey = setting["non-deletable-row-key"];
   var nonDeletableRowValues = setting["non-deletable-row-values"];
 
-  html += "<table class='table table-bordered " + (isLocked ? "locked-table" : "") + "' data-short-name='" + setting.name
-    + "' name='" + keypath + "' id='" + (typeof setting.html_id !== 'undefined' ? setting.html_id : keypath)
-    + "' data-setting-type='" + (isArray ? 'array' : 'hash') + "'>";
+  html += "<table class='table table-bordered " + (isLocked ? "locked-table" : "") + "' " +
+                 "data-short-name='" + setting.name + "' name='" + keypath + "' " +
+                 "id='" + (!_.isUndefined(setting.html_id) ? setting.html_id : keypath) + "' " +
+                 "data-setting-type='" + (isArray ? 'array' : 'hash') + "'>";
 
   if (setting.caption) {
     html += "<caption>" + setting.caption + "</caption>"
@@ -1012,22 +1014,20 @@ function makeTable(setting, keypath, setting_value, isLocked) {
 
     _.each(setting_value, function(row, rowIndexOrName) {
       var categoryKey = setting.categorize_by_key;
-      var isCategorized = !!categoryKey;
-      var categoryData = "";
-      if (isCategorized && isArray) {
-        var predicate = {};
-        var categoryValue = row[categoryKey];
-        predicate[categoryKey] = categoryValue;
+      var isCategorized = !!categoryKey && isArray;
+      var categoryPair = {};
+      var categoryValue = "";
+      if (isCategorized) {
         categoryValue = rowIsObject ? row[categoryKey] : row;
-        categoryData = "data-category='" + categoryValue + "'";
-        if (_.findIndex(setting_value, predicate) === rowIndexOrName) {
-          html += makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, setting.can_add_new_categories, false);
+        categoryPair[categoryKey] = categoryValue;
+        if (_.findIndex(setting_value, categoryPair) === rowIndexOrName) {
+          html += makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, setting.can_add_new_categories, "");
         }
       }
 
-      html +=
-        "<tr class='" + Settings.DATA_ROW_CLASS + "' " + categoryData + " " +
-             (isArray ? "" : "name='" + keypath + "." + rowIndexOrName + "'") + ">"
+      html += "<tr class='" + Settings.DATA_ROW_CLASS + "' " +
+                   (isCategorized ? ("data-category='" + categoryValue + "'") : "") + " " +
+                   (isArray ? "" : "name='" + keypath + "." + rowIndexOrName + "'") + ">";
 
       if (setting.numbered === true) {
         html += "<td class='numbered'>" + row_num + "</td>"
@@ -1037,7 +1037,7 @@ function makeTable(setting, keypath, setting_value, isLocked) {
           html += "<td class='key'>" + rowIndexOrName + "</td>"
       }
 
-      var isNonDeletableRow = !setting.can_add_new_rows && !setting.can_add_new_categories || setting.new_category_needs_reload;
+      var isNonDeletableRow = !setting.can_add_new_rows;
 
       _.each(setting.columns, function(col) {
 
@@ -1075,7 +1075,7 @@ function makeTable(setting, keypath, setting_value, isLocked) {
             "</td>";
         }
 
-      })
+      });
 
       if (!isLocked && !setting.read_only) {
         if (setting.can_order) {
@@ -1093,6 +1093,10 @@ function makeTable(setting, keypath, setting_value, isLocked) {
 
       html += "</tr>"
 
+      if (isCategorized && setting.can_add_new_rows && _.findLastIndex(setting_value, categoryPair) === rowIndexOrName) {
+        html += makeTableInputs(setting, categoryPair, categoryValue);
+      }
+
       row_num++
     });
   }
@@ -1103,7 +1107,7 @@ function makeTable(setting, keypath, setting_value, isLocked) {
       html += makeTableCategoryInput(setting, numVisibleColumns);
     }
     if (setting.can_add_new_rows || setting.can_add_new_categories) {
-      html += makeTableInputs(setting);
+      html += makeTableInputs(setting, {}, "");
     }
   }
   html += "</table>"
@@ -1111,16 +1115,11 @@ function makeTable(setting, keypath, setting_value, isLocked) {
   return html;
 }
 
-function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, canRemove, needsReload) {
+function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, canRemove, message) {
   var html =
     "<tr class='" + Settings.DATA_CATEGORY_CLASS + "' data-key='" + categoryKey + "' data-category='" + categoryValue + "'>" +
       "<td colspan='" + (numVisibleColumns - 1) + "'>" +
-        "<span>" + categoryValue + "</span>" +
-        ((needsReload) ? (
-          "<span class='message'> - Reload to see contents.</span>"
-        ) : (
-          ""
-        )) +
+        "<span message='" + message + "'>" + categoryValue + "</span>" +
       "</td>" +
       ((canRemove) ? (
         "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES + "'>" +
@@ -1133,9 +1132,10 @@ function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns,
   return html;
 }
 
-function makeTableInputs(setting) {
-  var html = "<tr class='inputs'" + (setting.can_add_new_categories ? " hidden" : "") +
-                  (setting.categorize_by_key ? (" data-keep-field='" + setting.categorize_by_key + "'") : "") + ">";
+function makeTableInputs(setting, initialValues, categoryValue) {
+  var html = "<tr class='inputs'" + (setting.can_add_new_categories && !categoryValue ? " hidden" : "") + " " +
+                  (categoryValue ? ("data-category='" + categoryValue + "'") : "") + " " +
+                  (setting.categorize_by_key ? ("data-keep-field='" + setting.categorize_by_key + "'") : "") + ">";
 
   if (setting.numbered === true) {
     html += "<td class='numbered'></td>";
@@ -1148,15 +1148,21 @@ function makeTableInputs(setting) {
   }
 
   _.each(setting.columns, function(col) {
+    var defaultValue = _.has(initialValues, col.name) ? initialValues[col.name] : col.default;
     if (col.type === "checkbox") {
-      html += "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>"
-              + "<input type='checkbox' class='form-control table-checkbox' "
-              + "name='" + col.name + "'" + (col.default ? " checked" : "") + "/></td>";
+      html +=
+        "<td class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>" +
+          "<input type='checkbox' class='form-control table-checkbox' " +
+                 "name='" + col.name + "'" + (defaultValue ? " checked" : "") + "/>" +
+        "</td>";
     } else {
-      html += "<td " + (col.hidden ? "style='display: none;'" : "") + "class='" + Settings.DATA_COL_CLASS + "'name='" + col.name + "'>\
-               <input type='text' class='form-control' placeholder='" + (col.placeholder ? col.placeholder : "") + "'\
-               value='" + (col.default ? col.default : "") + "' data-default='" + (col.default ? col.default : "") + "'" + (col.readonly ? " readonly" : "") + ">\
-               </td>"
+      html +=
+        "<td " + (col.hidden ? "style='display: none;'" : "") + " class='" + Settings.DATA_COL_CLASS + "' " +
+            "name='" + col.name + "'>" +
+          "<input type='text' class='form-control' placeholder='" + (col.placeholder ? col.placeholder : "") + "' " +
+                 "value='" + (defaultValue || "") + "' data-default='" + (defaultValue || "") + "'" +
+                 (col.readonly ? " readonly" : "") + ">" +
+        "</td>";
     }
   })
 
@@ -1171,12 +1177,14 @@ function makeTableInputs(setting) {
 }
 
 function makeTableCategoryInput(setting, numVisibleColumns) {
-  var needsReload = setting.new_category_needs_reload;
+  var canAddRows = setting.can_add_new_rows;
   var categoryKey = setting.categorize_by_key;
-  var placeholder = setting.new_category_placeholder ? setting.new_category_placeholder : "";
+  var placeholder = setting.new_category_placeholder || "";
+  var message = setting.new_category_message || "";
   var html =
-    "<tr class='category-input inputs' data-needs-reload='" + needsReload + "' data-key='" + categoryKey + "'>" +
-      "<td class='" + Settings.DATA_CATEGORY_CLASS + "' colspan='" + (numVisibleColumns - 1) + "'>" +
+    "<tr class='" + Settings.DATA_CATEGORY_CLASS + " inputs' data-can-add-rows='" + canAddRows + "' " +
+        "data-key='" + categoryKey + "' data-message='" + message + "'>" +
+      "<td colspan='" + (numVisibleColumns - 1) + "'>" +
         "<input type='text' class='form-control' placeholder='" + placeholder + "'/>" +
       "</td>" +
       "<td class='" + Settings.ADD_DEL_BUTTONS_CLASSES + "'>" +
@@ -1366,35 +1374,40 @@ function addTableRow(row) {
   row.after(input_clone)
 }
 
-function deleteTableRow(row) {
-  var table = $(row).closest('table')
-  var isArray = table.data('setting-type') === 'array'
+function deleteTableRow($row) {
+  var $table = $row.closest('table');
+  var categoryName = $row.data("category");
+  var isArray = $table.data('setting-type') === 'array';
 
-  row.empty();
+  $row.empty();
 
   if (!isArray) {
-    row.html("<input type='hidden' class='form-control' name='"
-      + row.attr('name') + "' data-changed='true' value=''>");
+    $row.html("<input type='hidden' class='form-control' name='" + $row.attr('name') + "' data-changed='true' value=''>");
   } else {
-    if (table.find('.' + Settings.DATA_ROW_CLASS).length > 1) {
-      updateDataChangedForSiblingRows(row)
+    if ($table.find('.' + Settings.DATA_ROW_CLASS + "[data-category='" + categoryName + "']").length <= 1) {
+      // This is the last row of the category, so delete the header
+      $table.find('.' + Settings.DATA_CATEGORY_CLASS + "[data-category='" + categoryName + "']").remove();
+    }
+
+    if ($table.find('.' + Settings.DATA_ROW_CLASS).length > 1) {
+      updateDataChangedForSiblingRows($row);
 
       // this isn't the last row - we can just remove it
-      row.remove()
+      $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)
         .removeAttr("data-category")
         .addClass('empty-array-row')
-        .html("<input type='hidden' class='form-control' name='" + table.attr("name").replace('[]', '') + "' " +
+        .html("<input type='hidden' class='form-control' name='" + $table.attr("name").replace('[]', '') + "' " +
               "data-changed='true' value=''>");
     }
   }
 
   // we need to fire a change event on one of the remaining inputs so that the sidebar badge is updated
-  badgeSidebarForDifferences($(table))
+  badgeSidebarForDifferences($table);
 }
 
 function addTableCategory($categoryInputRow) {
@@ -1404,7 +1417,8 @@ function addTableCategory($categoryInputRow) {
     console.error("Error cloning inputs");
   }
 
-  var needsReload = $categoryInputRow.data("needs-reload");
+  var canAddRows = $categoryInputRow.data("can-add-rows");
+  var message = $categoryInputRow.data("message");
   var categoryKey = $categoryInputRow.data("key");
   var categoryValue = $input.prop("value");
   var width = 0;
@@ -1426,28 +1440,32 @@ function addTableCategory($categoryInputRow) {
 
   // TODO: create inputs on initial template load
 
-  var $newCategoryRow = $(makeTableCategoryHeader(categoryKey, categoryValue, width, true, needsReload));
+  var $newCategoryRow = $(makeTableCategoryHeader(categoryKey, categoryValue, width, true, " - " + message));
   $newCategoryRow.addClass(Settings.NEW_ROW_CLASS);
 
   $categoryInputRow
     .before($newCategoryRow)
     .before($rowInput);
 
-  if (!needsReload) {
+  if (canAddRows) {
     $rowInput.removeAttr("hidden");
   } else {
     addTableRow($rowInput);
   }
 }
 
-function deleteTableCategory(categoryHeaderRow) {
-  var categoryName = categoryHeaderRow.data("category");
+function deleteTableCategory($categoryHeaderRow) {
+  var categoryName = $categoryHeaderRow.data("category");
 
-  categoryHeaderRow
+  $categoryHeaderRow
     .closest("table")
     .find("tr[data-category='" + categoryName + "']")
     .each(function () {
-      deleteTableRow($(this));
+      if ($(this).hasClass(Settings.DATA_ROW_CLASS)) {
+        deleteTableRow($(this));
+      } else {
+        $(this).remove();
+      }
     });
 }
 

From 987a8c802f06e0443b1a0e0058e1910d10652803 Mon Sep 17 00:00:00 2001
From: Zander Otavka <zotavka@gmail.com>
Date: Thu, 28 Jul 2016 15:41:47 -0700
Subject: [PATCH 4/5] Add basic input validation

---
 .../resources/web/settings/js/settings.js          | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/domain-server/resources/web/settings/js/settings.js b/domain-server/resources/web/settings/js/settings.js
index 4b258fa9fb..e59405981f 100644
--- a/domain-server/resources/web/settings/js/settings.js
+++ b/domain-server/resources/web/settings/js/settings.js
@@ -1412,6 +1412,17 @@ function deleteTableRow($row) {
 
 function addTableCategory($categoryInputRow) {
   var $input = $categoryInputRow.find("input").first();
+  var categoryValue = $input.prop("value");
+  if (!categoryValue || $categoryInputRow.closest("table").find("tr[data-category='" + categoryValue + "']").length !== 0) {
+    $categoryInputRow.addClass("has-warning");
+
+    setTimeout(function () {
+      $categoryInputRow.removeClass("has-warning");
+    }, 1000);
+
+    return;
+  }
+
   var $rowInput = $categoryInputRow.next(".inputs").clone();
   if (!$rowInput) {
     console.error("Error cloning inputs");
@@ -1420,7 +1431,6 @@ function addTableCategory($categoryInputRow) {
   var canAddRows = $categoryInputRow.data("can-add-rows");
   var message = $categoryInputRow.data("message");
   var categoryKey = $categoryInputRow.data("key");
-  var categoryValue = $input.prop("value");
   var width = 0;
   $categoryInputRow
     .children("td")
@@ -1438,8 +1448,6 @@ function addTableCategory($categoryInputRow) {
     .attr("data-category", categoryValue)
     .addClass(Settings.NEW_ROW_CLASS);
 
-  // TODO: create inputs on initial template load
-
   var $newCategoryRow = $(makeTableCategoryHeader(categoryKey, categoryValue, width, true, " - " + message));
   $newCategoryRow.addClass(Settings.NEW_ROW_CLASS);
 

From bcff561eb89d124e0b5bc9a0a354a325f300c8ce Mon Sep 17 00:00:00 2001
From: Zander Otavka <zotavka@gmail.com>
Date: Thu, 28 Jul 2016 17:14:48 -0700
Subject: [PATCH 5/5] Add category collapsing and expanding

---
 domain-server/resources/web/css/style.css     | 17 ++++++--
 .../resources/web/settings/js/settings.js     | 40 ++++++++++++++++---
 2 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/domain-server/resources/web/css/style.css b/domain-server/resources/web/css/style.css
index 0a3dc3dab5..b66b7df258 100644
--- a/domain-server/resources/web/css/style.css
+++ b/domain-server/resources/web/css/style.css
@@ -37,8 +37,9 @@ body {
     margin-right: auto;
 }
 
-.table .value-category {
+.value-category:not(.inputs) {
   font-weight: bold;
+  background: #f5f5f5;
 }
 
 .table .value-category [message]::after {
@@ -47,8 +48,18 @@ body {
   font-weight: normal;
 }
 
-.table .value-category.inputs {
-  font-weight: normal;
+.table .value-row.contracted,
+.table .inputs.contracted {
+  display: none;
+}
+
+.toggle-category {
+  cursor: pointer;
+}
+
+.toggle-category-icon {
+  padding: 4px;
+  margin-right: 8px;
 }
 
 .glyphicon-remove {
diff --git a/domain-server/resources/web/settings/js/settings.js b/domain-server/resources/web/settings/js/settings.js
index e59405981f..06c6520c26 100644
--- a/domain-server/resources/web/settings/js/settings.js
+++ b/domain-server/resources/web/settings/js/settings.js
@@ -14,6 +14,11 @@ var Settings = {
   DEL_ROW_SPAN_CLASSES: 'glyphicon glyphicon-remove del-row',
   ADD_CATEGORY_BUTTON_CLASS: 'add-category',
   ADD_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-plus add-category',
+  TOGGLE_CATEGORY_COLUMN_CLASS: 'toggle-category',
+  TOGGLE_CATEGORY_SPAN_CLASS: 'toggle-category-icon',
+  TOGGLE_CATEGORY_SPAN_CLASSES: 'glyphicon toggle-category-icon',
+  TOGGLE_CATEGORY_EXPANDED_CLASS: 'glyphicon-triangle-bottom',
+  TOGGLE_CATEGORY_CONTRACTED_CLASS: 'glyphicon-triangle-right',
   DEL_CATEGORY_BUTTON_CLASS: 'del-category',
   DEL_CATEGORY_SPAN_CLASSES: 'glyphicon glyphicon-remove del-category',
   MOVE_UP_BUTTON_CLASS: 'move-up',
@@ -184,6 +189,10 @@ $(document).ready(function(){
     deleteTableCategory($(this).closest('tr'));
   });
 
+  $('#' + Settings.FORM_ID).on('click', '.' + Settings.TOGGLE_CATEGORY_COLUMN_CLASS, function(){
+    toggleTableCategory($(this).closest('tr'));
+  });
+
   $('#' + Settings.FORM_ID).on('click', '.' + Settings.MOVE_UP_BUTTON_CLASS, function(){
     moveTableRow($(this).closest('tr'), true);
   });
@@ -937,9 +946,10 @@ $('body').on('click', '.save-button', function(e){
 });
 
 function makeTable(setting, keypath, setting_value, isLocked) {
-  // TODO: enforce category sorting
   var isArray = !_.has(setting, 'key');
-
+  var categoryKey = setting.categorize_by_key;
+  var isCategorized = !!categoryKey && isArray;
+ 
   if (!isArray && setting.can_order) {
     setting.can_order = false;
   }
@@ -1013,8 +1023,6 @@ function makeTable(setting, keypath, setting_value, isLocked) {
     var rowIsObject = setting.columns.length > 1;
 
     _.each(setting_value, function(row, rowIndexOrName) {
-      var categoryKey = setting.categorize_by_key;
-      var isCategorized = !!categoryKey && isArray;
       var categoryPair = {};
       var categoryValue = "";
       if (isCategorized) {
@@ -1118,7 +1126,8 @@ function makeTable(setting, keypath, setting_value, isLocked) {
 function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, canRemove, message) {
   var html =
     "<tr class='" + Settings.DATA_CATEGORY_CLASS + "' data-key='" + categoryKey + "' data-category='" + categoryValue + "'>" +
-      "<td colspan='" + (numVisibleColumns - 1) + "'>" +
+      "<td colspan='" + (numVisibleColumns - 1) + "' class='" + Settings.TOGGLE_CATEGORY_COLUMN_CLASS + "'>" +
+        "<span class='" + Settings.TOGGLE_CATEGORY_SPAN_CLASSES + " " + Settings.TOGGLE_CATEGORY_EXPANDED_CLASS + "'></span>" +
         "<span message='" + message + "'>" + categoryValue + "</span>" +
       "</td>" +
       ((canRemove) ? (
@@ -1418,7 +1427,7 @@ function addTableCategory($categoryInputRow) {
 
     setTimeout(function () {
       $categoryInputRow.removeClass("has-warning");
-    }, 1000);
+    }, 400);
 
     return;
   }
@@ -1477,6 +1486,25 @@ function deleteTableCategory($categoryHeaderRow) {
     });
 }
 
+function toggleTableCategory($categoryHeaderRow) {
+  var $icon = $categoryHeaderRow.find("." + Settings.TOGGLE_CATEGORY_SPAN_CLASS).first();
+  var categoryName = $categoryHeaderRow.data("category");
+  var wasExpanded = $icon.hasClass(Settings.TOGGLE_CATEGORY_EXPANDED_CLASS);
+  if (wasExpanded) {
+    $icon
+      .addClass(Settings.TOGGLE_CATEGORY_CONTRACTED_CLASS)
+      .removeClass(Settings.TOGGLE_CATEGORY_EXPANDED_CLASS);
+  } else {
+    $icon
+      .addClass(Settings.TOGGLE_CATEGORY_EXPANDED_CLASS)
+      .removeClass(Settings.TOGGLE_CATEGORY_CONTRACTED_CLASS);
+  }
+  $categoryHeaderRow
+    .closest("table")
+    .find("tr[data-category='" + categoryName + "']")
+    .toggleClass("contracted", wasExpanded);
+}
+
 function moveTableRow(row, move_up) {
   var table = $(row).closest('table')
   var isArray = table.data('setting-type') === 'array'