Removed inline JS and improved dropdown labels

app/assets/javascripts/todos.js

@@ -13,6 +13,7 @@
       this.perPage = this.el.data('perPage');
       this.clearListeners();
       this.initBtnListeners();
+      this.initFilters();
     }
 
     Todos.prototype.clearListeners = function() {
@@ -27,6 +28,61 @@
       return $('.todo').on('click', this.goToTodoUrl);
     };
 
+    Todos.prototype.initFilters = function() {
+      new UsersSelect();
+      this.initProjectFilterDropdown();
+      this.initTypeFilterDropdown();
+      this.initActionFilterDropdown();
+
+      $('form.filter-form').on('submit', function (event) {
+        event.preventDefault();
+        Turbolinks.visit(this.action + '&' + $(this).serialize());
+      });
+    };
+
+    Todos.prototype.initProjectFilterDropdown = function() {
+      $projectDropdown = $('.js-project-search');
+      $projectDropdown.glDropdown({
+        filterable: true,
+        selectable: true,
+        fieldName: 'project_id',
+        data: $projectDropdown.data('data'),
+        clicked: function() {
+          if ($projectDropdown.hasClass('js-filter-submit')) {
+            return $projectDropdown.closest('form.filter-form').submit();
+          }
+        }
+      });
+    };
+
+    Todos.prototype.initTypeFilterDropdown = function() {
+      $typeDropdown = $('.js-type-search');
+      $typeDropdown.glDropdown({
+        selectable: true,
+        fieldName: 'type',
+        data: $typeDropdown.data('data'),
+        clicked: function() {
+          if ($typeDropdown.hasClass('js-filter-submit')) {
+            return $typeDropdown.closest('form.filter-form').submit();
+          }
+        }
+      });
+    };
+
+    Todos.prototype.initActionFilterDropdown = function() {
+      $actionDropdown = $('.js-action-search');
+      $actionDropdown.glDropdown({
+        selectable: true,
+        fieldName: 'action_id',
+        data: $actionDropdown.data('data'),
+        clicked: function() {
+          if ($actionDropdown.hasClass('js-filter-submit')) {
+            return $actionDropdown.closest('form.filter-form').submit();
+          }
+        }
+      });
+    };
+
     Todos.prototype.doneClicked = function(e) {
       var $this;
       e.preventDefault();

app/helpers/todos_helper.rb

@@ -98,12 +98,22 @@ module TodosHelper
 
   def todo_types_options
     [
-      { text: 'Any Type', id: '' },
-      { text: 'Issue', id: 'Issue' },
-      { text: 'Merge Request', id: 'MergeRequest' }
+      { id: '', text: 'Any Type' },
+      { id: 'Issue', text: 'Issue' },
+      { id: 'MergeRequest', text: 'Merge Request' }
     ]
   end
 
+  def todo_actions_dropdown_label(selected_action_id, default_action)
+    selected_action = todo_actions_options.find { |action| action[:id] == selected_action_id.to_i}
+    selected_action ? selected_action[:text] : default_action
+  end
+
+  def todo_types_dropdown_label(selected_type, default_type)
+    selected_type = todo_types_options.find { |type| type[:id] == selected_type && type[:id] != '' }
+    selected_type ? selected_type[:text] : default_type
+  end
+
   private
 
   def show_todo_state?(todo)

app/views/dashboard/todos/index.html.haml

@@ -40,13 +40,13 @@
       .filter-item.inline
         - if params[:type].present?
           = hidden_field_tag(:type, params[:type])
-        = dropdown_tag(params[:type] || 'Type', options: { toggle_class: 'js-type-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-type js-filter-submit',
-          data: { data: todo_types_options, selected: params[:type], field_name: 'type', default_label: 'Type' } })
+        = dropdown_tag(todo_types_dropdown_label(params[:type], 'Type'), options: { toggle_class: 'js-type-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-type js-filter-submit',
+          data: { data: todo_types_options } })
       .filter-item.inline.actions-filter
         - if params[:action_id].present?
           = hidden_field_tag(:action_id, params[:action_id])
-        = dropdown_tag(params[:action_id] || 'Action', options: { toggle_class: 'js-action-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-action js-filter-submit',
-          data: { data: todo_actions_options, selected: params[:action_id], field_name: 'action_id', default_label: 'Action' } })
+        = dropdown_tag(todo_actions_dropdown_label(params[:action_id], 'Action'), options: { toggle_class: 'js-action-search js-filter-submit', dropdown_class: 'dropdown-menu-selectable dropdown-menu-action js-filter-submit',
+          data: { data: todo_actions_options }})
       .pull-right
         .dropdown.inline.prepend-left-10
           %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
@@ -80,48 +80,3 @@
     = paginate @todos, theme: "gitlab"
   - else
     .nothing-here-block You're all done!
-
-:javascript
-  new UsersSelect();
-
-  $projectDropdown = $('.js-project-search');
-  $projectDropdown.glDropdown({
-    filterable: true,
-    selectable: true,
-    fieldName: 'project_id',
-    data: $projectDropdown.data('data'),
-    clicked: function() {
-      if ($projectDropdown.hasClass('js-filter-submit')) {
-        return $projectDropdown.closest('form').submit();
-      }
-    }
-  });
-
-  $typeDropdown = $('.js-type-search');
-  $typeDropdown.glDropdown({
-    selectable: true,
-    fieldName: 'type_id',
-    data: $typeDropdown.data('data'),
-    clicked: function() {
-      if ($typeDropdown.hasClass('js-filter-submit')) {
-        return $typeDropdown.closest('form').submit();
-      }
-    }
-  });
-
-  $actionDropdown = $('.js-action-search');
-  $actionDropdown.glDropdown({
-    selectable: true,
-    fieldName: 'action_id',
-    data: $actionDropdown.data('data'),
-    clicked: function() {
-      if ($actionDropdown.hasClass('js-filter-submit')) {
-        return $actionDropdown.closest('form').submit();
-      }
-    }
-  });
-
-  $('form.filter-form').on('submit', function (event) {
-    event.preventDefault();
-    Turbolinks.visit(this.action + '&' + $(this).serialize());
-  });