From 93f9f93b5a1f2a700ad6d3ab2e67034e3349ed99 Mon Sep 17 00:00:00 2001 From: Zander Otavka Date: Wed, 27 Jul 2016 18:11:08 -0700 Subject: [PATCH] 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 += - "" + - "" + - categoryValue + - "" + - ((setting.can_add_new_categories) ? ( - "" + - "" + - "" - ) : ( - "" - )) + - ""; + html += makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, setting.can_add_new_categories, false); } } @@ -1043,7 +1037,7 @@ function makeTable(setting, keypath, setting_value, isLocked) { html += "" + rowIndexOrName + "" } - 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 += "" return html; } +function makeTableCategoryHeader(categoryKey, categoryValue, numVisibleColumns, canRemove, needsReload) { + var html = + "" + + "" + + "" + categoryValue + "" + + ((needsReload) ? ( + " - Reload to see contents." + ) : ( + "" + )) + + "" + + ((canRemove) ? ( + "" + + "" + + "" + ) : ( + "" + )) + + ""; + return html; +} + function makeTableInputs(setting) { - var html = "" + var html = ""; if (setting.numbered === true) { - html += "" + html += ""; } if (setting.key) { @@ -1142,12 +1164,28 @@ function makeTableInputs(setting) { html += "" } html += "" + "'>" html += "" 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 = + "" + + "" + + "" + + "" + + "" + + "" + + "" + + ""; + 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");