tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds infinite scroll to autocomplete filter (relationship and plain text)

This commit is contained in:
Mateus Machado Luna 2020-02-29 10:14:16 -03:00
parent 37ce865f58
commit ef0254957e
1 changed files with 46 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
View File

@ -12,7 +12,9 @@
field="label" field="label"
@select="onSelect" @select="onSelect"
clearable clearable
:placeholder="(metadatumType === 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_search_items') : $i18n.get('info_type_to_search_metadata')"> :placeholder="(metadatumType === 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_search_items') : $i18n.get('info_type_to_search_metadata')"
check-infinite-scroll
@infinite-scroll="searchMore">
<template slot-scope="props"> <template slot-scope="props">
<div class="media"> <div class="media">
<div <div
@ -52,7 +54,11 @@
return { return {
selected:'', selected:'',
options: [], options: [],
label: '' label: '',
searchQuery: '',
searchOffset: 0,
searchNumber: 12,
totalFacets: 0
} }
}, },
watch: { watch: {
@ -84,24 +90,48 @@
}, },
search: _.debounce( function(query) { search: _.debounce( function(query) {
if (query != '') { // String update
let promise = null; if (query != this.searchQuery) {
this.searchQuery = query;
this.options = []; this.options = [];
this.searchOffset = 0;
}
// String cleared
if (!query.length) {
this.searchQuery = query;
this.options = [];
this.searchOffset = 0;
}
// No need to load more
if (this.searchOffset > 0 && this.options.length >= this.totalFacets)
return;
if (this.searchQuery != '') {
let promise = null;
// Cancels previous Request // Cancels previous Request
if (this.getOptionsValuesCancel != undefined) if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.'); this.getOptionsValuesCancel.cancel('Facet search Canceled.');
if ( this.metadatumType === 'Tainacan\\Metadata_Types\\Relationship' ) if ( this.metadatumType === 'Tainacan\\Metadata_Types\\Relationship' )
promise = this.getValuesRelationship( query, this.isRepositoryLevel ); promise = this.getValuesRelationship( this.searchQuery, this.isRepositoryLevel, [], this.searchOffset, this.searchNumber );
else else
promise = this.getValuesPlainText( this.metadatumId, query, this.isRepositoryLevel ); promise = this.getValuesPlainText( this.metadatumId, this.searchQuery, this.isRepositoryLevel, [], this.searchOffset, this.searchNumber );
promise.request.catch( error => { promise.request
if (isCancel(error)) .then( res => {
this.$console.log('Request canceled: ' + error.message); this.totalFacets = res.headers['x-wp-total'];
else this.searchOffset += this.searchNumber;
this.$console.error( error ); })
}); .catch( error => {
if (isCancel(error))
this.$console.log('Request canceled: ' + error.message);
else
this.$console.error( error );
});
// Search Request Token for cancelling // Search Request Token for cancelling
this.getOptionsValuesCancel = promise.source; this.getOptionsValuesCancel = promise.source;
@ -117,6 +147,10 @@
}); });
} }
}, 500), }, 500),
searchMore: _.debounce(function () {
this.shouldAddOptions = true;
this.search(this.searchQuery);
}, 250),
updateSelectedValues(){ updateSelectedValues(){
if (!this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery )) if (!this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ))