Commit 62412f0b authored by Eric Windham's avatar Eric Windham Committed by Kenny Hall

Issue#3379 - Filter forms in submissions and exports (#3390)

* changes to add filter for import/export and submissions

* fixed some issues for submissions

* fixed filter to be case insensitve

* fixed enqueue script issues

* another enqueue fix

* Removed <br> tag that was forcing elements down unnecessarily. Updated width of new filter input to comply with previous styling and get all actions on one line.

* changed overflow to auto from scroll

* fixes label clicking issue for uft-8 export checkbox
parent 8cac89bb
......@@ -6,3 +6,32 @@
.ninja-forms-settings .postbox .item-controls {
display: none;
}
.nf_export_input {
width: 60%;
}
.nf_filter_sub_input {
width: 159px;
}
.nf-form-dropdown {
display:none;
border: 1px solid black;
background-color: lightgrey;
position: absolute;
max-height: 150px;
overflow: auto;
width: 60%;
}
.nf-form-option:hover {
background-color: #0073aa;
color: #FFFFFF;
cursor: pointer;
}
.nf-form-option {
padding: 4px;
border-bottom: 1px solid black;
margin-bottom: 0;
}
jQuery( document ).ready( function( $ ) {
var clickedElement;
$(document).off( 'mousedown' ).on( 'mousedown', function( e ) {
clickedElement = e.target;
});
$( '#nf_export_form_2' ).off( 'focus' ).on( 'focus', function () {
//show the dropdown on focus of the input
$( '.nf-form-dropdown' ).show();
});
$( '#nf_export_form_2' ).off( 'keyup' ).on( 'keyup', function () {
//show the dropdown if it isn't show
$( '.nf-form-dropdown' ).show();
// get the value of the input, which we filter on
var filter = $( this ).val();
if( '' === filter ) {
//if the filter val is empty, show all form options
$( '.nf-form-dropdown' ).find( 'li' ).show();
} else {
$.each( $( '#nf_form_export_options span' ), function ( index, span ) {
var tmpSpan = $( span );
// test to see if span text contains the entered value
if ( 0 <= tmpSpan.text().toLowerCase().indexOf( filter.toLowerCase() ) ) {
// shows options that DO contain the text entered
tmpSpan.parent().show();
} else {
// hides options the do not contain the text entered
tmpSpan.parent().hide();
}
});
}
});
$( '#nf_export_form_2' ).off( 'blur' ).on( 'blur' , function( e ) {
if( 'undefined' !== typeof clickedElement ) {
if ( ! $( clickedElement ).hasClass( 'nf-form-option-item' ) ) {
$( '#nf_export_form_2' ).val( '' );
$( '.nf-form-dropdown' ).hide();
}
}
});
$( '.nf-form-option' ).off( 'click' ).on( 'click', function() {
// on click get the value of the input
var val = $( this ).data( 'val' );
// nf_export_form is now a hidden field instead of select element
$( '#nf_export_form' ).val( val );
// set the text of the input field
$( '#nf_export_form_2' ).val( '' );
// and hide the option.
$( '.nf-form-dropdown' ).hide();
});
});
\ No newline at end of file
jQuery( document ).ready( function( $ ) {
var clickedElement;
$(document).off( 'mousedown' ).on( 'mousedown', function( e ) {
clickedElement = e.target;
});
$( '#nf_form_filter' ).off( 'focus' ).on( 'focus', function () {
//show the dropdown on focus of the input
$( '.nf-form-dropdown' ).show();
});
$( '#nf_form_filter' ).off( 'keyup' ).on( 'keyup', function () {
//show the dropdown if it isn't show
$( '.nf-form-dropdown' ).show();
// get the value of the input, which we filter on
var filter = $( this ).val();
if( '' === filter ) {
//if the filter val is empty, show all form options
$( '.nf-form-dropdown' ).find( 'li' ).show();
} else {
$.each( $( '#nf_form_options span' ), function ( index, span ) {
var tmpSpan = $( span );
// test to see if span text contains the entered value
if ( 0 <= tmpSpan.text().toLowerCase().indexOf( filter.toLowerCase() ) ) {
// shows options that DO contain the text entered
tmpSpan.parent().show();
} else {
// hides options the do not contain the text entered
tmpSpan.parent().hide();
}
});
}
});
$( '#nf_form_filter' ).off( 'blur' ).on( 'blur' , function( e ) {
if( 'undefined' !== typeof clickedElement ) {
if ( ! $( clickedElement ).hasClass( 'nf-form-option' ) ) {
$( '#nf_form_filter' ).val( '' );
$( '.nf-form-dropdown' ).hide();
}
}
});
$( '.nf-form-option' ).off( 'click' ).on( 'click', function() { console.log('hello');
// on click get the value of the input
var val = $( this ).data( 'val' );
// nf_export_form is now a hidden field instead of select element
$( '#form_id' ).val( val );
$( '#form_id' ).trigger( 'change' );
// set the text of the input field
$( '#nf_form_filter' ).val( '' );
// and hide the option.
$( '.nf-form-dropdown' ).hide();
});
});
\ No newline at end of file
......@@ -129,9 +129,16 @@ final class NF_Admin_Menus_ImportExport extends NF_Abstracts_Submenu
wp_enqueue_script('postbox');
wp_enqueue_script('jquery-ui-draggable');
wp_enqueue_style( 'nf-admin-settings', Ninja_Forms::$url . 'assets/css/admin-settings.css' );
wp_nonce_field( 'closedpostboxes', 'closedpostboxesnonce', false );
wp_nonce_field( 'meta-box-order', 'meta-box-order-nonce', false );
wp_register_script( 'ninja_forms_admin_import_export',
Ninja_Forms::$url . 'assets/js/admin-import-export.js', array( 'jquery' ), FALSE, TRUE );
wp_enqueue_script( 'ninja_forms_admin_import_export' );
Ninja_Forms::template( 'admin-menu-import-export.html.php', compact( 'tabs', 'active_tab' ) );
}
......
......@@ -51,6 +51,8 @@ final class NF_Admin_Menus_Submissions extends NF_Abstracts_Submenu
add_action( 'load-edit.php', array( $this, 'export_listen' ) );
add_action('admin_head', array( $this, 'hide_page_title_action' ) );
add_action( 'admin_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
}
public function get_page_title()
......@@ -66,6 +68,17 @@ final class NF_Admin_Menus_Submissions extends NF_Abstracts_Submenu
// This section intentionally left blank.
}
/**
* enqueue scripts here
*/
public function enqueue_scripts() {
wp_enqueue_style( 'nf-admin-settings', Ninja_Forms::$url . 'assets/css/admin-settings.css' );
wp_register_script( 'ninja_forms_admin_submissions',
Ninja_Forms::$url . 'assets/js/admin-submissions.js', array( 'jquery' ), FALSE, TRUE );
wp_enqueue_script( 'ninja_forms_admin_submissions' );
}
/**
* Change Columns
*
......
......@@ -2,11 +2,27 @@
<option value="0"><?php echo __( '- Select a form', 'ninja-forms' ); ?></option>
<?php foreach( $form_options as $id => $title ): ?>
<option value="<?php echo $id; ?>" <?php if( $id == $form_selected ) echo 'selected'; ?>>
<?php echo $title; ?>
<?php echo $title . " ( ID: " . $id . " )"; ?>
</option>
<?php endforeach; ?>
</select>
<input type="text" name="nf_form_filter"
id="nf_form_filter"
class="nf_filter_sub_input"
autocomplete="off"
placeholder="Filter Forms"
/>
<div class="nf-form-dropdown">
<ul class="widefat" id="nf_form_options">
<?php foreach( $form_options as $id => $title ): ?>
<li class="nf-form-option" data-val="<?php echo intval( $id ); ?>">
<span class="nf-form-option-item">
<?php echo $title . " ( ID: " . $id . " )"; ?>
</span>
</li>
<?php endforeach; ?>
</ul>
</div>
<?php if( isset( $_GET[ 'form_id' ] ) ): ?>
<input type="text" name="begin_date" class="datepicker" placeholder="<?php echo __( 'Begin Date', 'ninja-forms' ); ?>" value="<?php echo $begin_date; ?>">
......
......@@ -5,16 +5,41 @@
<table class="form-table">
<tbody>
<tr id="row_nf_export_form">
<th scope="row">
<label for="nf_export_form"><?php echo __( 'Select a form', 'ninja-forms' ); ?></label>
</th>
<td>
<select name="nf_export_form" id="nf_export_form" class="widefat">
<?php foreach( $forms as $form ): ?>
<option value="<?php echo intval( $form->get_id() ); ?>"><?php echo $form->get_setting( 'title' ); ?></option>
<?php endforeach; ?>
</select>
</td>
<th scope="row">
<label for="nf_export_form_2"><?php echo __( 'Select a form', 'ninja-forms' ); ?></label>
</th>
<td style="width:30%;">
<select name="nf_export_form" id="nf_export_form" class="">
<?php foreach( $forms as $form ): ?>
<option value="<?php echo intval(
$form->get_id() ); ?>"><?php echo
$form->get_setting( 'title' ) . " ( ID: " . $form->get_id() . " )";
?>
</option>
<?php endforeach; ?>
</select>
</td>
<td style="position:relative;" style="width:30%;">
<input type="text" name="nf_export_form_2"
id="nf_export_form_2"
class="nf_export_input" autocomplete="off"
placeholder="Filter Forms"
/>
<div class="nf-form-dropdown">
<ul class="widefat" id="nf_form_export_options">
<?php foreach( $forms as $form ): ?>
<li class="nf-form-option"
data-val="<?php echo intval( $form->get_id() ); ?>">
<span class="nf-form-option-item"><?php echo
$form->get_setting( 'title' )
. " ( ID: "
. $form->get_id() . " )"; ?>
</span>
</li>
<?php endforeach; ?>
</ul>
</div>
</td>
</tr>
<tr id="row_nf_export_form_encoding">
<th scope="row">
......@@ -22,11 +47,11 @@
_e( 'Disable UTF-8 Encoding', 'ninja-forms' );
?></label>
</th>
<td>
<td colspan="2">
<input type="checkbox" name="nf_export_form_turn_off_encoding"
id="nf_export_form_turn_off_encoding">
<label style="color:red;font-style: italic;"
for="nf_import_form_turn_off_encoding">
for="nf_export_form_turn_off_encoding">
If you are having trouble with form imports, please
click here to disable UTF-8 encoding and try again.
</label>
......@@ -44,5 +69,4 @@
</table>
</form>
</div>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment