Improved table api for additional col. like "switch to user" and added unit tests.
This commit is contained in:
Martin Edenhofer
parent
7238072b29
commit
90be104755
6 changed files with 593 additions and 50 deletions
|
|
@ -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(
|
||||
el: @el.find('.table-overview')
|
||||
model: App[ @genericObject ]
|
||||
objects: objects
|
||||
overview: overview
|
||||
attributes: attributes
|
||||
bindRow:
|
||||
events:
|
||||
'click': @edit
|
||||
params = _.extend(
|
||||
{
|
||||
el: @el.find('.table-overview')
|
||||
model: App[ @genericObject ]
|
||||
objects: objects
|
||||
bindRow:
|
||||
events:
|
||||
'click': @edit
|
||||
},
|
||||
@pageData.tableExtend
|
||||
)
|
||||
new App.ControllerTable(params)
|
||||
|
||||
edit: (id, e) =>
|
||||
e.preventDefault()
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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' )
|
||||
|
|
|
|||
|
|
@ -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 %>
|
||||
|
|
|
|||
505
public/assets/tests/table.js
Normal file
505
public/assets/tests/table.js
Normal 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')
|
||||
|
||||
});
|
||||
Loading…
Reference in a new issue