Paginated view

.gitignore

@@ -1,3 +1,4 @@
+.byebug_history
 .bundle/
 log/*.log
 pkg/

Gemfile.lock

@@ -2,19 +2,21 @@ PATH
   remote: .
   specs:
     bookingsync_portal (1.0.1)
-      bookingsync_application (>= 3, < 4)
+      bookingsync_application (>= 3)
       bootstrap-bookingsync-sass (~> 1.0.0)
       bootstrap-sass (< 3.5)
       coffee-rails
       font-awesome-sass (= 4.7.0)
       handlebars_assets
       jquery-rails
       jquery-ui-rails (~> 6.0.1)
-      message_bus
+      kaminari
+      message_bus (= 2.0.2)
       rails
+      ransack
       redis
       responders
-      sass-rails
+      sass-rails (~> 5)
       simple_form
       sprockets-rails
       turbolinks
@@ -95,6 +97,7 @@ GEM
       autoprefixer-rails (>= 5.2.1)
       sassc (>= 2.0.0)
     builder (3.2.4)
+    byebug (11.1.1)
     coderay (1.1.2)
     coffee-rails (5.0.0)
       coffee-script (>= 2.2.0)
@@ -147,14 +150,26 @@ GEM
       concurrent-ruby
       railties (>= 4.1)
     jwt (2.2.1)
+    kaminari (1.2.0)
+      activesupport (>= 4.1.0)
+      kaminari-actionview (= 1.2.0)
+      kaminari-activerecord (= 1.2.0)
+      kaminari-core (= 1.2.0)
+    kaminari-actionview (1.2.0)
+      actionview
+      kaminari-core (= 1.2.0)
+    kaminari-activerecord (1.2.0)
+      activerecord
+      kaminari-core (= 1.2.0)
+    kaminari-core (1.2.0)
     loofah (2.4.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
       mini_mime (>= 0.1.1)
     marcel (0.3.3)
       mimemagic (~> 0.3.2)
-    message_bus (2.2.3)
+    message_bus (2.0.2)
       rack (>= 1.1.3)
     method_source (0.9.2)
     mimemagic (0.3.4)
@@ -188,6 +203,8 @@ GEM
     parallel (1.19.1)
     parser (2.7.0.2)
       ast (~> 2.4.0)
+    polyamorous (2.3.2)
+      activerecord (>= 5.2.1)
     pry (0.12.2)
       coderay (~> 1.1.0)
       method_source (~> 0.9.0)
@@ -227,6 +244,11 @@ GEM
       thor (>= 0.19.0, < 2.0)
     rainbow (3.0.0)
     rake (13.0.1)
+    ransack (2.3.2)
+      activerecord (>= 5.2.1)
+      activesupport (>= 5.2.1)
+      i18n
+      polyamorous (= 2.3.2)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
@@ -265,16 +287,14 @@ GEM
     sass-listen (4.0.0)
       rb-fsevent (~> 0.9, >= 0.9.4)
       rb-inotify (~> 0.9, >= 0.9.7)
-    sass-rails (6.0.0)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.2.1)
+    sass-rails (5.1.0)
+      railties (>= 5.2.0)
+      sass (~> 3.1)
+      sprockets (>= 2.8, < 4.0)
+      sprockets-rails (>= 2.0, < 4.0)
+      tilt (>= 1.1, < 3)
+    sassc (2.4.0)
       ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
     shoulda (3.6.0)
       shoulda-context (~> 1.0, >= 1.0.1)
       shoulda-matchers (~> 3.0)
@@ -322,6 +342,7 @@ PLATFORMS
 DEPENDENCIES
   appraisal
   bookingsync_portal!
+  byebug
   factory_girl_rails
   pry-rails
   rails-controller-testing

app/assets/javascripts/bookingsync_portal/admin/application.js.coffee

@@ -21,6 +21,7 @@
 #= require bookingsync/form
 #= require ./vendor/css-contains
 #= require ./lib/list-filter
+#= require ./lib/list-backend-filter
 #= require_tree ./templates
 #= require_tree .
 

app/assets/javascripts/bookingsync_portal/admin/lib/list-backend-filter.js.coffee

@@ -0,0 +1,118 @@
+class @ListBackedFilter
+  constructor: (header, list, @listElement, @listFilterable, @inputId, formTemplate, paginationTemplate) ->
+    @header = $(header)
+    @list = $(list)
+    @form = $(formTemplate)
+    @insertForm()
+    @observeFormChanges()
+
+    @paginationTemplate ||= $(HandlebarsTemplates["pagination"]())
+    @insertPagination()
+    @observePageChanges()
+
+    @loadingTemplate = $(HandlebarsTemplates["loading"]()) 
+
+    @doneTypingInterval = 1500 # 1.5 seconds wait after each keyup before sending search request
+    @typingTimer = undefined
+
+    @currentSearchQuery = @form.serialize()
+
+  insertForm: ->
+    @form.appendTo(@header)
+    @input = $("#" + @inputId)
+
+  insertPagination: ->
+    @paginationTemplate.find("[data-type=previous]").addClass("disabled")
+    @setPage(1)
+    $(@paginationTemplate).appendTo(@list.parent())
+    @refreshPagination()
+
+  refreshPagination: ->
+    if @firstPage()
+      @paginationTemplate.find("[data-type=previous]").addClass("disabled")
+    else
+      @paginationTemplate.find("[data-type=previous]").removeClass("disabled")
+
+    if @lastPage()
+      @paginationTemplate.find("[data-type=next]").addClass("disabled") 
+    else
+      @paginationTemplate.find("[data-type=next]").removeClass("disabled") 
+
+  setPage: (page)->
+    $(@form).data("current-page", page)
+
+  currentPage: ->
+    $(@form).data("current-page")
+
+  firstPage: ->
+    @currentPage() == 1
+
+  lastPage: ->
+    $(".bookingsync-rentals-list").find(".panel").length < $("body").data("items-per-page")
+    if @form.parents(".bookingsync-rentals-list").length > 0
+      itemsCount = $("body").data("rentals-records-count")
+    else
+      itemsCount = $("body").data("remote-rentals-records-count")
+    parseInt(itemsCount) < $("body").data("items-per-page")
+
+  observeFormChanges: ->
+    @input.on 'keyup', (e) =>
+      @startSearching()
+
+    @input.on 'change', =>
+      @startSearching()
+
+    @form.on 'change', (e) =>
+      @startSearching()
+
+  startSearching: =>
+    return if @currentSearchQuery == @form.serialize()
+    @currentSearchQuery = @form.serialize()
+    @setPage(1)
+    @displayWaiting()
+    clearTimeout(@typingTimer)
+    @typingTimer = setTimeout(@backendSearch, @doneTypingInterval) # make search request only when user is done typing
+
+  observePageChanges: ->
+    @paginationTemplate.find("[data-type=previous]").on "click", @goToPreviousPage
+    @paginationTemplate.find("[data-type=next]").on "click", @goToNextPage
+
+  displayWaiting: ->
+    @list.html(@loadingTemplate) unless @list.children()[0] == @loadingTemplate[0]
+    @paginationTemplate.find("[data-type=previous]").addClass("disabled")
+    @paginationTemplate.find("[data-type=next]").addClass("disabled")
+
+  backendSearch: =>
+    $.get(@getSearchQuery(), @afterSearch)
+
+  afterSearch: =>
+    @refreshPagination()
+
+  getSearchQuery: ->
+    if @form.parents(".bookingsync-rentals-list").length > 0
+      fieldName = "rentals_search"
+    else
+      fieldName = "remote_rentals_search"
+    searchParams = ["#{fieldName}[page]=#{@currentPage()}"]
+    $(@form.serialize().split("&")).each (_, item) ->
+      key = item.split("=")[0]
+      value = item.split("=")[1]
+      searchParams.push("#{fieldName}[#{key}]=#{value}")
+
+    "#{document.location.href}.js?#{searchParams.join("&")}"
+
+  goToPreviousPage: (e) =>
+    e.preventDefault()
+    return if @firstPage()
+    $(@form).data("current-page", @currentPage() - 1)
+    @displayWaiting()
+    clearTimeout(@typingTimer)
+    @backendSearch()
+
+   goToNextPage: (e) =>
+    e.preventDefault()
+    return if @lastPage()
+    $(@form).data("current-page", @currentPage() + 1)
+    @displayWaiting()
+    clearTimeout(@typingTimer)
+    @backendSearch()

app/assets/javascripts/bookingsync_portal/admin/rentals.js.coffee

@@ -1,12 +1,19 @@
 $ ->
+  if $("body").data("paginated-view")
+    Filter = ListBackedFilter 
+  else
+    Filter = ListFilter
+
   for rentalsList, index in $(".rentals-list")
     inputId = "rentals-list-filter-#{index}"
-    new ListFilter(
+    filterInput = $(rentalsList).data("filter-input")
+    filterInput ||= "filter_input"
+    new Filter(
       $(rentalsList).children(".rentals-list-header"),
       $(rentalsList).children(".rentals-list-scroll"),
       ".panel",
       ".panel h4",
       inputId,
-      HandlebarsTemplates["filter_input"]
+      HandlebarsTemplates[filterInput]
         inputId: inputId
     )

app/assets/javascripts/bookingsync_portal/admin/templates/filter_input.hbs

@@ -1,6 +1,6 @@
 <form class="filterform" action="#">
   <div class="form-group">
     <label class="control-label" for="{{inputId}}">Search in listings</label>
-    <input class="filterinput form-control" type="text" id="{{inputId}}">
+    <input class="filterinput form-control" type="text" id="{{inputId}}" name="query">
   </div>
 </form>

app/assets/javascripts/bookingsync_portal/admin/templates/loading.hbs

@@ -0,0 +1,3 @@
+<div class='text-center'>
+  <i class="fa fa-spinner fa-spin fa-5x fa-fw margin-bottom"></i>
+</div>

app/assets/javascripts/bookingsync_portal/admin/templates/pagination.hbs

@@ -0,0 +1,6 @@
+<nav>
+  <ul class="pager">
+    <li><a class="btn" href="#" data-type="previous">Previous</a></li>
+    <li><a class="btn" href="#" data-type="next">Next</a></li>
+  </ul>
+</nav>