diff --git a/ghost/admin/app/components/posts/analytics.hbs b/ghost/admin/app/components/posts/analytics.hbs index f0c7451546..3b43573233 100644 --- a/ghost/admin/app/components/posts/analytics.hbs +++ b/ghost/admin/app/components/posts/analytics.hbs @@ -95,36 +95,7 @@ {{#if (is-empty this.links) }} {{!-- Empty state --}} {{else}} -

- Newsletter clicks -

-
- -
+ {{/if}} {{/if}} diff --git a/ghost/admin/app/components/posts/links-table.hbs b/ghost/admin/app/components/posts/links-table.hbs new file mode 100644 index 0000000000..eb40561897 --- /dev/null +++ b/ghost/admin/app/components/posts/links-table.hbs @@ -0,0 +1,30 @@ +

+ Newsletter clicks +

+
+ +
diff --git a/ghost/admin/app/components/posts/links-table.js b/ghost/admin/app/components/posts/links-table.js new file mode 100644 index 0000000000..daed9ec14c --- /dev/null +++ b/ghost/admin/app/components/posts/links-table.js @@ -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; + } +}