Merge pull request #851 from LordSimal/routes-panel-plugin-filter

add ability to filter plugin routes in routes tab

Author: markstory

templates/element/routes_panel.php

@@ -3,13 +3,44 @@
  * @var \Cake\Routing\Route\Route[] $routes
  * @var string $matchedRoute
  */
+
+use Cake\Core\Plugin as CorePlugin;
 use Cake\Utility\Hash;
+use Cake\Utility\Text;
 
 $routes = Cake\Routing\Router::routes();
+
+$amountOfRoutesPerGroup = [];
+foreach ($routes as $route) {
+    $group = $route->defaults['plugin'] ?? 'app';
+    if (!array_key_exists($group, $amountOfRoutesPerGroup)) {
+        $amountOfRoutesPerGroup[$group] = 0;
+    }
+    $amountOfRoutesPerGroup[$group]++;
+}
+
+$pluginNames = [];
+foreach (CorePlugin::loaded() as $pluginName) {
+    if (!empty($amountOfRoutesPerGroup[$pluginName])) {
+        $name = sprintf('%s (%s)', $pluginName, $amountOfRoutesPerGroup[$pluginName]);
+        $pluginNames[$name] = Text::slug($pluginName);
+    }
+}
+
 ?>
-<button type="button" class="btn-primary" id="toggle-debugkit-routes">
-    <?= __d('debug_kit', 'Toggle debugkit internal routes') ?>
-</button>
+<div class="debugkit-plugin-routes-button-wrapper">
+    <button type="button" class="btn-primary js-debugkit-toggle-plugin-route" data-plugin=".route-entry--app">
+        <?= __d('debug_kit', 'App') ?>
+        <?= !empty($amountOfRoutesPerGroup['app']) ? ' (' . $amountOfRoutesPerGroup['app'] . ')' : '' ?>
+    </button>
+    <?php foreach ($pluginNames as $pluginName => $parsedName) : ?>
+        <button type="button" class="btn-primary js-debugkit-toggle-plugin-route
+            <?= strpos($pluginName, 'DebugKit') === 0 ? ' toggle-plugin-route-active' : '' ?>"
+                data-plugin=".route-entry--plugin-<?= $parsedName ?>">
+            <?= $pluginName ?>
+        </button>
+    <?php endforeach; ?>
+</div>
 <table cellspacing="0" cellpadding="0" class="debug-table">
     <thead>
     <tr>
@@ -19,14 +50,26 @@
     </tr>
     </thead>
     <tbody>
-    <?php foreach ($routes as $route): ?>
-        <?php 
+    <?php foreach ($routes as $route) : ?>
+        <?php
         $class = '';
-        if ($matchedRoute === $route->template):
-            $class = 'highlighted';
-        elseif ($route->defaults['plugin'] === 'DebugKit'):
-            $class = 'debugkit-route hidden';
+        if (empty($route->defaults['plugin'])) :
+            $class = 'route-entry route-entry--app';
+        else :
+            $class = 'route-entry route-entry--plugin route-entry--plugin-' .
+                Text::slug($route->defaults['plugin']);
+
+            // Hide DebugKit internal routes by default
+            if ($route->defaults['plugin'] === 'DebugKit') {
+                $class .= ' hidden';
+            }
         endif;
+
+        // Highlight current route
+        if ($matchedRoute === $route->template) {
+            $class .= ' highlighted';
+        }
+
         ?>
         <tr class="<?= $class ?>">
             <td><?= h(Hash::get($route->options, '_name', $route->getName())) ?></td>
@@ -38,11 +81,25 @@
 </table>
 
 <script>
-$(document).ready(function() {
-    $('#toggle-debugkit-routes').on('click', function (event) {
-        event.preventDefault();
-        var routes = $('.debugkit-route');
-        routes.toggleClass('hidden');
+    $(document).ready(function() {
+        $('#toggle-debugkit-routes').on('click', function (event) {
+            event.preventDefault();
+            var routes = $('.debugkit-route');
+            routes.toggleClass('hidden');
+        });
+
+        $('.js-debugkit-toggle-plugin-route').on('click', function (event) {
+            var $this = $(this);
+            var plugin = $this.attr('data-plugin');
+
+            if($this.hasClass('toggle-plugin-route-active')) {
+                $this.removeClass('toggle-plugin-route-active');
+                $('.route-entry' + plugin).removeClass('hidden');
+            } else {
+                $this.addClass('toggle-plugin-route-active');
+                $('.route-entry' + plugin).addClass('hidden');
+            }
+
+        });
     });
-});
 </script>

webroot/css/toolbar.css

@@ -512,10 +512,13 @@ pre,
   position: relative;
   top: 2px;
 }
-
 .btn-primary:hover {
   cursor:pointer;
 }
+.toggle-plugin-route-active {
+  background-color: #fff;
+  color: #2a6496;
+}
 
 #loader {
   background: rgba(255, 255, 255, 0.7);
@@ -613,3 +616,14 @@ pre,
 .terminal .success-message {
   color: #42bd41;
 }
+
+.debugkit-plugin-routes-button-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin: 0 -5px;
+}
+
+.debugkit-plugin-routes-button-wrapper button {
+  margin: 5px;
+}