Refactore pagination

app/components/pagination.hbs

@@ -12,7 +12,7 @@
         <LinkTo
           @route={{this.router.currentRouteName}}
           @models={{if @model (array @model) (array)}}
-          @query={{hash page=this.previousPage}}
+          @query={{hash offset=(dec @limit @offset)}}
           class={{commonClasses}}
           title='Previous page'
         >
@@ -20,7 +20,7 @@
         </LinkTo>
       {{/if}}
       {{#each this.availablePages as |i|}}
-        {{#if (eq @current i)}}
+        {{#if (eq this.current i)}}
           <span class='{{commonClasses}} border rounded'>
             {{i}}
           </span>
@@ -32,7 +32,7 @@
           <LinkTo
             @route={{this.router.currentRouteName}}
             @models={{if @model (array @model) (array)}}
-            @query={{hash page=i}}
+            @query={{hash offset=(mul @limit (dec i))}}
             class={{commonClasses}}
           >
             {{i}}
@@ -43,7 +43,7 @@
         <LinkTo
           @route={{this.router.currentRouteName}}
           @models={{if @model (array @model) (array)}}
-          @query={{hash page=this.nextPage}}
+          @query={{hash offset=(inc @limit @offset)}}
           class={{commonClasses}}
           title='Next page'
         >

app/components/pagination.js

@@ -4,28 +4,16 @@ import { inject as service } from '@ember/service';
 export default class PaginationComponent extends Component {
   @service router;
 
-  numberPagesToShow = 2;
-
   get availablePages() {
     const availablePages = [];
+    const numberPagesToShow = 2;
 
     for (let i = 1; i <= this.totalPages; i++) {
-      if (i === this.args.current) {
+      if (i === this.current) {
         availablePages.push(i);
-      } else if (
-        i < this.args.current &&
-        i >= this.args.current - this.numberPagesToShow
-      ) {
+      } else if (i < this.current && i >= this.current - numberPagesToShow) {
         availablePages.push(i);
-      } else if (
-        i > this.args.current &&
-        i <= this.args.current + this.numberPagesToShow
-      ) {
-        availablePages.push(i);
-      } else if (
-        this.args.current > this.totalPages &&
-        i <= this.args.current + this.numberPagesToShow
-      ) {
+      } else if (i > this.current && i <= this.current + numberPagesToShow) {
         availablePages.push(i);
       }
     }
@@ -52,14 +40,18 @@ export default class PaginationComponent extends Component {
   }
 
   get totalPages() {
-    return Math.ceil(this.args.count / this.args.perPage);
+    return Math.ceil(this.args.total / this.args.limit);
   }
 
   get previousPage() {
-    return this.args.current > 1 ? this.args.current - 1 : null;
+    return this.args.offset - this.args.limit >= 0;
   }
 
   get nextPage() {
-    return this.args.current < this.totalPages ? this.args.current + 1 : null;
+    return this.args.offset + this.args.limit < this.args.total;
+  }
+
+  get current() {
+    return Math.ceil(this.args.offset / this.args.limit) + 1;
   }
 }

app/helpers/mul.js

@@ -0,0 +1,5 @@
+import { helper } from '@ember/component/helper';
+
+export default helper(function mul([a, b]) {
+  return Math.imul(a, b);
+});

app/routes/admin/indexes/item/documents/index.js

@@ -45,10 +45,20 @@ const searchSchema = {
 export default class AdminIndexesItemDocumentsIndexRoute extends Route {
   queryParams = {
     q: { refreshModel: true },
-    limit: { refreshModel: true },
     offset: { refreshModel: true },
-    sort: { refreshModel: true },
+    limit: { refreshModel: true },
+    filter: { refreshModel: true },
+    facets: { refreshModel: true },
     attributesToRetrieve: { refreshModel: true },
+    attributesToCrop: { refreshModel: true },
+    cropLength: { refreshModel: true },
+    cropMarker: { refreshModel: true },
+    attributesToHighlight: { refreshModel: true },
+    highlightPreTag: { refreshModel: true },
+    highlightPostTag: { refreshModel: true },
+    showMatchesPosition: { refreshModel: true },
+    sort: { refreshModel: true },
+    matchingStrategy: { refreshModel: true },
   };
 
   async model(options) {

app/templates/admin/indexes/item/documents/index.hbs

@@ -228,9 +228,9 @@
     {{@model.data.estimatedTotalHits}}
 
     <Pagination
-      @count={{@model.data.estimatedTotalHits}}
-      @current={{this.page}}
-      @perPage={{@model.data.limit}}
+      @total={{@model.data.estimatedTotalHits}}
+      @offset={{this.offset}}
+      @limit={{this.limit}}
       class='ml-auto'
     />
   </div>

tests/integration/helpers/mul-test.js

@@ -0,0 +1,17 @@
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'meiliadmin/tests/helpers';
+import { render } from '@ember/test-helpers';
+import { hbs } from 'ember-cli-htmlbars';
+
+module('Integration | Helper | mul', function (hooks) {
+  setupRenderingTest(hooks);
+
+  // TODO: Replace this with your real tests.
+  test('it renders', async function (assert) {
+    this.set('inputValue', '1234');
+
+    await render(hbs`{{mul this.inputValue}}`);
+
+    assert.dom(this.element).hasText('1234');
+  });
+});