From 91b820ac70a9106431bfc270d6e99744b87866ca Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 28 Feb 2020 17:31:36 -0300
Subject: [PATCH] Adds infinite scroll to taxnomy filter taginput #335. Removes
 unecessary mixin from checkbox and taginput filters.

---
 .../filter-types/taxonomy/Checkbox.vue        | 13 ++++-
 .../filter-types/taxonomy/Taginput.vue        | 57 +++++++++++++++----
 src/views/admin/js/filter-types-mixin.js      |  2 +-
 3 files changed, 59 insertions(+), 13 deletions(-)

diff --git a/src/views/admin/components/filter-types/taxonomy/Checkbox.vue b/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
index c8119b3e6..b59485b21 100644
--- a/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
+++ b/src/views/admin/components/filter-types/taxonomy/Checkbox.vue
@@ -50,19 +50,25 @@
     import { tainacan as axios, CancelToken, isCancel } from '../../../js/axios';
     import { mapGetters } from 'vuex';
     import CheckboxRadioModal from '../../../components/modals/checkbox-radio-modal.vue';
-    import { filterTypeMixin, dynamicFilterTypeMixin } from '../../../js/filter-types-mixin';
+    import { filterTypeMixin } from '../../../js/filter-types-mixin';
     
     export default {
-        mixins: [ filterTypeMixin, dynamicFilterTypeMixin ],   
+        mixins: [ filterTypeMixin ],   
         data(){
             return {
                 isLoadingOptions: true,
+                getOptionsValuesCancel: undefined,
                 options: [],
                 selected: [],
                 taxonomy: '',
                 taxonomyId: ''
             }
         },
+        computed: {
+            facetsFromItemSearch() {
+                return this.getFacets();
+            }
+        },
         watch: {
             selected(newVal, oldVal) {
                 const isEqual = (newVal.length == oldVal.length) && newVal.every((element, index) => {
@@ -76,6 +82,9 @@
                 if (this.isUsingElasticSearch)
                     this.loadOptions();
             },
+            isLoadingItems() {
+                this.isLoadingOptions = this.isLoadingItems;
+            },
             'query.metaquery'() {
                 this.loadOptions();
             },
diff --git a/src/views/admin/components/filter-types/taxonomy/Taginput.vue b/src/views/admin/components/filter-types/taxonomy/Taginput.vue
index afbbec28c..01080413b 100644
--- a/src/views/admin/components/filter-types/taxonomy/Taginput.vue
+++ b/src/views/admin/components/filter-types/taxonomy/Taginput.vue
@@ -16,7 +16,9 @@
                 :class="{'has-selected': selected != undefined && selected != []}"
                 @typing="search"
                 @input="onSelect"
-                :placeholder="$i18n.get('info_type_to_add_terms')">
+                :placeholder="$i18n.get('info_type_to_add_terms')"
+                check-infinite-scroll
+                @infinite-scroll="searchMore">
             <template slot-scope="props">
                 <div class="media">
                     <div class="media-content">
@@ -39,20 +41,27 @@
 <script>
     import qs from 'qs';
     import { tainacan as axios } from '../../../js/axios';
-    import { filterTypeMixin, dynamicFilterTypeMixin } from '../../../js/filter-types-mixin';
+    import { filterTypeMixin } from '../../../js/filter-types-mixin';
     
     export default {
-        mixins: [ filterTypeMixin, dynamicFilterTypeMixin ],
+        mixins: [ filterTypeMixin ],
         data(){
             return {
+                isLoadingOptions: false,
                 results:'',
                 selected:[],
                 options: [],
                 taxonomy: '',
-                taxonomyId: ''
+                taxonomyId: '',
+                searchQuery: '',
+                totalFacets: 0,
+                offset: 0
             }
         },
         watch: {
+            isLoadingItems() {
+                this.isLoadingOptions = this.isLoadingItems;
+            },
             'query.taxquery'() {
                 this.updateSelectedValues();
             },
@@ -75,12 +84,32 @@
         },
         methods: {
             search: _.debounce( function(query) {
+
+                // String update
+                if (query != this.searchQuery) {
+                    this.searchQuery = query;
+                    this.options = [];
+                    this.offset = 0;
+                } 
+                
+                // String cleared
+                if (!query.length) {
+                    this.searchQuery = query;
+                    this.options = [];
+                    this.offset = 0;
+                }
+
+                // No need to load more
+                if (this.offset > 0 && this.options.length >= this.totalFacets)
+                    return
+
                 this.isLoadingOptions = true;
-                this.options = [];
                 
                 let query_items = { 
                     'current_query': this.query, 
-                    'search': query
+                    'search': this.searchQuery,
+                    'offset': this.offset,
+                    'number': 12
                 };
 
                 let endpoint = this.isRepositoryLevel ? '/facets/' + this.metadatumId : '/collection/'+ this.collectionId +'/facets/' + this.metadatumId;
@@ -88,7 +117,8 @@
                 endpoint += '?order=asc&' + qs.stringify(query_items);
                 
                 let valuesToIgnore = [];
-                for(let val of this.selected)
+
+                for (let val of this.selected)
                     valuesToIgnore.push( val.value );
                 
                 return axios.get(endpoint).then( res => {
@@ -97,7 +127,7 @@
                         if (valuesToIgnore != undefined && valuesToIgnore.length > 0) {
                             let indexToIgnore = valuesToIgnore.findIndex(value => value == term.value);
                             if (indexToIgnore < 0) {
-                                if( term.label.toLowerCase().indexOf( query.toLowerCase() ) >= 0 ){
+                                if (term.label.toLowerCase().indexOf( query.toLowerCase() ) >= 0){
                                     this.options.push({
                                         label: term.label, 
                                         value: term.value,
@@ -106,15 +136,19 @@
                                 }
                             }
                         } else {
-                            if( term.label.toLowerCase().indexOf( query.toLowerCase() ) >= 0 ){
+                            if (term.label.toLowerCase().indexOf( query.toLowerCase() ) >= 0){
                                 this.options.push({
                                     label: term.label,
                                     value: term.value,    
                                     total_items: term.total_items
                                 });
                             }
-                        }                                       
+                        } 
+                        
                     }
+                    
+                    this.totalFacets = res.headers['x-wp-total'];
+                    this.offset += 12;
                     this.isLoadingOptions = false;
                 })
                 .catch(error => {
@@ -122,6 +156,9 @@
                     this.$console.log(error);
                 });
             }, 500),
+            searchMore: _.debounce(function () {
+                this.search(this.searchQuery)
+            }, 250),
             updateSelectedValues(){
                 if ( !this.query || !this.query.taxquery || !Array.isArray( this.query.taxquery ) )
                     return false;
diff --git a/src/views/admin/js/filter-types-mixin.js b/src/views/admin/js/filter-types-mixin.js
index f34d9ad86..eae13ec30 100644
--- a/src/views/admin/js/filter-types-mixin.js
+++ b/src/views/admin/js/filter-types-mixin.js
@@ -31,7 +31,7 @@ export const dynamicFilterTypeMixin = {
         return {
             thumbPlaceholderPath: tainacan_plugin.base_url + '/assets/images/placeholder_square.png',
             getOptionsValuesCancel: undefined,
-            isLoadingOptions: false,
+            isLoadingOptions: false
         }
     },
     computed: {