search

GovAlta / ui-components

ui-components contains the code you need to start building a user interface for Government of Alberta platforms and services.
Apache License 2.0
16 stars 25 forks source link

Pagination: Missing example #1680

Closed ArakTaiRoth closed 3 months ago

ArakTaiRoth commented 8 months ago

Info

We're missing an example on our website that used to be on our Storybook for the Pagination component. This example showcased a solution that allowed people to have a dropdown that allowed users to select how many items were shown per page. This dropdown was then made the leftmost element, and the pagination was pushed to the right. The below code will replicate this:

<goa-block alignment="center">
  <goa-block mb="m" alignment="center">
    Show
    <goa-dropdown
      (_change)="changePageCount($event)"
      value="10"
      width="8ch"
    >
      <goa-dropdown-item value="10"></goa-dropdown-item>
      <goa-dropdown-item value="20"></goa-dropdown-item>
      <goa-dropdown-item value="30"></goa-dropdown-item>
    </goa-dropdown>
    <span style="width: 50px"
      >of {{ this.users.length }}</span
    >
  </goa-block>
  <goa-spacer hspacing="fill"></goa-spacer>
  <goa-pagination
    [itemcount]="users.length"
    [perpagecount]="perPage"
    [pagenumber]="page"
    (_change)="handlePageChange($event)"
  >
  </goa-pagination>
</goa-block>

With the result looking like this: image (9)

Acceptance Criteria:

  1. We have a documented example added to our Pagination component of how to create a Dropdown select to change the amount of records shown per page
  2. Need to figure out the code for the changePageCount function, to actually change the amount of items shown per page and make it function as expected
tzuge commented 3 months ago

:tada: This issue has been resolved in version 1.17.0-alpha.90 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 3 months ago

:tada: This issue has been resolved in version 1.24.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 3 months ago

:tada: This issue has been resolved in version 4.23.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 3 months ago

:tada: This issue has been resolved in version 4.17.0-alpha.35 :tada:

The release is available on:

Your semantic-release bot :package::rocket:

tzuge commented 1 month ago

:tada: This issue has been resolved in version 3.0.0-alpha.5 :tada:

The release is available on:

Your semantic-release bot :package::rocket: