From bed9ebe1152c2724219c844f208ffc0f8dd228ea Mon Sep 17 00:00:00 2001
From: Mateus Machado Luna <mateus.m.luna@gmail.com>
Date: Fri, 28 Feb 2020 15:31:25 -0300
Subject: [PATCH] Adds infinite scroll to collection cover page autocomplete.
 #335.

---
 .../edition/collection-edition-form.vue       | 47 ++++++++++++++++---
 .../relationship/Relationship.vue             |  4 +-
 .../js/store/modules/collection/actions.js    |  9 ++--
 3 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/src/views/admin/components/edition/collection-edition-form.vue b/src/views/admin/components/edition/collection-edition-form.vue
index 847598dd0..3125a563d 100644
--- a/src/views/admin/components/edition/collection-edition-form.vue
+++ b/src/views/admin/components/edition/collection-edition-form.vue
@@ -120,10 +120,12 @@
                                 v-model="coverPageTitle"
                                 @select="onSelectCoverPage($event)"
                                 :loading="isFetchingPages"
-                                @input="fecthCoverPages($event)"
+                                @input="fecthCoverPages"
                                 @focus="clearErrors('cover_page_id')"
                                 v-if="coverPage == undefined || coverPage.title == undefined"
-                                :disabled="form.enable_cover_page != 'yes'">
+                                :disabled="form.enable_cover_page != 'yes'"
+                                check-infinite-scroll
+                                @infinite-scroll="fetchMoreCoverPages">
                             <template slot-scope="props">
                                 {{ props.option.title.rendered }}
                             </template>
@@ -533,6 +535,8 @@ export default {
             cover: {},
             isFetchingPages: false,
             coverPages: [],
+            coverPagesSearchQuery: '',
+            coverPagesSearchPage: 0,
             coverPage: '',
             coverPageTitle: '',
             coverPageEditPath: '',
@@ -819,18 +823,47 @@ export default {
             let index = this.form.enabled_view_modes.findIndex(aViewMode => aViewMode == viewMode);
             return index > -1;
         },
-        fecthCoverPages(search) {
+        fecthCoverPages: _.debounce(function(search) {
+
+            // String update
+            if (search != this.coverPagesSearchQuery) {
+                this.coverPagesSearchQuery = search;
+                this.coverPages = [];
+                this.coverPagesSearchPage = 1;
+            } 
+            
+            // String cleared
+            if (!search.length) {
+                this.coverPagesSearchQuery = search;
+                this.coverPages = [];
+                this.coverPagesSearchPage = 1;
+            }
+
+            // No need to load more
+            if (this.coverPagesSearchPage > 1 && this.coverPages.length > this.totalPages*12)
+                return;
+
             this.isFetchingPages = true;
-            this.fetchPages(search)
-                .then((pages) => {
-                    this.coverPages = pages;
+            this.fetchPages({ search: this.coverPagesSearchQuery, page: this.coverPagesSearchPage })
+                .then((res) => {
+                    if (res.pages) {
+                        for (let page of res.pages)
+                            this.coverPages.push(page); 
+                    }
+                    if (res.totalPages)
+                        this.totalPages = res.totalPages;
+
+                    this.coverPagesSearchPage++;
                     this.isFetchingPages = false;
                 })
                 .catch((error) => {
                     this.$console.error(error);
                     this.isFetchingPages = false;
                 });
-        },
+        }, 500),
+        fetchMoreCoverPages: _.debounce(function () {
+            this.fecthCoverPages(this.coverPagesSearchQuery)
+        }, 250),
         onSelectCoverPage(selectedPage) { 
             this.form.cover_page_id = selectedPage.id; 
             this.coverPage = selectedPage;
diff --git a/src/views/admin/components/metadata-types/relationship/Relationship.vue b/src/views/admin/components/metadata-types/relationship/Relationship.vue
index c35fb2dc3..c6c936c5e 100644
--- a/src/views/admin/components/metadata-types/relationship/Relationship.vue
+++ b/src/views/admin/components/metadata-types/relationship/Relationship.vue
@@ -106,7 +106,7 @@
             },
             search: _.debounce(function(query) {
 
-                 // String update
+                // String update
                 if (query != this.searchQuery) {
                     this.searchQuery = query;
                     this.options = [];
@@ -121,7 +121,7 @@
                 }
 
                 // No need to load more
-                if (this.page > 1 && this.options.length >= this.totalItems)
+                if (this.page > 1 && this.options.length > this.totalItems*12)
                     return;
 
                 // There is already one value set and is not multiple
diff --git a/src/views/admin/js/store/modules/collection/actions.js b/src/views/admin/js/store/modules/collection/actions.js
index e9c07bc9c..a2bddfe7f 100644
--- a/src/views/admin/js/store/modules/collection/actions.js
+++ b/src/views/admin/js/store/modules/collection/actions.js
@@ -355,12 +355,13 @@ export const updateHeaderImage = ({ commit }, { collectionId, headerImageId }) =
 };
 
 // Collection Cover Page
-export const fetchPages = ({ commit }, search ) => {
+export const fetchPages = ({ commit }, { search, page } ) => {
     return new Promise((resolve, reject) => {
-        axios.wp.get('/pages?search=' + search)
+        axios.wp.get('/pages?search=' + search + '&page=' + page)
         .then(res => {
-            let pages = res.data;
-            resolve( pages );
+            const pages = res.data;
+            const totalPages = res.headers['x-wp-total'];
+            resolve( { pages, totalPages} );
         })
         .catch(error => {
             reject( error );