Cancels http request on search event bus when new request are made before previous is finished.

src/admin/components/advanced-search/advanced-search.vue

@@ -638,6 +638,9 @@
                     }
                 }
             },
+        },
+        beforeDestroy() {
+            this.$root.$off('metadatumUpdated');
         }
     }
 </script>

src/admin/components/navigation/tainacan-header.vue

@@ -133,11 +133,13 @@
             },
         },
         created(){
-
             this.$root.$on('closeAdvancedSearchShortcut', () => {
                 this.$refs.advancedSearchShortcut.toggle();
             });
         },
+        beforeDestroy() {
+            this.$root.$off('closeAdvancedSearchShortcut');
+        }
     }
 </script>
 

src/admin/js/main.js

@@ -8,6 +8,8 @@ import Buefy from 'buefy';
 import VTooltip from 'v-tooltip';
 import { VueHammer } from 'vue2-hammer';
 import VueMasonry from 'vue-masonry-css';
+import draggable from 'vuedraggable';
+import VueTheMask from 'vue-the-mask';
 
 // Custom elements
 import Text from '../../classes/metadata-types/text/Text.vue';
@@ -38,13 +40,11 @@ import TainacanFiltersList from '../../classes/filter-types/tainacan-filter-item
 import AdminPage from '../admin.vue'
 import HelpButton from '../components/other/help-button.vue';
 import TainacanTitle from '../components/navigation/tainacan-title.vue';
-import draggable from 'vuedraggable'
 import store from '../../js/store/store'
 import router from './router'
 import eventBusSearch from '../../js/event-bus-search';
 import termsListBus from './terms-list-bus.js';
 import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin, UserCapabilitiesPlugin } from './utilities';
-import VueTheMask from 'vue-the-mask';
 
 // Configure and Register Plugins
 Vue.use(Buefy);

src/admin/pages/lists/items-page.vue

@@ -1235,6 +1235,7 @@
         beforeDestroy() {
             this.$off();
             window.removeEventListener('resize', this.adjustSearchControlHeight);
+            this.$root.$off('openAdvancedSearch');
             
             // Cancels previous Request
             if (this.$eventBusSearch.searchCancel != undefined)

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

@@ -59,7 +59,6 @@
                     this.$console.log(error);
                 });
 
-            
             this.$eventBusSearch.$on('removeFromFilterTag', (filterTag) => {
                 if (filterTag.filterId == this.filter.id)
                     this.cleanSearch();

src/js/axios/axios.js

@@ -13,5 +13,6 @@ export const wp = axios.create({
 wp.defaults.headers.common['X-WP-Nonce'] = tainacan_plugin.nonce;
 
 export const CancelToken = axios.CancelToken;
+export const isCancel = axios.isCancel;
 
-export default { tainacan, wp, CancelToken };
+export default { tainacan, wp, CancelToken, isCancel };

src/js/event-bus-search.js

@@ -14,8 +14,7 @@ export default {
                 termId: undefined,
                 searchCancel: undefined
             },
-            created(){
+            created() {
-                
                 this.$on('input', data => {
                     this.$store.dispatch('search/setPage', 1);
         
@@ -213,16 +212,16 @@ export default {
                     let error = this.errors.find( errorItem => errorItem.metadatum_id === filter_id );
                     return ( error ) ? error.errors : false;
                 },
-                listener(){
+                // listener(){
-                    const components = this.getAllComponents();
+                //     const components = this.getAllComponents();
-                    for (let eventElement of components){
+                //     for (let eventElement of components){
-                        eventElement.addEventListener('input', (event) => {
+                //         eventElement.addEventListener('input', (event) => {
-                            if( event.detail ) {
+                //             if( event.detail ) {
-                                this.add_metaquery( event.detail[0] );
+                //                 this.add_metaquery( event.detail[0] );
-                            }
+                //             }
-                        });
+                //         });
-                    }
+                //     }
-                },
+                // },
                 setPage(page) {
                     this.$store.dispatch('search/setPage', page);
                     this.updateURLQueries();

src/js/event-bus-web-components.js

@@ -24,21 +24,21 @@ export const eventBus = new Vue({
                 this.componentsTag.push( name );
             }
         },
-        listener(){
+        // listener(){
-            const components = this.getAllComponents();
+        //     const components = this.getAllComponents();
-            for (let eventElement of components){
+        //     for (let eventElement of components){
-                eventElement.addEventListener('input', (event) => {
+        //         eventElement.addEventListener('input', (event) => {
 
-                    if (event.detail && event.detail[0] ){
+        //             if (event.detail && event.detail[0] ){
-                        this.updateValue({
+        //                 this.updateValue({
-                            item_id: $(eventElement).attr("item_id"),
+        //                     item_id: $(eventElement).attr("item_id"),
-                            metadatum_id: $(eventElement).attr("metadatum_id"),
+        //                     metadatum_id: $(eventElement).attr("metadatum_id"),
-                            values: event.detail
+        //                     values: event.detail
-                        })
+        //                 })
-                    }
+        //             }
-                });
+        //         });
-            }
+        //     }
-        }, 
+        // }, 
         updateValue(data){
             
             this.$emit('isUpdatingValue', true);

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

@@ -1,11 +1,11 @@
-import axios, { CancelToken } from '../../../axios/axios';
+import axios from '../../../axios/axios';
 import qs from 'qs';
 
 // THE ITEMS SEARCH
 export const fetchItems = ({ rootGetters, dispatch, commit }, { collectionId, isOnTheme, termId, taxonomy }) => {
     commit('cleanItems');
 
-    const source = CancelToken.source();
+    const source = axios.CancelToken.source();
 
     return new Object({ 
         request: new Promise ((resolve, reject) => {