Edit File by line

import { Component, unmountComponentAtNode } from '@wordpress/element';

[0] Fix | Delete

import PropTypes from 'prop-types';

[1] Fix | Delete

import { __ } from '@wordpress/i18n';

[2] Fix | Delete

import {

[3] Fix | Delete

Card,

[4] Fix | Delete

CardHeader,

[5] Fix | Delete

CardBody,

[6] Fix | Delete

CardFooter,

[7] Fix | Delete

Button,

[8] Fix | Delete

Spinner,

[9] Fix | Delete

} from '@wordpress/components';

[10] Fix | Delete

import {

[11] Fix | Delete

DisplayModal,

[12] Fix | Delete

triggerBulkExportAction,

[13] Fix | Delete

SelectForms,

[14] Fix | Delete

SelectDates,

[15] Fix | Delete

DisplayNotice,

[16] Fix | Delete

} from './';

[17] Fix | Delete

[18] Fix | Delete

export class DisplayBulkExport extends Component {

[19] Fix | Delete

constructor( props ) {

[20] Fix | Delete

super( props );

[21] Fix | Delete

this.state = {

[22] Fix | Delete

forms: false,

[23] Fix | Delete

dates: false,

[24] Fix | Delete

startDate: false,

[25] Fix | Delete

endDate: false,

[26] Fix | Delete

startDateTimestamp: false,

[27] Fix | Delete

endDateTimeStamp: false,

[28] Fix | Delete

isModalOpen: false,

[29] Fix | Delete

processing: false,

[30] Fix | Delete

exportSuccess: false,

[31] Fix | Delete

exportError: false,

[32] Fix | Delete

fetchAborted: false

[33] Fix | Delete

};

[34] Fix | Delete

this.setForms = this.setForms.bind( this );

[35] Fix | Delete

this.setDates = this.setDates.bind( this );

[36] Fix | Delete

this.closeModal = this.closeModal.bind( this );

[37] Fix | Delete

this.openModal = this.openModal.bind( this );

[38] Fix | Delete

this.setProcessing = this.setProcessing.bind( this );

[39] Fix | Delete

this.setExportSuccess = this.setExportSuccess.bind( this );

[40] Fix | Delete

this.setExportError = this.setExportError.bind( this );

[41] Fix | Delete

this.abortFetch = this.abortFetch.bind( this );

[42] Fix | Delete

this.cancelComp = this.cancelComp.bind(this);

[43] Fix | Delete

}

[44] Fix | Delete

[45] Fix | Delete

//Component Ready event

[46] Fix | Delete

componentDidMount() {

[47] Fix | Delete

//Make sure there is no conflicts between components

[48] Fix | Delete

const emailComp = document.getElementById( 'nf-trigger-emails-container' );

[49] Fix | Delete

if( emailComp !== null ){

[50] Fix | Delete

unmountComponentAtNode(

[51] Fix | Delete

document.getElementById( 'nf-trigger-emails-container' )

[52] Fix | Delete

);

[53] Fix | Delete

}

[54] Fix | Delete

}

[55] Fix | Delete

[56] Fix | Delete

//Prepare component to cancel all subscribtions before unmounting

[57] Fix | Delete

componentWillUnmount() {

[58] Fix | Delete

this.setForms( false );

[59] Fix | Delete

//Make sure all jobs are stopped

[60] Fix | Delete

this.abortFetch();

[61] Fix | Delete

}

[62] Fix | Delete

[63] Fix | Delete

//State Setters

[64] Fix | Delete

setForms( forms ) {

[65] Fix | Delete

this.setState( { forms: forms } );

[66] Fix | Delete

}

[67] Fix | Delete

setDates( dates ) {

[68] Fix | Delete

this.setState( { dates } );

[69] Fix | Delete

this.setState( { startDate: dates.date[ 0 ] } );

[70] Fix | Delete

this.setState( {

[71] Fix | Delete

startDateTimestamp: Math.round(

[72] Fix | Delete

new Date( this.state.startDate ).getTime() / 1000

[73] Fix | Delete

[74] Fix | Delete

} );

[75] Fix | Delete

this.setState( { endDate: dates.date[ 1 ] } );

[76] Fix | Delete

this.setState( {

[77] Fix | Delete

endDateTimeStamp: Math.round(

[78] Fix | Delete

new Date( this.state.endDate ).getTime() / 1000

[79] Fix | Delete

[80] Fix | Delete

} );

[81] Fix | Delete

}

[82] Fix | Delete

closeModal() {

[83] Fix | Delete

this.setState( { isModalOpen: false } );

[84] Fix | Delete

}

[85] Fix | Delete

openModal() {

[86] Fix | Delete

this.setState( { isModalOpen: true } );

[87] Fix | Delete

}

[88] Fix | Delete

setProcessing( value ) {

[89] Fix | Delete

this.setState( { processing: value } );

[90] Fix | Delete

}

[91] Fix | Delete

setExportSuccess() {

[92] Fix | Delete

this.setState( { exportSuccess: true } );

[93] Fix | Delete

}

[94] Fix | Delete

setExportError() {

[95] Fix | Delete

this.setState( { exportError: true } );

[96] Fix | Delete

}

[97] Fix | Delete

//Abort fetch controller

[98] Fix | Delete

abortFetch(){

[99] Fix | Delete

this.props.data.fetchController.abort();

[100] Fix | Delete

this.setState( { fetchAborted: true } );

[101] Fix | Delete

}

[102] Fix | Delete

//Cancel emails or Remove Component via cancel button

[103] Fix | Delete

cancelComp() {

[104] Fix | Delete

//Unmount component

[105] Fix | Delete

if(this.state.processing){

[106] Fix | Delete

//Close Modal

[107] Fix | Delete

this.closeModal();

[108] Fix | Delete

//exit Fetch operation

[109] Fix | Delete

this.setProcessing( false );

[110] Fix | Delete

this.abortFetch();

[111] Fix | Delete

} else {

[112] Fix | Delete

this.props.data.setClose();

[113] Fix | Delete

}

[114] Fix | Delete

[115] Fix | Delete

}

[116] Fix | Delete

[117] Fix | Delete

[118] Fix | Delete

render() {

[119] Fix | Delete

const {

[120] Fix | Delete

state,

[121] Fix | Delete

props,

[122] Fix | Delete

cancelComp,

[123] Fix | Delete

setForms,

[124] Fix | Delete

setDates,

[125] Fix | Delete

setProcessing,

[126] Fix | Delete

setExportSuccess,

[127] Fix | Delete

setExportError,

[128] Fix | Delete

} = this;

[129] Fix | Delete

const {

[130] Fix | Delete

forms,

[131] Fix | Delete

dates,

[132] Fix | Delete

startDate,

[133] Fix | Delete

endDate,

[134] Fix | Delete

startDateTimestamp,

[135] Fix | Delete

endDateTimeStamp,

[136] Fix | Delete

isModalOpen,

[137] Fix | Delete

processing,

[138] Fix | Delete

exportSuccess,

[139] Fix | Delete

exportError,

[140] Fix | Delete

fetchAborted

[141] Fix | Delete

} = state;

[142] Fix | Delete

[143] Fix | Delete

const { data } = props;

[144] Fix | Delete

const globalParams = data.props.globalParams;

[145] Fix | Delete

const setClose = data.setClose;

[146] Fix | Delete

const signal = data.fetchController.signal;

[147] Fix | Delete

[148] Fix | Delete

//Get Forms Titles

[149] Fix | Delete

let formTitles = false;

[150] Fix | Delete

if ( forms ) {

[151] Fix | Delete

formTitles = [];

[152] Fix | Delete

forms.forEach( ( formID ) => {

[153] Fix | Delete

const form = globalParams.forms[ formID ];

[154] Fix | Delete

const title = ' ' + formID + ': ' + form.formTitle;

[155] Fix | Delete

formTitles.push( title );

[156] Fix | Delete

} );

[157] Fix | Delete

}

[158] Fix | Delete

[159] Fix | Delete

//Props for process

[160] Fix | Delete

const actionProps = {

[161] Fix | Delete

globalParams,

[162] Fix | Delete

forms,

[163] Fix | Delete

startDateTimestamp,

[164] Fix | Delete

endDateTimeStamp,

[165] Fix | Delete

setProcessing,

[166] Fix | Delete

setExportSuccess,

[167] Fix | Delete

setExportError,

[168] Fix | Delete

signal

[169] Fix | Delete

};

[170] Fix | Delete

[171] Fix | Delete

return (

[172] Fix | Delete

<div

[173] Fix | Delete

id="nf-DisplayBulkExport"

[174] Fix | Delete

style={ {

[175] Fix | Delete

marginTop: '1rem',

[176] Fix | Delete

position: 'relative',

[177] Fix | Delete

zIndex: '1111',

[178] Fix | Delete

} }

[179] Fix | Delete

[180] Fix | Delete

[181] Fix | Delete

[182] Fix | Delete

<h3>{ __( 'Bulk Form Exports', 'ninja-forms' ) }</h3>

[183] Fix | Delete

</CardHeader>

[184] Fix | Delete

[185] Fix | Delete

[186] Fix | Delete

<p>{ __( 'Select Forms', 'ninja-forms' ) }</p>

[187] Fix | Delete

<SelectForms

[188] Fix | Delete

forms={ globalParams.forms }

[189] Fix | Delete

setForms={ setForms }

[190] Fix | Delete

[191] Fix | Delete

[192] Fix | Delete

<p>{ __( 'Select Dates', 'ninja-forms' ) }</p>

[193] Fix | Delete

<SelectDates

[194] Fix | Delete

setDates={ setDates }

[195] Fix | Delete

dateFormat={ globalParams.dateFormat }

[196] Fix | Delete

[197] Fix | Delete

<div>

[198] Fix | Delete

{ formTitles && (

[199] Fix | Delete

[200] Fix | Delete

{ __( 'Forms Selected: ', 'ninja-forms' ) +

[201] Fix | Delete

formTitles }

[202] Fix | Delete

</p>

[203] Fix | Delete

) }

[204] Fix | Delete

{ startDate &&

[205] Fix | Delete

__( 'Start Date: ', 'ninja-forms' ) +

[206] Fix | Delete

startDate }

[207] Fix | Delete

<br />

[208] Fix | Delete

{ endDate &&

[209] Fix | Delete

__( 'End Date: ', 'ninja-forms' ) + endDate }

[210] Fix | Delete

</div>

[211] Fix | Delete

</CardBody>

[212] Fix | Delete

[213] Fix | Delete

[214] Fix | Delete

<div>

[215] Fix | Delete

{ forms && dates && !fetchAborted && (

[216] Fix | Delete

<Button

[217] Fix | Delete

style={ { marginRight: '1rem' } }

[218] Fix | Delete

isPrimary

[219] Fix | Delete

onClick={ () => {

[220] Fix | Delete

triggerBulkExportAction( actionProps );

[221] Fix | Delete

} }

[222] Fix | Delete

[223] Fix | Delete

{ __( 'Export', 'ninja-forms' ) }

[224] Fix | Delete

</Button>

[225] Fix | Delete

) }

[226] Fix | Delete

<Button

[227] Fix | Delete

isSecondary

[228] Fix | Delete

onClick={ () => this.openModal() }

[229] Fix | Delete

[230] Fix | Delete

{ __( 'Cancel', 'ninja-forms' ) }

[231] Fix | Delete

</Button>

[232] Fix | Delete

{ isModalOpen && (

[233] Fix | Delete

<DisplayModal

[234] Fix | Delete

title={ __(

[235] Fix | Delete

'Cancel Bulk Export?',

[236] Fix | Delete

'ninja-forms'

[237] Fix | Delete

) }

[238] Fix | Delete

actionText={ __( 'Yes', 'ninja-forms' ) }

[239] Fix | Delete

action={ cancelComp }

[240] Fix | Delete

cancelText={ __( 'No', 'ninja-forms' ) }

[241] Fix | Delete

cancel={ () => this.closeModal() }

[242] Fix | Delete

[243] Fix | Delete

) }

[244] Fix | Delete

[245] Fix | Delete

{ processing && <Spinner /> }

[246] Fix | Delete

[247] Fix | Delete

{ exportError && (

[248] Fix | Delete

<DisplayNotice

[249] Fix | Delete

status="error"

[250] Fix | Delete

isDismissible="false"

[251] Fix | Delete

text={ __(

[252] Fix | Delete

'Exports failed',

[253] Fix | Delete

'ninja-forms'

[254] Fix | Delete

) }

[255] Fix | Delete

[256] Fix | Delete

) }

[257] Fix | Delete

[258] Fix | Delete

{ exportSuccess && (

[259] Fix | Delete

<DisplayNotice

[260] Fix | Delete

isDismissible="false"

[261] Fix | Delete

text={ __(

[262] Fix | Delete

'Export Processed',

[263] Fix | Delete

'ninja-forms'

[264] Fix | Delete

) }

[265] Fix | Delete

[266] Fix | Delete

) }

[267] Fix | Delete

[268] Fix | Delete

{ fetchAborted && (

[269] Fix | Delete

[270] Fix | Delete

<DisplayNotice

[271] Fix | Delete

isDismissible="false"

[272] Fix | Delete

status="error"

[273] Fix | Delete

text={ __(

[274] Fix | Delete

'Export Aborted',

[275] Fix | Delete

'ninja-forms'

[276] Fix | Delete

) }

[277] Fix | Delete

[278] Fix | Delete

<Button

[279] Fix | Delete

isSecondary

[280] Fix | Delete

onClick={ () => setClose() }

[281] Fix | Delete

[282] Fix | Delete

{ __( 'Reopen to allow new bulk export process', 'ninja-forms' ) }

[283] Fix | Delete

</Button>

[284] Fix | Delete

</>

[285] Fix | Delete

) }

[286] Fix | Delete

</div>

[287] Fix | Delete

</CardFooter>

[288] Fix | Delete

</Card>

[289] Fix | Delete

</div>

[290] Fix | Delete

);

[291] Fix | Delete

}

[292] Fix | Delete

}

[293] Fix | Delete

[294] Fix | Delete

DisplayBulkExport.propTypes = {

[295] Fix | Delete

data: PropTypes.object.isRequired,

[296] Fix | Delete

}

[297] Fix | Delete