Improved index editor

2011-11-14 20:45:26 +00:00 · 2011-11-14 20:45:26 +00:00 · fc22faa6e1
commit fc22faa6e1
parent 0ac1b5f7c2
6 changed files with 209 additions and 95 deletions
--- a/js/messages.php
+++ b/js/messages.php
@ -47,6 +47,7 @@ $js_messages['strFormEmpty'] = __('Missing value in the form!');
 $js_messages['strNotNumber'] = __('This is not a number!');
 $js_messages['strAddIndex'] = __('Add Index');
 $js_messages['strEditIndex'] = __('Edit Index');
+$js_messages['strAddToIndex'] = __('Add %d column(s) to index');

 /* Charts */
 /* l10n: Default description for the y-Axis of Charts */
--- a/js/tbl_structure.js
+++ b/js/tbl_structure.js
@ -200,6 +200,14 @@ $(document).ready(function() {
        event.preventDefault();
        if ($(this).find("a").length == 0) {
            // Add index
+            var valid = checkFormElementInRange(
+                $(this).closest('form')[0],
+                'added_fields',
+                'Column count has to be larger than zero.'
+            );
+            if (! valid) {
+                return;
+            }
            var url = $(this).closest('form').serialize();
            var title = PMA_messages['strAddIndex'];
        } else {
@ -223,22 +231,58 @@ $(document).ready(function() {
         *                     passed to jQueryUI dialog
         */
        var button_options = {};
+        button_options[PMA_messages['strGo']] = function() {
+            /**
+             *  @var    the_form    object referring to the export form
+             */
+            var $form = $("#index_frm");
+            PMA_prepareForAjaxRequest($form);
+            //User wants to submit the form
+            $.post($form.attr('action'), $form.serialize()+"&do_save_data=1", function(data) {
+                if ($("#sqlqueryresults").length != 0) {
+                    $("#sqlqueryresults").remove();
+                }
+                if (data.success == true) {
+                    PMA_ajaxShowMessage(data.message);
+                    $("<div id='sqlqueryresults'></div>").insertAfter("#floating_menubar");
+                    $("#sqlqueryresults").html(data.sql_query);
+                    $("#result_query .notice").remove();
+                    $("#result_query").prepend(data.message);
+
+                    /*Reload the field form*/
+                    $("#table_index").remove();
+                    var $temp_div = $("<div id='temp_div'><div>").append(data.index_table);
+                    $temp_div.find("#table_index").insertAfter("#index_header");
+                    if ($("#edit_index_dialog").length > 0) {
+                        $("#edit_index_dialog").dialog("close");
+                    }
+                } else if (data.error != undefined) {
+                    var $temp_div = $("<div id='temp_div'><div>").append(data.error);
+                    if ($temp_div.find(".error code").length != 0) {
+                        var $error = $temp_div.find(".error code").addClass("error");
+                    } else {
+                        var $error = $temp_div;
+                    }
+                    PMA_ajaxShowMessage($error);
+                }
+            }) // end $.post()
+        }
        button_options[PMA_messages['strCancel']] = function() {
            $(this).dialog('close');
        }
        var $msgbox = PMA_ajaxShowMessage();
-
        $.get("tbl_indexes.php", url, function(data) {
-            //in the case of an error, show the error message returned.
            if (data.error) {
-                PMA_ajaxShowMessage(data.error);
+                //in the case of an error, show the error message returned.
+                PMA_ajaxShowMessage(data.error, false);
            } else {
                PMA_ajaxRemoveMessage($msgbox);
+                // Show dialog if the request was successful
                $div
                .append(data)
                .dialog({
                    title: title,
-                    width: 900,
+                    width: 450,
                    open: PMA_verifyColumnsProperties,
                    modal: true,
                    buttons: button_options,
@ -248,74 +292,46 @@ $(document).ready(function() {
                });
                checkIndexType();
                checkIndexName("index_frm");
+                PMA_convertFootnotesToTooltips($div);
+                // Add a slider for selecting how many columns to add to the index
+                $div.find('.slider').slider({
+                   animate: true,
+                   value: 1,
+                   min: 1,
+                   max: 16,
+                   slide: function( event, ui ) {
+                        $(this).closest('fieldset').find('input[type=submit]').val(
+                            PMA_messages['strAddToIndex'].replace(/%d/, ui.value)
+                        );
+                   }
+			    });
+                // Focus the slider, otherwise it looks nearly transparent
+                $('.ui-slider-handle').addClass('ui-state-focus');
            }
        }) // end $.get()
    });

    /**
-     *Ajax action for submiting the index form
-    **/
-    $("#index_frm.ajax input[name=do_save_data]").live('click', function(event) {
+     * Handler for adding more columns to an index in the editor
+     */
+    $('#index_frm input[type=submit]').live('click', function(event) {
        event.preventDefault();
-        /**
-         *  @var    the_form    object referring to the export form
-         */
-        var $form = $("#index_frm");
-
-        PMA_prepareForAjaxRequest($form);
-        //User wants to submit the form
-        $.post($form.attr('action'), $form.serialize()+"&do_save_data=Save", function(data) {
-            if ($("#sqlqueryresults").length != 0) {
-                $("#sqlqueryresults").remove();
-            }
-            if (data.success == true) {
-                PMA_ajaxShowMessage(data.message);
-                $("<div id='sqlqueryresults'></div>").insertAfter("#floating_menubar");
-                $("#sqlqueryresults").html(data.sql_query);
-                $("#result_query .notice").remove();
-                $("#result_query").prepend((data.message));
-
-                /*Reload the field form*/
-                $("#table_index").remove();
-                var $temp_div = $("<div id='temp_div'><div>").append(data.index_table);
-                $temp_div.find("#table_index").insertAfter("#index_header");
-                if ($("#edit_index_dialog").length > 0) {
-                    $("#edit_index_dialog").dialog("close").remove();
-                }
-
-            } else {
-                if(data.error != undefined) {
-                    var $temp_div = $("<div id='temp_div'><div>").append(data.error);
-                    if ($temp_div.find(".error code").length != 0) {
-                        var $error = $temp_div.find(".error code").addClass("error");
-                    } else {
-                        var $error = $temp_div;
-                    }
-                }
-                PMA_ajaxShowMessage($error);
-            }
-
-        }) // end $.post()
-    }) // end insert table button "do_save_data"
-
-    /**
-     *Ajax action for submiting the index form for add more columns
-    **/
-    $("#index_frm.ajax input[name=add_fields]").live('click', function(event) {
-        event.preventDefault();
-        /**
-         *  @var    the_form    object referring to the export form
-         */
-        var $form = $("#index_frm");
-
-        PMA_prepareForAjaxRequest($form);
-        //User wants to submit the form
-        $.post($form.attr('action'), $form.serialize()+"&add_fields=Go", function(data) {
-            $("#index_columns").remove();
-            var $temp_div = $("<div id='temp_div'><div>").append(data);
-            $temp_div.find("#index_columns").appendTo("#index_edit_fields");
-        }) // end $.post()
-    }) // end insert table button "Go"
+        var rows_to_add = $(this)
+            .closest('fieldset')
+            .find('.slider')
+            .slider('value');
+        while (rows_to_add--) {
+            var $newrow = $('#index_columns')
+                .find('tbody > tr:first')
+                .clone()
+                .appendTo(
+                    $('#index_columns').find('tbody')
+                );
+            $newrow.find(':input').each(function() {
+                $(this).val('');
+            });
+        }
+    });

    /**
     *Ajax event handler for Add column(s)
--- a/tbl_indexes.php
+++ b/tbl_indexes.php
@ -164,34 +164,43 @@ if (isset($_REQUEST['create_index'])) {
 echo PMA_generate_common_hidden_inputs($form_params);
 ?>
 <fieldset id="index_edit_fields">
+<?php
+if ($GLOBALS['is_ajax_request'] != true) {
+?>
    <legend>
 <?php
-if (isset($_REQUEST['create_index'])) {
-    echo __('Create an index');
-} else {
-    echo __('Modify an index');
-}
+    if (isset($_REQUEST['create_index'])) {
+        echo __('Add index');
+    } else {
+        echo __('Edit index');
+    }
 ?>
    </legend>
 <?php
-PMA_Message::notice(__('("PRIMARY" <b>must</b> be the name of and <b>only of</b> a primary key!)'))->display();
+}
 ?>
-<div class="formelement">
+<div>
+<table class='index_info'>
+<tr><td>
+<strong>
 <label for="input_index_name"><?php echo __('Index name:'); ?></label>
+</strong>
+<?php echo PMA_showhint(PMA_Message::notice(__('("PRIMARY" <b>must</b> be the name of and <b>only of</b> a primary key!)'))); ?>
+</td><td>
 <input type="text" name="index[Key_name]" id="input_index_name" size="25"
    value="<?php echo htmlspecialchars($index->getName()); ?>" onfocus="this.select()" />
-</div>
-
-<div class="formelement">
+</td></tr><tr><td>
+<strong>
 <label for="select_index_type"><?php echo __('Index type:'); ?></label>
+</strong>
+<?php echo PMA_showMySQLDocu('SQL-Syntax', 'ALTER_TABLE'); ?>
+</td><td>
 <select name="index[Index_type]" id="select_index_type" >
    <?php echo $index->generateIndexSelector(); ?>
 </select>
-<?php echo PMA_showMySQLDocu('SQL-Syntax', 'ALTER_TABLE'); ?>
+</td></tr></table>
 </div>

-<br class="clearfloat" /><br />
-
 <table id="index_columns">
 <thead>
 <tr><th><?php echo __('Column'); ?></th>
@ -207,7 +216,7 @@ $spatial_types = array(
 );
 foreach ($index->getColumns() as $column) {
    ?>
-<tr class="<?php echo $odd_row ? 'odd' : 'even'; ?>">
+<tr class="<?php echo $odd_row ? 'odd' : 'even'; ?> noclick">
    <td><select name="index[columns][names][]">
            <option value="">-- <?php echo __('Ignore'); ?> --</option>
    <?php
@ -234,7 +243,7 @@ foreach ($index->getColumns() as $column) {
 } // end foreach $edited_index_info['Sequences']
 for ($i = 0; $i < $add_fields; $i++) {
    ?>
-<tr class="<?php echo $odd_row ? 'odd' : 'even'; ?>">
+<tr class="<?php echo $odd_row ? 'odd' : 'even'; ?> noclick">
    <td><select name="index[columns][names][]">
            <option value="">-- <?php echo __('Ignore'); ?> --</option>
    <?php
@ -257,21 +266,30 @@ for ($i = 0; $i < $add_fields; $i++) {
 </tbody>
 </table>
 </fieldset>
-
 <fieldset class="tblFooters">
+<?php
+    if ($GLOBALS['is_ajax_request'] != true) {
+?>
    <input type="submit" name="do_save_data" value="<?php echo __('Save'); ?>" />
    <span id="addMoreColumns">
 <?php
 echo __('Or') . ' ';
-echo sprintf(__('Add to index &nbsp;%s&nbsp;column(s)'),
-        '<input type="text" name="added_fields" size="2" value="1"'
-    .' onfocus="this.select()" />') . "\n";
-echo '<input type="submit" name="add_fields" value="' . __('Go') . '"'
-    .' onclick="return checkFormElementInRange(this.form,'
-    ." 'added_fields', '" . PMA_jsFormat(__('Column count has to be larger than zero.')) . "', 1"
-    .')" />' . "\n";
+printf(
+    __('Add to index &nbsp;%s&nbsp;column(s)') . "\n",
+    '<input type="text" name="added_fields" size="2" value="1" />'
+);
+echo '<input type="submit" name="add_fields" value="' . __('Go') . '" />' . "\n";
 ?>
    </span>
+<?php
+    } else {
+        $btn_value = sprintf(__('Add %d column(s) to index'), 1);
+        echo '<div class="slider"></div>';
+        echo '<div class="add_fields">';
+        echo '<input type="submit" value="' . $btn_value . '" />';
+        echo '</div>';
+    }
+?>
 </fieldset>
 </form>
 <?php
--- a/tbl_structure.php
+++ b/tbl_structure.php
@ -696,11 +696,7 @@ if (! $tbl_is_view && ! $db_is_information_schema && 'ARCHIVE' !=  $tbl_type) {
    echo PMA_Index::getView($table, $db);
    ?>
        <fieldset class="tblFooters" style="text-align: left;">
-            <form action="./tbl_indexes.php" method="post"
-                onsubmit="return checkFormElementInRange(this, 'added_fields',
-                    '<?php echo str_replace('\'', '\\\'', __('Column count has to be larger than zero.')); ?>',
-                    1)">
-
+            <form action="./tbl_indexes.php" method="post">
                <?php
                echo PMA_generate_common_hidden_inputs($db, $table);
                echo sprintf(__('Create an index on &nbsp;%s&nbsp;columns'),
@ -712,7 +708,6 @@ if (! $tbl_is_view && ! $db_is_information_schema && 'ARCHIVE' !=  $tbl_type) {
        </fieldset>
    </div>
 </div>
-<br />
    <?php
 }

--- a/themes/original/css/theme_right.css.php
+++ b/themes/original/css/theme_right.css.php
@ -1736,6 +1736,48 @@ td.more_opts {
    white-space: nowrap;
 }

+/**
+ * Indexes
+ */
+#index_frm .index_info input,
+#index_frm .index_info select {
+    width: 100%;
+    box-sizing:         border-box;
+    -ms-box-sizing:     border-box;
+    -moz-box-sizing:    border-box;
+    -webkit-box-sizing: border-box;
+}
+
+#index_frm .slider {
+    width: 10em;
+    margin: 0.6em;
+    float: <?php echo $left; ?>;
+}
+
+#index_frm .add_fields {
+    float: <?php echo $left; ?>;
+}
+
+#index_frm .add_fields input {
+    margin-<?php echo $left; ?>: 1em;
+}
+
+#index_frm input {
+    margin: 0;
+}
+
+#index_frm td {
+    vertical-align: middle;
+}
+
+table#index_columns {
+    width: 100%;
+}
+
+table#index_columns select {
+    width: 100%;
+}
+
 iframe.IE_hack {
    z-index: 1;
    position: absolute;
--- a/themes/pmahomme/css/theme_right.css.php
+++ b/themes/pmahomme/css/theme_right.css.php
@ -2119,6 +2119,48 @@ td.more_opts {
    white-space: nowrap;
 }

+/**
+ * Indexes
+ */
+#index_frm .index_info input,
+#index_frm .index_info select {
+    width: 100%;
+    box-sizing:         border-box;
+    -ms-box-sizing:     border-box;
+    -moz-box-sizing:    border-box;
+    -webkit-box-sizing: border-box;
+}
+
+#index_frm .slider {
+    width: 10em;
+    margin: 0.6em;
+    float: <?php echo $left; ?>;
+}
+
+#index_frm .add_fields {
+    float: <?php echo $left; ?>;
+}
+
+#index_frm .add_fields input {
+    margin-<?php echo $left; ?>: 1em;
+}
+
+#index_frm input {
+    margin: 0;
+}
+
+#index_frm td {
+    vertical-align: middle;
+}
+
+table#index_columns {
+    width: 100%;
+}
+
+table#index_columns select {
+    width: 100%;
+}
+
 iframe.IE_hack {
    z-index: 1;
    position: absolute;