recipientList add dynamic targets

using data-organisation for reference

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

@@ -43,15 +43,18 @@ class App.TicketCreate extends App.Controller
   showOrganisationMembers: (e) =>
     e.stopPropagation()
 
-    list = @$('.recipientList')
-    organisationList = @$('.recipientList-organisationMembers')
+    listEntry = $(e.currentTarget)
+    organisationId = listEntry.data('organisation')
+
+    @recipientList = @$('.recipientList')
+    @organisationList = @$("##{ organisationId }")
 
     # move organisation-list to the right and slide it in
 
-    $.Velocity.hook(organisationList, 'translateX', '100%')
-    organisationList.removeClass('hide')
+    $.Velocity.hook(@organisationList, 'translateX', '100%')
+    @organisationList.removeClass('hide')
 
-    organisationList.velocity
+    @organisationList.velocity
       properties:
         translateX: 0
       options:
@@ -59,21 +62,21 @@ class App.TicketCreate extends App.Controller
 
     # fade out list
 
-    list.velocity
+    @recipientList.velocity
       properties:
         translateX: '-100%'
       options:
         speed: 300
-        complete: -> list.height(organisationList.height())
+        complete: => @recipientList.height(@organisationList.height())
 
   hideOrganisationMembers: (e) =>
     e && e.stopPropagation()
-    list = @$('.recipientList')
-    organisationList = @$('.recipientList-organisationMembers')
+
+    return if !@organisationList
 
     # fade list back in
 
-    list.velocity
+    @recipientList.velocity
       properties:
         translateX: 0
       options:
@@ -81,16 +84,16 @@ class App.TicketCreate extends App.Controller
 
     # reset list height
 
-    list.height('')
+    @recipientList.height('')
 
     # slide out organisation-list and hide it
 
-    organisationList.velocity
+    @organisationList.velocity
       properties:
         translateX: '100%'
       options:
         speed: 300
-        complete: -> organisationList.addClass('hide')
+        complete: => @organisationList.addClass('hide')
 
   changeFormType: (e) =>
     type = $(e.target).data('type')

app/assets/javascripts/app/views/agent_ticket_create.jst.eco

@@ -33,8 +33,8 @@
               <span class="caret"></span>
             </div>
             <div class="dropdown-menu" aria-labelledby="customer_id">
-              <ul class="recipientList zIndex-1" role="menu">
-                <li class="recipientList-entry u-clickable horizontal center js-organisation">
+              <ul class="recipientList" role="menu">
+                <li class="recipientList-entry u-clickable horizontal center js-organisation" data-organisation="AlbrechtBertschlerGmbG">
                   <div class="recipientList-iconSpacer centered">
                     <div class="white organisation icon"></div>
                   </div>
@@ -44,7 +44,7 @@
                   </div>
                   <div class="white right arrow icon"></div>
 
-                <li class="recipientList-entry u-clickable horizontal center js-organisation">
+                <li class="recipientList-entry u-clickable horizontal center js-organisation" data-organisation="BENCHMARKhumanresources">
                   <div class="recipientList-iconSpacer centered">
                     <div class="white organisation icon"></div>
                   </div>
@@ -130,7 +130,7 @@
               </ul>
 
 
-              <ul class="recipientList-organisationMembers zIndex-3 hide">
+              <ul class="recipientList-organisationMembers hide" id="AlbrechtBertschlerGmbG">
                 <li class="recipientList-controls u-clickable js-back">
                   <div class="recipientList-backClickArea centered">
                     <div class="recipientList-backButton">
@@ -175,6 +175,36 @@
                     <span class="recipientList-detail">- Albrecht &amp; Bertschler GmbG</span>
                   </div>
               </ul>
+
+
+
+              <ul class="recipientList-organisationMembers hide" id="BENCHMARKhumanresources">
+                <li class="recipientList-controls u-clickable js-back">
+                  <div class="recipientList-backClickArea centered">
+                    <div class="recipientList-backButton">
+                      <div class="white arrow left icon"></div>
+                      <%- @T('Back') %>
+                    </div>
+                  </div>
+
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <div class="recipientList-iconSpacer centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat ">
+                    Hubert Lang
+                    <span class="recipientList-detail">- BENCHMARK human resources</span>
+                  </div>
+
+                <li class="recipientList-entry u-clickable horizontal center">
+                  <div class="recipientList-iconSpacer centered">
+                    <div class="white user icon"></div>
+                  </div>
+                  <div class="recipientList-name flex u-textTruncat ">
+                    Mario Steibel
+                    <span class="recipientList-detail">- BENCHMARK human resources</span>
+                  </div>
+              </ul>
             </div>
           </div>
         </div>