Add Datatables

.github/workflows/test.yml

@@ -39,7 +39,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v2
         with:
-          node-version: 10.17.0
+          node-version: 14.15.0
           cache: yarn
         env:
           NODE_ENV: test

Gemfile

@@ -26,6 +26,9 @@ gem 'webpacker', '~> 5.4.3'
 # Backend
 gem 'ancestry'
 
+# Datatables
+gem 'ajax-datatables-rails'
+
 # Calendar
 gem 'httparty'
 gem 'icalendar'

Gemfile.lock

@@ -65,6 +65,8 @@ GEM
       zeitwerk (~> 2.3)
     addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
+    ajax-datatables-rails (1.3.1)
+      zeitwerk
     ancestry (4.1.0)
       activerecord (>= 5.2.6)
     ansi (1.5.0)
@@ -567,6 +569,7 @@ PLATFORMS
 
 DEPENDENCIES
   active_link_to
+  ajax-datatables-rails
   ancestry
   awesome_print
   better_errors

README.md

@@ -10,16 +10,17 @@ To get an idea of the project and what we're about, check out [the handbook](htt
 
 With that said, here's what you need to get rolling.
 
-* postgresql, Ruby as specified in `.ruby-version`, and the Bundler gem to install rails 5 etc from the Gemfile
-* `bundle exec rails db:setup db:migrate seed:migrate`
-* `bundle exec rails import:all_events`
+```
+git clone https://github.com/geeksforsocialchange/PlaceCal.git
+bundle && yarn
+bundle exec rails db:setup db:migrate seed:migrate`
+bundle exec rails import:all_events
+bundle exec rails server
+```
+
 * Make sure you use `lvh.me:3000` instead of `localhost` or you might have authentication problems.
 * Admin interface is `admin.lvh.me:3000`
 * Seeded root user is [email protected] / password
 * Access code docs through your local filesystem, and update with `bundle exec rails yard`
 
 To set up your own server, take a look at `INSTALL.md`.
-
-## Roadmap
-
-See the current [Roadmap](developers/roadmap.md)

app/assets/stylesheets/application.sass

@@ -1,5 +1,6 @@
 @import "globals"
 @import "mountain_view"
+@import "datatables.net-bs4/css/dataTable.bootstrap4.css"
 
 \:root
   // Main site colour

app/components/admin_index/_admin_index.html.erb

@@ -1,5 +1,3 @@
-<%- model_name = properties[:model].to_s.chop.humanize %>
-
 <h1 class="page-header"><%= properties[:title] %></h1>
 
 <%- if policy(model_name.constantize).create? && properties[:new_link] %>

app/components/admin_index/admin_index_component.rb

@@ -4,4 +4,7 @@
 class AdminIndexComponent < MountainView::Presenter
   property :additional_links, default: []
 
+  def model_name
+    properties[:model].to_s.chop.humanize
+  end
 end

app/controllers/admin/neighbourhoods_controller.rb

@@ -7,6 +7,10 @@ class NeighbourhoodsController < Admin::ApplicationController
     def index
       @neighbourhoods = policy_scope(Neighbourhood).order(:name)
       authorize @neighbourhoods
+      respond_to do |format|
+        format.html
+        format.json { render json: NeighbourhoodDatatable.new(params, view_context: view_context, neighbourhoods: @neighbourhoods) }
+      end
     end
 
     def new

app/controllers/admin/users_controller.rb

@@ -20,8 +20,13 @@ def update_profile
     end
 
     def index
-      @users = User.all.order(:last_name, :first_name)
+      @users = policy_scope(User).order(:last_name, :first_name)
       authorize current_user
+
+      respond_to do |format|
+        format.html
+        format.json { render json: UserDatatable.new(params, view_context: view_context, users: @users) }
+      end
     end
 
     def new

app/datatables/datatable.rb

@@ -0,0 +1,12 @@
+class Datatable < AjaxDatatablesRails::ActiveRecord
+  extend Forwardable
+
+  def_delegator :@view, :link_to
+  def_delegator :@view, :edit_admin_neighbourhood_path
+  def_delegator :@view, :edit_admin_user_path
+
+  def initialize(params, opts = {})
+    @view = opts[:view_context]
+    super
+  end
+end

app/datatables/neighbourhood_datatable.rb

@@ -0,0 +1,35 @@
+class NeighbourhoodDatatable < Datatable
+  def view_columns
+    # Declare strings in this format: ModelName.column_name
+    # or in aliased_join_table.column_name format
+    @view_columns ||= {
+      id:              { source: 'Neighbourhood.id', cond: :eq },
+      name:            { source: 'Neighbourhood.name' },
+      unit_name:       { source: 'Neighbourhood.unit_name' },
+      unit_code_key:   { source: 'Neighbourhood.unit_code_key' },
+      unit_code_value: { source: 'Neighbourhood.unit_code_value' },
+    }
+  end
+
+  def data
+    records.map do |record|
+      {
+        id:              link_to(record.id, edit_admin_neighbourhood_path(record)),
+        name:            record.name,
+        unit_name:       record.unit_name,
+        unit_code_key:   record.unit_code_key,
+        unit_code_value: record.unit_code_value,
+        # county:   record.county,
+        # district: record.district,
+        # region:   record.region,
+        # country:  record.country
+      }
+    end
+  end
+
+  def get_raw_records
+    # insert query here
+    # Neighbourhood.all
+    options[:neighbourhoods]
+  end
+end

app/datatables/user_datatable.rb

@@ -0,0 +1,31 @@
+class UserDatatable < Datatable
+  def view_columns
+    # Declare strings in this format: ModelName.column_name
+    # or in aliased_join_table.column_name format
+    @view_columns ||= {
+      id:          { source: 'User.id', cond: :eq },
+      first_name:  { source: 'User.first_name' },
+      last_name:   { source: 'User.last_name' },
+      admin_roles: { source: 'User.admin_roles' },
+      email:       { source: 'User.email' },
+    }
+  end
+
+  def data
+    records.map do |record|
+      {
+        id:          link_to(record.id, edit_admin_user_path(record)),
+        first_name:  link_to(record.first_name, edit_admin_user_path(record)),
+        last_name:   link_to(record.last_name, edit_admin_user_path(record)),
+        admin_roles: record.admin_roles,
+        email:       record.email,
+      }
+    end
+  end
+
+  def get_raw_records
+    # insert query here
+    # User.all
+    options[:users]
+  end
+end

app/javascript/packs/admin.js

@@ -1,5 +1,6 @@
 require("cocoon")
 require("select2")
+require("datatables.net-bs4")
 
 import 'bootstrap'
 import 'vue'
@@ -10,9 +11,20 @@ import '../src/calendar-form.js'
 import '../src/opening-times.js'
 import '../src/ward-picker.js'
 
-$(document).on('turbolinks:load', function() {
+$(document).on('turbolinks:load', function () {
 
   $('body').init_behaviors()
 
   $('[data-toggle="tooltip"]').tooltip()
-})
+
+  $('#datatable').dataTable({
+    "processing": true,
+    "serverSide": true,
+    "pageLength": 15,
+    "ajax": {
+      "url": $('#datatable').data('source')
+    },
+    "pagingType": "full_numbers",
+    "columns": columns
+  })
+});

app/javascript/packs/application.js

@@ -33,5 +33,3 @@ export default function loadComponents(context) {
 }
 loadComponents(require.context("../../components", true, /\.js$/));
 
-// Google Analytics
-import "../src/google-analytics.js";

app/models/neighbourhood.rb

@@ -17,6 +17,10 @@ def shortname
     name_abbr.presence || name
   end
 
+  def to_s
+    shortname
+  end
+
   def district
     ancestors.where(unit: 'district').first
   end

app/views/admin/neighbourhoods/index.html.erb

@@ -1,7 +1,18 @@
-<%= render_component "admin_index",
-  title: "Neighbourhoods",
-  model: :neighbourhoods,
-  columns: %i[id name district county region],
-  data: @neighbourhoods.where(unit: 'ward'),
-  new_link: new_admin_neighbourhood_path
-%>
+<script>
+var columns = [
+    {"data": "id"},
+    {"data": "name"},
+    {"data": "unit_name"},
+    {"data": "unit_code_key"},
+    {"data": "unit_code_value"},
+  ]
+</script>
+
+<%= render partial: "layouts/admin/datatable", locals: {
+    title: "Neighbourhoods",
+    model: :neighbourhoods,
+    columns: %i[id name unit_name unit_code_key unit_code_value],
+    data: @neighbourhoods.limit(15),
+    source: admin_neighbourhoods_path(format: :json)
+  }
+%>

app/views/admin/users/index.html.erb

@@ -1,7 +1,19 @@
-<%= render_component "admin_index",
-  title: "Users",
-  model: :users,
-  columns: %i[id first_name last_name admin_roles email],
-  data: @users,
-  new_link: new_admin_user_path
-%>
+<script>
+var columns = [
+    {"data": "id"},
+    {"data": "first_name"},
+    {"data": "last_name"},
+    {"data": "admin_roles"},
+    {"data": "email"},
+  ]
+</script>
+
+<%= render partial: "layouts/admin/datatable", locals: {
+    title: "Users",
+    model: :users,
+    columns: %i[id first_name last_name admin_roles email],
+    data: @users,
+    source: admin_users_path(format: :json),
+    new_link: new_admin_user_path
+  }
+%>

app/views/layouts/admin/_datatable.html.erb

@@ -0,0 +1,29 @@
+<h1 class="page-header"><%= title %></h1>
+
+<%- model_name = model.to_s.chop.humanize %>
+
+<%- if policy(model_name.constantize).create? && defined?(new_link) %>
+  <%= link_to "Add New #{model_name}", new_link, data: { turbolinks: false }, class: "btn btn-primary mb-3" %>
+<% end %>
+
+<table class="table table-striped" id="datatable" data-source="<%= source %>">
+  <thead>
+    <tr>
+      <% columns.each do |column| %>
+        <th><%= column %></th>
+      <% end %>
+    </tr>
+  </thead>
+  <tbody>
+    <%# While testing, it might be easier to delete the following block %>
+    <% data&.each do |record| %>
+      <tr>
+        <% record.slice(columns).each do |key, value| %>
+          <td>
+            <%= value %>
+          </td>
+        <% end %>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

config/environments/development.rb

@@ -6,8 +6,9 @@
   # since you don't have to restart the web server when you make code changes.
   config.cache_classes = false
 
-  config.hosts << 'lvh.me'
-  config.hosts << /.*\.lvh.me/
+  # config.hosts << 'lvh.me'
+  # config.hosts << /.*\.lvh.me/
+  config.hosts.clear
 
   # Do not eager load code on boot.
   config.eager_load = false

config/webpacker.yml

@@ -11,7 +11,7 @@ default: &default
 
   # Additional paths webpack should lookup modules
   # ['app/assets', 'engine/foo/app/assets']
-  resolved_paths: []
+  additional_paths: ['app/components/*/']
 
   # Reload manifest.json on all requests so we reload latest compiled packs
   cache_manifest: false

package.json

@@ -12,6 +12,7 @@
     "axios": "^0.24.0",
     "bootstrap": "^4.3.1",
     "cocoon": "^0.1.1",
+    "datatables.net-bs4": "^1.11.3",
     "jquery": "^3.4.1",
     "leaflet": "^1.6.0",
     "popper.js": "^1.16.0",
@@ -24,6 +25,6 @@
     "vue2-timepicker": "^1.0.8"
   },
   "devDependencies": {
-    "webpack-dev-server": "^3.10.1"
+    "webpack-dev-server": "^4.6.0"
   }
 }

test/integration/admin/neighbourhood_integration_test.rb

@@ -11,7 +11,8 @@ class AdminNeighbourhoodIntegrationTest < ActionDispatch::IntegrationTest
     @neighbourhood = create(:neighbourhood)
     @neighbourhood_admin = @neighbourhood.users.first
     @neighbourhoods = create_list(:neighbourhood, 4)
-    @number_of_neighbourhoods = Neighbourhood.where(unit: 'ward').length
+    # TODO: Change this 15 to be reflective of the current record limit
+    @number_of_neighbourhoods = 15
     @neighbourhoods << @neighbourhood
     get "http://admin.lvh.me"
   end