Permanent user based store of col. width and sort attributes.

This commit is contained in:
Martin Edenhofer 2015-10-23 15:41:33 +02:00
parent 453e201912
commit 82da8d8052
3 changed files with 152 additions and 82 deletions

View file

@ -1,15 +1,25 @@
class App.ControllerTable extends App.Controller class App.ControllerTable extends App.Controller
minColWidth: 20 minColWidth: 20
constructor: (params) -> constructor: (params) ->
for key, value of params for key, value of params
@[key] = value @[key] = value
@table = @tableGen(params) # apply personal preferences
data = @preferencesGet()
if data['order']
for key, value of data['order']
@[key] = value
if @el @headerWidth = {}
@el.append( @table ) if data['headerWidth']
for key, value of data['headerWidth']
@headerWidth[key] = value
@render()
render: =>
@html(@tableGen())
### ###
@ -51,6 +61,7 @@ class App.ControllerTable extends App.Controller
value value
new App.ControllerTable( new App.ControllerTable(
table_id: 'some_id_to_idientify_user_based_table_preferences'
el: element el: element
overview: ['host', 'user', 'adapter', 'active'] overview: ['host', 'user', 'adapter', 'active']
model: App.Channel model: App.Channel
@ -98,38 +109,38 @@ class App.ControllerTable extends App.Controller
### ###
tableGen: (data) -> tableGen: =>
if !data.model if !@model
data.model = {} @model = {}
overview = data.overview || data.model.configure_overview || [] overview = @overview || @model.configure_overview || []
attributes = data.attributes || data.model.configure_attributes || {} attributes = @attributes || @model.configure_attributes || {}
attributes = App.Model.attributesGet(false, attributes) attributes = App.Model.attributesGet(false, attributes)
destroy = data.model.configure_delete destroy = @model.configure_delete
# check if table is empty # check if table is empty
if _.isEmpty(data.objects) if _.isEmpty(@objects)
table = App.view('generic/admin/empty') table = App.view('generic/admin/empty')
explanation: data.explanation explanation: @explanation
return $(table) return $(table)
# group by # group by
if data.groupBy if @groupBy
# remove group by attribute from header # remove group by attribute from header
overview = _.filter( overview = _.filter(
overview overview
(item) -> (item) ->
return item if item isnt data.groupBy return item if item isnt @groupBy
return return
) )
# get new order # get new order
groupObjects = _.groupBy( groupObjects = _.groupBy(
data.objects @objects
(item) -> (item) ->
return '' if !item[data.groupBy] return '' if !item[@groupBy]
return item[data.groupBy].displayName() if item[data.groupBy].displayName return item[@groupBy].displayName() if item[@groupBy].displayName
item[data.groupBy] item[@groupBy]
) )
groupOrder = [] groupOrder = []
for group, value of groupObjects for group, value of groupObjects
@ -143,41 +154,71 @@ class App.ControllerTable extends App.Controller
) )
# create new data array # create new data array
data.objects = [] @objects = []
for group in groupOrder for group in groupOrder
data.objects = data.objects.concat groupObjects[group] @objects = @objects.concat groupObjects[group]
groupObjects[group] = [] # release old array groupObjects[group] = [] # release old array
# get header data # get header data
header = [] headers = []
for item in overview for item in overview
headerFound = false headerFound = false
for attributeName, attribute of attributes for attributeName, attribute of attributes
if attributeName is item if attributeName is item
headerFound = true headerFound = true
header.push attribute if @headerWidth[attribute.name]
attribute.style = "width: #{@headerWidth[attribute.name]}px"
headers.push attribute
else else
rowWithoutId = item + '_id' rowWithoutId = item + '_id'
if attributeName is rowWithoutId if attributeName is rowWithoutId
headerFound = true headerFound = true
header.push attribute if @headerWidth[attribute.name]
attribute.style = "width: #{@headerWidth[attribute.name]}px"
headers.push attribute
if @orderDirection && @orderBy
for header in headers
if header.name is @orderBy
@objects = _.sortBy(
@objects
(item) ->
# if we need to sort translated col.
if header.translate
App.i18n.translateInline(item[header.name])
# if we need to sort a relation
if header.relation
if item[header.name]
App[header.relation].find(item[header.name]).displayName()
else
''
else
item[header.name]
)
if @orderDirection is 'DESC'
header.sortOrderIcon = ['arrow-down', 'table-sort-arrow']
@objects = @objects.reverse()
else
header.sortOrderIcon = ['arrow-up', 'table-sort-arrow']
else
header.sortOrderIcon = undefined
# execute header callback # execute header callback
if data.callbackHeader if @callbackHeader
for callback in data.callbackHeader for callback in @callbackHeader
header = callback(header) headers = callback(headers)
# get content # get content
@log 'debug', 'table', 'header', header, 'overview', 'objects', data.objects @log 'debug', 'table', 'header', headers, 'overview', 'objects', @objects
table = App.view('generic/table')( table = App.view('generic/table')(
header: header header: headers
objects: data.objects objects: @objects
checkbox: data.checkbox checkbox: @checkbox
radio: data.radio radio: @radio
groupBy: data.groupBy groupBy: @groupBy
class: data.class class: @class
destroy: destroy destroy: destroy
callbacks: data.callbackAttributes callbacks: @callbackAttributes
) )
# convert to jquery object # convert to jquery object
@ -189,15 +230,15 @@ class App.ControllerTable extends App.Controller
#mouseover: 'alias' #mouseover: 'alias'
# bind col. # bind col.
if data.bindCol if @bindCol
for name, item of data.bindCol for name, item of @bindCol
if item.events if item.events
position = 0 position = 0
if data.checkbox if @checkbox
position += 1 position += 1
hit = false hit = false
for headerName in header for headerName in headers
if !hit if !hit
position += 1 position += 1
if headerName.name is name || headerName.name is "#{name}_id" if headerName.name is name || headerName.name is "#{name}_id"
@ -216,9 +257,9 @@ class App.ControllerTable extends App.Controller
) )
# bind row # bind row
if data.bindRow if @bindRow
if data.bindRow.events if @bindRow.events
for event, callback of data.bindRow.events for event, callback of @bindRow.events
do (table, event, callback) -> do (table, event, callback) ->
if cursorMap[event] if cursorMap[event]
table.find('tbody > tr').css( 'cursor', cursorMap[event] ) table.find('tbody > tr').css( 'cursor', cursorMap[event] )
@ -229,9 +270,9 @@ class App.ControllerTable extends App.Controller
) )
# bind bindCheckbox # bind bindCheckbox
if data.bindCheckbox if @bindCheckbox
if data.bindCheckbox.events if @bindCheckbox.events
for event, callback of data.bindCheckbox.events for event, callback of @bindCheckbox.events
do (table, event, callback) -> do (table, event, callback) ->
table.delegate('input[name="bulk"]', event, (e) -> table.delegate('input[name="bulk"]', event, (e) ->
e.stopPropagation() e.stopPropagation()
@ -241,18 +282,21 @@ class App.ControllerTable extends App.Controller
) )
# bind on delete dialog # bind on delete dialog
if data.model && destroy if @model && destroy
table.delegate('[data-type="destroy"]', 'click', (e) => table.delegate('[data-type="destroy"]', 'click', (e) =>
e.stopPropagation() e.stopPropagation()
e.preventDefault() e.preventDefault()
itemId = $(e.target).parents('tr').data('id') itemId = $(e.target).parents('tr').data('id')
item = data.model.find(itemId) item = @model.find(itemId)
new App.ControllerGenericDestroyConfirm( new App.ControllerGenericDestroyConfirm(
item: item item: item
container: @container container: @container
) )
) )
# if we have a personalised table
if @table_id
# enable resize column # enable resize column
table.on 'mousedown', '.js-col-resize', @onColResizeMousedown table.on 'mousedown', '.js-col-resize', @onColResizeMousedown
table.on 'click', '.js-col-resize', @stopPropagation table.on 'click', '.js-col-resize', @stopPropagation
@ -261,7 +305,7 @@ class App.ControllerTable extends App.Controller
table.on 'click', '.js-sort', @sortByColumn table.on 'click', '.js-sort', @sortByColumn
# enable checkbox bulk selection # enable checkbox bulk selection
if data.checkbox if @checkbox
# click first tr>td, catch click # click first tr>td, catch click
table.delegate('tr > td:nth-child(1)', event, (e) -> table.delegate('tr > td:nth-child(1)', event, (e) ->
@ -285,7 +329,7 @@ class App.ControllerTable extends App.Controller
) )
) )
return table table
stopPropagation: (event) => stopPropagation: (event) =>
event.stopPropagation() event.stopPropagation()
@ -316,17 +360,53 @@ class App.ControllerTable extends App.Controller
# switch to percentage # switch to percentage
resizeBaseWidth = @resizeTargetLeft.parents('table').width() resizeBaseWidth = @resizeTargetLeft.parents('table').width()
leftWidth = @resizeTargetLeft.outerWidth() leftWidth = @resizeTargetLeft.outerWidth()
rightWidth= @resizeTargetRight.outerWidth() rightWidth = @resizeTargetRight.outerWidth()
leftColumnKey = @resizeTargetLeft.attr('data-column-key') leftColumnKey = @resizeTargetLeft.attr('data-column-key')
rightColumnKey = @resizeTargetRight.attr('data-column-key') rightColumnKey = @resizeTargetRight.attr('data-column-key')
# save table changed widths # save table changed widths
# @storeColWidths [ storeColWidths = [
# { key: leftColumnKey, width: leftWidth } { key: leftColumnKey, width: leftWidth }
# { key: rightColumnKey, width: rightWidth } { key: rightColumnKey, width: rightWidth }
# ] ]
@log 'error', @table_id, 'leftColumnKey', leftColumnKey, leftWidth, 'rightColumnKey', rightColumnKey, rightWidth
@preferencesStore('headerWidth', leftColumnKey, leftWidth)
@preferencesStore('headerWidth', rightColumnKey, rightWidth)
sortByColumn: (event) => sortByColumn: (event) =>
column = $(event.currentTarget).closest('[data-column-key]').attr('data-column-key') column = $(event.currentTarget).closest('[data-column-key]').attr('data-column-key')
# sort # sort
if @orderBy isnt column
@orderBy = column
@orderDirection = 'ASC'
else
if @orderDirection is 'ASC'
@orderDirection = 'DESC'
else
@orderDirection = 'ASC'
@log 'debug', @table_id, 'sortByColumn', @orderBy, 'direction', @orderDirection
@preferencesStore('order', 'orderBy', @orderBy)
@preferencesStore('order', 'orderDirection', @orderDirection)
@render()
preferencesStore: (type, key, value) ->
data = @preferencesGet()
if !data[type]
data[type] = {}
if !data[type][key]
data[type][key] = {}
data[type][key] = value
localStorage.setItem(@preferencesStoreKey(), JSON.stringify(data))
preferencesGet: =>
storeKey = @preferencesStoreKey()
data = localStorage.getItem(storeKey)
return {} if !data
JSON.parse(data)
preferencesStoreKey: =>
"tablePreferences:#{@table_id}"

View file

@ -273,19 +273,6 @@ class Table extends App.Controller
headers.unshift(0) headers.unshift(0)
headers[0] = attribute headers[0] = attribute
headers headers
callbackSortOrderHeader = (headers) =>
return headers if !@overview
return headers if !@overview.order
return headers if !@overview.order.by
for header in headers
if header.name is @overview.order.by
if @overview.order.direction is 'DESC'
header.sortOrderIcon = ['arrow-down', 'table-sort-arrow']
else
header.sortOrderIcon = ['arrow-up', 'table-sort-arrow']
else
header.sortOrderIcon = undefined
headers
callbackIcon = (value, object, attribute, header, refObject) -> callbackIcon = (value, object, attribute, header, refObject) ->
value = ' ' value = ' '
attribute.class = object.iconClass() attribute.class = object.iconClass()
@ -294,12 +281,15 @@ class Table extends App.Controller
value value
new App.ControllerTable( new App.ControllerTable(
table_id: "ticket_overview_#{@overview_id}"
overview: @overview.view.s overview: @overview.view.s
el: @$('.table-overview') el: @$('.table-overview')
model: App.Ticket model: App.Ticket
objects: ticket_list_show objects: ticket_list_show
checkbox: checkbox checkbox: checkbox
groupBy: @overview.group_by groupBy: @overview.group_by
orderBy: @overview.order.by
orderDirection: @overview.order.direction
bindRow: bindRow:
events: events:
'click': openTicket 'click': openTicket
@ -307,7 +297,7 @@ class Table extends App.Controller
# customer_id: # customer_id:
# events: # events:
# 'mouseover': popOver # 'mouseover': popOver
callbackHeader: [ callbackIconHeader, callbackSortOrderHeader ] callbackHeader: [ callbackIconHeader ]
callbackAttributes: callbackAttributes:
icon: icon:
[ callbackIcon ] [ callbackIcon ]

View file

@ -15,8 +15,8 @@
<% end %> <% end %>
<% for item, i in @header: %> <% for item, i in @header: %>
<th<%= " class='#{ item.className }'" if item.className %><%= " style='#{ item.style }'" if item.style %> data-column-key="<%= item.name %>"> <th<%= " class='#{ item.className }'" if item.className %><%= " style='#{ item.style }'" if item.style %> data-column-key="<%= item.name %>">
<div class="table-column-head"> <div class="table-column-head js-sort">
<div class="table-column-title js-sort"> <div class="table-column-title">
<%- @T( item.display ) %> <%- @T( item.display ) %>
</div> </div>
<div class="table-column-sortIcon"> <div class="table-column-sortIcon">