✨ Introduce pagination to search results

src/components/QueryResults.vue

@@ -26,7 +26,7 @@
         >
           <li
             v-show = "showLayer(layer)"
-            v-for = "layer in state.layers"
+            v-for = "(layer, index) in state.layers"
           >
             <bar-loader :loading = "layer.loading"/>
             <div class = "box box-primary">
@@ -189,6 +189,17 @@
                   </i>
                 </button>
               </div>
+
+              <!-- PAGINATION LOAD BUTTON -->
+              <button
+                v-if        = "showPagination(index)"
+                class       = "btn skin-background-color"
+                style       = "font-weight: bold; width: 98%;"
+                @click.stop = "loadData(index)"
+              >
+                <i style = "color: #FFFFFF;" :class="g3wtemplate.font['ellips-h']"></i>
+              </button>
+
               <template v-if = "state.layeractiontool[layer.id].component">
                 <div
                   class  = "g3w-layer-action-tools with-border"
@@ -847,6 +858,27 @@
         box.querySelector(".btn-collapser").classList.add('fa-minus', collapsed);
       },
 
+      /**
+       * @since v3.11.0
+       * Check if we need to show load pagination data button
+       * @param index
+       * @return Boolean
+       */
+      showPagination(index) {
+        return (
+          this.state.query.page_size //check if pagination is set
+          && this.state.layers[index].features.length < this.state.query.counts[index] //features is less than total feature of query
+        );
+      },
+
+      /**
+       * @since v3.11.0
+       * @param index
+       */
+      loadPadinationData(index) {
+        this.$options.service.loadPaginationData(index);
+      }
+
     },
 
     watch: {

src/components/g3w-search.js

@@ -164,6 +164,8 @@ async function doSearch({
   state.searching = true;
 
   let data, parsed;
+  //For pagination purpose
+  const page_size = 5;
 
   try {
     data = await DataRouterService.getData('search:features', {
@@ -178,6 +180,8 @@ async function doSearch({
         feature_count,
         raw:        false, // in order to get a raw response
         autofilter: Number(show && state.autofilter), //0/1 autofilter by server,
+        page: 1,
+        page_size,
       },
       outputs: show && { title: state.title }
     });
@@ -218,7 +222,9 @@ async function doSearch({
           }),
           formatter: 1,
           feature_count,
-          autofilter: state.autofilter //Boolean autofilter by server
+          autofilter: state.autofilter, //Boolean autofilter by server
+          page: 1,
+          page_size,
         },
         outputs: {
           title: state.title

src/map/layers/layer.js

@@ -1798,7 +1798,10 @@ class Layer extends G3WObject {
                 suggest:   options.suggest,
                 /** @since 3.9.0 */
                 formatter: undefined !== options.formatter ? options.formatter : 1,
+                /** @since 3.11.0 */
                 autofilter: options.autofilter,
+                page:       options.page,
+                page_size:  options.page_size,
               })
             );
           } catch(e) {
@@ -1836,6 +1839,8 @@ class Layer extends G3WObject {
     queryUrl,
     ordering,
     autofilter, //@since 3.11.0
+    page,  //@since 3.11.0
+    page_size, //@since 3.11.0
   } = {}) {
     const provider        = this.getProvider('data');
     provider._projections = provider._projections || { map: null, layer: null };
@@ -1849,6 +1854,8 @@ class Layer extends G3WObject {
       ffield,
       filtertoken: ApplicationState.tokens.filtertoken,
       autofilter,
+      page,
+      page_size,
     };
     try {
       const url = queryUrl ? queryUrl : provider._layer.getUrl('data');
@@ -1872,7 +1879,8 @@ class Layer extends G3WObject {
             response:    response.vector.data,
             filtertoken: response.filtertoken, //@since v3.11.0 returned filtertoken in case of autofilter request
             projections: provider._projections,
-          })
+          }),
+          count: response.vector.count, //@since v3.11.0 take in account feature count (all). It use for pagination purpose
         }
       }
 

src/services/data.js

@@ -245,23 +245,32 @@ export default {
     formatter: 1,
     ordering,
     autofilter: 0,
+    //@since 3.11.0 pagination
+    page,
+    page_size,
   }) {
     const { layer, ...params } = options;
     params.filter              = [].concat(params.filter); // check if filter is array
-
+    //@since 3.11.0 count features returned by
+    const counts = [];
     return {
       data: (await Promise.allSettled(
         [].concat(layer).map((l, i) => l.searchFeatures({ ...params, filter: params.filter[i] }))
       ))
         .filter(d => 'fulfilled' === d.status)
         .map(({ value } = {}) => {
-          if (params.raw)                                        { return { data: value }; }
+          if ( params.page_size)  { counts.push(value.count) }
+          if (params.raw)                                         { return { data: value }; }
           if (Array.isArray(value.data) && value.data.length > 0) { return value.data[0]; }
         }),
       query: {
         type:       'search',
         search:     params.filter,
         autofilter: !!params.autofilter, //@since 3.11.0 set Boolean
+        //@since 3.11.0 pagination
+        page:       params.page && counts.map(() => params.page),
+        page_size:  params.page_size,
+        counts
       },
       type: 'api',
     };

src/services/queryresults.js

@@ -68,6 +68,7 @@ export default new (class QueryResultsService extends G3WObject {
        * @param { boolean }                            options.add                            - whether is a new query request (add/remove query request)
        */
       setQueryResponse(queryResponse, options = { add: false }) {
+        console.log(queryResponse)
 
         // set mandatory queryResponse fields
         if (!queryResponse.data)           queryResponse.data           = [];
@@ -579,6 +580,14 @@ export default new (class QueryResultsService extends G3WObject {
 
   }
 
+  /**
+   * @since 3.11.0
+   * Load pagination data
+   * @param index
+   */
+  loadPaginationData(index) {
+    console.log(index)
+  }
 
   /**
    * used by the following plugins: "qplotly"