Add ajax filtering for commits list

Also handle commits list with Pager class to prevent code duplication

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

2 files changed, 31 insertions, 46 deletions

diff --git a/app/assets/javascripts/commits.js.coffee b/app/assets/javascripts/commits.js.coffee
index c183e78e513..2d33e0f6ebe 100644
--- a/app/assets/javascripts/commits.js.coffee
+++ b/app/assets/javascripts/commits.js.coffee
@@ -1,15 +1,5 @@
 class @CommitsList
-  @data =
-    ref: null
-    limit: 0
-    offset: 0
-  @disable = false
-
-  @showProgress: ->
-    $('.loading').show()
-
-  @hideProgress: ->
-    $('.loading').hide()
+  @timer = null
 
   @init: (ref, limit) ->
     $("body").on "click", ".day-commits-table li.commit", (event) ->
@@ -18,38 +8,35 @@ class @CommitsList
         e.stopPropagation()
         return false
 
-    @data.ref = ref
-    @data.limit = limit
-    @data.offset = limit
+    Pager.init limit, true
+
+    @content = $("#commits-list")
+    @searchField = $("#commits-search")
+    @initSearch()
 
-    this.initLoadMore()
-    this.showProgress()
+  @initSearch: ->
+    @timer = null
+    @searchField.keyup =>
+      clearTimeout(@timer)
+      @timer = setTimeout(@filterResults, 500)
+
+  @filterResults: =>
+    form = $(".commits-search-form")
+    search = @searchField.val()
+    commitsUrl = form.attr("action") + '?' + form.serialize()
+    @setOpacitiy("0.5")
 
-  @getOld: ->
-    this.showProgress()
     $.ajax
       type: "GET"
-      url: location.href
-      data: @data
-      complete: this.hideProgress
-      success: (data) ->
-        CommitsList.append(data.count, data.html)
+      url: form.attr("action")
+      data: form.serialize()
+      complete: =>
+        @setOpacitiy("1.0")
+      success: (data) =>
+        @content.html(data.html)
+        # Change url so if user reload a page - search results are saved
+        history.replaceState {page: commitsUrl}, document.title, commitsUrl
       dataType: "json"
 
-  @append: (count, html) ->
-    $("#commits-list").append(html)
-    if count > 0
-      @data.offset += count
-    else
-      @disable = true
-
-  @initLoadMore: ->
-    $(document).unbind('scroll')
-    $(document).endlessScroll
-      bottomPixels: 400
-      fireDelay: 1000
-      fireOnce: true
-      ceaseFire: =>
-        @disable
-      callback: =>
-        this.getOld()
+  @setOpacitiy: (opacity) ->
+    @content.css("opacity", opacity)
diff --git a/app/views/projects/commits/show.html.haml b/app/views/projects/commits/show.html.haml
index 0d652a832f5..5e59afcd783 100644
--- a/app/views/projects/commits/show.html.haml
+++ b/app/views/projects/commits/show.html.haml
@@ -19,7 +19,7 @@
 
     .pull-left.prepend-left-10
       = form_tag(namespace_project_commits_path(@project.namespace, @project, @ref), method: :get, class: 'pull-left commits-search-form') do
-        = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', class: 'form-control search-text-input', spellcheck: false }
+        = search_field_tag :search, params[:search], { placeholder: 'Filter by commit message', id: 'commits-search', class: 'form-control search-text-input', spellcheck: false }
 
     - if current_user && current_user.private_token
       .pull-left.prepend-left-10
@@ -31,11 +31,9 @@
     = commits_breadcrumbs
 
 %div{id: dom_id(@project)}
-  #commits-list= render "commits", project: @project
+  #commits-list.content_list= render "commits", project: @project
 .clear
 = spinner
 
-- if @commits.count == @limit
-  :javascript
-    CommitsList.init("#{@ref}", #{@limit});
-
+:javascript
+  CommitsList.init("#{@ref}", #{@limit});