Consolidate event bindings in EventEmailAddresser

Rather than a bunch of similar-looking event handlers, there's now just a couple of complex ones that do different stuff based on data- attributes. Also: close any 'add' or 'remove' dropdowns when the user clicks away
railsbridge · Oct 16, 2015 · f56c7ea · f56c7ea
1 parent 1bd8612
commit f56c7ea
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 65 deletions.
diff --git a/app/assets/javascripts/event_email_addresser.js.coffee b/app/assets/javascripts/event_email_addresser.js.coffee
@@ -12,58 +12,39 @@ Bridgetroll.EventEmailAddresser = {
 
   initRecipientSelect: ->
     $recipientMultiSelect = this.$recipientMultiSelect()
-    $recipientMultiSelect.select2({
+    $recipientMultiSelect.select2
       placeholder: 'Select recipients',
       width: '100%'
-    })
 
-    $('#recipients-add-all').on 'click', (e) ->
-      e.preventDefault()
-      recipientIds = _.map attendees, (attendee) ->
-        attendee.user_id
-      $recipientMultiSelect.val(recipientIds).trigger 'change'
-
-    $('#recipients-add-volunteers').on 'click', (e) =>
-      e.preventDefault()
-      roleId = $(e.target).data('role-id')
-      this.addRecipientGroup(roleId)
+    $('body').on 'click', (e) ->
+      $('.dropdown-container').removeClass('open')
 
-    $('#recipients-add-dropdown').on 'click', (e) ->
+    $('.dropdown-container').on 'click', (e) ->
       e.preventDefault()
-      $('#recipients-remove-dropdown').removeClass('open')
+      e.stopPropagation()
+      $(this).siblings('.dropdown-container').removeClass('open')
       $(this).toggleClass('open')
 
-    $('#recipients-add-accepted-students').on 'click', (e) =>
-      e.preventDefault()
-      roleId = $(e.target).data('role-id')
-      this.addRecipientGroup(roleId, 'accepted')
-
-    $('#recipients-add-waitlisted-students').on 'click', (e) =>
-      e.preventDefault()
-      roleId = $(e.target).data('role-id')
-      this.addRecipientGroup(roleId, 'waitlisted')
-
-    $('#recipients-add-all-students').on 'click', (e) =>
+    $('#recipients-add-dropdown .dropdown-menu a').on 'click', (e) =>
       e.preventDefault()
       roleId = $(e.target).data('role-id')
-      this.addRecipientGroup(roleId)
-
-    $('#recipients-remove-dropdown').on 'click', (e) ->
-      e.preventDefault()
-      $('#recipients-add-dropdown').removeClass('open')
-      $(this).toggleClass('open')
-
-    $('#recipients-remove-no-shows').on 'click', (e) =>
-      e.preventDefault()
-      this.removeNoShows()
+      roleState = $(e.target).data('role-state')
+      this.addRecipientGroup(roleId, roleState)
 
-    $('#recipients-remove-all').on 'click', (e) ->
+    $('#recipients-remove-dropdown .dropdown-menu a').on 'click', (e) =>
       e.preventDefault()
-      $recipientMultiSelect.val(null).trigger 'change'
+      checkinState = $(e.target).data('checkin-state')
+      if (checkinState == 'no-shows')
+        this.removeNoShows()
+      else
+        $recipientMultiSelect.val(null).trigger 'change'
 
   addRecipientGroup: (roleId, roleState) ->
-    recipientGroup = _.filter attendees, (attendee) ->
-      attendee.role_id == roleId
+    recipientGroup = attendees
+
+    if (roleId)
+      recipientGroup = _.filter recipientGroup, (attendee) ->
+        attendee.role_id == roleId
 
     if (roleState == 'accepted')
       recipientGroup = _.filter recipientGroup, (recipient) ->
@@ -72,8 +53,7 @@ Bridgetroll.EventEmailAddresser = {
       recipientGroup = _.filter recipientGroup, (recipient) ->
         recipient.waitlisted
 
-    recipientIds = _.map recipientGroup, (recipient) ->
-      recipient.user_id
+    recipientIds = _.pluck(recipientGroup, 'user_id')
 
     this.$recipientMultiSelect().val((i, currentVal) ->
       _.union(currentVal, recipientIds)
@@ -87,8 +67,7 @@ Bridgetroll.EventEmailAddresser = {
       recipientsWhoAttended = _.filter currentRecipients, (recipient) ->
         recipient.checkins_count > 0
 
-      recipientIds = _.map recipientsWhoAttended, (recipient) ->
-        recipient.user_id
+      recipientIds = _.pluck(recipientsWhoAttended, 'user_id')
 
       this.$recipientMultiSelect().val(recipientIds).trigger 'change'
 

diff --git a/app/views/events/emails/new.html.erb b/app/views/events/emails/new.html.erb
@@ -39,29 +39,29 @@
     <div class="col-md-8">
       <label>Recipients</label>
       <div class="recipient-dropdowns">
-        <div id="recipients-add-dropdown" class="btn-group">
+        <div id="recipients-add-dropdown" class="dropdown-container btn-group">
           <button class="btn-small btn-default dropdown-toggle">
             Add
             <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
             <li><a href="#" id="recipients-add-all">All</a></li>
             <li class="divider"></li>
-            <li><a href="#" id="recipients-add-volunteers" data-role-id=<%= Role::VOLUNTEER.id %>>Volunteers</a></li>
+            <li><a href="#" data-role-id=<%= Role::VOLUNTEER.id %>>Volunteers</a></li>
             <li class="divider"></li>
-            <li><a href="#" id="recipients-add-all-students" data-role-id=<%= Role::STUDENT.id %>>All Students</a></li>
-            <li><a href="#" id="recipients-add-accepted-students" data-role-id=<%= Role::STUDENT.id %>>Accepted Students</a></li>
-            <li><a href="#" id="recipients-add-waitlisted-students" data-role-id=<%= Role::STUDENT.id %>>Waitlisted Students</a></li>
+            <li><a href="#" data-role-id=<%= Role::STUDENT.id %>>All Students</a></li>
+            <li><a href="#" data-role-id=<%= Role::STUDENT.id %> data-role-state='accepted'>Accepted Students</a></li>
+            <li><a href="#" data-role-id=<%= Role::STUDENT.id %> data-role-state='waitlisted'>Waitlisted Students</a></li>
           </ul>
         </div>
-        <div id="recipients-remove-dropdown" class="btn-group">
+        <div id="recipients-remove-dropdown" class="dropdown-container btn-group">
           <button class="btn-small btn-default dropdown-toggle">
             Remove
             <span class="caret"></span>
           </button>
           <ul class="dropdown-menu">
-            <li><a href="#" id="recipients-remove-no-shows" alt="blah">No-shows</a></li>
-            <li><a href="#" id="recipients-remove-all">All</a></li>
+            <li><a href="#" data-checkin-state='no-shows'>No-shows</a></li>
+            <li><a href="#">All</a></li>
           </ul>
         </div>
       </div>

diff --git a/spec/features/event_email_request_spec.rb b/spec/features/event_email_request_spec.rb
@@ -31,30 +31,30 @@
   end
 
   it 'should show an accurate count of the # of people to be emailed when clicking buttons' do
-    click_button 'Add'
-    find('#recipients-add-volunteers').click
+    def choose_dropdown_option(dropdown_name, dropdown_option)
+      click_button dropdown_name
+      within "#recipients-#{dropdown_name.downcase}-dropdown" do
+        click_on(dropdown_option)
+      end
+    end
+
+    choose_dropdown_option('Add', 'Volunteers')
     expect(page).to have_content('2 people')
 
-    click_button 'Add'
-    find('#recipients-add-accepted-students').click
+    choose_dropdown_option('Add', 'Accepted Students')
     expect(page).to have_content('3 people')
 
-    click_button 'Add'
-    find('#recipients-add-all').click
+    choose_dropdown_option('Add', 'All')
     expect(page).to have_content('4 people')
 
-    click_button 'Remove'
-    find('#recipients-remove-all').click
+    choose_dropdown_option('Remove', 'All')
     expect(page).to have_content('0 people')
 
-    click_button 'Add'
-    find('#recipients-add-waitlisted-students').click
+    choose_dropdown_option('Add', 'Waitlisted Students')
     expect(page).to have_content('1 person')
 
-    click_button 'Add'
-    find('#recipients-add-all').click
-    click_button 'Remove'
-    find('#recipients-remove-no-shows').click
+    choose_dropdown_option('Add', 'All')
+    choose_dropdown_option('Remove', 'No-shows')
     expect(page).to have_content('1 person')
   end