Adds request cancelation to facet load options search

src/admin/components/navigation/tainacan-collection-subheader.vue

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

src/admin/components/other/checkbox-radio-modal.vue

@@ -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;

src/classes/filter-types/autocomplete/Autocomplete.vue

@@ -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();
                 }

src/classes/filter-types/checkbox/Checkbox.vue

@@ -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
+                // 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(){
                 this.$emit('input', {

src/classes/filter-types/filter-types-mixin.js

@@ -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 => {
+                        .catch((thrown) => {
-                    this.$console.error(error);
+                            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
             });
         }
     }

src/classes/filter-types/selectbox/Selectbox.vue

@@ -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;

src/classes/filter-types/taginput/Taginput.vue

@@ -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;

src/js/store/modules/collection/actions.js

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