Pull contents via ajax

assets/css/admin-pull-table.scss

@@ -18,6 +18,28 @@
 			padding-left: 10px;
 		}
 	}
+
+	#distributor-pull-modal{
+		position: fixed;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		background: rgba(0, 0, 0, 50%);
+		display: flex;
+		align-items: center;
+		z-index: 9999;
+
+		&>div{
+			margin: 0 auto;
+			display: block;
+			width: 300px;
+			background: white;
+			padding: 20px;
+			border-radius: 10px;
+			box-shadow: 1px 2px 15px rgba(0, 0, 0, 30%);
+		}
+	}
 }
 
 .wp-list-table .disabled {

assets/js/admin-pull.js

@@ -1,7 +1,7 @@
 import '../css/admin-pull-table.scss';
 
 import jQuery from 'jquery';
 import { addQueryArgs } from '@wordpress/url';
 import { __ } from '@wordpress/i18n';
 
 const { document } = window;
@@ -15,6 +15,7 @@
 const asDraftCheckboxes = document.querySelectorAll( '[name=dt_as_draft]' );
 const pullLinks = document.querySelectorAll( '.distributor_page_pull .pull a' );
 
+// Change target website to pull contents from
 jQuery( chooseConnection ).on( 'change', ( event ) => {
 	document.location =
 		event.currentTarget.options[
@@ -25,55 +26,178 @@
 } );
 
 if ( chooseConnection && choosePostType && form ) {
+	// Handle post type selection
 	if ( choosePostTypeBtn ) {
 		jQuery( choosePostTypeBtn ).on( 'click', ( event ) => {
 			event.preventDefault();
 
 			document.location = getURL();
 
 			document.body.className += ' ' + 'dt-loading';
 		} );
 	}
 
+	// Handle search button click
 	if ( searchField && searchBtn ) {
 		jQuery( searchBtn ).on( 'click', ( event ) => {
 			event.preventDefault();
 
 			const search = searchField.value;
 
 			document.location = `${ getURL() }&s=${ search }`;
 
 			document.body.className += ' dt-loading';
 		} );
 	}
 
-	if ( asDraftCheckboxes && pullLinks ) {
+	// Handle pull mode checkbox event
+	if ( asDraftCheckboxes ) {
 		jQuery( asDraftCheckboxes ).on( 'change', ( event ) => {
 			if ( event.currentTarget.checked ) {
+				// Check all pull mode checkbox as there are multiple. Ideally before and after post list.
 				for ( let i = 0; i < asDraftCheckboxes.length; ++i ) {
 					asDraftCheckboxes[ i ].checked = true;
 				}
 
 				for ( let i = 0; i < pullLinks.length; ++i ) {
-					pullLinks[ i ].href = addQueryArgs( pullLinks[ i ].href, {
-						dt_as_draft: 'draft' /*eslint camelcase: 0*/,
-					} );
 					pullLinks[ i ].text = __( 'Pull as draft', 'distributor' );
 				}
 			} else {
+				// Uncheck all pull mode checkbox as there are multiple. Ideally before and after post list.
 				for ( let i = 0; i < asDraftCheckboxes.length; ++i ) {
 					asDraftCheckboxes[ i ].checked = false;
 				}
 
 				for ( let i = 0; i < pullLinks.length; ++i ) {
-					pullLinks[ i ].href = addQueryArgs( pullLinks[ i ].href, {
-						dt_as_draft: '' /*eslint camelcase: 0*/,
-					} );
 					pullLinks[ i ].text = __( 'Pull', 'distributor' );
 				}
 			}
 		} );
 	}
+
+	// Pull content via ajax
+	jQuery( '#doaction, #doaction2' ).on( 'click', e => {
+		// Check action
+		var action = jQuery( '[name="action"]' ).val();
+		if ( action != 'bulk-syndicate' ) {
+			return;
+		}
+		e.preventDefault();
+		openModal();
+	});
+
+	jQuery( '.distributor_page_pull .pull a' ).on( 'click', function( e ) {
+		e.preventDefault();
+		jQuery( this ).closest( 'tr' ).find( '.check-column input[type="checkbox"]' ).prop( 'checked', true );
+		openModal();
+	});
+
+	function openModal() {
+		// Prepare data
+		var aborted        = false;
+		var post_ids       = [];
+		var source_label   = jQuery('#pull_connections option:selected').text();
+
+		jQuery( '#the-list .check-column input[type="checkbox"]:checked' ).each( function() {
+			var id = parseInt( jQuery( this ).val() );
+			if ( id && post_ids.indexOf( id ) === -1 ) {
+				post_ids.push( id );
+			}
+		} );
+
+		var post_ids_count = post_ids.length;
+		if ( ! post_ids_count ) {
+			alert( 'Please select posts to pull' );
+			return;
+		}
+
+		function log( custom_content ) {
+			jQuery( '#distributor-pull-modal .pull-progress' ).html( custom_content || `Pulled: ${post_ids_count-post_ids.length}/${post_ids_count}` );
+		}
+
+		// Create modal for pulling via ajax
+		jQuery( '#distributor-pull-modal' ).remove();
+		jQuery( 'body' ).append(
+			`
+			<div id="distributor-pull-modal">
+				<div>
+					<div class="pull-head-section">
+						<h3>Pulling from <b>${source_label}</b></h3>
+						<div class="pull-progress">Selected: ${post_ids_count}</div>
+					</div>
+					<br/>
+					<div id="pull-button-container">
+						<button class="button button-secondary" data-action="cancel">Cancel</button>
+						<button class="button button-primary" data-action="start">Start</button>
+					</div>
+				</div>
+			</div>
+			`
+		);
+
+		jQuery( '#distributor-pull-modal' ).on( 'click', '[data-action="start"]', function() {
+			jQuery( this ).prop( 'disabled', true );
+
+			var excludes  = [ 'post[]', 'action2', 'page', 'paged' ];
+			var form_data = {};
+			jQuery( '#posts-filter' ).serializeArray().forEach( field => {
+				if ( excludes.indexOf( field.name ) == -1 ) {
+					form_data[ field.name ] = field.value;
+				}
+			});
+			form_data.action = 'distributor_pull_content';
+
+			function looper() {
+				if ( aborted ) {
+					jQuery('#distributor-pull-modal').remove()
+				}
+
+				log();
+
+				form_data.post_id = post_ids.shift();
+				var xhr = new XMLHttpRequest();
+
+				jQuery.ajax({
+					url: window.ajaxurl,
+					type: 'POST',
+					data: form_data,
+					xhr: function() {
+						return xhr;
+					},
+					success: function (resp) {
+						if ( aborted ) {
+							return;
+						}
+
+						if ( ! resp.success || ! resp.data?.redirect_to ) {
+							log( `<span style="color:#a00;">${resp.data?.message || 'Something went wrong!'}</span>`);
+							return;
+						}
+
+						log();
+
+						if ( post_ids.length ) {
+							// Call the pull again for remaing post
+							looper();
+						} else {
+							// Redirect to where it asks to
+							window.location.assign( resp.data.redirect_to );
+						}
+					}
+				});
+			}
+
+			looper();
+		}).on( 'click', '[data-action="cancel"]', function() {
+			aborted = true;
+			jQuery( '#distributor-pull-modal' ).remove();
+
+			// Refresh the page if any post already pulled.
+			if ( post_ids_count > post_ids.length ) {
+				window.location.reload();
+			}
+		} );
+	};
 }
 
 /**

includes/classes/PullListTable.php

@@ -339,7 +339,7 @@ public function column_name( $item ) {
 
 				$actions = [
 					//phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotValidated -- see `wp_fix_server_vars()`.
-					'pull' => sprintf( '<a href="%s">%s</a>', esc_url( wp_nonce_url( admin_url( 'admin.php?page=pull&action=syndicate&_wp_http_referer=' . rawurlencode( esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ) ) . '&post=' . $item->ID . '&connection_type=' . $connection_type . '&connection_id=' . $connection_id . '&pull_post_type=' . $item->post_type . '&dt_as_draft=' . $draft ), 'bulk-distributor_page_pull' ) ), $draft ? esc_html__( 'Pull as draft', 'distributor' ) : esc_html__( 'Pull', 'distributor' ) ),
+					'pull' => sprintf( '<a href="#">%s</a>', $draft ? esc_html__( 'Pull as draft', 'distributor' ) : esc_html__( 'Pull', 'distributor' ) ),
 					'view' => '<a href="' . esc_url( $item->link ) . '">' . esc_html__( 'View', 'distributor' ) . '</a>',
 					//phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotValidated -- see `wp_fix_server_vars()`.
 					'skip' => sprintf( '<a href="%s">%s</a>', esc_url( wp_nonce_url( admin_url( 'admin.php?page=pull&action=skip&_wp_http_referer=' . rawurlencode( esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ) ) . '&post=' . $item->ID . '&connection_type=' . $connection_type . '&connection_id=' . $connection_id ), 'dt_skip' ) ), esc_html__( 'Skip', 'distributor' ) ),
@@ -355,7 +355,7 @@ public function column_name( $item ) {
 
 			$actions = [
 				//phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotValidated -- see `wp_fix_server_vars()`.
-				'pull'   => sprintf( '<a href="%s">%s</a>', esc_url( wp_nonce_url( admin_url( 'admin.php?page=pull&action=syndicate&_wp_http_referer=' . rawurlencode( esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ) ) . '&post=' . $item->ID . '&connection_type=' . $connection_type . '&connection_id=' . $connection_id . '&pull_post_type=' . $item->post_type . '&dt_as_draft=' . $draft ), 'bulk-distributor_page_pull' ) ), $draft ? esc_html__( 'Pull as draft', 'distributor' ) : esc_html__( 'Pull', 'distributor' ) ),
+				'pull'   => sprintf( '<a href="#">%s</a>', $draft ? esc_html__( 'Pull as draft', 'distributor' ) : esc_html__( 'Pull', 'distributor' ) ),
 				//phpcs:ignore WordPress.Security.ValidatedSanitizedInput.InputNotValidated -- see `wp_fix_server_vars()`.
 				'unskip' => sprintf( '<a href="%s">%s</a>', esc_url( wp_nonce_url( admin_url( 'admin.php?page=pull&action=unskip&_wp_http_referer=' . rawurlencode( esc_url_raw( wp_unslash( $_SERVER['REQUEST_URI'] ) ) ) . '&post=' . $item->ID . '&connection_type=' . $connection_type . '&connection_id=' . $connection_id ), 'dt_unskip' ) ), esc_html__( 'Unskip', 'distributor' ) ),
 				'view'   => '<a href="' . esc_url( $item->link ) . '">' . esc_html__( 'View', 'distributor' ) . '</a>',