Added auto-suggestions to tag names and values

app/Http/Controllers/TagController.php

@@ -60,5 +60,15 @@ class TagController extends Controller
         return response()->json($suggestions);
     }
 
+    /**
+     * Get tag value suggestions from a given search term.
+     * @param Request $request
+     */
+    public function getValueSuggestions(Request $request)
+    {
+        $searchTerm = $request->get('search');
+        $suggestions = $this->tagRepo->getValueSuggestions($searchTerm);
+        return response()->json($suggestions);
+    }
 
 }

app/Http/routes.php

@@ -88,7 +88,8 @@ Route::group(['middleware' => 'auth'], function () {
     // Tag routes (AJAX)
     Route::group(['prefix' => 'ajax/tags'], function() {
         Route::get('/get/{entityType}/{entityId}', 'TagController@getForEntity');
-        Route::get('/suggest', 'TagController@getNameSuggestions');
+        Route::get('/suggest/names', 'TagController@getNameSuggestions');
+        Route::get('/suggest/values', 'TagController@getValueSuggestions');
         Route::post('/update/{entityType}/{entityId}', 'TagController@updateForEntity');
     });
 

app/Repos/TagRepo.php

@@ -69,6 +69,18 @@ class TagRepo
         return $query->get(['name'])->pluck('name');
     }
 
+    /**
+     * Get tag value suggestions from scanning existing tag values.
+     * @param $searchTerm
+     * @return array
+     */
+    public function getValueSuggestions($searchTerm)
+    {
+        if ($searchTerm === '') return [];
+        $query = $this->tag->where('value', 'LIKE', $searchTerm . '%')->groupBy('value')->orderBy('value', 'desc');
+        $query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type');
+        return $query->get(['value'])->pluck('value');
+    }
     /**
      * Save an array of tags to an entity
      * @param Entity $entity

resources/assets/js/directives.js

@@ -339,4 +339,181 @@ module.exports = function (ngApp, events) {
         }
     }]);
 
+    ngApp.directive('autosuggestions', ['$http', function($http) {
+        return {
+            restrict: 'A',
+            link: function(scope, elem, attrs) {
+                
+                // Local storage for quick caching.
+                const localCache = {};
+
+                // Create suggestion element
+                const suggestionBox = document.createElement('ul');
+                suggestionBox.className = 'suggestion-box';
+                suggestionBox.style.position = 'absolute';
+                suggestionBox.style.display = 'none';
+                const $suggestionBox = $(suggestionBox);
+
+                // General state tracking
+                let isShowing = false;
+                let currentInput = false;
+                let active = 0;
+
+                // Listen to input events on autosuggest fields
+                elem.on('input', '[autosuggest]', function(event) {
+                    let $input = $(this);
+                    let val = $input.val();
+                    let url = $input.attr('autosuggest');
+                    // No suggestions until at least 3 chars
+                    if (val.length < 3) {
+                        if (isShowing) {
+                            $suggestionBox.hide();
+                            isShowing = false;
+                        }
+                        return;
+                    };
+
+                    let suggestionPromise = getSuggestions(val.slice(0, 3), url);
+                    suggestionPromise.then((suggestions) => {
+                       if (val.length > 2) {
+                           suggestions = suggestions.filter((item) => {
+                               return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
+                           }).slice(0, 4);
+                           displaySuggestions($input, suggestions);
+                       }
+                    });
+                });
+
+                // Hide autosuggestions when input loses focus.
+                // Slight delay to allow clicks.
+                elem.on('blur', '[autosuggest]', function(event) {
+                    setTimeout(() => {
+                        $suggestionBox.hide();
+                        isShowing = false;
+                    }, 200)
+                });
+
+                elem.on('keydown', '[autosuggest]', function (event) {
+                    if (!isShowing) return;
+
+                    let suggestionElems = suggestionBox.childNodes;
+                    let suggestCount = suggestionElems.length;
+
+                    // Down arrow
+                    if (event.keyCode === 40) {
+                        let newActive = (active === suggestCount-1) ? 0 : active + 1;
+                        changeActiveTo(newActive, suggestionElems);
+                    }
+                    // Up arrow
+                    else if (event.keyCode === 38) {
+                        let newActive = (active === 0) ? suggestCount-1 : active - 1;
+                        changeActiveTo(newActive, suggestionElems);
+                    }
+                    // Enter key
+                    else if (event.keyCode === 13) {
+                        let text = suggestionElems[active].textContent;
+                        currentInput[0].value = text;
+                        currentInput.focus();
+                        $suggestionBox.hide();
+                        isShowing = false;
+                        event.preventDefault();
+                        return false;
+                    }
+                });
+
+                // Change the active suggestion to the given index
+                function changeActiveTo(index, suggestionElems) {
+                    suggestionElems[active].className = '';
+                    active = index;
+                    suggestionElems[active].className = 'active';
+                }
+
+                // Display suggestions on a field
+                let prevSuggestions = [];
+                function displaySuggestions($input, suggestions) {
+
+                    // Hide if no suggestions
+                    if (suggestions.length === 0) {
+                        $suggestionBox.hide();
+                        isShowing = false;
+                        prevSuggestions = suggestions;
+                        return;
+                    }
+
+                    // Otherwise show and attach to input
+                    if (!isShowing) {
+                        $suggestionBox.show();
+                        isShowing = true;
+                    }
+                    if ($input !== currentInput) {
+                        $suggestionBox.detach();
+                        $input.after($suggestionBox);
+                        currentInput = $input;
+                    }
+
+                    // Return if no change
+                    if (prevSuggestions.join() === suggestions.join()) {
+                        prevSuggestions = suggestions;
+                        return;
+                    }
+
+                    // Build suggestions
+                    $suggestionBox[0].innerHTML = '';
+                    for (let i = 0; i < suggestions.length; i++) {
+                        var suggestion = document.createElement('li');
+                        suggestion.textContent = suggestions[i];
+                        suggestion.onclick = suggestionClick;
+                        if (i === 0) {
+                            suggestion.className = 'active'
+                            active = 0;
+                        };
+                        $suggestionBox[0].appendChild(suggestion);
+                    }
+
+                    prevSuggestions = suggestions;
+                }
+
+                // Suggestion click event
+                function suggestionClick(event) {
+                    let text = this.textContent;
+                    currentInput[0].value = text;
+                    currentInput.focus();
+                    $suggestionBox.hide();
+                    isShowing = false;
+                };
+
+                // Get suggestions & cache
+                function getSuggestions(input, url) {
+                    let searchUrl = url + '?search=' + encodeURIComponent(input);
+
+                    // Get from local cache if exists
+                    if (localCache[searchUrl]) {
+                        return new Promise((resolve, reject) => {
+                            resolve(localCache[input]);
+                        });
+                    }
+
+                    return $http.get(searchUrl).then((response) => {
+                        localCache[input] = response.data;
+                        return response.data;
+                    });
+                }
+
+            }
+        }
+    }]);
 };
+
+
+
+
+
+
+
+
+
+
+
+
+
+

resources/assets/sass/_pages.scss

@@ -200,6 +200,7 @@
   .tags td {
     padding-right: $-s;
     padding-top: $-s;
+    position: relative;
   }
   button.pos {
     position: absolute;
@@ -269,6 +270,28 @@
   }
   .tag {
     padding: $-s;
-
+  }
+}
+
+.suggestion-box {
+  position: absolute;
+  background-color: #FFF;
+  border: 1px solid #BBB;
+  box-shadow: $bs-light;
+  list-style: none;
+  z-index: 100;
+  padding: 0;
+  margin: 0;
+  border-radius: 3px;
+  li {
+    display: block;
+    padding: $-xs $-s;
+    border-bottom: 1px solid #DDD;
+    &:last-child {
+      border-bottom: 0;
+    }
+    &.active {
+      background-color: #EEE;
+    }
   }
 }

resources/views/pages/edit.blade.php

@@ -9,7 +9,7 @@
 @section('content')
 
     <div class="flex-fill flex">
-        <form action="{{$page->getUrl()}}" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
+        <form action="{{$page->getUrl()}}" autocomplete="off" data-page-id="{{ $page->id }}" method="POST" class="flex flex-fill">
             @if(!isset($isDraft))
                 <input type="hidden" name="_method" value="PUT">
             @endif

resources/views/pages/form-toolbox.blade.php

@@ -1,19 +1,21 @@
 
 <div toolbox class="floating-toolbox">
+
     <div class="tabs primary-background-light">
         <span toolbox-toggle><i class="zmdi zmdi-caret-left-circle"></i></span>
         <span tab-button="tags" title="Page Tags" class="active"><i class="zmdi zmdi-tag"></i></span>
     </div>
+
     <div tab-content="tags" ng-controller="PageTagController" page-id="{{ $page->id or 0 }}">
         <h4>Page Tags</h4>
         <div class="padded tags">
             <p class="muted small">Add some tags to better categorise your content. <br> You can assign a value to a tag for more in-depth organisation.</p>
-            <table class="no-style" style="width: 100%;">
+            <table class="no-style" autosuggestions style="width: 100%;">
                 <tbody ui-sortable="sortOptions" ng-model="tags" >
                     <tr ng-repeat="tag in tags track by $index">
                         <td width="20" ><i class="handle zmdi zmdi-menu"></i></td>
-                        <td><input class="outline" ng-attr-name="tags[@{{$index}}][name]" type="text" ng-model="tag.name" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag"></td>
+                        <td><input autosuggest="/ajax/tags/suggest/names" class="outline" ng-attr-name="tags[@{{$index}}][name]" type="text" ng-model="tag.name" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag"></td>
-                        <td><input class="outline" ng-attr-name="tags[@{{$index}}][value]" type="text" ng-model="tag.value" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag Value (Optional)"></td>
+                        <td><input autosuggest="/ajax/tags/suggest/values" class="outline" ng-attr-name="tags[@{{$index}}][value]" type="text" ng-model="tag.value" ng-change="tagChange(tag)" ng-blur="tagBlur(tag)" placeholder="Tag Value (Optional)"></td>
                         <td width="10" ng-show="tags.length != 1" class="text-center text-neg" style="padding: 0;" ng-click="removeTag(tag)"><i class="zmdi zmdi-close"></i></td>
                     </tr>
                 </tbody>
@@ -31,4 +33,5 @@
             </table>
         </div>
     </div>
+
 </div>

tests/Entity/TagTests.php

@@ -52,10 +52,28 @@ class TagTests extends \TestCase
         $attrs = $attrs->merge(factory(Tag::class, 5)->make(['name' => 'plans']));
         $page = $this->getPageWithTags($attrs);
 
-        $this->asAdmin()->get('/ajax/tags/suggest?search=dog')->seeJsonEquals([]);
+        $this->asAdmin()->get('/ajax/tags/suggest/names?search=dog')->seeJsonEquals([]);
-        $this->get('/ajax/tags/suggest?search=co')->seeJsonEquals(['color', 'country', 'county']);
+        $this->get('/ajax/tags/suggest/names?search=co')->seeJsonEquals(['color', 'country', 'county']);
-        $this->get('/ajax/tags/suggest?search=cou')->seeJsonEquals(['country', 'county']);
+        $this->get('/ajax/tags/suggest/names?search=cou')->seeJsonEquals(['country', 'county']);
-        $this->get('/ajax/tags/suggest?search=pla')->seeJsonEquals(['planet', 'plans']);
+        $this->get('/ajax/tags/suggest/names?search=pla')->seeJsonEquals(['planet', 'plans']);
+    }
+
+    public function test_tag_value_suggestions()
+    {
+        // Create some tags with similar values to test with
+        $attrs = collect();
+        $attrs = $attrs->merge(factory(Tag::class, 5)->make(['name' => 'country', 'value' => 'cats']));
+        $attrs = $attrs->merge(factory(Tag::class, 5)->make(['name' => 'color', 'value' => 'cattery']));
+        $attrs = $attrs->merge(factory(Tag::class, 5)->make(['name' => 'city', 'value' => 'castle']));
+        $attrs = $attrs->merge(factory(Tag::class, 5)->make(['name' => 'county', 'value' => 'dog']));
+        $attrs = $attrs->merge(factory(Tag::class, 5)->make(['name' => 'planet', 'value' => 'catapult']));
+        $attrs = $attrs->merge(factory(Tag::class, 5)->make(['name' => 'plans', 'value' => 'dodgy']));
+        $page = $this->getPageWithTags($attrs);
+
+        $this->asAdmin()->get('/ajax/tags/suggest/values?search=ora')->seeJsonEquals([]);
+        $this->get('/ajax/tags/suggest/values?search=cat')->seeJsonEquals(['cats', 'cattery', 'catapult']);
+        $this->get('/ajax/tags/suggest/values?search=do')->seeJsonEquals(['dog', 'dodgy']);
+        $this->get('/ajax/tags/suggest/values?search=cas')->seeJsonEquals(['castle']);
     }
 
     public function test_entity_permissions_effect_tag_suggestions()