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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/admin/components/navigation/tainacan-collection-subheader.vue
View File

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

11
src/admin/components/other/checkbox-radio-modal.vue
View File

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

12
src/classes/filter-types/autocomplete/Autocomplete.vue
View File

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

43
src/classes/filter-types/checkbox/Checkbox.vue
View File

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

265
src/classes/filter-types/filter-types-mixin.js
View File

@ -1,10 +1,11 @@
import qs from 'qs'; import qs from 'qs';
import { tainacan as axios } from '../../js/axios/axios'; import axios from '../../js/axios/axios';
export const filter_type_mixin = { export const filter_type_mixin = {
data () { data () {
return { return {
thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png' thumbPlaceholderPath: tainacan_plugin.base_url + '/admin/images/placeholder_square.png',
getOptionsValuesCancel: undefined
} }
}, },
props: { props: {
@ -19,10 +20,15 @@ export const filter_type_mixin = {
}, },
methods: { methods: {
getValuesPlainText(metadatumId, search, isRepositoryLevel, valuesToIgnore, offset, number, isInCheckboxModal, getSelected = '0') { getValuesPlainText(metadatumId, search, isRepositoryLevel, valuesToIgnore, offset, number, isInCheckboxModal, getSelected = '0') {
const source = axios.CancelToken.source();
let currentQuery = JSON.parse(JSON.stringify(this.query)); let currentQuery = JSON.parse(JSON.stringify(this.query));
for (let key of Object.keys(currentQuery.fetch_only)) { if (currentQuery.fetch_only != undefined) {
if (currentQuery.fetch_only[key] == null) for (let key of Object.keys(currentQuery.fetch_only)) {
delete currentQuery.fetch_only[key]; if (currentQuery.fetch_only[key] == null)
delete currentQuery.fetch_only[key];
}
} }
let query_items = { 'current_query': currentQuery }; let query_items = { 'current_query': currentQuery };
@ -44,74 +50,87 @@ export const filter_type_mixin = {
url += qs.stringify(query_items); url += qs.stringify(query_items);
} }
return axios.get(url) return new Object ({
.then(res => { request:
let sResults = []; axios.tainacan.get(url, { cancelToken: source.token })
let opts = []; .then(res => {
let sResults = [];
let opts = [];
for (let metadata of res.data) { for (let metadata of res.data) {
if (valuesToIgnore != undefined && valuesToIgnore.length > 0) { if (valuesToIgnore != undefined && valuesToIgnore.length > 0) {
let indexToIgnore = valuesToIgnore.findIndex(value => value == metadata.value); let indexToIgnore = valuesToIgnore.findIndex(value => value == metadata.value);
if (search && isInCheckboxModal) { if (search && isInCheckboxModal) {
sResults.push({ sResults.push({
label: metadata.label, label: metadata.label,
value: metadata.value value: metadata.value
}); });
} else if (indexToIgnore < 0) { } else if (indexToIgnore < 0) {
opts.push({ opts.push({
label: metadata.label, label: metadata.label,
value: metadata.value value: metadata.value
}); });
}
} else {
if (search && isInCheckboxModal) {
sResults.push({
label: metadata.label,
value: metadata.value
});
} else {
opts.push({
label: metadata.label,
value: metadata.value
});
}
}
} }
} else {
if (search && isInCheckboxModal) {
sResults.push({ this.searchResults = sResults;
label: metadata.label,
value: metadata.value if (opts.length) {
}); this.options = opts;
} else if(!search) {
this.noMorePage = 1;
}
if(this.options.length < this.maxNumOptionsCheckboxList && !search){
this.noMorePage = 1;
}
if (this.filter.max_options && this.options.length >= this.filter.max_options) {
let seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
if(this.options.length === this.filter.max_options){
this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink;
} else {
this.options[this.options.length-1].seeMoreLink = seeMoreLink;
}
}
})
.catch((thrown) => {
if (axios.isCancel(thrown)) {
console.log('Request canceled: ', thrown.message);
} else { } else {
opts.push({ reject(thrown);
label: metadata.label,
value: metadata.value
});
} }
} }),
} source: source
});
this.searchResults = sResults;
if (opts.length) {
this.options = opts;
} else if(!search) {
this.noMorePage = 1;
}
if(this.options.length < this.maxNumOptionsCheckboxList && !search){
this.noMorePage = 1;
}
if (this.filter.max_options && this.options.length >= this.filter.max_options) {
let seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
if(this.options.length === this.filter.max_options){
this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink;
} else {
this.options[this.options.length-1].seeMoreLink = seeMoreLink;
}
}
})
.catch(error => {
this.$console.error(error);
});
}, },
getValuesRelationship(collectionTarget, search, valuesToIgnore, offset, number, isInCheckboxModal, getSelected = '0') { getValuesRelationship(collectionTarget, search, valuesToIgnore, offset, number, isInCheckboxModal, getSelected = '0') {
const source = axios.CancelToken.source();
let currentQuery = JSON.parse(JSON.stringify(this.query)); let currentQuery = JSON.parse(JSON.stringify(this.query));
for (let key of Object.keys(currentQuery.fetch_only)) { if (currentQuery.fetch_only != undefined) {
if (currentQuery.fetch_only[key] == null) for (let key of Object.keys(currentQuery.fetch_only)) {
delete currentQuery.fetch_only[key]; if (currentQuery.fetch_only[key] == null)
delete currentQuery.fetch_only[key];
}
} }
let query_items = { 'current_query': currentQuery }; let query_items = { 'current_query': currentQuery };
let url = '/collection/' + this.filter.collection_id + '/facets/' + this.filter.metadatum.metadatum_id + `?getSelected=${getSelected}&`; let url = '/collection/' + this.filter.collection_id + '/facets/' + this.filter.metadatum.metadatum_id + `?getSelected=${getSelected}&`;
@ -126,72 +145,76 @@ export const filter_type_mixin = {
url += `&search=${search}`; 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 ({
.then(res => { request:
let sResults = []; axios.tainacan.get(url + '&fetch_only[0]=thumbnail&fetch_only[1]=title&fetch_only[2]=id&' + qs.stringify(query_items))
let opts = []; .then(res => {
let sResults = [];
let opts = [];
if (res.data.length > 0) { if (res.data.length > 0) {
for (let item of res.data) { for (let item of res.data) {
if (valuesToIgnore != undefined && valuesToIgnore.length > 0) { if (valuesToIgnore != undefined && valuesToIgnore.length > 0) {
let indexToIgnore = valuesToIgnore.findIndex(value => value == item.value); let indexToIgnore = valuesToIgnore.findIndex(value => value == item.value);
if (search && isInCheckboxModal) { if (search && isInCheckboxModal) {
sResults.push({ sResults.push({
label: item.label, label: item.label,
value: item.value value: item.value
}); });
} else if (indexToIgnore < 0) { } else if (indexToIgnore < 0) {
opts.push({ opts.push({
label: item.label, label: item.label,
value: item.value, value: item.value,
img: (item.img ? item.img : this.thumbPlaceholderPath) img: (item.img ? item.img : this.thumbPlaceholderPath)
}); });
} }
} else { } else {
if (search && isInCheckboxModal) { if (search && isInCheckboxModal) {
sResults.push({ sResults.push({
label: item.label, label: item.label,
value: item.value, value: item.value,
img: (item.img ? item.img : this.thumbPlaceholderPath) img: (item.img ? item.img : this.thumbPlaceholderPath)
}); });
} else { } else {
opts.push({ opts.push({
label: item.label, label: item.label,
value: item.value, value: item.value,
img: (item.img ? item.img : this.thumbPlaceholderPath) img: (item.img ? item.img : this.thumbPlaceholderPath)
}); });
}
}
} }
} }
}
}
this.searchResults = sResults; this.searchResults = sResults;
if (opts.length) { if (opts.length) {
this.options = opts; this.options = opts;
} else { } else {
this.noMorePage = 1; this.noMorePage = 1;
} }
if(this.options.length < this.maxNumOptionsCheckboxList){ if(this.options.length < this.maxNumOptionsCheckboxList){
this.noMorePage = 1; this.noMorePage = 1;
} }
if (this.filter.max_options && this.options.length >= this.filter.max_options) { if (this.filter.max_options && this.options.length >= this.filter.max_options) {
let seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`; let seeMoreLink = `<a style="font-size: 0.75rem;"> ${ this.$i18n.get('label_view_all') } </a>`;
if(this.options.length === this.filter.max_options){ if(this.options.length === this.filter.max_options){
this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink; this.options[this.filter.max_options-1].seeMoreLink = seeMoreLink;
} else { } else {
this.options[this.options.length-1].seeMoreLink = seeMoreLink; this.options[this.options.length-1].seeMoreLink = seeMoreLink;
} }
} }
}) })
.catch(error => { .catch(error => {
this.$console.error(error); this.$console.error(error);
}); }),
source: source
});
} }
} }
}; };

22
src/classes/filter-types/selectbox/Selectbox.vue
View File

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

16
src/classes/filter-types/taginput/Taginput.vue
View File

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

1
src/js/store/modules/collection/actions.js
View File

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