Spreadsheet View for Curation Review

[SteveEdiger]

The goal is to produce a spreadsheet view for admins and curators to view and edit records from multiple perspectives to ensure that the map remains up-to-date and that the content is complete and does not contain duplicates.

General

This view would look like our google spreadsheet, with related tables flattened out into a single row. The view is described below:

1. Column Labels (field labels) at the top. Which columns appear is yet to be determined. In general, we would include all 'content-related' (co-op name, address, type, contacts, included, geo-codes, etc.) fields and no data-base administration fields (primary keys, foreign keys, etc.), although this is up for discussion (for instance, it might be good to see the some read-only keys for the user to understand which record they are editing).
2. Rows would contain flattened records from related tables
3. Scroll bars would offer vertical and horizontal navigation of the records
4. A set of buttons at the bottom would quickly filter for a)"In Process" (to quickly be able to review and curate new records, [an implication is that all new records would be marked "in process" b) "Production" to limit display to only production data, c) "All" and d) "Rejected"]

Top Row (Column Label) Actions

When an admin/curator clicks on a label, they would get a choice of sorting or filtering.

Clicking on sort would allow them to select ascending or descending.

Clicking on filter would pop up a dropdown

1. Initially it would show all values for the field with a checkbox in front of each value plus
2. A "Select all" choice to reselect all if they were filtered
3. A "Clear" choice to deselect all
4. The user can or uncheck each value, and the spreadsheet displays the results

Multiple columns could be filtered with AND logic. So, for instance the user could see all housing co-ops in Albany Park

Content Row Actions

When a user clicks on a content row, the app pops us a dialogue box as described below

1. Consumes part of the screen in front of the spreadsheet view
2. Displays the Record for Editing (we can reuse Davey's code)
3. If necessary, the record can be scrolled vertically to get to all the fields withing the dialogue box
4. At the bottom of the dialogue box, there are buttons for "In Process" "Submit" and "Cancel" In Process would 'mark' the record for future work, and remove it from the production map. Submit would add the record to the production map. Cancel would Cancel all changes and the status of the record would remain in its current state.

[domdelorenzo]

Update:

• Currently testing grid libraries
• Pulling data from /coops/ endpoint and rendering with the grid libraries below
• ReactGrid
  • Has multi-user support
  • Doesn't appear to support filtering
• AG-Grid
  • Has multiple filtering options
  • Can import/export to excel
  • Supports scrollbars

Next steps:

• Configure/enhance filtering
• Test grid library edit APIs; evaluate options for integrating with existing Edit workflow

[laredotornado]

@domdelorenzo , I made a minor update to the authentication branch to add the "approved" field into the serializer that serves data to the GET "/coops/?..." endpoint. (e.g. if running locally without docker, this will return the field --

curl -v --header "Content-type: application/json" --request GET "http://127.0.0.1:8000/coops/?contains=resource"

)

[domdelorenzo]

@laredotornado Thanks. I'll see if I can merge that with my branch!

[domdelorenzo]

Updates for the spreadsheet view testing:

• Updated Views and Serializers to include 'approved', 'phone', 'email', 'web_site'

• Updated the modal popup window width

• Found an MIT Licensed React Component, KA Table that has Sorting, Filtering, Grouping, Editing

  • This component has checkbox filters, but doesn't have a 'select all'/'clear all' option (screenshot below) and I'm not sure this is going to meet your needs
  • If we can get by with the filtering options available for free in the community edition of AG Grid, it might be a better user experience.

@SteveEdiger & @laredotornado - Do we want to pursue tweaking AG Grid, KA Table, or keep testing other React libraries?

These updates are viewable on my spreadsheet branch (https://github.com/domdelorenzo/maps/tree/spreadsheet-view). If you're using docker, the test components are at:

• Ka Table - http://localhost:3001/katable
• AG Grid - http://localhost:3001/aggrid

[laredotornado]

Excellent screen shots. Yeah my vote is the better user experience in the free/community edition of AG Grid, however as @SteveEdiger is probably going to be the only user, I guess it's his ultimate decision. Steve, I woudl recommend we go with either one of these two. I don't think looking for antoher library would help us, especially because other libraries may not be supported long term, which may force us to switch to something else.

[SteveEdiger]

Please add all fields to the spreadsheet view. I reviewed the fields and really may need to filter, sort, and access any of them from time to time.

I would also like the view to scroll horizontally.

[domdelorenzo]

Hey @SteveEdiger -

• Just submitted https://github.com/chicommons/maps/pull/210
• Adds additional fields to the spreadsheet
• The grid already scrolls horizontally when the column widths and number of columns exceed the width of the grid window. I've set the column widths to ensure that's obvious.

[SteveEdiger]

I've reviewed the spreadsheet view. It's behaving like I want it to. However, we need to sync fields. I've added comments to the Header tab in our Google Spreadsheet (https://docs.google.com/spreadsheets/d/1ifpqYM0uV1S3YVPrce5gmvevJ7jc-cFmOk5jDS8Me7U/edit#gid=319391910)

Let's discuss.

[maxgraziano]

Backend complete in '3.1-model-refactor'.