Infra-Mirrors/BookStack
1
0
Fork 0
mirror of https://github.com/BookStackApp/BookStack.git synced 2024-08-28 13:12:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Limited tag value autosuggestions based on tag name

Browse Source 
As requested on #121
This commit is contained in:
Dan Brown 2016-06-04 14:54:31 +01:00
parent 6c1e06bf86
commit 246d1621f5
4 changed files with 34 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/Http/Controllers/TagController.php
View File

@ -67,7 +67,8 @@ class TagController extends Controller
public function getValueSuggestions(Request $request) public function getValueSuggestions(Request $request)
{ {
$searchTerm = $request->get('search'); $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); return response()->json($suggestions);
} }

7
app/Repos/TagRepo.php
View File

@ -72,15 +72,20 @@ class TagRepo
/** /**
* Get tag value suggestions from scanning existing tag values. * Get tag value suggestions from scanning existing tag values.
* @param $searchTerm * @param $searchTerm
* @param $tagName
* @return array * @return array
*/ */
public function getValueSuggestions($searchTerm) public function getValueSuggestions($searchTerm, $tagName = false)
{ {
if ($searchTerm === '') return []; if ($searchTerm === '') return [];
$query = $this->tag->where('value', 'LIKE', $searchTerm . '%')->groupBy('value')->orderBy('value', 'desc'); $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'); $query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type');
return $query->get(['value'])->pluck('value'); return $query->get(['value'])->pluck('value');
} }
/** /**
* Save an array of tags to an entity * Save an array of tags to an entity
* @param Entity $entity * @param Entity $entity

32
resources/assets/js/directives.js
View File

@ -378,7 +378,7 @@ module.exports = function (ngApp, events) {
} }
}]); }]);
ngApp.directive('autosuggestions', ['$http', function($http) { ngApp.directive('tagAutosuggestions', ['$http', function($http) {
return { return {
restrict: 'A', restrict: 'A',
link: function(scope, elem, attrs) { link: function(scope, elem, attrs) {
@ -403,6 +403,8 @@ module.exports = function (ngApp, events) {
let $input = $(this); let $input = $(this);
let val = $input.val(); let val = $input.val();
let url = $input.attr('autosuggest'); let url = $input.attr('autosuggest');
let type = $input.attr('autosuggest-type');
// No suggestions until at least 3 chars // No suggestions until at least 3 chars
if (val.length < 3) { if (val.length < 3) {
if (isShowing) { if (isShowing) {
@ -410,12 +412,21 @@ module.exports = function (ngApp, events) {
isShowing = false; isShowing = false;
} }
return; 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); let suggestionPromise = getSuggestions(val.slice(0, 3), url);
suggestionPromise.then((suggestions) => { suggestionPromise.then(suggestions => {
if (val.length > 2) { if (val.length > 2) {
suggestions = suggestions.filter((item) => { suggestions = suggestions.filter(item => {
return item.toLowerCase().indexOf(val.toLowerCase()) !== -1; return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
}).slice(0, 4); }).slice(0, 4);
displaySuggestions($input, suggestions); displaySuggestions($input, suggestions);
@ -448,15 +459,17 @@ module.exports = function (ngApp, events) {
let newActive = (active === 0) ? suggestCount-1 : active - 1; let newActive = (active === 0) ? suggestCount-1 : active - 1;
changeActiveTo(newActive, suggestionElems); 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; let text = suggestionElems[active].textContent;
currentInput[0].value = text; currentInput[0].value = text;
currentInput.focus(); currentInput.focus();
$suggestionBox.hide(); $suggestionBox.hide();
isShowing = false; 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 // Get suggestions & cache
function getSuggestions(input, url) { 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 // Get from local cache if exists
if (localCache[searchUrl]) { if (localCache[searchUrl]) {

6
resources/views/pages/form-toolbox.blade.php
View File

@ -10,12 +10,12 @@
<h4>Page Tags</h4> <h4>Page Tags</h4>
<div class="padded tags"> <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> <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" > <tbody ui-sortable="sortOptions" ng-model="tags" >
<tr ng-repeat="tag in tags track by $index"> <tr ng-repeat="tag in tags track by $index">
<td width="20" ><i class="handle zmdi zmdi-menu"></i></td> <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> <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> </tr>
</tbody> </tbody>