diff --git a/app/components/pagination.hbs b/app/components/pagination.hbs new file mode 100644 index 0000000..786fefd --- /dev/null +++ b/app/components/pagination.hbs @@ -0,0 +1,46 @@ +{{#if (gt this.totalPages 1)}} + +{{/if}} diff --git a/app/components/pagination.js b/app/components/pagination.js new file mode 100644 index 0000000..71afca1 --- /dev/null +++ b/app/components/pagination.js @@ -0,0 +1,65 @@ +import Component from '@glimmer/component'; +import { inject as service } from '@ember/service'; + +export default class PaginationComponent extends Component { + @service router; + + numberPagesToShow = 2; + + get availablePages() { + const availablePages = []; + + for (let i = 1; i <= this.totalPages; i++) { + if (i === this.args.current) { + availablePages.push(i); + } else if ( + i < this.args.current && + i >= this.args.current - this.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 + ) { + availablePages.push(i); + } + } + + const firstPage = availablePages[0]; + if (firstPage > 1) { + if (firstPage - 1 > 1) { + availablePages.unshift('...'); + } + + availablePages.unshift(1); + } + + const lastPage = availablePages[availablePages.length - 1]; + if (lastPage < this.totalPages) { + if (lastPage + 1 < this.totalPages) { + availablePages.push('...'); + } + + availablePages.push(this.totalPages); + } + + return availablePages; + } + + get totalPages() { + return Math.ceil(this.args.count / this.args.perPage); + } + + get previousPage() { + return this.args.current > 1 ? this.args.current - 1 : null; + } + + get nextPage() { + return this.args.current < this.totalPages ? this.args.current + 1 : null; + } +} diff --git a/app/controllers/admin/indexes/item/data.js b/app/controllers/admin/indexes/item/data.js index 4cd4fc7..f3266c9 100644 --- a/app/controllers/admin/indexes/item/data.js +++ b/app/controllers/admin/indexes/item/data.js @@ -5,6 +5,8 @@ import { trackedFunction } from 'ember-resources'; export default class AdminIndexesItemDataController extends Controller { @tracked searchText = 'hello'; + @tracked offset = 0; + @tracked page = 0; request = trackedFunction(this, async () => { if (typeof this.searchText !== 'string' || this.searchText.length < 1) { diff --git a/app/routes/admin/indexes.js b/app/routes/admin/indexes.js index 7a7b9e3..bd4192e 100644 --- a/app/routes/admin/indexes.js +++ b/app/routes/admin/indexes.js @@ -3,7 +3,6 @@ import Route from '@ember/routing/route'; export default class AdminIndexesRoute extends Route { // @service meilisearch; - // async model() { // return this.modelFor('admin'); // } diff --git a/app/templates/admin/indexes/item/data.hbs b/app/templates/admin/indexes/item/data.hbs index 095d2a4..c458801 100644 --- a/app/templates/admin/indexes/item/data.hbs +++ b/app/templates/admin/indexes/item/data.hbs @@ -21,7 +21,7 @@

Results:

{{#each this.data.hits as |item|}} -
+
{{#each-in item as |key value|}}
{{key}}
@@ -32,4 +32,10 @@ {{/each}}
+ + {{/if}} diff --git a/package-lock.json b/package-lock.json index a541c28..5f4abd8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54,6 +54,7 @@ "ember-resources": "^4.4.0", "ember-source": "~4.2.0", "ember-template-lint": "^4.2.0", + "ember-truth-helpers": "^3.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.4.0", "eslint-plugin-ember": "^10.5.9", @@ -13442,6 +13443,18 @@ "node": ">=8.17.0" } }, + "node_modules/ember-truth-helpers": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ember-truth-helpers/-/ember-truth-helpers-3.0.0.tgz", + "integrity": "sha512-hPKG9QqruAELh0li5xaiLZtr88ioWYxWCXisAWHWE0qCP4a2hgtuMzKUPpiTCkltvKjuqpzTZCU4VhQ+IlRmew==", + "dev": true, + "dependencies": { + "ember-cli-babel": "^7.22.1" + }, + "engines": { + "node": "10.* || >= 12.*" + } + }, "node_modules/emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", @@ -35053,6 +35066,15 @@ } } }, + "ember-truth-helpers": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/ember-truth-helpers/-/ember-truth-helpers-3.0.0.tgz", + "integrity": "sha512-hPKG9QqruAELh0li5xaiLZtr88ioWYxWCXisAWHWE0qCP4a2hgtuMzKUPpiTCkltvKjuqpzTZCU4VhQ+IlRmew==", + "dev": true, + "requires": { + "ember-cli-babel": "^7.22.1" + } + }, "emoji-regex": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", diff --git a/package.json b/package.json index 86cf7d5..1d60723 100644 --- a/package.json +++ b/package.json @@ -74,6 +74,7 @@ "ember-resources": "^4.4.0", "ember-source": "~4.2.0", "ember-template-lint": "^4.2.0", + "ember-truth-helpers": "^3.0.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.4.0", "eslint-plugin-ember": "^10.5.9", diff --git a/tests/integration/components/pagination-test.js b/tests/integration/components/pagination-test.js new file mode 100644 index 0000000..5d9b030 --- /dev/null +++ b/tests/integration/components/pagination-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | pagination', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +});