Alamantus
/
Readlebee
mirror of https://gitlab.com/Alamantus/Readlebee.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Add a reload button to search

This commit is contained in:
Robbie Antenesse 2019-09-25 14:41:56 -06:00
parent dd131550dc
commit 8e9f74a901
2 changed files with 36 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
app/views/search/controller.js
View File

@ -1,7 +1,7 @@
import { ViewController } from '../controller'; import { ViewController } from '../controller';
export class SearchController extends ViewController { export class SearchController extends ViewController {
constructor(state, i18n) { constructor(state, emit, i18n) {
// Super passes state, view name, and default state to ViewController, // Super passes state, view name, and default state to ViewController,
// which stores state in this.appState and the view controller's state to this.state // which stores state in this.appState and the view controller's state to this.state
super(state, i18n, 'search', { super(state, i18n, 'search', {
@ -15,6 +15,8 @@ export class SearchController extends ViewController {
openModal: null, openModal: null,
}); });
this.emit = emit;
// If using controller methods in an input's onchange or onclick instance, // If using controller methods in an input's onchange or onclick instance,
// either bind the class's 'this' instance to the method first... // either bind the class's 'this' instance to the method first...
// or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead. // or use `onclick=${() => controller.submit()}` to maintain the 'this' of the class instead.
@ -43,18 +45,20 @@ export class SearchController extends ViewController {
search() { search() {
if (this.hasQuery) { if (this.hasQuery) {
this.state.done = false; this.state.done = false;
this.state.lastSearch = this.appState.query.for; this.emit('render', () => {
this.state.lastSearch = this.appState.query.for;
const searchTerm = this.appState.query.for.trim(); const searchTerm = this.appState.query.for.trim();
return fetch(`/api/search?for=${searchTerm}&lang=${this.appState.language}`) return fetch(`/api/search?for=${searchTerm}&lang=${this.appState.language}`)
.then(response => response.json()) .then(response => response.json())
.then(responseJSON => { .then(responseJSON => {
this.state.results = responseJSON; this.state.results = responseJSON;
this.state.done = true; this.state.done = true;
}); })
.then(() => this.emit('render'));
});
} }
return Promise.resolve();
} }
getCovers(inventaireURI) { getCovers(inventaireURI) {

28
app/views/search/index.js
View File

@ -5,13 +5,11 @@ import { resultDetails } from './resultDetails';
// This is the view function that is exported and used in the view manager. // This is the view function that is exported and used in the view manager.
export const searchView = (state, emit, i18n) => { export const searchView = (state, emit, i18n) => {
const controller = new SearchController(state, i18n); const controller = new SearchController(state, emit, i18n);
const { __ } = controller.i18n; const { __ } = controller.i18n;
if (controller.state.lastSearch !== state.query.for) { if (controller.state.lastSearch !== state.query.for) {
controller.search().then(() => { controller.search();
emit('render');
});
} }
// Returning an array in a view allows non-shared parent HTML elements. // Returning an array in a view allows non-shared parent HTML elements.
@ -21,12 +19,26 @@ export const searchView = (state, emit, i18n) => {
<h1 class="title">${__('search.header')}</h1> <h1 class="title">${__('search.header')}</h1>
<article> <article>
<h2> <div class="flex">
<div class="two-third-700">
<h2>
${controller.doneSearching
? html`<span>${__('search.results_header')}</span> <code>${controller.state.lastSearch}</code>`
: html`<span>${__('search.loading')}</span>`
}
</h2>
</div>
<div class="one-third-700">
${controller.doneSearching ${controller.doneSearching
? html`<span>${__('search.results_header')}</span> <code>${controller.state.lastSearch}</code>` ? html`<span class="pull-right" data-tooltip=${__('interaction.reload')}>
: html`<i class="icon-loading animate-spin"></i> <span>${__('search.loading')}</span>` <button class="pseudo" onclick=${() => controller.search()}>
<i class="icon-reload"></i>
</button>
</span>`
: html`<i class="icon-loading animate-spin"></i>`
} }
</h2> </div>
</div>
${!controller.doneSearching || controller.results.works < 1 ${!controller.doneSearching || controller.results.works < 1
? [ ? [