mirror of
https://github.com/BookStackApp/BookStack.git
synced 2024-08-28 21:22:30 +00:00
Added tag autosuggestion when no input provided
Shows the most popular tag names/values. As requested on #121
This commit is contained in:
parent
246d1621f5
commit
eec9c05518
@ -55,7 +55,7 @@ class TagController extends Controller
|
|||||||
*/
|
*/
|
||||||
public function getNameSuggestions(Request $request)
|
public function getNameSuggestions(Request $request)
|
||||||
{
|
{
|
||||||
$searchTerm = $request->get('search');
|
$searchTerm = $request->has('search') ? $request->get('search') : false;
|
||||||
$suggestions = $this->tagRepo->getNameSuggestions($searchTerm);
|
$suggestions = $this->tagRepo->getNameSuggestions($searchTerm);
|
||||||
return response()->json($suggestions);
|
return response()->json($suggestions);
|
||||||
}
|
}
|
||||||
@ -66,7 +66,7 @@ class TagController extends Controller
|
|||||||
*/
|
*/
|
||||||
public function getValueSuggestions(Request $request)
|
public function getValueSuggestions(Request $request)
|
||||||
{
|
{
|
||||||
$searchTerm = $request->get('search');
|
$searchTerm = $request->has('search') ? $request->get('search') : false;
|
||||||
$tagName = $request->has('name') ? $request->get('name') : false;
|
$tagName = $request->has('name') ? $request->get('name') : false;
|
||||||
$suggestions = $this->tagRepo->getValueSuggestions($searchTerm, $tagName);
|
$suggestions = $this->tagRepo->getValueSuggestions($searchTerm, $tagName);
|
||||||
return response()->json($suggestions);
|
return response()->json($suggestions);
|
||||||
|
@ -58,30 +58,44 @@ class TagRepo
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Get tag name suggestions from scanning existing tag names.
|
* Get tag name suggestions from scanning existing tag names.
|
||||||
|
* If no search term is given the 50 most popular tag names are provided.
|
||||||
* @param $searchTerm
|
* @param $searchTerm
|
||||||
* @return array
|
* @return array
|
||||||
*/
|
*/
|
||||||
public function getNameSuggestions($searchTerm)
|
public function getNameSuggestions($searchTerm = false)
|
||||||
{
|
{
|
||||||
if ($searchTerm === '') return [];
|
$query = $this->tag->select('*', \DB::raw('count(*) as count'))->groupBy('name');
|
||||||
$query = $this->tag->where('name', 'LIKE', $searchTerm . '%')->groupBy('name')->orderBy('name', 'desc');
|
|
||||||
|
if ($searchTerm) {
|
||||||
|
$query = $query->where('name', 'LIKE', $searchTerm . '%')->orderBy('name', 'desc');
|
||||||
|
} else {
|
||||||
|
$query = $query->orderBy('count', 'desc')->take(50);
|
||||||
|
}
|
||||||
|
|
||||||
$query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type');
|
$query = $this->permissionService->filterRestrictedEntityRelations($query, 'tags', 'entity_id', 'entity_type');
|
||||||
return $query->get(['name'])->pluck('name');
|
return $query->get(['name'])->pluck('name');
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Get tag value suggestions from scanning existing tag values.
|
* Get tag value suggestions from scanning existing tag values.
|
||||||
|
* If no search is given the 50 most popular values are provided.
|
||||||
|
* Passing a tagName will only find values for a tags with a particular name.
|
||||||
* @param $searchTerm
|
* @param $searchTerm
|
||||||
* @param $tagName
|
* @param $tagName
|
||||||
* @return array
|
* @return array
|
||||||
*/
|
*/
|
||||||
public function getValueSuggestions($searchTerm, $tagName = false)
|
public function getValueSuggestions($searchTerm = false, $tagName = false)
|
||||||
{
|
{
|
||||||
if ($searchTerm === '') return [];
|
$query = $this->tag->select('*', \DB::raw('count(*) as count'))->groupBy('value');
|
||||||
$query = $this->tag->where('value', 'LIKE', $searchTerm . '%')->groupBy('value')->orderBy('value', 'desc');
|
|
||||||
if ($tagName !== false) {
|
if ($searchTerm) {
|
||||||
$query = $query->where('name', '=', $tagName);
|
$query = $query->where('value', 'LIKE', $searchTerm . '%')->orderBy('value', 'desc');
|
||||||
|
} else {
|
||||||
|
$query = $query->orderBy('count', 'desc')->take(50);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
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');
|
||||||
}
|
}
|
||||||
|
@ -166,7 +166,7 @@ module.exports = function (ngApp, events) {
|
|||||||
};
|
};
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
ngApp.directive('tinymce', ['$timeout', function($timeout) {
|
ngApp.directive('tinymce', ['$timeout', function ($timeout) {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
scope: {
|
scope: {
|
||||||
@ -204,8 +204,8 @@ module.exports = function (ngApp, events) {
|
|||||||
scope.tinymce.extraSetups.push(tinyMceSetup);
|
scope.tinymce.extraSetups.push(tinyMceSetup);
|
||||||
|
|
||||||
// Custom tinyMCE plugins
|
// Custom tinyMCE plugins
|
||||||
tinymce.PluginManager.add('customhr', function(editor) {
|
tinymce.PluginManager.add('customhr', function (editor) {
|
||||||
editor.addCommand('InsertHorizontalRule', function() {
|
editor.addCommand('InsertHorizontalRule', function () {
|
||||||
var hrElem = document.createElement('hr');
|
var hrElem = document.createElement('hr');
|
||||||
var cNode = editor.selection.getNode();
|
var cNode = editor.selection.getNode();
|
||||||
var parentNode = cNode.parentNode;
|
var parentNode = cNode.parentNode;
|
||||||
@ -231,7 +231,7 @@ module.exports = function (ngApp, events) {
|
|||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
ngApp.directive('markdownInput', ['$timeout', function($timeout) {
|
ngApp.directive('markdownInput', ['$timeout', function ($timeout) {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
scope: {
|
scope: {
|
||||||
@ -255,7 +255,7 @@ module.exports = function (ngApp, events) {
|
|||||||
|
|
||||||
scope.$on('markdown-update', (event, value) => {
|
scope.$on('markdown-update', (event, value) => {
|
||||||
element.val(value);
|
element.val(value);
|
||||||
scope.mdModel= value;
|
scope.mdModel = value;
|
||||||
scope.mdChange(markdown(value));
|
scope.mdChange(markdown(value));
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -263,7 +263,7 @@ module.exports = function (ngApp, events) {
|
|||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
ngApp.directive('markdownEditor', ['$timeout', function($timeout) {
|
ngApp.directive('markdownEditor', ['$timeout', function ($timeout) {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
link: function (scope, element, attrs) {
|
link: function (scope, element, attrs) {
|
||||||
@ -303,7 +303,7 @@ module.exports = function (ngApp, events) {
|
|||||||
if (now - lastScroll > scrollDebounceTime) {
|
if (now - lastScroll > scrollDebounceTime) {
|
||||||
setScrollHeights()
|
setScrollHeights()
|
||||||
}
|
}
|
||||||
let scrollPercent = (input.scrollTop() / (inputScrollHeight-inputHeight));
|
let scrollPercent = (input.scrollTop() / (inputScrollHeight - inputHeight));
|
||||||
let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
|
let displayScrollY = (displayScrollHeight - displayHeight) * scrollPercent;
|
||||||
display.scrollTop(displayScrollY);
|
display.scrollTop(displayScrollY);
|
||||||
lastScroll = now;
|
lastScroll = now;
|
||||||
@ -342,10 +342,10 @@ module.exports = function (ngApp, events) {
|
|||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
ngApp.directive('toolbox', [function() {
|
ngApp.directive('toolbox', [function () {
|
||||||
return {
|
return {
|
||||||
restrict: 'A',
|
restrict: 'A',
|
||||||
link: function(scope, elem, attrs) {
|
link: function (scope, elem, attrs) {
|
||||||
|
|
||||||
// Get common elements
|
// Get common elements
|
||||||
const $buttons = elem.find('[tab-button]');
|
const $buttons = elem.find('[tab-button]');
|
||||||
@ -370,7 +370,7 @@ module.exports = function (ngApp, events) {
|
|||||||
setActive($content.first().attr('tab-content'), false);
|
setActive($content.first().attr('tab-content'), false);
|
||||||
|
|
||||||
// Handle tab button click
|
// Handle tab button click
|
||||||
$buttons.click(function(e) {
|
$buttons.click(function (e) {
|
||||||
let name = $(this).attr('tab-button');
|
let name = $(this).attr('tab-button');
|
||||||
setActive(name, true);
|
setActive(name, true);
|
||||||
});
|
});
|
||||||
@ -378,10 +378,10 @@ module.exports = function (ngApp, events) {
|
|||||||
}
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
ngApp.directive('tagAutosuggestions', ['$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) {
|
||||||
|
|
||||||
// Local storage for quick caching.
|
// Local storage for quick caching.
|
||||||
const localCache = {};
|
const localCache = {};
|
||||||
@ -399,49 +399,49 @@ module.exports = function (ngApp, events) {
|
|||||||
let active = 0;
|
let active = 0;
|
||||||
|
|
||||||
// Listen to input events on autosuggest fields
|
// Listen to input events on autosuggest fields
|
||||||
elem.on('input', '[autosuggest]', function(event) {
|
elem.on('input focus', '[autosuggest]', function (event) {
|
||||||
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');
|
let type = $input.attr('autosuggest-type');
|
||||||
|
|
||||||
// No suggestions until at least 3 chars
|
|
||||||
if (val.length < 3) {
|
|
||||||
if (isShowing) {
|
|
||||||
$suggestionBox.hide();
|
|
||||||
isShowing = false;
|
|
||||||
}
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Add name param to request if for a value
|
// Add name param to request if for a value
|
||||||
if (type.toLowerCase() === 'value') {
|
if (type.toLowerCase() === 'value') {
|
||||||
let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first();
|
let $nameInput = $input.closest('tr').find('[autosuggest-type="name"]').first();
|
||||||
let nameVal = $nameInput.val();
|
let nameVal = $nameInput.val();
|
||||||
if (nameVal === '') return;
|
if (nameVal !== '') {
|
||||||
url += '?name=' + encodeURIComponent(nameVal);
|
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 === 0) {
|
||||||
suggestions = suggestions.filter(item => {
|
displaySuggestions($input, suggestions.slice(0, 6));
|
||||||
return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
|
} else {
|
||||||
}).slice(0, 4);
|
suggestions = suggestions.filter(item => {
|
||||||
displaySuggestions($input, suggestions);
|
return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
|
||||||
}
|
}).slice(0, 4);
|
||||||
|
displaySuggestions($input, suggestions);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
// Hide autosuggestions when input loses focus.
|
// Hide autosuggestions when input loses focus.
|
||||||
// Slight delay to allow clicks.
|
// Slight delay to allow clicks.
|
||||||
elem.on('blur', '[autosuggest]', function(event) {
|
let lastFocusTime = 0;
|
||||||
|
elem.on('blur', '[autosuggest]', function (event) {
|
||||||
|
let startTime = Date.now();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
$suggestionBox.hide();
|
if (lastFocusTime < startTime) {
|
||||||
isShowing = false;
|
$suggestionBox.hide();
|
||||||
|
isShowing = false;
|
||||||
|
}
|
||||||
}, 200)
|
}, 200)
|
||||||
});
|
});
|
||||||
|
elem.on('focus', '[autosuggest]', function (event) {
|
||||||
|
lastFocusTime = Date.now();
|
||||||
|
});
|
||||||
|
|
||||||
elem.on('keydown', '[autosuggest]', function (event) {
|
elem.on('keydown', '[autosuggest]', function (event) {
|
||||||
if (!isShowing) return;
|
if (!isShowing) return;
|
||||||
@ -451,12 +451,12 @@ module.exports = function (ngApp, events) {
|
|||||||
|
|
||||||
// Down arrow
|
// Down arrow
|
||||||
if (event.keyCode === 40) {
|
if (event.keyCode === 40) {
|
||||||
let newActive = (active === suggestCount-1) ? 0 : active + 1;
|
let newActive = (active === suggestCount - 1) ? 0 : active + 1;
|
||||||
changeActiveTo(newActive, suggestionElems);
|
changeActiveTo(newActive, suggestionElems);
|
||||||
}
|
}
|
||||||
// Up arrow
|
// Up arrow
|
||||||
else if (event.keyCode === 38) {
|
else if (event.keyCode === 38) {
|
||||||
let newActive = (active === 0) ? suggestCount-1 : active - 1;
|
let newActive = (active === 0) ? suggestCount - 1 : active - 1;
|
||||||
changeActiveTo(newActive, suggestionElems);
|
changeActiveTo(newActive, suggestionElems);
|
||||||
}
|
}
|
||||||
// Enter or tab key
|
// Enter or tab key
|
||||||
@ -482,6 +482,7 @@ module.exports = function (ngApp, events) {
|
|||||||
|
|
||||||
// Display suggestions on a field
|
// Display suggestions on a field
|
||||||
let prevSuggestions = [];
|
let prevSuggestions = [];
|
||||||
|
|
||||||
function displaySuggestions($input, suggestions) {
|
function displaySuggestions($input, suggestions) {
|
||||||
|
|
||||||
// Hide if no suggestions
|
// Hide if no suggestions
|
||||||
@ -518,7 +519,8 @@ module.exports = function (ngApp, events) {
|
|||||||
if (i === 0) {
|
if (i === 0) {
|
||||||
suggestion.className = 'active'
|
suggestion.className = 'active'
|
||||||
active = 0;
|
active = 0;
|
||||||
};
|
}
|
||||||
|
;
|
||||||
$suggestionBox[0].appendChild(suggestion);
|
$suggestionBox[0].appendChild(suggestion);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -537,17 +539,17 @@ module.exports = function (ngApp, events) {
|
|||||||
// Get suggestions & cache
|
// Get suggestions & cache
|
||||||
function getSuggestions(input, url) {
|
function getSuggestions(input, url) {
|
||||||
let hasQuery = url.indexOf('?') !== -1;
|
let hasQuery = url.indexOf('?') !== -1;
|
||||||
let searchUrl = url + (hasQuery?'&':'?') + 'search=' + encodeURIComponent(input);
|
let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input);
|
||||||
|
|
||||||
// Get from local cache if exists
|
// Get from local cache if exists
|
||||||
if (localCache[searchUrl]) {
|
if (typeof localCache[searchUrl] !== 'undefined') {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
resolve(localCache[input]);
|
resolve(localCache[searchUrl]);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
return $http.get(searchUrl).then((response) => {
|
return $http.get(searchUrl).then(response => {
|
||||||
localCache[input] = response.data;
|
localCache[searchUrl] = response.data;
|
||||||
return response.data;
|
return response.data;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user