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
This commit is contained in:
Kelly Dwan 2019-11-20 11:01:00 -05:00 committed by GitHub
parent f32d26ef47
commit 82192eea4c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 437 additions and 73 deletions

View file

@ -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>