diff --git a/plugins/wporg-5ftf/assets/js/admin.js b/plugins/wporg-5ftf/assets/js/admin.js index f37ce45..59ffb26 100644 --- a/plugins/wporg-5ftf/assets/js/admin.js +++ b/plugins/wporg-5ftf/assets/js/admin.js @@ -1,7 +1,66 @@ -/* global ajaxurl, FiveForTheFuture, jQuery */ +/* global ajaxurl, FiveForTheFuture, fftfContributors, jQuery */ /* eslint no-alert: "off" */ jQuery( document ).ready( function( $ ) { + /** + * Render the contributor lists using the contributors template into the pledge-contributors container. This + * uses `_renderContributors` to render a list of contributors per status (published, pending). + * + * @param {Object} contributors - An object listing all contributors on a pledge. + * @param {Object[]} contributors.publish - The list of published/confirmed contributors. + * @param {Object[]} contributors.pending - The list of pending/unconfirmed contributors. + * @param {Object} container - The parent container for this section. + */ + function render( contributors, container ) { + const listContainer = container.querySelector( '.pledge-contributors' ); + const template = wp.template( '5ftf-contributor-lists' ); + const data = { + publish: _renderContributors( contributors.publish ), + pending: _renderContributors( contributors.pending ), + }; + $( listContainer ).html( template( data ) ); + } + + /** + * Render a given contributor list using the contributor template. + * + * @param {Object[]} contributors - An array of contributor data objects. + * @return {string} An HTML string of contributors. + */ + function _renderContributors( contributors ) { + if ( ! contributors ) { + return []; + } + const template = wp.template( '5ftf-contributor' ); + return contributors.map( template ).join( '' ); + } + + /** + * The default callback for AJAX actions. + * + * @param {Object} response - An array of contributor data objects. + * @param {string} response.message - An optional message to display to the user. + * @param {Object[]} response.contributors - The new list of contributors. + */ + function defaultCallback( response ) { + if ( response.message ) { + alert( response.message ); + } + if ( response.contributors ) { + render( response.contributors, container ); + } + } + + /** + * Send an ajax request using the `manage_contributors` action. This function also automatically adds the + * nonce, which should be defined in the global FiveForTheFuture variable. + * + * @param {Object} data - A list of data to send to the endpoint. + * @param {Function} callback - A function to be called when the request completes. + */ function sendAjaxRequest( data, callback ) { + if ( ! callback ) { + callback = defaultCallback; + } $.ajax( { type: 'POST', url: ajaxurl, @@ -14,7 +73,9 @@ jQuery( document ).ready( function( $ ) { } ); } + // Initialize. const container = document.getElementById( '5ftf-contributors' ); + render( fftfContributors, container ); // Remove Contributor button action. $( container ).on( 'click', '[data-action="remove-contributor"]', function( event ) { @@ -28,13 +89,6 @@ jQuery( document ).ready( function( $ ) { pledge_id: data.pledgePost || 0, contributor_id: data.contributorPost || 0, manage_action: data.action || '', - }, function( response ) { - if ( response.message ) { - alert( response.message ); - } - if ( response.success ) { - $( event.currentTarget ).closest( 'li' ).remove(); - } } ); } } ); @@ -48,10 +102,6 @@ jQuery( document ).ready( function( $ ) { pledge_id: data.pledgePost || 0, contributor_id: data.contributorPost || 0, manage_action: data.action || '', - }, function( response ) { - if ( response.message ) { - alert( response.message ); - } } ); } ); } ); diff --git a/plugins/wporg-5ftf/includes/contributor.php b/plugins/wporg-5ftf/includes/contributor.php index a7eacae..2ae9b1c 100644 --- a/plugins/wporg-5ftf/includes/contributor.php +++ b/plugins/wporg-5ftf/includes/contributor.php @@ -238,6 +238,41 @@ function get_pledge_contributors( $pledge_id, $status = 'publish', $contributor_ return $posts; } +/** + * Get the contributor posts in the format used for the JS templates. + * + * @param int $pledge_id The post ID of the pledge. + * + * @return array An array of contributor data, ready to be used in the JS templates. + */ +function get_pledge_contributors_data( $pledge_id ) { + $contrib_data = array(); + $contributors = get_pledge_contributors( $pledge_id, 'all' ); + + foreach ( $contributors as $contributor_status => $group ) { + $contrib_data[ $contributor_status ] = array_map( + function( $contributor_post ) use ( $contributor_status, $pledge_id ) { + $name = $contributor_post->post_title; + $contributor = get_user_by( 'login', $name ); + + return [ + 'pledgeId' => $pledge_id, + 'contributorId' => $contributor_post->ID, + 'status' => $contributor_status, + 'avatar' => get_avatar( $contributor, 32 ), + // @todo Add full name, from `$contributor`? + 'name' => $name, + 'resendLabel' => __( 'Resend Confirmation', 'wporg' ), + 'removeConfirm' => sprintf( __( 'Remove %s from this pledge?', 'wporg-5ftf' ), $name ), + 'removeLabel' => sprintf( __( 'Remove %s', 'wporg' ), $name ), + ]; + }, + $group + ); + } + return $contrib_data; +} + /** * Get the user objects that correspond with pledge contributor posts. * diff --git a/plugins/wporg-5ftf/includes/endpoints.php b/plugins/wporg-5ftf/includes/endpoints.php index fcec07b..e10acb9 100644 --- a/plugins/wporg-5ftf/includes/endpoints.php +++ b/plugins/wporg-5ftf/includes/endpoints.php @@ -34,6 +34,7 @@ function handler() { Contributor\remove_contributor( $contributor_id ); wp_die( wp_json_encode( [ 'success' => true, + 'contributors' => Contributor\get_pledge_contributors_data( $pledge_id ), ] ) ); break; } diff --git a/plugins/wporg-5ftf/includes/pledge-meta.php b/plugins/wporg-5ftf/includes/pledge-meta.php index 28d849d..1c412be 100755 --- a/plugins/wporg-5ftf/includes/pledge-meta.php +++ b/plugins/wporg-5ftf/includes/pledge-meta.php @@ -210,7 +210,7 @@ function render_meta_boxes( $pledge, $box ) { $data[ $key ] = get_post_meta( $pledge->ID, META_PREFIX . $key, $config['single'] ); } - $contributors = Contributor\get_pledge_contributors( $pledge->ID, 'all' ); + $contributors = Contributor\get_pledge_contributors_data( $pledge->ID ); echo '
'; diff --git a/plugins/wporg-5ftf/views/manage-contributors.php b/plugins/wporg-5ftf/views/manage-contributors.php index 54dcaa7..44bac2b 100644 --- a/plugins/wporg-5ftf/views/manage-contributors.php +++ b/plugins/wporg-5ftf/views/manage-contributors.php @@ -8,63 +8,59 @@ use function WordPressDotOrg\FiveForTheFuture\get_views_path; /** @var bool $readonly */ ?> -
- - $group ) : ?> - -

- -

+ - - - - -

- + + +
+
+ + var fftfContributors = JSON.parse( decodeURIComponent( \'%s\' ) );', + rawurlencode( wp_json_encode( $contributors ) ) + ); + ?> + +

+ +