Skip to content

Commit f56181b

Browse files
HardeepAsraniHardeepAsrani
committed
feat: improve import from WordPress and database UX with stepped flow
- Rename "Create Filter"/"Create Query" buttons to "1. Choose Data Source" - Add "2. Set Sync Schedule" accordion toggle (always visible, animated chevron) - Move schedule selector under step-2 toggle for cleaner stepped UX
1 parent 1173551 commit f56181b

3 files changed

Lines changed: 124 additions & 49 deletions

File tree

‎classes/Visualizer/Render/Layout.php‎

Lines changed: 75 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -884,7 +884,7 @@ public static function _renderTabBasic( $args ) {
884884
// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
885885
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
886886
?>
887-
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
887+
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
888888
<?php
889889
}
890890
do_action( 'visualizer_chart_schedules_spl', 'csv', $chart_id, 1 );
@@ -934,7 +934,7 @@ public static function _renderTabBasic( $args ) {
934934
// phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
935935
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
936936
?>
937-
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
937+
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
938938
<?php
939939
}
940940
do_action( 'visualizer_chart_schedules_spl', 'json', $chart_id, 1 );
@@ -1039,37 +1039,50 @@ class="dashicons dashicons-lock"></span></h2>
10391039
);
10401040
?>
10411041
<!-- import from WordPress -->
1042-
<li class="viz-group visualizer_source_query_wp <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wp' ); ?> ">
1042+
<li class="viz-group visualizer_source_query_wp <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'import-wp' ) ); ?> ">
10431043
<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from WordPress', 'visualizer' ); ?><span
10441044
class="dashicons dashicons-lock"></span></h2>
10451045
<div class="viz-group-content edit-data-content">
10461046
<div>
10471047
<p class="viz-group-description"><?php _e( 'You can import data from WordPress here.', 'visualizer' ); ?></p>
1048-
<form id="vz-filter-wizard" action="<?php echo $save_filter; ?>" method="post" target="thehole">
1049-
<p class="viz-group-description"><?php _e( 'How often do you want to refresh the data from WordPress.', 'visualizer' ); ?></p>
1050-
<select name="refresh" id="vz-filter-import-time" class="visualizer-select">
1048+
<form id="vz-filter-wizard" action="<?php echo esc_url( $save_filter ); ?>" method="post" target="thehole">
10511049
<?php
1052-
$bttn_label = 'visualizer_source_query_wp' === $source_of_chart ? __( 'Modify Filter', 'visualizer' ) : __( 'Create Filter', 'visualizer' );
1053-
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
1054-
$schedules = apply_filters(
1055-
'visualizer_chart_schedules', array(
1056-
'-1' => __( 'One-time', 'visualizer' ),
1057-
),
1058-
'wp',
1059-
$chart_id
1060-
);
1061-
foreach ( $schedules as $num => $name ) {
1062-
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
1063-
?>
1064-
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
1065-
<?php
1066-
}
1067-
do_action( 'visualizer_chart_schedules_spl', 'wp', $chart_id, 1 );
1050+
$is_wp_source = 'visualizer_source_query_wp' === $source_of_chart;
1051+
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
1052+
$bttn_label = $is_wp_source ? __( '1. Modify Data Source', 'visualizer' ) : __( '1. Choose Data Source', 'visualizer' );
10681053
?>
1069-
</select>
10701054

1071-
<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; ?>">
1072-
<input type="button" id="db-filter-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
1055+
<!-- Step 1: Choose / modify data source -->
1056+
<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 ); ?>">
1057+
1058+
<!-- Step 2: Sync schedule toggle -->
1059+
<div id="vz-wp-sync-step">
1060+
<button type="button" id="vz-wp-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_wp_source ? 'true' : 'false'; ?>">
1061+
<?php _e( '2. Set Sync Schedule', 'visualizer' ); ?>
1062+
<span class="dashicons dashicons-arrow-down-alt2"></span>
1063+
</button>
1064+
<div id="vz-wp-sync-options"<?php echo $is_wp_source ? '' : ' style="display:none"'; ?>>
1065+
<select name="refresh" id="vz-filter-import-time" class="visualizer-select">
1066+
<?php
1067+
$schedules = apply_filters(
1068+
'visualizer_chart_schedules', array(
1069+
'-1' => __( 'One-time', 'visualizer' ),
1070+
),
1071+
'wp',
1072+
$chart_id
1073+
);
1074+
foreach ( $schedules as $num => $name ) {
1075+
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
1076+
?>
1077+
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
1078+
<?php
1079+
}
1080+
do_action( 'visualizer_chart_schedules_spl', 'wp', $chart_id, 1 );
1081+
?>
1082+
</select>
1083+
<input type="button" id="db-filter-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
1084+
</div>
1085+
</div>
10731086
</form>
10741087
<?php echo apply_filters( 'visualizer_pro_upsell', '', 'import-wp' ); ?>
10751088
</div>
@@ -1138,7 +1151,7 @@ class="dashicons dashicons-lock"></span></h2>
11381151
foreach ( $schedules as $num => $name ) {
11391152
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
11401153
?>
1141-
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
1154+
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
11421155
<?php
11431156
}
11441157
do_action( 'visualizer_chart_schedules_spl', 'json', $chart_id, 1 );
@@ -1185,38 +1198,51 @@ class="dashicons dashicons-lock"></span></h2>
11851198
);
11861199
?>
11871200
<!-- import from db -->
1188-
<li class="viz-group visualizer_source_query <?php echo apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'db-query' ); ?>">
1201+
<li class="viz-group visualizer_source_query <?php echo esc_attr( apply_filters( 'visualizer_pro_upsell_class', 'only-pro-feature', 'db-query' ) ); ?>">
11891202
<h2 class="viz-group-title viz-sub-group"><?php _e( 'Import from database', 'visualizer' ); ?><span
11901203
class="dashicons dashicons-lock"></span></h2>
11911204
<div class="viz-group-content edit-data-content">
11921205
<div>
11931206
<p class="viz-group-description"><?php _e( 'You can import data from the database here.', 'visualizer' ); ?></p>
1194-
<form id="vz-db-wizard" action="<?php echo $save_query; ?>" method="post" target="thehole">
1195-
<p class="viz-group-description"><?php _e( 'How often do you want to refresh the data from the database.', 'visualizer' ); ?></p>
1196-
<select name="refresh" id="vz-db-import-time" class="visualizer-select">
1207+
<form id="vz-db-wizard" action="<?php echo esc_url( $save_query ); ?>" method="post" target="thehole">
11971208
<?php
1198-
$bttn_label = 'visualizer_source_query' === $source_of_chart ? __( 'Modify Query', 'visualizer' ) : __( 'Create Query', 'visualizer' );
1199-
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
1200-
$schedules = apply_filters(
1201-
'visualizer_chart_schedules', array(
1202-
'-1' => __( 'One-time', 'visualizer' ),
1203-
),
1204-
'db',
1205-
$chart_id
1206-
);
1207-
foreach ( $schedules as $num => $name ) {
1208-
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
1209-
?>
1210-
<option value="<?php echo $num; ?>" <?php echo $extra; ?>><?php echo $name; ?></option>
1211-
<?php
1212-
}
1213-
do_action( 'visualizer_chart_schedules_spl', 'db', $chart_id, 1 );
1209+
$is_db_source = 'visualizer_source_query' === $source_of_chart;
1210+
$hours = get_post_meta( $chart_id, Visualizer_Plugin::CF_DB_SCHEDULE, true );
1211+
$bttn_label = $is_db_source ? __( '1. Modify Data Source', 'visualizer' ) : __( '1. Choose Data Source', 'visualizer' );
12141212
?>
1215-
</select>
1213+
1214+
<!-- Step 1: Choose / modify data source -->
12161215
<input type="hidden" name="params" id="viz-db-wizard-params">
1216+
<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 ); ?>">
12171217

1218-
<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; ?>">
1219-
<input type="button" id="db-chart-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
1218+
<!-- Step 2: Sync schedule toggle -->
1219+
<div id="vz-db-sync-step">
1220+
<button type="button" id="vz-db-sync-btn" class="vz-import-step-toggle" aria-expanded="<?php echo $is_db_source ? 'true' : 'false'; ?>">
1221+
<?php _e( '2. Set Sync Schedule', 'visualizer' ); ?>
1222+
<span class="dashicons dashicons-arrow-down-alt2"></span>
1223+
</button>
1224+
<div id="vz-db-sync-options"<?php echo $is_db_source ? '' : ' style="display:none"'; ?>>
1225+
<select name="refresh" id="vz-db-import-time" class="visualizer-select">
1226+
<?php
1227+
$schedules = apply_filters(
1228+
'visualizer_chart_schedules', array(
1229+
'-1' => __( 'One-time', 'visualizer' ),
1230+
),
1231+
'db',
1232+
$chart_id
1233+
);
1234+
foreach ( $schedules as $num => $name ) {
1235+
$extra = self::is_hour_selected( $hours, $num ) ? 'selected' : '';
1236+
?>
1237+
<option value="<?php echo esc_attr( $num ); ?>" <?php echo esc_attr( $extra ); ?>><?php echo esc_html( $name ); ?></option>
1238+
<?php
1239+
}
1240+
do_action( 'visualizer_chart_schedules_spl', 'db', $chart_id, 1 );
1241+
?>
1242+
</select>
1243+
<input type="button" id="db-chart-save-button" class="button button-primary" value="<?php _e( 'Save Schedule', 'visualizer' ); ?>">
1244+
</div>
1245+
</div>
12201246
<?php echo apply_filters( 'visualizer_pro_upsell', '', 'db-query' ); ?>
12211247
</form>
12221248
</div>

‎css/frame.css‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1016,6 +1016,48 @@ button#editor-chart-button {
10161016
text-align: center;
10171017
}
10181018

1019+
/* Import steps — stepped data-source + schedule flow */
1020+
.vz-import-step-btn {
1021+
width: 100%;
1022+
margin-bottom: 4px !important;
1023+
text-align: left;
1024+
}
1025+
1026+
.vz-import-step-toggle {
1027+
display: flex;
1028+
justify-content: space-between;
1029+
align-items: center;
1030+
width: 100%;
1031+
margin: 0;
1032+
padding: 5px 10px;
1033+
background: #f0f0f1;
1034+
border: 1px solid #c3c4c7;
1035+
border-radius: 2px;
1036+
cursor: pointer;
1037+
font-size: 13px;
1038+
color: #50575e;
1039+
line-height: 2;
1040+
}
1041+
1042+
.vz-import-step-toggle:hover {
1043+
background: #e5e5e5;
1044+
border-color: #a7aaad;
1045+
}
1046+
1047+
.vz-import-step-toggle .dashicons {
1048+
transition: transform 0.2s ease;
1049+
flex-shrink: 0;
1050+
}
1051+
1052+
.vz-import-step-toggle[aria-expanded="true"] .dashicons {
1053+
transform: rotate(180deg);
1054+
}
1055+
1056+
#vz-wp-sync-options,
1057+
#vz-db-sync-options {
1058+
padding-top: 8px;
1059+
}
1060+
10191061
#sidebar {
10201062
border-left: 1px solid #ddd;
10211063
background: #f3f3f3;

‎js/frame.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -445,6 +445,13 @@
445445
}
446446
} );
447447

448+
$( document ).on( 'click', '#vz-db-sync-btn', function(){
449+
var $options = $( '#vz-db-sync-options' );
450+
var isOpen = $options.is( ':visible' );
451+
$options.toggle();
452+
$( this ).attr( 'aria-expanded', ! isOpen );
453+
} );
454+
448455
$( '#db-chart-save-button' ).on( 'click', function(){
449456
// submit only if a query has been provided.
450457
if($('#db-query-form .visualizer-db-query').val().length > 0){

0 commit comments

Comments
 (0)