44 lines
1.4 KiB
Handlebars
44 lines
1.4 KiB
Handlebars
|
<div class="is-flex-between is-flex-center" ...attributes>
|
||
|
|
<div class="is-fullwidth is-flex-center">
|
||
|
|
<p class="has-text-grey has-left-margin-l" data-test-page-display-info>
|
||
|
|
{{this.displayInfo}}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
<div class="is-fullwidth is-flex-v-centered">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="button is-flat has-short-padding"
|
||
|
|
disabled={{eq this.page 1}}
|
||
|
|
data-test-previous-page
|
||
|
|
{{on "click" (fn this.changePage (sub this.page 1))}}
|
||
|
|
>
|
||
|
|
<Icon @name="chevron-left" />
|
||
|
|
Previous
|
||
|
|
</button>
|
||
|
|
{{#each this.pages as |page|}}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="button is-flat has-left-margin-xxs {{if (eq this.page page) 'is-primary is-underlined is-active'}}"
|
||
|
|
data-test-page={{page}}
|
||
|
|
{{on "click" (fn this.changePage page)}}
|
||
|
|
>
|
||
|
|
{{page}}
|
||
|
|
</button>
|
||
|
|
{{/each}}
|
||
|
|
{{#if this.hasMorePages}}
|
||
|
|
<span class="has-text-grey has-left-margin-m" data-test-more-pages>...</span>
|
||
|
|
{{/if}}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="button is-flat has-short-padding has-left-margin-l"
|
||
|
|
disabled={{eq this.page this.totalPages}}
|
||
|
|
data-test-next-page
|
||
|
|
{{on "click" (fn this.changePage (add this.page 1))}}
|
||
|
|
>
|
||
|
|
Next
|
||
|
|
<Icon @name="chevron-right" />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{{! intentionally empty to place buttons in the middle }}
|
||
|
|
<div class="is-fullwidth"></div>
|
||
|
|
</div>
|