Fixes #3815 - When looking for customers, it is no longer possible to change into organizations.

app/assets/javascripts/app/controllers/organization_profile.coffee

@@ -153,7 +153,7 @@ class Object extends App.ControllerObserver
       elLocal.find('.js-userList').html(members)
     )
 
-    if @organization.member_ids.length < @memberLimit
+    if @organization.member_ids.length <= @memberLimit
       @el.find('.js-showMoreMembers').parent().addClass('hidden')
     else
       @el.find('.js-showMoreMembers').parent().removeClass('hidden')

app/assets/javascripts/app/controllers/widget/organization.coffee

@@ -33,7 +33,7 @@ class App.WidgetOrganization extends App.Controller
       elLocal.find('.js-userList').html(members)
     )
 
-    if @organization.member_ids.length < @memberLimit
+    if @organization.member_ids.length <= @memberLimit
       @el.find('.js-showMoreMembers').parent().addClass('hidden')
     else
       @el.find('.js-showMoreMembers').parent().removeClass('hidden')

app/assets/javascripts/app/lib/app_post/_object_organization_autocompletion.coffee

@@ -14,6 +14,7 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
     'click':                                  'stopPropagation'
     'change .js-objectId':                    'executeCallback'
     'click .js-remove':                       'removeThisToken'
+    'click .js-showMoreMembers':              'showMoreMembers'
 
   elements:
     '.recipientList':   'recipientList'
@@ -251,14 +252,42 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
       objectCount: objectCount
     )
 
+  showMoreMembers: (e) ->
+    @preventDefaultAndStopPropagation(e)
+
+    memberElement  = $(e.target).closest('.js-showMoreMembers')
+    oldMemberLimit = memberElement.attr('organization-member-limit')
+    newMemberLimit = (parseInt(oldMemberLimit / 25) + 1) * 25
+    memberElement.attr('organization-member-limit', newMemberLimit)
+
+    @renderMembers(memberElement, oldMemberLimit, newMemberLimit)
+
+  renderMembers: (element, fromMemberLimit, toMemberLimit) ->
+    id           = element.closest('.recipientList-organizationMembers').attr('organization-id')
+    organization = App.Organization.find(id)
+
+    # only first 10 members else we would need more ajax requests
+    organization.members(fromMemberLimit, toMemberLimit, (users) =>
+      for user in users
+        element.before(@buildObjectItem(user))
+
+      if element.closest('ul').hasClass('is-shown')
+        @showOrganizationMembers(undefined, element.closest('ul'))
+    )
+
+    if organization.member_ids.length <= toMemberLimit
+      element.addClass('hidden')
+    else
+      element.removeClass('hidden')
+
   buildOrganizationMembers: (organization) =>
-    organizationMemebers = $( App.view(@templateOrganizationItemMembers)(
+    organizationMembers = $( App.view(@templateOrganizationItemMembers)(
       organization: organization
     ) )
-    if organization[@referenceAttribute]
+
-      for objectId in organization[@referenceAttribute]
+    @renderMembers(organizationMembers.find('.js-showMoreMembers'), 0, 10)
-        object = App[@objectSingle].fullLocal(objectId)
+
-        organizationMemebers.append(@buildObjectItem(object))
+    organizationMembers
 
   buildObjectItem: (object) =>
     icon = @objectIcon
@@ -404,8 +433,7 @@ class App.ObjectOrganizationAutocompletion extends App.Controller
       e.stopPropagation()
       listEntry = $(e.currentTarget)
 
-    organizationId = listEntry.data('organization-id')
+    organizationId = listEntry.data('organization-id') || listEntry.attr('organization-id')
-
     @organizationList = @$("[organization-id=#{ organizationId }]")
 
     return if !@organizationList.get(0)

app/assets/javascripts/app/models/organization.coffee

@@ -36,7 +36,7 @@ Using **Organisations** you can **group** customers. This has among others two i
     userResult = ->
       users = []
       for user_id in member_ids
-        user = App.User.find(user_id)
+        user = App.User.fullLocal(user_id)
         continue if !user
         users.push(user)
       return users

app/assets/javascripts/app/views/generic/object_search/item_organization_members.jst.eco

@@ -4,4 +4,9 @@
       <%- @Icon('arrow-left') %>
       <span class="btn-label"><%- @T('Back') %></span>
     </div>
-</ul>
+
+  <li class="recipientList-controls js-showMoreMembers" organization-member-limit="10">
+    <div class="btn btn--action btn--onDark">
+      <span class="btn-label"><%- @T('show more') %></span>
+    </div>
+</ul>

app/assets/javascripts/app/views/popover/organization.jst.eco

@@ -3,7 +3,7 @@
 <% if  @object.member_ids: %>
   <hr>
   <div class="popover-block">
-    <label><%- @T('Members') %></label>
+    <label><%- @T('Members') %> (<%= @object.member_ids.length %>)</label>
     <div class="userList js-userList"></div>
   </div>
 <% end %>

spec/system/ticket/create_spec.rb

@@ -727,4 +727,56 @@ RSpec.describe 'Ticket Create', type: :system do
       expect(Ticket.last).to have_attributes(priority: another_priority)
     end
   end
+
+  describe 'When looking for customers, it is no longer possible to change into organizations #3815' do
+    before do
+      visit 'ticket/create'
+
+      # modal reaper ;)
+      sleep 3
+    end
+
+    context 'when less than 10 customers' do
+      let(:organization) { Organization.first }
+
+      it 'has no show more option' do
+        find('[name=customer_id_completion]').fill_in with: 'zam'
+        expect(page).to have_selector("li.js-organization[data-organization-id='#{organization.id}']")
+        page.find("li.js-organization[data-organization-id='#{organization.id}']").click
+        expect(page).to have_selector("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li.js-showMoreMembers.hidden", visible: :all)
+      end
+    end
+
+    context 'when more than 10 customers', authenticated_as: :authenticate do
+      def authenticate
+        customers
+        true
+      end
+
+      let(:organization) { create(:organization, name: 'Zammed') }
+      let(:customers) do
+        create_list(:customer, 50, organization: organization)
+      end
+
+      it 'does paginate through organization' do
+        find('[name=customer_id_completion]').fill_in with: 'zam'
+        expect(page).to have_selector("li.js-organization[data-organization-id='#{organization.id}']")
+        page.find("li.js-organization[data-organization-id='#{organization.id}']").click
+        wait(5).until { page.all("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li", visible: :all).count == 12 } # 10 users + back + show more button
+
+        expect(page).to have_selector("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li.js-showMoreMembers[organization-member-limit='10']")
+        scroll_into_view('li.js-showMoreMembers')
+        page.find("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li.js-showMoreMembers").click
+        wait(5).until { page.all("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li", visible: :all).count == 27 } # 25 users + back + show more button
+
+        expect(page).to have_selector("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li.js-showMoreMembers[organization-member-limit='25']")
+        scroll_into_view('li.js-showMoreMembers')
+        page.find("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li.js-showMoreMembers").click
+        wait(5).until { page.all("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li", visible: :all).count == 52 } # 50 users + back + show more button
+
+        scroll_into_view('li.js-showMoreMembers')
+        expect(page).to have_selector("ul.recipientList-organizationMembers[organization-id='#{organization.id}'] li.js-showMoreMembers.hidden", visible: :all, wait: 20)
+      end
+    end
+  end
 end