From 3234de9f9279323d2fdfa8718a58c45a14329f39 Mon Sep 17 00:00:00 2001 From: Zander Otavka Date: Wed, 27 Jul 2016 11:59:18 -0700 Subject: [PATCH] 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 ?", @@ -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 ?", @@ -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 += "" + setting.key.label + "" // Key } + var numVisibleColumns = 0; _.each(setting.columns, function(col) { + if (!col.hidden) numVisibleColumns++; html += "" + col.label + "" // Data }) if (!isLocked && !setting.read_only) { if (setting.can_order) { + numVisibleColumns++; html += ""; } - html += "" + numVisibleColumns++; + html += ""; } // 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 += "" + 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 += + "" + + "" + + categoryValue + + "" + + ((setting.can_add_new_categories) ? ( + "" + + "" + + "" + ) : ( + "" + )) + + ""; + } + } + + html += + "" if (setting.numbered === true) { html += "" + row_num + "" @@ -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 += "" - + ""; + html += + "" + + "" + + ""; } else if (isArray && col.type === "time" && col.editable) { - html += "" - + ""; + html += + "" + + "" + + ""; } else { // Use a hidden input so that the values are posted. - html += "" + colValue + ""; + html += + "" + + colValue + + "" + + ""; } }) @@ -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(""); + row + .removeClass(Settings.DATA_ROW_CLASS) + .removeClass(Settings.NEW_ROW_CLASS) + .removeAttr("data-category") + .addClass('empty-array-row') + .html(""); } } @@ -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) {