mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-03-11 02:12:21 -05:00
Added pagination to the links table on analytics page
refs https://github.com/TryGhost/Team/issues/1984
This commit is contained in:
parent
a05ef5ef95
commit
061ae9c018
3 changed files with 93 additions and 30 deletions
|
@ -95,36 +95,7 @@
|
|||
{{#if (is-empty this.links) }}
|
||||
{{!-- Empty state --}}
|
||||
{{else}}
|
||||
<h4 class="gh-main-section-header small bn">
|
||||
Newsletter clicks
|
||||
</h4>
|
||||
<div class="gh-post-analytics-box column">
|
||||
<div class="gh-links-list">
|
||||
{{#each this.links as |link|}}
|
||||
<div class="gh-links-list-item">
|
||||
<a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">{{link.link.title}}</a>
|
||||
<p class="gh-links-list-clicks">{{link.count.clicks}}</p>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{!-- TODO: Wire this pagination up
|
||||
<div class="gh-links-pagination">
|
||||
<div class="gh-links-pagination-progress">
|
||||
Showing 10-20 of 24
|
||||
</div>
|
||||
<div class="gh-links-pagination-actions">
|
||||
<button type="button" class="gh-links-pagination-action gh-links-pagination-prev">
|
||||
{{svg-jar "arrow-left-pagination"}}
|
||||
Previous
|
||||
</button>
|
||||
<button type="button" class="gh-links-pagination-action gh-links-pagination-next">
|
||||
Next
|
||||
{{svg-jar "arrow-right-pagination"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
--}}
|
||||
</div>
|
||||
</div>
|
||||
<Posts::LinksTable @links={{this.links}} />
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
||||
|
|
30
ghost/admin/app/components/posts/links-table.hbs
Normal file
30
ghost/admin/app/components/posts/links-table.hbs
Normal file
|
@ -0,0 +1,30 @@
|
|||
<h4 class="gh-main-section-header small bn">
|
||||
Newsletter clicks
|
||||
</h4>
|
||||
<div class="gh-post-analytics-box column">
|
||||
<div class="gh-links-list">
|
||||
{{#each this.visibleLinks as |link|}}
|
||||
<div class="gh-links-list-item">
|
||||
<a href="{{link.link.to}}" target="_blank" rel="noopener noreferrer">{{link.link.title}}</a>
|
||||
<p class="gh-links-list-clicks">{{link.count.clicks}}</p>
|
||||
</div>
|
||||
{{/each}}
|
||||
{{#if this.showPagination }}
|
||||
<div class="gh-links-pagination" >
|
||||
<div class="gh-links-pagination-progress">
|
||||
Showing {{this.startOffset}}-{{this.endOffset}} of {{this.totalLinks}}
|
||||
</div>
|
||||
<div class="gh-links-pagination-actions">
|
||||
<button type="button" class="gh-links-pagination-action gh-links-pagination-prev" {{on "click" this.openPreviousPage}} disabled={{this.disablePreviousPage}}>
|
||||
{{svg-jar "arrow-left-pagination"}}
|
||||
Previous
|
||||
</button>
|
||||
<button type="button" class="gh-links-pagination-action gh-links-pagination-next" {{on "click" this.openNextPage}} disabled={{this.disableNextPage}}>
|
||||
Next
|
||||
{{svg-jar "arrow-right-pagination"}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
62
ghost/admin/app/components/posts/links-table.js
Normal file
62
ghost/admin/app/components/posts/links-table.js
Normal file
|
@ -0,0 +1,62 @@
|
|||
import Component from '@glimmer/component';
|
||||
import {action} from '@ember/object';
|
||||
import {tracked} from '@glimmer/tracking';
|
||||
|
||||
const PAGE_SIZE = 10;
|
||||
|
||||
export default class LinksTable extends Component {
|
||||
@tracked page = 1;
|
||||
|
||||
get links() {
|
||||
return this.args.links;
|
||||
}
|
||||
|
||||
get visibleLinks() {
|
||||
return this.links.slice(this.startOffset - 1, this.endOffset);
|
||||
}
|
||||
|
||||
get startOffset() {
|
||||
return (this.page - 1) * PAGE_SIZE + 1;
|
||||
}
|
||||
|
||||
get endOffset() {
|
||||
return Math.min(this.page * PAGE_SIZE, this.links.length);
|
||||
}
|
||||
|
||||
get totalPages() {
|
||||
return Math.ceil(this.links.length / PAGE_SIZE);
|
||||
}
|
||||
|
||||
get totalLinks() {
|
||||
return this.links.length;
|
||||
}
|
||||
|
||||
get showPagination() {
|
||||
return this.totalPages > 1;
|
||||
}
|
||||
|
||||
get disablePreviousPage() {
|
||||
return this.page === 1;
|
||||
}
|
||||
|
||||
get disableNextPage() {
|
||||
return this.page === this.totalPages;
|
||||
}
|
||||
|
||||
@action
|
||||
openPreviousPage() {
|
||||
if (this.disablePreviousPage) {
|
||||
return;
|
||||
}
|
||||
this.page -= 1;
|
||||
}
|
||||
|
||||
@action
|
||||
openNextPage() {
|
||||
if (this.disableNextPage) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.page += 1;
|
||||
}
|
||||
}
|
Loading…
Add table
Reference in a new issue