Manage a Pledge: Enable adding/removing contributors from wp-admin. (#99)

This updates the display of contributors into a table view, and adds the ability to add and remove contributors to existing pledges.

The display has been refactored to use JS templates & JSON contributor data– the data is output onto the page when loaded from the server, and rendered when the page finishes loading. Adding & removing contributors now submits to an admin-ajax.php endpoint, which, if successful, return the new list of contributors. This ensures the display is always up to date.

Fixes #3

plugins/wporg-5ftf/assets/css/admin.css

@@ -7,17 +7,17 @@
 	display: inline-block;
 }
 
-.pledge-form .form-field input[type=text],
-.pledge-form .form-field input[type=url],
-.pledge-form .form-field input[type=number],
-.pledge-form .form-field input[type=email],
+.pledge-form .form-field input[type="text"],
+.pledge-form .form-field input[type="url"],
+.pledge-form .form-field input[type="number"],
+.pledge-form .form-field input[type="email"],
 .pledge-form .form-field textarea {
 	display: block;
 	width: 100%;
 	padding: 8px;
 }
 
-.pledge-form .form-field input[type=number] {
+.pledge-form .form-field input[type="number"] {
 	max-width: 10em;
 	height: auto;
 }
@@ -32,6 +32,45 @@
 	line-height: 1;
 }
 
-.pledge-form .form-field__agree label {
-	margin-bottom: 0;
+.pledge-form .form-field .email-status {
+	font-size: 1.1em;
+}
+
+.pledge-form .email-status.is-confirmed {
+	color: #297531;
+}
+
+.pledge-form .email-status.is-unconfirmed {
+	color: #c92c2c;
+}
+
+.pledge-form .contributor-list-heading {
+	margin: 1rem 0;
+}
+
+.pledge-form .contributor-list {
+	margin-bottom: 1.5rem;
+}
+
+.pledge-contributors.pledge-status__draft .resend-confirm {
+	display: none;
+}
+
+.contributor-list th,
+.contributor-list td,
+.contributor-list th *,
+.contributor-list td * {
+	vertical-align: middle;
+}
+
+.contributor-list .avatar {
+	margin-right: 8px;
+}
+
+.contributor-list .button-link-delete {
+	text-decoration: none;
+}
+
+.contributor-list .button-link-delete .dashicons {
+	margin-top: -2px;
 }

plugins/wporg-5ftf/assets/js/admin.js

@@ -0,0 +1,147 @@
+/* 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,
+			data: Object.assign( {
+				action: 'manage-contributors',
+				pledge_id: FiveForTheFuture.pledgeId,
+				_ajax_nonce: FiveForTheFuture.manageNonce,
+			}, data ),
+			success: callback,
+			dataType: 'json',
+		} );
+	}
+
+	/**
+	 * Send off the AJAX request with contributors pulled from the contributor text field.
+	 */
+	function _addContributors() {
+		const contribs = $( '#5ftf-pledge-contributors' ).val();
+		if ( ! contribs.length ) {
+			return;
+		}
+
+		sendAjaxRequest( {
+			contributors: contribs,
+			manage_action: 'add-contributor',
+		}, function( response ) {
+			if ( ! response.success ) {
+				const $message = $( '<div>' )
+					.attr( 'id', 'add-contrib-message' )
+					.addClass( 'notice notice-error notice-alt' )
+					.append( $( '<p>' ).text( response.message ) );
+
+				$( '#add-contrib-message' ).replaceWith( $message );
+			} else if ( response.contributors ) {
+				render( response.contributors, container );
+				$( '#5ftf-pledge-contributors' ).val( '' );
+			}
+		} );
+	}
+
+	// Initialize.
+	const container = document.getElementById( '5ftf-contributors' );
+	render( fftfContributors, container );
+
+	// Remove Contributor button action.
+	$( container ).on( 'click', '[data-action="remove-contributor"]', function( event ) {
+		event.preventDefault();
+
+		const confirmMsg = event.currentTarget.dataset.confirm;
+		if ( confirmMsg && confirm( confirmMsg ) ) {
+			const data = event.currentTarget.dataset;
+
+			sendAjaxRequest( {
+				contributor_id: data.contributorPost || 0,
+				manage_action: data.action || '',
+			} );
+		}
+	} );
+
+	// Resend Contributor Confirmation button action.
+	$( container ).on( 'click', '[data-action="resend-contributor-confirmation"]', function( event ) {
+		event.preventDefault();
+		const data = event.currentTarget.dataset;
+
+		sendAjaxRequest( {
+			contributor_id: data.contributorPost || 0,
+			manage_action: data.action || '',
+		} );
+	} );
+
+	// Add Contributor button action.
+	$( container ).on( 'click', '[data-action="add-contributor"]', function( event ) {
+		event.preventDefault();
+		_addContributors();
+	} );
+
+	// Prevent "enter" in the contributor field from submitting the whole post form.
+	$( container ).on( 'keydown', '#5ftf-pledge-contributors', function( event ) {
+		if ( 13 === event.which ) {
+			event.preventDefault();
+			_addContributors();
+		}
+	} );
+} );

plugins/wporg-5ftf/includes/contributor.php

@@ -135,7 +135,7 @@ function populate_list_table_columns( $column, $post_id ) {
  * @param int   $pledge_id    The post ID of the pledge.
  * @param array $contributors Array of contributor wporg usernames.
  *
- * @return void
+ * @return array List of the new contributor post IDs, mapped from username => ID.
  */
 function add_pledge_contributors( $pledge_id, $contributors ) {
 	$results = array();
@@ -162,6 +162,8 @@ function add_pledge_contributors( $pledge_id, $contributors ) {
 	 *                            or an error code on failure.
 	 */
 	do_action( FiveForTheFuture\PREFIX . '_add_pledge_contributors', $pledge_id, $contributors, $results );
+
+	return $results;
 }
 
 /**
@@ -238,6 +240,43 @@ 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,
+					'displayName'   => $contributor->display_name,
+					'publishDate'   => get_the_date( '', $contributor_post ),
+					'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.
  *

plugins/wporg-5ftf/includes/endpoints.php

@@ -0,0 +1,79 @@
+<?php
+/**
+ * Handle submissions to admin-ajax.php.
+ */
+
+namespace WordPressDotOrg\FiveForTheFuture\Endpoints;
+
+use WordPressDotOrg\FiveForTheFuture\{ Auth, Contributor, Email, PledgeForm };
+
+add_action( 'wp_ajax_manage-contributors', __NAMESPACE__ . '\manage_contributors_handler' );
+
+/**
+ * Handle the AJAX request for managing contributors on a pledge.
+ * This responds to adding, removing, and resending emails to contributors.
+ */
+function manage_contributors_handler() {
+	check_ajax_referer( 'manage-contributors', '_ajax_nonce' );
+
+	$action         = filter_input( INPUT_POST, 'manage_action' );
+	$pledge_id      = filter_input( INPUT_POST, 'pledge_id', FILTER_VALIDATE_INT );
+	$contributor_id = filter_input( INPUT_POST, 'contributor_id', FILTER_VALIDATE_INT );
+	$token          = filter_input( INPUT_POST, '_token' );
+	$authenticated  = Auth\can_manage_pledge( $pledge_id, $token );
+
+	if ( is_wp_error( $authenticated ) ) {
+		wp_die( wp_json_encode( [
+			'success' => false,
+			'message' => $authenticated->get_error_message(),
+		] ) );
+	}
+
+	switch ( $action ) {
+		case 'resend-contributor-confirmation':
+			$contribution = get_post( $contributor_id );
+			Email\send_contributor_confirmation_emails( $pledge_id, $contributor_id );
+			wp_die( wp_json_encode( [
+				'success' => true,
+				'message' => sprintf( __( 'Confirmation email sent to %s.', 'wporg-5ftf' ), $contribution->post_title ),
+			] ) );
+			break;
+
+		case 'remove-contributor':
+			// Trash contributor.
+			Contributor\remove_contributor( $contributor_id );
+			wp_die( wp_json_encode( [
+				'success'      => true,
+				'contributors' => Contributor\get_pledge_contributors_data( $pledge_id ),
+			] ) );
+			break;
+
+		case 'add-contributor':
+			$pledge = get_post( $pledge_id );
+			$new_contributors = PledgeForm\parse_contributors( $_POST['contributors'] );
+			if ( is_wp_error( $new_contributors ) ) {
+				wp_die( wp_json_encode( [
+					'success' => false,
+					'message' => $new_contributors->get_error_message(),
+				] ) );
+			}
+			$contributor_ids = Contributor\add_pledge_contributors( $pledge_id, $new_contributors );
+			if ( 'publish' === $pledge->post_status ) {
+				foreach ( $contributor_ids as $contributor_id ) {
+					Email\send_contributor_confirmation_emails( $pledge_id, $contributor_id );
+				}
+			}
+
+			// Fetch all contributors, now that the new ones have been added.
+			$contributors = Contributor\get_pledge_contributors_data( $pledge_id );
+
+			wp_die( wp_json_encode( [
+				'success'      => true,
+				'contributors' => $contributors,
+			] ) );
+			break;
+	}
+
+	// No matching action, we can just exit.
+	wp_die();
+}

plugins/wporg-5ftf/includes/pledge-form.php

@@ -155,7 +155,8 @@ function render_form_manage() {
 	$updated  = false;
 
 	// @todo Get pledge ID from somewhere.
-	$data = PledgeMeta\get_pledge_meta();
+	$data      = PledgeMeta\get_pledge_meta();
+	$is_manage = true;
 
 	if ( 'Update Pledge' === $action ) {
 		$processed = process_form_manage();

plugins/wporg-5ftf/includes/pledge-meta.php

@@ -202,14 +202,15 @@ function add_meta_boxes() {
  * @param array   $box
  */
 function render_meta_boxes( $pledge, $box ) {
-	$readonly = ! current_user_can( 'edit_page', $pledge->ID );
+	$readonly  = ! current_user_can( 'edit_page', $pledge->ID );
+	$is_manage = true;
 
 	$data = array();
 	foreach ( get_pledge_meta_config() as $key => $config ) {
 		$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 '<div class="pledge-form">';
 
@@ -279,13 +280,6 @@ function save_pledge( $pledge_id, $pledge ) {
 			get_page_by_path( 'for-organizations' )->ID
 		);
 	}
-
-	if ( filter_input( INPUT_POST, 'resend-contributor-confirmation' ) ) {
-		Email\send_contributor_confirmation_emails(
-			$pledge_id,
-			filter_input( INPUT_GET, 'resend-contributor-id', FILTER_VALIDATE_INT )
-		);
-	}
 }
 
 /**
@@ -485,8 +479,25 @@ function enqueue_assets() {
 	$ver = filemtime( FiveForTheFuture\PATH . '/assets/css/admin.css' );
 	wp_register_style( '5ftf-admin', plugins_url( 'assets/css/admin.css', __DIR__ ), [], $ver );
 
+	$ver = filemtime( FiveForTheFuture\PATH . '/assets/js/admin.js' );
+	wp_register_script( '5ftf-admin', plugins_url( 'assets/js/admin.js', __DIR__ ), [ 'jquery', 'wp-util' ], $ver );
+
+	$script_data = [
+		'pledgeId'    => get_the_ID(),
+		'manageNonce' => wp_create_nonce( 'manage-contributors' ),
+	];
+	wp_add_inline_script(
+		'5ftf-admin',
+		sprintf(
+			'var FiveForTheFuture = JSON.parse( decodeURIComponent( \'%s\' ) );',
+			rawurlencode( wp_json_encode( $script_data ) )
+		),
+		'before'
+	);
+
 	$current_page = get_current_screen();
 	if ( Pledge\CPT_ID === $current_page->id ) {
 		wp_enqueue_style( '5ftf-admin' );
+		wp_enqueue_script( '5ftf-admin' );
 	}
 }

plugins/wporg-5ftf/index.php

@@ -32,6 +32,7 @@ function load() {
 	require_once get_includes_path() . 'pledge-meta.php';
 	require_once get_includes_path() . 'pledge-form.php';
 	require_once get_includes_path() . 'xprofile.php';
+	require_once get_includes_path() . 'endpoints.php';
 	require_once get_includes_path() . 'miscellaneous.php';
 
 	// The logger expects things like `$_POST` which aren't set during unit tests.

plugins/wporg-5ftf/views/inputs-pledge-contributors.php

@@ -2,7 +2,7 @@
 namespace WordPressDotOrg\FiveForTheFuture\View;
 
 /** @var array $data */
-/** @var bool  $readonly */
+/** @var bool  $is_manage */
 ?>
 
 <div class="form-field">
@@ -15,7 +15,7 @@ namespace WordPressDotOrg\FiveForTheFuture\View;
 		name="pledge-contributors"
 		placeholder="sanguine.zoe206, captain-mal, kayleefixesyou"
 		value="<?php echo esc_attr( $data['pledge-contributors'] ); ?>"
-		required
+		<?php echo $is_manage ? '' : 'required'; ?>
 		aria-describedby="5ftf-pledge-contributors-help"
 	/>
 	<p id="5ftf-pledge-contributors-help">

plugins/wporg-5ftf/views/inputs-pledge-org-email.php

@@ -31,11 +31,15 @@ use WP_Post;
 
 	<?php if ( is_admin() ) : ?>
 		<?php if ( $data['pledge-email-confirmed'] ) : ?>
-			<span class="dashicons dashicons-yes-alt" aria-hidden="true"></span>
-			<?php esc_html_e( 'Confirmed', 'wporg' ); ?>
+			<p class="email-status is-confirmed">
+				<span class="dashicons dashicons-yes-alt" aria-hidden="true"></span>
+				<?php esc_html_e( 'Confirmed', 'wporg' ); ?>
+			</p>
 		<?php else : ?>
-			<span class="dashicons dashicons-warning" aria-hidden="true"></span>
-			<?php esc_html_e( 'Unconfirmed', 'wporg' ); ?>
+			<p class="email-status is-unconfirmed">
+				<span class="dashicons dashicons-warning" aria-hidden="true"></span>
+				<?php esc_html_e( 'Unconfirmed', 'wporg' ); ?>
+			</p>
 			<?php submit_button(
 				'Resend Confirmation',
 				'secondary',

plugins/wporg-5ftf/views/manage-contributors.php

@@ -1,61 +1,104 @@
 <?php
 namespace WordPressDotOrg\FiveForTheFuture\View;
 
+use function WordPressDotOrg\FiveForTheFuture\get_views_path;
+
 /** @var array $contributors */
 /** @var array $data */
 /** @var bool  $readonly */
 ?>
 
-<div class="5ftf-contributors">
-	<?php if ( ! empty( $contributors ) ) : ?>
-		<?php foreach ( $contributors as $contributor_status => $group ) : ?>
-			<?php if ( ! empty( $group ) ) : ?>
-				<h3 class="contributor-list-heading">
-					<?php
-					switch ( $contributor_status ) {
-						case 'pending':
-							esc_html_e( 'Unconfirmed', 'wporg' );
-							break;
-						case 'publish':
-							esc_html_e( 'Confirmed', 'wporg' );
-							break;
-					}
-					?>
-				</h3>
+<script type="text/template" id="tmpl-5ftf-contributor-lists">
+	<# if ( data.publish.length ) { #>
+		<h3 class="contributor-list-heading"><?php esc_html_e( 'Confirmed', 'wporg' ); ?></h3>
+		<table class="contributor-list publish striped widefat">
+			<thead>
+				<th scope="col"><?php esc_html_e( 'Contributor', 'wporg-5ftf' ); ?></th>
+				<th scope="col"><?php esc_html_e( 'Date Confirmed', 'wporg-5ftf' ); ?></th>
+				<th scope="col"><?php esc_html_e( 'Remove Contributor', 'wporg-5ftf' ); ?></th>
+			</thead>
+			<tbody>{{{ data.publish }}}</tbody>
+		</table>
+	<# } #>
+	<# if ( data.pending.length ) { #>
+		<h3 class="contributor-list-heading"><?php esc_html_e( 'Unconfirmed', 'wporg' ); ?></h3>
+		<table class="contributor-list pending striped widefat">
+			<thead>
+				<tr>
+					<th scope="col"><?php esc_html_e( 'Contributor', 'wporg-5ftf' ); ?></th>
+					<th scope="col" class="resend-confirm"><?php esc_html_e( 'Resend Confirmation', 'wporg-5ftf' ); ?></th>
+					<th scope="col"><?php esc_html_e( 'Remove Contributor', 'wporg-5ftf' ); ?></th>
+				</tr>
+			</thead>
+			<tbody>{{{ data.pending }}}</tbody>
+		</table>
+	<# } #>
+	<# if ( ! data.publish.length && ! data.pending.length ) { #>
+		<p><?php esc_html_e( 'There are no contributors added to this pledge yet.', 'wporg-5ftf' ); ?></p>
+	<# } #>
+</script>
 
-				<ul class="contributor-list <?php echo esc_attr( $contributor_status ); ?>">
-					<?php foreach ( $group as $contributor_post ) :
-						$contributor = get_user_by( 'login', $contributor_post->post_title );
-						?>
-						<li>
-							<?php echo get_avatar( $contributor->user_email, 32 ); ?>
-							<?php echo esc_html( $contributor_post->post_title ); ?>
-							<!-- TODO These buttons don't do anything yet.
-							<button class="button-primary" data-action="remove-contributor" data-contributor-post="<?php echo esc_attr( $contributor_post->ID ); ?>">
-								<?php esc_html_e( 'Remove', 'wporg' ); ?>
-							</button>
-							-->
-							<?php if ( 'pending' === $contributor_post->post_status ) : ?>
-								<?php submit_button(
-									'Resend Confirmation',
-									'secondary',
-									'resend-contributor-confirmation',
-									false,
-									array( 'formaction' => add_query_arg( 'resend-contributor-id', $contributor_post->ID ) )
-								); ?>
-							<?php endif; ?>
-						</li>
-					<?php endforeach; ?>
-				</ul>
-			<?php endif; ?>
-		<?php endforeach; ?>
-	<?php else : ?>
-		<p><?php esc_html_e( 'There are no contributors added to this pledge yet.', 'wporg' ); ?></p>
-	<?php endif; ?>
+<script type="text/template" id="tmpl-5ftf-contributor">
+	<tr>
+		<th scope="row">
+			{{{ data.avatar }}}
+			<span class="contributor-list__name">
+				{{ data.displayName }} ({{ data.name }})
+			</span>
+		</th>
+		<# if ( 'pending' === data.status ) { #>
+			<td class="resend-confirm">
+				<button
+					class="button"
+					data-action="resend-contributor-confirmation"
+					data-contributor-post="{{ data.contributorId }}"
+				>
+					{{ data.resendLabel }}
+				</button>
+			</td>
+		<# } else { #>
+			<td>{{ data.publishDate }}</td>
+		<# } #>
+		<td>
+			<button
+				class="button-link button-link-delete"
+				data-action="remove-contributor"
+				data-contributor-post="{{ data.contributorId }}"
+				data-confirm="{{ data.removeConfirm }}"
+				aria-label="{{ data.removeLabel }}"
+			>
+				<span class="dashicons dashicons-no-alt" aria-hidden="true"></span>
+				<?php esc_html_e( 'Remove', 'wporg-5ftf' ); ?>
+			</button>
+		</td>
+	</tr>
+</script> 
 
-	<!-- TODO This button doesn't do anything yet.
-	<button class="button-primary" data-action="add-contributor">
-		<?php esc_html_e( 'Add new contributor', 'wporg' ); ?>
+<div id="5ftf-contributors">
+	<div class="pledge-contributors pledge-status__<?php echo esc_attr( get_post_status() ); ?>">
+		<?php if ( ! empty( $contributors ) ) : ?>
+			<?php
+			printf(
+				'<script>var fftfContributors = JSON.parse( decodeURIComponent( \'%s\' ) );</script>',
+				rawurlencode( wp_json_encode( $contributors ) )
+			);
+			?>
+		<?php else : ?>
+			<p><?php esc_html_e( 'There are no contributors added to this pledge yet.', 'wporg' ); ?></p>
+		<?php endif; ?>
+	</div>
+
+	<?php
+	$data = [ 'pledge-contributors' => '' ];
+	require get_views_path() . 'inputs-pledge-contributors.php';
+	?>
+
+	<div id="add-contrib-message" role="alert" aria-atomic="true"></div>
+
+	<button
+		class="button-primary"
+		data-action="add-contributor"
+	>
+		<?php esc_html_e( 'Add new contributors', 'wporg' ); ?>
 	</button>
-	-->
 </div>