chg: [instance:search_all] Improved layout of displayed results

templates/Instance/search_all.php

@@ -1,10 +1,27 @@
-<ul>
+<?php
-    <?php foreach ($data as $table => $tableResult): ?>
+    $sections = [];
-        <li><strong><?= h($table) ?></strong></li>
+    foreach ($data as $tableName => $tableResult) {
-        <ul>
+        $section = '';
-            <?php foreach ($tableResult as $entry): ?>
+        $table = Cake\ORM\TableRegistry::get($tableName);
-                <li><strong><?= h($entry['id']) ?></strong></li>
+        $fieldPath = !empty($table->getDisplayField()) ? $table->getDisplayField() : 'id';
-            <?php endforeach; ?>
+        $section .= sprintf('<span class="d-flex text-nowrap px-2 search-container-model">
-        </ul>
+            <span class="text-uppercase text-muted mr-3 model-text">%s</span>
-    <?php endforeach; ?>
+            <span class="d-flex align-items-center search-container-divider">
-</ul>
+                <hr class="m-0"/>
+            </span>
+        </span>', h($tableName));
+
+        foreach ($tableResult as $entry) {
+            $section .= sprintf('<a class="dropdown-item" href="%s">%s</a>',
+                Cake\Routing\Router::URL([
+                    'controller' => Cake\Utility\Inflector::pluralize($entry->getSource()),
+                    'action' => 'view',
+                    h($entry['id'])
+                ]),
+                h($entry[$fieldPath])
+            );
+        }
+        $sections[] = $section;
+    }
+
+    echo implode('', $sections);

templates/element/layouts/header/header-right.php

@@ -4,7 +4,8 @@
             <input type="text" class="form-control d-inline-block" id="globalSearch" placeholder="<?= __('Search in Cerebrate...') ?>">
             <i class="icon <?= $this->FontAwesome->getClass('search') ?>"></i>
         </span>
-        <div class="global-search-result-container dropdown-menu p-0">
+        <button type="button" class="dropdown-toggle d-none" id="dropdownMenuSearchAll" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent"></button>
+        <div class="global-search-result-container dropdown-menu dropdown-menu-right p-0 pt-2" aria-labelledby="dropdownMenuSearchAll">
             <?= __('- No result -') ?>
         </div>
     </div>

webroot/css/layout.css

@@ -139,6 +139,21 @@ main.content {
     margin: auto 0;
 }
 
+.global-search-result-container .search-container-model .model-text {
+    font-size: 0.75rem;
+    font-weight: 600;
+}
+
+.global-search-result-container .search-container-model .search-container-divider {
+    flex: 1 0 0;
+    min-height: 20px;
+}
+
+.global-search-result-container .search-container-model .search-container-divider > hr {
+    height: 1px;
+    flex: 1 0 auto
+}
+
 .right-navbar div.header-menu  a.nav-link {
     margin: auto 0;
 }

webroot/js/main.js

@@ -99,11 +99,14 @@ function syntaxHighlightJson(json, indent) {
     });
 }
 
-function performGlobalSearch() {
+function performGlobalSearch(evt) {
     const $input = $('#globalSearch')
-    // const $resultContainer = $('.global-search-result-container')
+    const $resultContainer = $('.global-search-result-container')
-    const $resultContainer = $('.content')
     const value = $input.val()
+    if (value.length < 3 && evt.keyCode != 13) {
+        $('#dropdownMenuSearchAll').dropdown('hide')
+        return;
+    }
     const endpoint = '/instance/searchAll'
     const searchParams = new URLSearchParams({search: value});
     const url = endpoint + '?' + searchParams
@@ -111,7 +114,7 @@ function performGlobalSearch() {
         statusNode: $resultContainer
     }
 
-    $resultContainer.dropdown('show')
+    $('#dropdownMenuSearchAll').dropdown('show')
     AJAXApi.quickFetchURL(url, options).then((theHTML) => {
         $resultContainer.html(theHTML)
         $input.focus()
@@ -126,5 +129,5 @@ $(document).ready(() => {
     }
 
     const debouncedGlobalSearch = debounce(performGlobalSearch, 400)
-    $('#globalSearch').keypress(debouncedGlobalSearch);
+    $('#globalSearch').keydown(debouncedGlobalSearch);
 })