Use new widget for small ticket lists. Reduced tags in tables.

app/assets/javascripts/app/controllers/agent_ticket_merge.js.coffee

@@ -16,7 +16,6 @@ class App.TicketMerge extends App.ControllerModal
       processData: true,
       success: (data, status, xhr) =>
 
-        # load assets
         App.Collection.loadAssets( data.assets )
 
         @ticket_ids_by_customer    = data.ticket_ids_by_customer
@@ -28,30 +27,16 @@ class App.TicketMerge extends App.ControllerModal
 
     @content = $App.view('agent_ticket_merge')()
 
-    list = []
+    new App.TicketList(
-    for ticket_id in @ticket_ids_by_customer
+      el:         @content.find('#ticket-merge-customer-tickets')
-      if ticket_id isnt @ticket.id
+      ticket_ids: @ticket_ids_by_customer
-        ticketItem = App.Ticket.fullLocal( ticket_id )
+      radio:      true
-        list.push ticketItem
-    new App.ControllerTable(
-      el:       @content.find('#ticket-merge-customer-tickets'),
-      overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
-      model:    App.Ticket,
-      objects:  list,
-      radio:    true,
     )
 
-    list = []
+    new App.TicketList(
-    for ticket_id in @ticket_ids_recent_viewed
-      if ticket_id isnt @ticket.id
-        ticketItem = App.Ticket.fullLocal( ticket_id )
-        list.push ticketItem
-    new App.ControllerTable(
       el:         @content.find('#ticket-merge-recent-tickets'),
-      overview: [ 'number', 'title', 'state', 'group', 'created_at' ]
+      ticket_ids: @ticket_ids_recent_viewed
-      model:    App.Ticket,
+      radio:      true
-      objects:  list,
-      radio:    true,
     )
 
     @content.delegate('[name="master_ticket_number"]', 'focus', (e) ->

app/assets/javascripts/app/controllers/widget/ticket_list.js.coffee

@@ -0,0 +1,68 @@
+class App.TicketList extends App.Controller
+  constructor: ->
+    super
+
+    @render()
+
+  render: =>
+
+    callbackTicketTitleAdd = (value, object, attribute, attributes, refObject) =>
+      attribute.title = object.title
+      value
+    callbackUserPopover = (value, object, attribute, attributes, refObject) =>
+      attribute.class = 'user-popover'
+      attribute.data =
+        id: refObject.id
+      value
+    callbackOrganizationPopover = (value, object, attribute, attributes, refObject) =>
+      attribute.class = 'organization-popover'
+      attribute.data =
+        id: refObject.id
+      value
+
+    callbackIconHeader = (header) ->
+      attribute =
+        name:       'icon'
+        display:    ''
+        translation: false
+        style:      'width: 28px'
+      header.unshift(0)
+      header[0] = attribute
+      header
+    callbackIcon = (value, object, attribute, header, refObject) ->
+      value = ' '
+      attribute.class  = object.icon()
+      attribute.link   = ''
+      attribute.title  = App.i18n.translateInline( object.iconTitle() )
+      value
+
+    list = []
+    for ticket_id in @ticket_ids
+      ticketItem = App.Ticket.fullLocal( ticket_id )
+      list.push ticketItem
+    @el.html('')
+    new App.ControllerTable(
+      el:       @el
+      overview: [ 'number', 'title', 'customer', 'group', 'created_at' ]
+      model:    App.Ticket
+      objects:  list
+      callbackHeader: callbackIconHeader
+      callbackAttributes:
+        icon:
+          [ callbackIcon ]
+        customer_id:
+          [ callbackUserPopover ]
+        organization_id:
+          [ callbackOrganizationPopover ]
+        owner_id:
+          [ callbackUserPopover ]
+        title:
+          [ callbackTicketTitleAdd ]
+      radio: @radio
+    )
+
+    # start user popups
+    @userPopups()
+
+    # start organization popups
+    @organizationPopups()

app/assets/javascripts/app/models/ticket.js.coffee

@@ -3,7 +3,7 @@ class App.Ticket extends App.Model
   @extend Spine.Model.Ajax
   @url: @apiPath + '/tickets'
   @configure_attributes = [
-      { name: 'number',                display: '#',            tag: 'input',    type: 'text', limit: 100, null: true, read_only: true,  style: 'width: 60px'  },
+      { name: 'number',                display: '#',            tag: 'input',    type: 'text', limit: 100, null: true, read_only: true,  style: 'width: 68px'  },
       { name: 'customer_id',           display: 'Customer',     tag: 'input',    type: 'text', limit: 100, null: false, autocapitalize: false, relation: 'User' },
       { name: 'organization_id',       display: 'Organization', tag: 'select',   relation: 'Organization', tagreadonly: 1 },
       { name: 'group_id',              display: 'Group',        tag: 'select',   multiple: false, limit: 100, null: false, relation: 'Group', style: 'width: 10%', edit: true },

app/assets/javascripts/app/views/generic/table.jst.eco

@@ -71,7 +71,7 @@
       <%   end %>
       <% end %>
 
-      <td <% if item.parentClass: %>class="<%= item.parentClass %>"<% end %>>
+      <td <% if item.parentClass: %>class="<%= item.parentClass %>"<% end %> <% if item.title: %>title="<%= item.title %>"<% end %>>
         <% if item.name is 'icon': %>
           <%- @Icon('priority', item.class) %>
         <% else: %>
@@ -81,10 +81,14 @@
           <% if item.raw: %>
             <%- item.raw %>
           <% else: %>
-          <span <% if item.class: %>class="<%= item.class %>"<% end %> <% if item.title: %>title="<%= item.title %>"<% end %> <% if item.data: %><% for data_key, data_item of item.data: %>data-<%- data_key %>="<%= data_item %>" <% end %><% end %>>
+            <% if item.class || item.data: %>
+            <span <% if item.class: %>class="<%= item.class %>"<% end %> <% if item.data: %><% for data_key, data_item of item.data: %>data-<%- data_key %>="<%= data_item %>" <% end %><% end %>>
+            <% end %>
             <%- value %>
+            <% if item.class || item.data: %>
             </span>
             <% end %>
+          <% end %>
           <% if item.link: %></a><% end %>
         <% end %>
       </td>