Permanent user based store of col. width and sort attributes.
This commit is contained in:
parent
453e201912
commit
82da8d8052
3 changed files with 152 additions and 82 deletions
|
@ -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}"
|
||||||
|
|
|
@ -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 ]
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in a new issue