mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-28 13:12:05 +00:00
Limited tag value autosuggestions based on tag name
As requested on #121
This commit is contained in:
parent
6c1e06bf86
commit
246d1621f5
@ -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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
|
||||||
|
@ -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]) {
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user