Pagination Fix

controllers.application\.js

import Controller from '@ember/controller';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  shared = {
    page: 0,
    pageUI: 1,
    pageCount: 10,
    startIndexAtZero: true
  }

  @action
  setPage(pg) {
    //this.set('shared', null);
    this.set('shared', {
      page: pg - 1,
      pageUI: pg,
      pageCount: 10,
      startIndexAtZero: true
    });
    console.log(this.shared);
  }
}

templates.application\.hbs

<Test @shared={{this.shared}} @setPage={{this.setPage}} />

test.component\.js

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';
import { debug } from '@ember/debug';

export default class extends Component {
  get page() { return this.args.shared?.page; }
  get startIndexAtZero() { return this.args.shared?.startIndexAtZero; }
  get pageCount() { return this.args.shared?.pageCount; }
  
  @tracked pageNumber = this.args.shared?.pageUI;

  get startIndex() { return (this.startIndexAtZero) ? 0 : 1; }

  get hasNextPage() {
    if (this.pageCount) {
      return (this.startIndexAtZero) ?
        this.page < this.pageCount - 1 :
        this.page < this.pageCount;
    }

    return false;
  }

	get hasPrevPage() { return this.page > this.startIndex; }
  get hasNoNextPage() { return !this.hasNextPage; }
  get hasNoPrevPage() { return !this.hasPrevPage; }

  @action
  firstPage() {
    debug('First page.');
    this.args.setPage(1);
    this.pageNumber = 1;
  }

  @action
  prevPage() {
    debug('Previous page.');
    this.args.setPage(this.pageNumber - 1);
    this.pageNumber = this.pageNumber - 1;
  }

  @action
  nextPage() {
    debug('Next page.');
    this.args.setPage(this.pageNumber + 1);
    this.pageNumber = this.pageNumber + 1;
  }

  @action
  lastPage() {
    debug('Last page.');
    this.args.setPage(this.pageCount);
    this.pageNumber = this.pageCount;
  }
}

test.template\.hbs

<div>
  <button
    disabled={{this.hasNoPrevPage}}
    {{on "click" this.firstPage}}
  >First</button>

  <button
    disabled={{this.hasNoPrevPage}}
    {{on "click" this.prevPage}}
  >Prev</button>
  
  <div>
    <Input @value={{this.pageNumber}} /> of {{this.pageCount}}
  </div>

  <button
    disabled={{this.hasNoNextPage}}
    {{on "click" this.nextPage}}
  >Next</button>

  <button 
    disabled={{this.hasNoNextPage}}
    {{on "click" this.lastPage}}
  >Last</button>
</div>

<p>
Has No Prev Page: {{this.hasNoPrevPage}}
<br>
Has No Next Page: {{this.hasNoNextPage}}
<br>
Shared Page: {{@shared.page}} | This page {{this.page}} | Start Index: {{this.startIndex}}
</p>

twiddle\.json

{
  "version": "0.17.0",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": true,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "@glimmer/tracking": "^1.0.0",
    "ember": "3.17.0",
    "ember-template-compiler": "3.17.0",
    "ember-testing": "3.17.0"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "ember-truth-helpers": "2.1.0"
  }
}