Limited tag value autosuggestions based on tag name

As requested on #121

Limited tag value autosuggestions based on tag name
As requested on #121
Dan Brown
Commit 246d1621f5165a030874d4f931feba72b7a662e5 246d1621 1 parent 6c1e06bf
Showing 4 changed files with 34 additions and 14 deletions
app/Http/Controllers/TagController.php
app/Repos/TagRepo.php
resources/assets/js/directives.js
resources/views/pages/form-toolbox.blade.php
--- a/app/Http/Controllers/TagController.php
View file @246d162
+++ b/app/Http/Controllers/TagController.php
View file @246d162
@@ -67,7 +67,8 @@ class TagController extends Controller
     public function getValueSuggestions(Request $request)
     {
         $searchTerm = $request->get('search');
-        $suggestions = $this->tagRepo->getValueSuggestions($searchTerm);
+        $tagName = $request->has('name') ? $request->get('name') : false;
+        $suggestions = $this->tagRepo->getValueSuggestions($searchTerm, $tagName);
         return response()->json($suggestions);
     }
--- a/app/Repos/TagRepo.php
View file @246d162
+++ b/app/Repos/TagRepo.php
View file @246d162
@@ -72,15 +72,20 @@ class TagRepo
     /**
      * Get tag value suggestions from scanning existing tag values.
      * @param $searchTerm
+     * @param $tagName
      * @return array
      */
-    public function getValueSuggestions($searchTerm)
+    public function getValueSuggestions($searchTerm, $tagName = false)
     {
         if ($searchTerm === '') return [];
         $query = $this->tag->where('value', 'LIKE', $searchTerm . '%')->groupBy('value')->orderBy('value', 'desc');
+        if ($tagName !== false) {
+            $query = $query->where('name', '=', $tagName);
+        }
         $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
--- a/resources/assets/js/directives.js
View file @246d162
+++ b/resources/assets/js/directives.js
View file @246d162
@@ -378,7 +378,7 @@ module.exports = function (ngApp, events) {
         }
     }]);
-    ngApp.directive('autosuggestions', ['$http', function($http) {
+    ngApp.directive('tagAutosuggestions', ['$http', function($http) {
         return {
             restrict: 'A',
             link: function(scope, elem, attrs) {
@@ -403,6 +403,8 @@ module.exports = function (ngApp, events) {
                     let $input = $(this);
                     let val = $input.val();
                     let url = $input.attr('autosuggest');
+                    let type = $input.attr('autosuggest-type');
+                    
                     // No suggestions until at least 3 chars
                     if (val.length < 3) {
                         if (isShowing) {
@@ -410,12 +412,21 @@ module.exports = function (ngApp, events) {
                             isShowing = false;
                         }
                         return;
-                    };
+                    }
+
+                    // Add name param to request if for a value
+                    if (type.toLowerCase() === 'value') {
+                        let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first();
+                        let nameVal = $nameInput.val();
+                        if (nameVal === '') return;
+                        url += '?name=' + encodeURIComponent(nameVal);
+                        console.log(url);
+                    }
                     let suggestionPromise = getSuggestions(val.slice(0, 3), url);
-                    suggestionPromise.then((suggestions) => {
+                    suggestionPromise.then(suggestions => {
                        if (val.length > 2) {
-                           suggestions = suggestions.filter((item) => {
+                           suggestions = suggestions.filter(item => {
                                return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
                            }).slice(0, 4);
                            displaySuggestions($input, suggestions);
@@ -448,15 +459,17 @@ module.exports = function (ngApp, events) {
                         let newActive = (active === 0) ? suggestCount-1 : active - 1;
                         changeActiveTo(newActive, suggestionElems);
                     }
-                    // Enter key
+                    // Enter or tab key
-                    else if (event.keyCode === 13) {
+                    else if (event.keyCode === 13 || event.keyCode === 9) {
                         let text = suggestionElems[active].textContent;
                         currentInput[0].value = text;
                         currentInput.focus();
                         $suggestionBox.hide();
                         isShowing = false;
-                        event.preventDefault();
+                        if (event.keyCode === 13) {
-                        return false;
+                            event.preventDefault();
+                            return false;
+                        }
                     }
                 });
@@ -523,7 +536,8 @@ module.exports = function (ngApp, events) {
                 // Get suggestions & cache
                 function getSuggestions(input, url) {
-                    let searchUrl = url + '?search=' + encodeURIComponent(input);
+                    let hasQuery = url.indexOf('?') !== -1;
+                    let searchUrl = url + (hasQuery?'&':'?') + 'search=' + encodeURIComponent(input);
                     // Get from local cache if exists
                     if (localCache[searchUrl]) {
--- a/resources/views/pages/form-toolbox.blade.php
View file @246d162
+++ b/resources/views/pages/form-toolbox.blade.php
View file @246d162
@@ -10,12 +10,12 @@
         <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" autosuggestions style="width: 100%;">
+            <table class="no-style" tag-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 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 autosuggest="/ajax/tags/suggest/names" autosuggest-type="name" 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/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><input autosuggest="/ajax/tags/suggest/values" autosuggest-type="value" 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>