Implement custom notification level options

3 files changed, 70 insertions, 15 deletions

diff --git a/app/assets/javascripts/dispatcher.js.coffee b/app/assets/javascripts/dispatcher.js.coffee
index 29ac0f70b30..ad0d2617294 100644
--- a/app/assets/javascripts/dispatcher.js.coffee
+++ b/app/assets/javascripts/dispatcher.js.coffee
@@ -75,6 +75,7 @@ class Dispatcher
       when 'projects:show'
         shortcut_handler = new ShortcutsNavigation()
 
+        new NotificationsForm()
         new TreeView() if $('#tree-slider').length
       when 'groups:activity'
         new Activities()
diff --git a/app/assets/javascripts/notifications_form.js.coffee b/app/assets/javascripts/notifications_form.js.coffee
new file mode 100644
index 00000000000..cfe8e133b66
--- /dev/null
+++ b/app/assets/javascripts/notifications_form.js.coffee
@@ -0,0 +1,49 @@
+class @NotificationsForm
+  constructor: ->
+    @form = $('.custom-notifications-form')
+
+    @removeEventListeners()
+    @initEventListeners()
+
+  removeEventListeners: ->
+    $(document).off 'change', '.js-custom-notification-event'
+
+  initEventListeners: ->
+    $(document).on 'change', '.js-custom-notification-event', @toggleCheckbox
+
+  toggleCheckbox: (e) =>
+    $checkbox = $(e.currentTarget)
+    $parent = $checkbox.closest('.checkbox')
+
+    @saveEvent($checkbox, $parent)
+
+  showCheckboxLoadingSpinner: ($parent) ->
+    $parent
+      .addClass 'is-loading'
+      .find '.custom-notification-event-loading'
+      .removeClass 'fa-check'
+      .addClass 'fa-spin fa-spinner'
+      .removeClass 'is-done'
+
+  saveEvent: ($checkbox, $parent) ->
+    $.ajax(
+      url: @form.attr('action')
+      method: 'patch'
+      dataType: 'json'
+      data: @form.serialize()
+      beforeSend: =>
+        @showCheckboxLoadingSpinner($parent)
+    ).done (data) ->
+      $checkbox.enable()
+
+      if data.saved
+        $parent
+          .find '.custom-notification-event-loading'
+          .toggleClass 'fa-spin fa-spinner fa-check is-done'
+
+        setTimeout(->
+          $parent
+            .removeClass 'is-loading'
+            .find '.custom-notification-event-loading'
+            .toggleClass 'fa-spin fa-spinner fa-check is-done'
+        , 2000)
diff --git a/app/assets/javascripts/project.js.coffee b/app/assets/javascripts/project.js.coffee
index 07be85a32a5..236f0899147 100644
--- a/app/assets/javascripts/project.js.coffee
+++ b/app/assets/javascripts/project.js.coffee
@@ -34,21 +34,26 @@ class @Project
       $(@).parents('.no-password-message').remove()
       e.preventDefault()
 
-    $('.update-notification').on 'click', (e) ->
-      e.preventDefault()
-      notification_level = $(@).data 'notification-level'
-      label = $(@).data 'notification-title'
-      $('#notification_setting_level').val(notification_level)
-      $('#notification-form').submit()
-      $('#notifications-button').empty().append("<i class='fa fa-bell'></i>" + label + "<i class='fa fa-angle-down'></i>")
-      $(@).parents('ul').find('li.active').removeClass 'active'
-      $(@).parent().addClass 'active'
-
-    $('#notification-form').on 'ajax:success', (e, data) ->
-      if data.saved
-        new Flash("Notification settings saved", "notice")
-      else
-        new Flash("Failed to save new settings", "alert")
+    $(document)
+      .off 'click', '.update-notification'
+      .on 'click', '.update-notification', (e) ->
+        e.preventDefault()
+        notificationLevel = $(@).data 'notification-level'
+        label = $(@).data 'notification-title'
+        $('.js-notification-loading').toggleClass 'fa-bell fa-spin fa-spinner'
+        $('#notification_setting_level').val(notificationLevel)
+        $('#notification-form').submit()
+
+    $(document)
+      .off 'ajax:success', '#notification-form'
+      .on 'ajax:success', '#notification-form', (e, data) ->
+        if data.saved
+          new Flash('Notification settings saved', 'notice')
+          $('.js-notification-toggle-btns')
+            .closest('.notification-dropdown')
+            .replaceWith(data.html)
+        else
+          new Flash('Failed to save new settings', 'alert')
 
 
     @projectSelectDropdown()