Add Datatables #863

lexiwitch · 2021-12-20T18:09:31Z

Partial/WIP #821 & #821
Bonus: Fixes #806 - "Neighbourhood view not displaying names for parent objects"

Progress

Aster

Added 'ajax-datatables-rails' gem
Added 'datatables.net-bs4' yarn package
Added datatable css to application.css
Added datatable js to packs/application.js
Added datatable code to admin_index.js component
Changed neighbourhoods controller to allow datatables JSON response as well as HTML
Added datatables/neighbourhood_datatable.rb
Changed Neighbourhoods index so it renders it's own (data) table rather than admin_index component table. This was done to fix the "edit" column not really being supported by datatables

Kim

Converted datatable to a partial
Set up users, neighbourhoods and partners index page functionality
Created shared functionality where possible
Changed columns for neighbourhoods to something more usable
Redid neighbourhoods edit page to reflect changes to model
Updated tests to match new config
Quality of life: updated README and js versions
Created tickets for knock-on issues
Some refactoring

TODO

Get edit links working as per this documentation so we can actually edit the content
Add "parent" column to neighbourhoods table as a proof of concept of having relation columns, which currently seem to bug out the whole thing
Consider writing a ticket to migrate Mountain View to Draper, which seems more of a standard nowadays and what this gem seems to be asking for
Fix or make a new ticket to tidy up the edit neighbourhood pages
Bug: pressing "back" on browser loads two paginators
Update integration tests to work after js has loaded and not before as per Datatables docs
Add some integration testing for the paginator etc

Bonus: Fixes #806 - "Neighbourhood view not displaying names for parent objects" Added Datatables - Added 'ajax-datatables-rails' gem - Added 'datatables.net-bs4' yarn package - Added datatable css to application.css - Added datatable js to packs/application.js - Added datatable code to admin_index.js component - Changed neighbourhoods controller to allow datatables JSON response as well as HTML - Added datatables/neighbourhood_datatable.rb - Changed Neighbourhoods index so it renders it's own (data) table rather than admin_index component table. This was done to fix the "edit" column not really being supported by datatables

katjam · 2021-12-20T18:14:16Z

Closing test fail & need to make sure neighbourhood admins can see datatables

kimadactyl · 2021-12-21T13:21:57Z

This works as is, can either merge or do some tidyup first?

Key gotchas:

The app/components directory is deprecated for javascript, this just gets loaded the old fashioned way, we want stuff in the webpacker environment really
You need the special document.load syntax for turbolinks
Let's try and keep admin.js and application.js separate so as not to pollute the main app
I think the table ID for the datatables tables should be namespaced, i.e. js-datatable-neighbourhoods so there's no confusion where it comes from
[Big cleanup task] if poss I think we should put this back into the component structure now it's working - I don't see why it shouldn't! We prob also need to feed it a column_type and datatables_config object?

kimadactyl · 2021-12-21T13:28:33Z

I think we should change columns to reflect the database structure too as it's kinda confusing as is

kimadactyl · 2021-12-21T13:40:31Z

Remove "Add new neighbourhood" button (and functionality?)

app/javascript/packs/application.js

config/environments/development.rb

…bourhoods edit page

…olumns

kimadactyl · 2021-12-22T14:44:48Z

Everything done, new ticked added for out of scope stuff

README.md

katjam

I had a quick look. This looks great. Few tiny comments... but super excited to get this in. Is very well organised!

katjam · 2021-12-23T12:36:47Z

app/javascript/src/datatable.js

+  dataTable = $('#datatable').DataTable({
+    "processing": true,
+    "serverSide": true,
+    "pageLength": 15,


Will this be configurable?

there's a little dropdown on the datatable to pick the number per page if that counts :) but yes it could be set per-page if we need? what do you mean by configurable?

app/datatables/neighbourhood_datatable.rb

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

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

katjam · 2021-12-23T12:42:47Z

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

+    title: "Neighbourhoods",
+    model: :neighbourhoods,
+    columns: %i[id name unit_name unit_code_key unit_code_value],
+    data: @neighbourhoods.limit(15),


Again wondering if we want this to be configurable.

What do you mean by configurable?

What you said on the other one... if there's a dropdown so the user can configure and this is just our default starting point, then all good. I could not tell if it was a fixed value.

katjam · 2021-12-23T12:43:27Z

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

-      </div>
-    </div>
-  </div>
+<p class="alert alert-danger" role="alert">Warning: neighbourhoods should not be created here and this page is only left as a placeholder!</p>


Do we want to remove it? What breaks if we do not have a placeholder?

Hmmm I did consider this but I think it's good to resolve the usual default Rails routes? The main usecase for it going forwards is for when we have custom geographies but that's a way off?

katjam · 2021-12-23T14:40:59Z

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

+    <h2>Geography</h2>
+    <div class="row">
+      <div class="col-md-6">
+        <h3>Is a part of&hellip;</h3>


Great new headings!

katjam closed this Dec 20, 2021

kimadactyl reopened this Dec 21, 2021

Fix Javascript location, resolve some warnings, update README

096d364

kimadactyl self-assigned this Dec 21, 2021

kimadactyl linked an issue Dec 21, 2021 that may be closed by this pull request

Improve admin by adding data tables #821

Closed

12 tasks

kimadactyl added 6 commits December 21, 2021 17:12

Refactor datatable as a partial

6418641

Fix test

85e8f5d

Update webpack-dev-server to resolve security alert

c5040c5

Get edit links working

ab7847c

Re-add initial html load state for datatables

0325394

Update yarn on CI action

a93c8ad

kimadactyl linked an issue Dec 21, 2021 that may be closed by this pull request

Add edit link back into neighbourhood admin table table (was in actions column) #861

Closed

kimadactyl added major and removed major labels Dec 21, 2021

lexiwitch commented Dec 21, 2021

View reviewed changes

app/javascript/packs/application.js Show resolved Hide resolved

lexiwitch commented Dec 21, 2021

View reviewed changes

config/environments/development.rb Show resolved Hide resolved

kimadactyl added 2 commits December 21, 2021 18:53

Comment devlopment environment, remove analytics code

590cc22

Merge branch 'main' into datatables_821

6d937df

kimadactyl marked this pull request as draft December 21, 2021 18:57

Fix back button on datatables, optimise some queries, rearrange neigh…

6950a76

…bourhoods edit page

kimadactyl linked an issue Dec 22, 2021 that may be closed by this pull request

Redo edit neighbourhood view #868

Closed

kimadactyl added 2 commits December 22, 2021 14:28

Add datatables to partners, PoC that it's possible to have relation c…

ad01ec3

…olumns

Fix breaking neighbourhood create page, update tests

d91e8a2

kimadactyl marked this pull request as ready for review December 22, 2021 14:45

Update README with contributing and donation guidelines

01db471

kimadactyl requested a review from katjam December 22, 2021 14:48

katjam reviewed Dec 23, 2021

View reviewed changes

README.md Show resolved Hide resolved

katjam approved these changes Dec 23, 2021

View reviewed changes

Improve text on neighbourhood page, remove block comment

2519ab0

kimadactyl merged commit 0bb508c into main Dec 23, 2021

kimadactyl deleted the datatables_821 branch December 23, 2021 13:40

katjam reviewed Dec 23, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Datatables #863

Add Datatables #863

lexiwitch commented Dec 20, 2021 •

edited by huly-for-github bot

Loading

katjam commented Dec 20, 2021

kimadactyl commented Dec 21, 2021 •

edited

Loading

kimadactyl commented Dec 21, 2021

kimadactyl commented Dec 21, 2021

kimadactyl commented Dec 22, 2021

katjam left a comment

katjam Dec 23, 2021

kimadactyl Dec 23, 2021 •

edited

Loading

katjam Dec 23, 2021

kimadactyl Dec 23, 2021

katjam Dec 23, 2021

katjam Dec 23, 2021

kimadactyl Dec 23, 2021

katjam Dec 23, 2021

katjam Dec 23, 2021

Add Datatables #863

Add Datatables #863

Conversation

lexiwitch commented Dec 20, 2021 • edited by huly-for-github bot Loading

Progress

Aster

Kim

TODO

katjam commented Dec 20, 2021

kimadactyl commented Dec 21, 2021 • edited Loading

kimadactyl commented Dec 21, 2021

kimadactyl commented Dec 21, 2021

kimadactyl commented Dec 22, 2021

katjam left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kimadactyl Dec 23, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lexiwitch commented Dec 20, 2021 •

edited by huly-for-github bot

Loading

kimadactyl commented Dec 21, 2021 •

edited

Loading

kimadactyl Dec 23, 2021 •

edited

Loading