Fixes #5173 - Many new tickets for one customer leads to massive requ…

…ests to ticket_customer endpoint.

Co-authored-by: Mantas Masalskis <mm@zammad.com>
Co-authored-by: Dusan Vuckovic <dv@zammad.com>

app/assets/javascripts/app/lib/app_post/popover_provider/_popover_provider.coffee

@@ -39,12 +39,16 @@ class App.PopoverProvider
 
   bind: ->
 
+  onHide: (event, elem) ->
+
+  onShow: (event, elem) ->
+
   buildPopovers: (supplementaryData = {}) ->
     context = @
 
     selector = supplementaryData.selector || ".#{@cssClass()}"
 
-    @params.parentController.el.find(selector).popover(
+    @params.parentController.el.find(selector).popover('destroy').popover(
       trigger:    'hover'
       container:  'body'
       html:       true
@@ -57,6 +61,8 @@ class App.PopoverProvider
       content: ->
         context.buildContentFor(@, supplementaryData)
     )
+    @params.parentController.el.find(selector).on('show.bs.popover', (e) -> context.onShow(e, @))
+    @params.parentController.el.find(selector).on('hide.bs.popover', (e) -> context.onHide(e, @))
 
   clear: ->
     return if !@popovers

app/assets/javascripts/app/lib/app_post/popover_provider/_popover_provider_ajax.coffee

@@ -0,0 +1,24 @@
+class App.PopoverProviderAjax extends App.PopoverProvider
+  onHide: (event, elem) ->
+    $(event.target).attr('data-content', App.view('generic/page_loading')()).data('bs.popover').setContent()
+
+  onShow: (event, elem) ->
+    if @popoverLoop
+      @popoverLoop = false
+      return
+
+    @fetch(event, elem)
+
+  fetch: (event, elem) ->
+
+  replaceOnShow: (event, content) ->
+    $(event.target).popover('hide')
+    $(event.target).attr('data-content', content).data('bs.popover').setContent()
+    @popoverLoop = true
+    $(event.target).popover('show')
+
+  buildTitleFor: (elem) ->
+    $(elem).find('[title="*"]').val()
+
+  buildContentFor: (elem, supplementaryData) ->
+    App.view('generic/page_loading')()

app/assets/javascripts/app/lib/app_post/popover_provider/user_ticket_popover_provider.coffee

@@ -1,37 +1,39 @@
-class App.UserTicketPopoverProvider extends App.PopoverProvider
+class UserTicket extends App.PopoverProviderAjax
   @templateName = 'user_ticket_list'
 
-  fetch: (buildParams) ->
+  fetch: (event, elem) ->
     @params.parentController.ajax(
       type:  'GET'
       url:   "#{App.Config.get('api_path')}/ticket_customer"
       data:
-        customer_id: buildParams.user_id
+        customer_id: @buildParams.user_id
       processData: true
       success: (data, status, xhr) =>
         App.Collection.loadAssets(data.assets)
 
-        ticketsList = { open: data.ticket_ids_open, closed: data.ticket_ids_closed }
-        @callback(ticketsList: ticketsList, selector: buildParams.selector)
+        ticketList = { open: data.ticket_ids_open, closed: data.ticket_ids_closed }
+        html       = @buildContentFor(elem, { ticketList: ticketList, selector: @buildParams.selector })
+
+        @replaceOnShow(event, html[0].outerHTML)
     )
 
   build: (buildParams) ->
     return if !@checkPermissions()
-    @fetch(buildParams)
-
-  callback: (supplementaryData) ->
-    @clear(@popovers)
-    @popovers = @buildPopovers(supplementaryData)
-
-  buildTitleFor: (elem) ->
-    $(elem).find('[title="*"]').val()
+    @buildParams = buildParams
+    @popovers    = @buildPopovers(ticketList: {}, selector: buildParams.selector)
 
   buildContentFor: (elem, supplementaryData) ->
+    return super if _.isEmpty(supplementaryData.ticketList)
+
     type = $(elem).filter('[data-type]').data('type')
-    ticket_ids = supplementaryData.ticketsList[type] || []
+    ticket_ids = supplementaryData.ticketList[type] || []
 
     tickets = ticket_ids.map (ticketId) -> App.Ticket.fullLocal(ticketId)
+    @buildHtmlContent(
+      ticketList: App.view('generic/ticket_list')(
+        tickets: tickets
+        show_id: true
+      )
+    )
 
-    # insert data
-    @buildHtmlContent(tickets: tickets)
-
+App.PopoverProvider.registerProvider('UserTicket', UserTicket)

app/assets/stylesheets/zammad.scss

@@ -3309,6 +3309,10 @@ kbd {
   justify-content: center;
 }
 
+.popover .page-loading {
+  min-height: 100px;
+}
+
 .page-loading-label {
   @include bidi-style(margin-left, 10px, margin-right, 0);