mirror of
https://salsa.debian.org/freeipa-team/freeipa.git
synced 2025-02-25 18:55:28 -06:00
Moved entity contents outside navigation.
Previously the entities and navigation are entangled inside a common DOM structure which limits code reuse. Now they have been moved into separate structures.
This commit is contained in:
Endi S. Dewata
parent
5eb9f088f2
commit
dd89c28654
@ -799,25 +799,6 @@ IPA.association_facet = function (spec) {
|
||||
return pkey != that.pkey;
|
||||
};
|
||||
|
||||
that.create_action_panel = function(container) {
|
||||
|
||||
that.facet_create_action_panel(container);
|
||||
|
||||
var buttons = $('.action-controls', container);
|
||||
|
||||
$('<input/>', {
|
||||
'type': 'button',
|
||||
'name': 'remove',
|
||||
'value': IPA.messages.buttons.remove
|
||||
}).appendTo(buttons);
|
||||
|
||||
$('<input/>', {
|
||||
'type': 'button',
|
||||
'name': 'add',
|
||||
'value': IPA.messages.buttons.enroll
|
||||
}).appendTo(buttons);
|
||||
};
|
||||
|
||||
that.create_content = function(container) {
|
||||
|
||||
that.pkey = $.bbq.getState(that.entity_name + '-pkey', true) || '';
|
||||
|
||||
@ -264,13 +264,9 @@ IPA.details_facet = function(spec) {
|
||||
|
||||
var that = IPA.facet(spec);
|
||||
|
||||
that.label = ( IPA.messages && IPA.messages.facets && IPA.messages.facets.details) || spec.label;
|
||||
that.is_dirty = spec.is_dirty || is_dirty;
|
||||
that.create_content = spec.create_content || create_content;
|
||||
that.setup = spec.setup || setup;
|
||||
that.load = spec.load || load;
|
||||
that.label = (IPA.messages && IPA.messages.facets && IPA.messages.facets.details) || spec.label;
|
||||
|
||||
that.update = spec.update || IPA.details_update;
|
||||
that.reset = spec.reset || reset;
|
||||
that.refresh = spec.refresh || IPA.details_refresh;
|
||||
|
||||
that.sections = [];
|
||||
@ -323,24 +319,7 @@ IPA.details_facet = function(spec) {
|
||||
}
|
||||
};
|
||||
|
||||
that.create_action_panel = function(container) {
|
||||
|
||||
that.facet_create_action_panel(container);
|
||||
|
||||
var buttons = $('.action-controls', container);
|
||||
|
||||
$('<input/>', {
|
||||
'type': 'text',
|
||||
'name': 'reset'
|
||||
}).appendTo(buttons);
|
||||
|
||||
$('<input/>', {
|
||||
'type': 'text',
|
||||
'name': 'update'
|
||||
}).appendTo(buttons);
|
||||
};
|
||||
|
||||
function create_content(container) {
|
||||
that.create_content = function(container) {
|
||||
|
||||
var label = IPA.metadata.objects[that.entity_name].label;
|
||||
|
||||
@ -399,9 +378,9 @@ IPA.details_facet = function(spec) {
|
||||
|
||||
details.append('<hr/>');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function setup(container) {
|
||||
that.setup = function(container) {
|
||||
|
||||
that.facet_setup(container);
|
||||
|
||||
@ -468,7 +447,7 @@ IPA.details_facet = function(spec) {
|
||||
|
||||
section.setup(div);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function toggle(section, visible) {
|
||||
var header = $('h2[name='+section.name+']', that.container);
|
||||
@ -491,7 +470,7 @@ IPA.details_facet = function(spec) {
|
||||
that.new_key = new_key;
|
||||
|
||||
|
||||
function is_dirty() {
|
||||
that.is_dirty = function() {
|
||||
|
||||
var i;
|
||||
for ( i =0; i < that.sections.length; i +=1 ){
|
||||
@ -501,9 +480,9 @@ IPA.details_facet = function(spec) {
|
||||
}
|
||||
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
function load(record) {
|
||||
that.load = function (record) {
|
||||
that.record = record;
|
||||
for (var i=0; i<that.sections.length; i++) {
|
||||
var section = that.sections[i];
|
||||
@ -512,15 +491,15 @@ IPA.details_facet = function(spec) {
|
||||
if (that.pkey){
|
||||
that.entity_header.set_pkey(that.pkey);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function reset() {
|
||||
that.reset = function() {
|
||||
|
||||
for (var i=0; i<that.sections.length; i++) {
|
||||
var section = that.sections[i];
|
||||
section.reset();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
that.details_facet_init = that.init;
|
||||
that.details_facet_create_content = that.create_content;
|
||||
|
||||
@ -304,25 +304,6 @@ IPA.records_facet = function (spec){
|
||||
return pkey != that.pkey || record != that.record;
|
||||
};
|
||||
|
||||
that.create_action_panel = function(container) {
|
||||
|
||||
that.facet_create_action_panel(container);
|
||||
|
||||
var buttons = $('.action-controls', container);
|
||||
|
||||
$('<input/>', {
|
||||
'type': 'button',
|
||||
'name': 'remove',
|
||||
'value': IPA.messages.buttons.remove
|
||||
}).appendTo(buttons);
|
||||
|
||||
$('<input/>', {
|
||||
'type': 'button',
|
||||
'name': 'add',
|
||||
'value': IPA.messages.buttons.add
|
||||
}).appendTo(buttons);
|
||||
};
|
||||
|
||||
function create_content(container) {
|
||||
|
||||
$('<h1/>',{
|
||||
@ -537,7 +518,7 @@ IPA.records_facet = function (spec){
|
||||
|
||||
//TODO this is cut and pasted from search, we need to unify
|
||||
function display(obj_name, data){
|
||||
var selector = '.entity-container[title=' + obj_name + ']';
|
||||
var selector = '.entity-container[name=' + obj_name + ']';
|
||||
var thead = $(selector + ' thead');
|
||||
var tbody = $(selector + ' tbody');
|
||||
var tfoot = $(selector + ' tfoot');
|
||||
|
||||
@ -282,8 +282,7 @@ IPA.current_facet = function (entity){
|
||||
return facet_name;
|
||||
};
|
||||
|
||||
|
||||
IPA.entity_setup = function (container) {
|
||||
IPA.entity_setup = function(container) {
|
||||
|
||||
var entity = this;
|
||||
|
||||
@ -303,7 +302,6 @@ IPA.entity_setup = function (container) {
|
||||
IPA.entity_name = entity.name;
|
||||
}
|
||||
|
||||
container.attr('title', entity.name);
|
||||
if (!entity.header){
|
||||
entity.header = IPA.entity_header({entity:entity,container:container});
|
||||
}
|
||||
@ -316,7 +314,6 @@ IPA.entity_setup = function (container) {
|
||||
facet.refresh();
|
||||
};
|
||||
|
||||
|
||||
IPA.nested_tab_labels = {};
|
||||
|
||||
IPA.get_nested_tab_label = function(entity_name){
|
||||
@ -538,10 +535,7 @@ IPA.entity_header = function(spec){
|
||||
|
||||
function entity_container() {
|
||||
that.entity_container =
|
||||
$("<div/>",{
|
||||
"class":'entity-container',
|
||||
id: 'entity-container-' + entity.name
|
||||
}).
|
||||
$('<div/>').
|
||||
append(facet_tabs()).
|
||||
append(content());
|
||||
return that.entity_container;
|
||||
|
||||
@ -59,6 +59,7 @@
|
||||
</span>
|
||||
</div>
|
||||
<div id="navigation" class="tabs"></div>
|
||||
<div id="content"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
|
||||
@ -30,6 +30,7 @@ body{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
width: 960px;
|
||||
background: url("centered-bg.png") no-repeat scroll 0 12.2em transparent;
|
||||
}
|
||||
|
||||
.ui-widget {
|
||||
@ -117,13 +118,15 @@ div.header span.header-loggedinas {
|
||||
|
||||
/* ---- Navigation ---- */
|
||||
div.tabs {
|
||||
overflow: auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 40em;
|
||||
background: url("centered-bg.png") no-repeat scroll 0 8.4em transparent;
|
||||
min-height: 4em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
#content {
|
||||
min-height: 35em;
|
||||
}
|
||||
|
||||
|
||||
ul#viewtype {
|
||||
@ -370,7 +373,7 @@ span.attrhint {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.ui-widget-content .ui-icon {
|
||||
.ui-icon {
|
||||
//background-image: url("ui-icons_222222_256x240.png");
|
||||
background-color: #e2e2e2;
|
||||
}
|
||||
@ -383,7 +386,7 @@ span.attrhint {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ui-widget-content a {
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: #1d85d5;
|
||||
font-weight: normal;
|
||||
@ -421,7 +424,7 @@ span.attrhint {
|
||||
margin-right: .1em;
|
||||
}
|
||||
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
|
||||
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, #content .ui-state-default {
|
||||
-moz-border-radius: .3em;
|
||||
-webkit-border-radius: .3em;
|
||||
background: -moz-linear-gradient(top, #959595, #5e5e5e);
|
||||
@ -509,6 +512,11 @@ span.ui-icon-search {
|
||||
background-image: url("Subnav-background.png");
|
||||
}
|
||||
|
||||
.tabs3 .ui-tabs-nav {
|
||||
padding: 1em 2em 0.1em 2em;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.tabs2 .ui-tabs-nav li {
|
||||
width:auto;
|
||||
margin: 0;
|
||||
@ -811,9 +819,7 @@ table.scrollable tbody {
|
||||
}
|
||||
|
||||
div.entity-header {
|
||||
width:100%px;
|
||||
padding:10px;
|
||||
margin:10px;
|
||||
padding: 0px 20px 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -28,6 +28,7 @@ IPA.navigation = function(spec) {
|
||||
var that = {};
|
||||
|
||||
that.container = spec.container;
|
||||
that.content = spec.content;
|
||||
that.tab_class = spec.tab_class || 'tabs';
|
||||
|
||||
that.tabs = [];
|
||||
@ -116,7 +117,7 @@ IPA.navigation = function(spec) {
|
||||
tabs.tabs({
|
||||
select: function(event, ui) {
|
||||
var panel = $(ui.panel);
|
||||
var name = panel.attr('id');
|
||||
var name = panel.attr('name');
|
||||
|
||||
return that.show_page(name);
|
||||
}
|
||||
@ -128,11 +129,13 @@ IPA.navigation = function(spec) {
|
||||
container.addClass(that.tab_class);
|
||||
container.addClass('tabs'+depth);
|
||||
|
||||
var parent_id = container.attr('id');
|
||||
|
||||
var ul = $('<ul/>').appendTo(container);
|
||||
|
||||
for (var i=0; i<tabs.length; i++) {
|
||||
var tab = tabs[i];
|
||||
|
||||
var tab_id = parent_id+'-'+i;
|
||||
var label = tab.name;
|
||||
if (tab.entity) {
|
||||
var entity = IPA.get_entity(tab.entity);
|
||||
@ -149,32 +152,37 @@ IPA.navigation = function(spec) {
|
||||
}
|
||||
|
||||
$('<li/>').append($('<a/>', {
|
||||
href: '#'+tab.name,
|
||||
title: tab.name,
|
||||
href: '#'+tab_id,
|
||||
title: label,
|
||||
html: label
|
||||
})).appendTo(ul);
|
||||
|
||||
tab.content = $('<div/>', {
|
||||
id: tab.name
|
||||
tab.container = $('<div/>', {
|
||||
id: tab_id,
|
||||
name: tab.name
|
||||
}).appendTo(container);
|
||||
|
||||
if (tab.entity) {
|
||||
tab.content.addClass('entity-container');
|
||||
}
|
||||
|
||||
if (tab.children && tab.children.length) {
|
||||
that._create(tab.children, tab.content, depth+1);
|
||||
that._create(tab.children, tab.container, depth+1);
|
||||
|
||||
} else if (tab.entity) {
|
||||
tab.content = $('<div/>', {
|
||||
name: tab.name,
|
||||
title: label,
|
||||
'class': 'entity-container'
|
||||
}).appendTo(that.content);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
that.update = function() {
|
||||
$('.entity-container', that.content).css('display', 'none');
|
||||
that._update(that.tabs, that.container, 1);
|
||||
};
|
||||
|
||||
that._update = function(tabs, container, depth) {
|
||||
|
||||
var parent_name = container.attr('id');
|
||||
var parent_name = container.attr('name') || container.attr('id');
|
||||
var tab_name = that.get_state(parent_name);
|
||||
|
||||
var index = 0;
|
||||
@ -186,9 +194,10 @@ IPA.navigation = function(spec) {
|
||||
var tab = tabs[index];
|
||||
|
||||
if (tab.children && tab.children.length) {
|
||||
that._update(tab.children, tab.content, depth+1);
|
||||
that._update(tab.children, tab.container, depth+1);
|
||||
|
||||
} else if (tab.entity) {
|
||||
$('.entity-container[name="'+tab.entity.name+'"]', that.content).css('display', 'inline');
|
||||
tab.entity.setup(tab.content);
|
||||
}
|
||||
};
|
||||
|
||||
@ -43,8 +43,8 @@ test("Testing IPA.navigation.create().", function() {
|
||||
metadata:IPA.metadata.objects.user});
|
||||
that.setup = function(container){
|
||||
user_mock_called = true;
|
||||
same(container[0].id,'user','user id');
|
||||
same(container[0].nodeName,'DIV','user div');
|
||||
same(container.attr('name'), 'user', 'user container name');
|
||||
same(container[0].nodeName, 'DIV', 'user container element');
|
||||
};
|
||||
return that;
|
||||
};
|
||||
@ -53,8 +53,8 @@ test("Testing IPA.navigation.create().", function() {
|
||||
metadata:IPA.metadata.objects.group});
|
||||
that.setup = function(container){
|
||||
group_mock_called = true;
|
||||
same(container[0].id,'group','group id');
|
||||
same(container[0].nodeName,'DIV','group Div');
|
||||
same(container.attr('name'), 'group','user container name');
|
||||
same(container[0].nodeName, 'DIV', 'user container element');
|
||||
};
|
||||
return that;
|
||||
};
|
||||
@ -62,12 +62,14 @@ test("Testing IPA.navigation.create().", function() {
|
||||
IPA.start_entities();
|
||||
|
||||
IPA.metadata = {};
|
||||
var container = $('<div id="navigation"/>').appendTo(document.body);
|
||||
var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
|
||||
var entity_container = $('<div id="content"/>').appendTo(document.body);
|
||||
var user_mock_called = false;
|
||||
var group_mock_called = false;
|
||||
|
||||
var navigation = IPA.navigation({
|
||||
container: container,
|
||||
container: navigation_container,
|
||||
content: entity_container,
|
||||
tabs: [
|
||||
{ name:'identity', label:'IDENTITY', children: [
|
||||
{name:'user', entity:'user'},
|
||||
@ -81,19 +83,34 @@ test("Testing IPA.navigation.create().", function() {
|
||||
|
||||
ok(user_mock_called, "mock user setup was called");
|
||||
ok(!group_mock_called, "mock group setup was not called because the tab is inactive");
|
||||
same( container[0].children.length, 2, "Two Child tabs");
|
||||
same( container[0].children[1].id, 'identity', "Identity Tab");
|
||||
same( container[0].children[1].children[1].id, 'user', "User Tab");
|
||||
same( container[0].children[1].children[2].id, 'group', "User Tab");
|
||||
container.remove();
|
||||
|
||||
var level1_tabs = navigation_container.children('div');
|
||||
same(level1_tabs.length, 1, "One level 1 tab");
|
||||
|
||||
var identity_tab = level1_tabs.first();
|
||||
same(identity_tab.attr('name'), 'identity', "Identity Tab");
|
||||
|
||||
var level2_tabs = identity_tab.children('div');
|
||||
same(level2_tabs.length, 2, "Two level 2 tabs");
|
||||
|
||||
var user_tab = level2_tabs.first();
|
||||
same(user_tab.attr('name'), 'user', "User Tab");
|
||||
|
||||
var group_tab = user_tab.next();
|
||||
same(group_tab.attr('name'), 'group', "Group Tab");
|
||||
|
||||
entity_container.remove();
|
||||
navigation_container.remove();
|
||||
});
|
||||
|
||||
test("Testing IPA.navigation.update() with valid index.", function() {
|
||||
|
||||
var container = $('<div id="navigation"/>').appendTo(document.body);
|
||||
var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
|
||||
var entity_container = $('<div id="content"/>').appendTo(document.body);
|
||||
|
||||
var navigation = IPA.navigation({
|
||||
container: container,
|
||||
container: navigation_container,
|
||||
content: entity_container,
|
||||
tabs: [
|
||||
{ name:'identity', label:'IDENTITY', children: [
|
||||
{name:'one', label:'One', setup: function (){}},
|
||||
@ -121,26 +138,29 @@ test("Testing IPA.navigation.update() with valid index.", function() {
|
||||
navigation.update();
|
||||
|
||||
same(
|
||||
container.tabs('option', 'selected'), 0,
|
||||
navigation_container.tabs('option', 'selected'), 0,
|
||||
"Active tab at level 1"
|
||||
);
|
||||
|
||||
same(
|
||||
$('#identity').tabs('option', 'selected'), 1,
|
||||
$('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 1,
|
||||
"Active tab at level 2"
|
||||
);
|
||||
|
||||
navigation.remove_state("identity");
|
||||
|
||||
container.remove();
|
||||
entity_container.remove();
|
||||
navigation_container.remove();
|
||||
});
|
||||
|
||||
test("Testing IPA.navigation.update() with out-of-range index.", function() {
|
||||
|
||||
var container = $('<div id="navigation"/>').appendTo(document.body);
|
||||
var navigation_container = $('<div id="navigation"/>').appendTo(document.body);
|
||||
var entity_container = $('<div id="content"/>').appendTo(document.body);
|
||||
|
||||
var navigation = IPA.navigation({
|
||||
container: container,
|
||||
container: navigation_container,
|
||||
content: entity_container,
|
||||
tabs: [
|
||||
{ name:'identity', label:'IDENTITY', children: [
|
||||
{name:'one', label:'One', setup: function (){}},
|
||||
@ -168,16 +188,17 @@ test("Testing IPA.navigation.update() with out-of-range index.", function() {
|
||||
navigation.update();
|
||||
|
||||
same(
|
||||
container.tabs('option', 'selected'), 0,
|
||||
navigation_container.tabs('option', 'selected'), 0,
|
||||
"Active tab at level 1"
|
||||
);
|
||||
|
||||
same(
|
||||
$('#identity').tabs('option', 'selected'), 0,
|
||||
$('.tabs[name=identity]', navigation_container).tabs('option', 'selected'), 0,
|
||||
"Active tab at level 2"
|
||||
);
|
||||
|
||||
navigation.remove_state("identity");
|
||||
|
||||
container.remove();
|
||||
entity_container.remove();
|
||||
navigation_container.remove();
|
||||
});
|
||||
|
||||
@ -128,7 +128,8 @@ $(function() {
|
||||
}
|
||||
|
||||
return factory({
|
||||
container: $('#navigation')
|
||||
container: $('#navigation'),
|
||||
content: $('#content')
|
||||
});
|
||||
}
|
||||
|
||||
@ -153,7 +154,7 @@ $(function() {
|
||||
|
||||
|
||||
function init_on_error(xhr, text_status, error_thrown) {
|
||||
var container = $('#navigation').empty();
|
||||
var container = $('#content').empty();
|
||||
container.append('<p>Error: '+error_thrown.name+'</p>');
|
||||
container.append('<p>'+error_thrown.title+'</p>');
|
||||
container.append('<p>'+error_thrown.message+'</p>');
|
||||
|
||||
Loading…
Reference in New Issue
Block a user