Paginate + ajax filter dashboard projects

app/assets/javascripts/projects_list.js.coffee

@@ -11,16 +11,18 @@ class @ProjectsList
       uiBox = $('div.projects-list-holder')
       filterSelector = $(this).data('filter-selector') || 'span.filter-title'
 
-      if terms == "" || terms == undefined
-        uiBox.find("ul.projects-list li").show()
-      else
-        uiBox.find("ul.projects-list li").each (index) ->
-          name = $(this).find(filterSelector).text()
-
-          if name.toLowerCase().search(terms.toLowerCase()) == -1
-            $(this).hide()
-          else
-            $(this).show()
+      $('.projects-list-holder').css("opacity", '0.5')
+      form = $("#project-list-form")
+      project_filter_url = form.attr('action') + '?' + form.serialize()
+      $.ajax
+        type: "GET"
+        url: form.attr('action')
+        data: form.serialize()
+        complete: ->
+          $('.projects-list-holder').css("opacity", '1.0')
+        success: (data) ->
+          $('.projects-list-holder').html(data.html)
+          # Change url so if user reload a page - search results are saved
+          history.replaceState {page: project_filter_url}, document.title, project_filter_url
+        dataType: "json"
       uiBox.find("ul.projects-list li.bottom").hide()
-
-

app/controllers/application_controller.rb

@@ -277,9 +277,10 @@ class ApplicationController < ActionController::Base
     }
   end
 
-  def view_to_html_string(partial)
+  def view_to_html_string(partial, locals = nil)
     render_to_string(
-      partial,
+      partial: partial,
+      locals: locals,
       layout: false,
       formats: [:html]
     )

app/controllers/dashboard/projects_controller.rb

@@ -5,6 +5,13 @@ class Dashboard::ProjectsController < Dashboard::ApplicationController
     @projects = current_user.authorized_projects.sorted_by_activity.non_archived
     @projects = @projects.sort(@sort = params[:sort])
     @projects = @projects.includes(:namespace)
+
+    terms = params['filter_projects']
+
+    if terms.present?
+      @projects = @projects.search(terms)
+    end
+
     @projects = @projects.page(params[:page]).per(PER_PAGE)
     @last_push = current_user.recent_push
 
@@ -15,6 +22,11 @@ class Dashboard::ProjectsController < Dashboard::ApplicationController
         load_events
         render layout: false
       end
+      format.json do
+        render json: {
+          html: view_to_html_string("dashboard/projects/projects", locals: { projects: @projects })
+        }
+      end
     end
   end
 

app/controllers/explore/projects_controller.rb

@@ -11,14 +11,14 @@ class Explore::ProjectsController < Explore::ApplicationController
   end
 
   def trending
-    @trending_projects = TrendingProjectsFinder.new.execute(current_user)
-    @trending_projects = @trending_projects.non_archived
-    @trending_projects = @trending_projects.page(params[:page]).per(PER_PAGE)
+    @projects = TrendingProjectsFinder.new.execute(current_user)
+    @projects = @projects.non_archived
+    @projects = @projects.page(params[:page]).per(PER_PAGE)
   end
 
   def starred
-    @starred_projects = ProjectsFinder.new.execute(current_user)
-    @starred_projects = @starred_projects.reorder('star_count DESC')
-    @starred_projects = @starred_projects.page(params[:page]).per(PER_PAGE)
+    @projects = ProjectsFinder.new.execute(current_user)
+    @projects = @projects.reorder('star_count DESC')
+    @projects = @projects.page(params[:page]).per(PER_PAGE)
   end
 end

app/views/dashboard/_projects_head.html.haml

@@ -13,8 +13,9 @@
         Explore Projects
 
   .nav-controls
-    = search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control hidden-xs input-short', spellcheck: false
-    = render 'explore/projects/dropdown'
+    = form_tag '', method: :get, class: 'project-list-form', id: 'project-list-form' do |f|
+      .append-right-10.hidden-xs.hidden-sm
+        = search_field_tag :filter_projects, params[:filter_projects], placeholder: 'Filter by name...', class: 'projects-list-filter form-control issue_search search-text-input', spellcheck: false, id: 'projects-list-filter'
         - if current_user.can_create_project?
           = link_to new_project_path, class: 'btn btn-new' do
             = icon('plus')

app/views/dashboard/projects/_projects.html.haml

@@ -1,3 +1,6 @@
 .projects-list-holder
 
-  = render 'shared/projects/list', projects: @projects, ci: true
+  = render 'shared/projects/list', ci: true
+
+  :javascript
+    new ProjectsList();

app/views/explore/projects/_projects.html.haml

@@ -1,6 +1,6 @@
-- if projects.any?
+- if @projects.any?
   .public-projects
-    = render 'shared/projects/list', projects: projects
+    = render 'shared/projects/list'
 - else
   .nothing-here-block
     No such projects

app/views/explore/projects/starred.html.haml

@@ -7,5 +7,5 @@
   = render 'explore/head'
 
 = render 'explore/projects/nav'
-= render 'projects', projects: @starred_projects
-= paginate @starred_projects, theme: 'gitlab'
+= render 'projects', projects: @projects
+= paginate @projects, theme: 'gitlab'

app/views/explore/projects/trending.html.haml

@@ -7,4 +7,4 @@
   = render 'explore/head'
 
 = render 'explore/projects/nav'
-= render 'projects', projects: @trending_projects
+= render 'projects', projects: @projects

app/views/shared/projects/_list.html.haml

@@ -8,18 +8,20 @@
 - show_last_commit_as_description = false unless local_assigns[:show_last_commit_as_description] == true
 
 %ul.projects-list
-  - projects.each_with_index do |project, i|
+  - if @projects.any?
+    - @projects.each_with_index do |project, i|
       - css_class = (i >= projects_limit) ? 'hide' : nil
       = render "shared/projects/project", project: project, skip_namespace: skip_namespace,
         avatar: avatar, stars: stars, css_class: css_class, ci: ci, use_creator_avatar: use_creator_avatar,
         forks: forks, show_last_commit_as_description: show_last_commit_as_description
 
-  - if projects.size > projects_limit
+    - if @projects.size > projects_limit
       %li.bottom.center
         .light
-        #{projects_limit} of #{pluralize(projects.count, 'project')} displayed.
+          #{projects_limit} of #{pluralize(@projects.count, 'project')} displayed.
           = link_to '#', class: 'js-expand' do
             Show all
-
-:javascript
-  new ProjectsList();
+    = paginate @projects, theme: "gitlab"
+  - else
+    %h3 No projects found
+    %p.slead Try searching for a different project.