quick search impl finished

This commit is contained in:
zadam
2021-02-01 23:51:04 +01:00
parent d406df48a8
commit 3a94b04ef4
7 changed files with 57 additions and 24 deletions

View File

@@ -1,8 +1,10 @@
import BasicWidget from "./basic_widget.js";
import server from "../services/server.js";
import linkService from "../services/link.js";
import dateNotesService from "../services/date_notes.js";
import treeCache from "../services/tree_cache.js";
import utils from "../services/utils.js";
import appContext from "../services/app_context.js";
const TPL = `
<div class="quick-search input-group input-group-sm" style="width: 250px;">
@@ -18,7 +20,7 @@ const TPL = `
overflow-y: auto;
overflow-x: hidden;
text-overflow: ellipsis;
box-shadow: 10px 10px 93px -25px black;
box-shadow: -30px 50px 93px -50px black;
}
</style>
@@ -27,18 +29,12 @@ const TPL = `
<button class="btn btn-outline-secondary search-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="bx bx-search"></span>
</button>
<div class="dropdown-menu dropdown-menu-right">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div role="separator" class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
<div class="dropdown-menu dropdown-menu-right"></div>
</div>
</div>
</div>`;
const MAX_DISPLAYED_NOTES = 20;
const MAX_DISPLAYED_NOTES = 15;
export default class QuickSearchWidget extends BasicWidget {
doRender() {
@@ -48,8 +44,9 @@ export default class QuickSearchWidget extends BasicWidget {
this.$searchString = this.$widget.find('.search-string');
this.$dropdownMenu = this.$widget.find('.dropdown-menu');
this.$dropdownToggle = this.$widget.find('.search-button');
this.$dropdownToggle.dropdown();
this.$widget.find('.input-group-append').on('show.bs.dropdown', () => this.search());
this.$widget.find('.input-group-append').on('shown.bs.dropdown', () => this.search());
utils.bindElShortcut(this.$searchString, 'return', () => {
this.$dropdownToggle.dropdown('show');
@@ -57,21 +54,30 @@ export default class QuickSearchWidget extends BasicWidget {
this.$searchString.focus();
});
utils.bindElShortcut(this.$searchString, 'down', () => {
this.$dropdownMenu.find('.dropdown-item:first').focus();
});
return this.$widget;
}
async search() {
const searchString = this.$searchString.val().trim();
if (!searchString) {
this.$dropdownToggle.dropdown("hide");
return;
}
this.$dropdownMenu.empty();
this.$dropdownMenu.append('<span class="dropdown-item disabled"><span class="bx bx-loader bx-spin"></span> Searching ...</span>');
const resultNoteIds = await server.get('quick-search/' + encodeURIComponent(this.$searchString.val()));
const resultNoteIds = await server.get('quick-search/' + encodeURIComponent(searchString));
const displayedNoteIds = resultNoteIds.slice(0, Math.min(MAX_DISPLAYED_NOTES, resultNoteIds.length));
this.$dropdownMenu.empty();
this.$dropdownMenu.append('<div class="dropdown-item"><button class="btn btn-sm">Show in full search</button></div>');
if (displayedNoteIds.length === 0) {
this.$dropdownMenu.append('<span class="dropdown-item disabled">No results found</span>');
}
@@ -79,6 +85,14 @@ export default class QuickSearchWidget extends BasicWidget {
for (const note of await treeCache.getNotes(displayedNoteIds)) {
const $link = await linkService.createNoteLink(note.noteId, {showNotePath: true});
$link.addClass('dropdown-item');
$link.attr("tabIndex", "0");
$link.on('click', () => this.$dropdownToggle.dropdown("hide"));
utils.bindElShortcut($link, 'return', () => {
$link.find('a').trigger({
type: 'click',
which: 1 // left click
});
});
this.$dropdownMenu.append($link);
}
@@ -87,6 +101,23 @@ export default class QuickSearchWidget extends BasicWidget {
this.$dropdownMenu.append(`<span class="dropdown-item disabled">... and ${resultNoteIds.length - MAX_DISPLAYED_NOTES} more results.</span>`);
}
const $showInFullButton = $('<a class="dropdown-item" tabindex="0">')
.append($('<button class="btn btn-sm">Show in full search</button>'));
this.$dropdownMenu.append($showInFullButton);
utils.bindElShortcut($showInFullButton, 'return', async () => {
const searchNote = await dateNotesService.createSearchNote({searchString: this.$searchString.val()});
await appContext.tabManager.getActiveTabContext().setNote(searchNote.noteId);
});
utils.bindElShortcut(this.$dropdownMenu.find('.dropdown-item:first'), 'up', () => this.$searchString.focus());
this.$dropdownToggle.dropdown('update');
}
quickSearchEvent() {
this.$searchString.focus();
}
}