From 645c1c3de4ec70d19e38f0f1369e564ee6cd1a77 Mon Sep 17 00:00:00 2001 From: Martin Edenhofer Date: Sun, 15 Oct 2017 08:20:58 +0200 Subject: [PATCH] Improved rendering of tables. --- .../_application_controller_table.coffee | 70 +- public/assets/tests/table_extended.js | 600 +++++++++++++++++- 2 files changed, 643 insertions(+), 27 deletions(-) diff --git a/app/assets/javascripts/app/controllers/_application_controller_table.coffee b/app/assets/javascripts/app/controllers/_application_controller_table.coffee index 3087c1d2d..b1db59e9f 100644 --- a/app/assets/javascripts/app/controllers/_application_controller_table.coffee +++ b/app/assets/javascripts/app/controllers/_application_controller_table.coffee @@ -117,6 +117,7 @@ class App.ControllerTable extends App.Controller columnsLength: undefined headers: undefined headerWidth: {} + maxShown: 150 currentRows: [] @@ -141,7 +142,6 @@ class App.ControllerTable extends App.Controller @overviewAttributes ||= @overview || @model.configure_overview || [] @attributesListRaw ||= @attribute_list || @model.configure_attributes || {} @attributesList = App.Model.attributesGet(false, @attributesListRaw) - console.log('Table', @overviewAttributes, @overview) #@setHeaderWidths = App.Model.setHeaderWidthsGet(false, @attributesList) @destroy = @model.configure_delete @@ -168,16 +168,18 @@ class App.ControllerTable extends App.Controller $(window).off 'resize.table', @onResize update: (params) => - console.log('params', params) - for key, value of params - @[key] = value - if params.sync is true + for key, value of params + @[key] = value return @render() - @renderQueue() + @renderQueue(params) - renderQueue: => - App.QueueManager.add('tableRender', @render) + renderQueue: (params) => + localeRender = => + for key, value of params + @[key] = value + @render() + App.QueueManager.add('tableRender', localeRender) App.QueueManager.run('tableRender') render: => @@ -214,8 +216,12 @@ class App.ControllerTable extends App.Controller removedRows = _.difference(@currentRows, newRows) addedRows = _.difference(newRows, @currentRows) + #console.log('newRows', newRows) + #console.log('removedRows', removedRows) + #console.log('addedRows', addedRows) + # if only rows are removed - if _.isEmpty(addedRows) && !_.isEmpty(removedRows) && removedRows.length < 15 && !_.isEmpty(newRows) + if (!_.isEmpty(addedRows) || !_.isEmpty(removedRows)) && addedRows.length < 10 && removedRows.length < 15 && removedRows.length < newRows.length && !_.isEmpty(newRows) newCurrentRows = [] removePositions = [] for position in [0..@currentRows.length-1] @@ -223,14 +229,24 @@ class App.ControllerTable extends App.Controller removePositions.push position else newCurrentRows.push @currentRows[position] + addPositions = [] + for position in [0..newRows.length-1] + if _.contains(addedRows, newRows[position]) + addPositions.push position + newCurrentRows.splice(position,0,newRows[position]) # check if order is still correct if @_isSame(newRows, newCurrentRows) is true for position in removePositions.reverse() @$("tbody > tr:nth-child(#{position+1})").remove() + for position in addPositions + if position is 0 + @$('tbody').append(newCurrentRows[position]) + else + @$("tbody > tr:nth-child(#{position})").after(newCurrentRows[position]) @currentRows = newCurrentRows - console.log('fullRender.contentRemoved', removePositions) - return ['fullRender.contentRemoved', removePositions] + console.log('fullRender.contentRemoved', removePositions, addPositions) + return ['fullRender.contentRemoved', removePositions, addPositions] if newRows.length isnt @currentRows.length result = ['fullRender.lenghtChanged', @currentRows.length, newRows.length] @@ -254,7 +270,7 @@ class App.ControllerTable extends App.Controller ) renderTableFull: (rows) => - console.log('renderTableFull', @orderBy, @orderDirection) + console.log('renderTableFull', @orderBy, @orderDirection, @objects) @tableHeaders() @sortList() bulkIds = @getBulkSelected() @@ -408,14 +424,16 @@ class App.ControllerTable extends App.Controller columnsLength++ groupLast = '' tableBody = [] - for object in @objects - position++ - if @groupBy - groupByName = App.viewPrint(object, @groupBy, @attributesList) - if groupLast isnt groupByName - groupLast = groupByName - tableBody.push @renderTableGroupByRow(object, position, groupByName) - tableBody.push @renderTableRow(object, position) + objectsToShow = @objects.slice(0, @maxShown) + for object in objectsToShow + if object + position++ + if @groupBy + groupByName = App.viewPrint(object, @groupBy, @attributesList) + if groupLast isnt groupByName + groupLast = groupByName + tableBody.push @renderTableGroupByRow(object, position, groupByName) + tableBody.push @renderTableRow(object, position) tableBody renderTableGroupByRow: (object, position, groupByName) => @@ -552,6 +570,12 @@ class App.ControllerTable extends App.Controller localObjects = _.sortBy( @objects (item) -> + + # error handling + if !item + console.log('Got empty object in order by with header _.sortBy') + return '' + # if we need to sort translated col. if header.translate return App.i18n.translateInline(item[header.name]) @@ -586,6 +610,12 @@ class App.ControllerTable extends App.Controller localObjects = _.sortBy( @objects (item) -> + + # error handling + if !item + console.log('Got empty object in order by in attribute _.sortBy') + return '' + # if we need to sort translated col. if attribute.translate return App.i18n.translateInline(item[attribute.name]) diff --git a/public/assets/tests/table_extended.js b/public/assets/tests/table_extended.js index 27395f53b..d3be554a6 100644 --- a/public/assets/tests/table_extended.js +++ b/public/assets/tests/table_extended.js @@ -152,9 +152,10 @@ test('table new - initial list', function() { ], {clear: true}) result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) - equal(result[0], 'fullRender.lenghtChanged') - equal(result[1], 2) - equal(result[2], 3) + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], undefined) + equal(result[2][0], 2) + equal(result[2][1], undefined) 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') @@ -231,8 +232,9 @@ test('table new - initial list', function() { result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) equal(result[0], 'fullRender.contentRemoved') - equal(result[1], 1) - notOk(result[2]) + equal(result[1][0], 1) + equal(result[1][1], undefined) + notOk(result[1][1]) 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') @@ -312,7 +314,6 @@ test('table new - initial list', function() { equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 niedrig', 'check row 1') equal(el.find('tbody > tr:nth-child(3) > td').length, 0, 'check row 3') - $('#table').append('

table group by with data

') var el = $('#table-new2') @@ -435,7 +436,11 @@ test('table new - initial list', function() { ], {clear: true}) result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) - equal(result[0], 'fullRender.lenghtChanged') + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], undefined) + equal(result[2][0], 3) + equal(result[2][1], 4) + equal(result[2][2], undefined) 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') @@ -458,4 +463,585 @@ test('table new - initial list', function() { equal(el.find('tbody > tr:nth-child(5) > td:nth-child(3)').text().trim(), 'true', 'check row 5') equal(el.find('tbody > tr:nth-child(6) > td').length, 0, 'check row 6') + App.TicketPriority.refresh([ + { + id: 1, + name: '1 low', + note: 'some note', + active: true, + created_at: '2014-06-10T11:17:34.000Z', + }, + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + { + id: 3, + name: '3 high', + note: 'some other note', + active: true, + created_at: '2014-06-10T10:17:38.000Z', + }, + { + id: 4, + name: '4 high', + note: 'some other note', + active: true, + created_at: '2014-06-10T10:17:39.000Z', + }, + { + id: 5, + name: '5 high', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:39.000Z', + }, + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], undefined) + equal(result[2][0], 3) + equal(result[2][1], 6) + equal(result[2][2], undefined) + + 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, 1, 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), 'some note', '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(), '1 niedrig', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '2 normal', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr:nth-child(4) > td').length, 3, 'check row 4') + equal(el.find('tbody > tr:nth-child(4) > td:first').text().trim(), '5 high', 'check row 4') + equal(el.find('tbody > tr:nth-child(4) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 4') + equal(el.find('tbody > tr:nth-child(4) > td:nth-child(3)').text().trim(), 'true', 'check row 4') + equal(el.find('tbody > tr:nth-child(5) > td').length, 1, 'check row 5') + equal(el.find('tbody > tr:nth-child(5) > td:first').text().trim(), 'some other note', 'check row 5') + equal(el.find('tbody > tr:nth-child(6) > td:first').text().trim(), '3 hoch', 'check row 6') + equal(el.find('tbody > tr:nth-child(6) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 6') + equal(el.find('tbody > tr:nth-child(6) > td:nth-child(3)').text().trim(), 'true', 'check row 6') + equal(el.find('tbody > tr:nth-child(7) > td').length, 3, 'check row 7') + equal(el.find('tbody > tr:nth-child(7) > td:first').text().trim(), '4 high', 'check row 7') + equal(el.find('tbody > tr:nth-child(7) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 7') + equal(el.find('tbody > tr:nth-child(7) > td:nth-child(3)').text().trim(), 'true', 'check row 7') + equal(el.find('tbody > tr:nth-child(8) > td').length, 0, 'check row 8') + + $('#table').append('

table with large data

') + var el = $('#table-new3') + + var objects = []; + var created_at = Date.parse('2014-06-10T11:17:34.000Z') + + for (i = 0; i < 1000; i++) { + local_created_at = new Date(created_at - (1000 * 60 * 60 * 24 * i)).toISOString() + item = { + id: i, + name: i + ' prio', + note: 'some note', + active: true, + created_at: local_created_at, + } + objects.push(item) + } + + App.TicketPriority.refresh(objects.reverse(), {clear: true}) + + var table = new App.ControllerTable({ + tableId: 'large_table_test', + el: el, + overviewAttributes: ['name', 'created_at', 'active'], + model: App.TicketPriority, + objects: App.TicketPriority.all(), + checkbox: false, + radio: false, + ttt: true + }) + + 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(), '999 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', '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(), '998 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0) + el.find('.js-tableHead[data-column-key="name"] .js-sort').click() + + 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(), '0 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014', '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(), '1 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '09.06.2014', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '10 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '31.05.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-up').length, 1) + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-down').length, 0) + el.find('.js-tableHead[data-column-key="name"] .js-sort').click() + + 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(), '999 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', '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(), '998 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-down').length, 1) + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon.icon-arrow-up').length, 0) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon').length, 0) + el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click() + + 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(), '999 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', '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(), '998 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 0) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 1) + el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click() + + 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(), '0 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014', '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(), '1 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '09.06.2014', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '2 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '08.06.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 1) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 0) + + objects = App.TicketPriority.all().reverse() + objects.shift() + objects.shift() + + result = table.update({sync: true, objects: objects}) + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], 1) + equal(result[1][1], 0) + equal(result[2][0], 148) + equal(result[2][1], 149) + + 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(), '2 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '08.06.2014', '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(), '3 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '07.06.2014', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '4 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '06.06.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr:nth-child(149) > td:first').text().trim(), '150 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(149) > td:nth-child(2)').text().trim(), '11.01.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(149) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr:nth-child(150) > td:first').text().trim(), '151 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(150) > td:nth-child(2)').text().trim(), '10.01.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(150) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 1) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 0) + el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click() + + 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(), '999 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '15.09.2011', '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(), '998 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '16.09.2011', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '997 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '17.09.2011', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + equal(el.find('.js-tableHead[data-column-key="name"] .js-sort .icon').length, 0) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-down').length, 0) + equal(el.find('.js-tableHead[data-column-key="created_at"] .js-sort .icon.icon-arrow-up').length, 1) + + el.find('.js-tableHead[data-column-key="created_at"] .js-sort').click() + + 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(), '2 prio', 'check row 1') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '08.06.2014', '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(), '3 prio', 'check row 2') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '07.06.2014', '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(3) > td').length, 3, 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '4 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '06.06.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr:nth-child(149) > td:first').text().trim(), '150 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(149) > td:nth-child(2)').text().trim(), '11.01.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(149) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr:nth-child(150) > td:first').text().trim(), '151 prio', 'check row 3') + equal(el.find('tbody > tr:nth-child(150) > td:nth-child(2)').text().trim(), '10.01.2014', 'check row 3') + equal(el.find('tbody > tr:nth-child(150) > td:nth-child(3)').text().trim(), 'true', 'check row 3') + equal(el.find('tbody > tr').length, 150) + equal(el.find('tbody > tr:nth-child(151) > td').length, 0) + + $('#table').append('

table with now data

') + var el = $('#table-new4') + + App.TicketPriority.refresh([ + { + id: 1, + name: '1 low', + note: 'some note', + active: true, + created_at: '2014-06-10T11:17:34.000Z', + }, + ], {clear: true}) + + var table = new App.ControllerTable({ + el: el, + overviewAttributes: ['name', 'created_at', 'active'], + model: App.TicketPriority, + objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'}), + 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(1) > td').length, 3) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 0) + + App.TicketPriority.refresh([ + { + id: 1, + name: '1 low', + note: 'some note', + active: true, + created_at: '2014-06-10T11:17:34.000Z', + }, + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], undefined) + equal(result[2][0], 1) + equal(result[2][1], undefined) + + 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) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 3) + equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(3) > td').length, 0) + + App.TicketPriority.refresh([ + { + id: 1, + name: '1 low', + note: 'some note', + active: true, + created_at: '2014-06-10T11:17:34.000Z', + }, + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + { + id: 3, + name: '3 high', + note: 'some note 3', + active: true, + created_at: '2014-06-10T10:17:38.000Z', + }, + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], undefined) + equal(result[2][0], 2) + equal(result[2][1], undefined) + + 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) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '1 niedrig') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 3) + equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '2 normal') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(3) > td').length, 3) + equal(el.find('tbody > tr:nth-child(3) > td:first').text().trim(), '3 hoch') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(3) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(4) > td').length, 0) + + App.TicketPriority.refresh([ + { + id: 3, + name: '3 high', + note: 'some note 3', + active: true, + created_at: '2014-06-10T10:17:38.000Z', + }, + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], 0) + equal(result[1][1], undefined) + equal(result[2][0], undefined) + + 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) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 3) + equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '3 hoch') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(3) > td').length, 0) + + App.TicketPriority.refresh([ + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender.lenghtChanged') + + 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) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 0) + + App.TicketPriority.refresh([], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'emptyList') + + equal(el.find('table > thead > tr').length, 1, 'row count') + equal(el.find('table > thead > tr > th:nth-child(1)').text().trim(), 'Keine Einträge', 'check header') + equal(el.find('tbody > tr:nth-child(1) > td').length, 0, 'check row 1') + + App.TicketPriority.refresh([ + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender') + + 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) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 0) + + App.TicketPriority.refresh([ + { + id: 1, + name: '1 low', + note: 'some note', + active: true, + created_at: '2014-06-10T11:17:34.000Z', + }, + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender.contentRemoved') + equal(result[1][0], undefined) + equal(result[2][0], 0) + equal(result[2][1], undefined) + + 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) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 3) + equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '1 niedrig') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(3) > td').length, 0) + + App.TicketPriority.refresh([ + { + id: 2, + name: '2 normal', + note: 'some note', + active: true, + created_at: '2014-06-10T10:17:30.000Z', + }, + ], {clear: true}) + + result = table.update({sync: true, objects: App.TicketPriority.search({sortBy:'name', order: 'ASC'})}) + equal(result[0], 'fullRender.lenghtChanged') + + 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) + equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '2 normal') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '10.06.2014') + equal(el.find('tbody > tr:nth-child(1) > td:nth-child(3)').text().trim(), 'true') + equal(el.find('tbody > tr:nth-child(2) > td').length, 0) })