Sutty/trabajo-afectivo
5
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added table pagination support.

Browse source
This commit is contained in:
Martin Edenhofer 2017-10-15 15:49:23 +02:00
parent 734c821abc
commit 1a71444c22
4 changed files with 331 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/assets/javascripts/app/controllers/_application_controller_table.coffee
View file

@ -112,12 +112,14 @@ class App.ControllerTable extends App.Controller
renderState: undefined
groupBy: undefined
shownPerPage: 150
shownPage: 0
destroy: false
columnsLength: undefined
headers: undefined
headerWidth: {}
maxShown: 150
currentRows: []
@ -142,8 +144,7 @@ class App.ControllerTable extends App.Controller
@overviewAttributes ||= @overview || @model.configure_overview || []
@attributesListRaw ||= @attribute_list || @model.configure_attributes || {}
@attributesList = App.Model.attributesGet(false, @attributesListRaw)
#@setHeaderWidths = App.Model.setHeaderWidthsGet(false, @attributesList)
@destroy = @model.configure_delete
@destroy = @model.configure_delete
throw 'overviewAttributes needed' if _.isEmpty(@overviewAttributes)
throw 'attributesList needed' if _.isEmpty(@attributesList)
@ -182,7 +183,25 @@ class App.ControllerTable extends App.Controller
App.QueueManager.add('tableRender', localeRender)
App.QueueManager.run('tableRender')
renderPager: (el, find = false) =>
pages = parseInt(((@objects.length - 1) / @shownPerPage))
if pages < 1
if find
el.find('.js-pager').html('')
else
el.filter('.js-pager').html('')
return
pager = App.view('generic/table_pager')(
page: @shownPage
pages: pages
)
if find
el.find('.js-pager').html(pager)
else
el.filter('.js-pager').html(pager)
render: =>
@setMaxPage()
if @renderState is undefined
# check if table is empty
@ -246,6 +265,7 @@ class App.ControllerTable extends App.Controller
@$("tbody > tr:nth-child(#{position})").after(newCurrentRows[position])
@currentRows = newCurrentRows
console.log('fullRender.contentRemoved', removePositions, addPositions)
@renderPager(@el, true)
return ['fullRender.contentRemoved', removePositions, addPositions]
if newRows.length isnt @currentRows.length
@ -282,6 +302,8 @@ class App.ControllerTable extends App.Controller
@currentRows = clone(rows)
container.find('.js-tableBody').html(rows)
@renderPager(container)
cursorMap =
click: 'pointer'
dblclick: 'pointer'
@ -402,6 +424,17 @@ class App.ControllerTable extends App.Controller
update: @dndCallback
container.find('tbody').sortable(dndOptions)
# click on pager
container.delegate('.js-page', 'click', (e) =>
e.stopPropagation()
page = $(e.currentTarget).attr 'data-page'
render = =>
@shownPage = page
@renderTableFull()
App.QueueManager.add('tableRender', render)
App.QueueManager.run('tableRender')
)
@el.html(container)
@setBulkSelected(bulkIds)
@ -424,7 +457,7 @@ class App.ControllerTable extends App.Controller
columnsLength++
groupLast = ''
tableBody = []
objectsToShow = @objects.slice(0, @maxShown)
objectsToShow = @objectsOfPage(@shownPage)
for object in objectsToShow
if object
position++
@ -549,6 +582,15 @@ class App.ControllerTable extends App.Controller
console.log('tableHeaders: new headers', @headers)
['new headers', @headers]
setMaxPage: =>
pages = parseInt(((@objects.length - 1) / @shownPerPage))
if parseInt(@shownPage) > pages
@shownPage = pages
objectsOfPage: (page = 0) =>
page = parseInt(page)
@objects.slice(page * @shownPerPage, (page + 1) * @shownPerPage)
sortList: =>
return if _.isEmpty(@objects)
@ -680,8 +722,6 @@ class App.ControllerTable extends App.Controller
@objects = localObjects
@lastSortedobjects = localObjects
localObjects
# bind on delete dialog
deleteRow: (id, e) =>
e.stopPropagation()

4
app/assets/javascripts/app/views/generic/table.jst.eco
View file

@ -1,3 +1,4 @@
<div class="js-pager"></div>
<table class="table table-hover<%- " #{@class}" if @class %>">
<thead>
<tr>
@ -35,4 +36,5 @@
</tr>
</thead>
<tbody class="js-tableBody"><%- @tableBody %></tbody>
</table>
</table>
<div class="js-pager"></div>

5
app/assets/javascripts/app/views/generic/table_pager.jst.eco Normal file
View file

@ -0,0 +1,5 @@
<div class="btn-group btn-group--full" role="group" aria-label="" style="margin-bottom: 5px;">
<% for page in [0..@pages]: %>
<div class="btn btn--text btn--large js-page<%- ' is-selected' if @page is page || @page is page.toString() %>" data-page="<%= page %>"><%= page + 1 %></div>
<% end %>
</div>

277
public/assets/tests/table_extended.js
View file

@ -1044,4 +1044,281 @@ test('table new - initial list', function() {
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)
$('#table').append('<hr><h1>table with large data and pager</h1><div id="table-new5"></div>')
var el = $('#table-new5')
var objects = [];
var created_at = Date.parse('2014-06-10T11:17:34.000Z')
for (i = 0; i < 151; 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, {clear: true})
var table = new App.ControllerTable({
tableId: 'large_table_test_pager',
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(), '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-pager').first().find('.js-page').length, 2)
equal(el.find('.js-pager').first().find('.js-page.is-selected').length, 1)
equal(el.find('.js-pager').first().find('.js-page.is-selected').text(), '1')
el.find('.js-pager').first().find('.js-page:nth-child(2)').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(), '150 prio', 'check row 1')
equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '11.01.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').length, 1)
equal(el.find('tbody > tr:nth-child(2) > td').length, 0)
objects = [
{
id: 500,
name: '500 prio',
note: 'some note',
active: true,
created_at: '2014-06-10T10:17:30.000Z',
},
]
App.TicketPriority.refresh(objects)
result = table.update({sync: true, objects: App.TicketPriority.all()})
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, 'check row 1')
equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '150 prio', 'check row 1')
equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '11.01.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 1')
equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '500 prio', 'check row 1')
equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 1')
equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
equal(el.find('tbody > tr').length, 2)
equal(el.find('tbody > tr:nth-child(3) > td').length, 0)
objects = App.TicketPriority.all()
objects.splice(2,1)
result = table.update({sync: true, objects: objects})
equal(result[0], 'fullRender.lenghtChanged')
//equal(result[1][0], 1)
//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, 'check row 1')
equal(el.find('tbody > tr:nth-child(1) > td:first').text().trim(), '500 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').length, 1)
equal(el.find('tbody > tr:nth-child(2) > td').length, 0)
objects.splice(2,1)
result = table.update({sync: true, objects: objects})
equal(result[0], 'fullRender.lenghtChanged')
//equal(result[0], 'fullRender.contentRemoved')
//equal(result[1][0], 1)
//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, '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(), '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').length, 150)
equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
equal(el.find('.js-pager').first().find('.js-page').length, 0)
objects = [
{
id: 500,
name: '500 prio',
note: 'some note',
active: true,
created_at: '2014-06-10T10:17:30.000Z',
},
]
App.TicketPriority.refresh(objects)
objects = App.TicketPriority.all()
result = table.update({sync: true, objects: objects})
equal(result[0], 'fullRender.contentRemoved')
equal(el.find('.js-pager').first().find('.js-page').length, 2)
equal(el.find('.js-pager').first().find('.js-page.is-selected').length, 1)
equal(el.find('.js-pager').first().find('.js-page.is-selected').text(), '1')
el.find('.js-pager').first().find('.js-page:nth-child(2)').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(), '150 prio', 'check row 1')
equal(el.find('tbody > tr:nth-child(1) > td:nth-child(2)').text().trim(), '11.01.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 1')
equal(el.find('tbody > tr:nth-child(2) > td:first').text().trim(), '500 prio', 'check row 1')
equal(el.find('tbody > tr:nth-child(2) > td:nth-child(2)').text().trim(), '10.06.2014', 'check row 1')
equal(el.find('tbody > tr:nth-child(2) > td:nth-child(3)').text().trim(), 'true', 'check row 1')
equal(el.find('tbody > tr').length, 2)
equal(el.find('tbody > tr:nth-child(3) > td').length, 0)
equal(el.find('.js-pager').first().find('.js-page').length, 2)
equal(el.find('.js-pager').first().find('.js-page.is-selected').length, 1)
equal(el.find('.js-pager').first().find('.js-page.is-selected').text(), '2')
el.find('.js-pager').first().find('.js-page:nth-child(1)').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-pager').first().find('.js-page').length, 2)
equal(el.find('.js-pager').first().find('.js-page.is-selected').length, 1)
equal(el.find('.js-pager').first().find('.js-page.is-selected').text(), '1')
objects.splice(2,2)
result = table.update({sync: true, objects: objects})
equal(result[0], 'fullRender.contentRemoved')
equal(el.find('.js-pager').first().find('.js-page').length, 0)
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(), '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').length, 150)
equal(el.find('tbody > tr:nth-child(151) > td').length, 0)
objects = [
{
id: 501,
name: '501 prio',
note: 'some note',
active: true,
created_at: '2014-06-10T10:17:30.000Z',
},
]
App.TicketPriority.refresh(objects)
objects = App.TicketPriority.all()
result = table.update({sync: true, objects: objects})
equal(result[0], 'fullRender.contentRemoved')
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-pager').first().find('.js-page').length, 2)
equal(el.find('.js-pager').first().find('.js-page.is-selected').length, 1)
equal(el.find('.js-pager').first().find('.js-page.is-selected').text(), '1')
})