Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Epic/form UI column sorting #6614

Merged
merged 151 commits into from
Jan 9, 2023
Merged

Conversation

pauloiankoski
Copy link
Contributor

@pauloiankoski pauloiankoski commented Nov 22, 2022

Description

The current PR mainly adds the ability to sort columns of the admin list tables.

Under the hood, it does the following:

  • implements dynamic table lists that read the available columns from a global list and renders the content for each column using Interweave JS;
  • implements ListTable classes containing ModelColumn instances that are filled once receiving a model;
  • changes the API endpoints to use the ModelQueryBuilder instance that will be passed to the ListTable class in order to return formatted HTML for each column instead of RAW data so that we can easily extend the responded columns without changing the frontend;
  • adds support to order by some of the columns that are pre-defined.

Affects

Admin List Tables

Visuals

Testing.Test.Mode.mov
Testing.Column.Sorting.mov

Testing Instructions

Pre-review Checklist

  • Acceptance criteria satisfied and marked in related issue
  • Relevant @unreleased tags included in DocBlocks
  • Includes unit tests
  • Reviewed by the designer (if follows a design)
  • Self Review of code and UX completed

pauloiankoski and others added 4 commits December 16, 2022 20:31
* refactor: rename getColumns function avoiding overwriting

* refactor: add self return to methods

* refactor: add parameter to method
…ntial error. (#6628)

* feature: add over ran status for limited subscriptions

* fix: update to failing svg

* fix: add max width

* fix: update placement of message for overrun

* fix: update unreleased tag

* fix: update terminology to exceed
…ons Add-on (#6638)

* feature: add new donation button while manual donations add-on is active

* fix: add unreleased tag

* refactor: remove hasManualDonations

* refactor: update with template literals

* fix: remove boolean conversion
…ight (#6649)

* feature: apply fixed styling to animation if page is scrollable

* Fix: remove state changes

* chore: remove duplicated css

Co-authored-by: Paulo Iankoski <[email protected]>
@pauloiankoski pauloiankoski requested review from Benunc and removed request for stephanieliy December 29, 2022 16:39
@rickalday
Copy link
Member

The only thing that's not working on my tests is sorting by donations in the Donors page. It throws some errors in the console.
This video explains what's going on: https://somup.com/c0VnYpwNmj

@JasonTheAdams
Copy link
Contributor

@pauloiankoski Any updates on this?

@pauloiankoski
Copy link
Contributor Author

@JasonTheAdams finally had the test issues solved. There were some tests needing updates after some changes we did to the DB attachMeta and having clauses earlier on this epic.

In case you wanna see what has been changed since the last code review, this is the commits range:
https://github.com/impress-org/givewp/pull/6614/files/beb6261f5460cc7548cadfcb380428316ac2e2ec..d93436b097634f2c09e8795d9195272ba84c2343

@rickalday here is the updated zip with a fix for that 500 error when sorting by donations count. Regarding the Donations Form column being sorted by id, that's how it works on the legacy table list. Due to the current data structure, that's what we can do for now.

@pauloiankoski pauloiankoski requested review from rickalday and removed request for Benunc January 5, 2023 16:23
@kjohnson
Copy link
Contributor

kjohnson commented Jan 5, 2023

@pauloiankoski I ran into an issue where a form did not have the _give_price_option meta defined, which caused a fatal error. This is probably not common, but is an unrecoverable error.

Specifically, \Give\DonationForms\DataTransferObjects\DonationFormQueryData::getDonationFormLevels assumes a non-multi price option if the value is not set, in which case a fatal error is thrown because DonationFormLevel::fromPrice expects a string.

@JasonTheAdams should we establish a fallback, or is this considered breaking intentionally?

@JasonTheAdams
Copy link
Contributor

@kjohnson Can you elaborate on the circumstances that led to the meta missing?

Copy link
Member

@rickalday rickalday left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Passed QA tests

@kjohnson
Copy link
Contributor

kjohnson commented Jan 9, 2023

\Give\DonationForms\DataTransferObjects\DonationFormQueryData::getDonationFormLevels assumes a non-multi price option if the value is not set, in which case a fatal error is thrown because DonationFormLevel::fromPrice() expects a string.

@JasonTheAdams I came across this assumption when testing backwards compatibility of Next Gen Forms with the updated Forms Table UI. The Next Gen forms did not have the _give_price_option which caused a fatal error.

My concern is that a single corrupted donation form (missing meta key/value) brings down the Forms Table in such a way that is not recoverable by the user.

@JasonTheAdams
Copy link
Contributor

@kjohnson I think I'm fine to proceed, then. Unless there's some specific scenario I'm not understanding, the same argument could be made for any other missing data that's assumed to exist. Next Gen is a special circumstance, wherein the forms themselves are being rebuilt, so it makes sense to add some legacy meta — as opposed to a legacy form that, under some legit circumstance, may not have this meta.

Make sense?

@kjohnson
Copy link
Contributor

kjohnson commented Jan 9, 2023

@JasonTheAdams yeah - that makes sense. I don't think it is a hard stop, but did want to mention it since I ran across it.

I do not have any examples of this being an issue that occurs "naturally" during normal use of the legacy forms.

Copy link
Contributor

@kjohnson kjohnson left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I was able to test this with the backwards compatibility updates in Next Gen and everything works as expected.

@pauloiankoski pauloiankoski merged commit 19e3e84 into develop Jan 9, 2023
@pauloiankoski pauloiankoski deleted the epic/form-ui-column-sorting branch January 9, 2023 21:10
JasonTheAdams added a commit that referenced this pull request Jan 17, 2023
* feature: add ListTable class

* feature: add Column class

* feature: add concerns

* feature: add exception classes

* feature: add DonationsListTable class

* feature: use DonationsListTable class; add new REST parameters for sorting

* feature: register DonationsListTable on container

* refactor: method name

* refactor: return type

* refactor: add getters; change prop visibility

* refactor: localize table definitions

* refactor: update properties names to match react list table component

* feature: add tests

* chore: update formatting

* refactor: update test name

* refactor: get array values

* feature: test column properties

* fix: test - use the proper method

* feature: add sort and filter tests

* refactor: make column sortable by default

* refactor: change method name

* refactor: change method name

* refactor: sort

* refactor: update tests

* fix: use correct prop name; add return types

* feature: begin switching to column classes

* feature: add donor and gateway columns

* refactor: switch to a model-oriented methodology

* test: add startsSubscription to donation test

* refactor: move columns to simpler namespace

* feature: update status column to model column

* refactor: rename namespaces

* refactor: change columns implementation

* chore: add columns as classes

* refactor: add helpers for payment statuses and type

* refactor: fix prop and function names

* refactor: move items concerno to ListTable

* refactor: change query to use Donations model

* refactor: move controller methods to the endpoint class

* refactor: change to call constructor directly instead of through container

* chore: add missing phpdocs

* refactor: reformat code

* fix: change sort keys

* chore: remove mentions to startsSubscription prop

* fix: remove default value for locale

* refactor: rename function

* refactor: change date formatting function

* chore: add unreleased tag and complete docblocks info

* fix: change prop type

* refactor: change tableAlias to use columnAlias instead of index

* chore: implement count method for ModelQueryBuilder

* refactor: change where clauses to use tableAlias

* refactor: replace Query Builder with Donations model

* refactor: move locale parameter to items method

* chore: add action to DonationsListTable singleton

* refactor: replace instantiates with singleton

* fix: add fallback to $columnAlias

* refactor: reformat frontend files with prettier

* Epic Feature: Column sorting UI (#6600)

* feature: add table sorting component and styles

* fix: removed .items from data.items.map  to reflect sortedData value

* feature: install interweave

* feature: add support for sorting

* fix: include static data in window objects for testing

* refactor: update file name for consistency

* fix: enable tables to recieve column data from window

* feature: add new window values to interface

* fix: add isSortable to static data to test

* fix: update to reflect. window.Give_.table.columns

* refactor: update handle sort

* refactor: simplify conditional

* update cursor styles when sortable

* add svgs to image folder

* fix: display interweave based on column name

* fix: move click handler outside of svg

* fix: attach event handlers to button instead of svg

* refactor: add aria support & include data posting

* feature: add interweave & styles

* fix: update table sort

* fix: include columns, sortColoumn and sortDirection in query params

* feature: add svgs to assets

* fix: update props and function name

* fix: update styles

* fix: update styles

* fix: remove static columns

* fix: use element for id values

* fix: update state name & pass proper data to interweave

* fix: re-add test data for donors

* fix: update property name to match column

* fix: update to reflect passed in data

* fix: clean up list table directories

* fix: rename function

* fix: use idbadge

* fix: update interweave

* fix: pass correct prop value

* fix: update bulk actions with interweave

* fix: remove form columns

* fix: remove inline styles

* fix: add refunded badge

* fix: remove comment

* fix: update donor styles

* fix: update sort button styles

* fix: update imports and file names

* refactor: optimize imports for new directories

* refactor: remove unused component

* refactor: remove unsupported column properties

* fix: row actions always display first column

* feature: add repeat donor icon

* fix: update interweave styles:

* fix: remove [en] fallback for locales

* feature: check for visible columns

* chore: add DonorsListTable class and register it

* refactor: merge controller into the endpoint class

* chore: add new parameters to endpoint

* refactor: change main query to use Donors model

* chore: add Id Column to Donors List Table

* chore: add Donor Information column to Donors List Table

* fix: add label for deprecated status

* chore: add Donation Count column to Donors List Table


chore: add aria label

* chore: add Latest Donation column to Donors List Table

* refactor: add DonorType enum and replace where it's used

* chore: add Donor Type column to Donors List Table

* chore: add Date Created column to Donors List Table

* refactor: remove additional emails from meta keys

* refactor: add DonorModelQueryBuilder class

* chore: attach additional emails to query results

* fix: replace removed constant

* feature: add value method to Query Builder

* chore: add Donation Revenue column to Donors List Table

* refactor: change method to use ModelQueryBuilder

* refactor: bring additional_email meta key back to the ENUM class

* chore: add unreleased tags

* refactor: remove unused classes

* chore: fix typo

* refactor: change hooks to use Give ones

* chore: add description to function

* refactor: replace if statements with ternary operator

* feature: add donor properties  and

* chore: revert

* feature: add support for ->totalAmountDonated and ->totalNumberOfDonation in donor repository

* feature: add new properties to factory

* fix: flter out any null objects being returnd from query

* tests: scaffold list donors first test

* refactor: change additionalEmails query so that doesn't return null row

* refactor: change columns to use the new properties

* tests: add tests for donors list table

* Epic Feature: Donor and Form table styles (#6610)

* fix: update svg size and styles

* fix: include additional status styles

* feature: add no donation svg & styles

* feature: add goal achieved star svg

* fix: include form styles

* feature: init Donation Form model scaffold

* refactor: rename donation forms repository binding

* feature: add initial DonationForms properties

* feature: add methods to query data from database

* doc: add docblocks to new methods

* feature: connect query results to model

* refactor: implement DonationFormLevel class

* feature: implement values from database for $totalAmountDonated and $totalNumberOfDonations

* refactor: implement DonationFormStatus class

* feature: add method to create DonationFormLevel from a price string

* feature: read price option and fill the model with the correct meta data

* refactor: remove factory method while not yet implemented

* tests: add tests for form model and dto with a new nifty legacy form adapter

* refactor: move implementations from controller to endpoint class

* feature: add DonationFormsListTable

* refactor: change endpoint to make use of the new ListTable class

* refactor: remove unused methods

* feature: add TitleColumn to DonationFormsListTable

* feature: add LevelsColumn to DonationFormsListTable

* feature: change endpoints to support return an array of models

* refactor: add return type to admin endpoint call args

* feature: add DonationCountColumn to DonationFormsListTable


coutcolumn

* feature: add DonationRevenueColumn to DonationFormsListTable

* feature: add ShortcodeColumn to DonationFormsListTable

* feature: add DateCreatedColumn to DonationFormsListTable

* feature: add StatusColumn to DonationFormsListTable

* feature: add GoalColumn to DonationFormsListTable

* feature: add support for sorting columns to DonationFormsListTable

* fix: cast column to be sorted as number

* tests: update DonationFormTest with new faux donation form model factory methods

* Feature: Donation table Live/Test switch (#6613)

* feature: add test toggle

* feature: add toggle state

* feature: include mode in table api

* feature: update endpoint with mode

* refactor: rename mode param to testMode

* refactor: update naming conventions

* fix: update styles

* feature: include paymentgateway mode in donation window

* feature: set initial testMode state to payment mode

* refactor: pass toggle from donations table

* fix: update test styles

* fix: correct react hooks order warning

* fix: update toggle

* fix: update props

* fix: remove unused imports

* fix: add additional form styles

* refactor: use only one conditional

* refactor: move row actions to separate file for consistency

* fix: simplify testmode styles

* refactor: update testmode

* refactor: change default value for testMode parameter

Co-authored-by: Paulo Iankoski <[email protected]>

* Feature/form UI subscriptions table endpoint (#6616)

* feature: add test toggle

* feature: add toggle state

* feature: include mode in table api

* feature: update endpoint with mode

* refactor: rename mode param to testMode

* refactor: update naming conventions

* fix: update styles

* feature: include paymentgateway mode in donation window

* feature: set initial testMode state to payment mode

* refactor: pass toggle from donations table

* fix: update test styles

* fix: correct react hooks order warning

* fix: update toggle

* fix: update props

* fix: remove unused imports

* fix: add additional form styles

* refactor: use only one conditional

* refactor: move row actions to separate file for consistency

* fix: simplify testmode styles

* refactor: update testmode

* feature: add subscription table styles

* feature: add subscriptions table

* feature: add toggle

* fix: remove unused import

* test: add test for ListDonations endpoint

* fix: replace controller with new endpoint class

* refactor: rename endpoint class

* test: add tests for ListDonationForms

* refactor: remove unused preload methods

* feature: register admin scripts

* feature: init SubscriptionListTable with IdColumn on it

* feature: register endpoints for Subscriptions

* feature: append SubscriptionsListTable to GiveSubscriptions global

* fix: pass a default currency value when nullable

* test: add test for ListSubscriptions endpoint

* feature: add labels to Value Object

* feature: add new Columns to SubscriptionsListTable

* feature: implement extra data for tooltip on StatusColumn

* fix: update with subscription

* refactor: remove invalid tests

* fix:update testmodebadge

* fix: update webpack

* fix: update form filters

* fix: add non breaking whitespace to status messages

* Revert "fix: add non breaking whitespace to status messages"

This reverts commit 61b2729.

* fix: wrap tooltip content with a p tag

* fix: pass payment mode to table

* fix: update styles

* fix: solve undefined index notice

* fix: update font weight styles

* refactor: change how migrations are registered for subscriptions

* fix: update column size by table

* feature: add subscription actions

* fix: update expired bkg color

* fix: update test filter

* fix: replace margin with gap

* fix: update failed status to failing

* fix: update toggle size

* feature: add payment_mode column to Subscriptions

* fix: move handleItemSort

* refactor: replace query loop with a single update query

* fix: display by testModeFilter

* fix: initialize as paymentMode

* feature: save subscription payment mode when legacy payment gateway is used

* refactor: rewrite endpoint hander to use the model

* fix: add bulk delete

* fix: fix donations bulk delete

* feature: make form column sortable

* feature: implement delete action on the subscriptions endpoint

* doc: add missing unreleased tags

* fix: update svg size

* doc: add missing docblock

* refactor: create model methods for conditionals

Co-authored-by: Joshua Dinh <[email protected]>

* Fix: Bulk checkboxes reset checked value after sorting  (#6618)

* fix: update preapproval label

* fix: uncheck bulkaction checkbox when component unmounts

* Fix: Limited subscription tooltip messages use correct nouns. (#6625)

* fix:update failed message with bold text

* fix: use _n function for singular vs plural

* format: reformat code

Co-authored-by: Paulo Iankoski <[email protected]>

* Refactor/speed up endpoint performance (#6631)

* refactor: replace endpoint request with direct query

* refactor: remove other selects when counting

* feature: add method to return an array of meta aliases based on a given array of ENUMs

* refactor: replace prepareQuery on count methods of list endpoints with custom query

* refactor: replace ModelQueryBuilder with QueryBuilder

* refactor: remove unused namespaces

* Fix/subscription payment mode column (#6633)

* Refactor/speed up endpoint performance (#6635)

* refactor: remove quote from having column name

* refactor: keep existing columns on count as they may needed for group by

* refactor: attach meta to donations count query only as needed

* refactor: conditionally use having when there is another where clause

* refactor: replace strings with ENUMs

* doc: append array content type

* Refactor/list table columns for addons (#6639)

* refactor: rename getColumns function avoiding overwriting

* refactor: add self return to methods

* refactor: add parameter to method

* Fix: Subscriptions renewed past their end date notify users of a potential error. (#6628)

* feature: add over ran status for limited subscriptions

* fix: update to failing svg

* fix: add max width

* fix: update placement of message for overrun

* fix: update unreleased tag

* fix: update terminology to exceed

* Fix: New Donation table button added for users with the Manual Donations Add-on (#6638)

* feature: add new donation button while manual donations add-on is active

* fix: add unreleased tag

* refactor: remove hasManualDonations

* refactor: update with template literals

* fix: remove boolean conversion

* Fix: Loading animations are immediately visible regardless of page height (#6649)

* feature: apply fixed styling to animation if page is scrollable

* Fix: remove state changes

* chore: remove duplicated css

Co-authored-by: Paulo Iankoski <[email protected]>

* fix: rename sortColumn value for donationsCount column

* refactor: update test namespaces

* tests: update tests after changes to DB statements

* refactor: prevent migration of trying to add column twice

Co-authored-by: alaca <[email protected]>
Co-authored-by: Jason Adams <[email protected]>
Co-authored-by: Joshua Dinh <[email protected]>
Co-authored-by: Joshua Dinh <[email protected]>
Co-authored-by: Jon Waldstein <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants