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

Adds Infinite Scroll to taginput filter (relationship and textual) #335.

This commit is contained in:
Mateus Machado Luna 2020-02-28 20:00:01 -03:00
parent 91b820ac70
commit 37ce865f58
3 changed files with 80 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
src/views/admin/components/filter-types/taginput/Taginput.vue
View File

@ -15,7 +15,9 @@
@typing="search"
:aria-close-label="$i18n.get('remove_value')"
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="(metadatumType == 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_add_items') : $i18n.get('info_type_to_add_metadata')">
:placeholder="(metadatumType == 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_add_items') : $i18n.get('info_type_to_add_metadata')"
check-infinite-scroll
@infinite-scroll="searchMore">
<template slot-scope="props">
<div class="media">
<div
@ -55,7 +57,11 @@
results:'',
selected:[],
options: [],
relatedCollectionId: ''
relatedCollectionId: '',
searchQuery: '',
searchOffset: 0,
searchNumber: 12,
totalFacets: 0
}
},
watch: {
@ -80,11 +86,29 @@
},
methods: {
search: _.debounce( function(query) {
// String update
if (query != this.searchQuery) {
this.searchQuery = query;
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;
let promise = null;
this.options = [];
let valuesToIgnore = [];
for(let val of this.selected)
for (let val of this.selected)
valuesToIgnore.push( val.value );
// Cancels previous Request
@ -92,11 +116,15 @@
this.getOptionsValuesCancel.cancel('Facet search Canceled.');
if ( this.metadatumType === 'Tainacan\\Metadata_Types\\Relationship' )
promise = this.getValuesRelationship( query, this.isRepositoryLevel, valuesToIgnore );
promise = this.getValuesRelationship( this.searchQuery, this.isRepositoryLevel, valuesToIgnore, this.searchOffset, this.searchNumber );
else
promise = this.getValuesPlainText( this.metadatumId, query, this.isRepositoryLevel, valuesToIgnore );
promise = this.getValuesPlainText( this.metadatumId, this.searchQuery, this.isRepositoryLevel, valuesToIgnore, this.searchOffset, this.searchNumber );
promise.request
.then( res => {
this.totalFacets = res.headers['x-wp-total'];
this.searchOffset += this.searchNumber;
})
.catch( error => {
if (isCancel(error))
this.$console.log('Request canceled: ' + error.message);
@ -108,6 +136,10 @@
this.getOptionsValuesCancel = promise.source;
}, 500),
searchMore: _.debounce(function () {
this.shouldAddOptions = true;
this.search(this.searchQuery);
}, 250),
updateSelectedValues() {
if ( !this.query || !this.query.metaquery || !Array.isArray( this.query.metaquery ) )

4
src/views/admin/components/modals/checkbox-radio-modal.vue
View File

@ -462,13 +462,13 @@
promise = this.getValuesPlainText( this.metadatumId, this.optionName, this.isRepositoryLevel, [], offset, this.maxNumOptionsCheckboxList, true);
promise.request
.then((data) => {
.then((res) => {
this.isCheckboxListLoading = false;
this.isSearchingLoading = false;
if (this.isUsingElasticSearch) {
this.checkboxListOffset = data.last_term;
this.checkboxListOffset = res.data.last_term;
if (!this.lastTermOnFisrtPage || this.lastTermOnFisrtPage == this.checkboxListOffset) {
this.lastTermOnFisrtPage = this.checkboxListOffset;

63
src/views/admin/js/filter-types-mixin.js
View File

@ -9,6 +9,7 @@ export const filterTypeMixin = {
metadatumId: '',
metadatumType: '',
filterTypeOptions: [],
shouldAddOptions: false
}
},
props: {
@ -31,7 +32,8 @@ export const dynamicFilterTypeMixin = {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
getOptionsValuesCancel: undefined,
isLoadingOptions: false
isLoadingOptions: false,
facetSearchPage: 1
}
},
computed: {
@ -65,6 +67,7 @@ export const dynamicFilterTypeMixin = {
let query_items = { 'current_query': currentQuery };
let url = '';
if (isRepositoryLevel || this.filter.collection_id == 'default')
url = `/facets/${metadatumId}?getSelected=${getSelected}&`;
else
@ -77,13 +80,12 @@ export const dynamicFilterTypeMixin = {
url += `last_term=${offset}&number=${number}&`;
}
if(search && offset != undefined && number != undefined){
if (search && offset != undefined && number != undefined)
url += `search=${search}&` + qs.stringify(query_items);
} else if(search){
else if (search)
url += `search=${search}&` + qs.stringify(query_items);
} else {
else
url += qs.stringify(query_items);
}
this.isLoadingOptions = true;
@ -99,7 +101,7 @@ export const dynamicFilterTypeMixin = {
else
this.prepareOptionsForPlainText(res.data, search, valuesToIgnore, isInCheckboxModal);
resolve(res.data);
resolve(res);
})
.catch((thrown) => {
if (axios.isCancel(thrown)) {
@ -143,20 +145,19 @@ export const dynamicFilterTypeMixin = {
let query_items = { 'current_query': currentQuery };
let url = '';
if (isRepositoryLevel || this.filter.collection_id == 'default')
url = '/facets/' + this.filter.metadatum.metadatum_id + `?getSelected=${getSelected}&`;
else
url = '/collection/' + this.filter.collection_id + '/facets/' + this.filter.metadatum.metadatum_id + `?getSelected=${getSelected}&`;
if(offset != undefined && number != undefined){
if (offset != undefined && number != undefined)
url += `offset=${offset}&number=${number}`;
} else {
url += `nopaging=1`
}
else
url += `nopaging=1`;
if(search){
if (search)
url += `&search=${search}`;
}
this.isLoadingOptions = true;
@ -165,6 +166,7 @@ export const dynamicFilterTypeMixin = {
new Promise((resolve, reject) => {
axios.tainacan.get(url + '&fetch_only=thumbnail,title,id&' + qs.stringify(query_items))
.then(res => {
this.isLoadingOptions = false;
if (res.data.values)
@ -172,7 +174,7 @@ export const dynamicFilterTypeMixin = {
else
this.prepareOptionsForRelationship(res.data, search, valuesToIgnore, isInCheckboxModal);
resolve(res.data);
resolve(res);
})
.catch((thrown) => {
if (axios.isCancel(thrown)) {
@ -240,15 +242,22 @@ export const dynamicFilterTypeMixin = {
}
}
}
if (this.shouldAddOptions === true && this.searchResults && this.searchResults.length)
this.searchResults = this.searchResults.concat(sResults);
else
this.searchResults = sResults;
this.searchResults = sResults;
if (opts.length)
this.options = opts;
if (opts.length) {
if (this.shouldAddOptions === true && this.options && this.options.length)
this.options = this.options.concat(opts)
else
this.options = opts;
}
else if(!search)
this.noMorePage = 1;
if(this.options.length < this.maxNumOptionsCheckboxList && !search)
if (this.options.length < this.maxNumOptionsCheckboxList && !search)
this.noMorePage = 1;
if (this.filter.max_options && this.options.length >= this.filter.max_options) {
@ -305,14 +314,22 @@ export const dynamicFilterTypeMixin = {
}
}
}
console.log(this.shouldAddOptions)
this.searchResults = sResults;
if (opts.length)
this.options = opts;
if (this.shouldAddOptions === true && this.searchResults && this.searchResults.length)
this.searchResults = this.searchResults.concat(sResults);
else
this.searchResults = sResults;
if (opts.length) {
if (this.shouldAddOptions === true && this.options && this.options.length)
this.options = this.options.concat(opts)
else
this.options = opts;
}
else if(!search)
this.noMorePage = 1;
if (this.options.length < this.maxNumOptionsCheckboxList)
this.noMorePage = 1;