Adds request cancelation to facet load options search

This commit is contained in:
Mateus Machado Luna 2018-10-16 17:11:01 -03:00
parent 44775512cd
commit c0526ca4a9
8 changed files with 222 additions and 155 deletions

View File

@ -168,6 +168,7 @@ export default {
this.arrayRealPath = this.arrayRealPath.filter((item) => item.length != 0);
this.generateViewPath();
}
},
methods: {

View File

@ -359,13 +359,17 @@
getOptions(offset){
let promise = '';
// Cancels previous Request
if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.');
if ( this.metadatum_type === 'Tainacan\\Metadata_Types\\Relationship' ) {
let collectionTarget = ( this.metadatum_object && this.metadatum_object.metadata_type_options.collection_id ) ?
this.metadatum_object.metadata_type_options.collection_id : this.collection_id;
promise = this.getValuesRelationship( collectionTarget, this.optionName, [], offset, this.maxNumOptionsCheckboxList, true);
promise
promise.request
.then(() => {
this.isCheckboxListLoading = false;
this.isSearchingLoading = false;
@ -376,7 +380,7 @@
} else {
promise = this.getValuesPlainText( this.metadatum_id, this.optionName, this.isRepositoryLevel, [], offset, this.maxNumOptionsCheckboxList, true);
promise
promise.request
.then(() => {
this.isCheckboxListLoading = false;
this.isSearchingLoading = false;
@ -385,6 +389,9 @@
this.$console.log(error);
})
}
// Search Request Token for cancelling
this.getOptionsValuesCancel = promise.source;
},
autoComplete: _.debounce( function () {
this.isSearching = !!this.optionName.length;

View File

@ -98,6 +98,12 @@
if (query != '') {
let promise = null;
this.options = [];
// Cancels previous Request
if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.');
if ( this.type === 'Tainacan\\Metadata_Types\\Relationship' ) {
let collectionTarget = ( this.metadatum_object && this.metadatum_object.metadata_type_options.collection_id ) ?
this.metadatum_object.metadata_type_options.collection_id : this.collection_id;
@ -107,9 +113,13 @@
promise = this.getValuesPlainText( this.metadatum, query, this.isRepositoryLevel );
}
promise.catch( error => {
promise.request.catch( error => {
this.$console.log('error select', error );
});
// Search Request Token for cancelling
this.getOptionsValuesCancel = promise.source;
} else {
this.cleanSearch();
}

View File

@ -32,6 +32,7 @@
export default {
created(){
this.collection = ( this.collection_id ) ? this.collection_id : this.filter.collection_id;
this.metadatum = ( this.metadatum_id ) ? this.metadatum_id : this.filter.metadatum.metadatum_id;
const vm = this;
@ -81,46 +82,56 @@
methods: {
loadOptions(){
let promise = null;
this.isLoading = true;
// Cancels previous Request
if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.');
if ( this.type === 'Tainacan\\Metadata_Types\\Relationship' ) {
this.isLoading = true;
let collectionTarget = ( this.metadatum_object && this.metadatum_object.metadata_type_options.collection_id ) ?
this.metadatum_object.metadata_type_options.collection_id : this.collection_id;
promise = this.getValuesRelationship( collectionTarget, null, [], 0, this.filter.max_options, false, '1');
promise
promise.request
.then(() => {
this.isLoading = false;
if(this.options.length > this.filter.max_options){
this.options.splice(this.filter.max_options);
}
this.selectedValues();
}).catch((error) => {
this.$console.error(error);
})
} else {
this.isLoading = true;
promise = this.getValuesPlainText( this.metadatum, null, this.isRepositoryLevel, [], 0, this.filter.max_options, false, '1' );
promise
promise.request
.then(() => {
this.isLoading = false;
if(this.options.length > this.filter.max_options){
this.options.splice(this.filter.max_options);
}
this.selectedValues();
}).catch((error) => {
this.$console.error(error);
})
});
}
promise
.then(() => {
this.isLoading = false;
this.selectedValues()
})
.catch( error => {
this.$console.log('error select', error );
this.isLoading = false;
});
// promise.request
// .then(() => {
// this.isLoading = false;
// })
// .catch( error => {
// this.$console.log('error select', error );
// this.isLoading = false;
// });
// Search Request Token for cancelling
this.getOptionsValuesCancel = promise.source;
},
onSelect(){
this.$emit('input', {

View File

@ -1,10 +1,11 @@
import qs from 'qs';
import { tainacan as axios } from '../../js/axios/axios';
import axios from '../../js/axios/axios';
export const filter_type_mixin = {
data () {
return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png'
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
getOptionsValuesCancel: undefined
}
},
props: {
@ -19,11 +20,16 @@ export const filter_type_mixin = {
},
methods: {
getValuesPlainText(metadatumId, search, isRepositoryLevel, valuesToIgnore, offset, number, isInCheckboxModal, getSelected = '0') {
const source = axios.CancelToken.source();
let currentQuery = JSON.parse(JSON.stringify(this.query));
if (currentQuery.fetch_only != undefined) {
for (let key of Object.keys(currentQuery.fetch_only)) {
if (currentQuery.fetch_only[key] == null)
delete currentQuery.fetch_only[key];
}
}
let query_items = { 'current_query': currentQuery };
let url = `/collection/${this.collection}/facets/${metadatumId}?getSelected=${getSelected}&`;
@ -44,7 +50,9 @@ export const filter_type_mixin = {
url += qs.stringify(query_items);
}
return axios.get(url)
return new Object ({
request:
axios.tainacan.get(url, { cancelToken: source.token })
.then(res => {
let sResults = [];
let opts = [];
@ -103,16 +111,27 @@ export const filter_type_mixin = {
}
})
.catch(error => {
this.$console.error(error);
.catch((thrown) => {
if (axios.isCancel(thrown)) {
console.log('Request canceled: ', thrown.message);
} else {
reject(thrown);
}
}),
source: source
});
},
getValuesRelationship(collectionTarget, search, valuesToIgnore, offset, number, isInCheckboxModal, getSelected = '0') {
const source = axios.CancelToken.source();
let currentQuery = JSON.parse(JSON.stringify(this.query));
if (currentQuery.fetch_only != undefined) {
for (let key of Object.keys(currentQuery.fetch_only)) {
if (currentQuery.fetch_only[key] == null)
delete currentQuery.fetch_only[key];
}
}
let query_items = { 'current_query': currentQuery };
let url = '/collection/' + this.filter.collection_id + '/facets/' + this.filter.metadatum.metadatum_id + `?getSelected=${getSelected}&`;
@ -126,7 +145,9 @@ export const filter_type_mixin = {
url += `&search=${search}`;
}
return axios.get(url + '&fetch_only[0]=thumbnail&fetch_only[1]=title&fetch_only[2]=id&' + qs.stringify(query_items))
return new Object ({
request:
axios.tainacan.get(url + '&fetch_only[0]=thumbnail&fetch_only[1]=title&fetch_only[2]=id&' + qs.stringify(query_items))
.then(res => {
let sResults = [];
let opts = [];
@ -191,6 +212,8 @@ export const filter_type_mixin = {
})
.catch(error => {
this.$console.error(error);
}),
source: source
});
}
}

View File

@ -78,16 +78,24 @@
loadOptions(){
this.isLoading = true;
// Cancels previous Request
if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.');
let promise = null;
promise = this.getValuesPlainText( this.metadatum, null, this.isRepositoryLevel );
promise.then(() => {
promise.request
.then(() => {
this.isLoading = false;
})
.catch( error => {
this.$console.error('error select', error );
this.isLoading = false;
});
// Search Request Token for cancelling
this.getOptionsValuesCancel = promise.source;
},
onSelect(value){
this.selected = value;

View File

@ -112,6 +112,10 @@
for(let val of this.selected)
valuesToIgnore.push( val.value );
// Cancels previous Request
if (this.getOptionsValuesCancel != undefined)
this.getOptionsValuesCancel.cancel('Facet search Canceled.');
if ( this.type === 'Tainacan\\Metadata_Types\\Relationship' ) {
let collectionTarget = ( this.metadatum_object && this.metadatum_object.metadata_type_options.collection_id ) ?
this.metadatum_object.metadata_type_options.collection_id : this.collection_id;
@ -121,10 +125,14 @@
promise = this.getValuesPlainText( this.metadatum, query, this.isRepositoryLevel, valuesToIgnore );
}
promise
promise.request
.catch( error => {
this.$console.log('error select', error );
});
// Search Request Token for cancelling
this.getOptionsValuesCancel = promise.source;
}, 500),
selectedValues(){
const instance = this;

View File

@ -104,7 +104,6 @@ export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, is
}),
source: source
})
};
export const deleteItem = ({ commit }, { itemId, isPermanently }) => {