From 90be1047559252997c96bf828f18058007212a95 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Tue, 17 Jun 2014 02:20:46 +0200 Subject: [PATCH] Improved table api for additional col. like "switch to user" and added unit tests. --- .../_application_controller_generic.js.coffee | 29 +- .../_application_controller_table.js.coffee | 49 +- .../app/controllers/ticket_overview.js.coffee | 9 +- .../app/controllers/users.js.coffee | 49 +- .../app/views/generic/table.jst.eco | 2 +- public/assets/tests/table.js | 505 ++++++++++++++++++ 6 files changed, 593 insertions(+), 50 deletions(-) create mode 100644 public/assets/tests/table.js diff --git a/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee index 03c50c403..d2e9699ec 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_generic.js.coffee @@ -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() diff --git a/app/assets/javascripts/app/controllers/_application_controller_table.js.coffee b/app/assets/javascripts/app/controllers/_application_controller_table.js.coffee index 5d27c6c2a..058a842c9 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_table.js.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_table.js.coffee @@ -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') diff --git a/app/assets/javascripts/app/controllers/ticket_overview.js.coffee b/app/assets/javascripts/app/controllers/ticket_overview.js.coffee index 6ef3ee9b9..a8e093367 100644 --- a/app/assets/javascripts/app/controllers/ticket_overview.js.coffee +++ b/app/assets/javascripts/app/controllers/ticket_overview.js.coffee @@ -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: diff --git a/app/assets/javascripts/app/controllers/users.js.coffee b/app/assets/javascripts/app/controllers/users.js.coffee index 9f78c3230..59e26c5f0 100644 --- a/app/assets/javascripts/app/controllers/users.js.coffee +++ b/app/assets/javascripts/app/controllers/users.js.coffee @@ -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' ) diff --git a/app/assets/javascripts/app/views/generic/table.jst.eco b/app/assets/javascripts/app/views/generic/table.jst.eco index 9f319f1a9..5328cfda5 100644 --- a/app/assets/javascripts/app/views/generic/table.jst.eco +++ b/app/assets/javascripts/app/views/generic/table.jst.eco @@ -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 %> diff --git a/public/assets/tests/table.js b/public/assets/tests/table.js new file mode 100644 index 000000000..cc6d01a74 --- /dev/null +++ b/public/assets/tests/table.js @@ -0,0 +1,505 @@ +// form +test( "table test", function() { + App.i18n.set('de') + + $('#table').append('

table simple I

') + 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('

table simple II

') + 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('

table simple III

') + 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('

table complex I

') + 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('

table complex II

') + 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('

table with hash

') + 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('

table with link

') + 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') + +});