Adds default value for max_options, Fixes Pagination (issue #83)

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

@@ -24,13 +24,19 @@
                     v-if="!isSearching && !isTaxonomy"
                     class="modal-card-body tainacan-checkbox-list-container">
                 <a
+                        v-if="checkboxListOffset"
                         role="button"
                         class="tainacan-checkbox-list-page-changer"
                         @click="beforePage">
                     <b-icon
                             icon="chevron-left"/>
                 </a>
-                <ul class="tainacan-modal-checkbox-list-body">
+                <ul
+                        :class="{
+                            'tainacan-modal-checkbox-list-body-dynamic-m-l': !checkboxListOffset,
+                            'tainacan-modal-checkbox-list-body-dynamic-m-r': noMorePage,
+                        }"
+                        class="tainacan-modal-checkbox-list-body">
                     <li
                             class="tainacan-li-checkbox-list"
                             v-for="(option, key) in options"
@@ -46,6 +52,7 @@
                             :active.sync="isCheckboxListLoading"/>
                 </ul>
                 <a
+                        v-if="!noMorePage"
                         role="button"
                         class="tainacan-checkbox-list-page-changer"
                         @click="nextPage">
@@ -196,6 +203,7 @@
                 collection: this.collection_id,
                 isCheckboxListLoading: false,
                 isSearchingLoading: false,
+                noMorePage: 0,
             }
         },
         created() {
@@ -208,10 +216,12 @@
         methods: {
             beforePage(){
                 this.checkboxListOffset -= this.maxNumOptionsCheckboxList;
+                this.noMorePage = 0;
+
+                //console.log(this.checkboxListOffset, this.maxNumOptionsCheckboxList);
 
                 if(this.checkboxListOffset < 0){
                     this.checkboxListOffset = 0;
-                    return;
                 }
 
                 this.isCheckboxListLoading = true;
@@ -219,7 +229,12 @@
                 this.getOptions(this.checkboxListOffset);
             },
             nextPage(){
-                this.checkboxListOffset = this.options.length;
+                if(!this.noMorePage) {
+                    this.checkboxListOffset += this.maxNumOptionsCheckboxList - 1;
+                }
+
+                // 0 20 / 19 20 / 39 20 / 59 20
+                //console.log(this.checkboxListOffset, this.maxNumOptionsCheckboxList);
 
                 this.isCheckboxListLoading = true;
 
@@ -611,6 +626,15 @@
         flex-direction: column;
         flex-wrap: wrap;
         padding: 0 !important;
+        max-height: 253px;
+    }
+
+    .tainacan-modal-checkbox-list-body-dynamic-m-l {
+        margin-left: 34px !important;
+    }
+
+    .tainacan-modal-checkbox-list-body-dynamic-m-r {
+        margin-right: 34px !important;
     }
 
     .tainacan-search-results-container {
@@ -623,6 +647,7 @@
         display: flex;
         flex-direction: column;
         flex-wrap: wrap;
+        max-height: 253px;
     }
 
     .tainacan-li-no-children {

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

@@ -112,9 +112,9 @@
                     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, null, 0, this.filter.max_options);
+                    promise = this.getValuesRelationship( collectionTarget, null, [], 0, this.filter.max_options);
                 } else {
-                    promise = this.getValuesPlainText( this.metadatum, null, this.isRepositoryLevel, 0, this.filter.max_options );
+                    promise = this.getValuesPlainText( this.metadatum, null, this.isRepositoryLevel, [], 0, this.filter.max_options );
                 }
 
                 promise.then(() => {

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

@@ -76,6 +76,8 @@ export const filter_type_mixin = {
 
                     if (opts.length) {
                         this.options = opts;
+                    } else {
+                        this.noMorePage = 1;
                     }
 
                     if (this.filter.max_options && this.options.length >= this.filter.max_options) {
@@ -145,6 +147,8 @@ export const filter_type_mixin = {
 
                     if (opts.length) {
                         this.options = opts;
+                    } else {
+                        this.noMorePage = 1;
                     }
 
                     if (this.filter.max_options && this.options.length >= this.filter.max_options) {

src/classes/repositories/class-tainacan-filters.php

@@ -90,7 +90,8 @@ class Filters extends Repository {
 			    'title'       => __( 'Max of options', 'tainacan' ),
 			    'type'        => 'integer/string',
 			    'description' => __( 'The max number of options to be showed in filter sidebar.', 'tainacan' ),
-			    'validation'  => ''
+			    'validation'  => '',
+			    'default'     => 4
 		    ]
         ]);
     }