Add Datatables (#863)

- Add Datatables gem, yarn package and CSS file
- Add code in packs.admin.js
- Add Datatables partial and inheritable logic (mountain_view seems unhappy with ajax in webpacker)
- Update controller logic and do some optimisation
- Migrate Users, Neighbourhoods and Partners indexes to Datatables
- Update Neighbourhood edit page to reflect new logic
- Update webpack-dev-server, yarn versions, and CI build target
- Update README

Bonus: Fixes #806, #868, #861, #821

Co-authored-by: Dr Kim Foale <kim@gfsc.studio>

.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,27 @@ 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 info@placecal.org / 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
+## Contributing
+
+We welcome new contributors but strongly recommend you have a chat with us in [Geeks for Social Change's Discord server](http://discord.gfsc.studio) and say hi before you do. We will be happy to onboard you properly before you get stuck in.
+
+## Donations
+
+If you'd like to support development, please consider sending us a one-off or regular donation on Ko-fi.
 
-See the current [Roadmap](developers/roadmap.md)
+[![ko-fi](https://ko-fi.com/img/githubbutton_sm.svg)](https://ko-fi.com/M4M43THUM)

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,14 @@ 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/partners_controller.rb

@@ -7,7 +7,17 @@ class PartnersController < Admin::ApplicationController
     before_action :set_tags, only: %i[new create edit]
 
     def index
-      @partners = policy_scope(Partner).order(:name)
+      @partners = policy_scope(Partner).order(:name).includes(:address)
+
+      respond_to do |format|
+        format.html
+        format.json { render json: PartnerDatatable.new(
+                                     params, 
+                                     view_context: view_context, 
+                                     partners: @partners
+                                   ) 
+                      }
+      end
     end
 
     def new

app/controllers/admin/users_controller.rb

@@ -20,8 +20,18 @@ 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.includes(:neighbourhoods, :tags, :partners)
+                                   ) 
+                    }
+      end
     end
 
     def new

app/datatables/datatable.rb

@@ -0,0 +1,13 @@
+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_delegator :@view, :edit_admin_partner_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/partner_datatable.rb

@@ -0,0 +1,29 @@
+class PartnerDatatable < Datatable
+  def view_columns
+    # Declare strings in this format: ModelName.column_name
+    # or in aliased_join_table.column_name format
+    @view_columns ||= {
+      id:      { source: 'Partner.id', cond: :eq },
+      name:    { source: 'Partner.name' },
+      slug:    { source: 'Partner.slug' },
+      address: { source: 'Partner.address'}
+    }
+  end
+
+  def data
+    records.map do |record|
+      {
+        id:      link_to(record.id,   edit_admin_partner_path(record)),
+        name:    link_to(record.name, edit_admin_partner_path(record)),
+        slug:    link_to(record.slug, edit_admin_partner_path(record)),
+        address: record.address
+      }
+    end
+  end
+
+  def get_raw_records
+    # insert query here
+    # Partner.all
+    options[:partners]
+  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,18 +1,21 @@
 require("cocoon")
 require("select2")
+require("datatables.net-bs4")
 
 import 'bootstrap'
 import 'vue'
 import 'vue-turbolinks'
 
 import '../src/behaviors/all_behaviors.js'
 import '../src/calendar-form.js'
+import '../src/datatable.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()
-})
+});

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/javascript/src/datatable.js

@@ -0,0 +1,24 @@
+// This makes sure Turbolinks doesn't double load the datatable code
+// if you press the browser back button
+let dataTable = ""
+
+document.addEventListener("turbolinks:before-cache", function () {
+  if (dataTable !== null) {
+      dataTable.destroy();
+      dataTable = null;
+  }
+});
+
+document.addEventListener('turbolinks:load', function () {
+  dataTable = $('#datatable').DataTable({
+    "processing": true,
+    "serverSide": true,
+    "pageLength": 15,
+    "ajax": {
+      "url": $('#datatable').data('source')
+    },
+    "pagingType": "full_numbers",
+    // Column spec is loaded from a script tag in the view
+    "columns": columns
+  })
+});

app/models/neighbourhood.rb

@@ -14,7 +14,27 @@ class Neighbourhood < ApplicationRecord
             allow_blank: true
 
   def shortname
-    name_abbr.presence || name
+    if name_abbr.present?
+      name_abbr
+    elsif name.present?
+      name
+    else
+      "[not set]"
+    end
+  end
+
+  def fullname
+    if name.present?
+      name 
+    elsif name_abbr.present?
+      name_abbr
+    else
+      "[not set]"
+    end
+  end
+
+  def to_s
+    "#{fullname} (#{unit})"
   end
 
   def district