Skip to content

feat: improve import from WordPress and database UX with stepped flow #1284

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HardeepAsrani wants to merge 2 commits into
base: development
Choose a base branch
from
+135 −49
Open

feat: improve import from WordPress and database UX with stepped flow #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f56181b
feat: improve import from WordPress and database UX with stepped flow
HardeepAsrani Mar 16, 2026
e41d7d6
fix: qa issues
HardeepAsrani Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
124 changes: 75 additions & 49 deletions classes/Visualizer/Render/Layout.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -884,7 +884,7 @@ public static function _renderTabBasic( $args ) {
// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
?>
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
<?php
}
do_action( 'visualizer_chart_schedules_spl', 'csv', $chart_id, 1 );
Expand Down Expand Up @@ -934,7 +934,7 @@ public static function _renderTabBasic( $args ) {
// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
?>
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
<?php
}
do_action( 'visualizer_chart_schedules_spl', 'json', $chart_id, 1 );
Expand Down Expand Up @@ -1039,37 +1039,50 @@ class="dashicons dashicons-lock"></span></h2>
);
?>
<!-- import from WordPress -->
<li class="viz-group visualizer_source_query_wp <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wp' ); ?> ">
<li class="viz-group visualizer_source_query_wp <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wp' ) ); ?> ">
<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from WordPress', 'visualizer' ); ?><span
class="dashicons dashicons-lock"></span></h2>
<div class="viz-group-content edit-data-content">
<div>
<p class="viz-group-description"><?php _e( 'You can import data from WordPress here.', 'visualizer' ); ?></p>
<form id="vz-filter-wizard" action="<?php echo $save_filter; ?>" method="post" target="thehole">
<p class="viz-group-description"><?php _e( 'How often do you want to refresh the data from WordPress.', 'visualizer' ); ?></p>
<select name="refresh" id="vz-filter-import-time" class="visualizer-select">
<form id="vz-filter-wizard" action="<?php echo esc_url( $save_filter ); ?>" method="post" target="thehole">
<?php
$bttn_label = 'visualizer_source_query_wp' === $source_of_chart ? __( 'Modify Filter', 'visualizer' ) : __( 'Create Filter', 'visualizer' );
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
$schedules = apply_filters(
'visualizer_chart_schedules', array(
'-1' => __( 'One-time', 'visualizer' ),
),
'wp',
$chart_id
);
foreach ( $schedules as $num => $name ) {
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
?>
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
<?php
}
do_action( 'visualizer_chart_schedules_spl', 'wp', $chart_id, 1 );
$is_wp_source = 'visualizer_source_query_wp' === $source_of_chart;
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
$bttn_label = $is_wp_source ? '1. ' . __( 'Modify Data Source', 'visualizer' ) : '1. ' . __( 'Choose Data Source', 'visualizer' );
?>
</select>

<input type="button" id="filter-chart-button" class="button button-secondary show-chart-toggle" value="<?php echo $bttn_label; ?>" data-current="chart" data-t-filter="<?php _e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo $bttn_label; ?>">
<input type="button" id="db-filter-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
<!-- Step 1: Choose / modify data source -->
<input type="button" id="filter-chart-button" class="button button-secondary show-chart-toggle vz-import-step-btn" value="<?php echo esc_attr( $bttn_label ); ?>" data-current="chart" data-t-filter="<?php esc_attr_e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo esc_attr( $bttn_label ); ?>">

<!-- Step 2: Sync schedule toggle -->
<div id="vz-wp-sync-step">
<button type="button" id="vz-wp-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_wp_source ? 'true' : 'false'; ?>">
<?php echo '2. ' . __( 'Set Sync Schedule', 'visualizer' ); ?>
<span class="dashicons dashicons-arrow-down-alt2"></span>
</button>
<div id="vz-wp-sync-options"<?php echo $is_wp_source ? '' : ' style="display:none"'; ?>>
<select name="refresh" id="vz-filter-import-time" class="visualizer-select">
<?php
$schedules = apply_filters(
'visualizer_chart_schedules', array(
'-1' => __( 'One-time', 'visualizer' ),
),
'wp',
$chart_id
);
foreach ( $schedules as $num => $name ) {
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
?>
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
<?php
}
do_action( 'visualizer_chart_schedules_spl', 'wp', $chart_id, 1 );
?>
</select>
<input type="button" id="db-filter-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
</div>
</div>
</form>
<?php echo apply_filters( 'visualizer_pro_upsell', '', 'import-wp' ); ?>
</div>
Expand Down Expand Up @@ -1138,7 +1151,7 @@ class="dashicons dashicons-lock"></span></h2>
foreach ( $schedules as $num => $name ) {
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
?>
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
<?php
}
do_action( 'visualizer_chart_schedules_spl', 'json', $chart_id, 1 );
Expand Down Expand Up @@ -1185,38 +1198,51 @@ class="dashicons dashicons-lock"></span></h2>
);
?>
<!-- import from db -->
<li class="viz-group visualizer_source_query <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'db-query' ); ?>">
<li class="viz-group visualizer_source_query <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'db-query' ) ); ?>">
<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from database', 'visualizer' ); ?><span
class="dashicons dashicons-lock"></span></h2>
<div class="viz-group-content edit-data-content">
<div>
<p class="viz-group-description"><?php _e( 'You can import data from the database here.', 'visualizer' ); ?></p>
<form id="vz-db-wizard" action="<?php echo $save_query; ?>" method="post" target="thehole">
<p class="viz-group-description"><?php _e( 'How often do you want to refresh the data from the database.', 'visualizer' ); ?></p>
<select name="refresh" id="vz-db-import-time" class="visualizer-select">
<form id="vz-db-wizard" action="<?php echo esc_url( $save_query ); ?>" method="post" target="thehole">
<?php
$bttn_label = 'visualizer_source_query' === $source_of_chart ? __( 'Modify Query', 'visualizer' ) : __( 'Create Query', 'visualizer' );
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
$schedules = apply_filters(
'visualizer_chart_schedules', array(
'-1' => __( 'One-time', 'visualizer' ),
),
'db',
$chart_id
);
foreach ( $schedules as $num => $name ) {
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
?>
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
<?php
}
do_action( 'visualizer_chart_schedules_spl', 'db', $chart_id, 1 );
$is_db_source = 'visualizer_source_query' === $source_of_chart;
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
$bttn_label = $is_db_source ? __( '1. Modify Data Source', 'visualizer' ) : __( '1. Choose Data Source', 'visualizer' );
Copy link
Contributor

@Soare-Robert-Daniel Soare-Robert-Daniel Mar 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think it can work to put 1. and 2. as a prefix for those strings? This is to prevent changing the string in case of a re-order.

?>
</select>

<!-- Step 1: Choose / modify data source -->
<input type="hidden" name="params" id="viz-db-wizard-params">
<input type="button" id="db-chart-button" class="button button-secondary show-chart-toggle vz-import-step-btn" value="<?php echo esc_attr( $bttn_label ); ?>" data-current="chart" data-t-filter="<?php esc_attr_e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo esc_attr( $bttn_label ); ?>">

<input type="button" id="db-chart-button" class="button button-secondary show-chart-toggle" value="<?php echo $bttn_label; ?>" data-current="chart" data-t-filter="<?php _e( 'Show Chart', 'visualizer' ); ?>" data-t-chart="<?php echo $bttn_label; ?>">
<input type="button" id="db-chart-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
<!-- Step 2: Sync schedule toggle -->
<div id="vz-db-sync-step">
<button type="button" id="vz-db-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_db_source ? 'true' : 'false'; ?>">
<?php echo '2. ' . __( 'Set Sync Schedule', 'visualizer' ); ?>
<span class="dashicons dashicons-arrow-down-alt2"></span>
</button>
<div id="vz-db-sync-options"<?php echo $is_db_source ? '' : ' style="display:none"'; ?>>
<select name="refresh" id="vz-db-import-time" class="visualizer-select">
<?php
$schedules = apply_filters(
'visualizer_chart_schedules', array(
'-1' => __( 'One-time', 'visualizer' ),
),
'db',
$chart_id
);
foreach ( $schedules as $num => $name ) {
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
?>
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
<?php
}
do_action( 'visualizer_chart_schedules_spl', 'db', $chart_id, 1 );
?>
</select>
<input type="button" id="db-chart-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
</div>
</div>
<?php echo apply_filters( 'visualizer_pro_upsell', '', 'db-query' ); ?>
</form>
</div>
Expand Down
42 changes: 42 additions & 0 deletions css/frame.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1016,6 +1016,48 @@ button#editor-chart-button {
text-align: center;
}

/* Import steps — stepped data-source + schedule flow */
.vz-import-step-btn {
width: 100%;
margin-bottom: 4px !important;
text-align: left;
}

.vz-import-step-toggle {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 0;
padding: 5px 10px;
background: #f0f0f1;
border: 1px solid #c3c4c7;
border-radius: 2px;
cursor: pointer;
font-size: 13px;
color: #50575e;
line-height: 2;
}

.vz-import-step-toggle:hover {
background: #e5e5e5;
border-color: #a7aaad;
}

.vz-import-step-toggle .dashicons {
transition: transform 0.2s ease;
flex-shrink: 0;
}

.vz-import-step-toggle[aria-expanded="true"] .dashicons {
transform: rotate(180deg);
}

#vz-wp-sync-options,
#vz-db-sync-options {
padding-top: 8px;
}

#sidebar {
border-left: 1px solid #ddd;
background: #f3f3f3;
Expand Down
18 changes: 18 additions & 0 deletions js/frame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -371,6 +371,8 @@
function init_filter_import() {
$( '#db-filter-save-button' ).on( 'click', function(){
$('#vz-filter-wizard').submit();
$( '#vz-wp-sync-options' ).hide();
$( '#vz-wp-sync-btn' ).attr( 'aria-expanded', false );
});
}

Expand Down Expand Up @@ -445,11 +447,27 @@
}
} );

$( document ).on( 'click', '#vz-db-sync-btn', function(){
var $options = $( '#vz-db-sync-options' );
var isOpen = $options.is( ':visible' );
$options.toggle();
$( this ).attr( 'aria-expanded', ! isOpen );
} );

$( document ).on( 'click', '#vz-wp-sync-btn', function(){
var $options = $( '#vz-wp-sync-options' );
var isOpen = $options.is( ':visible' );
$options.toggle();
$( this ).attr( 'aria-expanded', ! isOpen );
} );

$( '#db-chart-save-button' ).on( 'click', function(){
// submit only if a query has been provided.
if($('#db-query-form .visualizer-db-query').val().length > 0){
$('#viz-db-wizard-params').val($('#db-query-form').serialize());
$('#vz-db-wizard').submit();
$( '#vz-db-sync-options' ).hide();
$( '#vz-db-sync-btn' ).attr( 'aria-expanded', false );
}else{
$('#canvas').unlock();
}
Expand Down
Loading