Merge pull request #16567 from mauriciofauth/routines-redesign

Redesign the Routines page

js/src/database/routines.js

@@ -3,9 +3,9 @@ AJAX.registerTeardown('database/routines.js', function () {
     $(document).off('click', 'a.ajax.edit_anchor');
     $(document).off('click', 'a.ajax.exec_anchor');
     $(document).off('click', 'a.ajax.export_anchor');
-    $(document).off('click', '#rteListForm.ajax .mult_submit[value="export"]');
+    $(document).off('click', '#bulkActionExportButton');
     $(document).off('click', 'a.ajax.drop_anchor');
-    $(document).off('click', '#rteListForm.ajax .mult_submit[value="drop"]');
+    $(document).off('click', '#bulkActionDropButton');
     $(document).off('change', 'select[name=item_type]');
     $(document).off('change', 'select[name^=item_param_type]');
     $(document).off('change', 'select[name=item_returntype]');
@@ -66,7 +66,7 @@ const DatabaseRoutines = {
 
     exportDialog: function ($this) {
         var $msg = Functions.ajaxShowMessage();
-        if ($this.hasClass('mult_submit')) {
+        if ($this.attr('id') === 'bulkActionExportButton') {
             var combined = {
                 success: true,
                 title: Messages.strExport,
@@ -850,7 +850,7 @@ AJAX.registerOnload('database/routines.js', function () {
         event.preventDefault();
         DatabaseRoutines.exportDialog($(this));
     });
-    $(document).on('click', '#rteListForm.ajax .mult_submit[value="export"]', function (event) {
+    $(document).on('click', '#bulkActionExportButton', function (event) {
         event.preventDefault();
         DatabaseRoutines.exportDialog($(this));
     });
@@ -859,7 +859,7 @@ AJAX.registerOnload('database/routines.js', function () {
         event.preventDefault();
         DatabaseRoutines.dropDialog($(this));
     });
-    $(document).on('click', '#rteListForm.ajax .mult_submit[value="drop"]', function (event) {
+    $(document).on('click', '#bulkActionDropButton', function (event) {
         event.preventDefault();
         DatabaseRoutines.dropMultipleDialog($(this));
     });

templates/database/routines/editor_form.twig

@@ -7,7 +7,12 @@
   {{ get_hidden_inputs(db) }}
 
   <fieldset class="pma-fieldset">
-    <legend>{% trans 'Details' %}</legend>
+    <legend>
+      {% trans 'Details' %}
+      {% if not is_edit_mode %}
+        {{ show_mysql_docu('CREATE_PROCEDURE') }}
+      {% endif %}
+    </legend>
 
     <table class="rte_table table table-borderless table-sm">
       <tr>

templates/database/routines/index.twig

@@ -1,23 +1,42 @@
-<div class="row">
-  <div class="col-12">
-    <fieldset class="pma-fieldset" id="tableFilter">
-      <legend>{% trans "Filters" %}</legend>
-      <div class="formelement">
-        <label for="filterText">{% trans "Containing the word:" %}</label>
-        <input name="filterText" type="text" id="filterText" value="">
+<div class="container-fluid my-3">
+  <h2>
+    {{ get_icon('b_routines', 'Routines'|trans) }}
+    {{ show_mysql_docu('STORED_ROUTINES') }}
+  </h2>
+
+  <div class="d-flex flex-wrap my-3">
+    <div>
+      <div class="input-group">
+        <div class="input-group-text">
+          <div class="form-check mb-0">
+            <input class="form-check-input checkall_box" type="checkbox" value="" id="checkAllCheckbox" form="rteListForm">
+            <label class="form-check-label" for="checkAllCheckbox">{% trans 'Check all' %}</label>
+          </div>
+        </div>
+        <button class="btn btn-outline-secondary" id="bulkActionExportButton" type="submit" name="submit_mult" value="export" form="rteListForm" title="{% trans 'Export' %}">
+          {{ get_icon('b_export', 'Export'|trans) }}
+        </button>
+        <button class="btn btn-outline-secondary" id="bulkActionDropButton" type="submit" name="submit_mult" value="drop" form="rteListForm" title="{% trans 'Drop' %}">
+          {{ get_icon('b_drop', 'Drop'|trans) }}
+        </button>
       </div>
-    </fieldset>
+    </div>
+
+    <div class="ms-auto">
+      <div class="input-group">
+        <span class="input-group-text">{{ get_image('b_search', 'Search'|trans) }}</span>
+        <input class="form-control" name="filterText" type="text" id="filterText" value="" placeholder="{% trans 'Search' %}" aria-label="{% trans 'Search' %}">
+      </div>
+    </div>
+    <div class="ms-2">
+      <a class="ajax add_anchor btn btn-primary{{ not has_privilege ? ' disabled' }}" href="{{ url('/database/routines', {'db': db, 'table': table, 'add_item': true}) }}" role="button"{{ not has_privilege ? ' tabindex="-1" aria-disabled="true"' }}>
+        {% trans 'Create new routine' %}
+      </a>
+    </div>
   </div>
-</div>
 
-<form id="rteListForm" class="ajax" action="{{ url('/database/routines') }}">
-  {{ get_hidden_inputs(db, table) }}
-
-  <fieldset class="pma-fieldset">
-    <legend>
-      {% trans 'Routines' %}
-      {{ show_mysql_docu('STORED_ROUTINES') }}
-    </legend>
+  <form id="rteListForm" class="ajax" action="{{ url('/database/routines') }}">
+    {{ get_hidden_inputs(db, table) }}
 
     <div id="nothing2display"{{ items is not empty ? ' class="hide"' }}>
       {% trans 'There are no routines to display.' %}
@@ -28,9 +47,9 @@
       <tr>
         <th></th>
         <th>{% trans 'Name' %}</th>
-        <th colspan="4">{% trans 'Action' %}</th>
         <th>{% trans 'Type' %}</th>
         <th>{% trans 'Returns' %}</th>
+        <th colspan="4"></th>
       </tr>
       </thead>
       <tbody>
@@ -39,37 +58,5 @@
       {{ rows|raw }}
       </tbody>
     </table>
-
-    {% if items is not empty %}
-      <div class="withSelected">
-        <img class="selectallarrow" src="{{ select_all_arrow_src }}" width="38" height="22" alt="{% trans 'With selected:' %}">
-        <input type="checkbox" id="rteListForm_checkall" class="checkall_box" title="{% trans 'Check all' %}">
-        <label for="rteListForm_checkall">{% trans 'Check all' %}</label>
-        <em class="with-selected">{% trans 'With selected:' %}</em>
-
-        <button class="btn btn-link mult_submit" type="submit" name="submit_mult" value="export" title="{% trans 'Export' %}">
-          {{ get_icon('b_export', 'Export'|trans) }}
-        </button>
-        <button class="btn btn-link mult_submit" type="submit" name="submit_mult" value="drop" title="{% trans 'Drop' %}">
-          {{ get_icon('b_drop', 'Drop'|trans) }}
-        </button>
-      </div>
-    {% endif %}
-  </fieldset>
-</form>
-
-<fieldset class="pma-fieldset">
-  <legend>{% trans %}New{% context %}Create new routine{% endtrans %}</legend>
-  <div class='wrap'>
-    {% if has_privilege %}
-      <a class="ajax add_anchor" href="{{ url('/database/routines', {'db': db, 'table': table, 'add_item': true}) }}">
-        {{ get_icon('b_routine_add') }}
-        {% trans 'Add routine' %}
-      </a>
-    {% else %}
-      {{ get_icon('bd_routine_add') }}
-      {% trans 'Add routine' %}
-    {% endif %}
-    {{ show_mysql_docu('CREATE_PROCEDURE') }}
-  </div>
-</fieldset>
+  </form>
+</div>

templates/database/routines/row.twig

@@ -6,6 +6,12 @@
     <span class="drop_sql hide">{{ sql_drop }}</span>
     <strong>{{ routine.name }}</strong>
   </td>
+  <td>
+    {{ routine.type }}
+  </td>
+  <td dir="ltr">
+    {{ routine.returns }}
+  </td>
   <td>
     {% if has_edit_privilege %}
       <a class="ajax edit_anchor" href="{{ url('/database/routines', {
@@ -73,10 +79,4 @@
       {'class': 'ajax drop_anchor'}
     ) }}
   </td>
-  <td>
-    {{ routine.type }}
-  </td>
-  <td dir="ltr">
-    {{ routine.returns }}
-  </td>
 </tr>