Package Sorting in tablei by columns

Hi, I need to create a table using App.ControllTable that will have the ability to sort by column. This is my code:

class AssetModel extends App.ControllerSubContent
@requiredPermission: ‘admin.assetModel’
header: __(‘Lista modeli’)

events:
‘click .js-description’: ‘showDescriptionModal’
‘click .js-new-assetModel’: ‘showNewAssetModelModal’

constructor: →
super
@load()

load: =>
@startLoading()

@ajax(
  id: 'asset_model_index'
  type: 'GET'
  url: "#{@apiPath}/asset_models/"
  processData: true
  success: (data) =>
    @stopLoading()
    @render(data)
)

removeAssetModel: (id) =>
new App.ControllerConfirm(
message: __(‘Are you sure?’)
buttonClass: ‘btn–danger’
callback: =>
@ajax(
id: ‘asset_model_remove’
type: ‘DELETE’
url: “#{@apiPath}/asset_models/#{id}”
success: =>
@stopLoading()
@load()
)
container: @el.closest(‘.content’)
)

editAssetModels: (data, id) =>
assetModelData = _.find(data, (assetModelData) → assetModelData.id is id)
@showEditAssetModelModal(assetModelData)

renderTable: (customData, el) =>
new App.ControllerTable(
el: el
overviewAttributes: [‘name’,‘manufacturer_model_id’,‘category_model_id’]
attribute_list: [
{ name: ‘name’, display: __(‘Nazwa’)},
{ name: ‘manufacturer_model_id’, display: __(‘Producent’) },
{ name: ‘category_model_id’, display: __(‘Kategoria’) },
]
objects: customData
bindRow:
events:
‘click’: (id) => @editAssetModels(customData, id)
customActions: [
{
name: ‘edit’,
display: __(‘Edit’)
icon: ‘pen’
class: ‘js-edit’
callback: (id) => @editAssetModels(customData, id)
},
{
name: ‘remove’,
display: __(‘Remove’)
icon: ‘trash’
class: ‘btn–danger js-remove’
callback: @removeAssetModel
available: (assetModelData) →
not assetModelData.is_synchronized_from_codebase
},
]
)

render: (customData) =>
content = $(App.view(‘asset_model/index’)(
hasDescriptionButton: customData.length > 0,
))

if customData.length > 0
  @renderTable(customData, content.find('.js-content-container'))
else
  content.find('.js-content-container').html(@description())

@html content

description: →
$(App.view(‘asset_model/description’)(
inlineAssetModelKey: App.Browser.hotkeys().split(‘+’).reverse().join(‘+’) + ‘+t’
))

showDescriptionModal: =>
new AssetModelDescriptionModal
contentInline: @description()
container: @el.closest(‘.content’)

showNewAssetModelModal: =>
new AssetModelModal
headPrefix: __(‘New’)
container: @el.closest(‘.content’)
successCallback: =>
@load()

showEditAssetModelModal: (assetModelData) =>
new AssetModelModal
headPrefix: __(‘Edit’)
data: assetModelData
container: @el.closest(‘.content’)
successCallback: =>
@load()

class AssetModelDescriptionModal extends App.ControllerModal
head: __(‘Description’)
buttonSubmit: __(‘Close’)
shown: true

onSubmit: =>
@close()

class AssetModelModal extends App.ControllerModal
head: __(‘Model’)
shown: true
buttonSubmit: true
buttonCancel: true
large: true

constructor: →
super
@load()

load: =>
@startLoading()

@ajax(
  id: 'manufacturer_model_index'
  type: 'GET'
  url: "#{@apiPath}/manufacturer_models/"
  processData: true
  success: (data) =>
    @stopLoading()
    @manufacturer_models = data
    @render()
)

@ajax(
  id: 'category_model_index'
  type: 'GET'
  url: "#{@apiPath}/category_models/"
  processData: true
  success: (data) =>
    @stopLoading()
    @category_models = data
    @render()
)

content: →
false

render: =>
if @manufacturer_models? and @category_models?
super

  content = $(App.view('asset_model/form')())

  category_model_options = _.reduce(@category_models, (acc, category_model) ->
    acc[category_model.id] = category_model.name
    acc
  , {})

  manufacturer_model_options = _.reduce(@manufacturer_models, (acc, manufacturer_model) ->
    acc[manufacturer_model.id] = manufacturer_model.name
    acc
  , {})

  @form = new App.ControllerForm(
    el: content.find('.js-form')
    model:
      configure_attributes: [
        { name: 'name', display: __('Nazwa'), tag: 'input', null: true, },
        { name: 'manufacturer_model_id', display: __('Producent'), tag: 'searchable_select', class: 'input',null: true, options: manufacturer_model_options },
        { name: 'category_model_id', display: __('Kategoria'), tag: 'searchable_select', class: 'input', null: true, options: category_model_options },
      ]
    params: @data
  )

  callback = (data) =>
    @objects = data.items
    return if data.items.length >= data.total_count

  @el.find('.modal-body').html(content)

onSubmit: (e) =>
params = @formParam(e.target)
error = @form.validate(params)

if error
  @formValidate(form: e.target, errors: error)
  return false

@formDisable(e)

isEditing = Boolean(@data)

if isEditing
  @ajax({
  id: 'asset_models_edit',
  type: 'PUT',
  url: "#{@apiPath}/asset_models/#{@data.id}",
  data: JSON.stringify(params),
  processData: true,
  success: (data) =>
    @close()
    @successCallback()
  })
  return
@ajax({
  id: 'asset_models_add',
  type: 'POST',
  url: "#{@apiPath}/asset_models/",
  data: JSON.stringify(params),
  processData: true,
  success: (data) =>
    @close()
    @successCallback()
})

App.Config.set(‘AssetModel’, { prio: 3400, name: __(‘Lista modeli’), parent: ‘#orders’, target: ‘#orders/asset_models’, controller: AssetModel, permission: [‘admin.assetModels’] }, ‘NavBarAdmin’)

Your code is super hard to read. Please consider code tags.

Sorry I didn’t notice

class AssetModel extends App.ControllerSubContent
  @requiredPermission: 'admin.assetModel'
  header: __('Lista modeli')

  events:
    'click .js-description': 'showDescriptionModal'
    'click .js-new-assetModel': 'showNewAssetModelModal'

  constructor: ->
    super
    @load()

  load: =>
    @startLoading()

    @ajax(
      id: 'asset_model_index'
      type: 'GET'
      url: "#{@apiPath}/asset_models/"
      processData: true
      success: (data) =>
        @stopLoading()
        @render(data)
    )

  removeAssetModel: (id) =>
    new App.ControllerConfirm(
      message: __('Are you sure?')
      buttonClass: 'btn--danger'
      callback: =>
        @ajax(
          id: 'asset_model_remove'
          type: 'DELETE'
          url: "#{@apiPath}/asset_models/#{id}"
          success: =>
            @stopLoading()
            @load()
        )
      container: @el.closest('.content')
    )

  editAssetModels: (data, id) =>
    assetModelData = _.find(data, (assetModelData) -> assetModelData.id is id)
    @showEditAssetModelModal(assetModelData)

  renderTable: (customData, el) =>
    new App.ControllerTable(
      el: el
      overviewAttributes: ['name','manufacturer_model_id','category_model_id']
      attribute_list: [
        { name: 'name', display: __('Nazwa')},
        { name: 'manufacturer_model_id', display: __('Producent') },
        { name: 'category_model_id', display: __('Kategoria') },
      ]
      objects: customData
      bindRow:
        events:
          'click': (id) => @editAssetModels(customData, id)
      customActions: [
        {
          name: 'edit',
          display: __('Edit')
          icon: 'pen'
          class: 'js-edit'
          callback: (id) => @editAssetModels(customData, id)
        },
        {
          name: 'remove',
          display: __('Remove')
          icon: 'trash'
          class: 'btn--danger js-remove'
          callback: @removeAssetModel
          available: (assetModelData) ->
           not assetModelData.is_synchronized_from_codebase
        },
      ]
    )

  render: (customData) =>
    content = $(App.view('asset_model/index')(
      hasDescriptionButton: customData.length > 0,
    ))

    if customData.length > 0
      @renderTable(customData, content.find('.js-content-container'))
    else
      content.find('.js-content-container').html(@description())

    @html content



  description: ->
    $(App.view('asset_model/description')(
      inlineAssetModelKey: App.Browser.hotkeys().split('+').reverse().join('+') + '+t'
    ))

  showDescriptionModal: =>
    new AssetModelDescriptionModal
      contentInline: @description()
      container: @el.closest('.content')

  showNewAssetModelModal: =>
    new AssetModelModal
      headPrefix: __('New')
      container: @el.closest('.content')
      successCallback: =>
        @load()

  showEditAssetModelModal: (assetModelData) =>
    new AssetModelModal
      headPrefix: __('Edit')
      data: assetModelData
      container: @el.closest('.content')
      successCallback: =>
        @load()

class AssetModelDescriptionModal extends App.ControllerModal
  head: __('Description')
  buttonSubmit: __('Close')
  shown: true

  onSubmit: =>
    @close()

class AssetModelModal extends App.ControllerModal
  head: __('Model')
  shown: true
  buttonSubmit: true
  buttonCancel: true
  large: true

  constructor: ->
    super
    @load()

  load: =>
    @startLoading()

    @ajax(
      id: 'manufacturer_model_index'
      type: 'GET'
      url: "#{@apiPath}/manufacturer_models/"
      processData: true
      success: (data) =>
        @stopLoading()
        @manufacturer_models = data
        @render()
    )

    @ajax(
      id: 'category_model_index'
      type: 'GET'
      url: "#{@apiPath}/category_models/"
      processData: true
      success: (data) =>
        @stopLoading()
        @category_models = data
        @render()
    )

  content: ->
    false

  render: =>
    if @manufacturer_models? and @category_models?
      super

      content = $(App.view('asset_model/form')())

      category_model_options = _.reduce(@category_models, (acc, category_model) ->
        acc[category_model.id] = category_model.name
        acc
      , {})

      manufacturer_model_options = _.reduce(@manufacturer_models, (acc, manufacturer_model) ->
        acc[manufacturer_model.id] = manufacturer_model.name
        acc
      , {})

      @form = new App.ControllerForm(
        el: content.find('.js-form')
        model:
          configure_attributes: [
            { name: 'name', display: __('Nazwa'), tag: 'input', null: true, },
            { name: 'manufacturer_model_id', display: __('Producent'), tag: 'searchable_select', class: 'input',null: true, options: manufacturer_model_options },
            { name: 'category_model_id', display: __('Kategoria'), tag: 'searchable_select', class: 'input', null: true, options: category_model_options },
          ]
        params: @data
      )

      callback = (data) =>
        @objects = data.items
        return if data.items.length >= data.total_count

      @el.find('.modal-body').html(content)

  onSubmit: (e) =>
    params = @formParam(e.target)
    error = @form.validate(params)

    if error
      @formValidate(form: e.target, errors: error)
      return false

    @formDisable(e)

    isEditing = Boolean(@data)
  
    if isEditing
      @ajax({
      id: 'asset_models_edit',
      type: 'PUT',
      url: "#{@apiPath}/asset_models/#{@data.id}",
      data: JSON.stringify(params),
      processData: true,
      success: (data) =>
        @close()
        @successCallback()
      })
      return
    @ajax({
      id: 'asset_models_add',
      type: 'POST',
      url: "#{@apiPath}/asset_models/",
      data: JSON.stringify(params),
      processData: true,
      success: (data) =>
        @close()
        @successCallback()
    })

App.Config.set('AssetModel', { prio: 3400, name: __('Lista modeli'), parent: '#orders', target: '#orders/asset_models', controller: AssetModel, permission: ['admin.assetModels'] }, 'NavBarAdmin')