Improved table api for additional col. like "switch to user" and added unit tests.

This commit is contained in:
Martin Edenhofer 2014-06-17 02:20:46 +02:00
parent 7238072b29
commit 90be104755
6 changed files with 593 additions and 50 deletions

View file

@ -153,26 +153,19 @@ class App.ControllerGenericIndex extends App.Controller
menus: @pageData.menus menus: @pageData.menus
) )
# append additional col. link switch to
overview = _.clone( App[ @genericObject ].configure_overview )
attributes = _.clone( App[ @genericObject ].configure_attributes )
if @pageData.addCol
for item in @pageData.addCol.overview
overview.push item
for item in @pageData.addCol.attributes
attributes.push item
# append content table # append content table
new App.ControllerTable( params = _.extend(
{
el: @el.find('.table-overview') el: @el.find('.table-overview')
model: App[ @genericObject ] model: App[ @genericObject ]
objects: objects objects: objects
overview: overview
attributes: attributes
bindRow: bindRow:
events: events:
'click': @edit 'click': @edit
},
@pageData.tableExtend
) )
new App.ControllerTable(params)
edit: (id, e) => edit: (id, e) =>
e.preventDefault() e.preventDefault()

View file

@ -10,29 +10,43 @@ class App.ControllerTable extends App.Controller
### ###
# table simple based on model # table based on model
rowClick = -> (id, e) rowClick = (id, e) ->
e.preventDefault() e.preventDefault()
console.log('rowClick', id) console.log('rowClick', id)
rowMouseover = -> (id, e) rowMouseover = (id, e) ->
e.preventDefault() e.preventDefault()
console.log('rowMouseover', id) console.log('rowMouseover', id)
rowMouseout = -> (id, e) rowMouseout = (id, e) ->
e.preventDefault() e.preventDefault()
console.log('rowMouseout', id) console.log('rowMouseout', id)
rowDblClick = -> (id, e) rowDblClick = (id, e) ->
e.preventDefault() e.preventDefault()
console.log('rowDblClick', id) console.log('rowDblClick', id)
colClick = -> (id, e) colClick = (id, e) ->
e.preventDefault() e.preventDefault()
console.log('colClick', e.target) console.log('colClick', e.target)
checkboxClick = -> (id, e) checkboxClick = (id, e) ->
e.preventDefault() e.preventDefault()
console.log('checkboxClick', e.target) console.log('checkboxClick', e.target)
callbackHeader = (header) ->
console.log('current header is', header)
# add new header item
attribute =
name: 'some name'
display: 'Some Name'
header.push attribute
console.log('new header is', header)
callbackAttributes = (value, object, attribute, header, refObject) ->
console.log('data of item col', value, object, attribute, header, refObject)
value = 'New Data To Show'
value
new App.ControllerTable( new App.ControllerTable(
overview: ['host', 'user', 'adapter', 'active'] overview: ['host', 'user', 'adapter', 'active']
model: App.Channel model: App.Channel
@ -56,6 +70,11 @@ class App.ControllerTable extends App.Controller
'mouseover': rowMouseover 'mouseover': rowMouseover
'mouseout': rowMouseout 'mouseout': rowMouseout
'dblclick': rowDblClick 'dblclick': rowDblClick
callbackHeader: callbackHeader
callbackAttributes:
attributeName: [
callbackAttributes
]
) )
### ###
@ -119,6 +138,10 @@ class App.ControllerTable extends App.Controller
headerFound = true headerFound = true
header.push attribute header.push attribute
# execute header callback
if data.callbackHeader
header = data.callbackHeader(header)
# get content # get content
@log 'debug', 'table', 'header', header, 'overview', 'objects', data.objects @log 'debug', 'table', 'header', header, 'overview', 'objects', data.objects
table = App.view('generic/table')( table = App.view('generic/table')(
@ -158,8 +181,8 @@ class App.ControllerTable extends App.Controller
for event, callback of item.events for event, callback of item.events
do (table, event, callback) => do (table, event, callback) =>
if cursorMap[event] if cursorMap[event]
table.find("tbody > tr > td:nth-child(#{position}) > span").css( 'cursor', cursorMap[event] ) table.find("tbody > tr > td:nth-child(#{position}) span").css( 'cursor', cursorMap[event] )
table.on( event, "tbody > tr > td:nth-child(#{position}) > span", table.on( event, "tbody > tr > td:nth-child(#{position}) span",
(e) => (e) =>
e.stopPropagation() e.stopPropagation()
id = $(e.target).parents('tr').data('id') id = $(e.target).parents('tr').data('id')
@ -205,6 +228,14 @@ class App.ControllerTable extends App.Controller
# enable checkbox bulk selection # enable checkbox bulk selection
if data.checkbox if data.checkbox
# click first tr>td, click checkbox / improve usability
table.delegate('tr > td:nth-child(1)', event, (e) ->
e.stopPropagation()
$(e.target).find('[name="bulk"]').click()
)
# bind on full bulk click
table.delegate('input[name="bulk_all"]', 'click', (e) -> table.delegate('input[name="bulk_all"]', 'click', (e) ->
e.stopPropagation() e.stopPropagation()
if $(e.target).prop('checked') if $(e.target).prop('checked')

View file

@ -189,14 +189,15 @@ class Table extends App.ControllerContent
@navigate ticket.uiUrl() @navigate ticket.uiUrl()
callbackTicketTitleAdd = (value, object, attribute, attributes, refObject) => callbackTicketTitleAdd = (value, object, attribute, attributes, refObject) =>
attribute.title = object.title attribute.title = object.title
value
callbackLinkToTicket = (value, object, attribute, attributes, refObject) => callbackLinkToTicket = (value, object, attribute, attributes, refObject) =>
attribute.link = object.uiUrl() attribute.link = object.uiUrl()
callbackResetLink = (value, object, attribute, attributes, refObject) => value
attribute.link = undefined
callbackUserPopover = (value, object, attribute, attributes, refObject) => callbackUserPopover = (value, object, attribute, attributes, refObject) =>
attribute.class = 'user-popover' attribute.class = 'user-popover'
attribute.data = attribute.data =
id: refObject.id id: refObject.id
value
callbackCheckbox = (id, checked, e) => callbackCheckbox = (id, checked, e) =>
if @el.find('table').find('input[name="bulk"]:checked').length == 0 if @el.find('table').find('input[name="bulk"]:checked').length == 0
@el.find('.bulk-action').addClass('hide') @el.find('.bulk-action').addClass('hide')
@ -219,9 +220,9 @@ class Table extends App.ControllerContent
# 'mouseover': popOver # 'mouseover': popOver
callbackAttributes: callbackAttributes:
customer_id: customer_id:
[ callbackResetLink, callbackUserPopover ] [ callbackUserPopover ]
owner_id: owner_id:
[ callbackResetLink, callbackUserPopover ] [ callbackUserPopover ]
title: title:
[ callbackLinkToTicket, callbackTicketTitleAdd ] [ callbackLinkToTicket, callbackTicketTitleAdd ]
number: number:

View file

@ -5,6 +5,27 @@ class Index extends App.Controller
# check authentication # check authentication
return if !@authenticate() return if !@authenticate()
callbackHeader = (header) ->
attribute =
name: 'switch_to'
display: 'Switch to'
translation: true
header.push attribute
header
callbackAttributes = (value, object, attribute, header, refObject) ->
value = ' '
attribute.class = 'glyphicon glyphicon-user'
attribute.link = '#'
attribute.title = App.i18n.translateInline('Switch to')
value
switchTo = (id,e) =>
e.preventDefault()
@disconnectClient()
App.Auth._logout()
window.location = App.Config.get('api_path') + '/sessions/switch/' + id
new App.ControllerGenericIndex( new App.ControllerGenericIndex(
el: @el el: @el
id: @id id: @id
@ -21,26 +42,18 @@ class Index extends App.Controller
'Users are for any person in the system. Agents (Owners, Resposbiles, ...) and Customers.' 'Users are for any person in the system. Agents (Owners, Resposbiles, ...) and Customers.'
] ]
buttons: [ buttons: [
# { name: 'List', 'data-type': '', class: 'active' },
{ name: 'New User', 'data-type': 'new', class: 'primary' } { name: 'New User', 'data-type': 'new', class: 'primary' }
] ]
addCol: tableExtend:
overview: ['switch_to'] callbackHeader: callbackHeader
attributes: [ callbackAttributes:
{ switch_to: [
name: 'switch_to' callbackAttributes
display: 'Switch to'
type: 'link'
class: 'glyphicon glyphicon-user'
dataType: 'switch_to'
callback: (e) =>
e.preventDefault()
user_id = $(e.target).parent().parent().data('id')
@disconnectClient()
App.Auth._logout()
window.location = App.Config.get('api_path') + '/sessions/switch/' + user_id
}
] ]
bindCol:
switch_to:
events:
'click': switchTo
) )
App.Config.set( 'User', { prio: 1000, name: 'Users', parent: '#manage', target: '#manage/users', controller: Index, role: ['Admin'] }, 'NavBarAdmin' ) App.Config.set( 'User', { prio: 1000, name: 'Users', parent: '#manage', target: '#manage/users', controller: Index, role: ['Admin'] }, 'NavBarAdmin' )

View file

@ -71,7 +71,7 @@
<% for attribute, callbacksAll of @callbacks: %> <% for attribute, callbacksAll of @callbacks: %>
<% if attribute is item.name || attribute is item_id: %> <% if attribute is item.name || attribute is item_id: %>
<% for callback in callbacksAll: %> <% for callback in callbacksAll: %>
<% callback( value, object, item_clone, @header, refObject ) %> <% value = callback( value, object, item_clone, @header, refObject ) %>
<% end %> <% end %>
<% end %> <% end %>
<% end %> <% end %>

View file

@ -0,0 +1,505 @@
// form
test( "table test", function() {
App.i18n.set('de')
$('#table').append('<hr><h1>table simple I</h1><div id="table1"></div>')
var el = $('#table1')
App.TicketPriority.refresh( [
{
id: 1,
name: '1 low',
note: 'some note 1',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
{
id: 2,
name: '2 normal',
note: 'some note 2',
active: false,
created_at: '2014-06-10T10:17:34.000Z',
},
] )
var rowClick = function (id, e) {
e.preventDefault()
console.log('rowClick', id, e.target)
};
var rowDblClick = function (id, e) {
e.preventDefault()
console.log('rowDblClick', id, e.target)
};
var rowMouseover = function (id, e) {
e.preventDefault()
console.log('rowMouseover', id, e.target)
};
var rowMouseout = function (id, e) {
e.preventDefault()
console.log('rowMouseout', id, e.target)
};
var colClick = function (id, e) {
e.preventDefault()
console.log('colClick', id, e.target)
};
var colDblClick = function (id, e) {
e.preventDefault()
console.log('colDblClick', id, e.target)
};
var colMouseover = function (id, e) {
e.preventDefault()
console.log('colMouseover', id, e.target)
};
var colMouseout = function (id, e) {
e.preventDefault()
console.log('colMouseout', id, e.target)
};
new App.ControllerTable({
el: el,
overview: ['name', 'created_at', 'active'],
model: App.TicketPriority,
objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'}),
checkbox: false,
radio: false,
bindRow: {
events: {
'click': rowClick,
'mouseover': rowMouseover,
'mouseout': rowMouseout,
'dblclick': rowDblClick,
}
},
bindCol: {
name: {
events: {
'click': colClick,
'mouseover': colMouseover,
'mouseout': colMouseout,
'dblclick': colDblClick,
}
},
created_at: {
events: {
'mouseover': colMouseover,
'mouseout': colMouseout,
}
}
},
})
equal( el.find('table > thead > tr').length, 1, 'row count')
equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
equal( el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '?', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
equal( el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '?', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'false', 'check row 2')
$('#table').append('<hr><h1>table simple II</h1><div id="table2"></div>')
el = $('#table2')
new App.ControllerTable({
el: el,
overview: ['name', 'created_at', 'active'],
model: App.TicketPriority,
objects: App.TicketPriority.search({sortBy:'name', order: 'DESC'}),
checkbox: false,
radio: false,
})
equal( el.find('table > thead > tr').length, 1, 'row count')
equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
equal( el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 niedrig', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '?', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
equal( el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '?', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'false', 'check row 1')
$('#table').append('<hr><h1>table simple III</h1><div id="table3"></div>')
el = $('#table3')
new App.ControllerTable({
el: el,
model: App.TicketPriority,
objects: App.TicketPriority.search({sortBy:'created_at', order: 'DESC'}),
checkbox: false,
radio: false,
})
equal( el.find('table > thead > tr').length, 1, 'row count')
equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Name', 'check header')
notEqual( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Erstellt', 'check header')
notEqual( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Aktiv', 'check header')
equal( el.find('tbody > tr:nth-child(2) > td').length, 1, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal', 'check row 2')
notEqual( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '?', 'check row 2')
notEqual( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 2')
equal( el.find('tbody > tr:nth-child(1) > td').length, 1, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig', 'check row 1')
notEqual( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '?', 'check row 1')
notEqual( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'false', 'check row 1')
App.Group.refresh( [
{
id: 1,
name: 'group 1',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
{
id: 2,
name: 'group 2',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
])
App.User.refresh( [
{
id: 55,
login: 'login55',
firstname: 'firstname55',
lastname: 'lastname55',
email: 'email55',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
{
id: 56,
login: 'login56',
firstname: 'firstname56',
lastname: 'lastname56',
email: 'email56',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
])
App.TicketState.refresh( [
{
id: 1,
name: 'new',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
{
id: 2,
name: 'open',
note: 'some note 2',
active: false,
created_at: '2014-06-10T10:17:34.000Z',
},
])
App.Ticket.refresh( [
{
id: 1,
title: 'some title 1',
number: '4711',
priority_id: 1,
owner_id: 55,
customer_id: 56,
state_id: 1,
group_id: 2,
created_at: '2014-06-10T11:17:34.000Z',
},
{
id: 3,
title: 'some title 3',
number: '4713',
priority_id: 2,
owner_id: 56,
state_id: 1,
group_id: 2,
created_at: '2014-07-11T11:19:34.000Z',
},
{
id: 2,
title: 'some title 2',
number: '4712',
priority_id: 1,
state_id: 2,
group_id: 1,
created_at: '2014-06-10T11:19:34.000Z',
},
])
$('#table').append('<hr><h1>table complex I</h1><div id="table4"></div>')
el = $('#table4')
new App.ControllerTable({
el: el,
overview: ['number', 'title', 'owner', 'customer', 'priority', 'group', 'state', 'created_at'],
model: App.Ticket,
objects: App.Ticket.search({sortBy:'created_at', order: 'DESC'}),
checkbox: true,
})
equal( el.find('table > thead > tr').length, 1, 'row count')
equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), '', 'check header')
equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), '#', 'check header')
equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Titel', 'check header')
equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Besitzer', 'check header')
equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Kunde', 'check header')
equal( el.find('table > thead > tr > th:nth-child(6)').text().trim(), 'Priorität', 'check header')
equal( el.find('table > thead > tr > th:nth-child(7)').text().trim(), 'Gruppe', 'check header')
equal( el.find('table > thead > tr > th:nth-child(8)').text().trim(), 'Status', 'check header')
equal( el.find('table > thead > tr > th:nth-child(9)').text().trim(), 'Erstellt', 'check header')
equal( el.find('tbody > tr:nth-child(1) > td').length, 9, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) > input').val(), '3', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').prop('checked'), '', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), '', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '4713', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'some title 3', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'firstname56 lastname56', 'check row 2')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(5)').text().trim(), '-', 'check row 2')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(6)').text().trim(), '2 normal', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(7)').text().trim(), 'group 2', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(8)').text().trim(), 'neu', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(9)').text().trim(), '?', 'check row 1')
equal( el.find('tbody > tr:nth-child(2) > td').length, 9, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) > input').val(), '2', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), '', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '4712', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'some title 2', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), '-', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '-', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(7)').text().trim(), 'group 1', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(8)').text().trim(), 'offen', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(9)').text().trim(), '?', 'check row 2')
equal( el.find('tbody > tr:nth-child(3) > td').length, 9, 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) > input').val(), '1', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').prop('checked'), '', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1)').text().trim(), '', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '4711', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'some title 1', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(4)').text().trim(), 'firstname55 lastname55', 'check row 2')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(5)').text().trim(), 'firstname56 lastname56', 'check row 2')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(7)').text().trim(), 'group 2', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(8)').text().trim(), 'neu', 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(9)').text().trim(), '?', 'check row 3')
el.find('input[name="bulk_all"]').click()
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) input').prop('checked'), true, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1) > input').val(), '3', 'check row 1')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), true, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) > input').val(), '2', 'check row 2')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) input').prop('checked'), true, 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1) > input').val(), '1', 'check row 3')
$('#table').append('<hr><h1>table complex II</h1><div id="table5"></div>')
el = $('#table5')
var clickCheckbox = function (id, checked, e) {
console.log('clickCheckbox', id, checked, e.target)
};
new App.ControllerTable({
el: el,
overview: ['number', 'title', 'owner', 'customer', 'priority', 'group', 'state', 'created_at'],
model: App.Ticket,
objects: App.Ticket.search({sortBy:'created_at', order: 'DESC'}),
checkbox: true,
groupBy: 'group',
bindCheckbox: {
events: {
'click': clickCheckbox,
}
},
})
equal( el.find('table > thead > tr').length, 1, 'row count')
equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), '', 'check header')
equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), '#', 'check header')
equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Titel', 'check header')
equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Besitzer', 'check header')
equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Kunde', 'check header')
equal( el.find('table > thead > tr > th:nth-child(6)').text().trim(), 'Priorität', 'check header')
equal( el.find('table > thead > tr > th:nth-child(7)').text().trim(), 'Status', 'check header')
equal( el.find('table > thead > tr > th:nth-child(8)').text().trim(), 'Erstellt', 'check header')
equal( el.find('tbody > tr:nth-child(1) > td').length, 1, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), 'group 1', 'check row 1')
equal( el.find('tbody > tr:nth-child(2) > td').length, 8, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), '', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '4712', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'some title 2', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), '-', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '-', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(6)').text().trim(), '1 niedrig', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(7)').text().trim(), 'offen', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(8)').text().trim(), '?', 'check row 2')
equal( el.find('tbody > tr:nth-child(3) > td').length, 1, 'check row 3')
equal( el.find('tbody > tr:nth-child(3) > td:nth-child(1)').text().trim(), 'group 2', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td').length, 8, 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').val(), '3', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').prop('checked'), '', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1)').text().trim(), '', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(2)').text().trim(), '4713', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(3)').text().trim(), 'some title 3', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(4)').text().trim(), 'firstname56 lastname56', 'check row 2')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(5)').text().trim(), '-', 'check row 2')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(6)').text().trim(), '2 normal', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(7)').text().trim(), 'neu', 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(8)').text().trim(), '?', 'check row 4')
el.find('input[name="bulk"]:eq(1)').click()
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').prop('checked'), '', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1) input').val(), '2', 'check row 1')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').prop('checked'), true, 'check row 4')
equal( el.find('tbody > tr:nth-child(4) > td:nth-child(1) input').val(), '3', 'check row 4')
equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').prop('checked'), '', 'check row 5')
equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').val(), '1', 'check row 5')
el.find('tbody > tr:nth-child(5) > td:nth-child(1)').click()
equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').prop('checked'), true, 'check row 5')
equal( el.find('tbody > tr:nth-child(5) > td:nth-child(1) input').val(), '1', 'check row 5')
});
test( "table test 2", function() {
App.i18n.set('de')
$('#table').append('<hr><h1>table with hash</h1><div id="table-hash1"></div>')
var el = $('#table-hash1')
App.Group.refresh( [
{
id: 5,
name: 'group 5',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
])
App.Channel.refresh( [
{
id: 1,
adapter: 'adapter1',
options: {
host: 'host1',
user: 'user1',
},
group_id: 5,
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
{
id: 2,
adapter: 'adapter2',
options: {
host: 'host2',
user: 'user2',
},
group_id: 5,
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
] )
new App.ControllerTable({
el: el,
overview: ['adapter', 'options::host', 'options::user', 'active'],
model: App.Channel,
objects: App.Channel.search({sortBy:'adapter', order: 'ASC'}),
})
equal( el.find('table > thead > tr').length, 1, 'row count')
equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Typ', 'check header')
equal( el.find('table > thead > tr > th:nth-child(2)').text().trim(), 'Host', 'check header')
equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Benutzer', 'check header')
equal( el.find('table > thead > tr > th:nth-child(4)').text().trim(), 'Aktiv', 'check header')
equal( el.find('table > thead > tr > th:nth-child(5)').text().trim(), 'Löschen', 'check header')
equal( el.find('tbody > tr:nth-child(1) > td').length, 5, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), 'adapter1', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'host1', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'user1', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'true', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(4)').text().trim(), 'true', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(5)').text().trim(), '', 'check row 1')
equal( el.find('tbody > tr:nth-child(2) > td').length, 5, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), 'adapter2', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'host2', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'user2', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(4)').text().trim(), 'true', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(5)').text().trim(), '', 'check row 2')
});
test( "table test 3", function() {
App.i18n.set('de')
$('#table').append('<hr><h1>table with link</h1><div id="table-link1"></div>')
var el = $('#table-link1')
App.EmailAddress.refresh( [
{
id: 55,
realname: 'realname 55',
email: 'email 55',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
{
id: 56,
realname: 'realname 56',
email: 'email 56',
active: true,
created_at: '2014-06-10T11:17:34.000Z',
},
])
var callbackHeader = function (header) {
console.log('current header is', header);
// add new header item
var attribute = {
name: 'some name',
display: 'Some Name',
};
header.push(attribute);
console.log('new header is', header);
return header
}
var callbackAttributes = function(value, object, attribute, header, refObject) {
console.log('data of item col', value, object, attribute, header, refObject)
value = ' '
attribute.class = 'glyphicon glyphicon-user'
attribute.link = '#'
attribute.title = App.i18n.translateInline('Switch to')
return value
}
var switchTo = function(id, e) {
e.preventDefault()
console.log('switchTo with id', id, e.target)
//@disconnectClient()
//App.Auth._logout()
//window.location = App.Config.get('api_path') + '/sessions/switch/' + id
}
new App.ControllerTable({
el: el,
model: App.EmailAddress,
objects: App.EmailAddress.search({sortBy:'realname', order: 'ASC'}),
callbackHeader: callbackHeader,
callbackAttributes: {
'some name': [ callbackAttributes ]
},
bindCol: {
'some name': {
events: {
'click': switchTo,
}
},
},
})
equal( el.find('table > thead > tr').length, 1, 'row count')
equal( el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Realname', 'check header')
equal( el.find('table > thead > tr > th:nth-child(3)').text().trim(), 'Some Name', 'check header')
equal( el.find('tbody > tr:nth-child(1) > td').length, 3, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(1)').text().trim(), 'realname 55', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), 'email 55', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), '', 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').hasClass('glyphicon-user'), true, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').hasClass('glyphicon'), true, 'check row 1')
equal( el.find('tbody > tr:nth-child(1) > td:nth-child(3) > a > span').attr('title'), 'Switch to', 'check row 1')
equal( el.find('tbody > tr:nth-child(2) > td').length, 3, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(1)').text().trim(), 'realname 56', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), 'email 56', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), '', 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').hasClass('glyphicon-user'), true, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').hasClass('glyphicon'), true, 'check row 2')
equal( el.find('tbody > tr:nth-child(2) > td:nth-child(3) > a > span').attr('title'), 'Switch to', 'check row 2')
});