Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-11 02:12:21 -05:00
Code Issues Activity

Added pagination to the links table on analytics page

Browse source 
refs https://github.com/TryGhost/Team/issues/1984
This commit is contained in:
Simon Backx 2022-09-29 13:00:30 +02:00
parent a05ef5ef95
commit 061ae9c018
3 changed files with 93 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
ghost/admin/app/components/posts/analytics.hbs
View file

@ -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
View 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
View 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;
}
}