| 1 |
/** |
| 2 |
* Charitable GiveWP Migration Tool JavaScript. |
| 3 |
* |
| 4 |
* Handles the GiveWP migration tool UI interactions, AJAX batch processing, |
| 5 |
* progress bar updates, and results display. |
| 6 |
* |
| 7 |
* @since 1.8.10 |
| 8 |
*/ |
| 9 |
|
| 10 |
/* global jQuery, charitable_givewp_migration */ |
| 11 |
( function( $ ) { |
| 12 |
|
| 13 |
'use strict'; |
| 14 |
|
| 15 |
var GiveWPMigration = { |
| 16 |
|
| 17 |
importId: null, |
| 18 |
batchTimer: null, |
| 19 |
$wrap: null, |
| 20 |
$startBtn: null, |
| 21 |
$progress: null, |
| 22 |
$progressBar: null, |
| 23 |
$progressStatus: null, |
| 24 |
$results: null, |
| 25 |
$dryRunResults: null, |
| 26 |
$error: null, |
| 27 |
totalItems: 0, |
| 28 |
processedItems: 0, |
| 29 |
|
| 30 |
/** |
| 31 |
* Initialize the migration tool. |
| 32 |
*/ |
| 33 |
init: function() { |
| 34 |
this.$wrap = $( '.charitable-givewp-migration-wrap' ); |
| 35 |
this.$startBtn = $( '#charitable-givewp-migrate-start' ); |
| 36 |
this.$progress = this.$wrap.find( '.migration-progress' ); |
| 37 |
this.$progressBar = this.$wrap.find( '.progress-bar-inner' ); |
| 38 |
this.$progressStatus = this.$wrap.find( '.progress-status' ); |
| 39 |
this.$results = this.$wrap.find( '.migration-results' ); |
| 40 |
this.$dryRunResults = this.$wrap.find( '.migration-dry-run-results' ); |
| 41 |
this.$error = this.$wrap.find( '.migration-error' ); |
| 42 |
|
| 43 |
if ( ! this.$wrap.length ) { |
| 44 |
return; |
| 45 |
} |
| 46 |
|
| 47 |
this.$startBtn.on( 'click', $.proxy( this.onStart, this ) ); |
| 48 |
}, |
| 49 |
|
| 50 |
/** |
| 51 |
* Handle the start button click. |
| 52 |
* |
| 53 |
* @param {Event} e The click event. |
| 54 |
*/ |
| 55 |
onStart: function( e ) { |
| 56 |
e.preventDefault(); |
| 57 |
|
| 58 |
var campaigns = $( 'input[name="givewp_import_campaigns"]' ).is( ':checked' ), |
| 59 |
donations = $( 'input[name="givewp_import_donations"]' ).is( ':checked' ), |
| 60 |
dryRun = $( 'input[name="givewp_dry_run"]' ).is( ':checked' ), |
| 61 |
i18n = charitable_givewp_migration.i18n, |
| 62 |
confirmMsg; |
| 63 |
|
| 64 |
if ( ! campaigns && ! donations ) { |
| 65 |
alert( 'Please select at least one import type.' ); |
| 66 |
return; |
| 67 |
} |
| 68 |
|
| 69 |
confirmMsg = dryRun ? i18n.confirm_dry : i18n.confirm; |
| 70 |
|
| 71 |
if ( ! confirm( confirmMsg ) ) { |
| 72 |
return; |
| 73 |
} |
| 74 |
|
| 75 |
// Reset UI. |
| 76 |
this.$results.hide(); |
| 77 |
this.$dryRunResults.hide(); |
| 78 |
this.$error.hide().text( '' ); |
| 79 |
this.$progress.show(); |
| 80 |
this.$progressBar.css( 'width', '0%' ); |
| 81 |
this.$progressStatus.text( i18n.starting ); |
| 82 |
this.$startBtn.prop( 'disabled', true ); |
| 83 |
this.processedItems = 0; |
| 84 |
|
| 85 |
// Start the import. |
| 86 |
$.ajax( { |
| 87 |
url: charitable_givewp_migration.ajax_url, |
| 88 |
type: 'POST', |
| 89 |
data: { |
| 90 |
action: 'charitable_givewp_import_start', |
| 91 |
nonce: charitable_givewp_migration.nonce, |
| 92 |
campaigns: campaigns ? 1 : 0, |
| 93 |
donations: donations ? 1 : 0, |
| 94 |
dry_run: dryRun ? 1 : 0 |
| 95 |
}, |
| 96 |
success: $.proxy( function( response ) { |
| 97 |
if ( response.success ) { |
| 98 |
this.importId = response.data.import_id; |
| 99 |
this.totalItems = 0; |
| 100 |
|
| 101 |
if ( campaigns && response.data.counts.campaigns ) { |
| 102 |
this.totalItems += parseInt( response.data.counts.campaigns, 10 ); |
| 103 |
} |
| 104 |
if ( donations && response.data.counts.donations ) { |
| 105 |
this.totalItems += parseInt( response.data.counts.donations, 10 ); |
| 106 |
} |
| 107 |
|
| 108 |
// Start batch processing. |
| 109 |
this.processBatch(); |
| 110 |
} else { |
| 111 |
this.showError( response.data.message || i18n.error ); |
| 112 |
} |
| 113 |
}, this ), |
| 114 |
error: $.proxy( function() { |
| 115 |
this.showError( i18n.error ); |
| 116 |
}, this ) |
| 117 |
} ); |
| 118 |
}, |
| 119 |
|
| 120 |
/** |
| 121 |
* Process the next batch via AJAX. |
| 122 |
*/ |
| 123 |
processBatch: function() { |
| 124 |
var self = this; |
| 125 |
|
| 126 |
$.ajax( { |
| 127 |
url: charitable_givewp_migration.ajax_url, |
| 128 |
type: 'POST', |
| 129 |
data: { |
| 130 |
action: 'charitable_givewp_import_batch', |
| 131 |
nonce: charitable_givewp_migration.nonce, |
| 132 |
import_id: this.importId |
| 133 |
}, |
| 134 |
success: function( response ) { |
| 135 |
if ( ! response.success ) { |
| 136 |
self.showError( response.data.message || charitable_givewp_migration.i18n.error ); |
| 137 |
return; |
| 138 |
} |
| 139 |
|
| 140 |
var data = response.data, |
| 141 |
results = data.results, |
| 142 |
total = 0, |
| 143 |
done = 0, |
| 144 |
i18n = charitable_givewp_migration.i18n; |
| 145 |
|
| 146 |
// Calculate progress. |
| 147 |
if ( results.campaigns ) { |
| 148 |
total += results.campaigns.imported + results.campaigns.skipped + results.campaigns.errors; |
| 149 |
} |
| 150 |
if ( results.donations ) { |
| 151 |
total += results.donations.imported + results.donations.skipped + results.donations.errors; |
| 152 |
} |
| 153 |
|
| 154 |
self.processedItems = total; |
| 155 |
|
| 156 |
// Update progress bar. |
| 157 |
var pct = self.totalItems > 0 ? Math.min( ( total / self.totalItems ) * 100, 100 ) : 0; |
| 158 |
self.$progressBar.css( 'width', pct + '%' ); |
| 159 |
|
| 160 |
// Update status text. |
| 161 |
if ( data.current_phase ) { |
| 162 |
var phaseName = i18n[ data.current_phase ] || data.current_phase; |
| 163 |
self.$progressStatus.text( |
| 164 |
i18n.importing |
| 165 |
.replace( '%1$s', phaseName ) |
| 166 |
.replace( '%2$d', total ) |
| 167 |
.replace( '%3$d', self.totalItems ) |
| 168 |
); |
| 169 |
} |
| 170 |
|
| 171 |
if ( 'complete' === data.status ) { |
| 172 |
self.$progressBar.css( 'width', '100%' ); |
| 173 |
self.$progressStatus.text( data.dry_run ? i18n.dry_complete : i18n.complete ); |
| 174 |
self.$startBtn.prop( 'disabled', false ); |
| 175 |
|
| 176 |
if ( data.dry_run ) { |
| 177 |
self.showDryRunResults( results ); |
| 178 |
} else { |
| 179 |
self.showResults( results ); |
| 180 |
} |
| 181 |
} else { |
| 182 |
// Continue after a short delay. |
| 183 |
self.batchTimer = setTimeout( function() { |
| 184 |
self.processBatch(); |
| 185 |
}, 500 ); |
| 186 |
} |
| 187 |
}, |
| 188 |
error: function() { |
| 189 |
self.showError( charitable_givewp_migration.i18n.error ); |
| 190 |
} |
| 191 |
} ); |
| 192 |
}, |
| 193 |
|
| 194 |
/** |
| 195 |
* Show the import results table. |
| 196 |
* |
| 197 |
* @param {Object} results The results data. |
| 198 |
*/ |
| 199 |
showResults: function( results ) { |
| 200 |
var $tbody = this.$results.find( 'tbody' ); |
| 201 |
$tbody.empty(); |
| 202 |
|
| 203 |
if ( results.campaigns ) { |
| 204 |
$tbody.append( |
| 205 |
'<tr><td>Campaigns</td><td>' + results.campaigns.imported + '</td><td>' + results.campaigns.skipped + '</td><td>' + results.campaigns.errors + '</td></tr>' |
| 206 |
); |
| 207 |
} |
| 208 |
if ( results.donations ) { |
| 209 |
$tbody.append( |
| 210 |
'<tr><td>Donations</td><td>' + results.donations.imported + '</td><td>' + results.donations.skipped + '</td><td>' + results.donations.errors + '</td></tr>' |
| 211 |
); |
| 212 |
} |
| 213 |
|
| 214 |
this.$results.show(); |
| 215 |
}, |
| 216 |
|
| 217 |
/** |
| 218 |
* Show the dry-run results table. |
| 219 |
* |
| 220 |
* @param {Object} results The results data. |
| 221 |
*/ |
| 222 |
showDryRunResults: function( results ) { |
| 223 |
var $tbody = this.$dryRunResults.find( 'tbody' ); |
| 224 |
$tbody.empty(); |
| 225 |
|
| 226 |
if ( results.campaigns ) { |
| 227 |
$tbody.append( |
| 228 |
'<tr><td>Campaigns</td><td>' + results.campaigns.imported + '</td><td>' + results.campaigns.skipped + '</td><td>' + results.campaigns.errors + '</td></tr>' |
| 229 |
); |
| 230 |
} |
| 231 |
if ( results.donations ) { |
| 232 |
$tbody.append( |
| 233 |
'<tr><td>Donations</td><td>' + results.donations.imported + '</td><td>' + results.donations.skipped + '</td><td>' + results.donations.errors + '</td></tr>' |
| 234 |
); |
| 235 |
} |
| 236 |
|
| 237 |
this.$dryRunResults.show(); |
| 238 |
}, |
| 239 |
|
| 240 |
/** |
| 241 |
* Show an error message. |
| 242 |
* |
| 243 |
* @param {string} message The error message. |
| 244 |
*/ |
| 245 |
showError: function( message ) { |
| 246 |
this.$error.text( message ).show(); |
| 247 |
this.$startBtn.prop( 'disabled', false ); |
| 248 |
this.$progressStatus.text( '' ); |
| 249 |
|
| 250 |
if ( this.batchTimer ) { |
| 251 |
clearTimeout( this.batchTimer ); |
| 252 |
} |
| 253 |
} |
| 254 |
}; |
| 255 |
|
| 256 |
$( document ).ready( function() { |
| 257 |
GiveWPMigration.init(); |
| 258 |
} ); |
| 259 |
|
| 260 |
} )( jQuery ); |
| 261 |
|
