colin
/
bookstack
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added tag autosuggestion when no input provided 

Shows the most popular tag names/values.
As requested on #121
This commit is contained in:
Dan Brown 2016-06-04 15:37:28 +01:00
parent 246d1621f5
commit eec9c05518
3 changed files with 72 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,7 +55,7 @@ class TagController extends Controller
*/
public function getNameSuggestions(Request $request)
{
$searchTerm = $request->get('search');
$searchTerm = $request->has('search') ? $request->get('search') : false;
$suggestions = $this->tagRepo->getNameSuggestions($searchTerm);
return response()->json($suggestions);
}
@ -66,7 +66,7 @@ class TagController extends Controller
*/
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;
$suggestions = $this->tagRepo->getValueSuggestions($searchTerm, $tagName);
return response()->json($suggestions);

30
app/Repos/TagRepo.php
View File

@ -58,30 +58,44 @@ class TagRepo
/**
* 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
* @return array
*/
public function getNameSuggestions($searchTerm)
public function getNameSuggestions($searchTerm = false)
{
if ($searchTerm === '') return [];
$query = $this->tag->where('name', 'LIKE', $searchTerm . '%')->groupBy('name')->orderBy('name', 'desc');
$query = $this->tag->select('*', \DB::raw('count(*) as count'))->groupBy('name');
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');
return $query->get(['name'])->pluck('name');
}
/**
* 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 $tagName
* @return array
*/
public function getValueSuggestions($searchTerm, $tagName = false)
public function getValueSuggestions($searchTerm = false, $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->tag->select('*', \DB::raw('count(*) as count'))->groupBy('value');
if ($searchTerm) {
$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');
return $query->get(['value'])->pluck('value');
}

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

@ -399,33 +399,26 @@ module.exports = function (ngApp, events) {
let active = 0;
// Listen to input events on autosuggest fields
elem.on('input', '[autosuggest]', function(event) {
elem.on('input focus', '[autosuggest]', function (event) {
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) {
$suggestionBox.hide();
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;
if (nameVal !== '') {
url += '?name=' + encodeURIComponent(nameVal);
console.log(url);
}
}
let suggestionPromise = getSuggestions(val.slice(0, 3), url);
suggestionPromise.then(suggestions => {
if (val.length > 2) {
if (val.length === 0) {
displaySuggestions($input, suggestions.slice(0, 6));
} else {
suggestions = suggestions.filter(item => {
return item.toLowerCase().indexOf(val.toLowerCase()) !== -1;
}).slice(0, 4);
@ -436,12 +429,19 @@ module.exports = function (ngApp, events) {
// Hide autosuggestions when input loses focus.
// Slight delay to allow clicks.
let lastFocusTime = 0;
elem.on('blur', '[autosuggest]', function (event) {
let startTime = Date.now();
setTimeout(() => {
if (lastFocusTime < startTime) {
$suggestionBox.hide();
isShowing = false;
}
}, 200)
});
elem.on('focus', '[autosuggest]', function (event) {
lastFocusTime = Date.now();
});
elem.on('keydown', '[autosuggest]', function (event) {
if (!isShowing) return;
@ -482,6 +482,7 @@ module.exports = function (ngApp, events) {
// Display suggestions on a field
let prevSuggestions = [];
function displaySuggestions($input, suggestions) {
// Hide if no suggestions
@ -518,7 +519,8 @@ module.exports = function (ngApp, events) {
if (i === 0) {
suggestion.className = 'active'
active = 0;
};
}
;
$suggestionBox[0].appendChild(suggestion);
}
@ -540,14 +542,14 @@ module.exports = function (ngApp, events) {
let searchUrl = url + (hasQuery ? '&' : '?') + 'search=' + encodeURIComponent(input);
// Get from local cache if exists
if (localCache[searchUrl]) {
if (typeof localCache[searchUrl] !== 'undefined') {
return new Promise((resolve, reject) => {
resolve(localCache[input]);
resolve(localCache[searchUrl]);
});
}
return $http.get(searchUrl).then((response) => {
localCache[input] = response.data;
return $http.get(searchUrl).then(response => {
localCache[searchUrl] = response.data;
return response.data;
});
}