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
)
# 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
new App.ControllerTable(
params = _.extend(
{
el: @el.find('.table-overview')
model: App[ @genericObject ]
objects: objects
overview: overview
attributes: attributes
bindRow:
events:
'click': @edit
},
@pageData.tableExtend
)
new App.ControllerTable(params)
edit: (id, e) =>
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()
console.log('rowClick', id)
rowMouseover = -> (id, e)
rowMouseover = (id, e) ->
e.preventDefault()
console.log('rowMouseover', id)
rowMouseout = -> (id, e)
rowMouseout = (id, e) ->
e.preventDefault()
console.log('rowMouseout', id)
rowDblClick = -> (id, e)
rowDblClick = (id, e) ->
e.preventDefault()
console.log('rowDblClick', id)
colClick = -> (id, e)
colClick = (id, e) ->
e.preventDefault()
console.log('colClick', e.target)
checkboxClick = -> (id, e)
checkboxClick = (id, e) ->
e.preventDefault()
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(
overview: ['host', 'user', 'adapter', 'active']
model: App.Channel
@ -56,6 +70,11 @@ class App.ControllerTable extends App.Controller
'mouseover': rowMouseover
'mouseout': rowMouseout
'dblclick': rowDblClick
callbackHeader: callbackHeader
callbackAttributes:
attributeName: [
callbackAttributes
]
)
###
@ -119,6 +138,10 @@ class App.ControllerTable extends App.Controller
headerFound = true
header.push attribute
# execute header callback
if data.callbackHeader
header = data.callbackHeader(header)
# get content
@log 'debug', 'table', 'header', header, 'overview', 'objects', data.objects
table = App.view('generic/table')(
@ -158,8 +181,8 @@ class App.ControllerTable extends App.Controller
for event, callback of item.events
do (table, event, callback) =>
if 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.find("tbody > tr > td:nth-child(#{position}) span").css( 'cursor', cursorMap[event] )
table.on( event, "tbody > tr > td:nth-child(#{position}) span",
(e) =>
e.stopPropagation()
id = $(e.target).parents('tr').data('id')
@ -205,6 +228,14 @@ class App.ControllerTable extends App.Controller
# enable checkbox bulk selection
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) ->
e.stopPropagation()
if $(e.target).prop('checked')

View file

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

View file

@ -5,6 +5,27 @@ class Index extends App.Controller
# check authentication
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(
el: @el
id: @id
@ -21,26 +42,18 @@ class Index extends App.Controller
'Users are for any person in the system. Agents (Owners, Resposbiles, ...) and Customers.'
]
buttons: [
# { name: 'List', 'data-type': '', class: 'active' },
{ name: 'New User', 'data-type': 'new', class: 'primary' }
]
addCol:
overview: ['switch_to']
attributes: [
{
name: 'switch_to'
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
}
tableExtend:
callbackHeader: callbackHeader
callbackAttributes:
switch_to: [
callbackAttributes
]
bindCol:
switch_to:
events:
'click': switchTo
)
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: %>
<% if attribute is item.name || attribute is item_id: %>
<% for callback in callbacksAll: %>
<% callback( value, object, item_clone, @header, refObject ) %>
<% value = callback( value, object, item_clone, @header, refObject ) %>
<% 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')
});