Good progress on pagination, but still a big bug with cocoon, mofo

Gemfile.lock

@@ -75,7 +75,7 @@ GEM
       rack-test (>= 0.5.4)
       xpath (~> 2.0)
     chronic (0.10.2)
-    cocoon (1.2.5)
+    cocoon (1.2.6)
     coffee-rails (4.0.1)
       coffee-script (>= 2.2.0)
       railties (>= 4.0.0, < 5.0)

app/assets/javascripts/application/item.js.coffee

@@ -144,6 +144,7 @@ class Item
     Item.templates["requirements"] = Handlebars.compile($("#requirements-template").html())
     Item.templates["account"] = Handlebars.compile($("#account-template").html())
     Item.templates["no-results"] = Handlebars.compile($("#no-results-template").html())
+    Item.templates["show-more"] = Handlebars.compile($("#show-more-template").html())
 
   @create: (item, layoutSize = "large") ->
     new Item(item, layoutSize)

app/assets/javascripts/application/number_formater.js.coffee

@@ -5,8 +5,11 @@ class NumberFormatter
   setup: ->
     @numbers.html @format
 
-  format: (i, oldHtml) ->
-    nb = parseInt(oldHtml)
+  format: (i, oldHtml) =>
+    @constructor.format(oldHtml)
+
+  @format: (html) ->
+    nb = parseInt(html)
     return nb if nb < 1000
     (nb / 1000).toFixed(1) + "k"
 

app/assets/javascripts/application/online_status.js.coffee

@@ -27,7 +27,7 @@ class OnlineStatus
 
     players
 
-  updateAccountStatuses: (accountNames = nil) ->
+  updateAccountStatuses: (accountNames = null) ->
     self = @
     accountNames = accountNames || @accountNames()
 

app/assets/javascripts/application/search_form_ajax.js.coffee

@@ -17,11 +17,27 @@ class AjaxForm
 
     @setupFacets()
 
+    @setupPagination()
+
   setupEvents: ->
     self = @
 
+    @$form.on "itemLoaded", (e) =>
+      @updateFormAction(e.page)
+      @updateURL(e.page)
+      @enhanceItems(e)
+      @updateTotalCount(e.page)
+      @setPageNb(e.page.current)
+
+    @$form.on "click", "input[type=submit]", (e) =>
+      e.preventDefault()
+      @$form.trigger({ type: "submit", page: @$form.find("#search-page").val() })
+
     $("body").on "submit", "#search-form", (e) ->
       e.preventDefault()
+      return false if self.working
+
+      self.setPageNb(e.page)
 
       self.beforeSubmit()
 
@@ -32,28 +48,40 @@ class AjaxForm
         dataType: 'json'
 
         success: (data) ->
-          self.$results.html("")
-          self.$sidebar.html("")
+          page = data.page
+
+          self.resetPageHtml()
           layoutSize = self.layoutSize()
 
-          self.renderItems(data.results)
+          self.renderItems(data.results, data.page)
           self.renderFacets(data.facets)
 
           self.$form.trigger(
             type: "itemLoaded",
-            results: data.results
+            results: data.results,
+            page: data.page
           )
 
-          self.updatePagination(data.pagination)
-
         error: ->
           alert("An error occured. If the problem persists, contact niuage[at]gmail.com.")
 
         complete: ->
           self.complete()
 
-    @$form.on "itemLoaded", (e) ->
-      self.enhanceItems()
+  resetPageHtml: ->
+    @$results.html("")
+    @$sidebar.html("")
+
+  updateTotalCount: (page) ->
+    @$innerHeader ||= $("#sub-header")
+    @$innerHeader.find("span.tag span").text(
+      App.NumberFormatter.format(page.results.totalCount)
+    )
+
+  updateFormAction: (page) ->
+    @$form.attr
+      action: page.formPath
+      method: if page.persisted then "PUT" else "POST"
 
   setupFacets: ->
     @$sidebar.on "click", ".facet li a", (e) =>
@@ -62,34 +90,73 @@ class AjaxForm
     @$sidebar.on "click", ".facet h3 a", (e) =>
       App.FacetHandler.reset(e, @$form)
 
+  setupPagination: ->
+    @$results.on "click", "#show-more", (e) =>
+      e.preventDefault()
+      $a = $(e.currentTarget)
+      page = $a.data("page")
+      @$form.find("#search-page").val(page)
+      console.log "trigger submit with ", page
+      @$form.trigger({ type: "submit", page: page })
+      $a.remove()
+      $('html, body').animate(
+        scrollTop: @$results.offset().top - 93,
+        500
+      )
+
   renderFacets: (facets) ->
     return if !facets || $.isEmptyObject(facets)
 
     $.each facets, (facetName, facet) =>
       @$sidebar.append @facetTemplate(App.Facet.create(facetName, facet).toJson())
 
-  renderItems: (results) ->
+  renderItems: (results, page) ->
     if results && results.length > 0
       $.each results, (i, result) =>
         @$results.append @resultTemplate(App.Item.create(result).toJson())
+      @renderPagination(page)
     else
       @$results.append App.Item.templates["no-results"]()
 
+  renderPagination: (page) ->
+    @$results.append(
+      App.Item.templates["show-more"]({ currentPage: page.current + 1 })
+    )
+
   beforeSubmit: ->
+    @working = true
     @$results.addClass("loading")
     @$sidebar.addClass("loading")
     @$submitButton.attr("disabled", "disabled")
 
   complete: ->
+    @working = false
     @$results.removeClass("loading")
     @$sidebar.removeClass("loading")
     @$form.find("input[type=submit]").removeAttr("disabled")
 
+    $removedStats = @$form.find(".nested-fields [id$=_destroy][value=1]")
+      .closest(".nested-fields")
+    $removedStats.next("input").remove()
+    $removedStats.remove()
+
   layoutSize: ->
     @$results.data("size")
 
-  updatePagination: (pagination) ->
-    @currentPage = pagination.currentPage
+  setPageNb: (nb) ->
+    if nb = parseInt(nb)
+      console.log "set page nb ", nb
+      @$form.find("#search-page").val(nb)
+    else
+      console.log "erase pg nb"
+      @$form.find("#search-page").val("")
+
+  updateURL: (page) ->
+    History.pushState(
+      page: page.current,
+      page.title,
+      page.path
+    )
 
   enhanceItems: ->
     App.ItemRenderer.setup("#results .result")

app/assets/stylesheets/application/_facets.css.scss

@@ -39,7 +39,7 @@
     @extend .right;
     @extend .small;
     margin-right: 6px;
-    line-height: 19px;
+    line-height: 13px;
     color: #da4f49;
     display: none;
 

app/assets/stylesheets/application/_header.css.scss

@@ -16,7 +16,7 @@
     z-index: 10001;
   }
 
-  #inner-header {
+  .inner-header {
     border-bottom: 1px solid $border-bottom-color;
     background: $header-color;
 //    @include box-shadow(0 1px 3px -2px rgba(0, 0, 0, 0.7));
@@ -190,7 +190,7 @@
     }
   }
 
-  #inner-header {
+  .inner-header {
     background: $sub-header-color image-url("subbg.png") center center repeat-y;
     border-bottom: 1px solid $sub-header-bottom-border-color;
 

app/assets/stylesheets/exiles/index.sass

@@ -101,7 +101,7 @@ form .input.string input, .btn
   .main-menu
     box-shadow: none
 
-  #inner-header
+  .inner-header
     background: #23416B
 
 [data-vote=button]

app/controllers/armour_searches_controller.rb

@@ -3,6 +3,10 @@ def typed_search
     ArmourSearch
   end
 
+  def new_polymorphic_search_path
+    new_armour_search_path
+  end
+
   def search_params
     params[:armour_search]
   end

app/controllers/misc_searches_controller.rb

@@ -3,6 +3,10 @@ def typed_search
     MiscSearch
   end
 
+  def new_polymorphic_search_path
+    new_misc_search_path
+  end
+
   def search_params
     params[:misc_search]
   end

app/controllers/searches_controller.rb

@@ -23,8 +23,8 @@ def new
 
   def create
     @search = typed_search.new(search_params)
-    @search.save
-    search if !@search.valid?
+    @search.save unless first_request?
+    search unless @search.valid?
 
     respond_with @search, location: location do |format|
       format.html
@@ -34,7 +34,7 @@ def create
 
   def update
     @search.update_attributes(search_params)
-    search if !@search.valid?
+    search unless @search.valid?
 
     respond_with @search, location: location do |format|
       format.html
@@ -44,15 +44,29 @@ def update
 
   private
 
+  def first_request?
+    request.xhr? && params[:first]
+  end
+
   def ajax_search
     search
 
+    page = params[:page].to_i
+    search_path = polymorphic_path(@search, page: page > 1 ? page : nil)
+
     render json: {
       results: @tire_search.results,
       facets: @results.facets,
-      pagination: {
-        total_pages: @results.total_pages,
-        current_page: @results.current_page
+      page: {
+        path: @search.persisted? ? search_path : new_polymorphic_search_path,
+        formPath: polymorphic_path(@search),
+        current: @results.current_page,
+        title: @search.to_s,
+        persisted: @search.persisted?,
+        results: {
+          totalPages: @results.total_pages,
+          totalCount: @results.total_count,
+        }
       }
     }
   end

app/controllers/weapon_searches_controller.rb

@@ -3,6 +3,10 @@ def typed_search
     WeaponSearch
   end
 
+  def new_polymorphic_search_path
+    new_weapon_search_path
+  end
+
   def search_params
     params[:weapon_search]
   end

app/models/elastic/base_search.rb

@@ -7,7 +7,10 @@ class BaseSearch
 
     def initialize(search, options)
       @search = search
-      @page = (options[:page] || 1).to_i
+
+      @page = (options[:page].presence || 1).to_i
+      @page = 1 if @page < 1
+
       self.per_page = options[:per_page]
 
       @context = nil

app/views/application/_sub_header.html.erb

@@ -1,5 +1,5 @@
 <div id="sub-header">
-  <div id="inner-header">
+  <div class="inner-header">
     <div class="wrapper-l">
       <div class="row-fluid">
         <span class="span2">

app/views/layouts/layout/header/_admin.html.erb

@@ -1,5 +1,5 @@
 <div id="header">
-  <div id="inner-header">
+  <div class="inner-header">
     <div class="wrapper-l">
       <div class="row-fluid">
         <span class="span2">

app/views/layouts/layout/header/_authentication_header.html.erb

@@ -1,5 +1,5 @@
 <div id="header">
-  <div id="inner-header">
+  <div class="inner-header">
     <div class="wrapper-l">
       <div class="row-fluid">
         <span class="span2">

app/views/layouts/layout/header/_header.html.erb

@@ -1,5 +1,5 @@
 <div id="header">
-  <div id="inner-header">
+  <div class="inner-header">
     <div class="wrapper-l">
       <div class="row-fluid">
         <span class="span2">
@@ -45,6 +45,8 @@
                   <li class="separator"></li>
                   <li><%= link_to "Profile", current_user %></li>
                   <li><%= link_to "Log out", destroy_user_session_path, method: :delete %></li>
+                <% else %>
+                  <li><%= link_to "Sign in", new_user_session_path %></li>
                 <% end %>
               </ul>
             </li>

app/views/searches/_form.html.erb

@@ -1,4 +1,4 @@
-<%= simple_form_for @search, html: { id: "search-form" } do |f| %>
+<%= simple_form_for @search, url: polymorphic_path(@search, first: true), html: { id: "search-form" } do |f| %>
   <% @form.form = f %>
 
   <%= render @form %>
@@ -38,12 +38,17 @@
   </div>
 
   <%= f.input :order_by_mod_id, as: :hidden, input_html: { id: "order-by-mod-id" } %>
+
+  <%= hidden_field_tag :page, nil, id: "search-page" %>
 <% end %>
 
 <% content_for :dom_ready do %>
   App.Item.cacheTemplates();
   App.AjaxForm.setup();
-  $("#search-form").submit();
+  $("#search-form").trigger({
+    type: "submit",
+    page: '<%= params[:page].to_i %>'
+  });
 
   App.SearchForm.setup();
   App.InputHighlighter.setup();